From d239d37e662296bb945816975d80041ad05f191e Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Wed, 15 Dec 2021 22:25:22 -0500
Subject: [PATCH 1/7] Remote login/logout old components

---
 .../accounts/accounts-routing.module.ts       |  5 +-
 src/app/modules/accounts/accounts.module.ts   |  9 +--
 src/app/modules/accounts/accounts.ts          | 32 ++++++++++-
 .../accounts/pages/login/login.component.html | 36 ------------
 .../accounts/pages/login/login.component.sass |  8 ---
 .../accounts/pages/login/login.component.ts   | 55 -------------------
 .../pages/logout/logout.component.html        |  0
 .../pages/logout/logout.component.sass        |  0
 .../accounts/pages/logout/logout.component.ts | 35 ------------
 9 files changed, 35 insertions(+), 145 deletions(-)
 delete mode 100644 src/app/modules/accounts/pages/login/login.component.html
 delete mode 100644 src/app/modules/accounts/pages/login/login.component.sass
 delete mode 100644 src/app/modules/accounts/pages/login/login.component.ts
 delete mode 100644 src/app/modules/accounts/pages/logout/logout.component.html
 delete mode 100644 src/app/modules/accounts/pages/logout/logout.component.sass
 delete mode 100644 src/app/modules/accounts/pages/logout/logout.component.ts

diff --git a/src/app/modules/accounts/accounts-routing.module.ts b/src/app/modules/accounts/accounts-routing.module.ts
index 006c93f..5615140 100644
--- a/src/app/modules/accounts/accounts-routing.module.ts
+++ b/src/app/modules/accounts/accounts-routing.module.ts
@@ -1,14 +1,13 @@
 import {NgModule} from '@angular/core'
 import {RouterModule, Routes} from '@angular/router'
-import {LogoutComponent} from './pages/logout/logout.component'
-import {Login} from './accounts'
+import {Login, Logout} from './accounts'
 
 const routes: Routes = [{
   path: 'login',
   component: Login
 }, {
   path: 'logout',
-  component: LogoutComponent
+  component: Logout
 }, {
   path: '',
   redirectTo: 'login'
diff --git a/src/app/modules/accounts/accounts.module.ts b/src/app/modules/accounts/accounts.module.ts
index c8a05ec..353042f 100644
--- a/src/app/modules/accounts/accounts.module.ts
+++ b/src/app/modules/accounts/accounts.module.ts
@@ -1,19 +1,16 @@
 import {NgModule} from '@angular/core'
 
 import {AccountsRoutingModule} from './accounts-routing.module'
-import {LoginComponent} from './pages/login/login.component'
 import {SharedModule} from '../shared/shared.module'
-import {LogoutComponent} from './pages/logout/logout.component'
-import {Login} from './accounts'
+import {Login, Logout} from './accounts'
 import {CreInputsModule} from '../shared/components/inputs/inputs.module'
 import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
 
 
 @NgModule({
   declarations: [
-    LoginComponent,
-    LogoutComponent,
-    Login
+    Login,
+    Logout
   ],
   imports: [
     SharedModule,
diff --git a/src/app/modules/accounts/accounts.ts b/src/app/modules/accounts/accounts.ts
index 10f850b..81b477f 100644
--- a/src/app/modules/accounts/accounts.ts
+++ b/src/app/modules/accounts/accounts.ts
@@ -1,12 +1,11 @@
 import {Component, HostListener, ViewChild} from '@angular/core'
 import {FormControl, Validators} from '@angular/forms'
-import {ErrorHandlingComponent} from '../shared/components/subscribing.component'
+import {ErrorHandlingComponent, SubscribingComponent} from '../shared/components/subscribing.component'
 import {AccountService} from './services/account.service'
 import {AppState} from '../shared/app-state'
 import {ErrorHandler, ErrorService} from '../shared/service/error.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {CreForm, ICreForm} from "../shared/components/forms/forms";
-import {take, takeUntil} from "rxjs/operators";
 import {AlertService} from "../shared/service/alert.service";
 
 @Component({
@@ -61,3 +60,32 @@ export class Login extends ErrorHandlingComponent {
     }
   }
 }
+
+@Component({
+  selector: 'cre-logout',
+  template: ''
+})
+export class Logout extends SubscribingComponent {
+  constructor(
+    private accountService: AccountService,
+    private alertService: AlertService,
+    private appState: AppState,
+    errorService: ErrorService,
+    router: Router,
+    activatedRoute: ActivatedRoute
+  ) {
+    super(errorService, activatedRoute, router)
+    this.appState.title = 'Connexion'
+  }
+
+  ngOnInit(): void {
+    if (!this.appState.isAuthenticated) {
+      this.urlUtils.navigateTo('/account/login')
+    }
+
+    this.subscribeAndNavigate(
+      this.accountService.logout(),
+      '/account/login'
+    )
+  }
+}
diff --git a/src/app/modules/accounts/pages/login/login.component.html b/src/app/modules/accounts/pages/login/login.component.html
deleted file mode 100644
index 28aa77c..0000000
--- a/src/app/modules/accounts/pages/login/login.component.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<form [formGroup]="form">
-  <mat-card class="x-centered y-centered">
-    <mat-card-header>
-      <mat-card-title>Connexion au système</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-      <mat-form-field>
-        <mat-label>Numéro d'utilisateur</mat-label>
-        <input matInput [formControl]="idFormControl" type="text"/>
-        <mat-icon matSuffix>person</mat-icon>
-        <mat-error *ngIf="idFormControl.invalid">
-          <span *ngIf="idFormControl.errors.required">Un numéro d'utilisateur est requis</span>
-          <span *ngIf="idFormControl.errors.pattern">Le numéro d'utilisateur doit être un nombre</span>
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-label>Mot de passe</mat-label>
-        <input matInput [formControl]="passwordFormControl" type="password"/>
-        <mat-icon matSuffix>lock</mat-icon>
-        <mat-error *ngIf="passwordFormControl.invalid">
-          <span *ngIf="passwordFormControl.errors.required">Un mot de passe est requis</span>
-        </mat-error>
-      </mat-form-field>
-    </mat-card-content>
-    <mat-card-actions class="justify-content-end">
-      <button
-        mat-raised-button
-        type="submit"
-        color="accent"
-        [disabled]="form.invalid"
-        (click)="submit()">
-        Connexion
-      </button>
-    </mat-card-actions>
-  </mat-card>
-</form>
diff --git a/src/app/modules/accounts/pages/login/login.component.sass b/src/app/modules/accounts/pages/login/login.component.sass
deleted file mode 100644
index afd1937..0000000
--- a/src/app/modules/accounts/pages/login/login.component.sass
+++ /dev/null
@@ -1,8 +0,0 @@
-mat-card
-  width: 25rem
-
-  .alert p
-    margin: 0
-
-  mat-form-field
-    width: 100%
diff --git a/src/app/modules/accounts/pages/login/login.component.ts b/src/app/modules/accounts/pages/login/login.component.ts
deleted file mode 100644
index 919bed0..0000000
--- a/src/app/modules/accounts/pages/login/login.component.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {Component, OnInit} from '@angular/core'
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'
-import {AccountService} from '../../services/account.service'
-import {ActivatedRoute, Router} from '@angular/router'
-import {ErrorService} from '../../../shared/service/error.service'
-import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {AppState} from '../../../shared/app-state'
-
-@Component({
-  selector: 'cre-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.sass']
-})
-export class LoginComponent extends ErrorHandlingComponent implements OnInit {
-  form: FormGroup
-  idFormControl: FormControl
-  passwordFormControl: FormControl
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private accountService: AccountService,
-    private appState: AppState,
-    errorService: ErrorService,
-    router: Router,
-    activatedRoute: ActivatedRoute
-  ) {
-    super(errorService, activatedRoute, router)
-    this.appState.title = 'Connexion'
-  }
-
-  ngOnInit(): void {
-    this.errorService.activeErrorHandler = this
-
-    if (this.appState.isAuthenticated) {
-      this.router.navigate(['/color'])
-    }
-
-    this.idFormControl = this.formBuilder.control(null, Validators.compose([Validators.required, Validators.pattern(new RegExp('^[0-9]+$'))]))
-    this.passwordFormControl = this.formBuilder.control(null, Validators.required)
-    this.form = this.formBuilder.group({
-      id: this.idFormControl,
-      password: this.passwordFormControl
-    })
-  }
-
-  submit() {
-    this.subscribe(
-      this.accountService.login(
-        this.idFormControl.value,
-        this.passwordFormControl.value
-      ),
-      response => console.log(response)
-    )
-  }
-}
diff --git a/src/app/modules/accounts/pages/logout/logout.component.html b/src/app/modules/accounts/pages/logout/logout.component.html
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/modules/accounts/pages/logout/logout.component.sass b/src/app/modules/accounts/pages/logout/logout.component.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/modules/accounts/pages/logout/logout.component.ts b/src/app/modules/accounts/pages/logout/logout.component.ts
deleted file mode 100644
index a1433c1..0000000
--- a/src/app/modules/accounts/pages/logout/logout.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Component} from '@angular/core';
-import {AccountService} from "../../services/account.service";
-import {ActivatedRoute, Router} from "@angular/router";
-import {AppState} from "../../../shared/app-state";
-import {SubscribingComponent} from "../../../shared/components/subscribing.component";
-import {ErrorService} from "../../../shared/service/error.service";
-
-@Component({
-  selector: 'cre-logout',
-  templateUrl: './logout.component.html',
-  styleUrls: ['./logout.component.sass']
-})
-export class LogoutComponent extends SubscribingComponent {
-
-  constructor(
-    private accountService: AccountService,
-    private appState: AppState,
-    errorService: ErrorService,
-    router: Router,
-    activatedRoute: ActivatedRoute
-  ) {
-    super(errorService, activatedRoute, router)
-  }
-
-  ngOnInit(): void {
-    if (!this.appState.isAuthenticated) {
-      this.urlUtils.navigateTo('/account/login')
-    }
-
-    this.subscribeAndNavigate(
-      this.accountService.logout(),
-      '/account/login'
-    )
-  }
-}
-- 
2.40.1


From 82cb974d270871be2f1e24bfcfca2e5fad1136cd Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Wed, 15 Dec 2021 22:32:40 -0500
Subject: [PATCH 2/7] CI/CD

---
 .drone.yml | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index 11396c2..d44383a 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,6 +1,6 @@
 ---
 global-variables:
-  release: &release ${DRONE_BRANCH##**/}
+  release: &release ${DRONE_TAG}
   environment: &environment
     CRE_REGISTRY_IMAGE: registry.fyloz.dev:5443/colorrecipesexplorer/frontend
     CRE_PORT: 9102
@@ -21,6 +21,9 @@ steps:
       - echo -n "latest" > .tags
     when:
       branch: develop
+      event:
+        exclude:
+          - pull_request
 
   - name: set-docker-tags-release
     image: *alpine-image
@@ -29,9 +32,10 @@ steps:
     commands:
       - echo -n "latest-release,$CRE_RELEASE" > .tags
     when:
-      branch: release/**
+      event:
+        - tag
 
-  - name: containerize
+  - name: containerize-dev
     image: plugins/docker
     environment:
       <<: *environment
@@ -40,7 +44,16 @@ steps:
     when:
       branch:
         - develop
-        - release/**
+
+  - name: containerize-release
+    image: plugins/docker
+    environment:
+      <<: *environment
+    settings:
+      repo: *docker-registry-repo
+    when:
+      event:
+        - tag
 
   - name: deploy
     image: alpine:latest
@@ -70,10 +83,11 @@ steps:
       - ssh -p $DEPLOY_SERVER_SSH_PORT $DEPLOY_SERVER_USERNAME@$DEPLOY_SERVER "docker pull $CRE_REGISTRY_IMAGE:$CRE_RELEASE"
       - ssh -p $DEPLOY_SERVER_SSH_PORT $DEPLOY_SERVER_USERNAME@$DEPLOY_SERVER "docker run -d -p $CRE_PORT:80 --name=$DEPLOY_CONTAINER_NAME $CRE_REGISTRY_IMAGE:$CRE_RELEASE"
     when:
-      branch: release/**
+      event:
+        - tag
 
 trigger:
   branch:
     - develop
-    - release/**
-    - master
+  event:
+    - tag
-- 
2.40.1


From f04a3c7ba32a3f751f88aab72a2b111ea34507f0 Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Mon, 20 Dec 2021 19:20:01 -0500
Subject: [PATCH 3/7] Fix mix editor did not get the materials from the correct
 location in update mode

---
 src/app/modules/recipes/mix/mix.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/recipes/mix/mix.ts b/src/app/modules/recipes/mix/mix.ts
index a91833f..7257668 100644
--- a/src/app/modules/recipes/mix/mix.ts
+++ b/src/app/modules/recipes/mix/mix.ts
@@ -27,7 +27,7 @@ abstract class _BaseMixPage extends SubscribingComponent {
     protected mixService: MixService,
     private recipeService: RecipeService,
     private materialTypeService: MaterialTypeService,
-    private materialService: MaterialService,
+    protected materialService: MaterialService,
     errorService: ErrorService,
     router: Router,
     activatedRoute: ActivatedRoute
@@ -50,13 +50,15 @@ abstract class _BaseMixPage extends SubscribingComponent {
 
   set recipe(recipe: Recipe) {
     this._recipe = recipe
-    this.materials$ = this.materialService.getAllForMixCreation(recipe.id)
+    this.materials$ = this.fetchMaterials(recipe.id)
   }
 
   get recipe(): Recipe {
     return this._recipe
   }
 
+  protected abstract fetchMaterials(recipeId: number): Observable<Material[]>
+
   abstract submit(dto: MixSaveDto)
 }
 
@@ -65,6 +67,10 @@ abstract class _BaseMixPage extends SubscribingComponent {
   templateUrl: 'add.html'
 })
 export class MixAdd extends _BaseMixPage {
+  protected fetchMaterials(recipeId: number): Observable<Material[]> {
+    return this.materialService.getAllForMixCreation(recipeId)
+  }
+
   submit(dto: MixSaveDto) {
     this.subscribeAndNavigate(
       this.mixService.saveDto(dto),
@@ -80,21 +86,27 @@ export class MixAdd extends _BaseMixPage {
 export class MixEdit extends _BaseMixPage {
   mix: Mix
 
+  private mixId: number
+
   ngOnInit() {
     super.ngOnInit()
 
+    this.mixId = this.urlUtils.parseIntUrlParam('id')
+
     this.fetchMix()
   }
 
   private fetchMix() {
-    const mixId = this.urlUtils.parseIntUrlParam('id')
-
     this.subscribe(
-      this.mixService.getById(mixId),
+      this.mixService.getById(this.mixId),
       mix => this.mix = mix
     )
   }
 
+  protected fetchMaterials(recipeId: number): Observable<Material[]> {
+    return this.materialService.getAllForMixUpdate(this.mixId)
+  }
+
   submit(dto: MixSaveDto) {
     this.subscribeAndNavigate(
       this.mixService.updateDto({...dto, id: this.mix.id}),
-- 
2.40.1


From f21157d283cc45641928296d371d7f99e27a43cb Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Thu, 23 Dec 2021 21:03:58 -0500
Subject: [PATCH 4/7] Fix mix editor did not get the materials from the correct
 location in update mode

---
 .drone.yml | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index 11396c2..52e3b89 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,6 +1,6 @@
 ---
 global-variables:
-  release: &release ${DRONE_BRANCH##**/}
+  release: &release ${DRONE_TAG}
   environment: &environment
     CRE_REGISTRY_IMAGE: registry.fyloz.dev:5443/colorrecipesexplorer/frontend
     CRE_PORT: 9102
@@ -21,6 +21,9 @@ steps:
       - echo -n "latest" > .tags
     when:
       branch: develop
+      event:
+        exclude:
+          - pull_request
 
   - name: set-docker-tags-release
     image: *alpine-image
@@ -29,18 +32,30 @@ steps:
     commands:
       - echo -n "latest-release,$CRE_RELEASE" > .tags
     when:
-      branch: release/**
+      event:
+        - tag
 
-  - name: containerize
+  - name: containerize-dev
     image: plugins/docker
     environment:
       <<: *environment
     settings:
       repo: *docker-registry-repo
     when:
-      branch:
-        - develop
-        - release/**
+      branch: develop
+      event:
+        exclude:
+          - pull_request
+
+  - name: containerize-release
+    image: plugins/docker
+    environment:
+      <<: *environment
+    settings:
+      repo: *docker-registry-repo
+    when:
+      event:
+        - tag
 
   - name: deploy
     image: alpine:latest
@@ -70,10 +85,5 @@ steps:
       - ssh -p $DEPLOY_SERVER_SSH_PORT $DEPLOY_SERVER_USERNAME@$DEPLOY_SERVER "docker pull $CRE_REGISTRY_IMAGE:$CRE_RELEASE"
       - ssh -p $DEPLOY_SERVER_SSH_PORT $DEPLOY_SERVER_USERNAME@$DEPLOY_SERVER "docker run -d -p $CRE_PORT:80 --name=$DEPLOY_CONTAINER_NAME $CRE_REGISTRY_IMAGE:$CRE_RELEASE"
     when:
-      branch: release/**
-
-trigger:
-  branch:
-    - develop
-    - release/**
-    - master
+      event:
+        - tag
-- 
2.40.1


From 6c8d35560e8fb5749b7ed99144f31cfda49166b0 Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Sun, 23 Jan 2022 01:28:58 -0500
Subject: [PATCH 5/7] CI/CD

---
 .drone.yml | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index 52e3b89..323a500 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -2,11 +2,12 @@
 global-variables:
   release: &release ${DRONE_TAG}
   environment: &environment
-    CRE_REGISTRY_IMAGE: registry.fyloz.dev:5443/colorrecipesexplorer/frontend
+    CRE_REGISTRY_IMAGE: registry.fyloz.dev/colorrecipesexplorer/frontend
     CRE_PORT: 9102
     CRE_RELEASE: *release
   alpine-image: &alpine-image alpine:latest
-  docker-registry-repo: &docker-registry-repo registry.fyloz.dev:5443/colorrecipesexplorer/frontend
+  docker-registry: &docker-registry registry.fyloz.dev
+  docker-registry-repo: &docker-registry-repo registry.fyloz.dev/colorrecipesexplorer/frontend
 
 kind: pipeline
 name: default
@@ -41,6 +42,11 @@ steps:
       <<: *environment
     settings:
       repo: *docker-registry-repo
+      registry: *docker-registry
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
     when:
       branch: develop
       event:
@@ -53,6 +59,11 @@ steps:
       <<: *environment
     settings:
       repo: *docker-registry-repo
+      registry: *docker-registry
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
     when:
       event:
         - tag
-- 
2.40.1


From cc24423389f8081809c0f70a1abeac6fa7035bc0 Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Sun, 27 Feb 2022 21:01:07 -0500
Subject: [PATCH 6/7] #25 Update files base url

---
 src/app/modules/shared/utils/utils.ts | 12 ++++++------
 src/environments/environment.prod.ts  |  1 +
 src/environments/environment.ts       |  1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/shared/utils/utils.ts b/src/app/modules/shared/utils/utils.ts
index dfa6bf9..e912609 100644
--- a/src/app/modules/shared/utils/utils.ts
+++ b/src/app/modules/shared/utils/utils.ts
@@ -10,20 +10,20 @@ export function valueOr<T>(value: T, or: T): T {
 const MEDIA_TYPE_PDF = 'application/pdf'
 const MEDIA_TYPE_JPG = 'image/jpeg'
 
-export function openPdf(url: string) {
-  openUrl(url, MEDIA_TYPE_PDF)
+export function openPdf(uri: string) {
+  openFileUri(uri, MEDIA_TYPE_PDF)
 }
 
-export function openJpg(url: string) {
-  openUrl(url, MEDIA_TYPE_JPG)
+export function openJpg(uri: string) {
+  openFileUri(uri, MEDIA_TYPE_JPG)
 }
 
 export function openTouchUpKit(touchUpKit: TouchUpKit) {
   openRawUrl(`${environment.apiUrl}/touchupkit/pdf?project=${touchUpKit.project}`)
 }
 
-export function openUrl(url: string, mediaType: string) {
-  openRawUrl(`${url}&mediaType=${encodeURIComponent(mediaType)}`)
+export function openFileUri(uri: string, mediaType: string) {
+  openRawUrl(`${environment.apiBaseUrl}${uri}&mediaType=${encodeURIComponent(mediaType)}`)
 }
 
 export function openRawUrl(url: string) {
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index ae45e0b..c62f514 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
+  apiBaseUrl: window.location.origin,
   apiUrl: window.location.origin + '/api'
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 8a40323..e5b8c49 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  apiBaseUrl: 'http://localhost:9090',
   apiUrl: 'http://localhost:9090/api'
 };
 
-- 
2.40.1


From 09e89e68bbf24599ff781e566e24dd7940791b1b Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Wed, 20 Apr 2022 22:51:35 -0400
Subject: [PATCH 7/7] #25 apply backend changes

---
 .../material/pages/edit/edit.component.html   |  4 +-
 .../material/pages/edit/edit.component.ts     |  4 --
 .../pages/inventory/inventory.component.html  |  4 +-
 .../pages/inventory/inventory.component.ts    |  6 +--
 .../material/service/material.service.ts      | 12 -----
 .../images-editor.component.html              | 12 ++---
 .../images-editor/images-editor.component.ts  | 27 +++++++---
 .../mix-table/mix-table.component.html        |  2 +-
 .../mix-table/mix-table.component.ts          | 27 +++++-----
 src/app/modules/recipes/explore.html          |  2 +-
 src/app/modules/recipes/explore.ts            |  2 +-
 src/app/modules/recipes/mix/edit.html         | 13 +++--
 .../modules/recipes/mix/materials-form.html   |  2 +-
 src/app/modules/recipes/mix/materials-form.ts | 51 ++++++++++++++-----
 src/app/modules/recipes/mix/mix.ts            | 11 +++-
 .../modules/recipes/services/mix.service.ts   | 17 ++++---
 .../recipes/services/recipe-image.service.ts  |  4 +-
 .../recipes/services/recipe.service.ts        |  4 ++
 .../shared/components/inputs/combo-box.html   |  6 ++-
 .../shared/components/inputs/inputs.ts        |  8 ++-
 .../modules/shared/model/material.model.ts    |  5 +-
 src/app/modules/shared/model/recipe.model.ts  | 16 +++---
 src/app/modules/shared/utils/utils.ts         | 20 +++++---
 23 files changed, 156 insertions(+), 103 deletions(-)

diff --git a/src/app/modules/material/pages/edit/edit.component.html b/src/app/modules/material/pages/edit/edit.component.html
index e7be59e..ac7b196 100644
--- a/src/app/modules/material/pages/edit/edit.component.html
+++ b/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>
diff --git a/src/app/modules/material/pages/edit/edit.component.ts b/src/app/modules/material/pages/edit/edit.component.ts
index aadc5d7..fbc2a44 100644
--- a/src/app/modules/material/pages/edit/edit.component.ts
+++ b/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)
   }
diff --git a/src/app/modules/material/pages/inventory/inventory.component.html b/src/app/modules/material/pages/inventory/inventory.component.html
index 130ff57..05850d0 100644
--- a/src/app/modules/material/pages/inventory/inventory.component.html
+++ b/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>
diff --git a/src/app/modules/material/pages/inventory/inventory.component.ts b/src/app/modules/material/pages/inventory/inventory.component.ts
index 81f914f..1e53d54 100644
--- a/src/app/modules/material/pages/inventory/inventory.component.ts
+++ b/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)
   }
diff --git a/src/app/modules/material/service/material.service.ts b/src/app/modules/material/service/material.service.ts
index 709f0f1..ecafa45 100644
--- a/src/app/modules/material/service/material.service.ts
+++ b/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)
diff --git a/src/app/modules/recipes/components/images-editor/images-editor.component.html b/src/app/modules/recipes/components/images-editor/images-editor.component.html
index abd0574..7e32892 100644
--- a/src/app/modules/recipes/components/images-editor/images-editor.component.html
+++ b/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>
diff --git a/src/app/modules/recipes/components/images-editor/images-editor.component.ts b/src/app/modules/recipes/components/images-editor/images-editor.component.ts
index 4b00c2d..eb56138 100644
--- a/src/app/modules/recipes/components/images-editor/images-editor.component.ts
+++ b/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}`
   }
 }
diff --git a/src/app/modules/recipes/components/mix-table/mix-table.component.html b/src/app/modules/recipes/components/mix-table/mix-table.component.html
index 7f8a28a..9a94211 100644
--- a/src/app/modules/recipes/components/mix-table/mix-table.component.html
+++ b/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>
diff --git a/src/app/modules/recipes/components/mix-table/mix-table.component.ts b/src/app/modules/recipes/components/mix-table/mix-table.component.ts
index bd430a6..e50128f 100644
--- a/src/app/modules/recipes/components/mix-table/mix-table.component.ts
+++ b/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
     })
   }
 
diff --git a/src/app/modules/recipes/explore.html b/src/app/modules/recipes/explore.html
index 8d8f714..623858a 100644
--- a/src/app/modules/recipes/explore.html
+++ b/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>
diff --git a/src/app/modules/recipes/explore.ts b/src/app/modules/recipes/explore.ts
index 084693e..dd59d1e 100644
--- a/src/app/modules/recipes/explore.ts
+++ b/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)
diff --git a/src/app/modules/recipes/mix/edit.html b/src/app/modules/recipes/mix/edit.html
index 14267ca..3888e4c 100644
--- a/src/app/modules/recipes/mix/edit.html
+++ b/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>
diff --git a/src/app/modules/recipes/mix/materials-form.html b/src/app/modules/recipes/mix/materials-form.html
index 5c7742c..56d2dc3 100644
--- a/src/app/modules/recipes/mix/materials-form.html
+++ b/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>
diff --git a/src/app/modules/recipes/mix/materials-form.ts b/src/app/modules/recipes/mix/materials-form.ts
index 06b22d7..47861ef 100644
--- a/src/app/modules/recipes/mix/materials-form.ts
+++ b/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
diff --git a/src/app/modules/recipes/mix/mix.ts b/src/app/modules/recipes/mix/mix.ts
index 7257668..9480c20 100644
--- a/src/app/modules/recipes/mix/mix.ts
+++ b/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
     }
   }
 
diff --git a/src/app/modules/recipes/services/mix.service.ts b/src/app/modules/recipes/services/mix.service.ts
index 6a523e1..4e63441 100644
--- a/src/app/modules/recipes/services/mix.service.ts
+++ b/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[]
 }
 
diff --git a/src/app/modules/recipes/services/recipe-image.service.ts b/src/app/modules/recipes/services/recipe-image.service.ts
index 0c5f236..ac3ca5f 100644
--- a/src/app/modules/recipes/services/recipe-image.service.ts
+++ b/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> {
diff --git a/src/app/modules/recipes/services/recipe.service.ts b/src/app/modules/recipes/services/recipe.service.ts
index 4554569..a68c4bf 100644
--- a/src/app/modules/recipes/services/recipe.service.ts
+++ b/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`)
+  }
 }
diff --git a/src/app/modules/shared/components/inputs/combo-box.html b/src/app/modules/shared/components/inputs/combo-box.html
index 67e0162..3b80f93 100644
--- a/src/app/modules/shared/components/inputs/combo-box.html
+++ b/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>
diff --git a/src/app/modules/shared/components/inputs/inputs.ts b/src/app/modules/shared/components/inputs/inputs.ts
index 7b53fef..6822574 100644
--- a/src/app/modules/shared/components/inputs/inputs.ts
+++ b/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
diff --git a/src/app/modules/shared/model/material.model.ts b/src/app/modules/shared/model/material.model.ts
index 681e1f6..540bfb6 100644
--- a/src/app/modules/shared/model/material.model.ts
+++ b/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 => {
diff --git a/src/app/modules/shared/model/recipe.model.ts b/src/app/modules/shared/model/recipe.model.ts
index 7134171..9f822ed 100644
--- a/src/app/modules/shared/model/recipe.model.ts
+++ b/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
   )))
 }
 
diff --git a/src/app/modules/shared/utils/utils.ts b/src/app/modules/shared/utils/utils.ts
index e912609..9f7972b 100644
--- a/src/app/modules/shared/utils/utils.ts
+++ b/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) {
-- 
2.40.1