22 changed files with 207 additions and 287 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,7 +1,15 @@
 version: "3.1"

 services:
-  cre.backend:
+  database:
+    image: mysql
+    command: --default-authentication-plugin=mysql_native_password
+    environment:
+      MYSQL_ROOT_PASSWORD: "pass"
+      MYSQL_DATABASE: "cre"
+    ports:
+      - "3307:3306"
+  backend:
    image: registry.fyloz.dev:5443/colorrecipesexplorer/backend:latest
    environment:
      spring_profiles_active: "mysql,debug"
@ -15,14 +23,6 @@ services:
    volumes:
      - cre_data:/usr/bin/cre/data
      - cre_config:/usr/bin/cre/config
-  cre.database:
-    image: mysql
-    command: --default-authentication-plugin=mysql_native_password
-    environment:
-      MYSQL_ROOT_PASSWORD: "pass"
-      MYSQL_DATABASE: "cre"
-    ports:
-      - "3307:3306"

 volumes:
  cre_data:
--- a/src/app/modules/company/company.module.ts
+++ b/src/app/modules/company/company.module.ts
@ -5,9 +5,6 @@ import { AddComponent } from './pages/add/add.component';
 import { EditComponent } from './pages/edit/edit.component';
 import {CompanyRoutingModule} from "./company-routing.module";
 import {SharedModule} from "../shared/shared.module";
-import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module'
-import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
-import {CreTablesModule} from '../shared/components/tables/tables.module'



@ -16,10 +13,7 @@ import {CreTablesModule} from '../shared/components/tables/tables.module'
  imports: [
    CommonModule,
    CompanyRoutingModule,
-    SharedModule,
-    CreActionBarModule,
-    CreButtonsModule,
-    CreTablesModule
+    SharedModule
  ]
 })
 export class CompanyModule { }
--- a/src/app/modules/company/pages/list/list.component.html
+++ b/src/app/modules/company/pages/list/list.component.html
@ -1,26 +1,12 @@
-<cre-action-bar [reverse]="true">
-  <cre-action-group>
-    <cre-accent-button routerLink="/catalog/company/add">Ajouter</cre-accent-button>
-  </cre-action-group>
-</cre-action-bar>
-
 <cre-warning-alert *ngIf="companiesEmpty">
  <p>Il n'y a actuellement aucune bannière enregistrée dans le système.</p>
  <p *ngIf="hasEditPermission">Vous pouvez en créer une <b><a routerLink="/catalog/company/add">ici</a></b>.</p>
 </cre-warning-alert>

-<cre-table *ngIf="!companiesEmpty" class="mx-auto" [data]="companies$ | async" [columns]="columns">
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef>Nom</th>
-    <td mat-cell *matCellDef="let company">{{company.name}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="editButton">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell [class.disabled]="!hasEditPermission" *matCellDef="let company; let i = index">
-      <cre-accent-button [creInteractiveCell]="i" routerLink="/catalog/company/edit/{{company.id}}">
-        Modifier
-      </cre-accent-button>
-    </td>
-  </ng-container>
-</cre-table>
+<cre-entity-list
+  [entities$]="companies$"
+  [columns]="columns"
+  [buttons]="buttons"
+  addLink="/catalog/company/add"
+  addPermission="EDIT_COMPANIES">
+</cre-entity-list>
--- a/src/app/modules/company/pages/list/list.component.ts
+++ b/src/app/modules/company/pages/list/list.component.ts
@ -5,8 +5,8 @@ import {Permission} from '../../../shared/model/user'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AppState} from '../../../shared/app-state'
-import {tap} from 'rxjs/operators'
-import {AccountService} from '../../../accounts/services/account.service'
+import {map, tap} from "rxjs/operators";
+import {AccountService} from "../../../accounts/services/account.service";

@Component({
  selector: 'cre-list',
@ -14,10 +14,17 @@ import {AccountService} from '../../../accounts/services/account.service'
  styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  companies$ = this.companyService.all.pipe(tap(companies => this.companiesEmpty = companies.length <= 0))
-  companiesEmpty = false
+  companies$ = this.companyService.all
+  columns = [
+    {def: 'name', title: 'Nom', valueFn: c => c.name}
+  ]
+  buttons = [{
+    text: 'Modifier',
+    linkFn: t => `/catalog/company/edit/${t.id}`,
+    permission: Permission.EDIT_COMPANIES
+  }]

-  columns = ['name', 'editButton']
+  companiesEmpty = false

  constructor(
    private companyService: CompanyService,
@ -29,6 +36,8 @@ export class ListComponent extends ErrorHandlingComponent {
  ) {
    super(errorService, activatedRoute, router)
    this.appState.title = 'Bannières'
+
+    this.companies$.pipe(tap(companies => this.companiesEmpty = companies.length <= 0))
  }

  get hasEditPermission(): boolean {
--- a/src/app/modules/material-type/material-type.module.ts
+++ b/src/app/modules/material-type/material-type.module.ts
@ -6,9 +6,6 @@ import { ListComponent } from './pages/list/list.component';
 import {SharedModule} from "../shared/shared.module";
 import { AddComponent } from './pages/add/add.component';
 import { EditComponent } from './pages/edit/edit.component';
-import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module'
-import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
-import {CreTablesModule} from '../shared/components/tables/tables.module'


@NgModule({
@ -16,10 +13,7 @@ import {CreTablesModule} from '../shared/components/tables/tables.module'
  imports: [
    CommonModule,
    MaterialTypeRoutingModule,
-    SharedModule,
-    CreActionBarModule,
-    CreButtonsModule,
-    CreTablesModule
+    SharedModule
  ]
 })
 export class MaterialTypeModule { }
--- a/src/app/modules/material-type/pages/list/list.component.html
+++ b/src/app/modules/material-type/pages/list/list.component.html
@ -1,40 +1,7 @@
-<cre-action-bar [reverse]="true">
-  <cre-action-group>
-    <cre-accent-button routerLink="/catalog/materialtype/add">Ajouter</cre-accent-button>
-  </cre-action-group>
-</cre-action-bar>
-
-<cre-warning-alert *ngIf="materialTypesEmpty">
-  <p>Il n'y a actuellement aucun type de produit enregistré dans le système.</p>
-  <p *ngIf="hasEditPermission">Vous pouvez en créer un <b><a routerLink="/catalog/materialtype/add">ici</a></b>.</p>
-</cre-warning-alert>
-
-<cre-table
-  *ngIf="!materialTypesEmpty"
-  class="mx-auto"
-  [data]="materialTypes$ | async"
-  [columns]="columns">
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef>Nom</th>
-    <td mat-cell *matCellDef="let materialType">{{materialType.name}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="prefix">
-    <th mat-header-cell *matHeaderCellDef>Préfix</th>
-    <td mat-cell *matCellDef="let materialType">{{materialType.prefix}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="usePercentages">
-    <th mat-header-cell *matHeaderCellDef>Utilise les pourcentages</th>
-    <td mat-cell *matCellDef="let materialType">{{materialType.usePercentages ? 'Oui' : 'Non'}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="editButton">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell [class.disabled]="!hasEditPermission" *matCellDef="let materialType; let i = index">
-      <cre-accent-button [creInteractiveCell]="i" routerLink="/catalog/materialtype/edit/{{materialType.id}}">
-        Modifier
-      </cre-accent-button>
-    </td>
-  </ng-container>
-</cre-table>
+<cre-entity-list
+  [entities$]="materialTypes$"
+  [columns]="columns"
+  [buttons]="buttons"
+  addLink="/catalog/materialtype/add"
+  addPermission="EDIT_MATERIAL_TYPES">
+</cre-entity-list>
--- a/src/app/modules/material-type/pages/list/list.component.ts
+++ b/src/app/modules/material-type/pages/list/list.component.ts
@ -5,8 +5,6 @@ import {Permission} from '../../../shared/model/user'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AppState} from '../../../shared/app-state'
-import {tap} from 'rxjs/operators'
-import {AccountService} from '../../../accounts/services/account.service'

@Component({
  selector: 'cre-list',
@ -14,16 +12,23 @@ import {AccountService} from '../../../accounts/services/account.service'
  styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  materialTypes$ = this.materialTypeService.all.pipe(
-    tap(materialTypes => this.materialTypesEmpty = materialTypes.length <= 0)
-  )
-  materialTypesEmpty = false
-
-  columns = ['name', 'prefix', 'usePercentages', 'editButton']
+  materialTypes$ = this.materialTypeService.all
+  columns = [
+    {def: 'name', title: 'Nom', valueFn: t => t.name},
+    {def: 'prefix', title: 'Préfixe', valueFn: t => t.prefix},
+    {def: 'usePercentages', title: 'Utilise les pourcentages', valueFn: t => t.usePercentages ? 'Oui' : 'Non'}
+  ]
+  buttons = [
+    {
+      text: 'Modifier',
+      linkFn: t => `/catalog/materialtype/edit/${t.id}`,
+      permission: Permission.EDIT_MATERIAL_TYPES,
+      disabledFn: t => t.systemType
+    }
+  ]

  constructor(
    private materialTypeService: MaterialTypeService,
-    private accountService: AccountService,
    private appState: AppState,
    errorService: ErrorService,
    router: Router,
@ -32,8 +37,4 @@ export class ListComponent extends ErrorHandlingComponent {
    super(errorService, activatedRoute, router)
    this.appState.title = 'Types de produit'
  }
-
-  get hasEditPermission(): boolean {
-    return this.accountService.hasPermission(Permission.EDIT_COMPANIES)
-  }
 }
--- a/src/app/modules/material/material.module.ts
+++ b/src/app/modules/material/material.module.ts
@ -9,9 +9,6 @@ import {EditComponent} from './pages/edit/edit.component';
 import {RecipesModule} from '../recipes/recipes.module'
 import {MatSortModule} from '@angular/material/sort'
 import {FormsModule} from '@angular/forms'
-import {CreTablesModule} from '../shared/components/tables/tables.module'
-import {CreInputsModule} from '../shared/components/inputs/inputs.module'
-import {CreButtonsModule} from '../shared/components/buttons/buttons.module'


@NgModule({
@ -22,10 +19,7 @@ import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
    SharedModule,
    RecipesModule,
    MatSortModule,
-    FormsModule,
-    CreTablesModule,
-    CreInputsModule,
-    CreButtonsModule
+    FormsModule
  ]
 })
 export class MaterialModule {
--- a/src/app/modules/material/pages/inventory/inventory.component.html
+++ b/src/app/modules/material/pages/inventory/inventory.component.html
@ -1,34 +1,47 @@
 <div class="action-bar backward">
  <!-- Left -->
  <div class="d-flex flex-row">
-    <cre-input
-      class="mr-4"
-      label="Recherche par code..."
-      [control]="materialNameFilterControl">
-    </cre-input>
-    <cre-select
-      label="Recherche par type de produit"
-      [control]="materialTypeFilterControl"
-      [entries]="materialTypesEntries$">
-    </cre-select>
+    <mat-form-field class="mr-4">
+      <mat-label>Recherche par code...</mat-label>
+      <input
+        matInput
+        type="text"
+        [(ngModel)]="materialNameFilter"
+        (keyup)="filterDataSource()"/>
+    </mat-form-field>
+    <mat-form-field *ngIf="materialTypes$ | async as materialTypes">
+      <mat-label>Recherche par type de produit</mat-label>
+      <mat-select
+        [(value)]="materialTypeFilter"
+        (valueChange)="filterDataSource()">
+        <mat-option
+          *ngFor="let materialType of materialTypes"
+          [value]="materialType.id">
+          {{materialType.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
  </div>

  <!-- Right -->
  <div class="ml-auto">
-    <cre-input
-      class="mr-4"
-      label="Quantité faible"
-      type="number"
-      step="0.01"
-      [(value)]="lowQuantityThreshold">
-    </cre-input>
+    <mat-form-field class="mr-4">
+      <mat-label>Quantité faible</mat-label>
+      <input
+        matInput
+        type="number"
+        step="0.01"
+        [(ngModel)]="lowQuantityThreshold"/>
+    </mat-form-field>
    <cre-unit-selector [(unit)]="units"></cre-unit-selector>
-    <cre-accent-button
+    <button
      *ngIf="canEditMaterial"
      class="ml-3"
+      mat-raised-button
+      color="accent"
      routerLink="/catalog/material/add">
      Ajouter
-    </cre-accent-button>
+    </button>
  </div>
 </div>

@ -38,18 +51,19 @@
  </p>
 </cre-warning-alert>

-<cre-table
+<table
  *ngIf="materials.length > 0"
+  mat-table
+  matSort
  class="mx-auto"
-  [data]="dataSource"
-  [columns]="columns">
+  [dataSource]="dataSource">
  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef>Code</th> <!-- mat-sort-header -->
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Code</th>
    <td mat-cell *matCellDef="let material">{{material.name}}</td>
  </ng-container>

  <ng-container matColumnDef="materialType">
-    <th mat-header-cell *matHeaderCellDef>Type de produit</th> <!-- mat-sort-header -->
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Type de produit</th>
    <td mat-cell *matCellDef="let material">{{material.materialType.name}}</td>
  </ng-container>

@ -61,7 +75,9 @@
  <ng-container matColumnDef="addQuantity">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell [class.disabled]="!canAddToInventory" *matCellDef="let material; let i = index">
-      <div [creInteractiveCell]="i" class="input-group">
+      <div
+        [hidden]="!((!hoveredMaterial && i === 0) || (hoveredMaterial === material) || (selectedMaterial && selectedMaterial === material))"
+        class="input-group">
        <input
          #addQuantityInput
          class="form-control w-50"
@ -82,7 +98,7 @@
  </ng-container>

  <ng-container matColumnDef="lowQuantityIcon">
-    <th mat-header-cell *matHeaderCellDef></th> <!-- mat-sort-header -->
+    <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
    <td mat-cell *matCellDef="let material" [class.disabled]="!isLowQuantity(material)">
      <mat-icon
        svgIcon="format-color-fill"
@ -106,23 +122,37 @@
  <ng-container matColumnDef="editButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let material; let i = index" [class.disabled]="!canEditMaterial">
-      <cre-accent-button
-        [creInteractiveCell]="i"
-        routerLink="/catalog/material/edit/{{material.id}}">
-        Modifier
-      </cre-accent-button>
+      <ng-container *ngIf="(!hoveredMaterial && i === 0) || hoveredMaterial === material">
+        <button
+          mat-raised-button
+          color="accent"
+          routerLink="/catalog/material/edit/{{material.id}}">
+          Modifier
+        </button>
+      </ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="openSimdutButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let material; let i = index" [class.disabled]="canEditMaterial">
-      <cre-accent-button
-        [creInteractiveCell]="i"
-        [disabled]="!materialHasSimdut(material)"
-        (click)="openSimdut(material)">
-        Fiche signalitique
-      </cre-accent-button>
+      <ng-container *ngIf="(!hoveredMaterial && i === 0) || hoveredMaterial === material">
+        <button
+          mat-raised-button
+          color="accent"
+          [disabled]="!materialHasSimdut(material)"
+          (click)="openSimdut(material)">
+          Fiche signalitique
+        </button>
+      </ng-container>
    </td>
  </ng-container>
-</cre-table>
+
+  <tr mat-header-row *matHeaderRowDef="columns"></tr>
+  <tr
+    mat-row
+    class="entity-row"
+    *matRowDef="let material; columns: columns"
+    (mouseover)="hoveredMaterial = material">
+  </tr>
+</table>
--- a/src/app/modules/material/pages/inventory/inventory.component.sass
+++ b/src/app/modules/material/pages/inventory/inventory.component.sass
@ -1,9 +1,8 @@
+.input-group-append button
+  border-radius: 0 4px 4px 0
+
 mat-select
  margin-top: 4px

-.input-group
-  cre-input
-    width: 6rem
-
-  .input-group-append button
-    border-radius: 0 4px 4px 0
+.form-control
+  width: 6rem
--- a/src/app/modules/material/pages/inventory/inventory.component.ts
+++ b/src/app/modules/material/pages/inventory/inventory.component.ts
@ -12,9 +12,6 @@ import {MatTableDataSource} from '@angular/material/table'
 import {MaterialTypeService} from '../../../material-type/service/material-type.service'
 import {InventoryService} from '../../service/inventory.service'
 import {AppState} from '../../../shared/app-state'
-import {FormControl} from '@angular/forms'
-import {map} from 'rxjs/operators'
-import {CreInputEntry} from '../../../shared/components/inputs/inputs'

@Component({
  selector: 'cre-list',
@ -25,9 +22,7 @@ export class InventoryComponent extends ErrorHandlingComponent {
  @ViewChild(MatSort) sort: MatSort

  materials: Material[] | null = []
-  materialTypesEntries$ = this.materialTypeService.all.pipe(map(materialTypes => {
-    return materialTypes.map(materialType => new CreInputEntry(materialType.id, materialType.name))
-  }))
+  materialTypes$ = this.materialTypeService.all
  dataSource: MatTableDataSource<Material>

  columns = ['name', 'materialType', 'quantity', 'addQuantity', 'lowQuantityIcon', 'simdutIcon', 'editButton', 'openSimdutButton']
@ -36,12 +31,8 @@ export class InventoryComponent extends ErrorHandlingComponent {

  units = UNIT_MILLILITER
  lowQuantityThreshold = 100  // TEMPORARY will be in the application settings
-
-  materialTypeFilterControl = new FormControl()
-  materialNameFilterControl = new FormControl()
-
-  private materialTypeFilter = 1
-  private materialNameFilter = ''
+  materialTypeFilter = 1
+  materialNameFilter = ''

  constructor(
    private materialService: MaterialService,
@ -69,16 +60,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
      true,
      1
    )
-
-    this.subscribe(
-      this.materialTypeFilterControl.valueChanges,
-      filter => this.materialTypeFilter = filter
-    )
-
-    this.subscribe(
-      this.materialNameFilterControl.valueChanges,
-      filter => this.materialNameFilter = filter
-    )
  }

  setupDataSource(): MatTableDataSource<Material> {
@ -102,6 +83,10 @@ export class InventoryComponent extends ErrorHandlingComponent {
    return this.dataSource
  }

+  filterDataSource() {
+    this.dataSource.filter = 'filter'
+  }
+
  isLowQuantity(material: Material) {
    return this.getQuantity(material) < this.lowQuantityThreshold
  }
@ -133,11 +118,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
    )
  }

-  get filter(): string {
-    // Uses private UTF-8 char to separate the two fields, change if a better method is found
-    return `${this.materialTypeFilter}􀃿${this.materialNameFilter}`
-  }
-
  get canEditMaterial(): boolean {
    return this.accountService.hasPermission(Permission.EDIT_MATERIALS)
  }
--- a/src/app/modules/recipes/list.html
+++ b/src/app/modules/recipes/list.html
@ -36,12 +36,7 @@
 <ng-template
  #recipeTableTemplate
  let-recipes="recipes">
-  <cre-table
-    class="w-100"
-    [columns]="columns"
-    [data]="recipes"
-    [filter]="searchQuery"
-    [filterFn]="recipeFilterPredicate">
+  <table class="mx-auto" mat-table [dataSource]="recipes">
    <!-- Recipe's info -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Nom</th>
@ -89,16 +84,19 @@
    <!-- Buttons -->
    <ng-container matColumnDef="buttonView">
      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let recipe; let i = index">
-        <cre-accent-button [creInteractiveCell]="i" routerLink="/color/explore/{{recipe.id}}">Voir</cre-accent-button>
+      <td mat-cell *matCellDef="let recipe">
+        <button mat-flat-button color="accent" routerLink="/color/explore/{{recipe.id}}">Voir</button>
      </td>
    </ng-container>

    <ng-container matColumnDef="buttonEdit">
      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let recipe; let i = index" [class.disabled]="!hasEditPermission">
-        <cre-accent-button [creInteractiveCell]="i" routerLink="/color/edit/{{recipe.id}}">Modifier</cre-accent-button>
+      <td mat-cell *matCellDef="let recipe" [class.disabled]="!hasEditPermission">
+        <button mat-flat-button color="accent" routerLink="/color/edit/{{recipe.id}}">Modifier</button>
      </td>
    </ng-container>
-  </cre-table>
+
+    <tr mat-header-row *matHeaderRowDef="tableCols"></tr>
+    <tr mat-row *matRowDef="let recipe; columns: tableCols" [hidden]="hiddenRecipes[recipe.id]"></tr>
+  </table>
 </ng-template>
--- a/src/app/modules/recipes/list.ts
+++ b/src/app/modules/recipes/list.ts
@ -1,17 +1,17 @@
-import {ChangeDetectorRef, Component} from '@angular/core'
-import {ErrorHandlingComponent} from '../shared/components/subscribing.component'
-import {Company} from '../shared/model/company.model'
-import {getRecipeLuma, Recipe, recipeMatchesFilter} from '../shared/model/recipe.model'
-import {CompanyService} from '../company/service/company.service'
-import {RecipeService} from './services/recipe.service'
-import {AccountService} from '../accounts/services/account.service'
-import {ConfigService} from '../shared/service/config.service'
-import {AppState} from '../shared/app-state'
-import {ErrorService} from '../shared/service/error.service'
-import {ActivatedRoute, Router} from '@angular/router'
-import {Config} from '../shared/model/config.model'
-import {Permission} from '../shared/model/user'
-import {FormControl} from '@angular/forms'
+import {ChangeDetectorRef, Component} from '@angular/core';
+import {ErrorHandlingComponent} from '../shared/components/subscribing.component';
+import {Company} from '../shared/model/company.model';
+import {getRecipeLuma, Recipe} from '../shared/model/recipe.model';
+import {CompanyService} from '../company/service/company.service';
+import {RecipeService} from './services/recipe.service';
+import {AccountService} from '../accounts/services/account.service';
+import {ConfigService} from '../shared/service/config.service';
+import {AppState} from '../shared/app-state';
+import {ErrorService} from '../shared/service/error.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Config} from '../shared/model/config.model';
+import {Permission} from '../shared/model/user';
+import {FormControl} from '@angular/forms';

@Component({
  selector: 'cre-recipe-list',
@ -21,13 +21,12 @@ import {FormControl} from '@angular/forms'
 export class RecipeList extends ErrorHandlingComponent {
  companies: Company[] = []
  recipes: Map<number, Recipe[]> = new Map<number, Recipe[]>()
-  columns = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
+  tableCols = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
+  searchQuery = ''
  panelForcedExpanded = false
+  hiddenRecipes = []

  searchControl: FormControl
-  searchQuery = ''
-
-  recipeFilterPredicate = recipeMatchesFilter

  constructor(
    private companyService: CompanyService,
@ -63,13 +62,7 @@ export class RecipeList extends ErrorHandlingComponent {
    this.searchControl = new FormControl('')
    this.subscribe(
      this.searchControl.valueChanges,
-      value => {
-        this.searchQuery = value
-        if (value.length > 0 && !this.panelForcedExpanded) {
-          this.panelForcedExpanded = true
-          this.cdRef.detectChanges()
-        }
-      }
+      value => this.searchRecipes(value)
    )
  }

@ -88,13 +81,24 @@ export class RecipeList extends ErrorHandlingComponent {
    )
  }

-  isCompanyHidden(company: Company): boolean {
-    const companyRecipes = this.recipes.get(company.id)
-    return !(companyRecipes && companyRecipes.length >= 0) ||
-      this.searchQuery && this.searchQuery.length > 0 &&
-      !companyRecipes.some(recipe => this.recipeFilterPredicate(recipe, this.searchQuery))
+  searchRecipes(searchQuery) {
+    this.searchQuery = searchQuery
+    if (this.searchQuery.length > 0 && !this.panelForcedExpanded) {
+      this.panelForcedExpanded = true
+      this.cdRef.detectChanges()
+    }
+
+    for (let recipeArray of this.recipes.values()) {
+      recipeArray.forEach(recipe => this.recipeMatchesSearchQuery(recipe))
+    }
  }

+  isCompanyHidden(company: Company): boolean {
+    const companyRecipes = this.recipes.get(company.id);
+    return !(companyRecipes && companyRecipes.length >= 0) ||
+      this.searchQuery && this.searchQuery.length > 0 &&
+      companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
+  }

  isLight(recipe: Recipe): boolean {
    return getRecipeLuma(recipe) > 200
@ -107,4 +111,16 @@ export class RecipeList extends ErrorHandlingComponent {
  get hasCompanyEditPermission(): boolean {
    return this.accountService.hasPermission(Permission.EDIT_COMPANIES)
  }
+
+  private recipeMatchesSearchQuery(recipe: Recipe) {
+    const matches = this.searchString(recipe.company.name) ||
+      this.searchString(recipe.name) ||
+      this.searchString(recipe.description) ||
+      (recipe.sample && this.searchString(recipe.sample.toString()))
+    this.hiddenRecipes[recipe.id] = !matches
+  }
+
+  private searchString(value: string): boolean {
+    return value.toLowerCase().indexOf(this.searchQuery.toLowerCase()) >= 0
+  }
 }
--- a/src/app/modules/recipes/mix/materials-form.html
+++ b/src/app/modules/recipes/mix/materials-form.html
@ -5,7 +5,7 @@
    </p>
  </cre-warning-alert>

-  <cre-table [hidden]="materialCount <= 0" class="mx-auto" [data]="mixMaterials" [columns]="columns">
+  <cre-table [hidden]="materialCount <= 0" class="mx-auto" [dataSource]="mixMaterials" [columns]="columns">
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef>Position</th>
      <td mat-cell *matCellDef="let mixMaterial">{{mixMaterial.position}}</td>
--- a/src/app/modules/recipes/recipes.sass
+++ b/src/app/modules/recipes/recipes.sass
@ -16,15 +16,3 @@ mat-expansion-panel

 .recipe-content > div
  margin: 0 3rem 3rem
-
-cre-table
-  .mat-column-name,
-  .mat-column-color,
-  .mat-column-iconNotApproved
-    width: 5em
-
-  .mat-column-description
-    width: 50em
-
-  .mat-column-sample
-    width: 10em
--- a/src/app/modules/shared/components/tables/table.html
+++ b/src/app/modules/shared/components/tables/table.html
@ -1,6 +1,4 @@
-<table
-  mat-table
-  [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource">
  <ng-content></ng-content>

  <tr mat-header-row *matHeaderRowDef="columns"></tr>
--- a/src/app/modules/shared/components/tables/tables.module.ts
+++ b/src/app/modules/shared/components/tables/tables.module.ts
@ -4,7 +4,6 @@ import {CommonModule} from '@angular/common'
 import {CreInteractiveCell, CrePositionButtons, CreTable} from './tables'
 import {MatButtonModule} from "@angular/material/button";
 import {MatIconModule} from "@angular/material/icon";
-import {MatSortModule} from '@angular/material/sort'

@NgModule({
  declarations: [
@ -12,13 +11,12 @@ import {MatSortModule} from '@angular/material/sort'
    CreInteractiveCell,
    CrePositionButtons
  ],
-    imports: [
-        MatTableModule,
-        CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        MatSortModule
-    ],
+  imports: [
+    MatTableModule,
+    CommonModule,
+    MatButtonModule,
+    MatIconModule
+  ],
  exports: [
    CreTable,
    CreInteractiveCell,
--- a/src/app/modules/shared/components/tables/tables.ts
+++ b/src/app/modules/shared/components/tables/tables.ts
@ -2,18 +2,14 @@ import {
  AfterContentInit,
  Component,
  ContentChildren,
-  Directive,
-  EventEmitter,
+  Directive, EventEmitter,
  HostBinding,
-  Input,
-  Output,
+  Input, Output,
  QueryList,
  ViewChild,
  ViewEncapsulation
 } from '@angular/core'
-import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource} from '@angular/material/table'
-
-type CreTableData<T> = T[] | MatTableDataSource<T>
+import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable} from '@angular/material/table'

@Directive({
  selector: '[creInteractiveCell]'
@ -61,39 +57,17 @@ export class CreTable<T> implements AfterContentInit {
  @ViewChild(MatTable, {static: true}) table: MatTable<T>

  @Input() columns: string[]
+  @Input() dataSource: T[]
  @Input() interactive = true
-  @Input() filterFn: (t: T, string: string) => boolean = () => true
-
-  @Input() set filter(filter: string) {
-    this.dataSource.filter = filter
-  }
-
-  @Input() set data(data: CreTableData<T>) {
-    this.setupDataSource(data)
-  }

  selectedIndex = 0

-  dataSource: MatTableDataSource<T>
-
  ngAfterContentInit(): void {
    this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef))
    this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef))
    this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef))
  }

-  private setupDataSource(data: CreTableData<T>) {
-    if (data instanceof MatTableDataSource) {
-      this.dataSource = data
-    } else {
-      this.dataSource = new MatTableDataSource<T>(data)
-    }
-
-    if (this.filterFn) {
-      this.dataSource.filterPredicate = (t, filter) => this.filterFn(t, filter)
-    }
-  }
-
  onRowHover(index: number) {
    if (this.interactive) {
      this.interactiveCells.forEach(cell => cell.hoverIndex = index)
@ -124,15 +98,15 @@ export class CrePositionButtons {
  @Input() disableDecreaseButton = false
  @Input() disableIncreaseButton = false

-  @Output() positionChange = new EventEmitter<number>()
+  @Output() positionChange = new EventEmitter<number>();

  increasePosition() {
-    this.position += 1
+    this.position += 1;
    this.positionChange.emit(this.position)
  }

  decreasePosition() {
-    this.position -= 1
+    this.position -= 1;
    this.positionChange.emit(this.position)
  }
 }
--- a/src/app/modules/shared/model/recipe.model.ts
+++ b/src/app/modules/shared/model/recipe.model.ts
@ -124,8 +124,3 @@ export function getRecipeLuma(recipe: Recipe): number {

  return 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709
 }
-
-export function recipeMatchesFilter(recipe: Recipe, filter: string): boolean {
-  const recipeStr = recipe.company.name + recipe.name + recipe.description + recipe.sample
-  return recipeStr.toLowerCase().indexOf(filter.toLowerCase()) >= 0
-}
--- a/src/app/modules/shared/shared.module.ts
+++ b/src/app/modules/shared/shared.module.ts
@ -38,7 +38,6 @@ import {VarDirective} from './directives/var.directive'
 import {CreColorPreview} from './components/color-preview/color-preview'
 import {CreDialogsModule} from './components/dialogs/dialogs.module'
 import {CreAlertsModule} from './components/alerts/alerts.module';
-import {CreActionBarModule} from './components/action-bar/action-bar.module'

@NgModule({
  declarations: [VarDirective, HeaderComponent, UserMenuComponent, LabeledIconComponent, ConfirmBoxComponent, PermissionsListComponent, PermissionsFieldComponent, NavComponent, EntityListComponent, EntityAddComponent, EntityEditComponent, FileButtonComponent, GlobalAlertHandlerComponent, SliderFieldComponent, LoadingWheelComponent, CreColorPreview],
--- a/src/app/modules/touch-up-kit/pages/details.html
+++ b/src/app/modules/touch-up-kit/pages/details.html
@ -14,7 +14,7 @@
    </cre-action-group>
  </cre-action-bar>

-  <cre-table class="mx-auto" [data]="touchUpKit.content" [columns]="contentTableCols" [interactive]="false">
+  <cre-table class="mx-auto" [dataSource]="touchUpKit.content" [columns]="contentTableCols" [interactive]="false">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Nom</th>
      <td mat-cell *matCellDef="let product">{{product.name}}</td>
--- a/src/app/modules/touch-up-kit/pages/list.html
+++ b/src/app/modules/touch-up-kit/pages/list.html
@ -5,7 +5,7 @@
  </cre-action-group>
 </cre-action-bar>

-<cre-table class="mx-auto" [data]="uncompletedTouchUpKits$ | async" [columns]="columns">
+<cre-table class="mx-auto" [dataSource]="uncompletedTouchUpKits$ | async" [columns]="columns">
  <ng-container matColumnDef="project">
    <th mat-header-cell *matHeaderCellDef>Project</th>
    <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.project}}</td>
@ -57,7 +57,7 @@
    <mat-card-title>Kits de retouche complétés</mat-card-title>
  </mat-card-header>
  <mat-card-content>
-    <cre-table [data]="completedTouchUpKits$ | async" [columns]="completedColumns">
+    <cre-table [dataSource]="completedTouchUpKits$ | async" [columns]="completedColumns">
      <ng-container matColumnDef="project">
        <th mat-header-cell *matHeaderCellDef>Project</th>
        <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.project}}</td>