Added sorting to the account preference page [#925]

comixed · Sep 21, 2021 · b492d3f · b492d3f
1 parent 8e4e97b
commit b492d3f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/...ed-webui/src/app/user/pages/user-preferences-page/user-preferences-page.component.spec.ts b/...ed-webui/src/app/user/pages/user-preferences-page/user-preferences-page.component.spec.ts
@@ -90,4 +90,18 @@ describe('UserPreferencesPageComponent', () => {
       );
     });
   });
+
+  describe('sorting', () => {
+    it('can sort by preference name', () => {
+      expect(
+        component.dataSource.sortingDataAccessor(PREFERENCE, 'name')
+      ).toEqual(PREFERENCE.name);
+    });
+
+    it('can sort by preference value', () => {
+      expect(
+        component.dataSource.sortingDataAccessor(PREFERENCE, 'value')
+      ).toEqual(PREFERENCE.value);
+    });
+  });
 });
diff --git a/comixed-webui/src/app/user/pages/user-preferences-page/user-preferences-page.component.ts b/comixed-webui/src/app/user/pages/user-preferences-page/user-preferences-page.component.ts
@@ -16,7 +16,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { LoggerService } from '@angular-ru/logger';
@@ -33,7 +39,9 @@ import { Preference } from '@app/user/models/preference';
   templateUrl: './user-preferences-page.component.html',
   styleUrls: ['./user-preferences-page.component.scss']
 })
-export class UserPreferencesPageComponent implements OnInit, OnDestroy {
+export class UserPreferencesPageComponent
+  implements OnInit, OnDestroy, AfterViewInit
+{
   @ViewChild(MatSort) sort: MatSort;
 
   readonly displayedColumns = ['name', 'value', 'actions'];
@@ -47,11 +55,25 @@ export class UserPreferencesPageComponent implements OnInit, OnDestroy {
     private translateService: TranslateService
   ) {
     this.userSubscription = this.store.select(selectUser).subscribe(user => {
-      this.logger.debug('Loading user preferences');
+      this.logger.trace('Loading user preferences');
       this.dataSource.data = user.preferences;
     });
   }
 
+  ngAfterViewInit(): void {
+    this.logger.trace('Assigning table sort');
+    this.dataSource.sort = this.sort;
+    this.dataSource.sortingDataAccessor = (data, sortHeaderId) => {
+      console.log('*** sortHeaderId:', sortHeaderId);
+      switch (sortHeaderId) {
+        case 'name':
+          return data.name;
+        case 'value':
+          return data.value;
+      }
+    };
+  }
+
   ngOnDestroy(): void {
     this.userSubscription.unsubscribe();
   }
@@ -67,7 +89,7 @@ export class UserPreferencesPageComponent implements OnInit, OnDestroy {
         'user.user-preferences.delete-confirmation-message'
       ),
       confirm: () => {
-        this.logger.debug('Deleting user preference:', name);
+        this.logger.trace('Deleting user preference:', name);
         this.store.dispatch(saveUserPreference({ name, value: null }));
       }
     });