From 33c859b4f11fbb238e5f08e944d47143d98d6351 Mon Sep 17 00:00:00 2001 From: Max Ehrlicher-Schmidt Date: Sun, 13 Dec 2020 19:06:16 +0100 Subject: [PATCH] Add Megafilter to reference tables --- .../reference-table.component.html | 71 +++++++++---- .../reference-table.component.ts | 99 +++++++++++++++---- src/app/components/table/table.component.html | 4 +- src/app/components/table/table.component.ts | 12 ++- .../pages/dataPages/bike/bike.component.ts | 2 +- 5 files changed, 140 insertions(+), 48 deletions(-) diff --git a/src/app/components/reference-table/reference-table.component.html b/src/app/components/reference-table/reference-table.component.html index c335d46..3d87cea 100644 --- a/src/app/components/reference-table/reference-table.component.html +++ b/src/app/components/reference-table/reference-table.component.html @@ -1,5 +1,15 @@
+
- - Tabelle filtern - - - + + + + + + + + + + + - + +
diff --git a/src/app/components/reference-table/reference-table.component.ts b/src/app/components/reference-table/reference-table.component.ts index d520807..641047c 100644 --- a/src/app/components/reference-table/reference-table.component.ts +++ b/src/app/components/reference-table/reference-table.component.ts @@ -1,5 +1,6 @@ import { Component, + ElementRef, EventEmitter, Input, Output, @@ -11,7 +12,7 @@ import { SchemaService } from 'src/app/services/schema.service'; import { MatTableDataSource } from '@angular/material/table'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; -import { FormControl, FormGroup } from '@angular/forms'; +import { customTableFilterFunction } from 'src/app/helperFunctions/customTableFilterFunction'; import { Subject } from 'rxjs/internal/Subject'; import { debounceTime } from 'rxjs/internal/operators/debounceTime'; @@ -28,6 +29,7 @@ export class ReferenceTableComponent { translation: string; sticky?: boolean; type?: string; + list?: boolean; //whether the type is a list link?: (row: any) => string; }[] = []; @@ -77,6 +79,9 @@ export class ReferenceTableComponent { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; + @ViewChild('filterRow', { read: ElementRef }) filterRow: ElementRef; + @ViewChild('headerRow', { read: ElementRef }) headerRow: ElementRef; + displayedColumns: string[] = []; /** data source of the table */ @@ -86,8 +91,9 @@ export class ReferenceTableComponent { reloadingTable = false; - tableFilterString = ''; - filterStringChanged: Subject = new Subject(); + displayedFilterColumns = []; + filters: any = {}; + filterChanged: Subject = new Subject(); constructor(private schemaService: SchemaService) {} @@ -99,16 +105,26 @@ export class ReferenceTableComponent { if (this.editableReferences) { this.displayedColumns.push('buttons'); } + this.displayedFilterColumns = this.displayedColumns.map( + (columnName) => columnName + '.filter' + ); - this.filterStringChanged - .pipe(debounceTime(400)) - .subscribe(() => this.applyTableFilter()); + this.dataSource.filterPredicate = customTableFilterFunction; + this.resetFilters(); } ngAfterViewInit() { + this.setTableFilterRowHeight(); + this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; + this.dataSource.filter = (this.filters as unknown) as string; + + this.filterChanged.pipe(debounceTime(400)).subscribe(() => { + this.applyFilters(); + }); + this.dataSource.sortingDataAccessor = (item, columnName) => { if (typeof item[columnName] === 'string') { return item[columnName].toLocaleLowerCase(); @@ -152,9 +168,9 @@ export class ReferenceTableComponent { (element) => element.id === row.id ); if (index !== -1) { - this.dataSource.data.splice(index, 1); - this.dataSource.data = this.dataSource.data; //needed to trigger update lol - this.onReferenceChange(); + this.dataSource.data.splice(index, 1); + this.dataSource.data = this.dataSource.data; //needed to trigger update lol + this.onReferenceChange(); } // show it again in the selection @@ -166,8 +182,7 @@ export class ReferenceTableComponent { addReference(row: any) { this.dataSource.data = [flatten(row), ...this.dataSource.data]; this.idsOfObjectsToHide = [row.id, ...this.idsOfObjectsToHide]; - this.tableFilterString = ''; - this.applyTableFilter(); + this.resetFilters(); this.onReferenceChange(); } @@ -175,14 +190,6 @@ export class ReferenceTableComponent { return this.dataSource.data.find((row) => row.id === id); } - newFilterStringValue(): void { - this.filterStringChanged.next(this.tableFilterString); - } - - applyTableFilter() { - this.dataSource.filter = this.tableFilterString; - } - onReferenceChange() { const ids = []; for (const element of this.data) { @@ -190,4 +197,58 @@ export class ReferenceTableComponent { } this.referenceIds.emit(ids); } + + /** Filter functions **************************************************************/ + newFilterValue(): void { + this.filterChanged.next(this.filters); + } + + applyFilters(): void { + this.dataSource.filter = (this.filters as unknown) as string; + } + + columnFiltersAreSet(): boolean { + for (const filterObject of Object.keys(this.filters.columnFilters)) { + if (this.filters.columnFilters[filterObject].isSet) { + return true; + } + } + return false; + } + + resetColumnFilters() { + this.filters['columnFilters'] = []; + for (const column of this.columnInfo) { + this.filters.columnFilters[column.dataPath] = { + isSet: false, + value: null, + minValue: {}, + maxValue: {}, + fromValue: {}, + toValue: {}, + type: column.type, + list: column.list, + options: {}, + }; + } + this.setTableFilterRowHeight(); + this.applyFilters(); + } + + resetFilters() { + this.filters = []; + this.resetColumnFilters(); + } + + setTableFilterRowHeight() { + setTimeout(() => { + const filterRowHeight = this.filterRow.nativeElement.clientHeight; + const headerRowCells = Array.from( + this.headerRow.nativeElement.children as HTMLCollectionOf + ); + for (let i = 0; i < headerRowCells.length; i++) { + headerRowCells[i].style.top = filterRowHeight + 'px'; + } + }); + } } diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html index 9024018..198450b 100644 --- a/src/app/components/table/table.component.html +++ b/src/app/components/table/table.component.html @@ -354,12 +354,12 @@ diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts index 098fa48..9cb7dd7 100644 --- a/src/app/components/table/table.component.ts +++ b/src/app/components/table/table.component.ts @@ -7,6 +7,7 @@ import { ViewChild, AfterViewInit, ChangeDetectorRef, + ElementRef, } from '@angular/core'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { flatten } from 'src/app/helperFunctions/flattenObject'; @@ -22,7 +23,6 @@ import { ActivatedRoute } from '@angular/router'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/internal/operators/debounceTime'; import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component'; -import { filter } from 'rxjs/operators'; @Component({ selector: 'app-table', @@ -66,6 +66,9 @@ export class TableComponent implements AfterViewInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; + @ViewChild('filterRow', { read: ElementRef }) filterRow: ElementRef; + @ViewChild('headerRow', { read: ElementRef }) headerRow: ElementRef; + additionalColumnsFront: string[] = []; additionalColumnsBack: string[] = ['buttons']; displayedColumns: string[] = []; @@ -456,6 +459,7 @@ export class TableComponent implements AfterViewInit { }; } this.setTableFilterRowHeight(); + this.applyFilters(); } resetFilters() { @@ -465,11 +469,9 @@ export class TableComponent implements AfterViewInit { setTableFilterRowHeight() { setTimeout(() => { - const filterRowHeight = document.getElementsByClassName('filter-row')[0] - .clientHeight; + const filterRowHeight = this.filterRow.nativeElement.clientHeight; const headerRowCells = Array.from( - document.getElementsByClassName('header-row')[0] - .children as HTMLCollectionOf + this.headerRow.nativeElement.children as HTMLCollectionOf ); for (let i = 0; i < headerRowCells.length; i++) { headerRowCells[i].style.top = filterRowHeight + 'px'; diff --git a/src/app/pages/dataPages/bike/bike.component.ts b/src/app/pages/dataPages/bike/bike.component.ts index 8a6f48d..4685a83 100644 --- a/src/app/pages/dataPages/bike/bike.component.ts +++ b/src/app/pages/dataPages/bike/bike.component.ts @@ -250,7 +250,7 @@ export class BikeComponent implements OnInit { }, { type: 'ReferenceTable', - title: 'Equipment', + title: 'Equipments', dataPath: 'equipment', dataService: null, columnInfo: [