Move Filterrow to extra component

src/app/app.module.ts

@@ -86,6 +86,7 @@ import { EngagementsComponent } from './pages/tables/engagements/engagements.com
 import { BikeEventsComponent } from './pages/tables/bike-events/bike-events.component';
 import { BikeEventTypesComponent } from './pages/tables/bike-event-types/bike-event-types.component';
 import { WorkshopTypesComponent } from './pages/tables/workshop-types/workshop-types.component';
+import { FilterRowComponent } from './components/tableComponents/filter-row/filter-row.component';
 
 @NgModule({
   declarations: [
@@ -130,6 +131,7 @@ import { WorkshopTypesComponent } from './pages/tables/workshop-types/workshop-t
     BikeEventsComponent,
     BikeEventTypesComponent,
     WorkshopTypesComponent,
+    FilterRowComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -71,83 +71,14 @@
         *ngFor="let column of columnInfo"
         [matColumnDef]="column.dataPath + '.filter'"
         [sticky]="isStickyColumn(column.dataPath)"
-      >
+        ><th mat-header-cell *matHeaderCellDef>
-        <th mat-header-cell *matHeaderCellDef>
+          <app-filter-row
-          <mat-form-field
+            [column]="column"
-            *ngIf="column.type === 'String' || column.type === 'Id'"
+            [(filter)]="filters.columnFilters[column.dataPath]"
-          >
+            (filtersChange)="newFilterValue()"
-            <input
+          ></app-filter-row>
-              matInput
-              [type]="text"
-              [(ngModel)]="filters.columnFilters[column.dataPath].value"
-              (ngModelChange)="newFilterValue()"
-            />
-            <button
-              matTooltip="exakte Übereinstimmung"
-              mat-button
-              [color]="
-                filters.columnFilters[column.dataPath].options['exact']
-                  ? 'primary'
-                  : ''
-              "
-              matSuffix
-              mat-icon-button
-              (click)="
-                filters.columnFilters[column.dataPath].options[
-                  'exact'
-                ] = !filters.columnFilters[column.dataPath].options['exact'];
-                newFilterValue()
-              "
-            >
-              <mat-icon>short_text</mat-icon>
-            </button>
-            <button
-              matTooltip="Groß- und Kleinschreibung beachten"
-              mat-button
-              [color]="
-                filters.columnFilters[column.dataPath].options['caseSensitive']
-                  ? 'primary'
-                  : ''
-              "
-              matSuffix
-              mat-icon-button
-              (click)="
-                filters.columnFilters[column.dataPath].options[
-                  'caseSensitive'
-                ] = !filters.columnFilters[column.dataPath].options[
-                  'caseSensitive'
-                ];
-                newFilterValue()
-              "
-            >
-              <mat-icon>text_fields</mat-icon>
-            </button>
-            <button
-              *ngIf="filters.columnFilters[column.dataPath].value"
-              matTooltip="Eingabe löschen"
-              mat-button
-              matSuffix
-              mat-icon-button
-              (click)="
-                filters.columnFilters[column.dataPath].value = '';
-                newFilterValue()
-              "
-            >
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-form-field>
-          <app-number-range-cell
-            *ngIf="column.type === 'Int' || column.type === 'Float' || column.type === 'Money'"
-            [editable]="true"
-            [(min)]="filters.columnFilters[column.dataPath].min"
-            (minChange)="newFilterValue()"
-            [(max)]="filters.columnFilters[column.dataPath].max"
-            (maxChange)="newFilterValue()"
-          >
-          </app-number-range-cell>
         </th>
       </ng-container>
-
       <!-- Checkbox Column -->
       <ng-container matColumnDef="select" sticky>
         <th mat-header-cell *matHeaderCellDef>

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

@@ -0,0 +1,63 @@
+<mat-form-field *ngIf="column.type === 'String' || column.type === 'Id'">
+  <input
+    matInput
+    [type]="text"
+    [(ngModel)]="filter.value"
+    (ngModelChange)="newFilterValue()"
+  />
+  <button
+    matTooltip="exakte Übereinstimmung"
+    mat-button
+    [color]="
+      filter.options['exact'] ? 'primary' : ''
+    "
+    matSuffix
+    mat-icon-button
+    (click)="
+      filter.options['exact'] = !filter.options['exact'];
+      newFilterValue()
+    "
+  >
+    <mat-icon>short_text</mat-icon>
+  </button>
+  <button
+    matTooltip="Groß- und Kleinschreibung beachten"
+    mat-button
+    [color]="
+      filter.options['caseSensitive']
+        ? 'primary'
+        : ''
+    "
+    matSuffix
+    mat-icon-button
+    (click)="
+      filter.options['caseSensitive'] = !filter.options['caseSensitive'];
+      newFilterValue()
+    "
+  >
+    <mat-icon>text_fields</mat-icon>
+  </button>
+  <button
+    *ngIf="filter.value"
+    matTooltip="Eingabe löschen"
+    mat-button
+    matSuffix
+    mat-icon-button
+    (click)="
+      filter.value = ''; newFilterValue()
+    "
+  >
+    <mat-icon>cancel</mat-icon>
+  </button>
+</mat-form-field>
+<app-number-range-cell
+  *ngIf="
+    column.type === 'Int' || column.type === 'Float' || column.type === 'Money'
+  "
+  [editable]="true"
+  [(min)]="filter.min"
+  (minChange)="newFilterValue()"
+  [(max)]="filter.max"
+  (maxChange)="newFilterValue()"
+>
+</app-number-range-cell>

src/app/components/tableComponents/filter-row/filter-row.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterRowComponent } from './filter-row.component';
+
+describe('FilterRowComponent', () => {
+  let component: FilterRowComponent;
+  let fixture: ComponentFixture<FilterRowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterRowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-filter-row',
+  templateUrl: './filter-row.component.html',
+  styleUrls: ['./filter-row.component.scss']
+})
+export class FilterRowComponent {
+
+  @Input()
+  column: any;
+
+  @Input()
+  filter: any;
+
+  @Output() filtersChange = new EventEmitter<any>();
+
+  newFilterValue() {
+    this.filtersChange.emit(this.filter);
+  }
+
+}