ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refresh DataSource filter and sort

Browse Source 
Cleanup some List View Table code
Fixes a bug where the search-filter was not applied after navigation
Fixes a bug where the search-filter and the property-filter and property-sort could not be used together
This commit is contained in:
Sean Engelhardt 2019-10-02 13:35:18 +02:00
parent 1dc96b0f2f
commit d4090122ef
1 changed files with 136 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {
// Create ans observe dataSource
public async ngOnInit(): Promise<void> {
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(() => {
let listObservable: Observable<V[]>;
.onTrigger(() => (this.dataListObservable ? this.dataListObservable : []))
.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 : [];
})
.create();
/**
* Receive manual view updates
*/
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> {
this.inputValue = await this.store.get<string>(`query_${key}`);
public async restoreSearchQuery(): Promise<void> {
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 {
this.getScrollIndex(key).then(index => {
this.ngrid.viewport.scrollToIndex(index);
});
public async scrollToPreviousPosition(): Promise<void> {
const scrollIndex = await this.getScrollIndex(this.listStorageKey);
this.ngrid.viewport.scrollToIndex(scrollIndex);
}
/**