#14 Add message in the color list

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

@@ -20,18 +20,23 @@
   </div>
 </div>
 
+<div *ngIf="recipes.size === 0" class="alert alert-warning w-50 m-auto text-center">
+  <p>Il n'y a actuellement aucune recette enregistrée dans le système.</p>
+  <p *ngIf="hasEditPermission">Vous pouvez en créer une <b><a routerLink="/color/add">ici</a></b>.</p>
+</div>
+
 <mat-expansion-panel
   class="table-title"
-  *ngFor="let companyRecipes of recipes"
-  [hidden]="isCompanyHidden(companyRecipes.recipes)"
+  *ngFor="let company of companies"
+  [hidden]="isCompanyHidden(company)"
   [expanded]="panelForcedExpanded">
   <mat-expansion-panel-header>
     <mat-panel-title>
-      {{companyRecipes.company}}
+      {{company.name}}
     </mat-panel-title>
   </mat-expansion-panel-header>
 
-  <ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: companyRecipes.recipes}"></ng-container>
+  <ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: recipes.get(company.id)}"></ng-container>
 </mat-expansion-panel>
 
 <ng-template

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

@@ -8,7 +8,9 @@ import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AppState} from '../../../shared/app-state'
 import {ConfigService} from '../../../shared/service/config.service'
-import {Config} from '../../../shared/model/config.model'
+import {Company} from '../../../shared/model/company.model';
+import {CompanyService} from '../../../company/service/company.service';
+import {Config} from '../../../shared/model/config.model';
 
 @Component({
   selector: 'cre-list',
@@ -16,13 +18,15 @@ import {Config} from '../../../shared/model/config.model'
   styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  recipes: { company: string, recipes: Recipe[] }[] = []
+  companies: Company[] = []
+  recipes: Map<number, Recipe[]> = new Map<number, Recipe[]>()
   tableCols = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
   searchQuery = ''
   panelForcedExpanded = false
   hiddenRecipes = []
 
   constructor(
+    private companyService: CompanyService,
     private recipeService: RecipeService,
     private accountService: AccountService,
     private configService: ConfigService,
@@ -37,20 +41,34 @@ export class ListComponent extends ErrorHandlingComponent {
 
   ngOnInit() {
     super.ngOnInit()
-    this.appState.title = "Explorateur"
+    this.appState.title = 'Explorateur'
 
+    // Navigate to configs if server is in emergency mode
     this.subscribe(
       this.configService.get(Config.EMERGENCY_MODE),
       config => {
-        if (config.content === "false") {
-          this.subscribe(
-            this.recipeService.allSortedByCompany,
-            recipes => this.recipes = recipes
+        if (config.content == "true") {
+          this.urlUtils.navigateTo('/admin/config/')
+        }
+      }
     )
-        } else {
-          this.urlUtils.navigateTo("/admin/config")
+
+    this.fetchCompanies()
+    // this.fetchRecipes()
   }
+
+  private fetchCompanies() {
+    this.subscribe(
+      this.companyService.all,
+      companies => this.companies = companies
+    )
   }
+
+  private fetchRecipes() {
+    this.subscribe(
+      this.recipeService.allByCompany,
+      recipes => this.recipes = recipes,
+      true
     )
   }
 
@@ -60,13 +78,16 @@ export class ListComponent extends ErrorHandlingComponent {
       this.cdRef.detectChanges()
     }
 
-    this.recipes
-      .flatMap(r => r.recipes)
-      .forEach(r => this.recipeMatchesSearchQuery(r))
+    for (let recipeArray of this.recipes.values()) {
+      recipeArray.forEach(recipe => this.recipeMatchesSearchQuery(recipe))
+    }
   }
 
-  isCompanyHidden(companyRecipes: Recipe[]): boolean {
-    return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
+  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 {

src/app/modules/colors/services/recipe.service.ts

@@ -3,6 +3,7 @@ import {ApiService} from '../../shared/service/api.service'
 import {Observable} from 'rxjs'
 import {Recipe, RecipeStep} from '../../shared/model/recipe.model'
 import {map} from 'rxjs/operators'
+import {Company} from '../../shared/model/company.model';
 
 @Injectable({
     providedIn: 'root'
@@ -21,16 +22,16 @@ export class RecipeService {
         return this.api.get<Recipe[]>(`/recipe?name=${name}`)
     }
 
-  get allSortedByCompany(): Observable<{ company: string, recipes: Recipe[] }[]> {
+    get allByCompany(): Observable<Map<number, Recipe[]>> {
         return this.all.pipe(map(recipes => {
-      const mapped = []
+            const map = new Map<number, Recipe[]>()
             recipes.forEach(r => {
-        if (!mapped[r.company.id]) {
-          mapped[r.company.id] = {company: r.company.name, recipes: []}
+                if (!map.has(r.company.id)) {
+                    map.set(r.company.id, [])
                 }
-        mapped[r.company.id].recipes.push(r)
+                map.get(r.company.id).push(r)
             })
-      return mapped.filter(e => e != null)  // Filter to remove empty elements in the array that appears for some reason
+            return map
         }))
     }