Merge pull request #5065 from tsiegleauq/apply-search-filter-bug

Refresh DataSource filter and sort

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -11,10 +11,11 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 
-import { columnFactory, createDS, PblDataSource, PblNgridComponent } from '@pebula/ngrid';
+import { columnFactory, createDS, DataSourcePredicate, PblDataSource, PblNgridComponent } from '@pebula/ngrid';
 import { PblColumnDefinition, PblColumnFactory, PblNgridColumnSet } from '@pebula/ngrid/lib/table';
 import { PblNgridDataMatrixRow } from '@pebula/ngrid/target-events';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 import { OperatorService, Permission } from 'app/core/core-services/operator.service';
 import { StorageService } from 'app/core/core-services/storage.service';
@@ -223,10 +224,15 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
     public dataSourceChange = new EventEmitter<PblDataSource<V>>();
 
     /**
-     * test data source
+     * Table data source
      */
     public dataSource: PblDataSource<V>;
 
+    /**
+     * Observable to the raw data
+     */
+    private dataListObservable: Observable<V[]>;
+
     /**
      * Minimal column width
      */
@@ -252,17 +258,16 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      */
     public inputValue: string;
 
-    /**
-     * Flag to indicate, whether the table is loading the first time or not.
-     * Otherwise the `DataSource` will be empty, if there is a query stored in the local-storage.
-     */
-    private initialLoading = true;
-
     /**
      * Private variable to hold all classes for the virtual-scrolling-list.
      */
     private _cssClasses: CssClassDefinition = {};
 
+    /**
+     * Collect subsciptions
+     */
+    private subs: Subscription[] = [];
+
     /**
      * Most, of not all list views require these
      */
@@ -273,7 +278,6 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
                 label: '',
                 width: '40px'
             },
-
             {
                 prop: 'projector',
                 label: '',
@@ -391,41 +395,116 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         });
     }
 
-    public ngOnInit(): void {
+    public async ngOnInit(): Promise<void> {
-        // Create ans observe dataSource
+        this.getListObservable();
+        await this.restoreSearchQuery();
+        this.createDataSource();
+        this.changeRowHeight();
+        this.scrollToPreviousPosition();
+        this.cd.detectChanges();
+    }
+
+    /**
+     * Stop the change detection
+     */
+    public ngOnDestroy(): void {
+        this.cd.detach();
+        for (const sub of this.subs) {
+            sub.unsubscribe();
+        }
+        this.subs = [];
+    }
+
+    /**
+     * Function to create the DataSource
+     */
+    private createDataSource(): void {
         this.dataSource = createDS<V>()
-            .onTrigger(() => {
+            .onTrigger(() => (this.dataListObservable ? this.dataListObservable : []))
-                let listObservable: Observable<V[]>;
+            .create();
+
+        // inform listening components about changes in the data source
+        this.dataSource.onSourceChanged.subscribe(() => {
+            this.dataSourceChange.next(this.dataSource);
+            this.checkSelection();
+        });
+
+        // data selection
+        this.dataSource.selection.changed.subscribe(selection => {
+            this.selectedRows = selection.source.selected;
+            this.selectedRowsChange.emit(this.selectedRows);
+        });
+
+        // Define the columns. Has to be in the OnInit cause "columns" is slower than
+        // the constructor of this class
+        this.columnSet = columnFactory()
+            .default({ width: this.columnMinWidth })
+            .table(...this.defaultStartColumns, ...this.columns, ...this.defaultEndColumns)
+            .build();
+
+        this.dataSource.setFilter(this.getFilterPredicate());
+
+        // refresh the data source if the filter changed
+        if (this.filterService) {
+            this.subs.push(
+                this.filterService.outputObservable.pipe(distinctUntilChanged()).subscribe(() => {
+                    this.dataSource.refresh();
+                })
+            );
+        }
+
+        // refresh the data source if the sorting changed
+        if (this.sortService) {
+            this.subs.push(
+                this.sortService.outputObservable.subscribe(() => {
+                    this.dataSource.refresh();
+                })
+            );
+        }
+    }
+
+    /**
+     * Determines and sets the raw data as observable lists according
+     * to the used search and filter services
+     */
+    private getListObservable(): void {
         if (this.repo && this.viewModelListObservable) {
             if (this.filterService && this.sortService) {
                 // filtering and sorting
                 this.filterService.initFilters(this.viewModelListObservable);
                 this.sortService.initSorting(this.filterService.outputObservable);
-                        listObservable = this.sortService.outputObservable;
+                this.dataListObservable = this.sortService.outputObservable;
             } else if (this.filterService) {
                 // only filter service
                 this.filterService.initFilters(this.viewModelListObservable);
-                        listObservable = this.filterService.outputObservable;
+                this.dataListObservable = this.filterService.outputObservable;
             } else if (this.sortService) {
                 // only sorting
                 this.sortService.initSorting(this.viewModelListObservable);
-                        listObservable = this.sortService.outputObservable;
+                this.dataListObservable = this.sortService.outputObservable;
             } else {
                 // none of both
-                        listObservable = this.viewModelListObservable;
+                this.dataListObservable = this.viewModelListObservable;
+            }
         }
     }
 
-                return listObservable ? listObservable : [];
+    /**
-            })
+     * Receive manual view updates
-            .create();
+     */
+    public viewUpdateEvent(): void {
+        this.cd.markForCheck();
+    }
 
-        const filterPredicate = (item: V): boolean => {
+    /**
+     * @returns the filter predicate object
+     */
+    private getFilterPredicate(): DataSourcePredicate {
+        return (item: V): boolean => {
             if (!this.inputValue) {
                 return true;
             }
 
-            if (this.inputValue) {
             // filter by ID
             const trimmedInput = this.inputValue.trim().toLowerCase();
             const idString = '' + item.id;
@@ -466,52 +545,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
                     }
                 }
             }
-            }
         };
-
-        this.dataSource.setFilter(filterPredicate);
-
-        // inform listening components about changes in the data source
-        this.dataSource.onSourceChanged.subscribe(() => {
-            this.dataSourceChange.next(this.dataSource);
-            this.checkSelection();
-        });
-
-        // data selection
-        this.dataSource.selection.changed.subscribe(selection => {
-            this.selectedRows = selection.source.selected;
-            this.selectedRowsChange.emit(this.selectedRows);
-        });
-
-        // Define the columns. Has to be in the OnInit cause "columns" is slower than
-        // the constructor of this class
-        this.columnSet = columnFactory()
-            .default({ width: this.columnMinWidth })
-            .table(...this.defaultStartColumns, ...this.columns, ...this.defaultEndColumns)
-            .build();
-
-        // Sets the row height.
-        this.changeRowHeight();
-
-        // restore scroll position
-        if (this.listStorageKey) {
-            this.scrollToPreviousPosition(this.listStorageKey);
-            this.restoreSearchQuery(this.listStorageKey);
-        }
-    }
-
-    /**
-     * Stop the change detection
-     */
-    public ngOnDestroy(): void {
-        this.cd.detach();
-    }
-
-    /**
-     * Receive manual view updates
-     */
-    public viewUpdateEvent(): void {
-        this.cd.markForCheck();
     }
 
     /**
@@ -557,12 +591,8 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             this.saveSearchQuery(this.listStorageKey, filterValue);
         }
         this.inputValue = filterValue;
-        if (this.initialLoading) {
-            this.initialLoading = false;
-        } else {
         this.dataSource.syncFilter();
     }
-    }
 
     /**
      * Loads the scroll-index from the storage
@@ -590,8 +620,8 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      *
      * @param key The `StorageKey` for the list-view.
      */
-    public async restoreSearchQuery(key: string): Promise<void> {
+    public async restoreSearchQuery(): Promise<void> {
-        this.inputValue = await this.store.get<string>(`query_${key}`);
+        this.inputValue = await this.store.get<string>(`query_${this.listStorageKey}`);
     }
 
     /**
@@ -604,10 +634,9 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
      * Furthermore, dynamic assigning the amount of pixels in vScrollFixed
      * does not work, tying the tables to the same hight.
      */
-    public scrollToPreviousPosition(key: string): void {
+    public async scrollToPreviousPosition(): Promise<void> {
-        this.getScrollIndex(key).then(index => {
+        const scrollIndex = await this.getScrollIndex(this.listStorageKey);
-            this.ngrid.viewport.scrollToIndex(index);
+        this.ngrid.viewport.scrollToIndex(scrollIndex);
-        });
     }
 
     /**