added sorting option on dmp and description listings
This commit is contained in:
parent
a867b4e6fd
commit
a6b30ec965
|
|
@ -44,10 +44,10 @@
|
|||
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
|
||||
<div class="row pt-4">
|
||||
<!-- Sort by -->
|
||||
<div class="col-12 col-xl-auto d-flex align-items-center">
|
||||
<div class="col-auto d-flex align-items-center order-1">
|
||||
<span class="mb-1 mb-xl-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto">
|
||||
<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>
|
||||
|
|
@ -58,8 +58,14 @@
|
|||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-auto order-2 order-xl-3">
|
||||
<button mat-icon-button (click)="toggleSortDirection()" [matTooltip]="sortingTooltipText">
|
||||
<mat-icon *ngIf="isAscending">keyboard_double_arrow_up</mat-icon>
|
||||
<mat-icon *ngIf="isDescending">keyboard_double_arrow_down</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- End of Sort by -->
|
||||
<div class="col-12 col-xl-auto ml-auto">
|
||||
<div class="col-12 col-xl-auto ml-auto order-4">
|
||||
<div class="row">
|
||||
<!-- Guided Tour -->
|
||||
<div class="col-12 col-xl-auto d-flex align-items-center">
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import { debounceTime, takeUntil } from 'rxjs/operators';
|
|||
import { nameof } from 'ts-simple-nameof';
|
||||
import { StartNewDescriptionDialogComponent } from '../start-new-description-dialog/start-new-description-dialog.component';
|
||||
import { DmpBlueprint, DmpBlueprintDefinition, DmpBlueprintDefinitionSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
|
||||
import { SortDirection } from '@common/modules/hybrid-listing/hybrid-listing.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-description-listing-component',
|
||||
|
|
@ -73,6 +74,23 @@ export class DescriptionListingComponent extends BaseComponent implements OnInit
|
|||
dmpText: string;
|
||||
descriptionText: string;
|
||||
|
||||
private _sortDirection: SortDirection = SortDirection.Descending; //SortDirection.Descending: "-"
|
||||
set sortDirection(sortDirection: SortDirection) {
|
||||
this._sortDirection = sortDirection;
|
||||
}
|
||||
get isAscending(): boolean {
|
||||
return this._sortDirection == SortDirection.Ascending;
|
||||
}
|
||||
get isDescending(): boolean {
|
||||
return this._sortDirection == SortDirection.Descending;
|
||||
}
|
||||
get sortingDirectionPrefix(): string {
|
||||
return this.isAscending ? "+" : "-";
|
||||
}
|
||||
get sortingTooltipText(): string {
|
||||
return this.isAscending ? this.language.instant('DESCRIPTION-LISTING.ACTIONS.TOGGLE-ΑSCENDING') : this.language.instant('DESCRIPTION-LISTING.ACTIONS.TOGGLE-DESCENDING');
|
||||
}
|
||||
|
||||
constructor(
|
||||
private descriptionService: DescriptionService,
|
||||
private router: Router,
|
||||
|
|
@ -184,11 +202,11 @@ export class DescriptionListingComponent extends BaseComponent implements OnInit
|
|||
|
||||
orderByChanged(){
|
||||
if (this.formGroup.get('order').value == RecentActivityOrder.Status){
|
||||
this.lookup.order = { items: ['-' + nameof<Dmp>(x => x.status)] };
|
||||
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Dmp>(x => x.status)] };
|
||||
} else if(this.formGroup.get('order').value == RecentActivityOrder.Label){
|
||||
this.lookup.order = { items: ['-' + nameof<Dmp>(x => x.label)] };
|
||||
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Dmp>(x => x.label)] };
|
||||
}else{
|
||||
this.lookup.order = { items: ['-' + nameof<Dmp>(x => x.updatedAt)] };
|
||||
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Dmp>(x => x.updatedAt)] };
|
||||
}
|
||||
this.refresh(this.lookup);
|
||||
}
|
||||
|
|
@ -394,4 +412,8 @@ export class DescriptionListingComponent extends BaseComponent implements OnInit
|
|||
return this.lookup.like !== undefined && this.lookup.like !== null;
|
||||
}
|
||||
|
||||
toggleSortDirection(): void {
|
||||
this.sortDirection = this.isAscending ? this.sortDirection = SortDirection.Descending : this.sortDirection = SortDirection.Ascending;
|
||||
this.orderByChanged();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@
|
|||
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
|
||||
<div class="row pt-4">
|
||||
<!-- Sort by -->
|
||||
<div class="col-12 col-xl-auto d-flex align-items-center">
|
||||
<div class="col-auto d-flex align-items-center order-1">
|
||||
<span class="mb-1 mb-xl-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto">
|
||||
<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>
|
||||
|
|
@ -42,7 +42,13 @@
|
|||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto ml-auto">
|
||||
<div class="col-auto order-2 order-xl-3">
|
||||
<button mat-icon-button (click)="toggleSortDirection()" [matTooltip]="sortingTooltipText">
|
||||
<mat-icon *ngIf="isAscending">keyboard_double_arrow_up</mat-icon>
|
||||
<mat-icon *ngIf="isDescending">keyboard_double_arrow_down</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto ml-auto order-4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-auto d-flex align-items-center">
|
||||
<span *ngIf="!isPublic" class="center-content mb-1 mb-xl-4" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</span>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import { ReferenceType } from '@app/core/model/reference-type/reference-type';
|
|||
import { AppPermission } from '@app/core/common/enum/permission.enum';
|
||||
import { DmpStatus } from '@app/core/common/enum/dmp-status';
|
||||
import { DescriptionStatus } from '@app/core/common/enum/description-status';
|
||||
import { SortDirection } from '@common/modules/hybrid-listing/hybrid-listing.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dmp-listing-component',
|
||||
|
|
@ -59,6 +60,23 @@ export class DmpListingComponent extends BaseComponent implements OnInit { //IBr
|
|||
scrollbar: boolean;
|
||||
order = RecentActivityOrder;
|
||||
|
||||
private _sortDirection: SortDirection = SortDirection.Descending; //SortDirection.Descending: "-"
|
||||
set sortDirection(sortDirection: SortDirection) {
|
||||
this._sortDirection = sortDirection;
|
||||
}
|
||||
get isAscending(): boolean {
|
||||
return this._sortDirection == SortDirection.Ascending;
|
||||
}
|
||||
get isDescending(): boolean {
|
||||
return this._sortDirection == SortDirection.Descending;
|
||||
}
|
||||
get sortingDirectionPrefix(): string {
|
||||
return this.isAscending ? "+" : "-";
|
||||
}
|
||||
get sortingTooltipText(): string {
|
||||
return this.isAscending ? this.language.instant('DMP-LISTING.ACTIONS.TOGGLE-ΑSCENDING') : this.language.instant('DMP-LISTING.ACTIONS.TOGGLE-DESCENDING');
|
||||
}
|
||||
|
||||
constructor(
|
||||
private dmpService: DmpService,
|
||||
private router: Router,
|
||||
|
|
@ -167,11 +185,11 @@ export class DmpListingComponent extends BaseComponent implements OnInit { //IBr
|
|||
|
||||
orderByChanged(){
|
||||
if (this.formGroup.get('order').value == RecentActivityOrder.Status){
|
||||
this.lookup.order = { items: ['-' + nameof<Dmp>(x => x.status)] };
|
||||
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Dmp>(x => x.status)] };
|
||||
} else if(this.formGroup.get('order').value == RecentActivityOrder.Label){
|
||||
this.lookup.order = { items: ['-' + nameof<Dmp>(x => x.label)] };
|
||||
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Dmp>(x => x.label)] };
|
||||
}else{
|
||||
this.lookup.order = { items: ['-' + nameof<Dmp>(x => x.updatedAt)] };
|
||||
this.lookup.order = { items: [this.sortingDirectionPrefix + nameof<Dmp>(x => x.updatedAt)] };
|
||||
}
|
||||
this.refresh(this.lookup);
|
||||
}
|
||||
|
|
@ -386,4 +404,9 @@ export class DmpListingComponent extends BaseComponent implements OnInit { //IBr
|
|||
public hasLikeCriteria(): boolean {
|
||||
return this.lookup.like !== undefined && this.lookup.like !== null;
|
||||
}
|
||||
|
||||
toggleSortDirection(): void {
|
||||
this.sortDirection = this.isAscending ? this.sortDirection = SortDirection.Descending : this.sortDirection = SortDirection.Ascending;
|
||||
this.orderByChanged();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -633,7 +633,9 @@
|
|||
"CLONE": "Clone",
|
||||
"DELETE": "Delete",
|
||||
"DEPOSIT": "Deposit",
|
||||
"EXPORT": "Export"
|
||||
"EXPORT": "Export",
|
||||
"TOGGLE-DESCENDING": "Order by ascending",
|
||||
"TOGGLE-ΑSCENDING": "Order by descending"
|
||||
},
|
||||
"EMPTY-LIST": "Nothing here yet."
|
||||
},
|
||||
|
|
@ -786,7 +788,9 @@
|
|||
"EXPORT": "Export",
|
||||
"INVITE-SHORT": "Invite",
|
||||
"DELETE": "Delete",
|
||||
"COPY-DESCRIPTION": "Copy Description"
|
||||
"COPY-DESCRIPTION": "Copy Description",
|
||||
"TOGGLE-DESCENDING": "Order by ascending",
|
||||
"TOGGLE-ΑSCENDING": "Order by descending"
|
||||
},
|
||||
"STATES": {
|
||||
"EDITED": "Edited",
|
||||
|
|
|
|||
Loading…
Reference in New Issue