Yanaël GRETTE
5 years ago
parent
c437ee83c4
commit
253fe14956
@ -0,0 +1,100 @@ |
||||
mat-table { |
||||
width: 85%; |
||||
margin-left: 5%; |
||||
margin-right: 5%; |
||||
} |
||||
|
||||
mat-paginator { |
||||
margin-top: 1%; |
||||
margin-right: 10%; |
||||
} |
||||
|
||||
mat-form-field { |
||||
width: auto; |
||||
margin-left: 5%; |
||||
} |
||||
/* |
||||
table{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.mat-column-username { |
||||
word-wrap: break-word !important; |
||||
white-space: unset !important; |
||||
flex: 0 0 28% !important; |
||||
width: 28% !important; |
||||
overflow-wrap: break-word; |
||||
word-wrap: break-word; |
||||
|
||||
word-break: break-word; |
||||
|
||||
-ms-hyphens: auto; |
||||
-moz-hyphens: auto; |
||||
-webkit-hyphens: auto; |
||||
hyphens: auto; |
||||
} |
||||
|
||||
.mat-column-emailid { |
||||
word-wrap: break-word !important; |
||||
white-space: unset !important; |
||||
flex: 0 0 25% !important; |
||||
width: 25% !important; |
||||
overflow-wrap: break-word; |
||||
word-wrap: break-word; |
||||
|
||||
word-break: break-word; |
||||
|
||||
-ms-hyphens: auto; |
||||
-moz-hyphens: auto; |
||||
-webkit-hyphens: auto; |
||||
hyphens: auto; |
||||
} |
||||
|
||||
.mat-column-contactno { |
||||
word-wrap: break-word !important; |
||||
white-space: unset !important; |
||||
flex: 0 0 17% !important; |
||||
width: 17% !important; |
||||
overflow-wrap: break-word; |
||||
word-wrap: break-word; |
||||
|
||||
word-break: break-word; |
||||
|
||||
-ms-hyphens: auto; |
||||
-moz-hyphens: auto; |
||||
-webkit-hyphens: auto; |
||||
hyphens: auto; |
||||
} |
||||
|
||||
.mat-column-userimage { |
||||
word-wrap: break-word !important; |
||||
white-space: unset !important; |
||||
flex: 0 0 8% !important; |
||||
width: 8% !important; |
||||
overflow-wrap: break-word; |
||||
word-wrap: break-word; |
||||
|
||||
word-break: break-word; |
||||
|
||||
-ms-hyphens: auto; |
||||
-moz-hyphens: auto; |
||||
-webkit-hyphens: auto; |
||||
hyphens: auto; |
||||
} |
||||
|
||||
.mat-column-userActivity { |
||||
word-wrap: break-word !important; |
||||
white-space: unset !important; |
||||
flex: 0 0 10% !important; |
||||
width: 10% !important; |
||||
overflow-wrap: break-word; |
||||
word-wrap: break-word; |
||||
|
||||
word-break: break-word; |
||||
|
||||
-ms-hyphens: auto; |
||||
-moz-hyphens: auto; |
||||
-webkit-hyphens: auto; |
||||
hyphens: auto; |
||||
} |
||||
*/ |
||||
@ -1 +1,52 @@ |
||||
<h1> Page assistante </h1> |
||||
<h1> Bienvenu.e</h1> |
||||
|
||||
<h1>AU DESSUS</h1> |
||||
|
||||
|
||||
<mat-form-field> |
||||
<mat-label>Recherche un collaborateur</mat-label> |
||||
<input matInput type="text" [(ngModel)]="search" (keyup)="applyFilter($event.target.value)"> |
||||
<mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="search=''"> |
||||
<mat-icon>close</mat-icon> |
||||
</mat-button> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<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.agence}} </mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="info"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Collaborateur </mat-header-cell> |
||||
<mat-cell *matCellDef="let row"> {{row.info}} </mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="type"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell> |
||||
<mat-cell *matCellDef="let row"> {{row.type}} </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.datemail}} </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"> {{row.dateentretien}} </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.etat}} </mat-cell> |
||||
</ng-container> |
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> |
||||
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> |
||||
</mat-table> |
||||
<mat-paginator #paginatorEP [pageSizeOptions]="[1, 5, 10, 25, 50, 100]"> </mat-paginator> |
||||
|
||||
<h1>EN DESSOUS</h1> |
||||
|
||||
@ -1,23 +1,179 @@ |
||||
import { Component, OnInit, OnDestroy } from '@angular/core'; |
||||
import { Component, OnInit, OnDestroy, ViewChild, ViewChildren, AfterViewInit } from '@angular/core'; |
||||
|
||||
import { KeycloakService } from 'keycloak-angular'; |
||||
import { Observable, Subscription } from 'rxjs'; |
||||
|
||||
import {MatTableDataSource} from '@angular/material/table'; |
||||
import {MatPaginator} from '@angular/material/paginator'; |
||||
import {MatSort} from '@angular/material/sort'; |
||||
|
||||
import { ServiceCollaborateur, ServiceEP } from "../../service"; |
||||
import { CollaborateurModel } from "../../modeles/modele-collaborateur"; |
||||
import { EpModel } from "../../modeles/modele-ep"; |
||||
import { DisplayEP } from "../../utils/displayEP"; |
||||
|
||||
@Component({ |
||||
selector : 'home-assistante', |
||||
templateUrl : 'home-assistante.component.html' |
||||
templateUrl : 'home-assistante.component.html', |
||||
styleUrls : [ "./home-assistante.component.css"] |
||||
}) |
||||
export class HomeAssistanteComponent implements OnInit { |
||||
export class HomeAssistanteComponent implements OnInit, AfterViewInit { |
||||
|
||||
epDisponibles : DisplayEP[]; |
||||
epFiltre : DisplayEP[]; |
||||
private epDisponiblesSubscription : Subscription; |
||||
displayedColumns: string[] = ["agence", "info", "datemail", "dateentretien", "etat", "type"]; |
||||
dataSource : MatTableDataSource<DisplayEP>; |
||||
search = ""; |
||||
@ViewChild(MatPaginator) paginator: MatPaginator; |
||||
@ViewChild(MatSort) sort: MatSort; |
||||
|
||||
constructor() { |
||||
|
||||
constructor(public keycloakService : KeycloakService, private serviceCollaborateur : ServiceCollaborateur, |
||||
private serviceEP : ServiceEP) { |
||||
} |
||||
|
||||
ngAfterViewInit() { |
||||
console.log("VIEWINITED"); |
||||
} |
||||
|
||||
initDisplay(eps) { |
||||
console.log("INITDISPLAY"); |
||||
this.epDisponibles = [] |
||||
let epDisplay : DisplayEP; |
||||
for(let ep of eps) { |
||||
epDisplay = new DisplayEP(); |
||||
epDisplay.id = ep.id; |
||||
epDisplay.agence = ep.collaborateur.agence; |
||||
epDisplay.info = ep.collaborateur.nom+" "+ep.collaborateur.prenom; |
||||
epDisplay.dateentretien = ep.dateEntretien; |
||||
epDisplay.datemail = ep.dateDisponibilite; |
||||
epDisplay.etat = ep.etat; |
||||
epDisplay.type = ep.type; |
||||
this.epDisponibles.push(epDisplay); |
||||
} |
||||
} |
||||
|
||||
|
||||
refreshDataSource() { |
||||
console.log("REFRESH"); |
||||
this.epFiltre =this.epDisponibles; |
||||
this.dataSource = new MatTableDataSource(this.epFiltre); |
||||
console.log(this.dataSource.paginator); |
||||
this.dataSource.paginator = this.paginator; |
||||
console.log(this.dataSource.paginator); |
||||
console.log(this.paginator); |
||||
this.dataSource.sort = this.sort; |
||||
} |
||||
|
||||
ngOnInit() { |
||||
console.log("INIT"); |
||||
this.epDisponiblesSubscription = this.serviceEP.listeEPDisponibles(). |
||||
subscribe(eps => { |
||||
this.initDisplay(eps); |
||||
this.refreshDataSource(); |
||||
}); |
||||
} |
||||
|
||||
applyFilter(filterValue: string) { |
||||
console.log(filterValue); |
||||
filterValue = filterValue.trim(); |
||||
filterValue = filterValue.toLowerCase(); |
||||
this.dataSource.filter = filterValue; |
||||
} |
||||
|
||||
ngOnDestroy() { |
||||
console.log("DESTROY"); |
||||
if(this.epDisponiblesSubscription != null) { |
||||
this.epDisponiblesSubscription.unsubscribe(); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
/*private collabListSubscription : Subscription; |
||||
private collab1Subscription : Subscription; |
||||
private collab2Subscription : Subscription; |
||||
private listeCollaborateurs : CollaborateurModel[]; |
||||
private formationSubscription : Subscription; |
||||
private addFormationSubscription : Subscription; |
||||
|
||||
private epEnvoieSubscription : Subscription; |
||||
private epCollaborateurSubscription : Subscription; |
||||
private epDisponiblesSubscription : Subscription; |
||||
private epCollaborateurProchain : Subscription; |
||||
|
||||
//*/
|
||||
//********TEST********//
|
||||
/*let ep = new EpModel(); |
||||
ep.id = 10; |
||||
ep.type ="EPA"; |
||||
//ep.dateDisponibilite = new Date(2020,0,5,25,30);
|
||||
ep.dateDisponibilite = new Date(2020,0,0,25,30); |
||||
ep.etat = "créer"; |
||||
let collaborateur = new CollaborateurModel(); |
||||
collaborateur.id = 1; |
||||
collaborateur.nom = "GRETTE"; |
||||
collaborateur.prenom = "Yanaël"; |
||||
collaborateur.mail = "yanael.grette@apside-groupe.com"; |
||||
collaborateur.agence = "Orléans"; |
||||
collaborateur.fonction = "Stagiaire"; |
||||
|
||||
ep.collaborateur = collaborateur; |
||||
this.epEnvoieSubscription = this.serviceEP.envoieEP(ep, "saisie"). |
||||
subscribe(eps => this.display(eps)); |
||||
//this.epCollaborateurProchain = this.serviceEP.prochainEPCollaborateur(3).
|
||||
//subscribe(eps => this.display(eps));
|
||||
//this.epCollaborateurSubscription = this.serviceEP.listeEPCollaborateur(1).
|
||||
//subscribe(eps => this.display(eps));
|
||||
|
||||
/* |
||||
let formation = new FormationModel(); |
||||
formation.intitule = "TestJAVA"; |
||||
formation.dateDebut = new Date("10-12-2020"); |
||||
formation.dateFin = new Date("10-12-2020"); |
||||
formation.statut = "Prévue"; |
||||
formation.lieu = "Orléans"; |
||||
formation.duree = 5; |
||||
formation.organisme = "Apside"; |
||||
formation.nomFormateur = "Patrick"; |
||||
console.log(formation.dateDebut); |
||||
this.addFormationSubscription = this.serviceFormation.nouvelleFormation(formation) |
||||
.subscribe(); |
||||
this.formationSubscription = this.serviceFormation.listeFormations() |
||||
.subscribe(formations=> this.display(formations)); |
||||
/* |
||||
this.collabListSubscription = this.serviceCollaborateur.listeCollaborateurs(token). |
||||
subscribe(collaborateurs => this.test(collaborateurs)); |
||||
let params = { mail : "angelique@apside.com"}; |
||||
this.collab1Subscription = this.serviceCollaborateur.getCollaborateurByParam(token,params). |
||||
subscribe(collaborateurs => this.test2(collaborateurs)); |
||||
let params2 = { id : 1 }; |
||||
this.collab2Subscription = this.serviceCollaborateur.getCollaborateurByParam(token,params2). |
||||
subscribe(collaborateurs => this.test2(collaborateurs)); |
||||
|
||||
console.log(token);* |
||||
//*/
|
||||
|
||||
|
||||
/*if(this.collabListSubscription != null) { |
||||
this.collabListSubscription.unsubscribe(); |
||||
}*/ |
||||
/* |
||||
if(this.formationSubscription != null) { |
||||
this.formationSubscription.unsubscribe(); |
||||
} |
||||
if(this.addFormationSubscription != null) { |
||||
this.addFormationSubscription.unsubscribe(); |
||||
} |
||||
if(this.epEnvoieSubscription != null) { |
||||
this.epEnvoieSubscription.unsubscribe(); |
||||
} |
||||
if(this.epCollaborateurSubscription != null) { |
||||
this.epCollaborateurSubscription.unsubscribe(); |
||||
} |
||||
if(this.epDisponiblesSubscription != null) { |
||||
this.epDisponiblesSubscription.unsubscribe(); |
||||
} |
||||
if(this.epCollaborateurProchain != null) { |
||||
this.epCollaborateurProchain.unsubscribe(); |
||||
} |
||||
*/ |
||||
|
||||
@ -0,0 +1,9 @@ |
||||
export class DisplayEP { |
||||
id : number; |
||||
agence : string; |
||||
info : string; |
||||
dateentretien : Date; |
||||
datemail : Date; |
||||
etat : string; |
||||
type : string; |
||||
} |
||||
Loading…
Reference in new issue