fix(ngrid-material): not reflecting sort state when predefined

fixes #61
shlomiassaf · Nov 20, 2019 · 96611bb · 96611bb
1 parent 41e88cf
commit 96611bb
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 30 deletions.
diff --git a/apps/libs/ngrid-examples/plugins/ngrid-material/mat-sort/programmatic.component.ts b/apps/libs/ngrid-examples/plugins/ngrid-material/mat-sort/programmatic.component.ts
@@ -25,7 +25,9 @@ export class ProgrammaticExample {
 
   ds = createDS<Person>().onTrigger( () => this.datasource.getPeople(500) ).create();
 
-  constructor(private datasource: DemoDataSource) { }
+  constructor(private datasource: DemoDataSource) {
+    this.ds.setSort(this.columns.table.cols[1], { order: 'asc' });
+  }
 
   clear(): void {
     this.ds.setSort();

diff --git a/libs/ngrid-material/sort/src/lib/mat-sort.directive.ts b/libs/ngrid-material/sort/src/lib/mat-sort.directive.ts
@@ -2,7 +2,7 @@ import { Directive, OnDestroy } from '@angular/core';
 import { Sort, MatSort, MatSortHeader, SortDirection } from '@angular/material/sort';
 
 import { UnRx } from '@pebula/utils';
-import { PblNgridComponent, PblNgridPluginController, TablePlugin, PblNgridSortDefinition } from '@pebula/ngrid';
+import { PblNgridComponent, PblNgridPluginController, TablePlugin, PblNgridSortDefinition, PblDataSource } from '@pebula/ngrid';
 
 declare module '@pebula/ngrid/lib/ext/types' {
   interface PblNgridPluginExtension {
@@ -28,12 +28,43 @@ export class PblNgridMatSortDirective implements OnDestroy {
         origin = 'click';
       });
 
+    const handleDataSourceSortChange = (sortChange: PblDataSource['sort']) => {
+      const { column } = sortChange;
+      const order = sortChange.sort ? sortChange.sort.order : undefined;
+
+      if (this.sort && column) {
+        if (this.sort.active === column.id && this.sort.direction === (order || '')) { return; }
+        const sortable: MatSortHeader = this.sort.sortables.get(column.id) as any;
+        if (sortable) {
+          origin = 'ds';
+          this.sort.active = undefined;
+          sortable.start = order || 'asc';
+          sortable._handleClick();
+        }
+      } else if (this.sort.active) { // clear mode (hit from code, not click).
+        const sortable: MatSortHeader = this.sort.sortables.get(this.sort.active) as any;
+        if (sortable ) {
+          if (!sortable.disableClear) {
+            let nextSortDir: SortDirection;
+            while (nextSortDir = this.sort.getNextSortDirection(sortable)) {
+              this.sort.direction = nextSortDir;
+            }
+          }
+          origin = 'ds';
+          sortable._handleClick();
+        }
+      }
+    }
+
     pluginCtrl.events
       .subscribe( e => {
         if (e.kind === 'onInvalidateHeaders') {
-          if (table.ds && !table.ds.sort.column) {
-            if (this.sort && this.sort.active) {
+          const hasActiveSort = this.sort && this.sort.active;
+          if (table.ds && table.ds.sort) {
+            if (!table.ds.sort.column && hasActiveSort) {
               this.onSort({ active: this.sort.active, direction: this.sort.direction || 'asc' }, origin);
+            } else if (table.ds.sort.column && !hasActiveSort) {
+              setTimeout(() => handleDataSourceSortChange(table.ds.sort));
             }
           }
         }
@@ -42,34 +73,9 @@ export class PblNgridMatSortDirective implements OnDestroy {
           if (this.sort && this.sort.active) {
             this.onSort({ active: this.sort.active, direction: this.sort.direction || 'asc' }, origin);
           }
-
           table.ds.sortChange
             .pipe(UnRx(this, e.curr))
-            .subscribe( event => {
-              if (this.sort && event.column) {
-                const _sort = event.sort || {};
-                if (this.sort.active === event.column.id && this.sort.direction === (_sort.order || '')) { return; }
-                const sortable: MatSortHeader = this.sort.sortables.get(event.column.id) as any;
-                if (sortable) {
-                  origin = 'ds';
-                  this.sort.active = undefined;
-                  sortable.start = _sort.order || 'asc';
-                  sortable._handleClick();
-                }
-              } else if (this.sort.active) { // clear mode (hit from code, not click).
-                const sortable: MatSortHeader = this.sort.sortables.get(this.sort.active) as any;
-                if (sortable ) {
-                  if (!sortable.disableClear) {
-                    let nextSortDir: SortDirection;
-                    while (nextSortDir = this.sort.getNextSortDirection(sortable)) {
-                      this.sort.direction = nextSortDir;
-                    }
-                  }
-                  origin = 'ds';
-                  sortable._handleClick();
-                }
-              }
-            });
+            .subscribe( event => { handleDataSourceSortChange(event); });
         }
       });
   }