DSP-329 Fix sort button (#303)

* fix(*-list): Fix sort order bug * refactor(projects-list): Clean up old code * feat(*-list): Keep selected sort value * feat(*-list): Add latest update from ui (not yet released)
dasch-swiss · Oct 12, 2020 · 1231717 · 1231717
1 parent 942f619
commit 1231717
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/src/app/system/projects/projects-list/projects-list.component.html b/src/app/system/projects/projects-list/projects-list.component.html
@@ -14,8 +14,12 @@ <h3 class="mat-body subtitle">
         <div class="app-toolbar-row">
             <span class="app-toolbar-action button left">
                 <!-- sort button if more than one item in the list -->
-                <dsp-sort-button *ngIf="list.length > 1" [icon]="'sort_by_alpha'" [sortProps]="sortProps"
-                    [position]="'right'" (sortKeyChange)="sortList($event)"></dsp-sort-button>
+                <dsp-sort-button *ngIf="list.length > 1"
+                    [icon]="'sort_by_alpha'"
+                    [sortProps]="sortProps"
+                    [activeKey]="sortBy"
+                    (sortKeyChange)="sortList($event)">
+                </dsp-sort-button>
             </span>
             <h2 class="mat-title">{{list.length | i18nPlural: itemPluralMapping['project']}}</h2>
             <span class="fill-remaining-space"></span>
@@ -28,7 +32,7 @@ <h2 class="mat-title">{{list.length | i18nPlural: itemPluralMapping['project']}}
     <!-- content: list -->
     <table class="table more-space-bottom" [class.deactivated]="!status">
 
-        <tr class="table-entry" *ngFor="let project of list | dspSortBy: sortBy; let last = last"
+        <tr class="table-entry" *ngFor="let project of list; let last = last"
             [class.no-border]="last">
             <!-- logo -->
             <td class="avatar-cell">

diff --git a/src/app/system/projects/projects-list/projects-list.component.ts b/src/app/system/projects/projects-list/projects-list.component.ts
@@ -62,8 +62,8 @@ export class ProjectsListComponent implements OnInit {
         }
     ];
 
-    // ... and sort by 'shortname'
-    sortBy: string = 'shortname';
+    // ... and sort by 'longname'
+    sortBy: string = 'longname';
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
@@ -79,6 +79,13 @@ export class ProjectsListComponent implements OnInit {
 
         // is the logged-in user system admin?
         this.sysAdmin = this.session.user.sysAdmin;
+
+        // sort list by defined key
+        if(localStorage.getItem('sortProjectsBy')) {
+            this.sortBy = localStorage.getItem('sortProjectsBy');
+        } else {
+            localStorage.setItem('sortProjectsBy', this.sortBy);
+        }
     }
 
     /**
@@ -144,6 +151,7 @@ export class ProjectsListComponent implements OnInit {
 
     sortList(key: any) {
         this.list = this._sortingService.keySortByAlphabetical(this.list, key);
+        localStorage.setItem('sortProjectsBy', key);
     }
 
     deleteProject(id: string) {

diff --git a/src/app/system/users/users-list/users-list.component.html b/src/app/system/users/users-list/users-list.component.html
@@ -14,8 +14,12 @@ <h3 class="mat-body subtitle">
         <div class="app-toolbar-row">
             <span class="app-toolbar-action button left">
                 <!-- sort button if more than one item in the list -->
-                <dsp-sort-button *ngIf="list.length > 1" [icon]="'sort_by_alpha'" [sortProps]="sortProps"
-                    [position]="'right'" (sortKeyChange)="sortList($event)"></dsp-sort-button>
+                <dsp-sort-button *ngIf="list.length > 1"
+                    [icon]="'sort_by_alpha'"
+                    [sortProps]="sortProps"
+                    [activeKey]="sortBy"
+                    (sortKeyChange)="sortList($event)">
+                </dsp-sort-button>
             </span>
             <h2 class="mat-title">
                 <span *ngIf="projectcode">{{list.length | i18nPlural: itemPluralMapping['member']}}</span>
@@ -30,7 +34,7 @@ <h2 class="mat-title">
 
     <!-- content: list -->
     <table class="table more-space-bottom" [class.deactivated]="!status">
-        <tr class="table-entry" *ngFor="let user of list | dspSortBy: sortBy; let last = last" [class.no-border]="last">
+        <tr class="table-entry" *ngFor="let user of list; let last = last" [class.no-border]="last">
             <!-- avatar -->
             <td class="avatar-cell">
                 <img dspAdminImage [image]="user.email" [type]="'user'" class="avatar-image" />

diff --git a/src/app/system/users/users-list/users-list.component.ts b/src/app/system/users/users-list/users-list.component.ts
@@ -76,8 +76,8 @@ export class UsersListComponent implements OnInit {
         }
     ];
 
-    // ... and sort by 'email'
-    sortBy: string = 'email';
+    // ... and sort by 'username'
+    sortBy: string = 'username';
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
@@ -122,6 +122,13 @@ export class UsersListComponent implements OnInit {
                 }
             );
         }
+
+        // sort list by defined key
+        if(localStorage.getItem('sortUsersBy')) {
+            this.sortBy = localStorage.getItem('sortUsersBy');
+        } else {
+            localStorage.setItem('sortUsersBy', this.sortBy);
+        }
     }
 
     /**
@@ -407,5 +414,6 @@ export class UsersListComponent implements OnInit {
 
     sortList(key: any) {
         this.list = this._sortingService.keySortByAlphabetical(this.list, key);
+        localStorage.setItem('sortUsersBy', key);
     }
 }