Passage en version 12 + image docker OK

Dockerfile

@@ -1,20 +1,25 @@
 ## STEP 1 BUILD ##
-FROM node:17.0.1-alpine AS build
+FROM node:16.13-alpine AS build
 
-WORKDIR /dist/src/app
+RUN mkdir -p /app
+
+WORKDIR /app
 
 RUN npm cache clean --force
 
-COPY . .
+COPY package*.json /app
+
+RUN npm install --only=prod
+RUN npm install @angular/cli@12.2.12
 
-RUN npm install
+COPY . /app
 
-RUN npm run build --prod
+RUN npm run build-prod
 
 ## STEP 2 DEPLOY ##
 FROM nginx:1.21.3 AS ngi
 
-COPY --from=build /dist/src/app/dist/EPAClient /usr/share/nginx/html
+COPY --from=build /app/dist/EPAClient /usr/share/nginx/html
 COPY /nginx.conf  /etc/nginx/conf.d/default.conf
 
-EXPOSE 80
+EXPOSE 4200 49153

angular.json

@@ -18,7 +18,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -26,7 +25,13 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -56,7 +61,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -122,8 +128,8 @@
     }
   },
   "schematics": {
-    "@schematics/angular:component": {
-      "styleext": "scss"
+        "@schematics/angular:application": {
+          "strict": true
         }
   },
   "defaultProject": "EPAClient"

package.json

@@ -3,8 +3,9 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --Host 0.0.0.0 --poll",
     "build": "ng build",
+    "build-prod": "ng build --configuration production",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -12,34 +13,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "^5.0.3",
-    "@angular/animations": "~11.1.2",
-    "@angular/cdk": "^11.1.2",
-    "@angular/common": "~11.1.2",
-    "@angular/compiler": "~11.1.2",
-    "@angular/core": "~11.1.2",
-    "@angular/forms": "~11.1.2",
-    "@angular/material": "^11.1.2",
-    "@angular/platform-browser": "~11.1.2",
-    "@angular/platform-browser-dynamic": "~11.1.2",
-    "@angular/router": "~11.1.2",
+    "@angular-material-components/datetime-picker": "^6.0.3",
+    "@angular/animations": "~12.2.12",
+    "@angular/cdk": "^12.2.12",
+    "@angular/common": "~12.2.12",
+    "@angular/compiler": "~12.2.12",
+    "@angular/core": "~12.2.12",
+    "@angular/forms": "~12.2.12",
+    "@angular/material": "^12.2.12",
+    "@angular/platform-browser": "~12.2.12",
+    "@angular/platform-browser-dynamic": "~12.2.12",
+    "@angular/router": "~12.2.12",
     "angular-oauth2-oidc": "^10.0.3",
     "rxjs": "~6.6.3",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.11.3"
+    "tslib": "^2.3.1",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1101.4",
-    "@angular/cli": "~11.1.4",
-    "@angular/compiler-cli": "~11.1.2",
-    "@compodoc/compodoc": "^1.1.11",
+    "@angular-devkit/build-angular": "~12.2.12",
+    "@angular/cli": "~12.2.12",
+    "@angular/compiler-cli": "~12.2.12",
+    "@compodoc/compodoc": "^1.1.15",
     "@types/jasmine": "~3.6.3",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^14.14.25",
     "codelyzer": "^6.0.1",
-    "jasmine-core": "~3.6.0",
+    "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~6.0.0",
-    "karma": "~6.1.0",
+    "karma": "~6.3.7",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.1",
@@ -47,6 +48,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~9.1.1",
     "tslint": "^6.1.3",
-    "typescript": "~4.1.3"
+    "typescript": "~4.3.5"
   }
 }

src/app/app-routing.module.ts

@@ -2,15 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { Routes } from '@angular/router';
+import { AuthGuard } from './commun/auth/auth.guard';
+import { paths_collaborateurs, paths_demandes_delegation, paths_demandes_formation, paths_ep, paths_saisie_ep, paths_formation, paths_referents, paths_engagements, paths_notes, paths_home } from './commun/utils/paths';
+import { Role } from './commun/utils/roles';
 
 import { HomeComponent } from './home/';
 
-import { AuthGuard } from './shared/auth/auth.guard';
 
-import { paths_collaborateurs, paths_demandes_delegation, paths_demandes_formation,
-  paths_ep, paths_saisie_ep, paths_formation, paths_home, paths_referents, paths_engagements, paths_notes } from './shared/utils/paths';
-
-import { Role  } from './shared/utils/roles';
 
 /**
   * L'ensemble des routes du client Angular

src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { CollaborateursService } from '@shared/api-swagger/api/api'
-import { AuthService } from '@shared/auth/auth.service';
 import { Subscription } from 'rxjs';
+import { AuthService } from './commun/auth/auth.service';
 
-import { cles } from "@shared/utils/cles"
+import { CollaborateursService } from './commun/services/collaborateurs.service';
+import { cles } from './commun/utils/cles';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, DoBootstrap } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
 import { registerLocaleData } from '@angular/common';
@@ -11,38 +11,25 @@ registerLocaleData(localeFr, 'fr');
 import { AppComponent } from './app.component';
 
 import { AppRoutingModule } from './app-routing.module';
-import { ApiModule } from '@shared/api-swagger'
 
-import { HomeModule } from './home';
 import { CollaborateursModule } from './collaborateurs';
-import { ReferentsModule } from './referents';
-import { FormationsModule } from './formations';
-import { DemandesFormationModule } from './demandes-formation';
-import { DemandesDelegationModule } from './demandes-delegation';
-import { EpSaisieModule } from "./ep-saisie";
-import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
-import { EpModule } from "./ep"
-import { AuthModule } from '@shared/auth/auth.module';
-
-import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
-import { EngagementsModule } from './engagements';
-import { NotesModule } from './notes';
-import { FilterModule } from "@shared/filter/filter.module";
+
+import { CommunModule } from './commun/commun-api.module';
+import { CommunUiModule } from './commun/commun-ui.module';
+
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule, BrowserAnimationsModule,
-    AuthModule.forRoot(), AppRoutingModule,
-    HttpClientModule, ApiModule,
-    HomeModule, CollaborateursModule,
-    ReferentsModule, FormationsModule,
-    DemandesFormationModule, DemandesDelegationModule,
-    EpSaisieModule, NotesModule, EpModule, 
-    MatTablesModule, FilterModule,
-    AffichageDetailsCollaborateurModule, EngagementsModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    HttpClientModule,
+    CollaborateursModule,
+    CommunModule,
+    CommunUiModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.theme.scss

@@ -1,6 +1,11 @@
 // -----------------------------------------------------------------------------------------------------
+@use '~@angular/material' as mat;
 // @ Custom color maps
 // -----------------------------------------------------------------------------------------------------
+
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
+
 $navy-app-theme: (
     50: #ECECEE,
     100: #C5C6CB,
@@ -17,20 +22,20 @@ $navy-app-theme: (
     A400: #5C616F,
     A700: #2D323E,
     contrast: (
-        50: $dark-primary-text,
-        100: $dark-primary-text,
-        200: $dark-primary-text,
-        300: $light-primary-text,
-        400: $light-primary-text,
-        500: $light-primary-text,
-        600: $light-primary-text,
-        700: $light-primary-text,
-        800: $light-primary-text,
-        900: $light-primary-text,
-        A100: $dark-primary-text,
-        A200: $light-primary-text,
-        A400: $light-primary-text,
-        A700: $light-primary-text,
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: white,
+        500: white,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: white,
+        A700: $white-87-opacity,
     )
 );
 
@@ -50,20 +55,21 @@ $apside-primary-app-theme: (
     A400: #5C616F,
     A700: #2D323E,
     contrast: (
-        50: $dark-primary-text,
-        100: $dark-primary-text,
-        200: $dark-primary-text,
-        300: $light-primary-text,
-        400: $light-primary-text,
-        500: $light-primary-text,
-        600: $light-primary-text,
-        700: $light-primary-text,
-        800: $light-primary-text,
-        900: $light-primary-text,
-        A100: $dark-primary-text,
-        A200: $light-primary-text,
-        A400: $light-primary-text,
-        A700: $light-primary-text,
+        0: $black-87-opacity,
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: $black-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: $white-87-opacity,
     )
 );
  
@@ -72,19 +78,19 @@ $apside-primary-app-theme: (
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-$default-primary-palette: mat-palette($navy-app-theme);
-$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
-$default-warn-palette: mat-palette($mat-red);
+$default-primary-palette: mat.define-palette($navy-app-theme);
+$default-accent-palette: mat.define-palette(mat.$light-blue-palette, 600, 400, 700);
+$default-warn-palette: mat.define-palette(mat.$red-palette);
 
 // Create the Material theme object
-$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
+$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
 
 // Add ".theme-default" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
 .theme-default {
 
     // Create an Angular Material theme from the $theme map
-    @include angular-material-theme($theme);
+    @include mat.all-component-themes($theme);
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -92,19 +98,19 @@ $theme: mat-light-theme($default-primary-palette, $default-accent-palette, $defa
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme);
-$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
-$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
+$blue-gray-dark-theme-primary-palette: mat.define-palette($navy-app-theme);
+$blue-gray-dark-theme-accent-palette: mat.define-palette(mat.$blue-gray-palette);
+$blue-gray-dark-theme-warn-palette: mat.define-palette(mat.$red-palette);
 
 // Create the Material theme object
-$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
+$blue-gray-dark-theme: mat.define-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
 
 // Add ".theme-blue-gray-dark" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
 .theme-blue-gray-dark {
 
     // Generate the Angular Material theme
-    @include angular-material-theme($blue-gray-dark-theme);
+    @include mat.all-component-themes($blue-gray-dark-theme);
 }
 
 
@@ -113,13 +119,13 @@ $blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $bl
 // -----------------------------------------------------------------------------------------------------
 
 // Angular Material typography
-$typography: mat-typography-config(
+$typography: mat.define-typography-config(
     $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
-    $title: mat-typography-level(20px, 32px, 600),
-    $body-2: mat-typography-level(14px, 24px, 600),
-    $button: mat-typography-level(14px, 14px, 600),
-    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
+    $title: mat.define-typography-level(20px, 32px, 600),
+    $body-2: mat.define-typography-level(14px, 24px, 600),
+    $button: mat.define-typography-level(14px, 14px, 600),
+    $input: mat.define-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 );
 
 // Setup the typography
-@include angular-material-typography($typography);
+@include mat.all-component-typographies($typography);

src/app/collaborateurs/collaborateurs.component.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
 
-
-import { collaborateurTypeRecherche } from "@shared/utils/cles";
 import { Router } from '@angular/router';
+import { collaborateurTypeRecherche } from 'app/commun/utils/cles';
 
 /**
     * Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.

src/app/collaborateurs/collaborateurs.module.ts

@@ -3,9 +3,6 @@ import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { MaterialModule } from "@shared/angular-material/angular-material.module";
-import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
-
 import { CollaborateursComponent } from "./collaborateurs.component";
 import { DetailsCollaborateurComponent } from "./details-collaborateur/details-collaborateur.component";
 
@@ -13,15 +10,17 @@ import { EvaluationComponent } from "./formations-collaborateur/details-evaluati
 import { EditEvaluationComponent } from "./formations-collaborateur/edit-evaluation/edit-evaluation.component";
 import { FormationsCollaboateurComponent } from "./formations-collaborateur/formations-collaborateur.component";
 
-import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
-import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
+import { CommunUiModule } from "app/commun/commun-ui.module";
 
 
 @NgModule({
   declarations: [
-    CollaborateursComponent, DetailsCollaborateurComponent,
-    DetailsCollaborateurComponent, EvaluationComponent, EditEvaluationComponent,
+    CollaborateursComponent,
+    DetailsCollaborateurComponent,
+    DetailsCollaborateurComponent,
+    EvaluationComponent,
+    EditEvaluationComponent,
     FormationsCollaboateurComponent
   ],
   exports: [
@@ -30,12 +29,9 @@ import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-c
   imports: [
     //FormsModule,
     CommonModule,
+    CommunUiModule,
     FormsModule,
     ReactiveFormsModule,
-    MaterialModule,
-    NavMenuModule,
-    MatTablesModule,
-    AffichageDetailsCollaborateurModule,
     CollaborateursRoutingModule,
     RouterModule
   ],

src/app/collaborateurs/collaborateurs.routing.module.ts

@@ -6,11 +6,9 @@ import { DetailsCollaborateurComponent } from "./details-collaborateur/details-c
 import { FormationsCollaboateurComponent } from "./formations-collaborateur/formations-collaborateur.component";
 import { EvaluationComponent } from './formations-collaborateur/details-evaluation/evaluation.component';
 import { EditEvaluationComponent } from './formations-collaborateur/edit-evaluation/edit-evaluation.component';
-
-import { paths_collaborateurs } from '../shared/utils/paths';
-
-import { AuthGuard } from '../shared/auth/auth.guard';
-import { Role  } from '../shared/utils/roles';
+import { AuthGuard } from 'app/commun/auth/auth.guard';
+import { paths_collaborateurs } from 'app/commun/utils/paths';
+import { Role } from 'app/commun/utils/roles';
 
 
 const routes: Routes = [

src/app/commun/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts

@@ -2,9 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-import { MaterialModule } from "../angular-material/angular-material.module";
-import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur";
-import { MatTablesModule } from '@shared/mat-tables/mat-tables.module';
+import { AffichageDetailsCollaborateurComponent } from "app/commun/affichage-details-collaboarteur/affichage-details-collaborateur";
 import { DialogAssignationRapideReferentComponent, DialogAssignationRapideCollaborateursComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
 import { ProchainEpComponent } from "./prochain-ep/prochain-ep.component";
 import { RouterModule } from "@angular/router";
@@ -12,16 +10,13 @@ import { RouterModule } from "@angular/router";
 
 @NgModule({
   declarations: [ 
-    AffichageDetailsCollaborateurComponent, DialogAssignationRapideReferentComponent,
-    DialogAssignationRapideCollaborateursComponent, ProchainEpComponent
+
   ],
   imports: [
-    MaterialModule,
     CommonModule,
     FormsModule,
-    MatTablesModule,
     RouterModule
   ],
-  exports: [AffichageDetailsCollaborateurComponent]
+  exports: []
 })
 export class AffichageDetailsCollaborateurModule {}

src/app/commun/affichage-details-collaboarteur/affichage-details-collaborateur.ts

@@ -1,10 +1,13 @@
 import { Component, Input, OnInit } from "@angular/core";
-import { CollaborateurDTO, CollaborateursService, ParticipationFormationDTO, ParticipationsFormationsService } from "@shared/api-swagger";
 import { Subscription } from "rxjs";
-import { collaborateurTypeRecherche, epTypeRecherche } from "@shared/utils/cles";
 import { MatDialog } from "@angular/material/dialog";
 import { DialogAssignationRapideReferentComponent, DialogAssignationRapideCollaborateursComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
 import { Router } from "@angular/router";
+import { CollaborateurDTO } from "../model/collaborateurDTO";
+import { ParticipationFormationDTO } from "../model/participationFormationDTO";
+import { CollaborateursService } from "../services/collaborateurs.service";
+import { ParticipationsFormationsService } from "../services/participationsFormations.service";
+import { collaborateurTypeRecherche, epTypeRecherche } from "../utils/cles";
 
 
 @Component({

src/app/commun/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide.component.ts

@@ -1,8 +1,11 @@
 import {Component, Inject, OnInit } from "@angular/core";
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import { MatSnackBar } from "@angular/material/snack-bar";
-import { CollaborateurDTO, CollaborateursService, ReferentEPDTO, ReferentsEPService } from "@shared/api-swagger";
-import { collaborateurTypeRecherche,  } from "@shared/utils/cles";
+import { CollaborateurDTO } from "app/commun/model/collaborateurDTO";
+import { ReferentEPDTO } from "app/commun/model/referentEPDTO";
+import { CollaborateursService } from "app/commun/services/collaborateurs.service";
+import { ReferentsEPService } from "app/commun/services/referentsEP.service";
+import { collaborateurTypeRecherche } from "app/commun/utils/cles";
 import { Subscription } from "rxjs";
 
 @Component({

src/app/commun/affichage-details-collaboarteur/prochain-ep/prochain-ep.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from "@angular/core"
-import { affichageStatut, EpInformationDTO, EpService, StatutEp } from "@shared/api-swagger";
+import { affichageStatut, EpInformationDTO, StatutEp } from "app/commun/model/models";
+import { EpService } from "app/commun/services/ep.service";
 import { Subscription } from "rxjs";
 
 

src/app/commun/commun-api.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemandesFormationService } from './services/demandesformation.service';
+import { CollaborateursService } from './services/collaborateurs.service';
+import { DemandesDelegationService } from './services/demandesDelegation.service';
+import { DemandesEPIService } from './services/demandesEPI.service';
+import { EngagementsService } from './services/engagements.service';
+import { EpService } from './services/ep.service';
+import { FormationsService } from './services/formations.service';
+import { NotesService } from './services/notes.service';
+import { ParticipationsFormationsService } from './services/participationsFormations.service';
+import { ReferentsEPService } from './services/referentsEP.service';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ],
+  providers: [
+    CollaborateursService,
+    DemandesDelegationService,
+    DemandesEPIService,
+    DemandesFormationService,
+    EngagementsService,
+    EpService,
+    FormationsService,
+    NotesService,
+    ParticipationsFormationsService,
+    ReferentsEPService
+  ]
+})
+export class CommunModule {}

src/app/commun/commun-ui.module.ts

@@ -0,0 +1,166 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSortModule } from '@angular/material/sort';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTabsModule } from '@angular/material/tabs';
+import { NgxMatDatetimePickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatListModule } from '@angular/material/list';
+import { MatNativeDateModule, MatOption, MatOptionModule } from '@angular/material/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatRadioModule } from '@angular/material/radio';
+import { CollaborateursTableComponent } from './mat-tables/collaborateurs-table/collaborateurs.table';
+import { DemandesFormationTableComponent } from './mat-tables/demandes-formation-table/demandes-formation.table';
+import { EngagementTableComponent } from './mat-tables/engagements-table/engagements-table';
+import { EpTableComponent } from './mat-tables/ep-table/ep-table';
+import { FormationsTableComponent } from './mat-tables/formations-table/formations.table';
+import { ParticipationsFormationTableComponent } from './mat-tables/participations-formation-table/participations-formation.table';
+import { FilterModule } from './filter/filter.module';
+import { AuthModule } from './auth/auth.module';
+import { NavMenuComponent } from './nav-menu/nav-menu.component';
+import { NavMenuAssistanteComponent } from './nav-menu/nav-menu-assistante/nav-menu-assistante.component';
+import { NavMenuCollaborateurComponent } from './nav-menu/nav-menu-collaborateur/nav-menu-collaborateur.component';
+import { NavMenuCommercialComponent } from './nav-menu/nav-menu-commercial/nav-menu-commercial.component';
+import { NavMenuRHComponent } from './nav-menu/nav-menu-rh/nav-menu-rh.component';
+import { RouterModule } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CheckboxFilterComponent } from './filter/checkbox-filter/checkbox-filter';
+import { SelectFilterComponent } from './filter/select-filter/select-filter';
+import { AffichageDetailsCollaborateurComponent } from './affichage-details-collaboarteur/affichage-details-collaborateur';
+import { DialogAssignationRapideReferentComponent, DialogAssignationRapideCollaborateursComponent } from './affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide.component';
+import { ProchainEpComponent } from './affichage-details-collaboarteur/prochain-ep/prochain-ep.component';
+
+
+
+@NgModule({
+  imports: [
+    // Materials
+    MatCardModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatTabsModule,
+    MatFormFieldModule,
+    NgxMatDatetimePickerModule,
+    MatDatepickerModule,
+    NgxMatNativeDateModule,
+    MatNativeDateModule,
+    MatListModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatStepperModule,
+    MatChipsModule,
+    MatSnackBarModule,
+    MatSlideToggleModule,
+    MatRadioModule,
+    MatOptionModule,
+
+    // Forms Angular
+    FormsModule,
+    ReactiveFormsModule,
+
+    // Common angular
+    CommonModule,
+
+    // Module commun
+    FilterModule,
+    RouterModule,
+    AuthModule.forRoot()
+  ],
+  exports: [
+    // Materials
+    MatCardModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatTabsModule,
+    MatFormFieldModule,
+    NgxMatDatetimePickerModule,
+    MatDatepickerModule,
+    NgxMatNativeDateModule,
+    MatNativeDateModule,
+    MatListModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatStepperModule,
+    MatChipsModule,
+    MatSnackBarModule,
+    MatSlideToggleModule,
+    MatRadioModule,
+    MatOptionModule,
+
+    // Module commun
+    FilterModule,
+
+    // Component commun
+    NavMenuComponent,
+    ProchainEpComponent,
+    DialogAssignationRapideReferentComponent,
+    AffichageDetailsCollaborateurComponent,
+
+    // Table commun
+    CollaborateursTableComponent,
+    EngagementTableComponent,
+    FormationsTableComponent,
+    EpTableComponent,
+    ParticipationsFormationTableComponent,
+    DemandesFormationTableComponent
+
+  ],
+  declarations: [
+
+    // Component commun
+    /// Filter
+    CheckboxFilterComponent,
+    SelectFilterComponent,
+
+    /// Nav menu
+    NavMenuComponent, 
+    NavMenuAssistanteComponent, 
+    NavMenuCollaborateurComponent,
+    NavMenuCommercialComponent, 
+    NavMenuRHComponent,
+
+    /// Affichage collab
+    AffichageDetailsCollaborateurComponent,
+    DialogAssignationRapideReferentComponent,
+    DialogAssignationRapideCollaborateursComponent,
+    ProchainEpComponent,
+
+    // Table commun
+    CollaborateursTableComponent,
+    EngagementTableComponent,
+    FormationsTableComponent,
+    EpTableComponent,
+    ParticipationsFormationTableComponent,
+    DemandesFormationTableComponent,
+  ],
+  entryComponents: [
+    NavMenuComponent,
+    DialogAssignationRapideReferentComponent
+  ]
+})
+export class CommunUiModule { }

src/app/commun/filter/checkbox-filter/checkbox-filter.ts

@@ -1,7 +1,5 @@
 import { Component, Input, Output, EventEmitter, OnInit, OnChanges  } from "@angular/core";
-
-import { SelectedElement } from "@shared/filter/selected-element";
-
+import { SelectedElement } from "../selected-element";
 
 
 

src/app/commun/filter/filter.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { SelectFilterComponent } from "./select-filter/select-filter";
+import { CheckboxFilterComponent } from "./checkbox-filter/checkbox-filter";
+
+
+@NgModule({
+  declarations: [ 
+    
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule
+    ],
+  exports: [
+
+  ]
+})
+export class FilterModule {}

src/app/commun/filter/select-filter/select-filter.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from "@angular/core";
-import { SelectedElement } from "@shared/filter/selected-element";
+import { SelectedElement } from "../selected-element";
 
 @Component({
     selector: "select-filter",

src/app/commun/mat-tables/collaborateurs-table/collaborateurs.table.ts

@@ -4,9 +4,10 @@ import { Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
 
-import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
-import { CollaborateursService } from "@shared/api-swagger/api/api";
-import { cles, collaborateurTypeRecherche } from "@shared/utils/cles";
+import { BusinessUnitDTO } from "app/commun/model/businessUnitDTO";
+import { CollaborateurDTO } from "app/commun/model/collaborateurDTO";
+import { CollaborateursService } from "app/commun/services/collaborateurs.service";
+import { cles, collaborateurTypeRecherche } from "app/commun/utils/cles";
 
 
 @Component({

src/app/commun/mat-tables/demandes-formation-table/demandes-formation.table.ts

@@ -1,7 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { MatTableDataSource } from "@angular/material/table";
-import { BusinessUnitDTO, CollaborateurDTO, DemandesFormationService, EtatDemande, afficherEtatDemande, DemandeFormationDTO, StatutEp, estEPEnCours } from "@shared/api-swagger";
-import { cles } from "@shared/utils/cles";
+import { BusinessUnitDTO } from "app/commun/model/businessUnitDTO";
+import { CollaborateurDTO } from "app/commun/model/collaborateurDTO";
+import { DemandeFormationDTO } from "app/commun/model/demandeFormationDTO";
+import { EtatDemande, afficherEtatDemande } from "app/commun/model/etatDemande";
+import { StatutEp, estEPEnCours } from "app/commun/model/statutEp";
+import { DemandesFormationService } from "app/commun/services/demandesformation.service";
+import { cles } from "app/commun/utils/cles";
 import { DemandesFormationsRoutingModule } from "app/demandes-formation/demandes-formation.routing.module";
 
 import { Subscription } from "rxjs";

src/app/commun/mat-tables/engagements-table/engagements-table.ts

@@ -1,7 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { MatTableDataSource } from "@angular/material/table";
-import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
-import { cles, engagementTypeRecherche } from "@shared/utils/cles";
+import { BusinessUnitDTO } from "app/commun/model/businessUnitDTO";
+import { CollaborateurDTO } from "app/commun/model/collaborateurDTO";
+import { EngagementDTO } from "app/commun/model/engagementDTO";
+import { EtatEngagement, afficherEtatEngagement } from "app/commun/model/etatEngagement";
+import { EngagementsService } from "app/commun/services/engagements.service";
+import { cles } from "app/commun/utils/cles";
 import { EngagementsRoutingModule } from "app/engagements/engagements.routing.module";
 import { Subscription } from "rxjs";
 

src/app/commun/mat-tables/ep-table/ep-table.ts

@@ -1,8 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { MatSlideToggleChange } from "@angular/material/slide-toggle";
 import { MatTableDataSource } from "@angular/material/table";
-import { affichageStatut, BusinessUnitDTO, CollaborateurDTO, EpInformationDTO, EpService, estEnAttente, StatutEp, TypeEp } from "@shared/api-swagger";
-import { cles, epTypeRecherche } from "@shared/utils/cles";
+import { BusinessUnitDTO } from "app/commun/model/businessUnitDTO";
+import { CollaborateurDTO } from "app/commun/model/collaborateurDTO";
+import { EpInformationDTO } from "app/commun/model/epInformationDTO";
+import { StatutEp, affichageStatut, estEnAttente } from "app/commun/model/statutEp";
+import { EpService } from "app/commun/services/ep.service";
+import { epTypeRecherche, cles } from "app/commun/utils/cles";
 import { Subscription } from "rxjs";
 
 @Component({

src/app/commun/mat-tables/formations-table/formations.table.ts

@@ -4,9 +4,11 @@ import { Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
 
-import { CollaborateurDTO, FormationDetailsDTO, StatutFormationDTO } from '@shared/api-swagger/model/models'
-import { FormationsService } from "@shared/api-swagger/api/api";
-import { cles } from "@shared/utils/cles";
+import { CollaborateurDTO } from "app/commun/model/collaborateurDTO";
+import { FormationDetailsDTO } from "app/commun/model/formationDetailsDTO";
+import { StatutFormationDTO } from "app/commun/model/statutFormationDTO";
+import { FormationsService } from "app/commun/services/formations.service";
+import { cles } from "app/commun/utils/cles";
 
 
 @Component({

src/app/commun/mat-tables/participations-formation-table/participations-formation.table.ts

@@ -4,8 +4,9 @@ import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
 
-import { estEnAttente, estEPDisponible, ParticipationFormationDTO, StatutEp } from '@shared/api-swagger/model/models'
 import { DatePipe } from "@angular/common";
+import { ParticipationFormationDTO } from "app/commun/model/participationFormationDTO";
+import { StatutEp, estEnAttente, estEPDisponible } from "app/commun/model/statutEp";
 
 
 @Component({