From b7f50fca3851c6ddf3bcb8b3a867871055896e37 Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Wed, 28 Apr 2021 17:52:58 -0400
Subject: [PATCH 1/4] Ajout du support pour le nouvel API de fichiers

---
 .../images-editor.component.html              | 10 +++---
 .../images-editor/images-editor.component.ts  | 32 +++++++------------
 .../mix-table/mix-table.component.html        |  4 +--
 .../mix-table/mix-table.component.ts          | 18 +++++------
 .../pages/explore/explore.component.html      |  4 +--
 .../colors/services/recipe-image.service.ts   | 24 ++++++--------
 .../material/pages/edit/edit.component.html   |  2 +-
 .../material/pages/edit/edit.component.ts     | 18 ++++-------
 .../pages/inventory/inventory.component.ts    | 15 ++-------
 .../modules/shared/model/material.model.ts    |  8 ++++-
 src/app/modules/shared/model/recipe.model.ts  |  3 +-
 .../modules/shared/service/error.service.ts   |  3 ++
 src/app/modules/shared/utils/utils.ts         | 16 ++++++++++
 13 files changed, 77 insertions(+), 80 deletions(-)

diff --git a/src/app/modules/colors/components/images-editor/images-editor.component.html b/src/app/modules/colors/components/images-editor/images-editor.component.html
index c738cd5..e07f7b8 100644
--- a/src/app/modules/colors/components/images-editor/images-editor.component.html
+++ b/src/app/modules/colors/components/images-editor/images-editor.component.html
@@ -1,15 +1,15 @@
-<mat-card *ngIf="editionMode || hasImages">
+<mat-card *ngIf="editionMode || imagesUrls">
   <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">
-      <div *ngFor="let imageId of (imageIds$ | async)" class="d-flex flex-column align-self-center m-3">
+      <div *ngFor="let imageUrl of imagesUrls" class="d-flex flex-column align-self-center m-3">
         <div class="image-wrapper">
-          <img src="{{backendUrl}}/recipe/{{recipe.id}}/image/{{imageId}}" width="300px"/>
+          <img [src]="imageUrl" 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(imageId)">Afficher</button>
-            <button *ngIf="editionMode" mat-raised-button color="warn" (click)="delete(imageId)">Retirer</button>
+            <button mat-raised-button color="primary" (click)="openImage(imageUrl)">Afficher</button>
+            <button *ngIf="editionMode" mat-raised-button color="warn" (click)="delete(imageUrl)">Retirer</button>
           </div>
         </div>
       </div>
diff --git a/src/app/modules/colors/components/images-editor/images-editor.component.ts b/src/app/modules/colors/components/images-editor/images-editor.component.ts
index 55814bd..4b00c2d 100644
--- a/src/app/modules/colors/components/images-editor/images-editor.component.ts
+++ b/src/app/modules/colors/components/images-editor/images-editor.component.ts
@@ -2,11 +2,9 @@ import {Component, Input} from '@angular/core'
 import {Recipe} from '../../../shared/model/recipe.model'
 import {SubscribingComponent} from '../../../shared/components/subscribing.component'
 import {ActivatedRoute, Router} from '@angular/router'
-import {Observable} from 'rxjs'
 import {RecipeImageService} from '../../services/recipe-image.service'
-import {environment} from '../../../../../environments/environment'
 import {ErrorService} from '../../../shared/service/error.service'
-import {globalLoadingWheel} from '../../../shared/components/loading-wheel/loading-wheel.component'
+import {openJpg} from '../../../shared/utils/utils'
 
 @Component({
   selector: 'cre-images-editor',
@@ -17,9 +15,7 @@ export class ImagesEditorComponent extends SubscribingComponent {
   @Input() recipe: Recipe
   @Input() editionMode = false
 
-  imageIds$: Observable<number[]>
-  backendUrl = environment.apiUrl
-  hasImages = false
+  imagesUrls: string[]
 
   constructor(
     private recipeImageService: RecipeImageService,
@@ -33,35 +29,29 @@ export class ImagesEditorComponent extends SubscribingComponent {
   ngOnInit() {
     super.ngOnInit()
 
-    this.loadImagesIds()
-    this.subscribe(
-      this.imageIds$,
-      ids => this.hasImages = ids.length > 0,
-      false,
-      1
-    )
+    this.imagesUrls = this.recipe.imagesUrls
   }
 
   submit(event) {
     const image = event.target.files[0]
     this.subscribe(
       this.recipeImageService.save(image, this.recipe.id),
-      () => this.loadImagesIds()
+      r => this.imagesUrls = r.imagesUrls
     )
   }
 
-  openImage(imageId: number) {
-    window.open(`${environment.apiUrl}/recipe/${this.recipe.id}/image/${imageId}`, '_blank')
+  openImage(url: string) {
+    openJpg(url)
   }
 
-  delete(imageId: number) {
+  delete(url: string) {
     this.subscribe(
-      this.recipeImageService.delete(imageId, this.recipe.id),
-      () => this.loadImagesIds()
+      this.recipeImageService.delete(url, this.recipe.id),
+      () => this.removeUrl(url)
     )
   }
 
-  private loadImagesIds() {
-    this.imageIds$ = this.recipeImageService.getAllIdsForRecipe(this.recipe.id)
+  private removeUrl(url: string) {
+    this.imagesUrls = this.imagesUrls.filter(u => u !== url)
   }
 }
diff --git a/src/app/modules/colors/components/mix-table/mix-table.component.html b/src/app/modules/colors/components/mix-table/mix-table.component.html
index dd8ee81..acfda6b 100644
--- a/src/app/modules/colors/components/mix-table/mix-table.component.html
+++ b/src/app/modules/colors/components/mix-table/mix-table.component.html
@@ -126,8 +126,8 @@
           <button
             mat-raised-button
             color="accent"
-            [disabled]="!hasSimdutMap[getMixMaterialFromDto(mixMaterial).material.id]"
-            (click)="openSimdutFile(mixMaterial)">
+            [disabled]="!hasSimdut(getMixMaterialFromDto(mixMaterial).material)"
+            (click)="openSimdut(mixMaterial)">
             Fiche signalitique
           </button>
         </ng-container>
diff --git a/src/app/modules/colors/components/mix-table/mix-table.component.ts b/src/app/modules/colors/components/mix-table/mix-table.component.ts
index fd0a172..fa8da6d 100644
--- a/src/app/modules/colors/components/mix-table/mix-table.component.ts
+++ b/src/app/modules/colors/components/mix-table/mix-table.component.ts
@@ -12,6 +12,7 @@ import {environment} from '../../../../../environments/environment'
 import {MaterialService} from '../../../material/service/material.service'
 import {EmployeePermission} from '../../../shared/model/employee'
 import {AccountService} from '../../../accounts/services/account.service'
+import {Material, openSimdut} from '../../../shared/model/material.model'
 
 @Component({
   selector: 'cre-mix-table',
@@ -38,7 +39,6 @@ export class MixTableComponent extends SubscribingComponent {
   units = UNIT_MILLILITER
   mixMaterials: MixMaterialDto[] = []
   hoveredMixMaterial: MixMaterial | null
-  hasSimdutMap: any = {}
 
   // BPac printer
   printer: PtouchPrinter | null
@@ -67,12 +67,14 @@ export class MixTableComponent extends SubscribingComponent {
       this.units$,
       u => this.convertQuantities(u)
     )
+  }
 
-    this.mixMaterials.forEach(mixMaterial => this.subscribe(
-      this.materialService.hasSimdut(mixMaterial.materialId),
-      b => this.hasSimdutMap[mixMaterial.materialId] = b
-      )
-    )
+  hasSimdut(material: Material): boolean {
+    return material.simdutUrl != null
+  }
+
+  openSimdut(mixMaterial: MixMaterial) {
+    openSimdut(mixMaterial.material)
   }
 
   changeLocation(event: any) {
@@ -135,10 +137,6 @@ export class MixTableComponent extends SubscribingComponent {
     return Math.round(quantity * 1000) / 1000
   }
 
-  openSimdutFile(mixMaterial: MixMaterialDto) {
-    window.open(`${environment.apiUrl}/material/${mixMaterial.materialId}/simdut`, '_blank')
-  }
-
   async print() {
     const base = this.mix.mixMaterials
       .map(ma => ma.material)
diff --git a/src/app/modules/colors/pages/explore/explore.component.html b/src/app/modules/colors/pages/explore/explore.component.html
index e06b6be..93b3b3e 100644
--- a/src/app/modules/colors/pages/explore/explore.component.html
+++ b/src/app/modules/colors/pages/explore/explore.component.html
@@ -73,8 +73,8 @@
     </div>
 
     <!-- Images -->
-    <div [hidden]="!images.hasImages">
-      <cre-images-editor #images [recipe]="recipe" [editionMode]="false"></cre-images-editor>
+    <div *ngIf="recipe.imagesUrls">
+      <cre-images-editor [recipe]="recipe" [editionMode]="false"></cre-images-editor>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/colors/services/recipe-image.service.ts b/src/app/modules/colors/services/recipe-image.service.ts
index 000462a..0c5f236 100644
--- a/src/app/modules/colors/services/recipe-image.service.ts
+++ b/src/app/modules/colors/services/recipe-image.service.ts
@@ -1,6 +1,7 @@
-import {Injectable} from '@angular/core';
-import {ApiService} from "../../shared/service/api.service";
-import {Observable} from "rxjs";
+import {Injectable} from '@angular/core'
+import {ApiService} from '../../shared/service/api.service'
+import {Observable} from 'rxjs'
+import {Recipe} from '../../shared/model/recipe.model'
 
 @Injectable({
   providedIn: 'root'
@@ -11,22 +12,17 @@ export class RecipeImageService {
   ) {
   }
 
-  getAllIdsForRecipe(recipeId: number): Observable<number[]> {
-    return this.api.get(`/recipe/${recipeId}/image`)
-  }
-
-  save(image: File, recipeId: number): Observable<void> {
+  save(image: File, recipeId: number): Observable<Recipe> {
     const body = new FormData()
     body.append('image', image)
-    return this.api.post<void>(`/recipe/${recipeId}/image`, body, true)
+    return this.api.put<Recipe>(`/recipe/${recipeId}/image`, body)
   }
 
-  deleteAll(imageIds: number[], recipeId: number) {
-    imageIds.forEach(id => this.delete(id, recipeId))
-  }
+  delete(url: string, recipeId: number): Observable<void> {
+    const urlFragments = url.split('%2F')
+    const imageName = urlFragments[urlFragments.length - 1].replace('.jpg', '')
 
-  delete(imageId: number, recipeId: number): Observable<void> {
-    return this.api.delete<void>(`/recipe/${recipeId}/image/${imageId}`)
+    return this.api.delete<void>(`/recipe/${recipeId}/image/${imageName}`)
   }
 }
 
diff --git a/src/app/modules/material/pages/edit/edit.component.html b/src/app/modules/material/pages/edit/edit.component.html
index 3785f33..e409b00 100644
--- a/src/app/modules/material/pages/edit/edit.component.html
+++ b/src/app/modules/material/pages/edit/edit.component.html
@@ -19,7 +19,7 @@
       color="primary"
       [disabled]="!hasSimdut"
       [attr.title]="!hasSimdut ? 'Ce produit n\'a pas de fiche signalitique' : null"
-      (click)="openSimdutUrl()">
+      (click)="openSimdut()">
       Voir la fiche signalitique
     </button>
     <cre-file-button
diff --git a/src/app/modules/material/pages/edit/edit.component.ts b/src/app/modules/material/pages/edit/edit.component.ts
index e5dea2b..ed7332c 100644
--- a/src/app/modules/material/pages/edit/edit.component.ts
+++ b/src/app/modules/material/pages/edit/edit.component.ts
@@ -6,8 +6,7 @@ import {MaterialTypeService} from '../../../material-type/service/material-type.
 import {MaterialService} from '../../service/material.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {Material} from '../../../shared/model/material.model'
-import {environment} from '../../../../../environments/environment'
+import {Material, openSimdut} from '../../../shared/model/material.model'
 import {ErrorHandler, ErrorService} from '../../../shared/service/error.service'
 
 @Component({
@@ -65,7 +64,6 @@ export class EditComponent extends ErrorHandlingComponent {
       fileType: 'application/pdf'
     }
   ]
-  hasSimdut = false
   selectedSimdutFile: File | null
 
   errorHandlers: ErrorHandler[] = [{
@@ -100,11 +98,6 @@ export class EditComponent extends ErrorHandlingComponent {
       id,
       material => this.material = material
     )
-
-    this.subscribe(
-      this.materialService.hasSimdut(id),
-      b => this.hasSimdut = b
-    )
   }
 
   submit(values) {
@@ -121,8 +114,11 @@ export class EditComponent extends ErrorHandlingComponent {
     )
   }
 
-  openSimdutUrl() {
-    const simdutUrl = environment.apiUrl + `/material/${this.material.id}/simdut`
-    window.open(simdutUrl, '_blank')
+  get hasSimdut(): boolean {
+    return this.material.simdutUrl != null
+  }
+
+  openSimdut() {
+    openSimdut(this.material)
   }
 }
diff --git a/src/app/modules/material/pages/inventory/inventory.component.ts b/src/app/modules/material/pages/inventory/inventory.component.ts
index 4b53aac..f706215 100644
--- a/src/app/modules/material/pages/inventory/inventory.component.ts
+++ b/src/app/modules/material/pages/inventory/inventory.component.ts
@@ -4,14 +4,13 @@ import {MaterialService} from '../../service/material.service'
 import {EmployeePermission} from '../../../shared/model/employee'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
-import {Material} from '../../../shared/model/material.model'
+import {Material, openSimdut} from '../../../shared/model/material.model'
 import {AccountService} from '../../../accounts/services/account.service'
 import {convertQuantity, UNIT_MILLILITER} from '../../../shared/units'
 import {MatSort} from '@angular/material/sort'
 import {MatTableDataSource} from '@angular/material/table'
 import {MaterialTypeService} from '../../../material-type/service/material-type.service'
 import {InventoryService} from '../../service/inventory.service'
-import {environment} from '../../../../../environments/environment'
 
 @Component({
   selector: 'cre-list',
@@ -24,7 +23,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
   materials: Material[] | null
   materialTypes$ = this.materialTypeService.all
   dataSource: MatTableDataSource<Material>
-  hasSimdut: any
 
   columns = ['name', 'materialType', 'quantity', 'addQuantity', 'lowQuantityIcon', 'simdutIcon', 'editButton', 'openSimdutButton']
   hoveredMaterial: Material | null
@@ -59,13 +57,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
       true,
       1
     )
-
-    this.subscribe(
-      this.materialService.getSimduts(),
-      ids => this.hasSimdut = ids,
-      false,
-      1
-    )
   }
 
   setupDataSource(): MatTableDataSource<Material> {
@@ -102,11 +93,11 @@ export class InventoryComponent extends ErrorHandlingComponent {
   }
 
   materialHasSimdut(material: Material): boolean {
-    return this.hasSimdut && this.hasSimdut.filter(i => i === material.id).length > 0
+    return material.simdutUrl != null
   }
 
   openSimdut(material: Material) {
-    window.open(`${environment.apiUrl}/material/${material.id}/simdut`, '_blank')
+    openSimdut(material)
   }
 
   addQuantity(material: Material, input: HTMLInputElement) {
diff --git a/src/app/modules/shared/model/material.model.ts b/src/app/modules/shared/model/material.model.ts
index 6ed5b69..56187fd 100644
--- a/src/app/modules/shared/model/material.model.ts
+++ b/src/app/modules/shared/model/material.model.ts
@@ -1,11 +1,17 @@
 import {MaterialType} from "./materialtype.model";
+import {openPdf} from '../utils/utils'
 
 export class Material {
   constructor(
     public id: number,
     public name: string,
     public inventoryQuantity: number,
-    public materialType: MaterialType
+    public materialType: MaterialType,
+    public simdutUrl: string
   ) {
   }
 }
+
+export function openSimdut(material: Material) {
+  openPdf(material.simdutUrl)
+}
diff --git a/src/app/modules/shared/model/recipe.model.ts b/src/app/modules/shared/model/recipe.model.ts
index 54ed1d8..7e84e00 100644
--- a/src/app/modules/shared/model/recipe.model.ts
+++ b/src/app/modules/shared/model/recipe.model.ts
@@ -15,7 +15,8 @@ export class Recipe {
     public remark: string,
     public company: Company,
     public mixes: Mix[],
-    public groupsInformation: RecipeGroupInformation[]
+    public groupsInformation: RecipeGroupInformation[],
+    public imagesUrls: string[]
   ) {
   }
 }
diff --git a/src/app/modules/shared/service/error.service.ts b/src/app/modules/shared/service/error.service.ts
index f7774c2..6189683 100644
--- a/src/app/modules/shared/service/error.service.ts
+++ b/src/app/modules/shared/service/error.service.ts
@@ -47,6 +47,9 @@ export class ErrorService {
     }
 
     const error = response.error
+    if (!error || !error.type) {
+      return
+    }
 
     if (this.activeHandler) {
       matchingModels = this.activeHandler.errorHandlers.filter(m => m.filter(error)) // Find error models whose filter matches the current error
diff --git a/src/app/modules/shared/utils/utils.ts b/src/app/modules/shared/utils/utils.ts
index ef66afa..266f1e1 100644
--- a/src/app/modules/shared/utils/utils.ts
+++ b/src/app/modules/shared/utils/utils.ts
@@ -2,3 +2,19 @@
 export function valueOr<T>(value: T, or: T): T {
   return value ? value : or
 }
+
+const MEDIA_TYPE_PDF = 'application/pdf'
+const MEDIA_TYPE_JPG = 'image/jpeg'
+
+export function openPdf(url: string) {
+  openUrl(url, MEDIA_TYPE_PDF)
+}
+
+export function openJpg(url: string) {
+  openUrl(url, MEDIA_TYPE_JPG)
+}
+
+function openUrl(url: string, mediaType: string) {
+  const encodedUrl = `${url}&mediaType=${encodeURIComponent(mediaType)}`
+  window.open(encodedUrl, '_blank')
+}

From 86747f729fcab88781bed28524a2a2cee337e673 Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Sat, 1 May 2021 16:01:23 -0400
Subject: [PATCH 2/4] Ajout de l'onglet d'administration

---
 src/app/app-routing.module.ts                 | 58 +++++++++++--------
 src/app/app.module.ts                         |  4 +-
 .../accounts/pages/login/login.component.html |  6 +-
 .../colors/pages/list/list.component.html     |  2 +-
 .../employees/employees-routing.module.ts     | 15 -----
 .../employees-list.component.html             | 34 -----------
 .../employees-list.component.sass             |  2 -
 .../employees-list.component.ts               | 31 ----------
 .../modules/groups/group-routing.module.ts    | 23 ++++++++
 .../{groups.module.ts => group.module.ts}     |  9 ++-
 .../modules/groups/groups-routing.module.ts   | 15 -----
 .../groups/pages/add/add.component.html       |  2 +-
 .../modules/groups/pages/add/add.component.ts |  2 +-
 .../groups/pages/edit/edit.component.html     |  2 +-
 .../groups/pages/edit/edit.component.ts       |  6 +-
 .../groups/pages/list/list.component.html     |  2 +-
 .../groups/pages/list/list.component.ts       |  2 +-
 .../material-type-routing.module.ts           | 41 ++++++-------
 .../components/header/header.component.ts     |  5 +-
 .../components/sub-menu/sub-menu.component.ts | 16 +++++
 .../pages/add/add.component.html              |  0
 .../pages/add/add.component.sass              |  0
 .../pages/add/add.component.ts                | 19 +++---
 .../pages/edit/edit.component.html            |  0
 .../pages/edit/edit.component.sass            |  0
 .../pages/edit/edit.component.ts              | 31 +++-------
 .../pages/list/list.component.html            |  2 +-
 .../pages/list/list.component.sass            |  0
 .../pages/list/list.component.ts              | 10 ++--
 .../password-edit.component.html              |  0
 .../password-edit.component.sass              |  0
 .../password-edit/password-edit.component.ts  |  8 +--
 .../services/user.service.ts}                 |  6 +-
 src/app/modules/users/user-routing.module.ts  | 28 +++++++++
 .../user.module.ts}                           |  6 +-
 .../administration.component.html             |  2 +
 .../administration.component.sass             |  0
 .../administration.component.ts               | 16 +++++
 src/app/pages/catalog/catalog.component.ts    | 14 +----
 39 files changed, 192 insertions(+), 227 deletions(-)
 delete mode 100644 src/app/modules/employees/employees-routing.module.ts
 delete mode 100644 src/app/modules/groups/components/employees-list/employees-list.component.html
 delete mode 100644 src/app/modules/groups/components/employees-list/employees-list.component.sass
 delete mode 100644 src/app/modules/groups/components/employees-list/employees-list.component.ts
 create mode 100644 src/app/modules/groups/group-routing.module.ts
 rename src/app/modules/groups/{groups.module.ts => group.module.ts} (52%)
 delete mode 100644 src/app/modules/groups/groups-routing.module.ts
 create mode 100644 src/app/modules/shared/components/sub-menu/sub-menu.component.ts
 rename src/app/modules/{employees => users}/pages/add/add.component.html (100%)
 rename src/app/modules/{employees => users}/pages/add/add.component.sass (100%)
 rename src/app/modules/{employees => users}/pages/add/add.component.ts (87%)
 rename src/app/modules/{employees => users}/pages/edit/edit.component.html (100%)
 rename src/app/modules/{employees => users}/pages/edit/edit.component.sass (100%)
 rename src/app/modules/{employees => users}/pages/edit/edit.component.ts (77%)
 rename src/app/modules/{employees => users}/pages/list/list.component.html (92%)
 rename src/app/modules/{employees => users}/pages/list/list.component.sass (100%)
 rename src/app/modules/{employees => users}/pages/list/list.component.ts (87%)
 rename src/app/modules/{employees => users}/pages/password-edit/password-edit.component.html (100%)
 rename src/app/modules/{employees => users}/pages/password-edit/password-edit.component.sass (100%)
 rename src/app/modules/{employees => users}/pages/password-edit/password-edit.component.ts (88%)
 rename src/app/modules/{employees/services/employee.service.ts => users/services/user.service.ts} (83%)
 create mode 100644 src/app/modules/users/user-routing.module.ts
 rename src/app/modules/{employees/employees.module.ts => users/user.module.ts} (81%)
 create mode 100644 src/app/pages/administration/administration.component.html
 create mode 100644 src/app/pages/administration/administration.component.sass
 create mode 100644 src/app/pages/administration/administration.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 16e2056..7a4fe40 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,6 +1,7 @@
-import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
-import {CatalogComponent} from "./pages/catalog/catalog.component";
+import {NgModule} from '@angular/core'
+import {Routes, RouterModule} from '@angular/router'
+import {CatalogComponent} from './pages/catalog/catalog.component'
+import {AdministrationComponent} from './pages/administration/administration.component'
 
 
 const routes: Routes = [{
@@ -9,39 +10,46 @@ const routes: Routes = [{
 }, {
   path: 'account',
   loadChildren: () => import('./modules/accounts/accounts.module').then(m => m.AccountsModule)
-}, {
-  path: 'employee',
-  loadChildren: () => import('./modules/employees/employees.module').then(m => m.EmployeesModule)
-}, {
-  path: 'group',
-  loadChildren: () => import('./modules/groups/groups.module').then(m => m.GroupsModule)
 }, {
   path: 'catalog',
   component: CatalogComponent,
+  children: [{
+    path: 'materialtype',
+    loadChildren: () => import('./modules/material-type/material-type.module').then(m => m.MaterialTypeModule),
+  }, {
+    path: 'material',
+    loadChildren: () => import('./modules/material/material.module').then(m => m.MaterialModule)
+  }, {
+    path: 'company',
+    loadChildren: () => import('./modules/company/company.module').then(m => m.CompanyModule)
+  }, {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'materialtype'
+  }]
+}, {
+  path: 'admin',
+  component: AdministrationComponent,
   children: [
     {
-      path: 'materialtype',
-      loadChildren: () => import('./modules/material-type/material-type.module').then(m => m.MaterialTypeModule),
-    },
-    {
-      path: 'material',
-      loadChildren: () => import('./modules/material/material.module').then(m => m.MaterialModule)
-    },
-    {
-      path: 'company',
-      loadChildren: () => import('./modules/company/company.module').then(m => m.CompanyModule)
-    },
-    {
+      path: 'user',
+      loadChildren: () => import('./modules/users/user.module').then(m => m.UserModule)
+    }, {
+      path: 'group',
+      loadChildren: () => import('./modules/groups/group.module').then(m => m.GroupModule)
+    }, {
       path: '',
       pathMatch: 'full',
-      redirectTo: 'materialtype'
+      redirectTo: 'user'
     }
   ]
-},
-  {path: 'material', loadChildren: () => import('./modules/material/material.module').then(m => m.MaterialModule)}];
+}, {
+  path: 'material',
+  loadChildren: () => import('./modules/material/material.module').then(m => m.MaterialModule)
+}]
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes, {relativeLinkResolution: 'legacy'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 323f08e..09374d6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,11 +8,13 @@ import {SharedModule} from "./modules/shared/shared.module";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {CatalogComponent} from './pages/catalog/catalog.component';
 import {CompanyModule} from './modules/company/company.module';
+import { AdministrationComponent } from './pages/administration/administration.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    CatalogComponent
+    CatalogComponent,
+    AdministrationComponent
   ],
   imports: [
     AppRoutingModule,
diff --git a/src/app/modules/accounts/pages/login/login.component.html b/src/app/modules/accounts/pages/login/login.component.html
index 4f10431..28aa77c 100644
--- a/src/app/modules/accounts/pages/login/login.component.html
+++ b/src/app/modules/accounts/pages/login/login.component.html
@@ -5,12 +5,12 @@
     </mat-card-header>
     <mat-card-content>
       <mat-form-field>
-        <mat-label>Numéro d'employé</mat-label>
+        <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'employé est requis</span>
-          <span *ngIf="idFormControl.errors.pattern">Le numéro d'employé doit être un nombre</span>
+          <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>
diff --git a/src/app/modules/colors/pages/list/list.component.html b/src/app/modules/colors/pages/list/list.component.html
index 7390a47..f30d90d 100644
--- a/src/app/modules/colors/pages/list/list.component.html
+++ b/src/app/modules/colors/pages/list/list.component.html
@@ -83,7 +83,7 @@
           *ngIf="isRecipeApprobationExpired(recipe)"
           svgIcon="clock-alert"
           class="color-warning"
-          title="L'approbation de cette recette est expirée (il y a plus de 4 ans)">
+          title="L'approbation de l'échantillon est expirée (il y a plus de 4 ans)">
         </mat-icon>
       </td>
     </ng-container>
diff --git a/src/app/modules/employees/employees-routing.module.ts b/src/app/modules/employees/employees-routing.module.ts
deleted file mode 100644
index f800e7c..0000000
--- a/src/app/modules/employees/employees-routing.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ListComponent } from './pages/list/list.component';
-import {AddComponent} from "./pages/add/add.component";
-import {EditComponent} from "./pages/edit/edit.component";
-import {PasswordEditComponent} from "./pages/password-edit/password-edit.component";
-
-const routes: Routes = [{ path: 'list', component: ListComponent }, {path: 'add', component: AddComponent}, {path: 'edit/:id', component: EditComponent}, {path: 'password/edit/:id', component: PasswordEditComponent}, {path: '', redirectTo: 'list'}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class EmployeesRoutingModule { }
diff --git a/src/app/modules/groups/components/employees-list/employees-list.component.html b/src/app/modules/groups/components/employees-list/employees-list.component.html
deleted file mode 100644
index f26acaa..0000000
--- a/src/app/modules/groups/components/employees-list/employees-list.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<ng-container *ngIf="employees$ | async as employees">
-  <table class="my-3 mx-auto mat-elevation-z1" *ngIf="employees.length > 0" mat-table [dataSource]="employees">
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef>Numéro d'employé</th>
-      <td mat-cell *matCellDef="let employee">{{employee.id}}</td>
-    </ng-container>
-    <ng-container matColumnDef="firstName">
-      <th mat-header-cell *matHeaderCellDef>Prénom</th>
-      <td mat-cell *matCellDef="let employee">{{employee.firstName}}</td>
-    </ng-container>
-    <ng-container matColumnDef="lastName">
-      <th mat-header-cell *matHeaderCellDef>Nom</th>
-      <td mat-cell *matCellDef="let employee">{{employee.lastName}}</td>
-    </ng-container>
-    <ng-container matColumnDef="edit">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell [class.disabled]="!canEditEmployee" *matCellDef="let employee">
-        <button mat-raised-button color="accent">Modifier</button>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="columns"></tr>
-    <tr mat-row *matRowDef="let employee; columns: columns"></tr>
-    <tr>
-      <td>test</td>
-    </tr>
-  </table>
-
-  <ng-container *ngIf="employees.length <= 0">
-    <div class="w-100 mt-2 text-center empty">
-      <p>Il n'y a aucun employé dans ce groupe</p>
-    </div>
-  </ng-container>
-</ng-container>
diff --git a/src/app/modules/groups/components/employees-list/employees-list.component.sass b/src/app/modules/groups/components/employees-list/employees-list.component.sass
deleted file mode 100644
index cde651d..0000000
--- a/src/app/modules/groups/components/employees-list/employees-list.component.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.d-flex
-  gap: 2rem
diff --git a/src/app/modules/groups/components/employees-list/employees-list.component.ts b/src/app/modules/groups/components/employees-list/employees-list.component.ts
deleted file mode 100644
index fce4f06..0000000
--- a/src/app/modules/groups/components/employees-list/employees-list.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core'
-import {Employee, EmployeeGroup, EmployeePermission} from '../../../shared/model/employee'
-import {GroupService} from '../../services/group.service'
-import {AccountService} from '../../../accounts/services/account.service'
-import {Observable} from 'rxjs'
-
-@Component({
-  selector: 'cre-employees-list',
-  templateUrl: './employees-list.component.html',
-  styleUrls: ['./employees-list.component.sass']
-})
-export class EmployeesListComponent implements OnInit {
-  @Input() group: EmployeeGroup
-
-  employees$: Observable<Employee[]> | null
-  columns = ['id', 'firstName', 'lastName', 'edit']
-
-  constructor(
-    private accountService: AccountService,
-    private groupService: GroupService
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.employees$ = this.groupService.getEmployeesForGroup(this.group.id)
-  }
-
-  get canEditEmployee(): boolean {
-    return this.accountService.hasPermission(EmployeePermission.EDIT_USERS)
-  }
-}
diff --git a/src/app/modules/groups/group-routing.module.ts b/src/app/modules/groups/group-routing.module.ts
new file mode 100644
index 0000000..a3567d3
--- /dev/null
+++ b/src/app/modules/groups/group-routing.module.ts
@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core'
+import {RouterModule, Routes} from '@angular/router'
+
+import {ListComponent} from './pages/list/list.component'
+import {AddComponent} from './pages/add/add.component'
+import {EditComponent} from './pages/edit/edit.component'
+
+const routes: Routes = [{
+  path: 'list', component: ListComponent
+}, {
+  path: 'add', component: AddComponent
+}, {
+  path: 'edit/:id', component: EditComponent
+}, {
+  path: '', redirectTo: 'list'
+}]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GroupRoutingModule {
+}
diff --git a/src/app/modules/groups/groups.module.ts b/src/app/modules/groups/group.module.ts
similarity index 52%
rename from src/app/modules/groups/groups.module.ts
rename to src/app/modules/groups/group.module.ts
index 75a5f24..7938a5b 100644
--- a/src/app/modules/groups/groups.module.ts
+++ b/src/app/modules/groups/group.module.ts
@@ -1,18 +1,17 @@
 import {NgModule} from '@angular/core';
 
-import {GroupsRoutingModule} from './groups-routing.module';
+import {GroupRoutingModule} from './group-routing.module';
 import {ListComponent} from './pages/list/list.component';
 import {SharedModule} from "../shared/shared.module";
 import {AddComponent} from './pages/add/add.component';
 import {EditComponent} from './pages/edit/edit.component';
-import {EmployeesListComponent} from './components/employees-list/employees-list.component';
 
 
 @NgModule({
-  declarations: [ListComponent, AddComponent, EditComponent, EmployeesListComponent],
+  declarations: [ListComponent, AddComponent, EditComponent],
   imports: [
-    GroupsRoutingModule,
+    GroupRoutingModule,
     SharedModule
   ]
 })
-export class GroupsModule { }
+export class GroupModule { }
diff --git a/src/app/modules/groups/groups-routing.module.ts b/src/app/modules/groups/groups-routing.module.ts
deleted file mode 100644
index 5f93f42..0000000
--- a/src/app/modules/groups/groups-routing.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-
-import {ListComponent} from './pages/list/list.component';
-import {AddComponent} from "./pages/add/add.component";
-import {EditComponent} from "./pages/edit/edit.component";
-
-const routes: Routes = [{path: 'list', component: ListComponent}, {path: 'add', component: AddComponent}, {path: 'edit/:id', component: EditComponent}, {path: '', redirectTo: 'list'}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class GroupsRoutingModule {
-}
diff --git a/src/app/modules/groups/pages/add/add.component.html b/src/app/modules/groups/pages/add/add.component.html
index 3693e17..8b64a53 100644
--- a/src/app/modules/groups/pages/add/add.component.html
+++ b/src/app/modules/groups/pages/add/add.component.html
@@ -1,6 +1,6 @@
 <cre-entity-add
   title="Création d'un groupe"
-  backButtonLink="/group/list"
+  backButtonLink="/admin/group/list"
   [formFields]="formFields"
   (submit)="submit($event)">
 </cre-entity-add>
diff --git a/src/app/modules/groups/pages/add/add.component.ts b/src/app/modules/groups/pages/add/add.component.ts
index 743c0a2..e632fb9 100644
--- a/src/app/modules/groups/pages/add/add.component.ts
+++ b/src/app/modules/groups/pages/add/add.component.ts
@@ -57,7 +57,7 @@ export class AddComponent extends ErrorHandlingComponent {
     if (permissionsField.valid()) {
       this.subscribeAndNavigate(
         this.groupService.save(values.name, permissionsField.allEnabledPermissions),
-        '/group/list'
+        '/admin/group/list'
       )
     }
   }
diff --git a/src/app/modules/groups/pages/edit/edit.component.html b/src/app/modules/groups/pages/edit/edit.component.html
index 4ea243e..9e12e69 100644
--- a/src/app/modules/groups/pages/edit/edit.component.html
+++ b/src/app/modules/groups/pages/edit/edit.component.html
@@ -1,7 +1,7 @@
 <cre-entity-edit
   *ngIf="group"
   title="Modifier le groupe {{group.name}}"
-  backButtonLink="/group/list"
+  backButtonLink="/admin/group/list"
   deletePermission="REMOVE_USERS"
   deleteConfirmMessage="Voulez-vous vraiment supprimer le groupe {{group.name}}?"
   [entity]="group"
diff --git a/src/app/modules/groups/pages/edit/edit.component.ts b/src/app/modules/groups/pages/edit/edit.component.ts
index 5c47e54..0b4c121 100644
--- a/src/app/modules/groups/pages/edit/edit.component.ts
+++ b/src/app/modules/groups/pages/edit/edit.component.ts
@@ -37,7 +37,7 @@ export class EditComponent extends ErrorHandlingComponent {
 
   errorHandlers: ErrorHandler[] = [{
     filter: error => error.type === 'notfound-employeegroup-id',
-    consumer: error => this.urlUtils.navigateTo('/group/list')
+    consumer: error => this.urlUtils.navigateTo('/admin/group/list')
   }, {
     filter: error => error.type === 'exists-employeegroup-name',
     messageProducer: error => `Un groupe avec le nom '${error.name}' existe déjà`
@@ -69,7 +69,7 @@ export class EditComponent extends ErrorHandlingComponent {
     if (permissionsField.valid()) {
       this.subscribeAndNavigate(
         this.groupService.update(this.group.id, values.name, permissionsField.allEnabledPermissions),
-        '/group/list'
+        '/admin/group/list'
       )
     }
   }
@@ -77,7 +77,7 @@ export class EditComponent extends ErrorHandlingComponent {
   delete() {
     this.subscribeAndNavigate(
       this.groupService.delete(this.group.id),
-      '/group/list'
+      '/admin/group/list'
     )
   }
 }
diff --git a/src/app/modules/groups/pages/list/list.component.html b/src/app/modules/groups/pages/list/list.component.html
index 12b7c04..59ea8dc 100644
--- a/src/app/modules/groups/pages/list/list.component.html
+++ b/src/app/modules/groups/pages/list/list.component.html
@@ -1,5 +1,5 @@
 <cre-entity-list
-  addLink="/group/add"
+  addLink="/admin/group/add"
   addPermission="EDIT_USERS"
   [entities$]="groups$"
   [columns]="columns"
diff --git a/src/app/modules/groups/pages/list/list.component.ts b/src/app/modules/groups/pages/list/list.component.ts
index 24e1ae4..d8a08e9 100644
--- a/src/app/modules/groups/pages/list/list.component.ts
+++ b/src/app/modules/groups/pages/list/list.component.ts
@@ -25,7 +25,7 @@ export class ListComponent extends ErrorHandlingComponent {
     disabledFn: group => this.isDefaultGroup(group)
   }, {
     text: 'Modifier',
-    linkFn: group => `/group/edit/${group.id}`,
+    linkFn: group => `/admin/group/edit/${group.id}`,
     permission: EmployeePermission.EDIT_USERS
   }]
 
diff --git a/src/app/modules/material-type/material-type-routing.module.ts b/src/app/modules/material-type/material-type-routing.module.ts
index 8543072..c9f7e1f 100644
--- a/src/app/modules/material-type/material-type-routing.module.ts
+++ b/src/app/modules/material-type/material-type-routing.module.ts
@@ -1,28 +1,23 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {ListComponent} from "./pages/list/list.component";
-import {AddComponent} from "./pages/add/add.component";
-import {EditComponent} from "./pages/edit/edit.component";
+import {NgModule} from '@angular/core'
+import {RouterModule, Routes} from '@angular/router'
+import {ListComponent} from './pages/list/list.component'
+import {AddComponent} from './pages/add/add.component'
+import {EditComponent} from './pages/edit/edit.component'
 
 
-const routes: Routes = [
-  {
-    path: 'list',
-    component: ListComponent
-  },
-  {
-    path: 'add',
-    component: AddComponent
-  },
-  {
-    path: 'edit/:id',
-    component: EditComponent
-  },
-  {
-    path: '',
-    redirectTo: 'list'
-  }
-];
+const routes: Routes = [{
+  path: 'list',
+  component: ListComponent
+}, {
+  path: 'add',
+  component: AddComponent
+}, {
+  path: 'edit/:id',
+  component: EditComponent
+}, {
+  path: '',
+  redirectTo: 'list'
+}]
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/modules/shared/components/header/header.component.ts b/src/app/modules/shared/components/header/header.component.ts
index 135eeb7..34e2495 100644
--- a/src/app/modules/shared/components/header/header.component.ts
+++ b/src/app/modules/shared/components/header/header.component.ts
@@ -14,9 +14,8 @@ import {ErrorService} from '../../service/error.service'
 export class HeaderComponent extends SubscribingComponent {
   links: HeaderLink[] = [
     {route: '/color', title: 'Couleurs', requiredPermission: EmployeePermission.VIEW_RECIPES},
-    {route: '/catalog', title: 'Catalogue', enabled: true, requiredPermission: EmployeePermission.VIEW_CATALOG},
-    {route: '/employee', title: 'Utilisateurs', requiredPermission: EmployeePermission.VIEW_USERS},
-    {route: '/group', title: 'Groupes', requiredPermission: EmployeePermission.VIEW_USERS},
+    {route: '/catalog', title: 'Catalogue', requiredPermission: EmployeePermission.VIEW_CATALOG},
+    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS},
     {route: '/account/login', title: 'Connexion', enabled: true},
     {route: '/account/logout', title: 'Déconnexion', enabled: false},
   ]
diff --git a/src/app/modules/shared/components/sub-menu/sub-menu.component.ts b/src/app/modules/shared/components/sub-menu/sub-menu.component.ts
new file mode 100644
index 0000000..76af681
--- /dev/null
+++ b/src/app/modules/shared/components/sub-menu/sub-menu.component.ts
@@ -0,0 +1,16 @@
+import {Injectable, OnDestroy, OnInit} from '@angular/core'
+import {GlobalAlertHandlerComponent} from '../global-alert-handler/global-alert-handler.component'
+import {NavLink} from '../nav/nav.component'
+
+@Injectable()
+export abstract class SubMenuComponent implements OnInit, OnDestroy {
+  abstract links: NavLink[]
+
+  ngOnInit(): void {
+    GlobalAlertHandlerComponent.extraTopMarginMultiplier = 1
+  }
+
+  ngOnDestroy(): void {
+    GlobalAlertHandlerComponent.extraTopMarginMultiplier = 0
+  }
+}
diff --git a/src/app/modules/employees/pages/add/add.component.html b/src/app/modules/users/pages/add/add.component.html
similarity index 100%
rename from src/app/modules/employees/pages/add/add.component.html
rename to src/app/modules/users/pages/add/add.component.html
diff --git a/src/app/modules/employees/pages/add/add.component.sass b/src/app/modules/users/pages/add/add.component.sass
similarity index 100%
rename from src/app/modules/employees/pages/add/add.component.sass
rename to src/app/modules/users/pages/add/add.component.sass
diff --git a/src/app/modules/employees/pages/add/add.component.ts b/src/app/modules/users/pages/add/add.component.ts
similarity index 87%
rename from src/app/modules/employees/pages/add/add.component.ts
rename to src/app/modules/users/pages/add/add.component.ts
index 60033cd..44d8a71 100644
--- a/src/app/modules/employees/pages/add/add.component.ts
+++ b/src/app/modules/users/pages/add/add.component.ts
@@ -1,11 +1,8 @@
-import {Component, ContentChildren, ViewChild, ViewContainerRef} from '@angular/core'
+import {Component, ViewChild} from '@angular/core'
 import {Validators} from '@angular/forms'
-import {
-  currentPermissionsFieldComponent,
-  PermissionsFieldComponent
-} from '../../../shared/components/permissions-field/permissions-field.component'
+import {currentPermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
 import {GroupService} from '../../../groups/services/group.service'
-import {EmployeeService} from '../../services/employee.service'
+import {UserService} from '../../services/user.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
 import {ErrorHandler, ErrorService} from '../../../shared/service/error.service'
@@ -22,14 +19,14 @@ export class AddComponent extends ErrorHandlingComponent {
 
   formFields: FormField[] = [{
     name: 'id',
-    label: 'Numéro d\'employé',
+    label: 'Numéro d\'utilisateur',
     icon: 'pound',
     type: 'number',
     required: true,
     validator: Validators.compose([Validators.pattern(new RegExp('^[0-9]+$')), Validators.min(0)]),
     errorMessages: [
-      {conditionFn: errors => errors.required, message: 'Un numéro d\'employé est requis'},
-      {conditionFn: errors => errors.pattern, message: 'Le numéro d\'employé doit être un nombre'}
+      {conditionFn: errors => errors.required, message: 'Un numéro d\'utilisateur est requis'},
+      {conditionFn: errors => errors.pattern, message: 'Le numéro d\'utilisateur doit être un nombre'}
     ]
   }, {
     name: 'firstName',
@@ -84,7 +81,7 @@ export class AddComponent extends ErrorHandlingComponent {
   }]
 
   constructor(
-    private employeeService: EmployeeService,
+    private employeeService: UserService,
     private groupService: GroupService,
     errorService: ErrorService,
     router: Router,
@@ -112,7 +109,7 @@ export class AddComponent extends ErrorHandlingComponent {
           groupId,
           permissionsField.allEnabledPermissions
         ),
-        '/employee/list'
+        '/admin/user/list'
       )
     }
   }
diff --git a/src/app/modules/employees/pages/edit/edit.component.html b/src/app/modules/users/pages/edit/edit.component.html
similarity index 100%
rename from src/app/modules/employees/pages/edit/edit.component.html
rename to src/app/modules/users/pages/edit/edit.component.html
diff --git a/src/app/modules/employees/pages/edit/edit.component.sass b/src/app/modules/users/pages/edit/edit.component.sass
similarity index 100%
rename from src/app/modules/employees/pages/edit/edit.component.sass
rename to src/app/modules/users/pages/edit/edit.component.sass
diff --git a/src/app/modules/employees/pages/edit/edit.component.ts b/src/app/modules/users/pages/edit/edit.component.ts
similarity index 77%
rename from src/app/modules/employees/pages/edit/edit.component.ts
rename to src/app/modules/users/pages/edit/edit.component.ts
index 97fd9e2..f835a4a 100644
--- a/src/app/modules/employees/pages/edit/edit.component.ts
+++ b/src/app/modules/users/pages/edit/edit.component.ts
@@ -1,6 +1,6 @@
 import {Component, ViewChild} from '@angular/core'
 import {currentPermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
-import {EmployeeService} from '../../services/employee.service'
+import {UserService} from '../../services/user.service'
 import {GroupService} from '../../../groups/services/group.service'
 import {ActivatedRoute, Router} from '@angular/router'
 import {Employee} from '../../../shared/model/employee'
@@ -21,7 +21,7 @@ export class EditComponent extends ErrorHandlingComponent {
   employee: Employee | null
   formFields: FormField[] = [{
     name: 'id',
-    label: 'Numéro d\'employé',
+    label: 'Numéro d\'utilisateur',
     icon: 'pound',
     type: 'number',
     readonly: true
@@ -44,7 +44,7 @@ export class EditComponent extends ErrorHandlingComponent {
       {conditionFn: errors => errors.required, message: 'Un nom est requis'}
     ]
   }, {
-    name: 'groupId',
+    name: 'group',
     label: 'Groupe',
     icon: 'account-multiple',
     type: 'select',
@@ -60,7 +60,7 @@ export class EditComponent extends ErrorHandlingComponent {
 
   errorHandlers: ErrorHandler[] = [{
     filter: error => error.type === 'notfound-employee-id',
-    consumer: error => this.urlUtils.navigateTo('/employee/list')
+    consumer: error => this.urlUtils.navigateTo('/admin/user/list')
   }, {
     filter: error => error.type === 'exists-employee-fullName',
     messageProducer: error => `Un utilisateur nommé '${error.fullName}' existe déjà`
@@ -68,7 +68,7 @@ export class EditComponent extends ErrorHandlingComponent {
 
   constructor(
     private accountService: AccountService,
-    private employeeService: EmployeeService,
+    private employeeService: UserService,
     private groupService: GroupService,
     errorService: ErrorService,
     router: Router,
@@ -96,26 +96,11 @@ export class EditComponent extends ErrorHandlingComponent {
           parseInt(values.id),
           values.firstName,
           values.lastName,
+          values.group,
           permissionsField.allEnabledPermissions
         ),
         () => {
-          // TODO de-comment when backend will be ready
-          // const group = values.groupId
-          // if (group >= 0) {
-          //   this.subscribeAndNavigate(
-          //     this.groupService.addEmployeeToGroup(group, this.employee),
-          //     '/employee/list'
-          //   )
-          // } else {
-          //   if (this.employee.group) {
-          //     this.subscribeAndNavigate(
-          //       this.groupService.removeEmployeeFromGroup(this.employee),
-          //       '/employee/list'
-          //     )
-          //   } else {
-              this.urlUtils.navigateTo('/employee/list')
-            // }
-          // }
+          this.urlUtils.navigateTo('/admin/user/list')
         }
       )
     }
@@ -124,7 +109,7 @@ export class EditComponent extends ErrorHandlingComponent {
   delete() {
     this.subscribeAndNavigate(
       this.employeeService.delete(this.employee.id),
-      '/employee/list'
+      '/admin/user/list'
     )
   }
 }
diff --git a/src/app/modules/employees/pages/list/list.component.html b/src/app/modules/users/pages/list/list.component.html
similarity index 92%
rename from src/app/modules/employees/pages/list/list.component.html
rename to src/app/modules/users/pages/list/list.component.html
index 1190b10..bb5d917 100644
--- a/src/app/modules/employees/pages/list/list.component.html
+++ b/src/app/modules/users/pages/list/list.component.html
@@ -1,5 +1,5 @@
 <cre-entity-list
-  addLink="/employee/add"
+  addLink="/admin/user/add"
   addPermission="EDIT_USERS"
   [entities$]="employees$"
   [columns]="columns"
diff --git a/src/app/modules/employees/pages/list/list.component.sass b/src/app/modules/users/pages/list/list.component.sass
similarity index 100%
rename from src/app/modules/employees/pages/list/list.component.sass
rename to src/app/modules/users/pages/list/list.component.sass
diff --git a/src/app/modules/employees/pages/list/list.component.ts b/src/app/modules/users/pages/list/list.component.ts
similarity index 87%
rename from src/app/modules/employees/pages/list/list.component.ts
rename to src/app/modules/users/pages/list/list.component.ts
index 7c7e3c8..dd680dd 100644
--- a/src/app/modules/employees/pages/list/list.component.ts
+++ b/src/app/modules/users/pages/list/list.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core'
 import {Observable} from 'rxjs'
-import {EmployeeService} from '../../services/employee.service'
+import {UserService} from '../../services/user.service'
 import {Employee, EmployeePermission} from '../../../shared/model/employee'
 import {takeUntil} from 'rxjs/operators'
 import {AccountService} from '../../../accounts/services/account.service'
@@ -24,7 +24,7 @@ import {ErrorService} from '../../../shared/service/error.service'
 export class ListComponent extends ErrorHandlingComponent {
   employees$: Observable<Employee[]>
   columns = [
-    {def: 'id', title: 'Numéro d\'employé', valueFn: e => e.id},
+    {def: 'id', title: 'Numéro d\'utilisateur', valueFn: e => e.id},
     {def: 'name', title: 'Nom', valueFn: e => `${e.firstName} ${e.lastName}`},
     {def: 'group', title: 'Groupe', valueFn: e => e.group ? e.group.name : 'Aucun'},
     {def: 'permissionCount', title: 'Nombre de permissions', valueFn: e => e.permissions.length},
@@ -32,16 +32,16 @@ export class ListComponent extends ErrorHandlingComponent {
   ]
   buttons = [{
     text: 'Modifier',
-    linkFn: employee => `/employee/edit/${employee.id}`,
+    linkFn: employee => `/admin/user/edit/${employee.id}`,
     permission: EmployeePermission.EDIT_USERS
   }, {
     text: 'Modifier mot de passe',
-    linkFn: employee => `/employee/password/edit/${employee.id}`,
+    linkFn: employee => `/admin/user/password/edit/${employee.id}`,
     permission: EmployeePermission.EDIT_USERS
   }]
 
   constructor(
-    private employeeService: EmployeeService,
+    private employeeService: UserService,
     private accountService: AccountService,
     errorService: ErrorService,
     router: Router,
diff --git a/src/app/modules/employees/pages/password-edit/password-edit.component.html b/src/app/modules/users/pages/password-edit/password-edit.component.html
similarity index 100%
rename from src/app/modules/employees/pages/password-edit/password-edit.component.html
rename to src/app/modules/users/pages/password-edit/password-edit.component.html
diff --git a/src/app/modules/employees/pages/password-edit/password-edit.component.sass b/src/app/modules/users/pages/password-edit/password-edit.component.sass
similarity index 100%
rename from src/app/modules/employees/pages/password-edit/password-edit.component.sass
rename to src/app/modules/users/pages/password-edit/password-edit.component.sass
diff --git a/src/app/modules/employees/pages/password-edit/password-edit.component.ts b/src/app/modules/users/pages/password-edit/password-edit.component.ts
similarity index 88%
rename from src/app/modules/employees/pages/password-edit/password-edit.component.ts
rename to src/app/modules/users/pages/password-edit/password-edit.component.ts
index 4670eae..65684c8 100644
--- a/src/app/modules/employees/pages/password-edit/password-edit.component.ts
+++ b/src/app/modules/users/pages/password-edit/password-edit.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
-import {EmployeeService} from '../../services/employee.service'
+import {UserService} from '../../services/user.service'
 import {Employee} from '../../../shared/model/employee'
 import {ActivatedRoute, Router} from '@angular/router'
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'
@@ -19,11 +19,11 @@ export class PasswordEditComponent extends ErrorHandlingComponent {
 
   errorHandlers: ErrorHandler[] = [{
     filter: error => error.type === 'notfound-employee-id',
-    consumer: error => this.urlUtils.navigateTo('/employee/list')
+    consumer: error => this.urlUtils.navigateTo('/admin/user/list')
   }]
 
   constructor(
-    private employeeService: EmployeeService,
+    private employeeService: UserService,
     private formBuilder: FormBuilder,
     errorService: ErrorService,
     router: Router,
@@ -49,7 +49,7 @@ export class PasswordEditComponent extends ErrorHandlingComponent {
     if (this.form.valid) {
       this.subscribeAndNavigate(
         this.employeeService.updatePassword(this.employee.id, this.passwordControl.value),
-        '/employee/list'
+        '/admin/user/list'
       )
     }
   }
diff --git a/src/app/modules/employees/services/employee.service.ts b/src/app/modules/users/services/user.service.ts
similarity index 83%
rename from src/app/modules/employees/services/employee.service.ts
rename to src/app/modules/users/services/user.service.ts
index 9fc7c1c..3047bb6 100644
--- a/src/app/modules/employees/services/employee.service.ts
+++ b/src/app/modules/users/services/user.service.ts
@@ -6,7 +6,7 @@ import {Observable} from "rxjs";
 @Injectable({
   providedIn: 'root'
 })
-export class EmployeeService {
+export class UserService {
   constructor(
     private api: ApiService
   ) {
@@ -25,8 +25,8 @@ export class EmployeeService {
     return this.api.post<Employee>('/employee', employee)
   }
 
-  update(id: number, firstName: string, lastName: string, permissions: EmployeePermission[]): Observable<void> {
-    const employee = {id, firstName, lastName, permissions}
+  update(id: number, firstName: string, lastName: string, group: number, permissions: EmployeePermission[]): Observable<void> {
+    const employee = {id, firstName, lastName, groupId: group, permissions}
     return this.api.put<void>('/employee', employee)
   }
 
diff --git a/src/app/modules/users/user-routing.module.ts b/src/app/modules/users/user-routing.module.ts
new file mode 100644
index 0000000..19a3c54
--- /dev/null
+++ b/src/app/modules/users/user-routing.module.ts
@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core'
+import {Routes, RouterModule} from '@angular/router'
+
+import {ListComponent} from './pages/list/list.component'
+import {AddComponent} from './pages/add/add.component'
+import {EditComponent} from './pages/edit/edit.component'
+import {PasswordEditComponent} from './pages/password-edit/password-edit.component'
+
+const routes: Routes = [{
+  path: 'list',
+  component: ListComponent
+}, {
+  path: 'add', component: AddComponent
+}, {
+  path: 'edit/:id',
+  component: EditComponent
+}, {
+  path: 'password/edit/:id', component: PasswordEditComponent
+}, {
+  path: '', redirectTo: 'list'
+}]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class UserRoutingModule {
+}
diff --git a/src/app/modules/employees/employees.module.ts b/src/app/modules/users/user.module.ts
similarity index 81%
rename from src/app/modules/employees/employees.module.ts
rename to src/app/modules/users/user.module.ts
index 47211be..d4d7565 100644
--- a/src/app/modules/employees/employees.module.ts
+++ b/src/app/modules/users/user.module.ts
@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 
-import {EmployeesRoutingModule} from './employees-routing.module';
+import {UserRoutingModule} from './user-routing.module';
 import {ListComponent} from './pages/list/list.component';
 import {SharedModule} from "../shared/shared.module";
 import { AddComponent } from './pages/add/add.component';
@@ -12,9 +12,9 @@ import { PasswordEditComponent } from './pages/password-edit/password-edit.compo
 @NgModule({
   declarations: [ListComponent, AddComponent, EditComponent, PasswordEditComponent],
   imports: [
-    EmployeesRoutingModule,
+    UserRoutingModule,
     SharedModule,
     MatSelectModule
   ]
 })
-export class EmployeesModule { }
+export class UserModule { }
diff --git a/src/app/pages/administration/administration.component.html b/src/app/pages/administration/administration.component.html
new file mode 100644
index 0000000..2c65c9d
--- /dev/null
+++ b/src/app/pages/administration/administration.component.html
@@ -0,0 +1,2 @@
+<cre-nav [links]="links"></cre-nav>
+<router-outlet></router-outlet>
diff --git a/src/app/pages/administration/administration.component.sass b/src/app/pages/administration/administration.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/administration/administration.component.ts b/src/app/pages/administration/administration.component.ts
new file mode 100644
index 0000000..44683f8
--- /dev/null
+++ b/src/app/pages/administration/administration.component.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core'
+import {SubMenuComponent} from '../../modules/shared/components/sub-menu/sub-menu.component'
+import {NavLink} from '../../modules/shared/components/nav/nav.component'
+import {EmployeePermission} from '../../modules/shared/model/employee'
+
+@Component({
+  selector: 'cre-administration',
+  templateUrl: './administration.component.html',
+  styleUrls: ['./administration.component.sass']
+})
+export class AdministrationComponent extends SubMenuComponent {
+  links: NavLink[] = [
+    {route: '/admin/user', title: 'Utilisateurs', permission: EmployeePermission.VIEW_USERS},
+    {route: '/admin/group', title: 'Groupes', permission: EmployeePermission.VIEW_USERS},
+  ]
+}
diff --git a/src/app/pages/catalog/catalog.component.ts b/src/app/pages/catalog/catalog.component.ts
index ab3bfe6..30981b0 100644
--- a/src/app/pages/catalog/catalog.component.ts
+++ b/src/app/pages/catalog/catalog.component.ts
@@ -1,25 +1,17 @@
-import {Component, OnDestroy, OnInit} from '@angular/core'
+import {Component} from '@angular/core'
 import {NavLink} from '../../modules/shared/components/nav/nav.component'
 import {EmployeePermission} from '../../modules/shared/model/employee'
-import {GlobalAlertHandlerComponent} from '../../modules/shared/components/global-alert-handler/global-alert-handler.component'
+import {SubMenuComponent} from '../../modules/shared/components/sub-menu/sub-menu.component'
 
 @Component({
   selector: 'cre-inventory-page',
   templateUrl: './catalog.component.html',
   styleUrls: ['./catalog.component.sass']
 })
-export class CatalogComponent implements OnInit, OnDestroy {
+export class CatalogComponent extends SubMenuComponent {
   links: NavLink[] = [
     {route: '/catalog/materialtype', title: 'Types de produit', permission: EmployeePermission.VIEW_CATALOG},
     {route: '/catalog/material', title: 'Inventaire', permission: EmployeePermission.VIEW_CATALOG},
     {route: '/catalog/company', title: 'Bannières', permission: EmployeePermission.VIEW_CATALOG}
   ]
-
-  ngOnInit(): void {
-    GlobalAlertHandlerComponent.extraTopMarginMultiplier = 1
-  }
-
-  ngOnDestroy(): void {
-    GlobalAlertHandlerComponent.extraTopMarginMultiplier = 0
-  }
 }

From bca45efa9a6413697b1480007729005aa190334e Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Sat, 1 May 2021 20:09:53 -0400
Subject: [PATCH 3/4] Ajustement du menu

---
 .../employee-info.component.html              |  7 ---
 .../employee-info.component.sass              | 12 -----
 .../employee-menu.component.html              | 45 +++++++++++++++++++
 .../employee-menu.component.sass              | 38 ++++++++++++++++
 ...omponent.ts => employee-menu.component.ts} |  9 ++--
 .../components/header/header.component.html   |  2 +-
 .../components/header/header.component.ts     | 17 ++-----
 .../shared/components/nav/nav.component.sass  |  2 +-
 src/app/modules/shared/shared.module.ts       |  5 ++-
 9 files changed, 97 insertions(+), 40 deletions(-)
 delete mode 100644 src/app/modules/shared/components/employee-info/employee-info.component.html
 delete mode 100644 src/app/modules/shared/components/employee-info/employee-info.component.sass
 create mode 100644 src/app/modules/shared/components/employee-info/employee-menu.component.html
 create mode 100644 src/app/modules/shared/components/employee-info/employee-menu.component.sass
 rename src/app/modules/shared/components/employee-info/{employee-info.component.ts => employee-menu.component.ts} (83%)

diff --git a/src/app/modules/shared/components/employee-info/employee-info.component.html b/src/app/modules/shared/components/employee-info/employee-info.component.html
deleted file mode 100644
index fb386ba..0000000
--- a/src/app/modules/shared/components/employee-info/employee-info.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div *ngIf="employee" class="employee-info-container d-flex flex-column">
-  <labeled-icon *ngIf="authenticated" icon="account" label="{{employee.firstName}} {{employee.lastName}}"></labeled-icon>
-  <div class="d-flex flex-row">
-    <labeled-icon *ngIf="authenticated" icon="pound" [label]="employee.id.toString()"></labeled-icon>
-    <labeled-icon *ngIf="employeeInGroup" class="employee-info-group" icon="account-multiple" [label]="employee.group.name"></labeled-icon>
-  </div>
-</div>
diff --git a/src/app/modules/shared/components/employee-info/employee-info.component.sass b/src/app/modules/shared/components/employee-info/employee-info.component.sass
deleted file mode 100644
index 462ef51..0000000
--- a/src/app/modules/shared/components/employee-info/employee-info.component.sass
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "../../../../../custom-theme"
-
-p, labeled-icon
-  margin: 0
-  color: $light-primary-text
-
-.employee-info-container
-  margin-top: .85rem
-  margin-right: 1rem
-
-.employee-info-group
-  margin-left: 0.7rem
diff --git a/src/app/modules/shared/components/employee-info/employee-menu.component.html b/src/app/modules/shared/components/employee-info/employee-menu.component.html
new file mode 100644
index 0000000..ee806f0
--- /dev/null
+++ b/src/app/modules/shared/components/employee-info/employee-menu.component.html
@@ -0,0 +1,45 @@
+<div class="employee-menu-wrapper">
+  <div *ngIf="employee" class="employee-info-wrapper d-flex flex-column" (click)="menuEnabled = !menuEnabled">
+    <labeled-icon
+      *ngIf="authenticated"
+      icon="account"
+      label="{{employee.firstName}} {{employee.lastName}}">
+    </labeled-icon>
+    <div class="d-flex flex-row">
+      <labeled-icon
+        *ngIf="authenticated"
+        icon="pound"
+        [label]="employee.id.toString()">
+      </labeled-icon>
+      <labeled-icon
+        *ngIf="employeeInGroup"
+        class="employee-info-group"
+        icon="account-multiple"
+        [label]="employee.group.name">
+      </labeled-icon>
+    </div>
+  </div>
+
+  <button
+    *ngIf="!authenticated && !employeeInGroup"
+    routerLink="/account/logout">
+    Connexion
+  </button>
+
+  <mat-action-list *ngIf="menuEnabled">
+    <button
+      *ngIf="!authenticated && employeeInGroup"
+      mat-list-item
+      class="employee-menu-item-login"
+      routerLink="/account/login">
+      Connexion
+    </button>
+    <button
+      *ngIf="authenticated"
+      mat-list-item
+      class="employee-menu-item-logout"
+      routerLink="/account/logout">
+      Déconnexion
+    </button>
+  </mat-action-list>
+</div>
diff --git a/src/app/modules/shared/components/employee-info/employee-menu.component.sass b/src/app/modules/shared/components/employee-info/employee-menu.component.sass
new file mode 100644
index 0000000..7da5a0c
--- /dev/null
+++ b/src/app/modules/shared/components/employee-info/employee-menu.component.sass
@@ -0,0 +1,38 @@
+@import "../../../../../custom-theme"
+
+p, labeled-icon
+  margin: 0
+  color: $light-primary-text
+
+.employee-info-wrapper
+  margin: 1rem 1rem 0
+  cursor: pointer
+
+  &:hover labeled-icon
+    text-decoration: underline
+
+.employee-info-group
+  margin-left: 0.7rem
+
+mat-action-list
+  position: absolute
+  transform: translateY(-2px)
+  z-index: 91
+
+button
+  background-color: $color-primary !important
+  color: $light-primary-text !important
+
+  &:hover
+    background-color: $color-primary !important
+    text-decoration: underline
+
+  &:not(.mat-list-item)
+    font-size: 16px
+    font-weight: 400
+    line-height: 24px
+    margin-top: 16px
+    padding-left: 16px
+    padding-right: 16px
+    height: 48px
+    border: none
diff --git a/src/app/modules/shared/components/employee-info/employee-info.component.ts b/src/app/modules/shared/components/employee-info/employee-menu.component.ts
similarity index 83%
rename from src/app/modules/shared/components/employee-info/employee-info.component.ts
rename to src/app/modules/shared/components/employee-info/employee-menu.component.ts
index a4dda93..9224304 100644
--- a/src/app/modules/shared/components/employee-info/employee-info.component.ts
+++ b/src/app/modules/shared/components/employee-info/employee-menu.component.ts
@@ -5,14 +5,15 @@ import {Subject} from "rxjs";
 import {takeUntil} from "rxjs/operators";
 
 @Component({
-  selector: 'cre-employee-info',
-  templateUrl: './employee-info.component.html',
-  styleUrls: ['./employee-info.component.sass']
+  selector: 'cre-employee-menu',
+  templateUrl: './employee-menu.component.html',
+  styleUrls: ['./employee-menu.component.sass']
 })
-export class EmployeeInfoComponent implements OnInit, OnDestroy {
+export class EmployeeMenuComponent implements OnInit, OnDestroy {
   authenticated = false
   employee: Employee = null
   employeeInGroup = false
+  menuEnabled = false
 
   private destroy$ = new Subject<boolean>()
 
diff --git a/src/app/modules/shared/components/header/header.component.html b/src/app/modules/shared/components/header/header.component.html
index ebfa6b0..51aabfa 100644
--- a/src/app/modules/shared/components/header/header.component.html
+++ b/src/app/modules/shared/components/header/header.component.html
@@ -16,7 +16,7 @@
     </div>
   </nav>
 
-  <cre-employee-info></cre-employee-info>
+  <cre-employee-menu></cre-employee-menu>
   <img
     class="flex-grow-0"
     src="assets/logo.png"
diff --git a/src/app/modules/shared/components/header/header.component.ts b/src/app/modules/shared/components/header/header.component.ts
index 34e2495..04fd7ba 100644
--- a/src/app/modules/shared/components/header/header.component.ts
+++ b/src/app/modules/shared/components/header/header.component.ts
@@ -15,9 +15,7 @@ export class HeaderComponent extends SubscribingComponent {
   links: HeaderLink[] = [
     {route: '/color', title: 'Couleurs', requiredPermission: EmployeePermission.VIEW_RECIPES},
     {route: '/catalog', title: 'Catalogue', requiredPermission: EmployeePermission.VIEW_CATALOG},
-    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS},
-    {route: '/account/login', title: 'Connexion', enabled: true},
-    {route: '/account/logout', title: 'Déconnexion', enabled: false},
+    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS}
   ]
   _activeLink = this.links[0].route
 
@@ -48,10 +46,10 @@ export class HeaderComponent extends SubscribingComponent {
     )
 
     // Auth status
-    this.updateEnabledLinks(this.appState.isAuthenticated, this.appState.authenticatedEmployee)
+    this.updateEnabledLinks(this.appState.authenticatedEmployee)
     this.subscribe(
       this.appState.authenticatedUser$,
-      authentication => this.updateEnabledLinks(authentication.authenticated, authentication.authenticatedUser)
+      authentication => this.updateEnabledLinks(authentication.authenticatedUser)
     )
   }
 
@@ -72,20 +70,13 @@ export class HeaderComponent extends SubscribingComponent {
     return this._activeLink
   }
 
-  private updateEnabledLinks(authenticated: boolean, employee: Employee) {
-    this.link('/account/login').enabled = !authenticated
-    this.link('/account/logout').enabled = authenticated
-
+  private updateEnabledLinks(employee: Employee) {
     this.links.forEach(l => {
       if (l.requiredPermission) {
         l.enabled = employee && employee.permissions.indexOf(l.requiredPermission) >= 0
       }
     })
   }
-
-  private link(route: string) {
-    return this.links.filter(l => l.route === route)[0]
-  }
 }
 
 class HeaderLink {
diff --git a/src/app/modules/shared/components/nav/nav.component.sass b/src/app/modules/shared/components/nav/nav.component.sass
index c8a7b04..05f5622 100644
--- a/src/app/modules/shared/components/nav/nav.component.sass
+++ b/src/app/modules/shared/components/nav/nav.component.sass
@@ -2,7 +2,7 @@
 
 nav
   position: relative
-  z-index: 99
+  z-index: 90
   padding-bottom: 1px
 
   a
diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts
index c2325f0..bc09ead 100644
--- a/src/app/modules/shared/shared.module.ts
+++ b/src/app/modules/shared/shared.module.ts
@@ -7,7 +7,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'
 import {MatInputModule} from '@angular/material/input'
 import {MatIconModule} from '@angular/material/icon'
 import {FormsModule, ReactiveFormsModule} from '@angular/forms'
-import {EmployeeInfoComponent} from './components/employee-info/employee-info.component'
+import {EmployeeMenuComponent} from './components/employee-info/employee-menu.component'
 import {LabeledIconComponent} from './components/labeled-icon/labeled-icon.component'
 import {MatTableModule} from '@angular/material/table'
 import {CommonModule} from '@angular/common'
@@ -35,7 +35,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
 
 
 @NgModule({
-  declarations: [HeaderComponent, EmployeeInfoComponent, LabeledIconComponent, ConfirmBoxComponent, PermissionsListComponent, PermissionsFieldComponent, NavComponent, EntityListComponent, EntityAddComponent, EntityEditComponent, FileButtonComponent, GlobalAlertHandlerComponent, SliderFieldComponent, LoadingWheelComponent],
+  declarations: [HeaderComponent, EmployeeMenuComponent, LabeledIconComponent, ConfirmBoxComponent, PermissionsListComponent, PermissionsFieldComponent, NavComponent, EntityListComponent, EntityAddComponent, EntityEditComponent, FileButtonComponent, GlobalAlertHandlerComponent, SliderFieldComponent, LoadingWheelComponent],
   exports: [
     CommonModule,
     HttpClientModule,
@@ -78,6 +78,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
     MatInputModule,
     MatSelectModule,
     MatOptionModule,
+    MatListModule,
     MatSliderModule,
     MatProgressSpinnerModule,
     ReactiveFormsModule,

From 2d235f93cd29dc568102d4b4cdbb50ae7478f238 Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Sat, 1 May 2021 20:44:34 -0400
Subject: [PATCH 4/4] =?UTF-8?q?Ajout=20de=20la=20g=C3=A9n=C3=A9ration=20de?=
 =?UTF-8?q?=20kits=20de=20retouche?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app-routing.module.ts                 | 14 ++++-
 src/app/app.module.ts                         |  6 +-
 src/app/modules/colors/colors.module.ts       | 60 +++++++++----------
 .../employee-menu.component.html              |  6 +-
 .../employee-info/employee-menu.component.ts  | 28 +++++++--
 .../components/header/header.component.ts     | 15 +++--
 src/app/modules/shared/model/employee.ts      |  4 +-
 .../shared/service/touchupkit.service.ts      | 11 ++++
 src/app/pages/others/misc.component.html      |  2 +
 src/app/pages/others/misc.component.sass      |  0
 src/app/pages/others/misc.component.ts        | 15 +++++
 11 files changed, 112 insertions(+), 49 deletions(-)
 create mode 100644 src/app/modules/shared/service/touchupkit.service.ts
 create mode 100644 src/app/pages/others/misc.component.html
 create mode 100644 src/app/pages/others/misc.component.sass
 create mode 100644 src/app/pages/others/misc.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7a4fe40..be757b7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,6 +2,8 @@ import {NgModule} from '@angular/core'
 import {Routes, RouterModule} from '@angular/router'
 import {CatalogComponent} from './pages/catalog/catalog.component'
 import {AdministrationComponent} from './pages/administration/administration.component'
+import {MiscComponent} from './pages/others/misc.component'
+import {TouchupkitComponent} from './pages/others/touchupkit/touchupkit.component'
 
 
 const routes: Routes = [{
@@ -44,8 +46,16 @@ const routes: Routes = [{
     }
   ]
 }, {
-  path: 'material',
-  loadChildren: () => import('./modules/material/material.module').then(m => m.MaterialModule)
+  path: 'misc',
+  component: MiscComponent,
+  children: [{
+    path: 'touchupkit',
+    component: TouchupkitComponent
+  }, {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'touchupkit'
+  }]
 }]
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 09374d6..9de024d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,12 +9,16 @@ import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {CatalogComponent} from './pages/catalog/catalog.component';
 import {CompanyModule} from './modules/company/company.module';
 import { AdministrationComponent } from './pages/administration/administration.component';
+import { MiscComponent } from './pages/others/misc.component';
+import { TouchupkitComponent } from './pages/others/touchupkit/touchupkit.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CatalogComponent,
-    AdministrationComponent
+    AdministrationComponent,
+    MiscComponent,
+    TouchupkitComponent
   ],
   imports: [
     AppRoutingModule,
diff --git a/src/app/modules/colors/colors.module.ts b/src/app/modules/colors/colors.module.ts
index 6832ed8..c994650 100644
--- a/src/app/modules/colors/colors.module.ts
+++ b/src/app/modules/colors/colors.module.ts
@@ -1,38 +1,38 @@
-import {NgModule} from '@angular/core';
+import {NgModule} from '@angular/core'
 
-import {ColorsRoutingModule} from './colors-routing.module';
-import {SharedModule} from "../shared/shared.module";
-import {ListComponent} from './pages/list/list.component';
-import {AddComponent} from './pages/add/add.component';
-import {EditComponent} from './pages/edit/edit.component';
-import {MatExpansionModule} from "@angular/material/expansion";
-import {FormsModule} from "@angular/forms";
-import {ExploreComponent} from './pages/explore/explore.component';
-import {RecipeInfoComponent} from './components/recipe-info/recipe-info.component';
-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 {MixEditorComponent} from './components/mix-editor/mix-editor.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 {ColorsRoutingModule} from './colors-routing.module'
+import {SharedModule} from '../shared/shared.module'
+import {ListComponent} from './pages/list/list.component'
+import {AddComponent} from './pages/add/add.component'
+import {EditComponent} from './pages/edit/edit.component'
+import {MatExpansionModule} from '@angular/material/expansion'
+import {FormsModule} from '@angular/forms'
+import {ExploreComponent} from './pages/explore/explore.component'
+import {RecipeInfoComponent} from './components/recipe-info/recipe-info.component'
+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 {MixEditorComponent} from './components/mix-editor/mix-editor.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'
 
 
 @NgModule({
-    declarations: [ListComponent, AddComponent, EditComponent, ExploreComponent, RecipeInfoComponent, MixTableComponent, StepListComponent, StepTableComponent, MixEditorComponent, UnitSelectorComponent, MixAddComponent, MixEditComponent, ImagesEditorComponent, MixesCardComponent],
-    exports: [
-        UnitSelectorComponent
-    ],
-    imports: [
-        ColorsRoutingModule,
-        SharedModule,
-        MatExpansionModule,
-        FormsModule,
-        MatSortModule
-    ]
+  declarations: [ListComponent, AddComponent, EditComponent, ExploreComponent, RecipeInfoComponent, MixTableComponent, StepListComponent, StepTableComponent, MixEditorComponent, UnitSelectorComponent, MixAddComponent, MixEditComponent, ImagesEditorComponent, MixesCardComponent],
+  exports: [
+    UnitSelectorComponent
+  ],
+  imports: [
+    ColorsRoutingModule,
+    SharedModule,
+    MatExpansionModule,
+    FormsModule,
+    MatSortModule
+  ]
 })
 export class ColorsModule {
 }
diff --git a/src/app/modules/shared/components/employee-info/employee-menu.component.html b/src/app/modules/shared/components/employee-info/employee-menu.component.html
index ee806f0..4830558 100644
--- a/src/app/modules/shared/components/employee-info/employee-menu.component.html
+++ b/src/app/modules/shared/components/employee-info/employee-menu.component.html
@@ -22,7 +22,7 @@
 
   <button
     *ngIf="!authenticated && !employeeInGroup"
-    routerLink="/account/logout">
+    (click)="openLogout()">
     Connexion
   </button>
 
@@ -31,14 +31,14 @@
       *ngIf="!authenticated && employeeInGroup"
       mat-list-item
       class="employee-menu-item-login"
-      routerLink="/account/login">
+      (click)="openLogin()">
       Connexion
     </button>
     <button
       *ngIf="authenticated"
       mat-list-item
       class="employee-menu-item-logout"
-      routerLink="/account/logout">
+      (click)="openLogout()">
       Déconnexion
     </button>
   </mat-action-list>
diff --git a/src/app/modules/shared/components/employee-info/employee-menu.component.ts b/src/app/modules/shared/components/employee-info/employee-menu.component.ts
index 9224304..70263c3 100644
--- a/src/app/modules/shared/components/employee-info/employee-menu.component.ts
+++ b/src/app/modules/shared/components/employee-info/employee-menu.component.ts
@@ -1,8 +1,10 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {AppState} from "../../app-state";
-import {Employee} from "../../model/employee";
-import {Subject} from "rxjs";
-import {takeUntil} from "rxjs/operators";
+import {Component, OnDestroy, OnInit} from '@angular/core'
+import {AppState} from '../../app-state'
+import {Employee} from '../../model/employee'
+import {Subject} from 'rxjs'
+import {takeUntil} from 'rxjs/operators'
+import {UrlUtils} from '../../utils/url.utils'
+import {ActivatedRoute, Router} from '@angular/router'
 
 @Component({
   selector: 'cre-employee-menu',
@@ -16,10 +18,14 @@ export class EmployeeMenuComponent implements OnInit, OnDestroy {
   menuEnabled = false
 
   private destroy$ = new Subject<boolean>()
+  private urlUtils: UrlUtils
 
   constructor(
-    public appState: AppState
+    private appState: AppState,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
   ) {
+    this.urlUtils = new UrlUtils(activatedRoute, router)
   }
 
   ngOnInit(): void {
@@ -36,6 +42,16 @@ export class EmployeeMenuComponent implements OnInit, OnDestroy {
     this.destroy$.complete()
   }
 
+  openLogin() {
+    this.urlUtils.navigateTo('/account/login')
+    this.menuEnabled = false
+  }
+
+  openLogout() {
+    this.urlUtils.navigateTo('/account/logout')
+    this.menuEnabled = false
+  }
+
   private authenticationState(authenticated: boolean, employee: Employee) {
     this.authenticated = authenticated
     this.employee = employee
diff --git a/src/app/modules/shared/components/header/header.component.ts b/src/app/modules/shared/components/header/header.component.ts
index 04fd7ba..9a27af8 100644
--- a/src/app/modules/shared/components/header/header.component.ts
+++ b/src/app/modules/shared/components/header/header.component.ts
@@ -15,7 +15,8 @@ export class HeaderComponent extends SubscribingComponent {
   links: HeaderLink[] = [
     {route: '/color', title: 'Couleurs', requiredPermission: EmployeePermission.VIEW_RECIPES},
     {route: '/catalog', title: 'Catalogue', requiredPermission: EmployeePermission.VIEW_CATALOG},
-    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS}
+    {route: '/misc', title: 'Autres', enabled: true},
+    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS},
   ]
   _activeLink = this.links[0].route
 
@@ -46,10 +47,10 @@ export class HeaderComponent extends SubscribingComponent {
     )
 
     // Auth status
-    this.updateEnabledLinks(this.appState.authenticatedEmployee)
+    this.updateEnabledLinks()
     this.subscribe(
       this.appState.authenticatedUser$,
-      authentication => this.updateEnabledLinks(authentication.authenticatedUser)
+      () => this.updateEnabledLinks()
     )
   }
 
@@ -70,10 +71,14 @@ export class HeaderComponent extends SubscribingComponent {
     return this._activeLink
   }
 
-  private updateEnabledLinks(employee: Employee) {
+  private updateEnabledLinks() {
     this.links.forEach(l => {
       if (l.requiredPermission) {
-        l.enabled = employee && employee.permissions.indexOf(l.requiredPermission) >= 0
+        l.enabled = this.accountService.hasPermission(l.requiredPermission)
+      }
+
+      if (l.route === '/misc') {
+        l.enabled = this.accountService.hasPermission(EmployeePermission.GENERATE_TOUCH_UP_KIT)
       }
     })
   }
diff --git a/src/app/modules/shared/model/employee.ts b/src/app/modules/shared/model/employee.ts
index 050c3b7..b0ecdcb 100644
--- a/src/app/modules/shared/model/employee.ts
+++ b/src/app/modules/shared/model/employee.ts
@@ -25,8 +25,6 @@ export enum EmployeePermission {
   VIEW_USERS = 'VIEW_USERS',
   VIEW_CATALOG = 'VIEW_CATALOG',
 
-  PRINT_MIXES = 'PRINT_MIXES',
-
   EDIT_RECIPES_PUBLIC_DATA = 'EDIT_RECIPES_PUBLIC_DATA',
   EDIT_RECIPES = 'EDIT_RECIPES',
   EDIT_MATERIALS = 'EDIT_MATERIALS',
@@ -42,8 +40,10 @@ export enum EmployeePermission {
   REMOVE_USERS = 'REMOVE_USERS',
   REMOVE_CATALOG = 'REMOVE_CATALOG',
 
+  PRINT_MIXES = 'PRINT_MIXES',
   ADD_TO_INVENTORY = 'ADD_TO_INVENTORY',
   DEDUCT_FROM_INVENTORY = 'DEDUCT_FROM_INVENTORY',
+  GENERATE_TOUCH_UP_KIT = 'GENERATE_TOUCH_UP_KIT',
 
   ADMIN = 'ADMIN'
 }
diff --git a/src/app/modules/shared/service/touchupkit.service.ts b/src/app/modules/shared/service/touchupkit.service.ts
new file mode 100644
index 0000000..5b6a2d0
--- /dev/null
+++ b/src/app/modules/shared/service/touchupkit.service.ts
@@ -0,0 +1,11 @@
+import {Injectable} from '@angular/core'
+import {environment} from '../../../../environments/environment'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TouchupkitService {
+  generateJobPdfDocument(job: string) {
+    window.open(`${environment.apiUrl}/touchup?job=${job}`, '_blank')
+  }
+}
diff --git a/src/app/pages/others/misc.component.html b/src/app/pages/others/misc.component.html
new file mode 100644
index 0000000..2c65c9d
--- /dev/null
+++ b/src/app/pages/others/misc.component.html
@@ -0,0 +1,2 @@
+<cre-nav [links]="links"></cre-nav>
+<router-outlet></router-outlet>
diff --git a/src/app/pages/others/misc.component.sass b/src/app/pages/others/misc.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/others/misc.component.ts b/src/app/pages/others/misc.component.ts
new file mode 100644
index 0000000..d6f99ea
--- /dev/null
+++ b/src/app/pages/others/misc.component.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core'
+import {SubMenuComponent} from '../../modules/shared/components/sub-menu/sub-menu.component'
+import {NavLink} from '../../modules/shared/components/nav/nav.component'
+import {EmployeePermission} from '../../modules/shared/model/employee'
+
+@Component({
+  selector: 'cre-others',
+  templateUrl: './misc.component.html',
+  styleUrls: ['./misc.component.sass']
+})
+export class MiscComponent extends SubMenuComponent{
+  links: NavLink[] = [
+    {route: '/misc/touchupkit', title: 'Kits de retouche', permission: EmployeePermission.GENERATE_TOUCH_UP_KIT}
+  ]
+}