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

@@ -16,8 +16,8 @@
     <button
       mat-raised-button
       color="primary"
-      [disabled]="!hasSimdut"
-      [attr.title]="!hasSimdut ? 'Ce produit n\'a pas de fiche signalitique' : null"
+      [disabled]="!material.hasSimdut"
+      [attr.title]="!material.hasSimdut ? 'Ce produit n\'a pas de fiche signalitique' : null"
       (click)="openSimdut()">
       Voir la fiche signalitique
     </button>

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

@@ -119,10 +119,6 @@ export class EditComponent extends ErrorHandlingComponent {
     )
   }
 
-  get hasSimdut(): boolean {
-    return this.material.simdutUrl != null
-  }
-
   openSimdut() {
     openSimdut(this.material)
   }

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

@@ -98,7 +98,7 @@
 
   <ng-container matColumnDef="simdutIcon">
     <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let material" [class.disabled]="materialHasSimdut(material)">
+    <td mat-cell *matCellDef="let material" [class.disabled]="material.hasSimdut">
       <mat-icon
         svgIcon="text-box-remove"
         color="warn"
@@ -123,7 +123,7 @@
     <td mat-cell *matCellDef="let material; let i = index" [class.disabled]="canEditMaterial">
       <cre-accent-button
         [creInteractiveCell]="i"
-        [disabled]="!materialHasSimdut(material)"
+        [disabled]="!material.hasSimdut"
         (click)="openSimdut(material)">
         Fiche signalitique
       </cre-accent-button>

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

@@ -64,7 +64,7 @@ export class InventoryComponent extends ErrorHandlingComponent {
     super.ngOnInit()
 
     this.subscribe(
-      this.materialService.allNotMixType,
+      this.materialService.all,
       materials => this.materials = materials,
       true,
       1
@@ -94,10 +94,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
     return round(convertQuantity(material.inventoryQuantity, UNIT_MILLILITER, this.units), 2)
   }
 
-  materialHasSimdut(material: Material): boolean {
-    return material.simdutUrl != null
-  }
-
   openSimdut(material: Material) {
     openSimdut(material)
   }

src/app/modules/material/service/material.service.ts

@@ -17,10 +17,6 @@ export class MaterialService {
     return this.api.get<Material[]>('/material')
   }
 
-  get allNotMixType(): Observable<Material[]> {
-    return this.api.get<Material[]>('/material/notmixtype')
-  }
-
   getAllForMixCreation(recipeId: number): Observable<Material[]> {
     return this.api.get<Material[]>(`/material/mix/create/${recipeId}`)
   }
@@ -33,14 +29,6 @@ export class MaterialService {
     return this.api.get<Material>(`/material/${id}`)
   }
 
-  hasSimdut(id: number): Observable<boolean> {
-    return this.api.get<boolean>(`/material/${id}/simdut/exists`)
-  }
-
-  getSimduts(): Observable<number[]> {
-    return this.api.get<number[]>('/material/simdut')
-  }
-
   save(name: string, inventoryQuantity: number, materialType: number, simdutFile: FileInput): Observable<void> {
     const body = new FormData()
     body.append('name', name)

src/app/modules/recipes/components/images-editor/images-editor.component.html

@@ -1,17 +1,17 @@
-<mat-card *ngIf="editionMode || imagesUrls">
+<mat-card *ngIf="editionMode || imagesIds">
   <mat-card-header>
     <mat-card-title>Images</mat-card-title>
   </mat-card-header>
   <mat-card-content [class.no-action]="!editionMode">
     <div class="d-flex flex-row justify-content-around flex-wrap">
-      <p *ngIf="imagesUrls.length <= 0" class="light-text text-center mb-0">Aucune image n'est associée à cette couleur</p>
+      <p *ngIf="imagesIds.length <= 0" class="light-text text-center mb-0">Aucune image n'est associée à cette couleur</p>
 
-      <div *ngFor="let imageUrl of imagesUrls" class="d-flex flex-column align-self-center m-3">
+      <div *ngFor="let imageId of imagesIds" class="d-flex flex-column align-self-center m-3">
         <div class="image-wrapper">
-          <img [src]="imageUrl" width="300px"/>
+          <img [src]="getImageUrl(imageId)" width="300px"/>
           <div class="d-flex flex-row justify-content-end mt-2" [class.justify-content-between]="editionMode">
-            <button mat-raised-button color="primary" (click)="openImage(imageUrl)">Afficher</button>
-            <button *ngIf="editionMode" mat-raised-button color="warn" (click)="delete(imageUrl)">Retirer</button>
+            <button mat-raised-button color="primary" (click)="openImage(imageId)">Afficher</button>
+            <button *ngIf="editionMode" mat-raised-button color="warn" (click)="delete(imageId)">Retirer</button>
           </div>
         </div>
       </div>

src/app/modules/recipes/components/images-editor/images-editor.component.ts

@@ -4,7 +4,8 @@ import {SubscribingComponent} from '../../../shared/components/subscribing.compo
 import {ActivatedRoute, Router} from '@angular/router'
 import {RecipeImageService} from '../../services/recipe-image.service'
 import {ErrorService} from '../../../shared/service/error.service'
-import {openJpg} from '../../../shared/utils/utils'
+import {getImageUrl, openJpg} from '../../../shared/utils/utils'
+import {RecipeService} from "../../services/recipe.service";
 
 @Component({
   selector: 'cre-images-editor',
@@ -15,10 +16,11 @@ export class ImagesEditorComponent extends SubscribingComponent {
   @Input() recipe: Recipe
   @Input() editionMode = false
 
-  imagesUrls: string[]
+  imagesIds: string[] = []
 
   constructor(
     private recipeImageService: RecipeImageService,
+    private recipeService: RecipeService,
     errorService: ErrorService,
     router: Router,
     activatedRoute: ActivatedRoute
@@ -29,19 +31,26 @@ export class ImagesEditorComponent extends SubscribingComponent {
   ngOnInit() {
     super.ngOnInit()
 
-    this.imagesUrls = this.recipe.imagesUrls
+    this.subscribe(
+      this.recipeService.getImagesIds(this.recipe.id),
+      imagesIds => this.imagesIds = imagesIds ?? []
+    )
   }
 
   submit(event) {
     const image = event.target.files[0]
     this.subscribe(
       this.recipeImageService.save(image, this.recipe.id),
-      r => this.imagesUrls = r.imagesUrls
+      imageId => this.imagesIds.push(imageId)
     )
   }
 
-  openImage(url: string) {
-    openJpg(url)
+  getImageUrl(id: string): string {
+    return getImageUrl(this.getImagePath(id))
+  }
+
+  openImage(id: string) {
+    openJpg(this.getImagePath(id))
   }
 
   delete(url: string) {
@@ -52,6 +61,10 @@ export class ImagesEditorComponent extends SubscribingComponent {
   }
 
   private removeUrl(url: string) {
-    this.imagesUrls = this.imagesUrls.filter(u => u !== url)
+    this.imagesIds = this.imagesIds.filter(u => u !== url)
+  }
+
+  private getImagePath(id: string): string {
+    return `recipes/${this.recipe.id}/${id}`
   }
 }

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

@@ -126,7 +126,7 @@
           <button
             mat-raised-button
             color="accent"
-            [disabled]="!hasSimdut(getMixMaterialFromDto(mixMaterial).material)"
+            [disabled]="!getMixMaterialFromDto(mixMaterial).material.hasSimdut"
             (click)="openSimdut(getMixMaterialFromDto(mixMaterial))">
             Fiche signalitique
           </button>

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

@@ -1,5 +1,11 @@
 import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'
-import {Mix, MixMaterial, MixMaterialDto, mixMaterialsToMixMaterialsDto, Recipe} from '../../../shared/model/recipe.model'
+import {
+  Mix,
+  MixQuantity,
+  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'
@@ -37,7 +43,7 @@ export class MixTableComponent extends SubscribingComponent {
   mixColumns = this.COLUMNS
   units = UNIT_MILLILITER
   mixMaterials: MixMaterialDto[] = []
-  hoveredMixMaterial: MixMaterial | null
+  hoveredMixMaterial: MixQuantity | null
 
   // BPac printer
   printer: PtouchPrinter | null
@@ -68,11 +74,7 @@ export class MixTableComponent extends SubscribingComponent {
     )
   }
 
-  hasSimdut(material: Material): boolean {
-    return material.simdutUrl != null
-  }
-
-  openSimdut(mixMaterial: MixMaterial) {
+  openSimdut(mixMaterial: MixQuantity) {
     openSimdut(mixMaterial.material)
   }
 
@@ -102,8 +104,8 @@ export class MixTableComponent extends SubscribingComponent {
     })
   }
 
-  getMixMaterialFromDto(mixMaterialDto: MixMaterialDto): MixMaterial {
-    return this.mix.mixMaterials.find(m => m.material.id === mixMaterialDto.materialId)
+  getMixMaterialFromDto(mixMaterialDto: MixMaterialDto): MixQuantity {
+    return this.mix.mixQuantities.find(m => m.material.id === mixMaterialDto.materialId)
   }
 
   getMixMaterialQuantityRounded(mixMaterial: MixMaterialDto): number {
@@ -121,7 +123,7 @@ export class MixTableComponent extends SubscribingComponent {
     return totalQuantity
   }
 
-  getCalculatedQuantityHtml(mixMaterial: MixMaterial, index: number): string {
+  getCalculatedQuantityHtml(mixMaterial: MixQuantity, index: number): string {
     const totalQuantity = this.round(this.getTotalQuantity(index))
     const addedQuantity = this.round(this.calculateQuantity(index))
     return `<span class="mix-calculated-quantity">+${addedQuantity}</span> <span class="mix-calculated-quantity">(${totalQuantity})</span>`
@@ -137,7 +139,7 @@ export class MixTableComponent extends SubscribingComponent {
   }
 
   async print() {
-    const base = this.mix.mixMaterials
+    const base = this.mix.mixQuantities
       .map(ma => ma.material)
       .filter(m => m.materialType.name === 'Base')[0]
     if (!base) {
@@ -192,7 +194,8 @@ export class MixTableComponent extends SubscribingComponent {
       quantity: this.calculateQuantity(index),
       isPercents: quantity.isPercents,
       position: quantity.position,
-      units: UNIT_MILLILITER
+      units: UNIT_MILLILITER,
+      isMixType: false  // TODO
     })
   }
 

src/app/modules/recipes/explore.html

@@ -39,7 +39,7 @@
     </div>
 
     <!-- Images -->
-    <div *ngIf="recipe.imagesUrls">
+    <div>
       <cre-images-editor [recipe]="recipe" [editionMode]="false"></cre-images-editor>
     </div>
   </div>

src/app/modules/recipes/explore.ts

@@ -143,7 +143,7 @@ export class CreRecipeExplore extends ErrorHandlingComponent {
   }
 
   deductMix() {
-    const firstMixMaterial = this.recipe.mixes.filter(m => m.id === this.deductedMixId)[0].mixMaterials[0]
+    const firstMixMaterial = this.recipe.mixes.filter(m => m.id === this.deductedMixId)[0].mixQuantities[0]
     if (this.quantitiesChanges.has(this.deductedMixId) && this.quantitiesChanges.get(this.deductedMixId).has(firstMixMaterial.material.id)) {
       const originalQuantity = firstMixMaterial.quantity
       const currentQuantity = this.quantitiesChanges.get(this.deductedMixId).get(firstMixMaterial.material.id)

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

@@ -4,11 +4,8 @@
       <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-warn-button (click)="deleteConfirmBox.show()">Supprimer</cre-warn-button>
+      <cre-accent-button [disabled]="!form.valid" (click)="submit(form.formValues)">Enregistrer</cre-accent-button>
     </cre-action-group>
   </cre-action-bar>
 
@@ -22,4 +19,10 @@
       Modification du mélange {{mix.mixType.name}} de la recette {{recipe.company.name}} - {{recipe.name}}
     </cre-form-title>
   </cre-mix-form>
+
+  <cre-confirm-box
+    #deleteConfirmBox
+    message="Voulez-vous vraiment supprimer le mélange {{mix.mixType.name}} de la recette {{recipe.company.name}} - {{recipe.name}}?"
+    (confirm)="delete()">
+  </cre-confirm-box>
 </ng-container>

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

@@ -33,7 +33,7 @@
           [mix]="mix"
           [mixMaterials]="mixMaterials"
           [control]="getControls(mixMaterial.position).materialId"
-          [materials]="allMaterials"
+          [materials]="allMaterialsValues"
           [position]="mixMaterial.position">
         </cre-mix-materials-form-combo-box>
       </td>

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

@@ -1,4 +1,13 @@
-import {AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, 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 {Mix, MixMaterialDto, mixMaterialsToMixMaterialsDto, sortMixMaterialsDto} from '../../shared/model/recipe.model'
 import {Observable, Subject} from 'rxjs'
@@ -38,10 +47,6 @@ export class MixMaterialsFormComboBox implements OnInit {
   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
@@ -54,7 +59,18 @@ export class MixMaterialsFormComboBox implements OnInit {
         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))
+      .map(this.materialAsInputEntry)
+  }
+
+  private materialAsInputEntry(material: Material): CreInputEntry {
+    return new CreInputEntry(
+      material.id,
+      material.name,
+      material.materialType.prefix ? `[${material.materialType.prefix}] ${material.name}` : material.name,
+      {
+        bold: material.isMixType
+      }
+    )
   }
 }
 
@@ -71,7 +87,8 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
 
   mixMaterials: MixMaterialDto[] = []
   columns = ['position', 'positionButtons', 'material', 'quantity', 'units', 'endButton']
-  allMaterials: Material[]
+  allMaterials = new Map<number, Material>();
+  allMaterialsValues = [];
 
   private _controls: ControlsByPosition[] = []
   private _destroy$ = new Subject<boolean>()
@@ -85,7 +102,9 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   ngAfterViewInit() {
     this.materials.subscribe({
       next: materials => {
-        this.allMaterials = materials
+        this.allMaterials.clear()
+        this.allMaterialsValues = materials
+        materials.forEach(m => this.allMaterials.set(m.id, m))
 
         if (!this.mix) {
           this.addRow()
@@ -105,7 +124,7 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   }
 
   addRow() {
-    const mixMaterial = new MixMaterialDto(null, 0, false, this.nextPosition, UNIT_MILLILITER)
+    const mixMaterial = new MixMaterialDto(null, 0, false, this.nextPosition, UNIT_MILLILITER, false)
     this.insertRow(mixMaterial)
     this.table.renderRows()
   }
@@ -170,7 +189,7 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
       return false
     }
 
-    return mixMaterial.materialId ? this.allMaterials?.filter(x => x.id === mixMaterial.materialId)[0].materialType.usePercentages : false
+    return mixMaterial.materialId ? this.allMaterials.get(mixMaterial.materialId)?.materialType.usePercentages : false
   }
 
   isDecreasePositionButtonDisabled(mixMaterial: MixMaterialDto): boolean {
@@ -195,19 +214,23 @@ export class MixMaterialsForm implements AfterViewInit, OnDestroy {
   }
 
   get materialCount(): number {
-    return this.allMaterials ? this.allMaterials.length : 0
+    return this.allMaterials.size
   }
 
   get updatedMixMaterials(): MixMaterialDto[] {
     const updatedMixMaterials: MixMaterialDto[] = []
     this.mixMaterials.forEach(mixMaterial => {
       const controls = this.getControlsByPosition(mixMaterial.position).controls
+      const materialId = controls.materialId.value;
+      const material = this.allMaterials.get(materialId)
+
       updatedMixMaterials.push({
-        materialId: controls.materialId.value,
+        ...mixMaterial,
+        materialId,
         quantity: controls.quantity.value,
-        position: mixMaterial.position,
         units: controls.units.value,
-        isPercents: this.areUnitsPercents(mixMaterial)
+        isPercents: material.materialType.usePercentages,
+        isMixType: material.isMixType
       })
     })
     return updatedMixMaterials

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

@@ -113,6 +113,13 @@ export class MixEdit extends _BaseMixPage {
       `/color/edit/${this.recipe.id}`
     )
   }
+
+  delete() {
+    this.subscribeAndNavigate(
+      this.mixService.delete(this.mixId),
+      '/color/edit/' + this.recipe.id
+    )
+  }
 }
 
 @Component({
@@ -138,7 +145,7 @@ export class MixInfoForm implements OnInit {
 
     this.controls = {
       name: new FormControl(this.mix?.mixType.name, Validators.required),
-      materialType: new FormControl(this.mix?.mixType.material.materialType.id, Validators.required)
+      materialType: new FormControl(this.mix?.mixType.materialType.id, Validators.required)
     }
   }
 
@@ -173,7 +180,7 @@ export class MixForm {
       name: this.infoForm.mixName,
       recipeId: this.recipe.id,
       materialTypeId: this.infoForm.mixMaterialTypeId,
-      mixMaterials: this.mixMaterialsForm.updatedMixMaterials
+      mixQuantities: this.mixMaterialsForm.updatedMixMaterials
     }
   }
 

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

@@ -26,7 +26,7 @@ export class MixService {
       dto.name,
       dto.recipeId,
       dto.materialTypeId,
-      dto.mixMaterials,
+      dto.mixQuantities,
     )
   }
 
@@ -39,7 +39,7 @@ export class MixService {
       name,
       recipeId,
       materialTypeId,
-      mixMaterials: []
+      mixQuantities: []
     }
     this.appendMixMaterialsToBody(mixMaterials, body)
     return this.api.post('/recipe/mix', body)
@@ -50,7 +50,7 @@ export class MixService {
       dto.id,
       dto.name,
       dto.materialTypeId,
-      dto.mixMaterials
+      dto.mixQuantities
     )
   }
 
@@ -63,7 +63,7 @@ export class MixService {
       id,
       name,
       materialTypeId,
-      mixMaterials: []
+      mixQuantities: []
     }
 
     this.appendMixMaterialsToBody(mixMaterials, body)
@@ -84,10 +84,11 @@ export class MixService {
 
   private appendMixMaterialsToBody(mixMaterials: MixMaterialDto[], body: any) {
     mixMaterials.filter(m => m.materialId != null && m.quantity != null).forEach(m => {
-      body.mixMaterials.push({
+      body.mixQuantities.push({
         materialId: m.materialId,
         quantity: m.quantity,
-        position: m.position
+        position: m.position,
+        isMixType: m.isMixType
       })
     })
   }
@@ -97,13 +98,13 @@ export interface MixSaveDto {
   name: string
   recipeId: number
   materialTypeId: number
-  mixMaterials: MixMaterialDto[]
+  mixQuantities: MixMaterialDto[]
 }
 
 export interface MixUpdateDto {
   id: number
   name: string
   materialTypeId: number
-  mixMaterials: MixMaterialDto[]
+  mixQuantities: MixMaterialDto[]
 }
 

src/app/modules/recipes/services/recipe-image.service.ts

@@ -12,10 +12,10 @@ export class RecipeImageService {
   ) {
   }
 
-  save(image: File, recipeId: number): Observable<Recipe> {
+  save(image: File, recipeId: number): Observable<string> {
     const body = new FormData()
     body.append('image', image)
-    return this.api.put<Recipe>(`/recipe/${recipeId}/image`, body)
+    return this.api.put<string>(`/recipe/${recipeId}/image`, body)
   }
 
   delete(url: string, recipeId: number): Observable<void> {

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

@@ -84,4 +84,8 @@ export class RecipeService {
   delete(id: number): Observable<void> {
     return this.api.delete<void>(`/recipe/${id}`)
   }
+
+  getImagesIds(id: number): Observable<string[]> {
+    return this.api.get<string[]>(`/recipe/${id}/image`)
+  }
 }

src/app/modules/shared/components/inputs/combo-box.html

@@ -16,7 +16,11 @@
   </mat-error>
 
   <mat-autocomplete #auto="matAutocomplete">
-    <mat-option *ngFor="let entry of filteredEntries" [value]="entry.value">
+    <mat-option
+      *ngFor="let entry of filteredEntries"
+      [value]="entry.value"
+      [class.font-weight-bold]="entry.styleOptions?.bold"
+      [title]="entry.value">
       {{entry.display ? entry.display : entry.value}}
     </mat-option>
   </mat-autocomplete>

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

@@ -167,7 +167,6 @@ export class CreComboBoxComponent {
 
   internalControl: FormControl
   filteredEntries: CreInputEntry[]
-  validValue = false
 
   private _destroy$ = new Subject<boolean>()
   private _entries: CreInputEntry[]
@@ -466,11 +465,16 @@ export class CreInputEntry {
   constructor(
     public key: any,
     public value: any,
-    public display?: any
+    public display?: any,
+    public styleOptions?: CreInputEntryStyleOptions
   ) {
   }
 }
 
+export interface CreInputEntryStyleOptions {
+  bold?: boolean
+}
+
 export function chipListRequired(): ValidatorFn {
   return (control: AbstractControl): ValidationErrors | null => {
     return !control.value || control.value.length <= 0 ? {required: true} : null

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

@@ -7,13 +7,14 @@ export class Material {
     public name: string,
     public inventoryQuantity: number,
     public materialType: MaterialType,
-    public simdutUrl: string
+    public isMixType: boolean,
+    public hasSimdut: boolean
   ) {
   }
 }
 
 export function openSimdut(material: Material) {
-  openPdf(material.simdutUrl)
+  openPdf(`simdut/${material.name}`)
 }
 
 export const materialComparator = (a: Material, b: Material): number => {

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

@@ -2,6 +2,7 @@ import {Material} from './material.model'
 import {Company} from './company.model'
 import {Group} from './user'
 import {UNIT_MILLILITER} from "../units";
+import {MaterialType} from "./materialtype.model";
 
 export class Recipe {
   public id: number
@@ -16,7 +17,6 @@ export class Recipe {
   public mixes: Mix[]
   public approbationExpired: boolean
   public groupsInformation: RecipeGroupInformation[]
-  public imagesUrls: string[]
 }
 
 export class RecipeGroupInformation {
@@ -33,13 +33,13 @@ export class Mix {
   constructor(
     public id: number,
     public mixType: MixType,
-    public mixMaterials: MixMaterial[],
+    public mixQuantities: MixQuantity[],
     public location: string,
   ) {
   }
 }
 
-export class MixMaterial {
+export class MixQuantity {
   constructor(
     public id: number,
     public material: Material,
@@ -55,7 +55,8 @@ export class MixMaterialDto {
     public quantity: number,
     public isPercents: boolean,
     public position: number,
-    public units: string
+    public units: string,
+    public isMixType: boolean
   ) {
   }
 }
@@ -64,7 +65,7 @@ class MixType {
   constructor(
     public id: number,
     public name: string,
-    public material: Material
+    public materialType: MaterialType
   ) {
   }
 }
@@ -101,12 +102,13 @@ export function sortRecipeSteps(steps: RecipeStep[]): RecipeStep[] {
 }
 
 export function mixMaterialsToMixMaterialsDto(mix: Mix): MixMaterialDto[] {
-  return sortMixMaterialsDto(mix.mixMaterials.map(m => new MixMaterialDto(
+  return sortMixMaterialsDto(mix.mixQuantities.map(m => new MixMaterialDto(
     m.material.id,
     m.quantity,
     m.material.materialType.usePercentages,
     m.position,
-    UNIT_MILLILITER
+    UNIT_MILLILITER,
+    m.material.isMixType
   )))
 }
 

src/app/modules/shared/utils/utils.ts

@@ -10,20 +10,28 @@ export function valueOr<T>(value: T, or: T): T {
 const MEDIA_TYPE_PDF = 'application/pdf'
 const MEDIA_TYPE_JPG = 'image/jpeg'
 
-export function openPdf(uri: string) {
-  openFileUri(uri, MEDIA_TYPE_PDF)
+export function getImageUrl(path: string): string {
+  return getFileUri(`images/${path}`, MEDIA_TYPE_JPG)
 }
 
-export function openJpg(uri: string) {
-  openFileUri(uri, MEDIA_TYPE_JPG)
+export function getFileUri(path: string, mediaType: string): string {
+  return `${environment.apiUrl}/file?path=${encodeURIComponent(path)}&mediaType=${encodeURIComponent(mediaType)}`
+}
+
+export function openPdf(path: string) {
+  openFileUri(`pdf/${path}.pdf`, MEDIA_TYPE_PDF)
+}
+
+export function openJpg(path: string) {
+  openFileUri(`images/${path}`, MEDIA_TYPE_JPG)
 }
 
 export function openTouchUpKit(touchUpKit: TouchUpKit) {
   openRawUrl(`${environment.apiUrl}/touchupkit/pdf?project=${touchUpKit.project}`)
 }
 
-export function openFileUri(uri: string, mediaType: string) {
-  openRawUrl(`${environment.apiBaseUrl}${uri}&mediaType=${encodeURIComponent(mediaType)}`)
+export function openFileUri(path: string, mediaType: string) {
+  openRawUrl(getFileUri(path, mediaType))
 }
 
 export function openRawUrl(url: string) {