Improve Filter style

src/app/components/table/table.component.html

@@ -48,6 +48,16 @@
     >
       nur ungespeicherte Elemente anzeigen
     </mat-checkbox>
+    <button
+      mat-raised-button
+      color="primary"
+      class="table-control-button"
+      *ngIf="columnFiltersAreSet()"
+      i18n
+      (click)="resetColumnFilters()"
+    >
+      Spaltenfilterwerte zurücksetzen
+    </button>
     <mat-paginator
       [pageSizeOptions]="[15, 25, 30]"
       showFirstLastButtons
@@ -73,12 +83,29 @@
         [sticky]="isStickyColumn(column.dataPath)"
         ><th mat-header-cell *matHeaderCellDef>
           <app-filter-row
+            *ngIf="filters.columnFilters[column.dataPath]?.isSet"
             [column]="column"
             [(filter)]="filters.columnFilters[column.dataPath]"
             (filtersChange)="newFilterValue()"
           ></app-filter-row>
+          <button
+            mat-icon-button
+            matTooltip="Filter hinzufügen"
+            *ngIf="!filters.columnFilters[column.dataPath]?.isSet"
+            (click)="
+              filters.columnFilters[column.dataPath].isSet = true;
+              setTableFilterRowHeight()
+            "
+          >
+            <mat-icon>filter_list</mat-icon>
+          </button>
         </th>
       </ng-container>
+      <!-- empty filter cell -->
+      <ng-container matColumnDef="buttons.filter">
+        <th mat-header-cell *matHeaderCellDef></th>
+      </ng-container>
+
       <!-- Checkbox Column -->
       <ng-container matColumnDef="select" sticky>
         <th mat-header-cell *matHeaderCellDef>
@@ -327,8 +354,13 @@
       <tr
         mat-header-row
         *matHeaderRowDef="displayedFilterColumns; sticky: true"
+        class="filter-row"
+      ></tr>
+      <tr
+        mat-header-row
+        *matHeaderRowDef="displayedColumns; sticky: true"
+        class="header-row"
       ></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 

src/app/components/table/table.component.scss

@@ -69,4 +69,4 @@
       }
     }
   }
-}
+}

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

@@ -22,6 +22,7 @@ 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',
@@ -111,16 +112,17 @@ export class TableComponent implements AfterViewInit {
     this.columnInfo.forEach((column) =>
       this.displayedColumns.push(column.dataPath)
     );
+    this.displayedColumns.unshift(...this.additionalColumnsFront);
+    this.displayedColumns.push(...this.additionalColumnsBack);
     this.displayedFilterColumns = this.displayedColumns.map(
       (columnName) => columnName + '.filter'
     );
-    this.displayedColumns.unshift(...this.additionalColumnsFront);
-    this.displayedColumns.push(...this.additionalColumnsBack);
 
     this.resetFilters();
   }
 
   ngAfterViewInit(): void {
+    this.setTableFilterRowHeight();
     this.data.paginator = this.paginator;
     this.data.sortingDataAccessor = (item, columnName) => {
       if (typeof item[columnName] === 'string') {
@@ -429,11 +431,20 @@ export class TableComponent implements AfterViewInit {
     });
   }
 
-  resetFilters() {
+  columnFiltersAreSet(): boolean {
-    this.filters = [];
+    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: {},
@@ -444,6 +455,26 @@ export class TableComponent implements AfterViewInit {
         options: {},
       };
     }
+    this.setTableFilterRowHeight();
+  }
+
+  resetFilters() {
+    this.filters = [];
+    this.resetColumnFilters();
+  }
+
+  setTableFilterRowHeight() {
+    setTimeout(() => {
+      const filterRowHeight = document.getElementsByClassName('filter-row')[0]
+        .clientHeight;
+      const headerRowCells = Array.from(
+        document.getElementsByClassName('header-row')[0]
+          .children as HTMLCollectionOf<HTMLElement>
+      );
+      for (let i = 0; i < headerRowCells.length; i++) {
+        headerRowCells[i].style.top = filterRowHeight + 'px';
+      }
+    });
   }
 
   resetSorting() {