Add unsaved rows filter

src/app/pages/tables/bikes/bikes.component.html

@@ -30,11 +30,25 @@
       <mat-label>Filter</mat-label>
       <input
         matInput
-        [(ngModel)]="filterValue"
+        [(ngModel)]="filter.includesString"
         (input)="applyFilter()"
         placeholder="Suchbegriff eingeben..."
       />
     </mat-form-field>
+    <button
+      *ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"
+      mat-raised-button
+      color="accent"
+      class="table-control-button"
+      (click)="showOnlyUnsavedElements(true)"
+      [disabled]="reloadingTable"
+      i18n
+    >
+      {{countUnsavedRows()}} ungespeicherte(s) Element(e) anzeigen
+    </button>
+    <mat-checkbox *ngIf="filter.onlyUnsaved" (change)="showOnlyUnsavedElements(false)" [(ngModel)]="filter.onlyUnsaved">
+      nur ungespeicherte Elemente anzeigen
+    </mat-checkbox>
     <mat-paginator
       [pageSizeOptions]="[15, 25, 30, 50, 100]"
       showFirstLastButtons

src/app/pages/tables/bikes/bikes.component.ts

@@ -133,7 +133,8 @@ export class BikesComponent {
 
   relockingInterval = null;
   relockingDuration = 1000 * 60 * 1;
-  filterValue: string = '';
+  filter = { includesString: '', onlyUnsaved: false };
+  initialFilter = this.filter;
   isLoaded = false;
 
   constructor(
@@ -149,11 +150,26 @@ export class BikesComponent {
       if (typeof item[columnName] === 'string') {
         return item[columnName].toLocaleLowerCase();
       }
-
       return item[columnName];
     };
     this.data.sort = this.sort;
 
+    this.data.filter = (this.filter as unknown) as string;
+    this.data.filterPredicate = (data, filter: any) => {
+      const a = !filter.onlyUnsaved || data.newObject || data.isLockedByMe;
+      const b =
+        !filter.includesString ||
+        Object.keys(data).some(
+          (k) =>
+            data[k] != null &&
+            data[k]
+              .toString()
+              .toLowerCase()
+              .includes(filter.includesString.toLowerCase())
+        );
+      return a && b;
+    };
+
     this.columnInfo.forEach((column) =>
       this.displayedColumns.push(column.name)
     );
@@ -300,6 +316,16 @@ export class BikesComponent {
     this.bikesService.lockBike({ id: row.id });
   }
 
+  countUnsavedRows():number {
+    let unsavedCount = 0;
+    for(const row of this.data.data) {
+      if (row.isLockedByMe || row.newObject) {
+        unsavedCount++;
+      }
+    }
+    return unsavedCount;
+  }
+
   save(row: CargoBikeResult) {
     const deepenRow = this.schemaService.filterObject(
       this.tableDataGQLUpdateInputType,
@@ -354,12 +380,20 @@ export class BikesComponent {
       : this.data.data.forEach((row) => this.selection.select(row));
   }
 
+  showOnlyUnsavedElements(value: boolean) {
+    this.filter.onlyUnsaved = value;
+    this.applyFilter();
+  }
+
   applyFilter() {
-    this.data.filter = this.filterValue.trim().toLowerCase();
+    this.data.filter = ({
+      ...this.filter,
+      includesString: this.filter.includesString.trim().toLowerCase(),
+    } as unknown) as string;
   }
 
   resetFilter() {
-    this.filterValue = '';
+    this.filter = this.initialFilter;
     this.applyFilter();
   }