home page v1

src/app/components/home/home.component.html

@@ -5,19 +5,19 @@
 <div style="display: flex;">
 
   <mat-card class="home-card">
-    <mat-card-title class="title-center">Périodes d'essai</mat-card-title>
-    <mat-card-subtitle class="title-center">(7 jours restants ou moins)</mat-card-subtitle>
+    <mat-card-title class="title-center">Fins de périodes d'essai</mat-card-title>
+    <mat-card-subtitle class="subtitle-center">7 jours restants ou moins</mat-card-subtitle>
     <mat-card-content>
-      <div class="col-12" style="overflow-x:auto;">
+      <div class="col-12">
         <table class="table">
           <thead>
           <tr>
             <th scope="col">Collaborateur</th>
-            <th scope="col">Date de fin prévue</th>
+            <th scope="col">Date de fin</th>
           </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let periodeEssai of periodeEssais">
+          <tr *ngFor="let periodeEssai of periodeEssais | slice:0:5;">
             <td>{{getCollaborateurById(periodeEssai.collaborateurId).name}} {{getCollaborateurById(periodeEssai.collaborateurId).firstName}}</td>
             <td> {{getSplitDate(periodeEssai.plannedEndingDate.toString())}}</td>
           </tr>
@@ -26,15 +26,15 @@
       </div>
     </mat-card-content>
     <mat-card-actions>
-      <button>Voir les périodes d'essai</button>
+      <button class="button-link" routerLink="/periodeessais">Accéder aux Périodes d'essai</button>
     </mat-card-actions>
   </mat-card>
 
   <mat-card class="home-card">
-    <mat-card-title class="title-center">Référencements</mat-card-title>
-    <mat-card-subtitle class="title-center">(collaborateurs sans référencements)</mat-card-subtitle>
+    <mat-card-title class="title-center">Référencements manquants</mat-card-title>
+    <mat-card-subtitle class="subtitle-center">collaborateurs sans référencements</mat-card-subtitle>
     <mat-card-content>
-      <div class="col-12" style="overflow-x:auto;">
+      <div class="col-12">
         <table class="table">
           <thead>
           <tr>
@@ -43,8 +43,8 @@
           </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let collaborateur of collaborateursSansRef">
-            <th scope="row">{{collaborateur.name}}</th>
+          <tr *ngFor="let collaborateur of collaborateursSansRef | slice:0:5;">
+            <td> {{collaborateur.name}} </td>
             <td> {{collaborateur.firstName}} </td>
           </tr>
           </tbody>
@@ -52,10 +52,51 @@
       </div>
     </mat-card-content>
     <mat-card-actions>
-      <button>Voir les référencements</button>
+      <button class="button-link" routerLink="/referencements">Accéder aux Référencements</button>
     </mat-card-actions>
   </mat-card>
 
+  <mat-card class="home-card">
+    <mat-card-title class="title-center">Ajout rapide</mat-card-title>
+    <mat-card-subtitle class="subtitle-center">liens vers les pages d'ajout</mat-card-subtitle>
+    <mat-card-content>
+      <table class="table">
+        <thead>
+        <tr>
+          <th scope="col"> </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>
+            <button class="button-link" routerLink="/businessunits/add">Ajouter une Business Unit</button>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <button class="button-link" routerLink="/agences/add">Ajouter une Agence</button>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <button class="button-link" routerLink="/collaborateurs/add">Ajouter un Collaborateur</button>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <button class="button-link" routerLink="/referencements/add">Ajouter un Référencement</button>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <button class="button-link" routerLink="/periodeessais/add">Ajouter une Période d'essai</button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </mat-card-content>
+  </mat-card>
+
 
 </div>
 

src/app/components/home/home.component.scss

@@ -1,11 +1,24 @@
 .home-card {
-  max-width: 400px;
+  //width: 25%;
   margin-right: 20px;
   margin-left: 20px;
+  height: fit-content;
 }
 
 .title-center {
   display: flex;
-  justify-content: center; /* align horizontal */
-  align-items: center; /* align vertical */
+  justify-content: center;
+  align-items: center;
+  font-size: 22px;
+}
+
+.subtitle-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.button-link{
+  width: 100%;
+  padding: 2px;
 }

src/app/components/home/home.component.ts

@@ -22,6 +22,8 @@ export class HomeComponent implements OnInit {
 
   periodeEssaisEnCours: PeriodeEssai[] = [];
 
+  isShown : boolean = false;
+
   constructor(
     private http: HttpClient,
     private collaborateurService: CollaborateurService,
@@ -30,6 +32,12 @@ export class HomeComponent implements OnInit {
   ) {
   }
 
+  private static getNextWeek() {
+    let result = new Date();
+    result.setDate(new Date().getDate() + 7);
+    return result;
+  }
+
   ngOnInit(): void {
     this.collaborateurService.getCollaborateurs()
       .subscribe(collaborateurs => {
@@ -58,11 +66,6 @@ export class HomeComponent implements OnInit {
 
   }
 
-  initPeriodeEssai() {
-    this.periodeEssais = this.periodeEssaisEnCours;
-
-  }
-
   getCollaborateurs(): void {
     this.collaborateurService.getCollaborateurs()
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
@@ -89,7 +92,7 @@ export class HomeComponent implements OnInit {
           }
         })
         this.periodeEssaisEnCours.sort((b, a) => new Date(b.plannedEndingDate).getTime() - new Date(a.plannedEndingDate).getTime());
-        this.initPeriodeEssai();
+        this.periodeEssais = this.periodeEssaisEnCours;
       });
   }
 
@@ -100,10 +103,4 @@ export class HomeComponent implements OnInit {
     return date.split('T')[0];
   }
 
-  private static getNextWeek() {
-    let result = new Date();
-    result.setDate(new Date().getDate() + 7);
-    return result;
-  }
-
 }