commit
ca628f3e5f
@ -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,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> |
||||
@ -0,0 +1,14 @@ |
||||
<button (click)="$event.stopPropagation();" mat-icon-button [matMenuTriggerFor]="menu" aria-label="filter-button avec menu"> |
||||
<mat-icon>filter_alt</mat-icon> |
||||
</button> |
||||
<mat-menu #menu="matMenu"> |
||||
<mat-list role="list" (click)="$event.stopPropagation();"> |
||||
<mat-list-item role="listitem"> |
||||
<mat-checkbox (change)="selectedAllChecked($event.checked)" [checked]="checkedAll"> Tout sélectionner</mat-checkbox> |
||||
</mat-list-item> |
||||
<mat-list-item *ngFor="let data of dataSource" role="listitem"> |
||||
<mat-checkbox *ngIf="isPropertyValueName" (change)="selectedChecked($event.checked,data)" [checked]="exists(data)"> {{data[propertyValueName]}}</mat-checkbox> |
||||
<mat-checkbox *ngIf="!isPropertyValueName" (change)="selectedChecked($event.checked,data)" [checked]="exists(data)"> {{data}}</mat-checkbox> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</mat-menu> |
||||
@ -0,0 +1,120 @@ |
||||
import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from "@angular/core"; |
||||
|
||||
import { SelectedElement } from "@shared/filter/selected-element"; |
||||
|
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: "checkbox-filter", |
||||
templateUrl: "./checkbox-filter.html", |
||||
styleUrls: ["./checkbox-filter.css"] |
||||
}) |
||||
export class CheckboxFilterComponent<T> implements OnInit, OnChanges { |
||||
|
||||
/** |
||||
* Liste des éléments sélectionnés |
||||
*/ |
||||
elementsSelected: Array<T> = []; |
||||
|
||||
/** |
||||
* Booléen permettant de determiner si la propriété "propertyValueName" contient une valeur ou non |
||||
*/ |
||||
isPropertyValueName: boolean; |
||||
|
||||
/** |
||||
* Coche toutes les cases à cocher |
||||
*/ |
||||
@Input() checkedAll: boolean; |
||||
|
||||
/** |
||||
* Source de données |
||||
*/ |
||||
@Input() dataSource : Array<T>; |
||||
|
||||
/** |
||||
* Nom de la propriété contenant la valeur à afficher |
||||
*/ |
||||
@Input() propertyValueName: string;
|
||||
|
||||
/** |
||||
* Booléen permettant de savoir si toutes les cases sont cochées ou non |
||||
*/ |
||||
@Output() isSelectedAllEvent = new EventEmitter<boolean>(); |
||||
|
||||
/** |
||||
* Elément sélectionné |
||||
*/ |
||||
@Output() isSelectedEvent = new EventEmitter<SelectedElement<T>>(); |
||||
|
||||
|
||||
constructor() {} |
||||
|
||||
ngOnInit() { |
||||
this.isPropertyValueName = !this.propertyValueName ? false : true; |
||||
} |
||||
|
||||
ngOnChanges() { |
||||
if (this.dataSource.length > 0) { |
||||
this.checkElementhasProperty(); |
||||
this.selectedAllChecked(this.checkedAll); |
||||
}
|
||||
} |
||||
|
||||
|
||||
/** |
||||
* Vérifie que tous les éléments de source de données possède la propriété "propertyValueName" lorsque cette dernière
|
||||
* contient une valeur. |
||||
*/ |
||||
checkElementhasProperty() { |
||||
if(this.propertyValueName && !this.dataSource.every(e => e.hasOwnProperty(this.propertyValueName))) |
||||
throw new Error("Il existe au moins un élément dans la source de données qui ne possède pas la propriété '"+this.propertyValueName+"'.");
|
||||
} |
||||
|
||||
|
||||
/** |
||||
* Détermine si l'élément est présent dans la liste des éléments sélectionnés |
||||
* @param element
|
||||
*/ |
||||
exists(element) { |
||||
return this.elementsSelected.indexOf(element) > -1; |
||||
}; |
||||
|
||||
/** |
||||
* Met à jour la liste des éléments sélectionnés et met à jour l'EventEmitter "isSelectedAllEvent" |
||||
* @param event case "Tout Sélectionner" cochée ou décochée |
||||
*/ |
||||
selectedAllChecked(event) { |
||||
this.isSelectedAllEvent.emit(event);
|
||||
this.checkedAll = event; |
||||
this.elementsSelected = []; |
||||
|
||||
if(event) |
||||
this.dataSource.map(data => this.elementsSelected.push(data)); |
||||
} |
||||
|
||||
/** |
||||
* Met à jour la liste des éléments sélectionnés et met à jour l'EventEmitter "isSelectedEvent" |
||||
* @param event case cochée ou décochée par l'utilisateur |
||||
* @param data Valeur de la case cochée ou décochée |
||||
*/ |
||||
selectedChecked = (event: any, data: T) => { |
||||
this.isSelectedEvent.emit({isSelected: event, selectedElement: data}); |
||||
|
||||
// si la checkbox a été cochée
|
||||
if(event) |
||||
this.elementsSelected.push(data); |
||||
else |
||||
this.elementsSelected = this.elementsSelected.filter(element => element != data); |
||||
|
||||
// coche la case "Tout sélectionner" si tous les éléments sont cochés
|
||||
this.elementsSelected.length == this.dataSource.length ? this.checkedAll = true: this.checkedAll = false; |
||||
} |
||||
|
||||
/** |
||||
* Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires. |
||||
*/ |
||||
ngOnDestroy() { |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,28 @@ |
||||
import { NgModule } from "@angular/core"; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { FormsModule, ReactiveFormsModule} from '@angular/forms'; |
||||
import { RouterModule } from '@angular/router'; |
||||
|
||||
import { MaterialModule } from "../angular-material/angular-material.module"; |
||||
import { CheckboxFilterComponent } from "@shared/filter/checkbox-filter/checkbox-filter"; |
||||
import { SelectFilterComponent } from "@shared/filter/select-filter/select-filter"; |
||||
|
||||
|
||||
@NgModule({ |
||||
declarations: [
|
||||
CheckboxFilterComponent, |
||||
SelectFilterComponent |
||||
], |
||||
imports: [ |
||||
MaterialModule, |
||||
CommonModule, |
||||
FormsModule, |
||||
ReactiveFormsModule, |
||||
RouterModule |
||||
], |
||||
exports: [ |
||||
CheckboxFilterComponent, |
||||
SelectFilterComponent |
||||
] |
||||
}) |
||||
export class FilterModule {} |
||||
@ -0,0 +1,4 @@ |
||||
mat-select .mat-checkbox-layout, |
||||
mat-select .mat-checkbox-label { |
||||
width:100% !important; |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
<mat-form-field appearance="fill"> |
||||
<mat-label>{{label}}</mat-label> |
||||
<mat-select [(value)]="elementsSelected" multiple> |
||||
<mat-checkbox class="mat-option" (change)="selectedAllChecked($event.checked)" [checked]="checkedAll"> Tout sélectionner</mat-checkbox> |
||||
<ng-container *ngFor="let data of dataSource"> |
||||
<mat-option #matOption *ngIf="isPropertyValueName" (click)="selectedChecked(matOption.selected, data)" [value]="data">{{data[propertyValueName]}}</mat-option> |
||||
<mat-option #matOption *ngIf="!isPropertyValueName" (click)="selectedChecked(matOption.selected, data)" [value]="data">{{data}}</mat-option> |
||||
</ng-container> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
|
||||
@ -0,0 +1,116 @@ |
||||
import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from "@angular/core"; |
||||
import { SelectedElement } from "@shared/filter/selected-element"; |
||||
|
||||
@Component({ |
||||
selector: "select-filter", |
||||
templateUrl: "./select-filter.html", |
||||
styleUrls: ["./select-filter.css"] |
||||
}) |
||||
export class SelectFilterComponent<T> implements OnInit, OnChanges { |
||||
|
||||
/** |
||||
* Liste des éléments sélectionnés |
||||
*/ |
||||
elementsSelected: Array<T> = []; |
||||
|
||||
/** |
||||
* Booléen permettant de determiner si la propriété "propertyValueName" contient une valeur ou non |
||||
*/ |
||||
isPropertyValueName: boolean; |
||||
|
||||
/** |
||||
* Libellé qui est affiché dans la liste déroulante lorsqu'aucune valeur n'est sélectionnée |
||||
*/ |
||||
@Input() label: string; |
||||
|
||||
/** |
||||
* Cocher toutes les cases à cocher |
||||
*/ |
||||
@Input() checkedAll: boolean; |
||||
|
||||
/** |
||||
* Source de données |
||||
*/ |
||||
@Input() dataSource : Array<T>; |
||||
|
||||
/** |
||||
* Nom de la propriété contenant la valeur à afficher |
||||
*/ |
||||
@Input() propertyValueName: string;
|
||||
|
||||
/** |
||||
* Booléen permettant de savoir si toutes les cases sont cochées ou non |
||||
*/ |
||||
@Output() isSelectedAllEvent = new EventEmitter<boolean>(); |
||||
|
||||
/** |
||||
* Elément sélectionné |
||||
*/ |
||||
@Output() isSelectedEvent = new EventEmitter<SelectedElement<T>>(); |
||||
|
||||
|
||||
constructor() {} |
||||
|
||||
ngOnInit() { |
||||
this.isPropertyValueName = !this.propertyValueName ? false : true; |
||||
} |
||||
|
||||
ngOnChanges() { |
||||
if (this.dataSource.length > 0) { |
||||
this.checkElementhasProperty();
|
||||
this.selectedAllChecked(this.checkedAll); |
||||
}
|
||||
} |
||||
|
||||
|
||||
/** |
||||
* Vérifie que tous les éléments de source de données possède la propriété "propertyValueName" lorsque cette dernière
|
||||
* contient une valeur. |
||||
*/ |
||||
checkElementhasProperty() { |
||||
if(this.propertyValueName && !this.dataSource.every(e => e.hasOwnProperty(this.propertyValueName))) |
||||
throw new Error("Il existe au moins un élément dans la source de données qui ne possède pas la propriété '"+this.propertyValueName+"'.");
|
||||
} |
||||
|
||||
/** |
||||
* Met à jour la liste des éléments sélectionnés et met à jour l'EventEmitter "isSelectedAllEvent" |
||||
* @param event case "Tout Sélectionner" cochée ou décochée |
||||
*/ |
||||
selectedAllChecked(event) { |
||||
this.isSelectedAllEvent.emit(event);
|
||||
this.checkedAll = event; |
||||
this.elementsSelected = []; |
||||
|
||||
if(event) |
||||
this.dataSource.map(data => this.elementsSelected.push(data));
|
||||
} |
||||
|
||||
/** |
||||
* Met à jour la liste des éléments sélectionnés et met à jour l'EventEmitter "isSelectedEvent" |
||||
* @param isChecked case cochée ou décochée par l'utilisateur |
||||
* @param data Valeur de la case cochée ou décochée |
||||
*/ |
||||
selectedChecked = (isChecked: boolean, data: T) => { |
||||
this.isSelectedEvent.emit({isSelected: isChecked, selectedElement: data}); |
||||
|
||||
if(isChecked) { |
||||
var index = this.elementsSelected.findIndex(element => element == data);
|
||||
|
||||
if (index === -1)
|
||||
this.elementsSelected.push(data); |
||||
}
|
||||
else { |
||||
this.elementsSelected = this.elementsSelected.filter(element => element != data); |
||||
} |
||||
|
||||
// coche la case "Tout sélectionner" si tous les éléments sont cochés
|
||||
this.elementsSelected.length == this.dataSource.length ? this.checkedAll = true: this.checkedAll = false; |
||||
} |
||||
|
||||
/** |
||||
* Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires. |
||||
*/ |
||||
ngOnDestroy() { |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,11 @@ |
||||
export interface SelectedElement<T> {
|
||||
/** |
||||
* Détermine si l'élément est sélectionné ou non |
||||
*/ |
||||
isSelected: boolean; |
||||
|
||||
/** |
||||
* Element sélectionné |
||||
*/ |
||||
selectedElement: T; |
||||
} |
||||
@ -0,0 +1,84 @@ |
||||
<ng-container *ngIf="chargement"> |
||||
<mat-spinner></mat-spinner> |
||||
</ng-container> |
||||
|
||||
<ng-container *ngIf="!chargement"> |
||||
|
||||
|
||||
<!-- Barre de recherche --> |
||||
<mat-form-field> |
||||
<mat-label>Rechercher une formation</mat-label> |
||||
<input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()"> |
||||
<button mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()"> |
||||
<mat-icon>close</mat-icon> |
||||
</button> |
||||
</mat-form-field> |
||||
|
||||
<!--Checkboxes des statuts de formation--> |
||||
<select-filter |
||||
[dataSource]="statutsFormation" |
||||
[checkedAll]="false" |
||||
label="Statuts" |
||||
propertyValueName="libelle" |
||||
(isSelectedAllEvent)="updateAllCheckbox($event)" |
||||
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)"> |
||||
</select-filter> |
||||
|
||||
<!-- Affichage de la liste des formations --> |
||||
|
||||
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" > |
||||
<ng-container matColumnDef="intitule"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Intitulé</mat-header-cell> |
||||
<mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef=participants> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Nb participants</mat-header-cell> |
||||
<mat-cell *matCellDef="let row">{{ row.nbParticipations }}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="date"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>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 mat-sort-header disableClear>Origine</mat-header-cell> |
||||
<mat-cell *matCellDef="let row">{{row.origine.libelle}}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="statut"> |
||||
<!--Checkboxes des statuts de formation--> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Statut |
||||
<checkbox-filter |
||||
[dataSource]="statutsFormation" |
||||
[checkedAll]="false" |
||||
propertyValueName="libelle" |
||||
(isSelectedAllEvent)="updateAllCheckbox($event)" |
||||
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)"> |
||||
</checkbox-filter> |
||||
</mat-header-cell> |
||||
<mat-cell *matCellDef="let row">{{row.statut.libelle}}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="certification"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>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 le détail 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)="updatePageInfo($event)" |
||||
> |
||||
</mat-paginator> |
||||
|
||||
|
||||
</ng-container> |
||||
@ -0,0 +1,256 @@ |
||||
import { Component, Input, OnInit } from "@angular/core"; |
||||
|
||||
import { Subscription } from 'rxjs'; |
||||
|
||||
import {MatTableDataSource} from '@angular/material/table'; |
||||
|
||||
import { CollaborateurDTO, FormationDetailsDTO, StatutFormationDTO } from '@shared/api-swagger/model/models' |
||||
import { FormationsService } from "@shared/api-swagger/api/api"; |
||||
import { cles } from "@shared/utils/cles"; |
||||
|
||||
|
||||
@Component({ |
||||
selector: "formations-table", |
||||
templateUrl: "./formations.table.html", |
||||
styleUrls: ["./formations.table.css"] |
||||
}) |
||||
export class FormationsTableComponent implements OnInit { |
||||
|
||||
/** |
||||
* Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà). |
||||
*/ |
||||
asc : boolean = true; |
||||
|
||||
/** |
||||
* Numéro de la page à afficher dans le tableau. |
||||
*/ |
||||
numPage: number = 1; |
||||
/** |
||||
* Nombre d'élément du tableau à affiche en une page. |
||||
*/ |
||||
parPage: number = 15; |
||||
/** |
||||
* Observable pour faire des requêtes sur le service formation. |
||||
*/ |
||||
private formationsDisponiblesSubscription : Subscription; |
||||
|
||||
/** |
||||
* Observable pour faire des requêtes sur le service formation. |
||||
*/ |
||||
private formationsDisponiblesCountSubscription : Subscription; |
||||
|
||||
/** |
||||
* C'est dans cet objet que seront stockés les formations à afficher dans le Mat Table côté template. |
||||
*/ |
||||
dataSource : MatTableDataSource<FormationDetailsDTO>; |
||||
|
||||
/** |
||||
* contenu de la recherche pour trouver une formation. |
||||
*/ |
||||
search: string = ""; |
||||
/** |
||||
* Permet de savoir sur quelle attribut d'un FormationDetailsDTO doit être trié le tableau. |
||||
*/ |
||||
tri: string = "intitule"; |
||||
|
||||
/** |
||||
* Id agence collaborateur connecté |
||||
*/ |
||||
idAgence: number; |
||||
|
||||
/** |
||||
* Liste des statuts de formation |
||||
*/ |
||||
statutsFormation: Array<StatutFormationDTO> = []; |
||||
|
||||
/** |
||||
* Liste des id statuts à afficher |
||||
*/ |
||||
private idStatuts: Array<number> = []; |
||||
|
||||
/** |
||||
* Spécifie si les checkbox des statuts de formation sont toutes cochées ou non. |
||||
*/ |
||||
isStatutsSelectedAll: boolean = false; |
||||
|
||||
/** |
||||
* Nombre total d'élément du tableau |
||||
*/ |
||||
taille: number = 0; |
||||
|
||||
/** |
||||
* Options pour choisir le nombre de page à affiche |
||||
*/ |
||||
pageOption = [ 5, 15, 20, 30, 50]; |
||||
|
||||
/** |
||||
* Spécifie si la liste des formations est en cours de chargement dans le tableau. |
||||
*/ |
||||
chargement: boolean = true; |
||||
|
||||
/** |
||||
* Indique si la recherche par statut de formation est activée ou non |
||||
*/ |
||||
@Input() rechercherParStatutFormation: boolean = false; |
||||
|
||||
/** |
||||
* Liste des colonnes du tableau à afficher. |
||||
*/ |
||||
@Input() displayedColumns : string[];
|
||||
|
||||
private collaborateurConnecte : CollaborateurDTO; |
||||
|
||||
constructor(private formationsService: FormationsService) {} |
||||
|
||||
ngOnInit() { |
||||
this.getStatutsFormation(); |
||||
this.setCollaborateurConnecte(); |
||||
} |
||||
|
||||
/** |
||||
* 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. |
||||
*/ |
||||
updateDataSource() { |
||||
this.updateFormations(); |
||||
} |
||||
|
||||
/** |
||||
* Récupère les statuts de formation |
||||
*/ |
||||
getStatutsFormation() |
||||
{ |
||||
this.formationsService.getStatutsFormation().subscribe( |
||||
statuts => this.statutsFormation = statuts, |
||||
err => console.log(err) |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* 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() { |
||||
this.formationsDisponiblesSubscription = this.formationsService.getFormations(this.idAgence,this.idStatuts,this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe( |
||||
formations => this.dataSource = new MatTableDataSource(formations), |
||||
err => console.log(err) |
||||
) |
||||
|
||||
this.formationsDisponiblesCountSubscription = this.formationsService.getFormationsCount(this.idAgence,this.idStatuts,this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe( |
||||
count => this.taille=count, |
||||
err => console.log(err) |
||||
); |
||||
} |
||||
|
||||
estCertifiee(certifiee: boolean) { |
||||
if(certifiee) |
||||
return "Oui"; |
||||
return "Non"; |
||||
} |
||||
|
||||
setCollaborateurConnecte() |
||||
{ |
||||
if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined){ |
||||
setTimeout( () => this.setCollaborateurConnecte(), 1000); |
||||
} |
||||
else { |
||||
this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee)); |
||||
this.idAgence = this.collaborateurConnecte.businessUnit.agence.id; |
||||
this.updateDataSource(); |
||||
this.chargement = false; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Mettre à jour le nomre d'élément à afficher par page et le numéro de la page |
||||
* @param event évènement de la pagination |
||||
*/ |
||||
updatePageInfo(event){ |
||||
this.parPage = event.pageSize; |
||||
this.numPage = event.pageIndex+1; |
||||
this.updateDataSource(); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Remettre au début la liste lors d'une recherche via la barre de recherche |
||||
*/ |
||||
setSearch() { |
||||
this.numPage = 1; |
||||
this.updateDataSource(); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Vider la barre de recherche et remettre le tableau à la première page |
||||
*/ |
||||
resetSearch() { |
||||
this.search = ""; |
||||
this.setSearch(); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Trier le tableau en fonction de l'évènement de la colonne |
||||
* @param e évènement du tri |
||||
*/ |
||||
triTableau(e) { |
||||
this.tri = e.active; |
||||
switch(e.direction) { |
||||
case "asc": |
||||
this.asc = true; |
||||
break; |
||||
case "desc": |
||||
this.asc = false; |
||||
break; |
||||
} |
||||
this.updateDataSource(); |
||||
} |
||||
|
||||
/** |
||||
* Mettre à jour toutes les checkox |
||||
* @param event case cochée ou décochée |
||||
*/ |
||||
updateAllCheckbox(event) { |
||||
this.idStatuts = []; |
||||
// si la checkbox a été cochée
|
||||
if(event) |
||||
this.statutsFormation.map(statut => this.idStatuts.push(statut.id)); |
||||
else |
||||
this.idStatuts = []; |
||||
|
||||
this.numPage = 1; |
||||
this.updateDataSource(); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Mettre à jour la liste des checkox |
||||
* @param event case cochée ou décochée |
||||
* @param statut statut concerné par la checkbox cochée ou décochée |
||||
*/ |
||||
updateCheckbox(event, statut) { |
||||
// si la checkbox a été cochée
|
||||
if(event) { |
||||
this.idStatuts.push(statut.id) |
||||
} |
||||
else{ |
||||
this.idStatuts = this.idStatuts.filter(id => id != statut.id); |
||||
} |
||||
this.numPage = 1; |
||||
this.updateDataSource(); |
||||
} |
||||
|
||||
/** |
||||
* 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(); |
||||
} |
||||
if(this.formationsDisponiblesCountSubscription != undefined) { |
||||
this.formationsDisponiblesCountSubscription.unsubscribe(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,20 +1,32 @@ |
||||
import { NgModule } from "@angular/core"; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { FormsModule } from '@angular/forms'; |
||||
import { RouterModule } from '@angular/router'; |
||||
|
||||
import { MaterialModule } from "../angular-material/angular-material.module"; |
||||
import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table"; |
||||
import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table" |
||||
import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.table"; |
||||
import { FilterModule } from "@shared/filter/filter.module"; |
||||
|
||||
|
||||
@NgModule({ |
||||
declarations: [
|
||||
CollaborateursTableComponent, EngagementTableComponent |
||||
CollaborateursTableComponent, |
||||
EngagementTableComponent, |
||||
FormationsTableComponent
|
||||
], |
||||
imports: [ |
||||
MaterialModule, |
||||
FilterModule, |
||||
CommonModule, |
||||
FormsModule |
||||
FormsModule, |
||||
RouterModule |
||||
], |
||||
exports: [CollaborateursTableComponent, EngagementTableComponent] |
||||
exports: [ |
||||
CollaborateursTableComponent, |
||||
EngagementTableComponent, |
||||
FormationsTableComponent |
||||
] |
||||
}) |
||||
export class MatTablesModule {} |
||||
|
||||
Loading…
Reference in new issue