From ea72dbc48b2f3a6d584dd8269de7d4a085ae626a Mon Sep 17 00:00:00 2001
From: Clement FERRERE <clement.ferrere@apside-groupe.com>
Date: Mon, 28 Mar 2022 17:24:48 +0200
Subject: [PATCH] changement des collaborateurs avec des classes BootStrap.
 Responsive. A valider.

---
 .../collaborateur-detail.component.html       | 130 +++++++++++-------
 .../collaborateur-edit.component.html         |   3 +-
 .../collaborateur.component.html              |  26 ++--
 3 files changed, 102 insertions(+), 57 deletions(-)

diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
index 4085820..69a01c6 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -1,54 +1,92 @@
-<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>
-
-  <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>
-  </select>
-  <br/>
-  <span>
-    *Tous les champs sont obligatoires
-  </span>
+<div *ngIf="collaborateur" class="mb-3">
+
+  <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">Name</label>
+      <input class="form-control" id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-firstName" class="form-label">First Name</label>
+      <input class="form-control" id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-birthDate" class="form-label">Birth Date</label>
+      <input class="form-control" id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-gender" class="form-label">Gender</label>
+      <input class="form-control" id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
+    </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">Status</label>
+      <input class="form-control" id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-childrenNumber" class="form-label">Children Number</label>
+      <input class="form-control" id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-address" class="form-label">Address</label>
+      <input class="form-control" id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-telephone" class="form-label">Telephone</label>
+      <input class="form-control" id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
+    </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">Personal Mail</label>
+      <input class="form-control" id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-apsideMail" class="form-label">Apside Mail</label>
+      <input class="form-control" id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-resignationDate" class="form-label">Resignation Date</label>
+      <input class="form-control" id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
+    </div>
+  </div>
+
+  <div class="row">
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Referrer</label>
+      <select class="form-select" name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
+        <option value="" disabled selected>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>
+
+    <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 nouveau 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>
diff --git a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
index 626e1f6..827ca61 100644
--- a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
+++ b/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>
 
diff --git a/src/app/components/collaborateur/collaborateur.component.html b/src/app/components/collaborateur/collaborateur.component.html
index 21ef82a..1295ecc 100644
--- a/src/app/components/collaborateur/collaborateur.component.html
+++ b/src/app/components/collaborateur/collaborateur.component.html
@@ -2,19 +2,25 @@
   <h2 class = mb-4>Collaborateurs</h2>
 
   <div style="overflow-x:auto;" class="mb-5">
-    <table >
-      <tr>
-      <th class="spaced">Name</th>
-      <th class="spaced">First Name</th>
-      <th class="spaced">Apside Mail</th>
-      </tr>
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Name</th>
+          <th scope="col">First Name</th>
+          <th scope="col">Apside Mail</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>