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

Mise à jour de l'affichage de la liste des référents avec un fonctionnement similaire que celui de la page de la liste des collaborateurs

Browse Source
develop
Yanaël GRETTE 4 years ago
parent ef2ed5a0b6
commit 940cdd8801
5 changed files with 187 additions and 54 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. 4
      src/app/collaborateurs/collaborateurs.component.html
  2. 17
      src/app/collaborateurs/collaborateurs.component.ts
  3. 51
      src/app/referents/referents.component.html
  4. 137
      src/app/referents/referents.component.ts
  5. 4
      src/app/referents/referents.module.ts

4
src/app/collaborateurs/collaborateurs.component.html
Unescape View File

@ -17,7 +17,6 @@
</mat-button>
</mat-form-field>
<!-- Datepicker début -->
<!--Checkboxes des BU-->
@ -27,6 +26,7 @@
</li>
</ul>
<!-- Datepicker début -->
<mat-form-field >
<mat-label>Date de début</mat-label>
<input [(ngModel)]="dateDebut" matInput [matDatepicker]="dateDebutPicker" [max]="dateFin" disabled (dateChange)="updateDataSource()">
@ -80,7 +80,7 @@
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="pageEvent = updatePageInfo($event)"
(page)="updatePageInfo($event)"
>
</mat-paginator>
</ng-container>

17
src/app/collaborateurs/collaborateurs.component.ts
Unescape View File

@ -1,12 +1,9 @@
import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { Observable, Subscription } from 'rxjs';
import { Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
import { CollaborateursService } from "@shared/api-swagger/api/api";
@ -39,15 +36,17 @@ export class CollaborateursComponent implements OnInit {
/**
* Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
*/
roles : string[] = [];
private roles : string[] = ["Collaborateur"];
/**
* Observable pour faire des requêtes sur le service collaborateur.
*/
private collaborateursDisponiblesSubscription : Subscription;
/**
* Observable pour faire des requêtes sur le service collaborateur.
*/
private collaborateursDisponiblesCountSubscription : Subscription;
/**
* Liste des colonnes du tableau à afficher.
*/
@ -89,9 +88,6 @@ export class CollaborateursComponent implements OnInit {
*/
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
*/
@ -151,11 +147,10 @@ export class CollaborateursComponent implements OnInit {
* 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) : PageEvent{
updatePageInfo(event){
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateDataSource();
return event;
}
/**

51
src/app/referents/referents.component.html
Unescape View File

@ -1,20 +1,51 @@
<app-nav-menu></app-nav-menu>
<h1>Liste des référents</h1>
<!-- AFfichage de la liste des référents -->
<mat-table matSort [dataSource]="dataSource">
<ng-container matColumnDef="agence">
<mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
<ng-container *ngIf="chargement">
<mat-spinner></mat-spinner>
</ng-container>
<ng-container *ngIf="!chargement">
<!-- Barre de recherche -->
<mat-form-field>
<mat-label>Rechercher un référent</mat-label>
<input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
<mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
<mat-icon>close</mat-icon>
</mat-button>
</mat-form-field>
<!--Checkboxes des BU-->
<ul>
<li *ngFor="let bu of bus">
<mat-checkbox (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
</li>
</ul>
<!-- AFfichage de la liste des référents -->
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc">
<ng-container matColumnDef="businessunit">
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.businessUnit.nom}}</mat-cell>
</ng-container>
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
<!-- Lien vers les détails du référent-->
<mat-cell *matCellDef="let row" [routerLink]="['/referents', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
<ng-container matColumnDef="collaborateur">
<mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Référent</mat-header-cell>
<mat-cell *matCellDef="let row" >{{row.nom}} {{row.prenom}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/referents', row.id]"></mat-row>
</mat-table>
<mat-paginator #paginator
[length] = "taille"
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="updatePageInfo($event)"
>
</mat-paginator>
</ng-container>

137
src/app/referents/referents.component.ts
Unescape View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
@ -8,8 +8,8 @@ import {MatSort} from '@angular/material/sort';
import { CollaborateursService } from "@shared/api-swagger/api/api";
import { CollaborateurDTO } from "@shared/api-swagger/model/models";
import { BusinessUnitDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
import { CollaborateurConnecte } from "@shared/globales/collaborateur-connecte"
/**
*/
@ -30,7 +30,7 @@ export class ReferentsComponent implements OnInit {
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage = 5;
parPage = 15;
/**
* Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
*/
@ -40,10 +40,15 @@ export class ReferentsComponent implements OnInit {
*/
private referentsDisponiblesSubscription : Subscription;
/**
* Observable pour faire des requêtes sur le service référent.
*/
private referentsDisponiblesCountSubscription : Subscription;
/**
* Liste des colonnes du tableau à afficher.
*/
displayedColumns : string[] = ["agence", "referent"];
displayedColumns : string[] = ["businessunit", "collaborateur"];
/**
* Objet pour stocker la liste des référents qui seront récupérés par le service référént
@ -52,34 +57,49 @@ export class ReferentsComponent implements OnInit {
/**
* Liste des rôles pour préciser que l'on souhaite récupérer les commerciaux
*/
roles : string[] = ["referent"];
roles : string[] = ["Manager", "RA", "CP", "TL"];
/**
* contenu de la recherche.
*/
search = "";
/**
* Permet d'indiquer au serveur sur quel attribut de l'objet CollaborateurDTO on souhaite faire le tri
*/
tri = "";
tri = "collaborateur";
/**
* Pagination du tableau.
* Options pour choisir le nombre de page à affiche
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
pageOption = [ 5, 15, 20, 30, 50];
/**
* Tri par les éléments du tableau selon la colonne choisie.
* Liste des business units du collaborateur connecté
*/
@ViewChild(MatSort) sort: MatSort;
bus: Array<BusinessUnitDTO> = [];
/**
* Liste des id des business units des collaborateurs à afficher
*/
private busIds: Array<number> = [];
/**
* Nombre total d'élément du tableau
*/
taille: number;
/**
* Spécifie si la liste des référents est en cours de chargement et d'écriture dans le tableau.
*/
chargement = true;
constructor(private service: CollaborateursService) {}
constructor(private service: CollaborateursService, private collaborateurConnecte: CollaborateurConnecte) {}
ngOnInit() {
this.updateDataSource();
this.setBUsId();
}
/**
@ -87,12 +107,97 @@ export class ReferentsComponent implements OnInit {
* 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.referentsDisponiblesSubscription = this.service.getCollaborateurs(this.roles,[1],this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
if(this.busIds.length == 0) {
this.taille = 0;
this.dataSource = new MatTableDataSource(undefined);
return;
}
this.referentsDisponiblesSubscription = this.service.getCollaborateurs(this.roles, this.busIds,this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
referents => this.dataSource = new MatTableDataSource(referents),
err => console.log(err)
);
//this.dataSource.paginator = this.paginator;
//this.dataSource.sort = this.sort;
this.referentsDisponiblesCountSubscription = this.service.getCollaborateursCount(this.roles, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
count => this.taille=count,
err => console.log(err)
);
}
/**
* Mettre à jour la liste des
* @param event case cochée ou décochée
* @param bu business unit concerné par la checkbox cochée ou décochée
*/
updateCheckbox(event, bu) {
// si la checkbox a été cochée
if(event) {
this.busIds.push(bu.id)
}
else{
this.busIds = this.busIds.filter( (id) => id != bu.id);
}
this.numPage = 1;
this.updateDataSource();
}
/**
* 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();
}
/**
* création de la liste des business unit du collaborateur connecté pour afficher les checkboxes
*/
setBUsId() {
if(this.collaborateurConnecte.collaborateur == undefined) {
setTimeout( () => this.setBUsId(), 1000);
}
else {
this.bus = this.collaborateurConnecte.collaborateur.businessUnit.agence.bu;
for(let bu of this.bus) {
this.busIds.push(bu.id);
}
this.updateDataSource();
this.chargement = false;
}
}
/**
* 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();
}
/**

4
src/app/referents/referents.module.ts
Unescape View File

@ -1,7 +1,7 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from "@shared/angular-material/angular-material.module";
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
@ -19,7 +19,9 @@ import { ReferentsRoutingModule } from './referents.routing.module';
CommonModule,
MaterialModule,
NavMenuModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
ReferentsRoutingModule
],
})

Write Preview
Loading…
Cancel
Save