Mise à jour du fichier home des assistants pour faire afficher les Ep en cours

develop
Yanaël GRETTE 4 years ago
parent 011bfd8814
commit f33056fd28
  1. 68
      src/app/home/home-assistante/home-assistante.component.html
  2. 189
      src/app/home/home-assistante/home-assistante.component.ts
  3. 36
      src/app/shared/mat-tables/ep-table/ep-table.html
  4. 19
      src/app/shared/mat-tables/ep-table/ep-table.ts

@ -1,67 +1,3 @@
<!-- Barre de recher -->
<mat-form-field>
<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>
</mat-button>
</mat-form-field>
<h2> Liste des EP en cours</h2>
<!-- Affichage de la liste des EP disponibles-->
<mat-table [dataSource]="this.dataSource" matSort>
<ng-container matColumnDef="agence">
<mat-header-cell *matHeaderCellDef mat-sort-header> Agence </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.businessUnit.nom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="collaborateur">
<mat-header-cell *matHeaderCellDef mat-sort-header> Collaborateur </mat-header-cell>
<!-- Lien vers les détails du collaborateur -->
<mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.collaborateur.id]">{{row.collaborateur.prenom}} {{row.collaborateur.nom}}</mat-cell>
</ng-container>
<ng-container matColumnDef="anciennete">
<mat-header-cell *matHeaderCellDef mat-sort-header> Ancienneté </mat-header-cell>
<!--<mat-cell *matCellDef="let row"> {{row.collaborateur.dateArrivee | date: 'yyyy/MM/dd'}} ({{row.annee}}an(s) {{row.mois | number: '2.0-0'}}mois) </mat-cell>-->
<mat-cell *matCellDef="let row"> {{row.collaborateur.dateArrivee | date: 'yyyy/MM/dd'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDef mat-sort-header> Referent </mat-header-cell>
<!-- Lien vers les détails du référent -->
<mat-cell *matCellDef="let row" [routerLink]="['/referents', row.referent.id]"> {{row.referent.nom}} {{row.referent.prenom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-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"> {{getEtat(row.statut)}} </mat-cell>
</ng-container>
<ng-container matColumnDef="datemail">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date envoie mail </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dateDisponibilite}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dateentretien">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date entretient </mat-header-cell>
<mat-cell *matCellDef="let row" background="#FFFF00"> {{row.datePrevisionnelle}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row [ngClass]="{'obligatoire': row.obligatoire}" *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>
<ep-table [typeRechercheEP]="typeRechercheEP" [displayedColumns]="displayedColumns" (eventEmitter)="eventEmitter($event)"></ep-table>

@ -1,14 +1,7 @@
import { Component, OnInit, OnDestroy, ViewChild, ViewChildren, AfterViewInit } from '@angular/core';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { epTypeRecherche } from '@shared/utils/cles';
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 { EpInformationDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
import { EpService } from "@shared/api-swagger/api/api";
import { AuthService } from '@shared/auth/auth.service';
/**
@ -23,174 +16,28 @@ import { AuthService } from '@shared/auth/auth.service';
templateUrl : 'home-assistante.component.html',
styleUrls : [ "./home-assistante.component.css"]
})
export class HomeAssistanteComponent implements OnInit, AfterViewInit {
/**
* 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;
/**
* Variable qui concerne le choix d'une des BU de l'agence à laquelle appartient l'assistante.
*/
choixBU = undefined;
/**
* Liste des checkboxes à afficher
* Nous ajouterons les
*/
checkboxes : string[] = ["Tous"];
/**
*
* En fonction de son utilisation, pourrait remplacer "choixBU".
*/
idsBU : number[] = [1];
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Subscription pour récupérer les EP.
*/
private epDisponiblesSubscription : Subscription;
/**
* liste des titres des colonnes du tableau.
*/
displayedColumns: string[] = ["agence", "collaborateur", "anciennete", "referent", "type", "etat", "datemail", "dateentretien" ];
//displayedColumns: string[] = ["agence", "info", "datemail", "dateentretien", "etat", "type"];
/**
* source pour l'affichage des EP dans le tableau qui est affichée.
*/
dataSource : MatTableDataSource<EpInformationDTO>;
/**
* contenu de la recherche.
*/
search = "";
tri = "";
/**
* 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:EpService) {
}
/**
* Récupérer la liste des EP Disponibles dès l'initialisation.
*/
ngOnInit() {
//this.updateDataSource();
export class HomeAssistanteComponent {
displayedColumns: string[] = ["agence", "collaborateur", "referent", "datearrivee", "statutep", "typeep", "dateentretien", "datedisponibilite", "consultation"];
typeRechercheEP : string = epTypeRecherche.EPEnCours;
}
ngAfterViewInit(){}
constructor(private router: Router){}
updateDataSource() {
this.epDisponiblesSubscription = this.service.getEPEnCours(this.idsBU, this.asc, this.numPage, this.parPage, this.search, this.tri).
subscribe(eps => {
this.dataSource = new MatTableDataSource(eps);
err => console.log(err);
});
}
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
* ELle pourra être modifié pour utiliser le module "moment.js" (à chercher)
*/
getAnciennete(anciennete) {
let annee = Math.floor(anciennete / 31536000000);
let mois = Math.floor(anciennete/ 2629800000 % 12);
return annee + " an(s) et "+ mois+" mois";
}
/**
* Permettait de mettre à jour l'ancienneté d'un collaborateur dans une classe qui n'existe plus
* Elle pourra être modifié pour utiliser le module "moment.js".
*/
setAnciennete(firstDate, secondDate) {
return Math.abs(firstDate-secondDate);
}
/**
* Retourne l'état d'un EP
* A mettre à jour
*/
getEtat(etat) {
let res = "";
switch(etat) {
case 1:
res= "Disponible";
eventEmitter(event: any) {
switch(event.type) {
case "collaborateur":
if(event.ep.collaborateur != undefined)
this.router.navigate(["/collaborateurs", event.ep.collaborateur.id])
break;
case 2:
res= "Saisi";
case "referent":
if(event.ep.referent != undefined)
this.router.navigate(["/referents", event.ep.referent.id])
break;
case 3:
res= "Attente de l'entretien";
break;
case 4:
res= "Entretien prévu";
break;
case 5:
res= "Attente Signature";
case "ep":
this.router.navigate(["/ep", event.ep.id]);
break;
}
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.
*/
ngOnDestroy() {
if(this.epDisponiblesSubscription != undefined) {
this.epDisponiblesSubscription.unsubscribe();
}
}
}

@ -16,7 +16,7 @@
<select-filter
[dataSource]="bus"
[checkedAll]="false"
[checkedAll]="true"
label="BU"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllCheckbox($event)"
@ -25,7 +25,7 @@
<checkbox-filter
[dataSource]="bus"
[checkedAll]="false"
[checkedAll]="true"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllCheckbox($event)"
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
@ -54,57 +54,57 @@
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortDirection="asc">
<ng-container matColumnDef="agence">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
Business Unit
<checkbox-filter
[dataSource]="bus"
[checkedAll]="false"
[checkedAll]="true"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllCheckbox($event)"
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
</checkbox-filter>
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.businessUnit.nom}} </mat-cell>
<mat-cell *matCellDef="let row" > {{row.collaborateur.businessUnit.nom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="collaborateur">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Collaborateur</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.nom}} {{row.collaborateur.prenom}} </mat-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collaborateur</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="emitEvent('collaborateur', row)"> {{row.collaborateur.nom}} {{row.collaborateur.prenom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Référent</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.referent.nom}} {{row.referent.prenom}}</mat-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Référent</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="emitEvent('referent', row)"> {{row.referent.nom}} {{row.referent.prenom}}</mat-cell>
</ng-container>
<ng-container matColumnDef="datearrivee">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Date d'embauche</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.datearrivee | date : 'dd/MM/yyyy'}} </mat-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date d'embauche</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.dateArrivee | date : 'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="statutep">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Staut de l'EP</mat-header-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Staut de l'EP</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ afficherStatutEP(row.statut)}} </mat-cell>
</ng-container>
<ng-container matColumnDef="typeep">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Type EP</mat-header-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Type EP</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ afficherTypeEP(row.type) }}</mat-cell>
</ng-container>
<ng-container matColumnDef="dateentretien">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ row.dataPrevisionnelle | date : 'dd/MM/yyyy'}} </mat-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ row.datePrevisionnelle | date : 'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="datedisponibilite">
<mat-header-cell *matHeaderCellDe></mat-header-cell>
<mat-header-cell *matHeaderCellDef>Date disponibilité</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ row.dateDisponibilite | date : 'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="consultation">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear></mat-header-cell>
<mat-cell *matCellDef="let row"> Consulter EP </mat-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear></mat-header-cell>
<mat-cell *matCellDef="let row" (click)="emitEvent('ep', row)"> Consulter EP </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

@ -72,7 +72,7 @@ export class EpTableComponent implements OnInit{
@Input() rechercherParDate: boolean = true;
@Output() eventEmitter: EventEmitter<EpInformationDTO>;
@Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
epSubscription: Subscription;
@ -85,6 +85,13 @@ export class EpTableComponent implements OnInit{
this.setBUsId();
}
emitEvent(type:string, ep: EpInformationDTO) {
this.eventEmitter.emit({
type: type,
ep: ep
});
}
updateDataSource() {
switch(this.typeRechercheEP) {
case epTypeRecherche.EPEnCours:
@ -102,7 +109,10 @@ export class EpTableComponent implements OnInit{
eps => {
this.dataSource = new MatTableDataSource(eps);
this.epCountSubscription = this.epService.getEPEnCoursCount(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
count => this.taille = count,
count => {
console.log(count);
this.taille = count
},
err => console.log(err)
);
},
@ -113,6 +123,7 @@ export class EpTableComponent implements OnInit{
getEPEnSignes() {
this.epSubscription = this.epService.getEPSignes(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
eps => {
console.log(eps);
this.dataSource = new MatTableDataSource(eps);
this.epCountSubscription = this.epService.getEPSignesCount(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
count => this.taille = count,
@ -133,9 +144,9 @@ export class EpTableComponent implements OnInit{
else {
const collaborateurConnecte : CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
this.bus = collaborateurConnecte.businessUnit.agence.bu;
for(let bu of this.bus) {
/*for(let bu of this.bus) {
this.busIds.push(bu.id);
}
}*/
this.updateDataSource();
this.chargement = false;
}

Loading…
Cancel
Save