Ajout du support des groupes dans l'explorateur de recette.

src/app/modules/colors/components/step-list/step-list.component.html

@@ -4,9 +4,12 @@
   </mat-card-header>
   <mat-card-content class="no-action">
     <mat-list>
-      <mat-list-item *ngFor="let step of steps;let i = index">
-        {{i + 1}}.<span class="space"></span>{{step.message}}
+      <mat-list-item *ngFor="let step of steps">
+        {{step.position}}.<span class="space"></span>{{step.message}}
       </mat-list-item>
     </mat-list>
+
+    <p *ngIf="!selectedGroupId" class="empty-text text-center">Aucun groupe n'est sélectionné</p>
+    <p *ngIf="steps.length === 0" class="empty-text text-center">Il n'y a aucune étape définie pour ce groupe</p>
   </mat-card-content>
 </mat-card>

src/app/modules/colors/components/step-list/step-list.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {RecipeStep} from "../../../shared/model/recipe.model";
+import {Recipe, RecipeStep, recipeStepsForGroupId} from '../../../shared/model/recipe.model'
 
 @Component({
   selector: 'cre-step-list',
@@ -7,5 +7,10 @@ import {RecipeStep} from "../../../shared/model/recipe.model";
   styleUrls: ['./step-list.component.sass']
 })
 export class StepListComponent {
-  @Input() steps: RecipeStep[]
+  @Input() recipe: Recipe
+  @Input() selectedGroupId: number | null
+
+  get steps(): RecipeStep[] {
+    return recipeStepsForGroupId(this.recipe, this.selectedGroupId)
+  }
 }

src/app/modules/colors/components/step-table/step-table.component.sass

@@ -1,8 +1,5 @@
 mat-expansion-panel
   min-width: 560px
 
-  .empty-text
-    color: rgba(0, 0, 0, 0.54)
-
 mat-form-field
   width: 20rem

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

@@ -10,14 +10,30 @@
           Enregistrer
         </button>
       </div>
-      <cre-unit-selector (unitChange)="changeUnits($event)"></cre-unit-selector>
+
+      <div>
+        <cre-unit-selector (unitChange)="changeUnits($event)"></cre-unit-selector>
+        <mat-form-field class="ml-3">
+          <mat-label>Groupe</mat-label>
+          <mat-select [(ngModel)]="selectedGroupId">
+            <mat-option *ngFor="let group of (groups$ | async)" [value]="group.id">
+              {{group.name}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
     </div>
 
     <div class="flex-grow-1"></div>
 
     <mat-form-field class="w-auto">
       <mat-label>Note</mat-label>
-      <textarea matInput cols="40" rows="3" (change)="changeNote($event)">{{note}}</textarea>
+      <textarea
+        matInput
+        cols="40" rows="3"
+        [(ngModel)]="selectedGroupNote"
+        (keyup)="hasModifications = true">
+      </textarea>
     </mat-form-field>
   </div>
 
@@ -35,13 +51,13 @@
     </div>
 
     <!-- Steps -->
-<!--    <div *ngIf="recipe.steps.length > 0">-->
-<!--      <cre-step-list [steps]="recipe.steps"></cre-step-list>-->
-<!--    </div>-->
+    <div>
+      <cre-step-list [recipe]="recipe" [selectedGroupId]="selectedGroupId"></cre-step-list>
+    </div>
 
     <!-- Images -->
-    <div>
-      <cre-images-editor [recipe]="recipe" [editionMode]="false"></cre-images-editor>
+    <div [hidden]="!images.hasImages">
+      <cre-images-editor #images [recipe]="recipe" [editionMode]="false"></cre-images-editor>
     </div>
   </div>
 </div>

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

@@ -2,13 +2,15 @@ import {Component} from '@angular/core'
 import {RecipeService} from '../../services/recipe.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {Recipe} from '../../../shared/model/recipe.model'
+import {Recipe, recipeNoteForGroupId} from '../../../shared/model/recipe.model'
 import {Observable, Subject} from 'rxjs'
 import {ErrorModel, ErrorService} from '../../../shared/service/error.service'
 import {AlertService} from '../../../shared/service/alert.service'
 import {GlobalAlertHandlerComponent} from '../../../shared/components/global-alert-handler/global-alert-handler.component'
 import {InventoryService} from '../../../material/service/inventory.service'
 import {ConfirmBoxComponent} from '../../../shared/components/confirm-box/confirm-box.component'
+import {GroupService} from '../../../groups/services/group.service'
+import {AppState} from '../../../shared/app-state'
 
 @Component({
   selector: 'cre-explore',
@@ -17,13 +19,15 @@ import {ConfirmBoxComponent} from '../../../shared/components/confirm-box/confir
 })
 export class ExploreComponent extends ErrorHandlingComponent {
   recipe: Recipe | null
+  groups$ = this.groupService.all
   deductErrorBody = {}
   units$ = new Subject<string>()
+  selectedGroupId: number | null
 
   hasModifications = false
-  note: string | null
   quantitiesChanges = new Map<number, Map<number, number>>()
   mixesLocationChanges = new Map<number, string>()
+  groupsNote = new Map<number, string>()
 
   deductedMixId: number | null
   handledErrorModels: ErrorModel[] = [{
@@ -35,7 +39,9 @@ export class ExploreComponent extends ErrorHandlingComponent {
   constructor(
     private recipeService: RecipeService,
     private inventoryService: InventoryService,
+    private groupService: GroupService,
     private alertService: AlertService,
+    private appState: AppState,
     errorService: ErrorService,
     router: Router,
     activatedRoute: ActivatedRoute
@@ -47,13 +53,14 @@ export class ExploreComponent extends ErrorHandlingComponent {
     super.ngOnInit()
     GlobalAlertHandlerComponent.extraTopMarginMultiplier = 2.5
 
+    this.selectedGroupId = this.loggedInEmployeeGroupId
+
     const id = parseInt(this.activatedRoute.snapshot.paramMap.get('id'))
     this.subscribeEntityById(
       this.recipeService,
       id,
       r => {
         this.recipe = r
-        this.note = r.note
 
         if (this.recipe.mixCount <= 0 || this.recipe.stepCount <= 0) {
           this.alertService.pushWarning('Cette recette n\'est pas complète')
@@ -72,11 +79,6 @@ export class ExploreComponent extends ErrorHandlingComponent {
     this.units$.next(unit)
   }
 
-  changeNote(event: any) {
-    this.hasModifications = true
-    this.note = event.target.value
-  }
-
   changeQuantity(event: { id: number, materialId: number, quantity: number }) {
     if (!this.quantitiesChanges.has(event.id)) {
       this.quantitiesChanges.set(event.id, new Map<number, number>())
@@ -91,8 +93,11 @@ export class ExploreComponent extends ErrorHandlingComponent {
 
   saveModifications() {
     this.subscribe(
-      this.recipeService.saveExplorerModifications(this.recipe.id, this.note, this.mixesLocationChanges),
-      () => this.alertService.pushSuccess('Les modifications ont été enregistrées'),
+      this.recipeService.updateExplorerModifications(this.recipe.id, this.mappedUpdatedNotes, this.mixesLocationChanges),
+      () => {
+        this.hasModifications = false
+        this.alertService.pushSuccess('Les modifications ont été enregistrées')
+      },
       true
     )
   }
@@ -120,4 +125,33 @@ export class ExploreComponent extends ErrorHandlingComponent {
       true
     )
   }
+
+  get loggedInEmployeeGroupId(): number {
+    return this.appState.authenticatedEmployee.group?.id
+  }
+
+  get selectedGroupNote(): string {
+    if (!this.groupsNote.has(this.selectedGroupId)) {
+      this.groupsNote.set(this.selectedGroupId, recipeNoteForGroupId(this.recipe, this.selectedGroupId))
+    }
+    return this.groupsNote.get(this.selectedGroupId)
+  }
+
+  set selectedGroupNote(value: string) {
+    this.groupsNote.set(this.selectedGroupId, value)
+  }
+
+  private get mappedUpdatedNotes(): Map<number, string> {
+    const updatedNotes = new Map<number, string>()
+
+    this.recipe.groupsInformation.forEach(i => {
+      updatedNotes.set(i.group.id, i.note)
+    })
+
+    this.groupsNote.forEach((content, groupId) => {
+      updatedNotes.set(groupId, content)
+    })
+
+    return updatedNotes
+  }
 }

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

@@ -60,13 +60,20 @@ export class RecipeService {
     return this.api.put<Recipe>('/recipe', body)
   }
 
-  saveExplorerModifications(id: number, note: string, mixesLocationChange: Map<number, string>): Observable<void> {
+  updateExplorerModifications(id: number, notes: Map<number, string>, mixesLocationChange: Map<number, string>): Observable<void> {
     const body = {
-      id,
-      note,
-      mixesLocation: {}
+      recipeId: id,
+      notes: [],
+      mixesLocation: []
     }
-    mixesLocationChange.forEach((l, i) => body.mixesLocation[i] = l)
+
+    notes.forEach((content, groupId) => {
+      body.notes.push({groupId, content})
+    })
+
+    mixesLocationChange.forEach((location, mixId) => {
+      body.mixesLocation.push({mixId, location})
+    })
 
     return this.api.put<void>('/recipe/public', body)
   }

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

@@ -76,6 +76,11 @@ export class RecipeStep {
   }
 }
 
+export function recipeNoteForGroupId(recipe: Recipe, groupId: number): string | null {
+  const groupInformation = recipe.groupsInformation.find(i => i.group.id === groupId)
+  return groupInformation ? groupInformation.note : null
+}
+
 export function recipeStepsForGroupId(recipe: Recipe, groupId: number): RecipeStep[] {
   const groupInformation = recipe.groupsInformation.find(i => i.group.id === groupId)
   return groupInformation ? sortRecipeSteps(groupInformation.steps) : []
@@ -84,3 +89,4 @@ export function recipeStepsForGroupId(recipe: Recipe, groupId: number): RecipeSt
 export function sortRecipeSteps(steps: RecipeStep[]): RecipeStep[] {
   return steps.sort((a, b) => a.position - b.position)
 }
+

src/styles.sass

@@ -191,6 +191,9 @@ div.empty
 .alert p
   margin-bottom: 0
 
+.empty-text
+  color: rgba(0, 0, 0, 0.54)
+
 .dark-background
   position: fixed
   width: 100%