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

develop
Yanaël GRETTE 4 years ago
parent ef2ed5a0b6
commit 940cdd8801
  1. 4
      src/app/collaborateurs/collaborateurs.component.html
  2. 17
      src/app/collaborateurs/collaborateurs.component.ts
  3. 47
      src/app/referents/referents.component.html
  4. 137
      src/app/referents/referents.component.ts
  5. 4
      src/app/referents/referents.module.ts

@ -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>

@ -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;
}
/**

@ -1,20 +1,51 @@
<app-nav-menu></app-nav-menu>
<h1>Liste des référents</h1>
<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">
<ng-container matColumnDef="agence">
<mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
<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-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>

@ -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";
/**
* Options pour choisir le nombre de page à affiche
*/
pageOption = [ 5, 15, 20, 30, 50];
/**
* Liste des business units du collaborateur connecté
*/
bus: Array<BusinessUnitDTO> = [];
/**
* Pagination du tableau.
* Liste des id des business units des collaborateurs à afficher
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
private busIds: Array<number> = [];
/**
* Tri par les éléments du tableau selon la colonne choisie.
* Nombre total d'élément du tableau
*/
@ViewChild(MatSort) sort: MatSort;
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();
}
/**

@ -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
],
})

Loading…
Cancel
Save