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

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

Browse Source
develop
Yanaël GRETTE 4 years ago
parent 011bfd8814
commit f33056fd28
4 changed files with 53 additions and 259 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. 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

68
src/app/home/home-assistante/home-assistante.component.html
Unescape View File

@ -1,67 +1,3 @@
<!-- Barre de recher --> <h2> Liste des EP en cours</h2>
<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>
<!-- Affichage de la liste des EP disponibles--> <ep-table [typeRechercheEP]="typeRechercheEP" [displayedColumns]="displayedColumns" (eventEmitter)="eventEmitter($event)"></ep-table>
<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>

189
src/app/home/home-assistante/home-assistante.component.ts
Unescape View File

@ -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', templateUrl : 'home-assistante.component.html',
styleUrls : [ "./home-assistante.component.css"] styleUrls : [ "./home-assistante.component.css"]
}) })
export class HomeAssistanteComponent implements OnInit, AfterViewInit { export class HomeAssistanteComponent {
displayedColumns: string[] = ["agence", "collaborateur", "referent", "datearrivee", "statutep", "typeep", "dateentretien", "datedisponibilite", "consultation"];
/** typeRechercheEP : string = epTypeRecherche.EPEnCours;
* 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();
} constructor(private router: Router){}
ngAfterViewInit(){}
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);
}
/** eventEmitter(event: any) {
* Retourne l'état d'un EP switch(event.type) {
* A mettre à jour case "collaborateur":
*/ if(event.ep.collaborateur != undefined)
getEtat(etat) { this.router.navigate(["/collaborateurs", event.ep.collaborateur.id])
let res = "";
switch(etat) {
case 1:
res= "Disponible";
break; break;
case 2: case "referent":
res= "Saisi"; if(event.ep.referent != undefined)
this.router.navigate(["/referents", event.ep.referent.id])
break; break;
case 3: case "ep":
res= "Attente de l'entretien"; this.router.navigate(["/ep", event.ep.id]);
break;
case 4:
res= "Entretien prévu";
break;
case 5:
res= "Attente Signature";
break; 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();
}
}
} }

36
src/app/shared/mat-tables/ep-table/ep-table.html
Unescape View File

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

19
src/app/shared/mat-tables/ep-table/ep-table.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save