avancement home page

angular.json

@@ -46,6 +46,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "node_modules/ngx-toastr/toastr.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss"
@@ -119,6 +120,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -11,14 +11,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.0.0",
+    "@angular/cdk": "^12.2.13",
     "@angular/common": "~12.0.0",
     "@angular/compiler": "~12.0.0",
     "@angular/core": "~12.0.0",
     "@angular/forms": "~12.0.0",
     "@angular/localize": "~12.0.0",
+    "@angular/material": "^12.2.13",
     "@angular/platform-browser": "~12.0.0",
     "@angular/platform-browser-dynamic": "~12.0.0",
     "@angular/router": "~12.0.0",
+    "@material/card": "^14.0.0",
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^5.1.3",
     "jquery": "^3.6.0",
@@ -37,4 +40,4 @@
     "karma-coverage": "~2.0.3",
     "typescript": "~4.2.3"
   }
-}
+}

src/app/app.module.ts

@@ -24,6 +24,10 @@ import {ReferencementEditComponent} from './components/referencement/referenceme
 import {PeriodeEssaiAddComponent} from './components/periode-essai/periode-essai-add/periode-essai-add.component';
 import {BusinessunitAddComponent} from './components/businessunit/businessunit-add/businessunit-add.component';
 import {AgenceAddComponent} from './components/agence/agence-add/agence-add.component';
+import {MatCardModule} from '@angular/material/card';
+import {MatProgressBarModule} from "@angular/material/progress-bar";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatButtonModule} from "@angular/material/button";
 
 @NgModule({
   declarations: [
@@ -53,9 +57,13 @@ import {AgenceAddComponent} from './components/agence/agence-add/agence-add.comp
     RouterModule,
     FormsModule,
     AppRoutingModule,
+    MatCardModule,
     ReactiveFormsModule,
     BrowserAnimationsModule,
     ToastrModule.forRoot({preventDuplicates: true}),
+    MatProgressBarModule,
+    MatDividerModule,
+    MatButtonModule,
   ],
   providers: [Title],
   bootstrap: [AppComponent]

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

@@ -1,2 +1,61 @@
 <h2>Services Collaborateurs EPA</h2>
 
+<h4 class=mb-4></h4>
+
+<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-content>
+      <div class="col-12" style="overflow-x:auto;">
+        <table class="table">
+          <thead>
+          <tr>
+            <th scope="col">Collaborateur</th>
+            <th scope="col">Date de fin prévue</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let periodeEssai of periodeEssais">
+            <td>{{getCollaborateurById(periodeEssai.collaborateurId).name}} {{getCollaborateurById(periodeEssai.collaborateurId).firstName}}</td>
+            <td> {{getSplitDate(periodeEssai.plannedEndingDate.toString())}}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </mat-card-content>
+    <mat-card-actions>
+      <button>Voir les 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-content>
+      <div class="col-12" style="overflow-x:auto;">
+        <table class="table">
+          <thead>
+          <tr>
+            <th scope="col">Nom</th>
+            <th scope="col">Prénom</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let collaborateur of collaborateursSansRef">
+            <th scope="row">{{collaborateur.name}}</th>
+            <td> {{collaborateur.firstName}} </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </mat-card-content>
+    <mat-card-actions>
+      <button>Voir les référencements</button>
+    </mat-card-actions>
+  </mat-card>
+
+
+</div>
+

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

@@ -0,0 +1,11 @@
+.home-card {
+  max-width: 400px;
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+.title-center {
+  display: flex;
+  justify-content: center; /* align horizontal */
+  align-items: center; /* align vertical */
+}

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

@@ -1,4 +1,11 @@
 import {Component, OnInit} from '@angular/core';
+import {Collaborateur} from "../../interfaces/collaborateur";
+import {PeriodeEssai} from "../../interfaces/periode-essai";
+import {HttpClient} from "@angular/common/http";
+import {CollaborateurService} from "../../services/collaborateur.service";
+import {PeriodeEssaiService} from "../../services/periode-essai.service";
+import {Referencement} from "../../interfaces/referencement";
+import {ReferencementService} from "../../services/referencement.service";
 
 @Component({
   selector: 'app-home',
@@ -7,10 +14,96 @@ import {Component, OnInit} from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() {
+  referencements: Referencement[] = [];
+  collaborateursSansRef: Collaborateur[] = [];
+  idReferredTab: number[] = [];
+  collaborateurs: Collaborateur[] = [];
+  periodeEssais: PeriodeEssai[] = [];
+
+  periodeEssaisEnCours: PeriodeEssai[] = [];
+
+  constructor(
+    private http: HttpClient,
+    private collaborateurService: CollaborateurService,
+    private periodeEssaiService: PeriodeEssaiService,
+    private referencementService: ReferencementService,
+  ) {
   }
 
   ngOnInit(): void {
+    this.collaborateurService.getCollaborateurs()
+      .subscribe(collaborateurs => {
+        this.collaborateurs = collaborateurs;
+
+        this.referencementService.getReferencements()
+          .subscribe(referencements => {
+
+            this.referencements = referencements;
+            this.referencements.forEach(ref => {
+
+              if (this.idReferredTab.find(id => ref.id == id) == undefined) {
+                this.idReferredTab.push(ref.referredId);
+              }
+
+            });
+
+            this.collaborateurs.forEach(collab => {
+              if (this.idReferredTab.find(id => collab.id == id) == undefined) {
+                this.collaborateursSansRef.push(collab);
+              }
+            })
+          });
+      });
+    this.getPeriodeEssais();
+
+  }
+
+  initPeriodeEssai() {
+    this.periodeEssais = this.periodeEssaisEnCours;
+
+  }
+
+  getCollaborateurs(): void {
+    this.collaborateurService.getCollaborateurs()
+      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
+  }
+
+  getCollaborateurById(id: number): Collaborateur {
+    let collab = {} as Collaborateur;
+    this.collaborateurs.forEach(c => {
+      if (c.id == id) {
+        collab = c;
+        return;
+      }
+    });
+
+    return collab;
+  }
+
+  getPeriodeEssais() {
+    this.periodeEssaiService.getPeriodeEssais()
+      .subscribe(periodeEssais => {
+        periodeEssais.forEach(pe => {
+          if (new Date(pe.plannedEndingDate).getTime() > new Date().getTime() && new Date(pe.plannedEndingDate).getTime() < HomeComponent.getNextWeek().getTime()) {
+            this.periodeEssaisEnCours.push(pe);
+          }
+        })
+        this.periodeEssaisEnCours.sort((b, a) => new Date(b.plannedEndingDate).getTime() - new Date(a.plannedEndingDate).getTime());
+        this.initPeriodeEssai();
+      });
+  }
+
+  getSplitDate(date: string | undefined): string {
+    if (date == undefined) {
+      return "";
+    }
+    return date.split('T')[0];
+  }
+
+  private static getNextWeek() {
+    let result = new Date();
+    result.setDate(new Date().getDate() + 7);
+    return result;
   }
 
 }

src/index.html

@@ -8,6 +8,9 @@
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
 <app-root></app-root>

src/styles.scss

@@ -77,3 +77,6 @@ button:disabled {
   color: #ccc;
   cursor: auto;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }