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 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>

73
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 { 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>> {