Add edit support to new mix editor

src/app/modules/recipes/components/mix-table/mix-table.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'
-import {Mix, MixMaterial, MixMaterialDto, mixMaterialsAsMixMaterialsDto, Recipe} from '../../../shared/model/recipe.model'
+import {Mix, MixMaterial, MixMaterialDto, mixMaterialsToMixMaterialsDto, Recipe} from '../../../shared/model/recipe.model'
 import {Subject} from 'rxjs'
 import {SubscribingComponent} from '../../../shared/components/subscribing.component'
 import {convertMixMaterialQuantity, UNIT_MILLILITER} from '../../../shared/units'
@@ -60,7 +60,7 @@ export class MixTableComponent extends SubscribingComponent {
       this.mixColumns = this.COLUMNS_EDIT
     }
 
-    this.mixMaterials = mixMaterialsAsMixMaterialsDto(this.mix)
+    this.mixMaterials = mixMaterialsToMixMaterialsDto(this.mix)
 
     this.subscribe(
       this.units$,

src/app/modules/recipes/mix/add.html

@@ -13,5 +13,8 @@
     [recipe]="recipe"
     [materialTypes]="materialTypes$"
     [materials]="materials$">
+    <cre-form-title>
+      Ajouter un mélange à la couleur {{recipe.company.name}} - {{recipe.name}}
+    </cre-form-title>
   </cre-mix-form>
 </ng-container>

src/app/modules/recipes/mix/edit.html

@@ -0,0 +1,25 @@
+<ng-container *ngIf="recipe && mix">
+  <cre-action-bar>
+    <cre-action-group>
+      <cre-primary-button routerLink="/color/edit/{{recipe.id}}">Retour</cre-primary-button>
+    </cre-action-group>
+    <cre-action-group>
+      <cre-accent-button
+        [disabled]="!form.valid"
+        (click)="submit(form.formValues)">
+        Enregistrer
+      </cre-accent-button>
+    </cre-action-group>
+  </cre-action-bar>
+
+  <cre-mix-form
+    #form
+    [recipe]="recipe"
+    [mix]="mix"
+    [materialTypes]="materialTypes$"
+    [materials]="materials$">
+    <cre-form-title>
+      Modification du mélange {{mix.mixType.name}} de la recette {{recipe.company.name}} - {{recipe.name}}
+    </cre-form-title>
+  </cre-mix-form>
+</ng-container>

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

@@ -1,8 +1,13 @@
 <cre-mix-info-form
   [recipe]="recipe"
+  [mix]="mix"
   [materialTypes]="materialTypes">
+  <cre-form-title>
+    <ng-content select="cre-form-title"></ng-content>
+  </cre-form-title>
 </cre-mix-info-form>
 
 <cre-mix-materials-form
-  [materials]="materials">
+  [materials]="materials"
+  [mix]="mix">
 </cre-mix-materials-form>

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

@@ -1,6 +1,9 @@
 <cre-form [formControls]="controls" class="mx-auto">
+<!--  <cre-form-title>-->
+<!--    Ajouter un mélange à la couleur {{recipe.company.name}} - {{recipe.name}}-->
+<!--  </cre-form-title>-->
   <cre-form-title>
-    Ajouter un mélange à la couleur {{recipe.company.name}} - {{recipe.name}}
+    <ng-content select="cre-form-title"></ng-content>
   </cre-form-title>
 
   <cre-form-content>

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

@@ -0,0 +1,5 @@
+<cre-combo-box
+  *ngIf="entries"
+  [control]="control"
+  [entries]="entries">
+</cre-combo-box>

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

@@ -28,10 +28,14 @@
     <ng-container matColumnDef="material">
       <th mat-header-cell *matHeaderCellDef>Produit</th>
       <td mat-cell *matCellDef="let mixMaterial">
-        <cre-combo-box
+        <cre-mix-materials-form-combo-box
+          [mixMaterial]="mixMaterial"
+          [mix]="mix"
+          [mixMaterials]="mixMaterials"
           [control]="getControls(mixMaterial.position).materialId"
-          [entries]="getAvailableMaterialEntries(mixMaterial.position)">
-        </cre-combo-box>
+          [materials]="allMaterials"
+          [position]="mixMaterial.position">
+        </cre-mix-materials-form-combo-box>
       </td>
     </ng-container>
 

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

@@ -1,6 +1,6 @@
-import {AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, ViewChild, ViewChildren} from '@angular/core'
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewChildren} from '@angular/core'
 import {CreTable} from '../../shared/components/tables/tables'
-import {MixMaterialDto, sortMixMaterialsDto} from '../../shared/model/recipe.model'
+import {Mix, MixMaterialDto, mixMaterialsToMixMaterialsDto, sortMixMaterialsDto} from '../../shared/model/recipe.model'
 import {Observable, Subject} from 'rxjs'
 import {Material, materialComparator} from '../../shared/model/material.model'
 import {FormControl, Validators} from '@angular/forms'
@@ -8,7 +8,55 @@ import {takeUntil} from 'rxjs/operators'
 import {CreComboBoxComponent, CreInputEntry} from '../../shared/components/inputs/inputs'
 import {AccountService} from '../../accounts/services/account.service'
 import {Permission} from '../../shared/model/user'
-import {UNIT_MILLILITER} from "../../shared/units";
+import {UNIT_MILLILITER} from '../../shared/units'
+
+@Component({
+  selector: 'cre-mix-materials-form-combo-box',
+  templateUrl: 'materials-form-combo-box.html'
+})
+export class MixMaterialsFormComboBox implements OnInit {
+  @ViewChild(CreComboBoxComponent) comboBox: CreComboBoxComponent
+
+  @Input() mixMaterial: MixMaterialDto
+  @Input() mix: Mix | null
+  @Input() mixMaterials: MixMaterialDto[]
+  @Input() control: FormControl
+  @Input() materials: Material[]
+  @Input() position: number
+
+  entries: CreInputEntry[]
+
+  ngOnInit() {
+    this.entries = this.filterMaterials()
+  }
+
+  updateEntries() {
+    this.entries = this.filterMaterials()
+    this.comboBox.reloadEntries()
+  }
+
+  private filterMaterials(): CreInputEntry[] {
+    return this.materials
+      .filter(material => {
+        if (this.mix && this.mix.mixType.material.id === material.id) {
+          return false
+        }
+
+        // Prevent use of percents in first position
+        if (material.materialType.usePercentages && this.mixMaterial.position <= 1) {
+          return false
+        }
+
+        if (this.mixMaterial.materialId === material.id) {
+          return true
+        }
+
+        return this.mixMaterials.filter(x => x.materialId === material.id).length <= 0
+      })
+      .sort(materialComparator)
+      .map(material => new CreInputEntry(material.id, material.name, material.materialType.prefix ? `[${material.materialType.prefix}] ${material.name}` : material.name))
+  }
+}
 
 @Component({
   selector: 'cre-mix-materials-form',
@@ -16,16 +64,16 @@ import {UNIT_MILLILITER} from "../../shared/units";
 })
 export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   @ViewChild(CreTable) table: CreTable<MixMaterialDto>
-  @ViewChildren(CreComboBoxComponent) materialComboBoxes: CreComboBoxComponent[]
+  @ViewChildren(MixMaterialsFormComboBox) comboBoxes: MixMaterialsFormComboBox[]
 
   @Input() materials: Observable<Material[]>
-  @Input() mixMaterials: MixMaterialDto[] = []
+  @Input() mix: Mix | null
 
+  mixMaterials: MixMaterialDto[] = []
   columns = ['position', 'positionButtons', 'material', 'quantity', 'units', 'endButton']
+  allMaterials: Material[]
 
-  private _allMaterials: Material[]
   private _controls: ControlsByPosition[] = []
-  private _availableMaterialsEntries: MaterialEntriesByPosition[] = []
   private _destroy$ = new Subject<boolean>()
 
   constructor(
@@ -37,9 +85,15 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   ngAfterViewInit() {
     this.materials.subscribe({
       next: materials => {
-        this._allMaterials = materials
+        this.allMaterials = materials
 
-        this.addRow()
+        if (!this.mix) {
+          this.addRow()
+        } else {
+          mixMaterialsToMixMaterialsDto(this.mix).forEach(x => this.insertRow(x))
+        }
+
+        this.table.renderRows()
         this.cdRef.detectChanges()
       }
     })
@@ -51,9 +105,12 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   }
 
   addRow() {
-    const position = this.nextPosition
-    const mixMaterial = new MixMaterialDto(null, 0, false, position, UNIT_MILLILITER)
+    const mixMaterial = new MixMaterialDto(null, 0, false, this.nextPosition, UNIT_MILLILITER)
+    this.insertRow(mixMaterial)
+    this.table.renderRows()
+  }
 
+  insertRow(mixMaterial: MixMaterialDto) {
     const materialIdControl = new FormControl(mixMaterial.materialId, Validators.required)
     const quantityControl = new FormControl(mixMaterial.quantity, Validators.required)
     const unitsControl = new FormControl(mixMaterial.units, Validators.required)
@@ -65,30 +122,23 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
           mixMaterial.materialId = materialId
           this.refreshAvailableMaterials()
           this.cdRef.detectChanges()
-          this.materialComboBoxes.forEach(comboBox => comboBox.reloadEntries())
         }
       })
 
+    this.mixMaterials.push(mixMaterial)
     this._controls.push({
-      position,
+      position: mixMaterial.position,
       controls: {
         materialId: materialIdControl,
         quantity: quantityControl,
         units: unitsControl
       }
     })
-    this._availableMaterialsEntries.push({
-      position,
-      entries: this.filterMaterials(mixMaterial)
-    })
-    this.mixMaterials.push(mixMaterial)
-    this.table.renderRows()
   }
 
   removeRow(mixMaterial: MixMaterialDto) {
     this.mixMaterials = this.mixMaterials.filter(x => x.position !== mixMaterial.position)
     this._controls = this._controls.filter(x => x.position !== mixMaterial.position)
-    this._availableMaterialsEntries = this._availableMaterialsEntries.filter(x => x.position !== mixMaterial.position)
 
     for (let position = mixMaterial.position + 1; position < this.mixMaterials.length; position++) {
       this.updatePosition(this.getMixMaterialByPosition(position), position - 1, false)
@@ -98,7 +148,6 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   updatePosition(mixMaterial: MixMaterialDto, newPosition: number, switchPositions = true) {
     const currentPosition = mixMaterial.position
     const currentControls = this.getControlsByPosition(currentPosition)
-    const currentMaterialEntries = this.getMaterialEntriesByPosition(currentPosition)
 
     // Update before current to prevent position conflicts
     if (switchPositions) {
@@ -107,21 +156,21 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
 
     mixMaterial.position = newPosition
     currentControls.position = newPosition
-    currentMaterialEntries.position = newPosition
 
     this.sortTable()
+    this.refreshAvailableMaterials()
   }
 
   getControls(position: number): MixMaterialControls {
     return this.getControlsByPosition(position).controls
   }
 
-  getAvailableMaterialEntries(position: number): CreInputEntry[] {
-    return this.getMaterialEntriesByPosition(position).entries
-  }
-
   areUnitsPercents(mixMaterial: MixMaterialDto): boolean {
-    return mixMaterial.materialId ? this._allMaterials.filter(x => x.id === mixMaterial.materialId)[0].materialType.usePercentages : false
+    if (!mixMaterial) {
+      return false
+    }
+
+    return mixMaterial.materialId ? this.allMaterials?.filter(x => x.id === mixMaterial.materialId)[0].materialType.usePercentages : false
   }
 
   isDecreasePositionButtonDisabled(mixMaterial: MixMaterialDto): boolean {
@@ -146,7 +195,7 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   }
 
   get materialCount(): number {
-    return this._allMaterials ? this._allMaterials.length : 0
+    return this.allMaterials ? this.allMaterials.length : 0
   }
 
   get updatedMixMaterials(): MixMaterialDto[] {
@@ -184,40 +233,14 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
     return this._controls.filter(control => control.position === position)[0]
   }
 
-  private getMaterialEntriesByPosition(position: number): MaterialEntriesByPosition {
-    return this._availableMaterialsEntries.filter(control => control.position === position)[0]
-  }
-
   private refreshAvailableMaterials() {
-    this.mixMaterials
-      .sort((a, b) => a.position - b.position)
-      .forEach(mixMaterial => {
-        this.getMaterialEntriesByPosition(mixMaterial.position).entries = this.filterMaterials(mixMaterial)
-      })
+    this.comboBoxes.forEach(x => x.updateEntries())
   }
 
   private sortTable() {
     this.mixMaterials = sortMixMaterialsDto(this.mixMaterials)
     this.table.renderRows()
   }
-
-  private filterMaterials(mixMaterial: MixMaterialDto): CreInputEntry[] {
-    return this._allMaterials
-      .filter(material => {
-        // Prevent use of percents in first position
-        if (material.materialType.usePercentages && mixMaterial.position <= 1) {
-          return false
-        }
-
-        if (mixMaterial.materialId === material.id) {
-          return true
-        }
-
-        return this.mixMaterials.filter(x => x.materialId === material.id).length <= 0
-      })
-      .sort(materialComparator)
-      .map(material => new CreInputEntry(material.id, material.name, material.materialType.prefix ? `[${material.materialType.prefix}] ${material.name}` : material.name))
-  }
 }
 
 interface MixMaterialControls {
@@ -230,8 +253,3 @@ interface ControlsByPosition {
   position: number
   controls: MixMaterialControls
 }
-
-interface MaterialEntriesByPosition {
-  position: number
-  entries: CreInputEntry[]
-}

src/app/modules/recipes/mix/mix.ts

@@ -1,6 +1,6 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core'
+import {Component, Directive, Input, OnInit, ViewChild} from '@angular/core'
 import {SubscribingComponent} from '../../shared/components/subscribing.component'
-import {Recipe} from '../../shared/model/recipe.model'
+import {Mix, Recipe} from '../../shared/model/recipe.model'
 import {ErrorService} from '../../shared/service/error.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {RecipeService} from '../services/recipe.service'
@@ -14,20 +14,17 @@ import {Material} from '../../shared/model/material.model'
 import {MaterialService} from '../../material/service/material.service'
 import {CreForm} from '../../shared/components/forms/forms'
 import {MixMaterialsForm} from './materials-form'
-import {MixSaveDto, MixService} from "../services/mix.service";
+import {MixSaveDto, MixService, MixUpdateDto} from '../services/mix.service'
 
-@Component({
-  selector: 'cre-mix-add',
-  templateUrl: 'add.html'
-})
-export class MixAdd extends SubscribingComponent {
+@Directive()
+abstract class _BaseMixPage extends SubscribingComponent {
   materialTypes$ = this.materialTypeService.all
   materials$: Observable<Material[]>
 
   private _recipe: Recipe | null
 
   constructor(
-    private mixService: MixService,
+    protected mixService: MixService,
     private recipeService: RecipeService,
     private materialTypeService: MaterialTypeService,
     private materialService: MaterialService,
@@ -51,13 +48,6 @@ export class MixAdd extends SubscribingComponent {
     )
   }
 
-  submit(dto: MixSaveDto) {
-    this.subscribeAndNavigate(
-      this.mixService.saveDto(dto),
-      `/color/edit/${this.recipe.id}`
-    )
-  }
-
   set recipe(recipe: Recipe) {
     this._recipe = recipe
     this.materials$ = this.materialService.getAllForMixCreation(recipe.id)
@@ -66,6 +56,51 @@ export class MixAdd extends SubscribingComponent {
   get recipe(): Recipe {
     return this._recipe
   }
+
+  abstract submit(dto: MixSaveDto)
+}
+
+@Component({
+  selector: 'cre-mix-add',
+  templateUrl: 'add.html'
+})
+export class MixAdd extends _BaseMixPage {
+  submit(dto: MixSaveDto) {
+    this.subscribeAndNavigate(
+      this.mixService.saveDto(dto),
+      `/color/edit/${this.recipe.id}`
+    )
+  }
+}
+
+@Component({
+  selector: 'cre-mix-edit',
+  templateUrl: 'edit.html'
+})
+export class MixEdit extends _BaseMixPage {
+  mix: Mix
+
+  ngOnInit() {
+    super.ngOnInit()
+
+    this.fetchMix()
+  }
+
+  private fetchMix() {
+    const mixId = this.urlUtils.parseIntUrlParam('id')
+
+    this.subscribe(
+      this.mixService.getById(mixId),
+      mix => this.mix = mix
+    )
+  }
+
+  submit(dto: MixSaveDto) {
+    this.subscribeAndNavigate(
+      this.mixService.updateDto({...dto, id: this.mix.id}),
+      `/color/edit/${this.recipe.id}`
+    )
+  }
 }
 
 @Component({
@@ -76,6 +111,7 @@ export class MixInfoForm implements OnInit {
   @ViewChild(CreForm) form: CreForm
 
   @Input() recipe: Recipe
+  @Input() mix: Mix | null
   @Input() materialTypes: Observable<MaterialType[]>
 
   materialTypeEntries: Observable<CreInputEntry[]>
@@ -89,8 +125,8 @@ export class MixInfoForm implements OnInit {
     )
 
     this.controls = {
-      name: new FormControl(null, Validators.required),
-      materialType: new FormControl(null, Validators.required)
+      name: new FormControl(this.mix?.mixType.name, Validators.required),
+      materialType: new FormControl(this.mix?.mixType.material.materialType.id, Validators.required)
     }
   }
 
@@ -116,6 +152,7 @@ export class MixForm {
   @ViewChild(MixMaterialsForm) mixMaterialsForm: MixMaterialsForm
 
   @Input() recipe: Recipe
+  @Input() mix: Mix | null
   @Input() materialTypes: Observable<MaterialType[]>
   @Input() materials: Observable<Material[]>
 

src/app/modules/recipes/pages/mix/mix-add/mix-add.component.html

@@ -1,6 +0,0 @@
-<!--<cre-mix-editor-->
-<!--  *ngIf="recipe && materials"-->
-<!--  [recipe]="recipe"-->
-<!--  [materials]="materials"-->
-<!--  (save)="submit($event)">-->
-<!--</cre-mix-editor>-->

src/app/modules/recipes/pages/mix/mix-add/mix-add.component.ts

@@ -1,61 +0,0 @@
-import {Component} from '@angular/core'
-import {Material} from '../../../../shared/model/material.model'
-import {MaterialService} from '../../../../material/service/material.service'
-import {ActivatedRoute, Router} from '@angular/router'
-import {ErrorHandlingComponent} from '../../../../shared/components/subscribing.component'
-import {MixService} from '../../../services/mix.service'
-import {ErrorService} from '../../../../shared/service/error.service'
-import {Recipe} from "../../../../shared/model/recipe.model";
-import {RecipeService} from "../../../services/recipe.service";
-
-@Component({
-  selector: 'cre-mix-add',
-  templateUrl: './mix-add.component.html',
-  styleUrls: ['./mix-add.component.sass']
-})
-export class MixAddComponent extends ErrorHandlingComponent {
-  materials: Material[] | null = [new Material(0, "Example", 1000, null, null)]
-  recipe: Recipe | null
-
-  private recipeId: number | null
-
-  constructor(
-    private recipeService: RecipeService,
-    private materialService: MaterialService,
-    private mixService: MixService,
-    errorService: ErrorService,
-    router: Router,
-    activatedRoute: ActivatedRoute
-  ) {
-    super(errorService, activatedRoute, router)
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit()
-
-    this.recipeId = this.urlUtils.parseIntUrlParam('recipeId')
-    this.fetchRecipe()
-    // this.fetchMaterials()
-  }
-
-  private fetchRecipe() {
-    this.subscribe(
-      this.recipeService.getById(this.recipeId),
-      recipe => this.recipe = recipe
-    )
-  }
-
-  private fetchMaterials() {
-    this.subscribe(
-      this.materialService.getAllForMixCreation(this.recipeId),
-      materials => this.materials = materials
-    )
-  }
-
-  submit(values) {
-    this.subscribeAndNavigate(
-      this.mixService.saveWithUnits(values.name, values.recipeId, values.materialTypeId, values.mixMaterials),
-      `/color/edit/${this.recipeId}`
-    )
-  }
-}

src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.html

@@ -1,6 +0,0 @@
-<!--<cre-mix-editor-->
-<!--  [mixId]="mixId"-->
-<!--  [recipe]="recipe"-->
-<!--  [materials]="materials"-->
-<!--  (save)="submit($event)">-->
-<!--</cre-mix-editor>-->

src/app/modules/recipes/pages/mix/mix-edit/mix-edit.component.ts

@@ -1,75 +0,0 @@
-import {Component} from '@angular/core'
-import {ActivatedRoute, Router} from '@angular/router'
-import {ErrorHandlingComponent} from '../../../../shared/components/subscribing.component'
-import {Material} from '../../../../shared/model/material.model'
-import {MaterialService} from '../../../../material/service/material.service'
-import {MixService} from '../../../services/mix.service'
-import {ErrorService} from '../../../../shared/service/error.service'
-import {MixMaterialDto, Recipe} from '../../../../shared/model/recipe.model'
-import {AlertService} from '../../../../shared/service/alert.service'
-import {RecipeService} from "../../../services/recipe.service";
-
-@Component({
-  selector: 'cre-mix-edit',
-  templateUrl: './mix-edit.component.html',
-  styleUrls: ['./mix-edit.component.sass']
-})
-export class MixEditComponent extends ErrorHandlingComponent {
-  mixId: number | null
-  recipe: Recipe | null
-  materials: Material[] | null
-
-  private recipeId: number | null
-
-  constructor(
-    private recipeService: RecipeService,
-    private materialService: MaterialService,
-    private mixService: MixService,
-    private alertService: AlertService,
-    errorService: ErrorService,
-    router: Router,
-    activatedRoute: ActivatedRoute
-  ) {
-    super(errorService, activatedRoute, router)
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit()
-
-    this.mixId = this.urlUtils.parseIntUrlParam('id')
-    this.recipeId = this.urlUtils.parseIntUrlParam('recipeId')
-
-    this.fetchRecipe()
-    this.fetchMaterials()
-  }
-
-  private fetchRecipe() {
-    this.subscribe(
-      this.recipeService.getById(this.recipeId),
-      recipe => this.recipe = recipe
-    )
-  }
-
-  private fetchMaterials() {
-    this.subscribe(
-      this.materialService.getAllForMixUpdate(this.mixId),
-      materials => this.materials = materials
-    )
-  }
-
-  submit(values) {
-    if(!this.mixMaterialsPositionAreValid(values.mixMaterials)) {
-      this.alertService.pushError('Les ingrédients ne peuvent pas avoir une position inférieure à 1')
-      return
-    }
-
-    this.subscribeAndNavigate(
-      this.mixService.updateWithUnits(this.mixId, values.name, values.materialTypeId, values.mixMaterials),
-      `/color/edit/${this.recipeId}`
-    )
-  }
-
-  private mixMaterialsPositionAreValid(mixMaterials: MixMaterialDto[]): boolean {
-    return !mixMaterials.find(m => m.position <= 0)
-  }
-}

src/app/modules/recipes/recipes-routing.module.ts

@@ -1,11 +1,9 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {CreRecipeExplore} from './explore';
-import {MixEditComponent} from './pages/mix/mix-edit/mix-edit.component';
-import {MixAddComponent} from './pages/mix/mix-add/mix-add.component';
-import {RecipeAdd, RecipeEdit} from './recipes';
-import {RecipeList} from './list';
-import {MixAdd} from "./mix/mix";
+import {NgModule} from '@angular/core'
+import {RouterModule, Routes} from '@angular/router'
+import {CreRecipeExplore} from './explore'
+import {RecipeAdd, RecipeEdit} from './recipes'
+import {RecipeList} from './list'
+import {MixAdd, MixEdit} from './mix/mix'
 
 const routes: Routes = [{
   path: 'list',
@@ -21,7 +19,7 @@ const routes: Routes = [{
   component: MixAdd
 }, {
   path: 'edit/mix/:recipeId/:id',
-  component: MixEditComponent
+  component: MixEdit
 }, {
   path: 'explore/:id',
   component: CreRecipeExplore

src/app/modules/recipes/recipes.module.ts

@@ -10,19 +10,17 @@ import {MixTableComponent} from './components/mix-table/mix-table.component'
 import {StepListComponent} from './components/step-list/step-list.component'
 import {StepTableComponent} from './components/step-table/step-table.component'
 import {UnitSelectorComponent} from './components/unit-selector/unit-selector.component'
-import {MixAddComponent} from './pages/mix/mix-add/mix-add.component'
-import {MixEditComponent} from './pages/mix/mix-edit/mix-edit.component'
 import {ImagesEditorComponent} from './components/images-editor/images-editor.component'
 import {MixesCardComponent} from './components/mixes-card/mixes-card.component'
 import {MatSortModule} from '@angular/material/sort'
-import {CreInputsModule} from '../shared/components/inputs/inputs.module';
-import {CreButtonsModule} from '../shared/components/buttons/buttons.module';
-import {RecipeAdd, RecipeEdit, RecipeForm} from './recipes';
-import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module';
-import {RecipeList} from './list';
-import {MixAdd, MixForm, MixInfoForm} from "./mix/mix";
-import {CreTablesModule} from "../shared/components/tables/tables.module";
-import {MixMaterialsForm} from "./mix/materials-form";
+import {CreInputsModule} from '../shared/components/inputs/inputs.module'
+import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
+import {RecipeAdd, RecipeEdit, RecipeForm} from './recipes'
+import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module'
+import {RecipeList} from './list'
+import {MixAdd, MixEdit, MixForm, MixInfoForm} from './mix/mix'
+import {CreTablesModule} from '../shared/components/tables/tables.module'
+import {MixMaterialsForm, MixMaterialsFormComboBox} from './mix/materials-form'
 
 @NgModule({
   declarations: [
@@ -32,8 +30,6 @@ import {MixMaterialsForm} from "./mix/materials-form";
     StepListComponent,
     StepTableComponent,
     UnitSelectorComponent,
-    MixAddComponent,
-    MixEditComponent,
     ImagesEditorComponent,
     MixesCardComponent,
     RecipeForm,
@@ -41,9 +37,11 @@ import {MixMaterialsForm} from "./mix/materials-form";
     RecipeEdit,
     RecipeList,
     MixAdd,
+    MixEdit,
     MixForm,
     MixInfoForm,
-    MixMaterialsForm
+    MixMaterialsForm,
+    MixMaterialsFormComboBox
   ],
   exports: [
     UnitSelectorComponent

src/app/modules/recipes/services/mix.service.ts

@@ -45,6 +45,15 @@ export class MixService {
     return this.api.post('/recipe/mix', body)
   }
 
+  updateDto(dto: MixUpdateDto): Observable<void> {
+    return this.updateWithUnits(
+      dto.id,
+      dto.name,
+      dto.materialTypeId,
+      dto.mixMaterials
+    )
+  }
+
   updateWithUnits(id: number, name: string, materialTypeId: number, mixMaterials: MixMaterialDto[]): Observable<void> {
     return this.update(id, name, materialTypeId, this.convertMixMaterialsToMl(mixMaterials))
   }
@@ -91,3 +100,10 @@ export interface MixSaveDto {
   mixMaterials: MixMaterialDto[]
 }
 
+export interface MixUpdateDto {
+  id: number
+  name: string
+  materialTypeId: number
+  mixMaterials: MixMaterialDto[]
+}
+

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

@@ -196,14 +196,6 @@ export class CreComboBoxComponent {
       return
     }
 
-    if (this.control.value) {
-      this.internalControl.setValue(this.findEntryByKey(this.control.value)?.value)
-    }
-
-    if (this.control.disabled) {
-      this.internalControl.disable()
-    }
-
     this.internalControl = new FormControl({
       value: null,
       disabled: false
@@ -222,6 +214,14 @@ export class CreComboBoxComponent {
         }
       })
 
+    if (this.control.value) {
+      this.internalControl.setValue(this.findEntryByKey(this.control.value)?.value)
+    }
+
+    if (this.control.disabled) {
+      this.internalControl.disable()
+    }
+
     this.reloadEntries()
     this._controlsInitialized = true
   }

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

@@ -100,7 +100,7 @@ export function sortRecipeSteps(steps: RecipeStep[]): RecipeStep[] {
   return steps.sort((a, b) => a.position - b.position)
 }
 
-export function mixMaterialsAsMixMaterialsDto(mix: Mix): MixMaterialDto[] {
+export function mixMaterialsToMixMaterialsDto(mix: Mix): MixMaterialDto[] {
   return sortMixMaterialsDto(mix.mixMaterials.map(m => new MixMaterialDto(
     m.material.id,
     m.quantity,