MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

plan listing > refactor list ordering

This commit is contained in:
mchouliara 2024-08-29 15:27:01 +03:00
parent e2e337370b
commit a99bf8efac
2 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/ui/plan/listing/plan-listing.component.html
View File

@ -30,11 +30,11 @@
</div> </div>
<div class="col-12 col-xl-auto order-3 order-xl-2"> <div class="col-12 col-xl-auto order-3 order-xl-2">
<mat-form-field class="sort-form w-100"> <mat-form-field class="sort-form w-100">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()"> <mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [(ngModel)]="sortBy" (selectionChange)="orderByChanged($event)">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option> <mat-option *ngIf="!isPublic" [value]="RecentActivityOrder.UpdatedAt">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.UpdatedAt)}}</mat-option>
<mat-option *ngIf="isPublic" [value]="order.PublishedAt">{{enumUtils.toRecentActivityOrderString(order.PublishedAt)}}</mat-option> <mat-option *ngIf="isPublic" [value]="RecentActivityOrder.PublishedAt">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.PublishedAt)}}</mat-option>
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option> <mat-option [value]="RecentActivityOrder.Label">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option> <mat-option *ngIf="!isPublic" [value]="RecentActivityOrder.Status">{{enumUtils.toRecentActivityOrderString(RecentActivityOrder.Status)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>

75
frontend/src/app/ui/plan/listing/plan-listing.component.ts
View File

@ -42,6 +42,8 @@ import { PrincipalService } from '@app/core/services/http/principal.service';
import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service'; import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
import { PlanFilterDialogComponent } from './filtering/plan-filter-dialog/plan-filter-dialog.component'; import { PlanFilterDialogComponent } from './filtering/plan-filter-dialog/plan-filter-dialog.component';
import { PlanListingFilters } from './filtering/plan-filter.component'; import { PlanListingFilters } from './filtering/plan-filter.component';
import { Lookup } from '@common/model/lookup';
import { MatSelectChange } from '@angular/material/select';
@Component({ @Component({
selector: 'app-plan-listing-component', selector: 'app-plan-listing-component',
@ -62,33 +64,27 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
protected ITEMS_PER_PAGE = 5; protected ITEMS_PER_PAGE = 5;
pageSize: number = 5; pageSize: number = 5;
filtersCount: number; filtersCount: number;
referenceFilters: ReferencesWithType[]; referenceFilters: ReferencesWithType[];
public formGroup = new UntypedFormBuilder().group({
like: new UntypedFormControl(),
order: new UntypedFormControl()
});
groupId: Guid | null = null; groupId: Guid | null = null;
mode; mode;
scrollbar: boolean; scrollbar: boolean;
order = RecentActivityOrder;
RecentActivityOrder = RecentActivityOrder;
sortBy: RecentActivityOrder;
tenants: Tenant[]; tenants: Tenant[];
private _sortDirection: SortDirection = SortDirection.Descending; //SortDirection.Descending: "-"
set sortDirection(sortDirection: SortDirection) {
this._sortDirection = sortDirection;
}
get isAscending(): boolean { get isAscending(): boolean {
return this._sortDirection == SortDirection.Ascending; return this.lookup?.order?.items?.[0].startsWith("-");
} }
get isDescending(): boolean { get isDescending(): boolean {
return this._sortDirection == SortDirection.Descending; return this.lookup?.order?.items?.[0].startsWith("+");
}
get sortingDirectionPrefix(): string {
return this.isAscending ? "+" : "-";
} }
get sortingTooltipText(): string { get sortingTooltipText(): string {
return this.isAscending ? this.language.instant('PLAN-LISTING.ACTIONS.TOGGLE-ΑSCENDING') : this.language.instant('PLAN-LISTING.ACTIONS.TOGGLE-DESCENDING'); 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(); 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) { this.sortBy = this._getRecentActivityOrder(this.lookup.order.items[0]?.substring(1))
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.onPageLoad({ offset: this.lookup.page.offset / this.lookup.page.size } as PageLoadEvent); 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.tenants = tenants;
}); });
} }
// this.formGroup.get('like').valueChanges
// .pipe(takeUntil(this._destroyed), debounceTime(500))
// .subscribe(x => this.controlModified());
} }
public dashboardTour: GuidedTour = { public dashboardTour: GuidedTour = {
@ -286,21 +270,30 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
this.filterChanged(this.lookup, true); this.filterChanged(this.lookup, true);
} }
orderByChanged() { orderByChanged($event: MatSelectChange) {
if (this.formGroup.get('order').value == RecentActivityOrder.Status) { const value = $event.value as RecentActivityOrder;
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.status)] }; const directionPrefix = this.isAscending ? '-' : '+';
} else if (this.formGroup.get('order').value == RecentActivityOrder.Label) { switch(value){
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.label)] }; case RecentActivityOrder.Status: {
} else if (this.formGroup.get('order').value == RecentActivityOrder.PublishedAt){ this.lookup.order = { items: [directionPrefix + nameof<Plan>(x => x.status)] };
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.finalizedAt)] }; break;
}else { }
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Plan>(x => x.updatedAt)] }; 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); this.filterChanged(this.lookup);
} }
controlModified(): void { controlModified(): void {
//this.lookup.like = this.lookup.like != '' ? this.lookup.like : null;
this.lookup.page = { size: this.pageSize, offset: 0 }; this.lookup.page = { size: this.pageSize, offset: 0 };
this.filterChanged(this.lookup, true); this.filterChanged(this.lookup, true);
} }
@ -367,8 +360,10 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
} }
toggleSortDirection(): void { toggleSortDirection(): void {
this.sortDirection = this.isAscending ? this.sortDirection = SortDirection.Descending : this.sortDirection = SortDirection.Ascending; const orderBy = this.lookup?.order?.items[0]?.substring(1) ?? nameof<Plan>(x => x.updatedAt);
this.orderByChanged(); const sortDirection = this.isAscending ? '+' : '-';
this.lookup.order.items = [`${sortDirection}${orderBy}`];
this.filterChanged(this.lookup);
} }
private _loadUserTenants(): Observable<Array<Tenant>> { private _loadUserTenants(): Observable<Array<Tenant>> {