From a99bf8efacd140bf932bb6bea4c4d88448ca3d10 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Thu, 29 Aug 2024 15:27:01 +0300
Subject: [PATCH] plan listing > refactor list ordering

---
 .../plan/listing/plan-listing.component.html  | 10 +--
 .../ui/plan/listing/plan-listing.component.ts | 75 +++++++++----------
 2 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.html b/frontend/src/app/ui/plan/listing/plan-listing.component.html
index 8cc675b8f..2bc2b7660 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.html
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.html
@@ -30,11 +30,11 @@
 						</div>
 						<div class="col-12 col-xl-auto order-3 order-xl-2">
 							<mat-form-field class="sort-form w-100">
-								<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
-									<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
-									<mat-option *ngIf="isPublic" [value]="order.PublishedAt">{{enumUtils.toRecentActivityOrderString(order.PublishedAt)}}</mat-option>
-									<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
-									<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
+								<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [(ngModel)]="sortBy" (selectionChange)="orderByChanged($event)">
+									<mat-option *ngIf="!isPublic" [value]="RecentActivityOrder.UpdatedAt">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.UpdatedAt)}}</mat-option>
+									<mat-option *ngIf="isPublic" [value]="RecentActivityOrder.PublishedAt">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.PublishedAt)}}</mat-option>
+									<mat-option [value]="RecentActivityOrder.Label">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.Label)}}</mat-option>
+									<mat-option *ngIf="!isPublic" [value]="RecentActivityOrder.Status">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.Status)}}</mat-option>
 								</mat-select>
 							</mat-form-field>
 						</div>
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.ts b/frontend/src/app/ui/plan/listing/plan-listing.component.ts
index ed0839169..fd4cd67ca 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.ts
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.ts
@@ -42,6 +42,8 @@ import { PrincipalService } from '@app/core/services/http/principal.service';
 import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
 import { PlanFilterDialogComponent } from './filtering/plan-filter-dialog/plan-filter-dialog.component';
 import { PlanListingFilters } from './filtering/plan-filter.component';
+import { Lookup } from '@common/model/lookup';
+import { MatSelectChange } from '@angular/material/select';
 
 @Component({
 	selector: 'app-plan-listing-component',
@@ -62,33 +64,27 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 	protected ITEMS_PER_PAGE = 5;
 	pageSize: number = 5;
 	filtersCount: number;
+
 	referenceFilters: ReferencesWithType[];
-	public formGroup = new UntypedFormBuilder().group({
-		like: new UntypedFormControl(),
-		order: new UntypedFormControl()
-	});
 
 	groupId: Guid | null = null;
 	mode;
 
 	scrollbar: boolean;
-	order = RecentActivityOrder;
+
+    RecentActivityOrder = RecentActivityOrder;
+    sortBy: RecentActivityOrder;
 
 	tenants: Tenant[];
 
-	private _sortDirection: SortDirection = SortDirection.Descending; //SortDirection.Descending: "-"
-	set sortDirection(sortDirection: SortDirection) {
-		this._sortDirection = sortDirection;
-	}
+
 	get isAscending(): boolean {
-		return this._sortDirection == SortDirection.Ascending;
+		return this.lookup?.order?.items?.[0].startsWith("-");
 	}
 	get isDescending(): boolean {
-		return this._sortDirection == SortDirection.Descending;
-	}
-	get sortingDirectionPrefix(): string {
-		return this.isAscending ? "+" : "-";
+		return this.lookup?.order?.items?.[0].startsWith("+");
 	}
+
 	get sortingTooltipText(): string {
 		return this.isAscending ? this.language.instant('PLAN-LISTING.ACTIONS.TOGGLE-ΑSCENDING') : this.language.instant('PLAN-LISTING.ACTIONS.TOGGLE-DESCENDING');
 	}
@@ -150,15 +146,7 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 				}
 				else if (!this.lookup) this.lookup = this.initializeLookup();
 
-				if ((this.formGroup.get('order')?.value == null || (!this.isAscending && !this.isDescending)) && this.lookup.order.items && this.lookup.order.items.length > 0) {
-
-					let ordering = this.lookup.order.items[0];
-					let sortBy = ordering.substring(1, ordering.length);
-
-					this.formGroup.get('order').setValue(this._getRecentActivityOrder(sortBy));
-					ordering.charAt(0) == '-' ? this.sortDirection = SortDirection.Descending : this.sortDirection = SortDirection.Ascending;
-				}
-
+                this.sortBy = this._getRecentActivityOrder(this.lookup.order.items[0]?.substring(1))
 				this.onPageLoad({ offset: this.lookup.page.offset / this.lookup.page.size } as PageLoadEvent);
 			});
 		
@@ -167,10 +155,6 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 				this.tenants = tenants;
 			});
 		}
-
-		// this.formGroup.get('like').valueChanges
-		// 	.pipe(takeUntil(this._destroyed), debounceTime(500))
-		// 	.subscribe(x => this.controlModified());
 	}
 
 	public dashboardTour: GuidedTour = {
@@ -286,21 +270,30 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 		this.filterChanged(this.lookup, true);
 	}
 
-	orderByChanged() {
-		if (this.formGroup.get('order').value == RecentActivityOrder.Status) {
-			this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.status)] };
-		} else if (this.formGroup.get('order').value == RecentActivityOrder.Label) {
-			this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.label)] };
-		} else if (this.formGroup.get('order').value == RecentActivityOrder.PublishedAt){
-			this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.finalizedAt)] };
-		}else {
-			this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.updatedAt)] };
-		}
+	orderByChanged($event: MatSelectChange) {
+        const value = $event.value as RecentActivityOrder;
+        const directionPrefix = this.isAscending ? '-' : '+';
+        switch(value){
+            case RecentActivityOrder.Status: {
+                this.lookup.order = { items: [directionPrefix + nameof<Plan>(x => x.status)] };
+                break;
+            }
+            case RecentActivityOrder.Label: {
+                this.lookup.order = { items: [directionPrefix + nameof<Plan>(x => x.label)] };
+                break;
+            }
+            case RecentActivityOrder.PublishedAt: {
+                this.lookup.order = { items: [directionPrefix + nameof<Plan>(x => x.finalizedAt)] };
+            }
+            default: {
+                this.lookup.order = { items: [directionPrefix + nameof<Plan>(x => x.updatedAt)] };
+                break;
+            }
+        }
 		this.filterChanged(this.lookup);
 	}
 
 	controlModified(): void {
-		//this.lookup.like = this.lookup.like != '' ? this.lookup.like : null;
 		this.lookup.page = { size: this.pageSize, offset: 0 };
 		this.filterChanged(this.lookup, true);
 	}
@@ -367,8 +360,10 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 	}
 
 	toggleSortDirection(): void {
-		this.sortDirection = this.isAscending ? this.sortDirection = SortDirection.Descending : this.sortDirection = SortDirection.Ascending;
-		this.orderByChanged();
+        const orderBy = this.lookup?.order?.items[0]?.substring(1) ?? nameof<Plan>(x => x.updatedAt);
+		const sortDirection = this.isAscending ? '+' : '-';
+		this.lookup.order.items = [`${sortDirection}${orderBy}`];
+        this.filterChanged(this.lookup);
 	}
 
 	private _loadUserTenants(): Observable<Array<Tenant>> {