Start updating inventory

docker-compose.yml

@@ -1,15 +1,7 @@
 version: "3.1"
 
 services:
-  database:
-    image: mysql
-    command: --default-authentication-plugin=mysql_native_password
-    environment:
-      MYSQL_ROOT_PASSWORD: "pass"
-      MYSQL_DATABASE: "cre"
-    ports:
-      - "3307:3306"
-  backend:
+  cre.backend:
     image: registry.fyloz.dev:5443/colorrecipesexplorer/backend:latest
     environment:
       spring_profiles_active: "mysql,debug"
@@ -23,6 +15,14 @@ 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:

src/app/modules/company/company.module.ts

@@ -5,6 +5,9 @@ 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'
 
 
 
@@ -13,7 +16,10 @@ import {SharedModule} from "../shared/shared.module";
   imports: [
     CommonModule,
     CompanyRoutingModule,
-    SharedModule
+    SharedModule,
+    CreActionBarModule,
+    CreButtonsModule,
+    CreTablesModule
   ]
 })
 export class CompanyModule { }

src/app/modules/company/pages/list/list.component.html

@@ -1,12 +1,26 @@
+<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-entity-list
-  [entities$]="companies$"
-  [columns]="columns"
-  [buttons]="buttons"
-  addLink="/catalog/company/add"
-  addPermission="EDIT_COMPANIES">
-</cre-entity-list>
+<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>

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 {map, tap} from "rxjs/operators";
-import {AccountService} from "../../../accounts/services/account.service";
+import {tap} from 'rxjs/operators'
+import {AccountService} from '../../../accounts/services/account.service'
 
 @Component({
   selector: 'cre-list',
@@ -14,18 +14,11 @@ import {AccountService} from "../../../accounts/services/account.service";
   styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  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
-  }]
-
+  companies$ = this.companyService.all.pipe(tap(companies => this.companiesEmpty = companies.length <= 0))
   companiesEmpty = false
 
+  columns = ['name', 'editButton']
+
   constructor(
     private companyService: CompanyService,
     private accountService: AccountService,
@@ -36,8 +29,6 @@ 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 {

src/app/modules/material-type/material-type.module.ts

@@ -6,6 +6,9 @@ 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({
@@ -13,7 +16,10 @@ import { EditComponent } from './pages/edit/edit.component';
   imports: [
     CommonModule,
     MaterialTypeRoutingModule,
-    SharedModule
+    SharedModule,
+    CreActionBarModule,
+    CreButtonsModule,
+    CreTablesModule
   ]
 })
 export class MaterialTypeModule { }

src/app/modules/material-type/pages/list/list.component.html

@@ -1,7 +1,40 @@
-<cre-entity-list
-  [entities$]="materialTypes$"
-  [columns]="columns"
-  [buttons]="buttons"
-  addLink="/catalog/materialtype/add"
-  addPermission="EDIT_MATERIAL_TYPES">
-</cre-entity-list>
+<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>

src/app/modules/material-type/pages/list/list.component.ts

@@ -5,6 +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'
 
 @Component({
   selector: 'cre-list',
@@ -12,23 +14,16 @@ import {AppState} from '../../../shared/app-state'
   styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  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
-    }
-  ]
+  materialTypes$ = this.materialTypeService.all.pipe(
+    tap(materialTypes => this.materialTypesEmpty = materialTypes.length <= 0)
+  )
+  materialTypesEmpty = false
+
+  columns = ['name', 'prefix', 'usePercentages', 'editButton']
 
   constructor(
     private materialTypeService: MaterialTypeService,
+    private accountService: AccountService,
     private appState: AppState,
     errorService: ErrorService,
     router: Router,
@@ -37,4 +32,8 @@ 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)
+  }
 }

src/app/modules/material/material.module.ts

@@ -9,6 +9,9 @@ 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({
@@ -19,7 +22,10 @@ import {FormsModule} from '@angular/forms'
     SharedModule,
     RecipesModule,
     MatSortModule,
-    FormsModule
+    FormsModule,
+    CreTablesModule,
+    CreInputsModule,
+    CreButtonsModule
   ]
 })
 export class MaterialModule {

src/app/modules/material/pages/inventory/inventory.component.html

@@ -1,47 +1,34 @@
 <div class="action-bar backward">
   <!-- Left -->
   <div class="d-flex flex-row">
-    <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>
+    <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>
   </div>
 
   <!-- Right -->
   <div class="ml-auto">
-    <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-input
+      class="mr-4"
+      label="Quantité faible"
+      type="number"
+      step="0.01"
+      [(value)]="lowQuantityThreshold">
+    </cre-input>
     <cre-unit-selector [(unit)]="units"></cre-unit-selector>
-    <button
+    <cre-accent-button
       *ngIf="canEditMaterial"
       class="ml-3"
-      mat-raised-button
-      color="accent"
       routerLink="/catalog/material/add">
       Ajouter
-    </button>
+    </cre-accent-button>
   </div>
 </div>
 
@@ -51,19 +38,18 @@
   </p>
 </cre-warning-alert>
 
-<table
+<cre-table
   *ngIf="materials.length > 0"
-  mat-table
-  matSort
   class="mx-auto"
-  [dataSource]="dataSource">
+  [data]="dataSource"
+  [columns]="columns">
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Code</th>
+    <th mat-header-cell *matHeaderCellDef>Code</th> <!-- mat-sort-header -->
     <td mat-cell *matCellDef="let material">{{material.name}}</td>
   </ng-container>
 
   <ng-container matColumnDef="materialType">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Type de produit</th>
+    <th mat-header-cell *matHeaderCellDef>Type de produit</th> <!-- mat-sort-header -->
     <td mat-cell *matCellDef="let material">{{material.materialType.name}}</td>
   </ng-container>
 
@@ -75,9 +61,7 @@
   <ng-container matColumnDef="addQuantity">
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell [class.disabled]="!canAddToInventory" *matCellDef="let material; let i = index">
-      <div
-        [hidden]="!((!hoveredMaterial && i === 0) || (hoveredMaterial === material) || (selectedMaterial && selectedMaterial === material))"
-        class="input-group">
+      <div [creInteractiveCell]="i" class="input-group">
         <input
           #addQuantityInput
           class="form-control w-50"
@@ -98,7 +82,7 @@
   </ng-container>
 
   <ng-container matColumnDef="lowQuantityIcon">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+    <th mat-header-cell *matHeaderCellDef></th> <!-- mat-sort-header -->
     <td mat-cell *matCellDef="let material" [class.disabled]="!isLowQuantity(material)">
       <mat-icon
         svgIcon="format-color-fill"
@@ -122,37 +106,23 @@
   <ng-container matColumnDef="editButton">
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let material; let i = index" [class.disabled]="!canEditMaterial">
-      <ng-container *ngIf="(!hoveredMaterial && i === 0) || hoveredMaterial === material">
-        <button
-          mat-raised-button
-          color="accent"
-          routerLink="/catalog/material/edit/{{material.id}}">
-          Modifier
-        </button>
-      </ng-container>
+      <cre-accent-button
+        [creInteractiveCell]="i"
+        routerLink="/catalog/material/edit/{{material.id}}">
+        Modifier
+      </cre-accent-button>
     </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">
-      <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>
+      <cre-accent-button
+        [creInteractiveCell]="i"
+        [disabled]="!materialHasSimdut(material)"
+        (click)="openSimdut(material)">
+        Fiche signalitique
+      </cre-accent-button>
     </td>
   </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="columns"></tr>
-  <tr
-    mat-row
-    class="entity-row"
-    *matRowDef="let material; columns: columns"
-    (mouseover)="hoveredMaterial = material">
-  </tr>
-</table>
+</cre-table>

src/app/modules/material/pages/inventory/inventory.component.sass

@@ -1,8 +1,9 @@
-.input-group-append button
-  border-radius: 0 4px 4px 0
-
 mat-select
   margin-top: 4px
 
-.form-control
-  width: 6rem
+.input-group
+  cre-input
+    width: 6rem
+
+  .input-group-append button
+    border-radius: 0 4px 4px 0

src/app/modules/material/pages/inventory/inventory.component.ts

@@ -12,6 +12,9 @@ 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',
@@ -22,7 +25,9 @@ export class InventoryComponent extends ErrorHandlingComponent {
   @ViewChild(MatSort) sort: MatSort
 
   materials: Material[] | null = []
-  materialTypes$ = this.materialTypeService.all
+  materialTypesEntries$ = this.materialTypeService.all.pipe(map(materialTypes => {
+    return materialTypes.map(materialType => new CreInputEntry(materialType.id, materialType.name))
+  }))
   dataSource: MatTableDataSource<Material>
 
   columns = ['name', 'materialType', 'quantity', 'addQuantity', 'lowQuantityIcon', 'simdutIcon', 'editButton', 'openSimdutButton']
@@ -31,8 +36,12 @@ export class InventoryComponent extends ErrorHandlingComponent {
 
   units = UNIT_MILLILITER
   lowQuantityThreshold = 100  // TEMPORARY will be in the application settings
-  materialTypeFilter = 1
-  materialNameFilter = ''
+
+  materialTypeFilterControl = new FormControl()
+  materialNameFilterControl = new FormControl()
+
+  private materialTypeFilter = 1
+  private materialNameFilter = ''
 
   constructor(
     private materialService: MaterialService,
@@ -60,6 +69,16 @@ 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> {
@@ -83,10 +102,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
     return this.dataSource
   }
 
-  filterDataSource() {
-    this.dataSource.filter = 'filter'
-  }
-
   isLowQuantity(material: Material) {
     return this.getQuantity(material) < this.lowQuantityThreshold
   }
@@ -118,6 +133,11 @@ 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)
   }

src/app/modules/recipes/list.html

@@ -36,7 +36,12 @@
 <ng-template
   #recipeTableTemplate
   let-recipes="recipes">
-  <table class="mx-auto" mat-table [dataSource]="recipes">
+  <cre-table
+    class="w-100"
+    [columns]="columns"
+    [data]="recipes"
+    [filter]="searchQuery"
+    [filterFn]="recipeFilterPredicate">
     <!-- Recipe's info -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef>Nom</th>
@@ -84,19 +89,16 @@
     <!-- Buttons -->
     <ng-container matColumnDef="buttonView">
       <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let recipe">
-        <button mat-flat-button color="accent" routerLink="/color/explore/{{recipe.id}}">Voir</button>
+      <td mat-cell *matCellDef="let recipe; let i = index">
+        <cre-accent-button [creInteractiveCell]="i" routerLink="/color/explore/{{recipe.id}}">Voir</cre-accent-button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="buttonEdit">
       <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let recipe" [class.disabled]="!hasEditPermission">
-        <button mat-flat-button color="accent" routerLink="/color/edit/{{recipe.id}}">Modifier</button>
+      <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>
     </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="tableCols"></tr>
-    <tr mat-row *matRowDef="let recipe; columns: tableCols" [hidden]="hiddenRecipes[recipe.id]"></tr>
-  </table>
+  </cre-table>
 </ng-template>

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} 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, 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'
 
 @Component({
   selector: 'cre-recipe-list',
@@ -21,12 +21,13 @@ import {FormControl} from '@angular/forms';
 export class RecipeList extends ErrorHandlingComponent {
   companies: Company[] = []
   recipes: Map<number, Recipe[]> = new Map<number, Recipe[]>()
-  tableCols = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
-  searchQuery = ''
+  columns = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
   panelForcedExpanded = false
-  hiddenRecipes = []
 
   searchControl: FormControl
+  searchQuery = ''
+
+  recipeFilterPredicate = recipeMatchesFilter
 
   constructor(
     private companyService: CompanyService,
@@ -62,7 +63,13 @@ export class RecipeList extends ErrorHandlingComponent {
     this.searchControl = new FormControl('')
     this.subscribe(
       this.searchControl.valueChanges,
-      value => this.searchRecipes(value)
+      value => {
+        this.searchQuery = value
+        if (value.length > 0 && !this.panelForcedExpanded) {
+          this.panelForcedExpanded = true
+          this.cdRef.detectChanges()
+        }
+      }
     )
   }
 
@@ -81,25 +88,14 @@ export class RecipeList extends ErrorHandlingComponent {
     )
   }
 
-  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);
+    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
+      !companyRecipes.some(recipe => this.recipeFilterPredicate(recipe, this.searchQuery))
   }
 
+
   isLight(recipe: Recipe): boolean {
     return getRecipeLuma(recipe) > 200
   }
@@ -111,16 +107,4 @@ 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
-  }
 }

src/app/modules/recipes/mix/materials-form.html

@@ -5,7 +5,7 @@
     </p>
   </cre-warning-alert>
 
-  <cre-table [hidden]="materialCount <= 0" class="mx-auto" [dataSource]="mixMaterials" [columns]="columns">
+  <cre-table [hidden]="materialCount <= 0" class="mx-auto" [data]="mixMaterials" [columns]="columns">
     <ng-container matColumnDef="position">
       <th mat-header-cell *matHeaderCellDef>Position</th>
       <td mat-cell *matCellDef="let mixMaterial">{{mixMaterial.position}}</td>

src/app/modules/recipes/recipes.sass

@@ -16,3 +16,15 @@ 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

src/app/modules/shared/components/tables/table.html

@@ -1,4 +1,6 @@
-<table mat-table [dataSource]="dataSource">
+<table
+  mat-table
+  [dataSource]="dataSource">
   <ng-content></ng-content>
 
   <tr mat-header-row *matHeaderRowDef="columns"></tr>

src/app/modules/shared/components/tables/tables.module.ts

@@ -4,6 +4,7 @@ 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: [
@@ -11,12 +12,13 @@ import {MatIconModule} from "@angular/material/icon";
     CreInteractiveCell,
     CrePositionButtons
   ],
-  imports: [
-    MatTableModule,
-    CommonModule,
-    MatButtonModule,
-    MatIconModule
-  ],
+    imports: [
+        MatTableModule,
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatSortModule
+    ],
   exports: [
     CreTable,
     CreInteractiveCell,

src/app/modules/shared/components/tables/tables.ts

@@ -2,14 +2,18 @@ import {
   AfterContentInit,
   Component,
   ContentChildren,
-  Directive, EventEmitter,
+  Directive,
+  EventEmitter,
   HostBinding,
-  Input, Output,
+  Input,
+  Output,
   QueryList,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core'
-import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable} from '@angular/material/table'
+import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource} from '@angular/material/table'
+
+type CreTableData<T> = T[] | MatTableDataSource<T>
 
 @Directive({
   selector: '[creInteractiveCell]'
@@ -57,17 +61,39 @@ 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)
@@ -98,15 +124,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)
   }
 }

src/app/modules/shared/model/recipe.model.ts

@@ -124,3 +124,8 @@ 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
+}

src/app/modules/shared/shared.module.ts

@@ -38,6 +38,7 @@ 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],

src/app/modules/touch-up-kit/pages/details.html

@@ -14,7 +14,7 @@
     </cre-action-group>
   </cre-action-bar>
 
-  <cre-table class="mx-auto" [dataSource]="touchUpKit.content" [columns]="contentTableCols" [interactive]="false">
+  <cre-table class="mx-auto" [data]="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>

src/app/modules/touch-up-kit/pages/list.html

@@ -5,7 +5,7 @@
   </cre-action-group>
 </cre-action-bar>
 
-<cre-table class="mx-auto" [dataSource]="uncompletedTouchUpKits$ | async" [columns]="columns">
+<cre-table class="mx-auto" [data]="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 [dataSource]="completedTouchUpKits$ | async" [columns]="completedColumns">
+    <cre-table [data]="completedTouchUpKits$ | async" [columns]="completedColumns">
       <ng-container matColumnDef="project">
         <th mat-header-cell *matHeaderCellDef>Project</th>
         <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.project}}</td>