ygrette
/
Digitalisation_EPA_Client
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ajout du composant FormationsTableComponent dans homme-rh et formations

Browse Source
develop
jboinembalome 4 years ago
parent 92eb7861a4
commit 9e326fde54
6 changed files with 24 additions and 287 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 40
      src/app/formations/formations.component.html
  2. 101
      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. 108
      src/app/home/home-rh/home-rh.component.ts
  6. 2
      src/app/home/home.module.ts

40
src/app/formations/formations.component.html
Unescape View File

@ -1,42 +1,4 @@
<app-nav-menu></app-nav-menu> <app-nav-menu></app-nav-menu>
<h1>Liste des formations </h1> <h1>Liste des formations </h1>
<!-- Affichage de la liste des formations--> <formations-table [rechercherParStatutFormation]="rechercherParStatutFormation" [displayedColumns]="displayedColumns"></formations-table>
<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>

101
src/app/formations/formations.component.ts
Unescape View File

@ -1,13 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component } 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";
/** /**
*/ */
@ -15,96 +6,16 @@ import { FormationsService } from "@shared/api-swagger/api/api";
selector: 'app-formations', selector: 'app-formations',
templateUrl: './formations.component.html' templateUrl: './formations.component.html'
}) })
export class FormationsComponent implements OnInit { export class FormationsComponent {
/**
* 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 = 5;
etat = 0;
/** /**
* Observable permettant de faire des requêtes sur le service formation. * Liste des colonnes du tableau à afficher.
*/ */
private formationsDisponiblesSubscription : Subscription; displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
//displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
/** /**
* Les colonnes à afficher dans le Mat Table * Indique si la recherche par statut de formation est activée ou non
*/ */
displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut"] rechercherParStatutFormation: boolean = true;
/**
* source pour l'affichage des formations dans le tableau qui est affichée.
*/
dataSource : MatTableDataSource<FormationDetailsDTO>;
/**
* 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();
}
}
} }

2
src/app/formations/formations.module.ts
Unescape View File

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

46
src/app/home/home-rh/home-rh.component.html
Unescape View File

@ -1,47 +1,3 @@
<h1> Page RH </h1> <h1> Page RH </h1>
<!-- Affichage de la liste des prochaines formation--> <formations-table [rechercherParStatutFormation]="rechercherParStatutFormation" [displayedColumns]="displayedColumns"></formations-table>
<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>

108
src/app/home/home-rh/home-rh.component.ts
Unescape View File

@ -1,12 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component } 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";
/** /**
@ -19,107 +11,19 @@ import { FormationsService } from "@shared/api-swagger/api/api";
selector : 'home-rh', selector : 'home-rh',
templateUrl : 'home-rh.component.html' 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
*/
tri = "";
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/** /**
* Observable pour faire des requêtes sur le service formation. * Liste des colonnes du tableau à afficher.
*/
private formationsDisponiblesSubscription : Subscription;
/**
* Colonnes du tableau à afficher
*/ */
displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"]; displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
//displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
//displayedColumns: string[] = ["intitule", "participants", "date", "statut","certification"];
/**
* source pour l'affichage des formations dans le tableau Mat Table.
*/
dataSource : MatTableDataSource<FormationDetailsDTO>;
/** /**
* contenu de la recherche. * Indique si la recherche par statut de formation est activée ou non
*/ */
search = ""; rechercherParStatutFormation: boolean = true;
/** constructor() {}
* 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();
}
}
} }

2
src/app/home/home.module.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save