Implémentation de l'ajout d'une nouvelle formation (sans la gestion d'erreur)

package-lock.json

@@ -200,6 +200,14 @@
         }
       }
     },
+    "@angular-material-components/datetime-picker": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-2.0.4.tgz",
+      "integrity": "sha512-3nXGFz7GXbFYeBI2/72rcmPFTWtcC1ERlgdkaY+65dFHXPIc8hKGv6o+JbtCoYPg7xmVCCy4xhmOgfd/CFGyOw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@angular/animations": {
       "version": "9.1.9",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.9.tgz",
@@ -4872,9 +4880,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",

package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-components/datetime-picker": "^2.0.4",
     "@angular/animations": "~9.1.9",
     "@angular/cdk": "^9.2.4",
     "@angular/common": "~9.1.9",

src/app/app.module.ts

@@ -2,11 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, DoBootstrap } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
 import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
+
 import { AppRoutingModule } from './app-routing.module';
 import { ApiModule } from '@shared/api-swagger'
 
@@ -33,20 +33,13 @@ let keycloakService: KeycloakService = new KeycloakService();
     AppComponent
   ],
   imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    KeycloakAngularModule,
-    AppRoutingModule,
-    HttpClientModule,
-    ApiModule,
-    HomeModule,
-    CollaborateursModule,
-    ReferentsModule,
-    FormationsModule,
-    DemandesFormationModule,
-    DemandesDelegationModule,
+    BrowserModule, BrowserAnimationsModule,
+    KeycloakAngularModule, AppRoutingModule,
+    HttpClientModule, ApiModule,
+    HomeModule, CollaborateursModule,
+    ReferentsModule, FormationsModule,
+    DemandesFormationModule, DemandesDelegationModule,
     EpSaisieModule
-
   ],
   providers: [
     {

src/app/formations/details-formation/formation.component.html

@@ -6,13 +6,18 @@
     <h3>Informations générales</h3>
     <button mat-raised-button *ngIf="formation.statut!=2">Modifier</button>
     <p>Etat : {{getStatut(formation.statut)}}</p>
-    <p>{{dateTexte}} {{formation.dateDebut | date:"dd/MM/yyyy"}}</p>
+    <p>{{dateTexte}} {{formation.dateDebut | date:'dd/MM/yyyy à hh:mm'}}</p>
     <p>Origine : {{formation.origine}}</p>
     <p>Organisme : {{ formation.organisme}}</p>
     <p>Mode formation : {{ formation.mode}}</p>
     <p>Type formation : {{ formation.type}}</p>
   </ng-container>
-  <ng-container>
+
+  <ng-container *ngIf="formation.participantsFormation == undefined || formation.participantsFormation.length==0">
+    <h3>Aucun participant</h3>
+  </ng-container>
+
+  <ng-container *ngIf="formation.participantsFormation != undefined && formation.participantsFormation.length > 0">
     <h3>Liste des participants</h3>
     <mat-table [dataSource]="dataSource">
 

src/app/formations/formations.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from '@angular/router';
 
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
 
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
@@ -25,7 +27,8 @@ import { FormationsRoutingModule } from './formations.routing.module';
     MaterialModule,
     NavMenuModule,
     RouterModule,
-    FormationsRoutingModule
+    FormationsRoutingModule,
+    ReactiveFormsModule
   ],
 })
 export class FormationsModule {}

src/app/formations/new-formation/new-formation.component.html

@@ -1,2 +1,72 @@
 <app-nav-menu></app-nav-menu>
 <h1> Nouvelle formation </h1>
+<form [formGroup]="formationForm" (ngSubmit)="ajouterFormation()">
+  <div>
+    <mat-form-field class="input">
+      <input matInput placeholder="Intitulé" formControlName="intitule">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input">
+      <input matInput placeholder="Origine" formControlName="origine">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input">
+      <input matInput placeholder="Organisme" formControlName="organisme">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field >
+      <input matInput [ngxMatDatetimePicker]="datedebut" placeholder="Date prévue" formControlName="dateDebut">
+      <mat-datepicker-toggle matSuffix [for]="datedebut"> </mat-datepicker-toggle>
+      <ngx-mat-datetime-picker #datedebut></ngx-mat-datetime-picker>
+    </mat-form-field>
+
+    <mat-form-field class="moveright">
+      <input matInput [matDatepicker]="datefin" placeholder="Date fin" formControlName="dateFin">
+      <mat-datepicker-toggle matSuffix [for]="datefin"> </mat-datepicker-toggle>
+      <mat-datepicker #datefin></mat-datepicker>
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input2">
+      <mat-label>Nombre de jours</mat-label>
+      <input matInput type="number" formControlName="jour" min=1 value="1">
+    </mat-form-field>
+
+    <mat-form-field class="moveright input2">
+      <mat-label>Nombre d'heures</mat-label>
+      <input matInput type="number" formControlName="heure" min="1" value="1">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input2">
+      <mat-label>Type formation</mat-label>
+      <mat-select formControlName="type">
+        <mat-option value="Interne">Interne</mat-option>
+        <mat-option value="Externe">Externe</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field class="moveright input2">
+      <mat-label>Mode formation</mat-label>
+      <mat-select formControlName="mode">
+        <mat-option value="Présentiel">Présentiel</mat-option>
+        <mat-option value="Conférence">Conférence</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-checkbox matInput formControlName="estCertifie">Certifiée</mat-checkbox>
+  </div>
+  <div>
+    <button mat-raised-button>Ajouter formation</button>
+  </div>
+</form>

src/app/formations/new-formation/new-formation.component.ts

@@ -1,15 +1,50 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+
+import { FormationModel } from "@shared/api-swagger/model/models";
+
+import { FormationsService } from "@shared/api-swagger/api/api";
 
 /**
     */
 @Component({
   selector: 'app-new-formation',
-  templateUrl: './new-formation.component.html'
+  templateUrl: './new-formation.component.html',
+  styleUrls: ['./new-formation.component.css']
 })
 export class NewFormationComponent implements OnInit {
+  formationSubscription: Subscription;
+  nouvelleformation: FormationModel;
+  formationForm = this.fb.group(
+    {
+      intitule: [""],
+      origine: [""],
+      statut : [""],
+      dateDebut: [""],
+      dateFin: [""],
+      heure: [""],
+      jour: [""],
+      organisme: [""],
+      mode: [""],
+      type: [""],
+      estCertifie: [""]
+    }
+  );
 
-  constructor() {}
+  constructor(private fb: FormBuilder, private service:FormationsService, private router: Router) { }
 
   ngOnInit() {
   }
+
+  ajouterFormation() {
+    this.nouvelleformation = this.formationForm.value;
+    this.formationSubscription = this.service.ajouterFormation(this.nouvelleformation).subscribe(
+      reponse => {
+        console.log(reponse);
+        this.router.navigate(['']);
+      }
+    );
+  }
 }

src/app/home/home-rh/home-rh.component.html

@@ -13,7 +13,7 @@
 
   <ng-container matColumnDef="date">
     <mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.datePrevu }}</mat-cell>
+    <mat-cell *matCellDef="let row">{{ row.datePrevu | date:'dd/MM/yyyy à hh:mm' }}</mat-cell>
   </ng-container>
 
   <!--<ng-container matColumnDef="origine">

src/app/home/home-rh/home-rh.component.ts

@@ -72,7 +72,10 @@ export class HomeRHComponent implements OnInit {
       formationDisplay = new DisplayFormation();
       formationDisplay.id = formation.id;
       formationDisplay.intitule = formation.intitule;
-      formationDisplay.nbParticipants = formation.participantsFormation.length;
+      formationDisplay.nbParticipants = 0;
+      if(formation.participantsFormation != undefined) {
+        formationDisplay.nbParticipants = formation.participantsFormation.length;
+      }
       formationDisplay.datePrevu = formation.dateDebut;
       formationDisplay.origine = formation.origine;
       formationDisplay.statut = formation.statut;

src/app/shared/angular-material/angular-material.module.ts

@@ -11,6 +11,15 @@ import {MatTableModule} from '@angular/material/table';
 import {MatSortModule} from '@angular/material/sort';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatTabsModule} from '@angular/material/tabs';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
+
+
+import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
+
 
 /**
   * Module qui va faire l'import et l'export de tous les componsants material design qui seront utilisés dans l'application.
@@ -21,14 +30,20 @@ import {MatTabsModule} from '@angular/material/tabs';
     MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
     MatInputModule, MatProgressSpinnerModule,
-    MatTabsModule
+    MatTabsModule, MatFormFieldModule,
+    NgxMatDatetimePickerModule, MatDatepickerModule,
+    NgxMatNativeDateModule, MatNativeDateModule,
+    MatCheckboxModule, MatSelectModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
     MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
     MatInputModule, MatProgressSpinnerModule,
-    MatTabsModule
+    MatTabsModule, MatFormFieldModule,
+    NgxMatDatetimePickerModule, MatDatepickerModule,
+    NgxMatNativeDateModule, MatNativeDateModule,
+    MatCheckboxModule, MatSelectModule
   ]
 })
 export class MaterialModule {}

src/app/shared/api-swagger/api/formations.service.ts

@@ -3,7 +3,7 @@
  * API qui sra utilisée afin de faire communiquer le client et le serveur ainsi que le serveur et la boîte noire.
  *
  * OpenAPI spec version: 1.2.0
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
@@ -57,7 +57,7 @@ export class FormationsService {
 
 
     /**
-     * 
+     *
      * Supprimer une formation
      * @param idFormation id formation
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
@@ -105,19 +105,19 @@ export class FormationsService {
     }
 
     /**
-     * 
+     *
      * ajouter une nouvelle formations
-     * @param body 
+     * @param body
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public formationsPost(body: FormationModel, observe?: 'body', reportProgress?: boolean): Observable<any>;
-    public formationsPost(body: FormationModel, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<any>>;
-    public formationsPost(body: FormationModel, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<any>>;
-    public formationsPost(body: FormationModel, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+    public ajouterFormation(body: FormationModel, observe?: 'body', reportProgress?: boolean): Observable<any>;
+    public ajouterFormation(body: FormationModel, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<any>>;
+    public ajouterFormation(body: FormationModel, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<any>>;
+    public ajouterFormation(body: FormationModel, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
 
         if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling formationsPost.');
+            throw new Error('Required parameter body was null or undefined when calling ajouterFormation.');
         }
 
         let headers = this.defaultHeaders;
@@ -159,7 +159,7 @@ export class FormationsService {
     }
 
     /**
-     * 
+     *
      * Récupérer une formation par son id
      * @param idFormation id formation
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
@@ -207,7 +207,7 @@ export class FormationsService {
     }
 
     /**
-     * 
+     *
      * recevoir la liste des formations
      * @param idBu id de la business unit à laquelle sont rattachées les données à récupérer
      * @param idAgence id de l&#x27;agence à laquelle sont rattachées les données à récupérer
@@ -263,7 +263,7 @@ export class FormationsService {
     }
 
     /**
-     * 
+     *
      * Récupérer les formations plannifié et/ou replannifié
      * @param idBu id de la business unit à laquelle sont rattachées les données à récupérer
      * @param idAgence id de l&#x27;agence à laquelle sont rattachées les données à récupérer
@@ -319,9 +319,9 @@ export class FormationsService {
     }
 
     /**
-     * 
+     *
      * update une formation
-     * @param body 
+     * @param body
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */