Fix collaborateurs, reprise des BU suite à la reco.

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

@@ -1,34 +1,44 @@
 <div xmlns="">
   <h2 class = mb-4>Business Unit</h2>
 
-  <table class = mb-5>
-    <tr>
-      <th class="spaced">Name</th>
-    </tr>
-    <tr *ngFor="let businessunit of businessunits">
-      <td class="spaced"> {{businessunit.name}} </td>
-      <td class="spaced"> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
-    </tr>
-  </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>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Nom</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let businessunit of businessunits">
+          <th scope="row">{{businessunit.id}}</th>
+          <td> {{businessunit.name}} </td>
+          <td> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
+        </tr>
+      </tbody>
     </table>
+  </div>
+  <h3>Ajouter une Business Unit : </h3>
+
+  <div class="row mb-4">
+
+    <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>
 
-    <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>
 
   <button class="add-button" (click)="add(businessunit)">

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

@@ -76,10 +76,10 @@
 
     <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>
+      <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>
 

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

@@ -1,7 +1,7 @@
 <div xmlns="">
   <h2 class = mb-4>Collaborateurs</h2>
 
-  <div style="overflow-x:auto;" class="mb-5">
+  <div style="overflow-x:auto;" class="mb-5 col-12">
     <table class="table">
       <thead>
         <tr>