diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index 0031901..20121d9 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -30,28 +30,8 @@
>
add
-
- Filter
-
-
-
nur ungespeicherte Elemente anzeigen
@@ -86,6 +66,88 @@
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
@@ -331,6 +393,10 @@
+ |
diff --git a/src/app/components/table/table.component.scss b/src/app/components/table/table.component.scss
index 70e85ef..fd8874b 100644
--- a/src/app/components/table/table.component.scss
+++ b/src/app/components/table/table.component.scss
@@ -56,12 +56,11 @@
}
.highlighted-column {
- box-shadow:inset 0 0 0 99999px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.05);
}
-
- .mat-table-sticky {
- box-shadow:inset 0 0 0 99999px rgba(0, 0, 0, 0.1);
+ .mat-table-sticky {
+ box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.1);
}
.button-wrapper {
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index 24e6c37..66ff813 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -68,6 +68,9 @@ export class TableComponent implements AfterViewInit {
additionalColumnsBack: string[] = ['buttons'];
displayedColumns: string[] = [];
+ displayedFilterColumns = [];
+ filters: any = {};
+
loadingRowIds: string[] = [];
/** data source of the table */
@@ -80,10 +83,9 @@ export class TableComponent implements AfterViewInit {
@Input()
relockingIntervalDuration = 1000 * 60 * 1;
- filter = { includesString: '', onlyUnsaved: false };
- filterStringChanged: Subject = new Subject();
- initialFilter = this.filter;
+ filterChanged: Subject = new Subject();
+
isLoaded = false;
@Output() createEvent = new EventEmitter();
@@ -98,12 +100,27 @@ export class TableComponent implements AfterViewInit {
private activatedroute: ActivatedRoute,
private cdRef: ChangeDetectorRef
) {
- this.filter.includesString =
- this.activatedroute.snapshot.queryParamMap.get('filter') || '';
+ /*this.filter.includesString =
+ this.activatedroute.snapshot.queryParamMap.get('filter') || '';*/
+ //TODO: add filter from url
}
- ngAfterViewInit(): void {
+ ngOnInit() {
this.addColumnPropertiesFromGQLSchemaToColumnInfo();
+ console.log(this.columnInfo);
+ this.columnInfo.forEach((column) =>
+ this.displayedColumns.push(column.dataPath)
+ );
+ this.displayedFilterColumns = this.displayedColumns.map(
+ (columnName) => columnName + '.filter'
+ );
+ this.displayedColumns.unshift(...this.additionalColumnsFront);
+ this.displayedColumns.push(...this.additionalColumnsBack);
+
+ this.resetFilters();
+ }
+
+ ngAfterViewInit(): void {
this.data.paginator = this.paginator;
this.data.sortingDataAccessor = (item, columnName) => {
if (typeof item[columnName] === 'string') {
@@ -113,10 +130,52 @@ export class TableComponent implements AfterViewInit {
};
this.data.sort = this.sort;
- this.data.filter = (this.filter as unknown) as string;
+ this.data.filter = (this.filters as unknown) as string;
this.data.filterPredicate = (data, filter: any) => {
- const a = !filter.onlyUnsaved || data.newObject || data.isLockedByMe;
- const b =
+ if (data.newObject) {
+ return true; // always show new objects
+ }
+ if (filter.onlyUnsaved && !data.isLockedByMe) {
+ return false;
+ }
+ for (const filterElementName of Object.keys(filter.columnFilters)) {
+ const filterElement = filter.columnFilters[filterElementName];
+ if (filterElement.value) {
+ if (filterElement.type === 'String' || filterElement.type === 'Id') {
+ let searchString = filterElement.value.trim();
+ let dataElement = data[filterElementName]?.trim();
+ if (!filterElement.options.caseSensitive) {
+ searchString = searchString.toLowerCase();
+ dataElement = dataElement.toLowerCase();
+ }
+ if (
+ (filterElement.options.exact && dataElement !== searchString) ||
+ !dataElement.includes(searchString)
+ ) {
+ return false;
+ }
+ }
+ }
+ if (filterElement.min != null || filterElement.max != null) {
+ if (
+ filterElement.type === 'Float' ||
+ filterElement.type === 'Int' ||
+ filterElement.type === 'Money'
+ ) {
+ let dataElement = data[filterElementName];
+ if (dataElement == null) {
+ return false;
+ }
+ if (filterElement.min != null && dataElement < filterElement.min) {
+ return false;
+ }
+ if (filterElement.max != null && dataElement > filterElement.max) {
+ return false;
+ }
+ }
+ }
+ }
+ /*const b =
!filter.includesString ||
Object.keys(data).some(
(k) =>
@@ -125,19 +184,13 @@ export class TableComponent implements AfterViewInit {
.toString()
.toLowerCase()
.includes(filter.includesString.toLowerCase())
- );
- return a && b;
+ );*/
+ return true;
};
- this.filterStringChanged
- .pipe(debounceTime(400))
- .subscribe(() => this.applyFilter());
-
- this.columnInfo.forEach((column) =>
- this.displayedColumns.push(column.dataPath)
- );
- this.displayedColumns.unshift(...this.additionalColumnsFront);
- this.displayedColumns.push(...this.additionalColumnsBack);
+ this.filterChanged.pipe(debounceTime(400)).subscribe(() => {
+ this.applyFilters();
+ });
this.dataService.loadingRowIds.subscribe((rowIds) => {
this.loadingRowIds = rowIds;
@@ -287,7 +340,6 @@ export class TableComponent implements AfterViewInit {
addNewObject() {
this.paginator.firstPage();
- this.setFilter({ ...this.filter, includesString: '' });
this.resetSorting();
this.data.data = [
{ newObject: true, id: this.getNewId() },
@@ -413,25 +465,36 @@ export class TableComponent implements AfterViewInit {
}
showOnlyUnsavedElements(value: boolean) {
- this.filter.onlyUnsaved = value;
- this.filter.includesString = '';
- this.applyFilter();
+ if (value) {
+ this.resetFilters();
+ }
+ this.filters['onlyUnsaved'] = value;
+ this.applyFilters();
}
- newFilterStringValue(): void {
- this.filterStringChanged.next(this.filter.includesString);
+ newFilterValue(): void {
+ console.log(this.filters);
+ this.filterChanged.next(this.filters);
}
- applyFilter(): void {
- this.data.filter = ({
- ...this.filter,
- includesString: this.filter.includesString.trim().toLowerCase(),
- } as unknown) as string;
+ applyFilters(): void {
+ this.isLoaded = false;
+ setTimeout(() => {
+ this.data.filter = (this.filters as unknown) as string;
+ this.isLoaded = true;
+ });
}
- setFilter(filterObject) {
- this.filter = filterObject;
- this.applyFilter();
+ resetFilters() {
+ this.filters = [];
+ this.filters['columnFilters'] = [];
+ for (const column of this.columnInfo) {
+ this.filters.columnFilters[column.dataPath] = {
+ value: null,
+ type: column.type,
+ options: {},
+ };
+ }
}
resetSorting() {