Correction de l'erreur de détection des changements lors d'une recherche dans la liste des recettes.

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

@@ -1,8 +1,17 @@
 <div class="action-bar">
   <mat-form-field>
     <mat-label>Recherche</mat-label>
-    <input matInput type="text" [(ngModel)]="searchQuery"/>
-    <button mat-button *ngIf="searchQuery" matSuffix mat-icon-button (click)="searchQuery=''">
+    <input
+      matInput
+      type="text"
+      [(ngModel)]="searchQuery"
+    (keyup)="searchRecipes()"/>
+    <button
+      mat-button
+      *ngIf="searchQuery"
+      matSuffix
+      mat-icon-button
+      (click)="searchQuery=''">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
@@ -13,7 +22,7 @@
 
 <mat-expansion-panel
   class="table-title"
-  *ngFor="let companyRecipes of (recipes$ | async)"
+  *ngFor="let companyRecipes of recipes"
   [hidden]="isCompanyHidden(companyRecipes.recipes)"
   [expanded]="panelForcedExpanded">
   <mat-expansion-panel-header>
@@ -84,6 +93,6 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="tableCols"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableCols" [hidden]="!searchRecipe(row)"></tr>
+    <tr mat-row *matRowDef="let recipe; columns: tableCols" [hidden]="hiddenRecipes[recipe.id]"></tr>
   </table>
 </ng-template>

src/app/modules/colors/pages/list/list.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core'
+import {ChangeDetectorRef, Component} from '@angular/core'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
 import {RecipeService} from '../../services/recipe.service'
 import {EmployeePermission} from '../../../shared/model/employee'
@@ -13,17 +13,18 @@ import {ErrorModel, ErrorService} from '../../../shared/service/error.service'
   styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  recipes$ = this.recipeService.allSortedByCompany
+  recipes: { company: string, recipes: Recipe[] }[] = []
   tableCols = ['name', 'description', 'color', 'gloss', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
-  searchQuery = ""
+  searchQuery = ''
   panelForcedExpanded = false
-  recipesHidden = []
+  hiddenRecipes = []
 
   handledErrorModels: ErrorModel[]
 
   constructor(
     private recipeService: RecipeService,
     private accountService: AccountService,
+    private cdRef: ChangeDetectorRef,
     errorService: ErrorService,
     router: Router,
     activatedRoute: ActivatedRoute
@@ -32,22 +33,27 @@ export class ListComponent extends ErrorHandlingComponent {
   }
 
   ngOnInit() {
-    super.ngOnInit();
+    super.ngOnInit()
+
+    this.subscribe(
+      this.recipeService.allSortedByCompany,
+      recipes => this.recipes = recipes
+    )
   }
 
-  searchRecipe(recipe: Recipe) {
-    if (this.searchQuery.length > 0) {
+  searchRecipes() {
+    if (this.searchQuery.length > 0 && !this.panelForcedExpanded) {
       this.panelForcedExpanded = true
+      this.cdRef.detectChanges()
     }
-    const positive = this.searchString(recipe.name) ||
-      this.searchString(recipe.description) ||
-      (recipe.sample && this.searchString(recipe.sample.toString()))
-    this.recipesHidden[recipe.id] = !positive
-    return positive
+
+    this.recipes
+      .flatMap(r => r.recipes)
+      .forEach(r => this.recipeMatchesSearchQuery(r))
   }
 
   isCompanyHidden(companyRecipes: Recipe[]): boolean {
-    return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.recipesHidden[r.id]).filter(r => !r).length <= 0
+    return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
   }
 
   isLightColor(recipe: Recipe): boolean {
@@ -66,6 +72,13 @@ export class ListComponent extends ErrorHandlingComponent {
     return this.accountService.hasPermission(EmployeePermission.EDIT_RECIPE)
   }
 
+  private recipeMatchesSearchQuery(recipe: Recipe) {
+    const matches = 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
   }