Pagination effectuée avec un length en dur

develop
Yanaël GRETTE 4 years ago
parent 26557be67a
commit e374063f7b
  1. 11
      src/app/collaborateurs/collaborateurs.component.html
  2. 23
      src/app/collaborateurs/collaborateurs.component.ts
  3. 6
      src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts
  4. 3
      src/app/formations/details-formation/formation.component.html
  5. 8
      src/app/formations/formations.component.html
  6. 28
      src/app/formations/formations.component.ts
  7. 2
      src/app/formations/new-formation/new-formation.component.html
  8. 8
      src/app/formations/new-formation/new-formation.component.ts
  9. 4
      src/app/home/home-assistante/home-assistante.component.css
  10. 23
      src/app/home/home-assistante/home-assistante.component.html
  11. 37
      src/app/home/home-assistante/home-assistante.component.ts
  12. 9
      src/app/home/home-rh/home-rh.component.html
  13. 22
      src/app/home/home-rh/home-rh.component.ts
  14. 2
      src/app/shared/api-swagger/api/ep.service.ts
  15. 1
      src/app/shared/api-swagger/api/formations.service.ts
  16. 2
      src/app/shared/nav-menu/nav-menu-rh/nav-menu-rh.component.html
  17. 4
      src/environments/environment.ts

@ -16,7 +16,7 @@
<ng-container matColumnDef="dateembauche">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date embauche</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.dateArrivee | date:'yyyy/MM/dd'}}</mat-cell>
<mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="referent">
@ -27,3 +27,12 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *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>

@ -3,7 +3,7 @@ import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { CollaborateurDTO } from '@shared/api-swagger/model/models'
@ -32,7 +32,7 @@ export class CollaborateursComponent 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...).
*/
@ -60,6 +60,12 @@ export class CollaborateursComponent implements OnInit {
*/
tri = "";
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Pagination du tableau.
*/
@ -87,14 +93,23 @@ export class CollaborateursComponent implements OnInit {
*/
updateDataSource() {
//récupérer la liste des collaborateur et mettre à jour le tableau
this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.asc, this.numPage, this.parPage, this.roles, 1, undefined, this.search, this.tri).subscribe(
collaborateurs => this.dataSource = new MatTableDataSource(collaborateurs),
this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.asc, this.numPage, this.parPage, this.roles, undefined, undefined, this.search, this.tri).subscribe(
collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},
err => console.log(err)
);
//this.dataSource.paginator = this.paginator;
//this.dataSource.sort = this.sort;
}
updatePageInfo(event) : PageEvent{
console.log("update")
console.log(event);
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateDataSource();
return event;
}
/**
* Fonction qui calculait le nombre d'année qu'un collaborateur a passé chez Apside (calculer entre la date d'aujourd'hui et la date d'arrivée du collaborateur).
*/

@ -93,8 +93,10 @@ export class DetailsCollaborateurComponent implements OnInit {
this.idCollaborateur = this.route.snapshot.paramMap.get('id');
this.collaborateurSubscription = this.collaborateusrService.getCollaborateurById(this.idCollaborateur).subscribe(
collaborateur => {
this.collaborateur = collaborateur[0];
this.updateEP();
if(this.collaborateur != null) {
this.collaborateur = collaborateur[0];
this.updateEP();
}
},
err => console.log(err)
);

@ -5,8 +5,11 @@
<ng-container>
<h3>Informations générales</h3>
<button mat-raised-button [routerLink]="['edit']">Modifier</button>
<p *ngIf="formation.estCertifie">Certifiée</p>
<p>Etat : {{formation.statut.libelle}}</p>
<p>Date formation : {{formation.dateDebut | date:'dd/MM/yyyy à hh:mm'}}</p>
<p>Nombre de jours : {{formation.jour}}</p>
<p>Nombre d'heures : {{formation.heure}}</p>
<p>Origine : {{formation.origine.libelle}}</p>
<p>Organisme : {{ formation.organisme}}</p>
<p>Mode formation : {{ formation.mode.libelle}}</p>

@ -32,3 +32,11 @@
<!-- 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>

@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { FormationDetailsDTO } from "@shared/api-swagger/model/models";
@ -31,6 +31,9 @@ export class FormationsComponent implements OnInit {
*/
parPage = 5;
etat = 0;
/**
* Observable permettant de faire des requêtes sur le service formation.
*/
@ -52,6 +55,13 @@ export class FormationsComponent implements OnInit {
*/
search = "";
tri = "";
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Pagination du tableau.
*/
@ -66,15 +76,16 @@ export class FormationsComponent implements OnInit {
* Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
*/
chargement = true;
constructor(private service:FormationsService) {
}
ngOnInit() {
this.updateDataSource(0);
this.updateDataSource();
}
updateDataSource(val:number) {
switch ((val)) {
updateDataSource() {
switch ((this.etat)) {
case 0:
this.formationsDisponiblesSubscription = this.service.getFormations(this.asc,this.numPage, this.parPage, 1, undefined, this.search, this.tri).subscribe(
formations => this.dataSource = new MatTableDataSource(formations),
@ -102,6 +113,15 @@ export class FormationsComponent implements OnInit {
//this.dataSource.sort = this.sort;
}
updatePageInfo(event) : PageEvent{
console.log("update")
console.log(event);
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateDataSource();
return event;
}
ngOnDestroy() {
if(this.formationsDisponiblesSubscription != undefined) {
this.formationsDisponiblesSubscription.unsubscribe();

@ -14,7 +14,7 @@
<div>
<!-- Attribut : statut -->
<mat-form-field class="input2">
<mat-label>Statut formationn</mat-label>
<mat-label>Statut formation</mat-label>
<mat-select formControlName="statut">
<mat-option *ngFor="let s of statuts" [value]="s">{{s.libelle}}</mat-option>
</mat-select>

@ -60,17 +60,18 @@ export class NewFormationComponent implements OnInit {
*/
formationForm = this.fb.group(
{
id:[0],
intitule: [""],
origine: [""],
statut : [""],
dateDebut: [""],
dateFin: [""],
heure: [""],
jour: [""],
heure: [2],
jour: [1],
organisme: [""],
mode: [""],
type: [""],
estCertifie: [""],
estCertifie: [false],
idAgence: [1]
}
);
@ -104,6 +105,7 @@ export class NewFormationComponent implements OnInit {
ajouterFormation() {
this.formationSubscription = this.service.ajouterFormation(this.formationForm.value).subscribe(
response => {
console.log(response);
this.router.navigate(['/formations',response["id"]]);
}
);

@ -13,6 +13,10 @@ mat-form-field {
width: auto;
margin-left: 5%;
}
.obligatoire {
background-color: red;
}
/*
table{
width: 100%;

@ -1,10 +1,8 @@
<h1> Bienvenu.e</h1>
<h1>AU DESSUS</h1>
<!-- Barre de recher -->
<mat-form-field>
<mat-label>Recherche un collaborateur</mat-label>
<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>
@ -39,12 +37,12 @@
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.type}} </mat-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"> {{row.statut}} </mat-cell>
<mat-cell *matCellDef="let row"> {{getEtat(row.statut)}} </mat-cell>
</ng-container>
<ng-container matColumnDef="datemail">
@ -54,13 +52,18 @@
<ng-container matColumnDef="dateentretien">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date entretient </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.datePrevisionnelle}} </mat-cell>
<mat-cell *matCellDef="let row" background="#FFFF00"> {{row.datePrevisionnelle}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-row [ngClass]="{'obligatoire': row.obligatoire}" *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginatorEP [pageSize]="25" [pageSizeOptions]="[10, 25, 50, 100]"> </mat-paginator>
<h1>EN DESSOUS</h1>
<mat-paginator #paginator
[length] = "taille"
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="pageEvent = updatePageInfo($event)"
>
</mat-paginator>

@ -4,7 +4,7 @@ import { KeycloakService } from 'keycloak-angular';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { EpInformationDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
@ -37,7 +37,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage = 5;
parPage = 15;
/**
* Variable qui concerne le choix d'une des BU de l'agence à laquelle appartient l'assistante.
*/
@ -52,6 +52,14 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
* En fonction de son utilisation, pourrait remplacer "choixBU".
*/
idsBU : number[] = [];
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Subscription pour récupérer les EP.
*/
@ -88,6 +96,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
*/
chargement = true;
constructor(public keycloakService : KeycloakService, private service:EpService) {
}
@ -109,6 +118,15 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
});
}
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
@ -142,7 +160,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
res= "Saisi";
break;
case 3:
res= "Dates proposées";
res= "Attente de l'entretien";
break;
case 4:
res= "Entretien prévu";
@ -154,6 +172,19 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
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.
*/

@ -36,3 +36,12 @@
<!-- 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>

@ -3,9 +3,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { FormationDetailsDTO } from "@shared/api-swagger/model/models";
import { FormationsService } from "@shared/api-swagger/api/api";
@ -33,12 +32,18 @@ export class HomeRHComponent implements OnInit {
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage = 5;
parPage = 15;
/**
* Permet d'indiquer au serveur sur quel attribut de l'objet ReferentDTO on souhaite faire le tri
*/
tri = "";
taille = 100;
pageOption = [ 5, 15, 20, 30, 50];
pageEvent: PageEvent;
/**
* Observable pour faire des requêtes sur le service formation.
*/
@ -86,6 +91,8 @@ export class HomeRHComponent 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.
*/
updateFormations() {
console.log(this.numPage);
console.log(this.parPage);
this.formationsDisponiblesSubscription = this.service.getProchainesFormation(this.asc, this.numPage, this.parPage, 1, this.search, this.tri).subscribe(
formations => this.dataSource = new MatTableDataSource(formations),
err => console.log(err)
@ -98,6 +105,15 @@ export class HomeRHComponent implements OnInit {
return "Non";
}
updatePageInfo(event) : PageEvent{
console.log("update")
console.log(event);
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateFormations();
return event;
}
/**
* Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
*/

@ -30,7 +30,7 @@ import { Configuration } from '../configurat
@Injectable()
export class EpService {
protected basePath = 'https://localhost:44393/api';
protected basePath = 'http://localhost:3000/api';
public defaultHeaders = new HttpHeaders();
public configuration = new Configuration();

@ -103,7 +103,6 @@ export class FormationsService {
if (httpContentTypeSelected != undefined) {
headers = headers.set('Content-Type', httpContentTypeSelected);
}
return this.httpClient.request<any>('post',`${this.basePath}/formations`,
{
body: body,

@ -22,4 +22,4 @@
<button mat-button routerLink="/collaborateurs">Liste des collaborateurs</button>
<button mat-button>Liste des engagements</button>
</mat-menu>
<button mat-button routerLink="/referents">Liste des référents</button>
<!--<button mat-button routerLink="/referents">Liste des référents</button>-->

@ -7,8 +7,8 @@ import { KeycloakConfig } from 'keycloak-angular';
// Add here your keycloak setup infos
const keycloakConfig: KeycloakConfig = {
url: 'http://localhost:8080/auth',
realm: 'Apside',
clientId: 'GestionEPA'
realm: 'apside',
clientId: 'gestionepa'
};
export const environment = {

Loading…
Cancel
Save