src/app/app.component.html

@@ -22,7 +22,6 @@
   }
 
   .toolbar {
-    position: absolute;
     top: 0;
     left: 0;
     right: 0;

src/app/app.component.ts

@@ -23,7 +23,6 @@ export class AppComponent implements OnInit  {
     ).subscribe(() => {
       const rt = this.getChild(this.activatedRoute);
       rt.data.subscribe(data => {
-        console.log(data);
         this.titleService.setTitle(data.title)});
     });
   }

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { CollaborateurDetailComponent } from './components/collaborateur/collabo
 import { BusinessunitComponent } from './components/businessunit/businessunit.component';
 import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
 import { BusinessunitDetailComponent } from './components/businessunit/businessunit-detail/businessunit-detail.component';
+import { AgenceDetailComponent } from './components/agence/agence-detail/agence-detail.component';
 
 @NgModule({
   declarations: [
@@ -24,10 +25,12 @@ import { BusinessunitDetailComponent } from './components/businessunit/businessu
     HomeComponent,
     AgenceComponent,
     AgenceEditComponent,
+    AgenceDetailComponent,
     CollaborateurDetailComponent,
     BusinessunitComponent,
     BusinessunitEditComponent,
-    BusinessunitDetailComponent
+    BusinessunitDetailComponent,
+
   ],
   imports: [
     BrowserModule,

src/app/components/agence/agence-detail/agence-detail.component.html

@@ -0,0 +1,8 @@
+<div class="row mb-2">
+
+  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+
+    <label for="agence-name" class="form-label">Nom</label>
+    <input class="form-control" id="agence-name" [(ngModel)]="agence.name" placeholder="name">
+  </div>
+</div>

src/app/components/agence/agence-detail/agence-detail.component.ts

@@ -0,0 +1,31 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Agence} from "../../../interfaces/agence";
+import {HttpClient} from "@angular/common/http";
+import {AgenceService} from "../../../services/agence.service";
+@Component({
+  selector: 'app-agence-detail',
+  templateUrl: './agence-detail.component.html',
+  styleUrls: ['./agence-detail.component.scss']
+})
+export class AgenceDetailComponent implements OnInit {
+
+  agences : Agence[] = [];
+  @Input()
+  agence = {} as Agence ;
+
+  constructor(
+    private http : HttpClient,
+    private agenceService: AgenceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getAgences();
+    this.getAgences();
+  }
+
+  getAgences():void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
+  }
+
+}

src/app/components/agence/agence-edit/agence-edit.component.html

@@ -3,21 +3,8 @@
 
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
-  <div>
-    <div class = mb-3>
-      <table>
-        <tr>
-          <th>Name</th>
-        </tr>
-        <tr>
-          <td>
-            <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
 
+  <app-agence-detail [agence]="agence"></app-agence-detail>
 
   <button (click)="goBack()">Retour</button>
   <button (click)="save()">Sauvegarder les changements</button>

src/app/components/agence/agence.component.html

@@ -1,30 +1,27 @@
 <div xmlns="">
   <h2 class = mb-4>Agences</h2>
 
-  <table class = mb-5>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
       <tr>
-      <th class="spaced">Name</th>
+        <th scope="col">ID</th>
+        <th scope="col">Nom</th>
       </tr>
+      </thead>
+      <tbody>
         <tr *ngFor="let agence of agences">
-      <td class="spaced"> {{agence.name}} </td>
-      <td class="spaced"> <a routerLink="{{agence.id}}"> Modifier </a></td>
+          <th scope="row">{{agence.id}}</th>
+          <td> {{agence.name}} </td>
+          <td> <a routerLink="{{agence.id}}"> Modifier </a></td>
         </tr>
+      </tbody>
     </table>
+  </div>
 
   <h3>Ajouter une agence : </h3>
 
-  <div class = mb-3>
-    <table>
-      <tr>
-        <th>Name</th>
-      </tr>
-      <tr>
-        <td>
-          <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
-        </td>
-      </tr>
-    </table>
-  </div>
+  <app-agence-detail [agence]="agence"></app-agence-detail>
 
   <button class="add-button" (click)="add(agence)">
     Ajouter une Agence

src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html

@@ -1,17 +1,20 @@
-<div class = mb-3>
-  <table>
-    <tr>
-      <th>Name</th>
-    </tr>
-    <tr>
-      <td>
-        <input id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="name">
-      </td>
-    </tr>
-  </table>
+<div class="row mb-4">
 
-  <select name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
-    <option value="">-- Choisissez l'agence de cette business Unit --</option>
+  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+    <label for="businessunit-name" class="form-label">Nom</label>
+    <input class="form-control" id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="Nom">
+  </div>
+
+</div>
+
+<div class="row mb-5">
+
+  <div class="form-group col-12 col-md-6">
+    <label class="form-label">Agence</label>
+    <select class="form-select" name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
+      <option value="" disabled selected>Choisissez l'agence de cette business Unit</option>
       <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
     </select>
   </div>
+
+</div>

src/app/components/businessunit/businessunit.component.html

@@ -1,35 +1,26 @@
 <div xmlns="">
   <h2 class = mb-4>Business Unit</h2>
 
-  <table class = mb-5>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
         <tr>
-      <th class="spaced">Name</th>
+          <th scope="col">ID</th>
+          <th scope="col">Nom</th>
         </tr>
+      </thead>
+      <tbody>
         <tr *ngFor="let businessunit of businessunits">
-      <td class="spaced"> {{businessunit.name}} </td>
-      <td class="spaced"> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
+          <th scope="row">{{businessunit.id}}</th>
+          <td> {{businessunit.name}} </td>
+          <td> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
         </tr>
+      </tbody>
     </table>
-
-  <h3>Ajouter une businessunit : </h3>
-
-  <div class = mb-3>
-    <table>
-      <tr>
-        <th>Name</th>
-      </tr>
-      <tr>
-        <td>
-          <input id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="name">
-        </td>
-      </tr>
-    </table>
-
-    <select name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
-      <option value="">-- Choisissez l'agence de cette business Unit --</option>
-      <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
-    </select>
   </div>
+  <h3>Ajouter une Business Unit : </h3>
+
+  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
 
   <button class="add-button" (click)="add(businessunit)">
     Ajouter une businessunit

src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html

@@ -1,54 +1,96 @@
-<div *ngIf="collaborateur" style="overflow-x:auto;" class="mb-3">
-
-  <table class="mb-3">
-    <tr>
-    <th>Name</th>
-    <th>First Name</th>
-    <th>Birth Date</th>
-    <th>Gender</th>
-    <th>Status</th>
-    <th>Children Number</th>
-    <th>Address</th>
-    <th>Telephone</th>
-    <th>Personal Mail</th>
-    <th>Apside Mail</th>
-    <th>Resignation Date</th>
-    </tr>
-
-    <tr>
-      <td><input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name"></td>
-      <td><input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname"></td>
-      <td><input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate"></td>
-      <td><input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender"></td>
-      <td><input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status"></td>
-      <td><input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber"></td>
-      <td><input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address"></td>
-      <td><input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone"></td>
-      <td><input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail"></td>
-      <td><input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail"></td>
-      <td><input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate"></td>
-    </tr>
-
-  </table>
-
-  <select name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
-    <option value="">-- Choisissez un référent pour le nouveau collaborateur --</option>
-    <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
-  </select>
+<div *ngIf="collaborateur" class="mb-3">
 
-  <select name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId">
-    <option value="">-- Choisissez la Business Unit pour le nouveau collaborateur --</option>
-    <option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option>
+  <div class="row mb-2">
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-name" class="form-label">Nom</label>
+      <input class="form-control" id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="Nom">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-firstName" class="form-label">Prénom</label>
+      <input class="form-control" id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="Prénom">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-birthDate" class="form-label">Date de naissance</label>
+      <input type="date" class="form-control" id="collaborateur-birthDate" (change)="onBirthDateChange($event)" [(ngModel)]="bDate" placeholder="Date de naissance">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Genre</label>
+      <select class="form-select" name="genre" id="collaborateur-gender" [(ngModel)]="collaborateur.gender">
+        <option value="" disabled selected>Genre</option>
+        <option value="MASCULIN">Masculin</option>
+        <option value="FEMININ">Féminin</option>
+        <option value="AUTRE">Autre</option>
       </select>
-  <br/>
-  <span>
-    *Tous les champs sont obligatoires
-  </span>
+    </div>
+  </div>
 
+  <div class="row mb-2">
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-status" class="form-label">Statut</label>
+      <input class="form-control" id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="Statut">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-childrenNumber" class="form-label">Nombre d'enfants</label>
+      <input type="number" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}" class="form-control" id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="Nombre d'enfants">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-address" class="form-label">Adresse</label>
+      <input class="form-control" id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="Adresse">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-telephone" class="form-label">Téléphone</label>
+      <input class="form-control" id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="Téléphone">
+    </div>
+  </div>
 
+  <div class="row mb-4">
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-personalMail" class="form-label">Mail personnel</label>
+      <input type="email" class="form-control" id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="prenom.nom@example.com">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-apsideMail" class="form-label">Mail Apside</label>
+      <input type="email" class="form-control" id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="prenom.nom@apside-groupe.com">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-resignationDate" class="form-label">Date de départ</label>
+      <input type="date" class="form-control" id="collaborateur-resignationDate" (change)="onResignationDateChange($event)" [ngModel]="rDate" placeholder="Date de départ">
+    </div>
+  </div>
+
+  <div class="row mb-2">
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Référent</label>
+      <select class="form-select" name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
+        <option value="" disabled selected>Choisissez un référent pour le collaborateur</option>
+        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+      </select>
+    </div>
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Business Unit</label>
+      <select class="form-select" name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId">
+        <option value="" disabled selected>Choisissez la Business Unit pour le collaborateur</option>
+        <option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option>
+      </select>
+    </div>
+  </div>
+
+
+  <br/>
+  <span>
+    *Tous les champs sont obligatoires
+  </span>
 </div>

src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts

@@ -4,7 +4,6 @@ import {HttpClient} from "@angular/common/http";
 import {CollaborateurService} from "../../../services/collaborateur.service";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {Businessunit} from "../../../interfaces/businessunit";
-
 @Component({
   selector: 'app-collaborateur-detail',
   templateUrl: './collaborateur-detail.component.html',
@@ -14,6 +13,8 @@ export class CollaborateurDetailComponent implements OnInit {
 
   businessunits : Businessunit[] = [];
   collaborateurs : Collaborateur[] = [];
+  rDate : String = "";
+  bDate : String = "";
 
   @Input()
   collaborateur = {} as Collaborateur;
@@ -24,9 +25,18 @@ export class CollaborateurDetailComponent implements OnInit {
     private businessunitService: BusinessunitService
   ) {}
 
+
   ngOnInit(): void {
     this.getCollaborateurs();
     this.getBusinessunits();
+    if (this.collaborateur.resignationDate) {
+      this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0];
+      console.log(this.rDate)
+    }
+    if (this.collaborateur.birthDate) {
+      this.bDate = new Date(this.collaborateur.birthDate).toISOString().split('T')[0];
+      console.log(this.bDate)
+    }
   }
 
   getCollaborateurs():void {
@@ -39,4 +49,17 @@ export class CollaborateurDetailComponent implements OnInit {
       .subscribe(businessunits => this.businessunits = businessunits);
   }
 
+  onResignationDateChange($event: any):void {
+    console.log($event.target)
+    this.collaborateur.resignationDate = new Date($event.target.value);
+    console.log(this.rDate)
+    console.log(this.collaborateur.resignationDate)
+  }
+
+  onBirthDateChange($event: any):void {
+    console.log($event.target)
+    this.collaborateur.birthDate = new Date($event.target.value);
+    console.log(this.bDate)
+    console.log(this.collaborateur.birthDate)
+  }
 }

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html

@@ -2,7 +2,8 @@
 <div *ngIf="collaborateur">
 
   <h2>{{collaborateur.name | uppercase}} {{collaborateur.firstName | uppercase}} </h2>
-  <div><span>id : </span>{{collaborateur.id}}</div>
+
+  <div><label class="form-label">ID : </label>{{collaborateur.id}}</div>
 
   <app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>
 

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts

@@ -34,6 +34,7 @@ export class CollaborateurEditComponent implements OnInit {
 
   save():void{
     if (this.collaborateur){
+      console.log("SAVE",this.collaborateur.resignationDate)
       this.collaborateurService.updateCollaborateur(this.collaborateur)
         .subscribe(()=>this.goBack());
     }

src/app/components/collaborateur/collaborateur.component.html

@@ -1,20 +1,26 @@
 <div xmlns="">
   <h2 class = mb-4>Collaborateurs</h2>
 
-  <div style="overflow-x:auto;" class="mb-5">
-    <table >
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
         <tr>
-      <th class="spaced">Name</th>
-      <th class="spaced">First Name</th>
-      <th class="spaced">Apside Mail</th>
+          <th scope="col">ID</th>
+          <th scope="col">Nom</th>
+          <th scope="col">Prénom</th>
+          <th scope="col">Mail Apside</th>
         </tr>
+      </thead>
 
+      <tbody>
       <tr *ngFor="let collaborateur of collaborateurs">
-        <td class="spaced"> {{collaborateur.name}} </td>
-        <td class="spaced"> {{collaborateur.firstName}} </td>
-        <td class="spaced"> {{collaborateur.apsideMail}} </td>
-        <td class="spaced"> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
+        <th scope="row">{{collaborateur.id}}</th>
+        <td> {{collaborateur.name}} </td>
+        <td> {{collaborateur.firstName}} </td>
+        <td> {{collaborateur.apsideMail}} </td>
+        <td> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
       </tr>
+      </tbody>
     </table>
   </div>
 

src/app/components/collaborateur/collaborateur.component.ts

@@ -27,7 +27,6 @@ export class CollaborateurComponent implements OnInit {
   }
 
   add(collaborateur: Collaborateur): void {
-    console.log(collaborateur);
     this.collaborateurService.addCollaborateur(collaborateur)
       .subscribe(collaborateur => {
         this.collaborateurs.push(collaborateur);

src/app/services/agence.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {Agence} from "../interfaces/agence";
-import {agencesUrl} from "../../ressources/routes/routes";
+import {agencesUrl} from "../../ressources/routes/routesPreprod";
 
 @Injectable({
   providedIn: 'root'

src/app/services/businessunit.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {Businessunit} from "../interfaces/businessunit";
-import {businessunitsUrl} from "../../ressources/routes/routes";
+import {businessunitsUrl} from "../../ressources/routes/routesPreprod";
 
 @Injectable({
   providedIn: 'root'

src/app/services/collaborateur.service.ts

@@ -2,7 +2,7 @@ import {Collaborateur} from "../interfaces/collaborateur";
 import {Injectable} from '@angular/core';
 import {Observable} from "rxjs";
 import {HttpClient, HttpHeaders} from "@angular/common/http";
-import {collaborateursUrl} from "../../ressources/routes/routes";
+import {collaborateursUrl} from "../../ressources/routes/routesPreprod";
 
 
 @Injectable({providedIn: 'root'})

src/ressources/routes/routes.ts

@@ -1,3 +1,3 @@
-export const collaborateursUrl = 'https://localhost:8081/api/collaborateurs';
-export const agencesUrl = 'https://localhost:8081/api/agences';
-export const businessunitsUrl = 'https://localhost:8081/api/businessunits';
+export const collaborateursUrl = 'https://localhost:5001/api/collaborateurs';
+export const agencesUrl = 'https://localhost:5001/api/agences';
+export const businessunitsUrl = 'https://localhost:5001/api/businessunits';

src/ressources/routes/routesPreprod.ts

@@ -0,0 +1,3 @@
+export const collaborateursUrl = 'https://collaborateur-epa.apsdigit.lan/api/collaborateurs';
+export const agencesUrl = 'https://collaborateur-epa.apsdigit.lan/api/agences';
+export const businessunitsUrl = 'https://collaborateur-epa.apsdigit.lan/api/businessunits';