Move custom filter function to separate file

src/app/components/table/table.component.ts

@@ -11,6 +11,7 @@ import {
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { flatten } from 'src/app/helperFunctions/flattenObject';
 import { deepen } from 'src/app/helperFunctions/deepenObject';
+import { customTableFilterFunction } from 'src/app/helperFunctions/customTableFilterFunction';
 import { SchemaService } from 'src/app/services/schema.service';
 
 import { MatTableDataSource } from '@angular/material/table';
@@ -131,62 +132,7 @@ export class TableComponent implements AfterViewInit {
     this.data.sort = this.sort;
 
     this.data.filter = (this.filters as unknown) as string;
-    this.data.filterPredicate = (data, filter: any) => {
+    this.data.filterPredicate = customTableFilterFunction;
-      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) =>
-            data[k] != null &&
-            data[k]
-              .toString()
-              .toLowerCase()
-              .includes(filter.includesString.toLowerCase())
-        );*/
-      return true;
-    };
 
     this.filterChanged.pipe(debounceTime(400)).subscribe(() => {
       this.applyFilters();
@@ -491,6 +437,8 @@ export class TableComponent implements AfterViewInit {
     for (const column of this.columnInfo) {
       this.filters.columnFilters[column.dataPath] = {
         value: null,
+        minValue: {},
+        maxValue: {},
         type: column.type,
         options: {},
       };

src/app/components/tableComponents/filter-row/filter-row.component.html

@@ -1,3 +1,4 @@
+<!-- String Filter -->
 <mat-form-field *ngIf="column.type === 'String' || column.type === 'Id'">
   <input
     matInput
@@ -8,14 +9,11 @@
   <button
     matTooltip="exakte Übereinstimmung"
     mat-button
-    [color]="
+    [color]="filter.options['exact'] ? 'primary' : ''"
-      filter.options['exact'] ? 'primary' : ''
-    "
     matSuffix
     mat-icon-button
     (click)="
-      filter.options['exact'] = !filter.options['exact'];
+      filter.options['exact'] = !filter.options['exact']; newFilterValue()
-      newFilterValue()
     "
   >
     <mat-icon>short_text</mat-icon>
@@ -23,11 +21,7 @@
   <button
     matTooltip="Groß- und Kleinschreibung beachten"
     mat-button
-    [color]="
+    [color]="filter.options['caseSensitive'] ? 'primary' : ''"
-      filter.options['caseSensitive']
-        ? 'primary'
-        : ''
-    "
     matSuffix
     mat-icon-button
     (click)="
@@ -43,13 +37,13 @@
     mat-button
     matSuffix
     mat-icon-button
-    (click)="
+    (click)="filter.value = ''; newFilterValue()"
-      filter.value = ''; newFilterValue()
-    "
   >
     <mat-icon>cancel</mat-icon>
   </button>
 </mat-form-field>
+
+<!-- Number Filter -->
 <app-number-range-cell
   *ngIf="
     column.type === 'Int' || column.type === 'Float' || column.type === 'Money'
@@ -61,3 +55,27 @@
   (maxChange)="newFilterValue()"
 >
 </app-number-range-cell>
+
+<!-- NumberRange Filter -->
+<ng-container *ngIf="column.type === 'NumRange'">
+    <app-number-range-cell
+    [editable]="true"
+    [(min)]="filter.minValue.min"
+    (minChange)="newFilterValue()"
+    [(max)]="filter.minValue.max"
+    (maxChange)="newFilterValue()"
+    placeholderMin="minmin"
+    placeholderMax="minmax"
+  >
+  </app-number-range-cell>
+  <app-number-range-cell
+    [editable]="true"
+    [(min)]="filter.maxValue.min"
+    (minChange)="newFilterValue()"
+    [(max)]="filter.maxValue.max"
+    (maxChange)="newFilterValue()"
+    placeholderMin="maxmin"
+    placeholderMax="maxmax"
+  >
+  </app-number-range-cell>
+</ng-container>

src/app/components/tableComponents/number-range-cell/number-range-cell.component.html

@@ -7,6 +7,7 @@
     <mat-label *ngIf="label">{{ label }} min</mat-label>
     <input
       matInput
+      [placeholder]="placeholderMin"
       type="number"
       formControlName="minValue"
       (input)="minValueChange($event)"
@@ -17,6 +18,7 @@
     <mat-label *ngIf="label">{{ label }} max</mat-label>
     <input
       matInput
+      [placeholder]="placeholderMax"
       formControlName="maxValue"
       type="number"
       (input)="maxValueChange($event)"

src/app/components/tableComponents/number-range-cell/number-range-cell.component.ts

@@ -37,6 +37,11 @@ export class NumberRangeCellComponent implements OnInit {
 
   rangeForm: FormGroup;
 
+  @Input()
+  placeholderMin = '';
+  @Input()
+  placeholderMax = '';
+
   @Output() minChange = new EventEmitter<number>();
   @Output() maxChange = new EventEmitter<number>();
 

src/app/helperFunctions/customTableFilterFunction.ts

@@ -0,0 +1,56 @@
+export function customTableFilterFunction(data: any, filter: any) {
+  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) =>
+          data[k] != null &&
+          data[k]
+            .toString()
+            .toLowerCase()
+            .includes(filter.includesString.toLowerCase())
+      );*/
+  return true;
+}