Ajout du composant FormationsTableComponent dans homme-rh et formations

develop
jboinembalome 4 years ago
parent 92eb7861a4
commit 9e326fde54
  1. 40
      src/app/formations/formations.component.html
  2. 105
      src/app/formations/formations.component.ts
  3. 2
      src/app/formations/formations.module.ts
  4. 46
      src/app/home/home-rh/home-rh.component.html
  5. 116
      src/app/home/home-rh/home-rh.component.ts
  6. 2
      src/app/home/home.module.ts

@ -1,42 +1,4 @@
<app-nav-menu></app-nav-menu>
<h1>Liste des formations </h1>
<!-- Affichage de la liste des formations-->
<mat-table [dataSource]="this.dataSource">
<ng-container matColumnDef="intitule">
<mat-header-cell *matHeaderCellDef>Intitulé</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
</ng-container>
<ng-container matColumnDef=participants>
<mat-header-cell *matHeaderCellDef>Nb participants</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.nbParticipants }}</mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.dateDebut | date:'dd/MM/yy à hh:mm' }}</mat-cell>
</ng-container>
<ng-container matColumnDef="origine">
<mat-header-cell *matHeaderCellDef>Origine</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ row.origine.libelle}}</mat-cell>
</ng-container>
<ng-container matColumnDef="statut">
<mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.statut.libelle}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<!-- 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>
<formations-table [rechercherParStatutFormation]="rechercherParStatutFormation" [displayedColumns]="displayedColumns"></formations-table>

@ -1,13 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
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";
import { Component } from '@angular/core';
/**
*/
@ -15,96 +6,16 @@ import { FormationsService } from "@shared/api-swagger/api/api";
selector: 'app-formations',
templateUrl: './formations.component.html'
})
export class FormationsComponent implements OnInit {
export class FormationsComponent {
/**
* Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
* Liste des colonnes du tableau à afficher.
*/
asc = true;
/**
* Numéro de la page à afficher dans le tableau.
*/
numPage = 1;
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage = 5;
etat = 0;
/**
* Observable permettant de faire des requêtes sur le service formation.
*/
private formationsDisponiblesSubscription : Subscription;
//displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
/**
* Les colonnes à afficher dans le Mat Table
*/
displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut"]
/**
* source pour l'affichage des formations dans le tableau qui est affichée.
*/
dataSource : MatTableDataSource<FormationDetailsDTO>;
displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
/**
* contenu de la recherche.
*/
search = "";
tri = "";
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Pagination du tableau.
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
/**
* Tri par les éléments du tableau selon la colonne choisie.
*/
@ViewChild(MatSort) sort: MatSort;
/**
* 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();
}
updateDataSource() {
this.formationsDisponiblesSubscription = this.service.getFormations(1,[1,2,3,4], this.asc,this.numPage, this.parPage, this.search, this.tri).subscribe(
formations => this.dataSource = new MatTableDataSource(formations),
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;
}
ngOnDestroy() {
if(this.formationsDisponiblesSubscription != undefined) {
this.formationsDisponiblesSubscription.unsubscribe();
}
}
* Indique si la recherche par statut de formation est activée ou non
*/
rechercherParStatutFormation: boolean = true;
}

@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from "@shared/angular-material/angular-material.module";
import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
@ -29,6 +30,7 @@ import { FormationsRoutingModule } from './formations.routing.module';
CommonModule,
MaterialModule,
NavMenuModule,
MatTablesModule,
RouterModule,
FormationsRoutingModule,
ReactiveFormsModule

@ -1,47 +1,3 @@
<h1> Page RH </h1>
<!-- Affichage de la liste des prochaines formation-->
<mat-table [dataSource]="this.dataSource">
<ng-container matColumnDef="intitule">
<mat-header-cell *matHeaderCellDef>Intitulé</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
</ng-container>
<ng-container matColumnDef=participants>
<mat-header-cell *matHeaderCellDef>Nb participants</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.nbParticipants }}</mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.dateDebut | date:'dd/MM/yyyy à hh:mm' }}</mat-cell>
</ng-container>
<ng-container matColumnDef="origine">
<mat-header-cell *matHeaderCellDef>Origine</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.origine.libelle}}</mat-cell>
</ng-container>
<ng-container matColumnDef="statut">
<mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.statut.libelle}}</mat-cell>
</ng-container>
<ng-container matColumnDef="certification">
<mat-header-cell *matHeaderCellDef>Certifiée</mat-header-cell>
<mat-cell *matCellDef="let row">{{estCertifiee(row.estCertifiee)}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<!-- 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>
<formations-table [rechercherParStatutFormation]="rechercherParStatutFormation" [displayedColumns]="displayedColumns"></formations-table>

@ -1,12 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
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";
import { Component } from '@angular/core';
/**
@ -19,107 +11,19 @@ import { FormationsService } from "@shared/api-swagger/api/api";
selector : 'home-rh',
templateUrl : 'home-rh.component.html'
})
export class HomeRHComponent implements OnInit {
export class HomeRHComponent {
/**
* Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
*/
asc = true;
/**
* Numéro de la page à afficher dans le tableau.
*/
numPage = 1;
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage = 15;
/**
* Permet d'indiquer au serveur sur quel attribut de l'objet CollaborateurDTO on souhaite faire le tri
* Liste des colonnes du tableau à afficher.
*/
tri = "";
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
pageEvent: PageEvent;
/**
* Observable pour faire des requêtes sur le service formation.
*/
private formationsDisponiblesSubscription : Subscription;
/**
* Colonnes du tableau à afficher
*/
displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
//displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
//displayedColumns: string[] = ["intitule", "participants", "date", "statut","certification"];
* Indique si la recherche par statut de formation est activée ou non
*/
rechercherParStatutFormation: boolean = true;
constructor() {}
/**
* source pour l'affichage des formations dans le tableau Mat Table.
*/
dataSource : MatTableDataSource<FormationDetailsDTO>;
/**
* contenu de la recherche.
*/
search = "";
/**
* Pagination du tableau.
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
/**
* Tri par les éléments du tableau selon la colonne choisie.
*/
@ViewChild(MatSort) sort: MatSort;
/**
* 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.updateFormations();
}
/**
* Mettre à jour les informations à afficher dans la tableau.
* 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.getFormations(1,[1,2],this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
formations => this.dataSource = new MatTableDataSource(formations),
err => console.log(err)
)
}
estCertifiee(certifiee: boolean) {
if(certifiee)
return "Oui";
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.
*/
ngOnDestroy() {
if(this.formationsDisponiblesSubscription != undefined) {
this.formationsDisponiblesSubscription.unsubscribe();
}
}
}

@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from "@shared/angular-material/angular-material.module";
import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
import {HomeAssistanteComponent} from './home-assistante/home-assistante.component';
import {HomeRHComponent} from './home-rh/home-rh.component';
@ -30,6 +31,7 @@ import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
FormsModule,
MaterialModule,
NavMenuModule,
MatTablesModule,
RouterModule
],
})

Loading…
Cancel
Save