Pagination effectuée avec un length en dur

src/app/collaborateurs/collaborateurs.component.html

@@ -16,7 +16,7 @@
 
   <ng-container matColumnDef="dateembauche">
     <mat-header-cell *matHeaderCellDef mat-sort-header>Date embauche</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'yyyy/MM/dd'}}</mat-cell>
+    <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="referent">
@@ -27,3 +27,12 @@
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
 </mat-table>
+
+<mat-paginator #paginator
+              [length] = "taille"
+              [pageIndex]="numPage-1"
+              [pageSize]="parPage"
+              [pageSizeOptions]="pageOption"
+              (page)="pageEvent = updatePageInfo($event)"
+              >
+</mat-paginator>

src/app/collaborateurs/collaborateurs.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/
 import { Observable, Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 
 import { CollaborateurDTO } from '@shared/api-swagger/model/models'
@@ -32,7 +32,7 @@ export class CollaborateursComponent implements OnInit {
   /**
     * Nombre d'élément du tableau à affiche en une page.
     */
-  parPage = 5;
+  parPage = 15;
   /**
     * Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
     */
@@ -60,6 +60,12 @@ export class CollaborateursComponent implements OnInit {
     */
   tri = "";
 
+  taille = 100;
+
+  pageOption = [ 5, 15, 20, 30, 50];
+
+  pageEvent: PageEvent;
+
   /**
     * Pagination du tableau.
     */
@@ -87,14 +93,23 @@ export class CollaborateursComponent implements OnInit {
     */
   updateDataSource() {
     //récupérer la liste des collaborateur et mettre à jour le tableau
-    this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.asc, this.numPage, this.parPage, this.roles, 1, undefined, this.search, this.tri).subscribe(
-      collaborateurs => this.dataSource = new MatTableDataSource(collaborateurs),
+    this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.asc, this.numPage, this.parPage, this.roles, undefined, undefined, this.search, this.tri).subscribe(
+      collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},
       err => console.log(err)
     );
     //this.dataSource.paginator = this.paginator;
     //this.dataSource.sort = this.sort;
   }
 
+  updatePageInfo(event) : PageEvent{
+    console.log("update")
+    console.log(event);
+    this.parPage = event.pageSize;
+    this.numPage = event.pageIndex+1;
+    this.updateDataSource();
+    return event;
+  }
+
   /**
     * Fonction qui calculait le nombre d'année qu'un collaborateur a passé chez Apside (calculer entre la date d'aujourd'hui et la date d'arrivée du collaborateur).
     */

src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts

@@ -93,8 +93,10 @@ export class DetailsCollaborateurComponent implements OnInit {
     this.idCollaborateur = this.route.snapshot.paramMap.get('id');
     this.collaborateurSubscription = this.collaborateusrService.getCollaborateurById(this.idCollaborateur).subscribe(
       collaborateur => {
+        if(this.collaborateur != null) {
           this.collaborateur = collaborateur[0];
           this.updateEP();
+        }
       },
       err => console.log(err)
     );

src/app/formations/details-formation/formation.component.html

@@ -5,8 +5,11 @@
   <ng-container>
     <h3>Informations générales</h3>
     <button mat-raised-button [routerLink]="['edit']">Modifier</button>
+    <p *ngIf="formation.estCertifie">Certifiée</p>
     <p>Etat : {{formation.statut.libelle}}</p>
     <p>Date formation : {{formation.dateDebut | date:'dd/MM/yyyy à hh:mm'}}</p>
+    <p>Nombre de jours : {{formation.jour}}</p>
+    <p>Nombre d'heures : {{formation.heure}}</p>
     <p>Origine : {{formation.origine.libelle}}</p>
     <p>Organisme : {{ formation.organisme}}</p>
     <p>Mode formation : {{ formation.mode.libelle}}</p>

src/app/formations/formations.component.html

@@ -32,3 +32,11 @@
   <!-- Lien vers les détails d'une formation-->
   <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
 </mat-table>
+<mat-paginator #paginator
+              [length] = "taille"
+              [pageIndex]="numPage-1"
+              [pageSize]="parPage"
+              [pageSizeOptions]="pageOption"
+              (page)="pageEvent = updatePageInfo($event)"
+              >
+</mat-paginator>

src/app/formations/formations.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 
 import { FormationDetailsDTO } from "@shared/api-swagger/model/models";
@@ -31,6 +31,9 @@ export class FormationsComponent implements OnInit {
     */
   parPage = 5;
 
+  etat = 0;
+
+
   /**
     * Observable permettant de faire des requêtes sur le service formation.
     */
@@ -52,6 +55,13 @@ export class FormationsComponent implements OnInit {
     */
   search = "";
   tri = "";
+
+
+  taille = 100;
+
+  pageOption = [ 5, 15, 20, 30, 50];
+
+  pageEvent: PageEvent;
   /**
     * Pagination du tableau.
     */
@@ -66,15 +76,16 @@ export class FormationsComponent implements OnInit {
     * Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
     */
   chargement = true;
+
   constructor(private service:FormationsService) {
   }
 
   ngOnInit() {
-    this.updateDataSource(0);
+    this.updateDataSource();
   }
 
-  updateDataSource(val:number) {
-    switch ((val)) {
+  updateDataSource() {
+    switch ((this.etat)) {
       case 0:
         this.formationsDisponiblesSubscription = this.service.getFormations(this.asc,this.numPage, this.parPage, 1, undefined, this.search, this.tri).subscribe(
           formations => this.dataSource = new MatTableDataSource(formations),
@@ -102,6 +113,15 @@ export class FormationsComponent implements OnInit {
     //this.dataSource.sort = this.sort;
   }
 
+  updatePageInfo(event) : PageEvent{
+    console.log("update")
+    console.log(event);
+    this.parPage = event.pageSize;
+    this.numPage = event.pageIndex+1;
+    this.updateDataSource();
+    return event;
+  }
+
   ngOnDestroy() {
     if(this.formationsDisponiblesSubscription != undefined) {
       this.formationsDisponiblesSubscription.unsubscribe();

src/app/formations/new-formation/new-formation.component.html

@@ -14,7 +14,7 @@
   <div>
     <!-- Attribut : statut -->
     <mat-form-field class="input2">
-      <mat-label>Statut formationn</mat-label>
+      <mat-label>Statut formation</mat-label>
       <mat-select formControlName="statut">
         <mat-option *ngFor="let s of statuts" [value]="s">{{s.libelle}}</mat-option>
       </mat-select>

src/app/formations/new-formation/new-formation.component.ts

@@ -60,17 +60,18 @@ export class NewFormationComponent implements OnInit {
     */
   formationForm = this.fb.group(
     {
+      id:[0],
       intitule: [""],
       origine: [""],
       statut : [""],
       dateDebut: [""],
       dateFin: [""],
-      heure: [""],
-      jour: [""],
+      heure: [2],
+      jour: [1],
       organisme: [""],
       mode: [""],
       type: [""],
-      estCertifie: [""],
+      estCertifie: [false],
       idAgence: [1]
     }
   );
@@ -104,6 +105,7 @@ export class NewFormationComponent implements OnInit {
   ajouterFormation() {
     this.formationSubscription = this.service.ajouterFormation(this.formationForm.value).subscribe(
       response => {
+        console.log(response);
         this.router.navigate(['/formations',response["id"]]);
       }
     );

src/app/home/home-assistante/home-assistante.component.css

@@ -13,6 +13,10 @@ mat-form-field {
   width: auto;
   margin-left: 5%;
 }
+
+.obligatoire {
+  background-color: red; 
+}
 /*
 table{
  width: 100%;

src/app/home/home-assistante/home-assistante.component.html

@@ -1,10 +1,8 @@
 <h1> Bienvenu.e</h1>
 
-<h1>AU DESSUS</h1>
-
 <!-- Barre de recher -->
 <mat-form-field>
-  <mat-label>Recherche un collaborateur</mat-label>
+  <mat-label>Rechercher un collaborateur</mat-label>
   <input matInput type="text" [(ngModel)]="search" (keyup)="updateDataSource()">
   <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="search=''">
     <mat-icon>close</mat-icon>
@@ -39,12 +37,12 @@
 
   <ng-container matColumnDef="type">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
-    <mat-cell  *matCellDef="let row"> {{row.type}} </mat-cell>
+    <mat-cell  *matCellDef="let row"> {{getType(row.type)}} </mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="etat">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Etat </mat-header-cell>
-    <mat-cell *matCellDef="let row"> {{row.statut}} </mat-cell>
+    <mat-cell *matCellDef="let row"> {{getEtat(row.statut)}} </mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="datemail">
@@ -54,13 +52,18 @@
 
   <ng-container matColumnDef="dateentretien">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Date entretient </mat-header-cell>
-    <mat-cell  *matCellDef="let row"> {{row.datePrevisionnelle}} </mat-cell>
+    <mat-cell  *matCellDef="let row" background="#FFFF00"> {{row.datePrevisionnelle}} </mat-cell>
   </ng-container>
 
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  <mat-row [ngClass]="{'obligatoire': row.obligatoire}" *matRowDef="let row; columns: displayedColumns;"></mat-row>
 </mat-table>
-<mat-paginator #paginatorEP [pageSize]="25" [pageSizeOptions]="[10, 25, 50, 100]"> </mat-paginator>
-
-<h1>EN DESSOUS</h1>
+<mat-paginator #paginator
+              [length] = "taille"
+              [pageIndex]="numPage-1"
+              [pageSize]="parPage"
+              [pageSizeOptions]="pageOption"
+              (page)="pageEvent = updatePageInfo($event)"
+              >
+</mat-paginator>

src/app/home/home-assistante/home-assistante.component.ts

@@ -4,7 +4,7 @@ import { KeycloakService } from 'keycloak-angular';
 import { Observable, Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 
 import { EpInformationDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
@@ -37,7 +37,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
   /**
     * Nombre d'élément du tableau à affiche en une page.
     */
-  parPage = 5;
+  parPage = 15;
   /**
     * Variable qui concerne le choix d'une des BU de l'agence à laquelle appartient l'assistante.
     */
@@ -52,6 +52,14 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
     * En fonction de son utilisation, pourrait remplacer "choixBU".
     */
   idsBU : number[] = [];
+
+  taille = 100;
+
+  pageOption = [ 5, 15, 20, 30, 50];
+
+  pageEvent: PageEvent;
+
+
   /**
     * Subscription pour récupérer les EP.
     */
@@ -88,6 +96,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
     */
   chargement = true;
 
+
   constructor(public keycloakService : KeycloakService, private service:EpService) {
   }
 
@@ -109,6 +118,15 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
        });
   }
 
+  updatePageInfo(event) : PageEvent{
+    console.log("update")
+    console.log(event);
+    this.parPage = event.pageSize;
+    this.numPage = event.pageIndex+1;
+    this.updateDataSource();
+    return event;
+  }
+
   /**
     * Récupérer le nombre de temps qu'avait passé le collaborateur au sein d'Apside
     * Cette méthode était utilisé avec l'ancienne version des modèle et des Classe d'Affichage
@@ -142,7 +160,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
         res= "Saisi";
         break;
       case 3:
-        res= "Dates proposées";
+        res= "Attente de l'entretien";
         break;
       case 4:
         res= "Entretien prévu";
@@ -154,6 +172,19 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
     return res;
   }
 
+  getColor(row) {
+    console.log("ui");
+    if(row.obligatoire)
+      return "red";
+    return "white";
+  }
+
+  getType(type) {
+    if(type == 1)
+      return "EPA";
+    return "EPS";
+  }
+
   /**
     * Détruire toutes les Subscriptions utilisées pour libérer de la mémoire après le changement de page.
     */

src/app/home/home-rh/home-rh.component.html

@@ -36,3 +36,12 @@
   <!-- Lien vers les détails d'une formation-->
   <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
 </mat-table>
+<!--[length]="taille"-->
+<mat-paginator #paginator
+              [length] = "taille"
+              [pageIndex]="numPage-1"
+              [pageSize]="parPage"
+              [pageSizeOptions]="pageOption"
+              (page)="pageEvent = updatePageInfo($event)"
+              >
+</mat-paginator>

src/app/home/home-rh/home-rh.component.ts

@@ -3,9 +3,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 
 import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
-
 import { FormationDetailsDTO } from "@shared/api-swagger/model/models";
 import { FormationsService } from "@shared/api-swagger/api/api";
 
@@ -33,12 +32,18 @@ export class HomeRHComponent implements OnInit {
   /**
     * Nombre d'élément du tableau à affiche en une page.
     */
-  parPage = 5;
+  parPage = 15;
   /**
     * Permet d'indiquer au serveur sur quel attribut de l'objet ReferentDTO on souhaite faire le tri
     */
   tri = "";
 
+  taille = 100;
+
+  pageOption = [ 5, 15, 20, 30, 50];
+
+  pageEvent: PageEvent;
+
   /**
     * Observable pour faire des requêtes sur le service formation.
     */
@@ -86,6 +91,8 @@ export class HomeRHComponent implements OnInit {
     * Devra se faire à l'ouverture de la page, au changement de page ou du nombre d'éléments à afficher, au moment d'un tri ou encore lors de l'utilisation de la barre de recherche.
     */
   updateFormations() {
+    console.log(this.numPage);
+    console.log(this.parPage);
     this.formationsDisponiblesSubscription = this.service.getProchainesFormation(this.asc, this.numPage, this.parPage, 1, this.search, this.tri).subscribe(
       formations => this.dataSource = new MatTableDataSource(formations),
       err => console.log(err)
@@ -98,6 +105,15 @@ export class HomeRHComponent implements OnInit {
     return "Non";
   }
 
+  updatePageInfo(event) : PageEvent{
+    console.log("update")
+    console.log(event);
+    this.parPage = event.pageSize;
+    this.numPage = event.pageIndex+1;
+    this.updateFormations();
+    return event;
+  }
+
   /**
     * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
     */

src/app/shared/api-swagger/api/ep.service.ts

@@ -30,7 +30,7 @@ import { Configuration }                                     from '../configurat
 @Injectable()
 export class EpService {
 
-    protected basePath = 'https://localhost:44393/api';
+    protected basePath = 'http://localhost:3000/api';
     public defaultHeaders = new HttpHeaders();
     public configuration = new Configuration();
 

src/app/shared/api-swagger/api/formations.service.ts

@@ -103,7 +103,6 @@ export class FormationsService {
         if (httpContentTypeSelected != undefined) {
             headers = headers.set('Content-Type', httpContentTypeSelected);
         }
-
         return this.httpClient.request<any>('post',`${this.basePath}/formations`,
             {
                 body: body,

src/app/shared/nav-menu/nav-menu-rh/nav-menu-rh.component.html

@@ -22,4 +22,4 @@
   <button mat-button routerLink="/collaborateurs">Liste des collaborateurs</button>
   <button mat-button>Liste des engagements</button>
 </mat-menu>
-<button mat-button routerLink="/referents">Liste des référents</button>
+<!--<button mat-button routerLink="/referents">Liste des référents</button>-->

src/environments/environment.ts

@@ -7,8 +7,8 @@ import { KeycloakConfig } from 'keycloak-angular';
 // Add here your keycloak setup infos
 const keycloakConfig: KeycloakConfig = {
   url: 'http://localhost:8080/auth',
-  realm: 'Apside',
-  clientId: 'GestionEPA'
+  realm: 'apside',
+  clientId: 'gestionepa'
 };
 
 export const environment = {