Implémentation de la liste des engagements, des propositions de date et du choix des dates

develop
Yanaël GRETTE 4 years ago
parent 09059dee66
commit 9f348c1b7f
  1. 8
      src/app/ep/details-ep/details-ep.component.html
  2. 5
      src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css
  3. 9
      src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.html
  4. 16
      src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
  5. 7
      src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.ts
  6. 8
      src/app/ep/details-ep/ep-engagements/ep-engagements.component.html
  7. 15
      src/app/ep/details-ep/ep-engagements/ep-engagements.component.ts
  8. 40
      src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.html
  9. 36
      src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.ts
  10. 10
      src/app/ep/ep.module.ts
  11. 7
      src/app/shared/angular-material/angular-material.module.ts
  12. 5
      src/app/shared/mat-tables/engagements-table/engagements-table.ts

@ -49,7 +49,9 @@
</mat-vertical-stepper> </mat-vertical-stepper>
</mat-tab> </mat-tab>
<mat-tab label="Les engagements"></mat-tab> <mat-tab label="Les engagements">
<ep-engagements [engagements]="ep.engagements"></ep-engagements>
</mat-tab>
<mat-tab label="Les demandes de formation"></mat-tab> <mat-tab label="Les demandes de formation"></mat-tab>
<mat-tab label="Commentaire assistant"> <mat-tab label="Commentaire assistant">
@ -57,11 +59,11 @@
</mat-tab> </mat-tab>
<mat-tab label="Choix de dates"> <mat-tab label="Choix de dates">
Le collaborateur choisi une date parmi la liste des dates proposés (collaborateur) <ep-choix-date [rdvsEntretien]="ep.propositionsEntretien"></ep-choix-date>
</mat-tab> </mat-tab>
<mat-tab label="Proposition de date"> <mat-tab label="Proposition de date">
Le référent propose trois dates d'entretien (référent) <ep-propositions-dates [choixTypeEntretien]="ep.choixTypeEntretien"></ep-propositions-dates>
</mat-tab> </mat-tab>
<mat-tab label="Demande délégation"> <mat-tab label="Demande délégation">
<ep-demande-delegation [demande]="ep.demandesDelegation"></ep-demande-delegation> <ep-demande-delegation [demande]="ep.demandesDelegation"></ep-demande-delegation>

@ -0,0 +1,5 @@
.radio-rdv {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}

@ -1 +1,8 @@
<h1>Consultation choix date</h1> <h3>Choisir une date</h3>
<mat-radio-group class="radio-rdv" [(ngModel)]="choixRdv">
<mat-radio-button *ngFor="let rdv of rdvsEntretien" [value]="rdv">
{{rdv.typeEntretien.libelle}} le {{rdv.dateEntretien | date : 'dd/MM/yyyy à hh:mm'}}
</mat-radio-button>
</mat-radio-group>
<button mat-raised-button color="primary">Valider le choix</button>

@ -1,16 +1,16 @@
import { Component, OnInit } from '@angular/core'; import { Component, Input } from '@angular/core';
import { RDVEntretienDTO } from '@shared/api-swagger';
/** /**
* Composant qui permet au collaborateur de faire un choix parmi les date proposées * Composant qui permet au collaborateur de faire un choix parmi les date proposées
*/ */
@Component({ @Component({
selector: 'app-ep-choix-date', selector: 'ep-choix-date',
templateUrl: './ep-choix-date.component.html' templateUrl: './ep-choix-date.component.html',
styleUrls: ["ep-choix-date.component.css"]
}) })
export class EpChoixDateComponent implements OnInit { export class EpChoixDateComponent {
@Input() rdvsEntretien : Array<RDVEntretienDTO>;
choixRdv : RDVEntretienDTO;
constructor() {} constructor() {}
ngOnInit() {
}
} }

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
/** /**
* Composant pour ajouter et voir les demandes de formation * Composant pour ajouter et voir les demandes de formation
@ -7,10 +7,9 @@ import { Component, OnInit } from '@angular/core';
selector: 'app-ep-demandes-formation', selector: 'app-ep-demandes-formation',
templateUrl: './ep-demandes-formation.component.html' templateUrl: './ep-demandes-formation.component.html'
}) })
export class EpDemandesFormationComponent implements OnInit { export class EpDemandesFormationComponent {
constructor() {} constructor() {}
ngOnInit() {
}
} }

@ -0,0 +1,8 @@
<ng-container *ngIf="engagements == undefined || engagements == []">
<h3>Aucun engagements pris</h3>
</ng-container>
<ng-container *ngIf="engagements != undefined && engagements != []">
<engagements-table [displayedColumns]="displayedColumns" [estAffichageEP]="estAffichageEP" [engagementsSaisis]="engagements"></engagements-table>
</ng-container>

@ -0,0 +1,15 @@
import { Component, Input } from "@angular/core";
import { EngagementDTO } from "@shared/api-swagger";
@Component({
selector: "ep-engagements",
templateUrl: "./ep-engagements.component.html"
})
export class EpEngagementsCompenent {
@Input()engagements : EngagementDTO[];
displayedColumns : string[] = ["action", "dispositif", "modalite", "datelimite", "etat"];
estAffichageEP : boolean = true;
constructor(){}
}

@ -1 +1,39 @@
<h1>Saisie propositions dates</h1> <h3>Proposer au moins une date</h3>
<mat-chip-list>
Préférences du collaborateur :
<mat-chip *ngFor="let choix of choixTypeEntretien; let index = index">
N°{{index+1}} {{choix.libelle}}
</mat-chip>
</mat-chip-list>
<ng-container *ngIf="propositionsRdvEntretien.length != nbPropositionMax ">
<div>
<mat-form-field>
<input matInput [(ngModel)]="dateProposee" [ngxMatDatetimePicker]="dateProposeePicker" placeholder="Proposer une date" [min]="dateMin">
<mat-datepicker-toggle matSuffix [for]="dateProposeePicker"> </mat-datepicker-toggle>
<ngx-mat-datetime-picker #dateProposeePicker></ngx-mat-datetime-picker>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Choisir le type d'entretien</mat-label>
<mat-select [(value)]="choixEntretien">
<mat-option></mat-option>
<mat-option *ngFor="let choix of choixTypeEntretien; let index = index" [value]="choix">N°{{index+1}} {{choix.libelle}}</mat-option>
</mat-select>
</mat-form-field>
<p *ngIf="choixEntretien != undefined">Choix : {{choixEntretien.libelle}}</p>
</div>
<div>
<button mat-raised-button (click)="enregistrerChoix()">Ajouter proposition</button>
</div>
</ng-container>
<ul>
<li *ngFor="let proposition of propositionsRdvEntretien; let index = index">
Proposition {{index+1}} : {{proposition.typeEntretien.libelle.toLowerCase()}} le {{proposition.dateEntretien | date : "dd/MM/yyyy à hh:mm"}}
<mat-icon (click)="annulerProposition(proposition)">delete</mat-icon>
</li>
</ul>
<button mat-raised-button color="primary">Valider les dates proposés</button>

@ -1,16 +1,42 @@
import { Component, OnInit } from '@angular/core'; import { Component, Input } from '@angular/core';
import { RDVEntretienDTO, TypeEntretienDTO } from '@shared/api-swagger';
/** /**
* Composant permettant au référent de proposer ses dates d'EP à partir des préférences de lieu d'entretien du collaborateur * Composant permettant au référent de proposer ses dates d'EP à partir des préférences de lieu d'entretien du collaborateur
*/ */
@Component({ @Component({
selector: 'app-ep-propositions-dates', selector: 'ep-propositions-dates',
templateUrl: './ep-propositions-dates.component.html' templateUrl: './ep-propositions-dates.component.html'
}) })
export class EpPropositionsDatesComponent implements OnInit { export class EpPropositionsDatesComponent {
nbPropositionMax = 3;
dateMin: Date;
dateProposee: Date;
choixEntretien : TypeEntretienDTO;
constructor() {} @Input() choixTypeEntretien : Array<TypeEntretienDTO>;
ngOnInit() { propositionsRdvEntretien : Array<RDVEntretienDTO> = [];
constructor() {
this.dateMin = new Date();
this.dateMin.setDate( this.dateMin.getDate() +1);
} }
enregistrerChoix() {
if(this.dateProposee != undefined && this.choixEntretien != undefined) {
let rdv : RDVEntretienDTO = {
dateEntretien : this.dateProposee,
typeEntretien : this.choixEntretien
};
this.propositionsRdvEntretien.push(rdv);
this.dateProposee = undefined;
this.choixEntretien = undefined;
}
}
annulerProposition(proposition:RDVEntretienDTO) {
this.propositionsRdvEntretien = this.propositionsRdvEntretien.filter( p => p!= proposition);
}
} }

@ -1,6 +1,6 @@
import { NgModule } from "@angular/core"; import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { MaterialModule } from "@shared/angular-material/angular-material.module"; import { MaterialModule } from "@shared/angular-material/angular-material.module";
@ -17,6 +17,9 @@ import { EpObjectifsComponent } from "./details-ep/ep-objectifs/ep-objectifs.com
import { EpParticipantsComponent } from "./details-ep/ep-participants/ep-participants.component"; import { EpParticipantsComponent } from "./details-ep/ep-participants/ep-participants.component";
import { EpDemandeDelegationComponent } from "./details-ep/ep-demande-delegation/ep-demande-delegation.component"; import { EpDemandeDelegationComponent } from "./details-ep/ep-demande-delegation/ep-demande-delegation.component";
import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component"; import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component";
import { EpEngagementsCompenent } from "./details-ep/ep-engagements/ep-engagements.component";
import { EpPropositionsDatesComponent } from "./details-ep/ep-propositions-dates/ep-propositions-dates.component";
import { EpChoixDateComponent } from "./details-ep/ep-choix-date/ep-choix-date.component";
/** /**
* Module de l'ep * Module de l'ep
@ -24,7 +27,8 @@ import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-a
@NgModule({ @NgModule({
declarations: [ declarations: [
EpComponent, EpSignesComponent, DetailsEPComponent, EpObjectifsComponent, EpComponent, EpSignesComponent, DetailsEPComponent, EpObjectifsComponent,
EpParticipantsComponent, EpDemandeDelegationComponent, EpCommentairesAssistantComponent EpParticipantsComponent, EpDemandeDelegationComponent, EpCommentairesAssistantComponent,
EpEngagementsCompenent, EpPropositionsDatesComponent, EpChoixDateComponent
], ],
exports: [EpComponent, DetailsEPComponent exports: [EpComponent, DetailsEPComponent
], ],
@ -35,6 +39,8 @@ import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-a
RouterModule, RouterModule,
MatTablesModule, MatTablesModule,
CommonModule, CommonModule,
FormsModule,
ReactiveFormsModule
], ],
}) })
export class EpModule {} export class EpModule {}

@ -12,6 +12,7 @@ import {MatSortModule} from '@angular/material/sort';
import {MatListModule} from '@angular/material/list'; import {MatListModule} from '@angular/material/list';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatTabsModule} from '@angular/material/tabs'; import {MatTabsModule} from '@angular/material/tabs';
import {MatRadioModule} from '@angular/material/radio';
import {MatFormFieldModule} from '@angular/material/form-field'; import {MatFormFieldModule} from '@angular/material/form-field';
import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core'; import {MatNativeDateModule} from '@angular/material/core';
@ -39,7 +40,8 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
NgxMatDatetimePickerModule, MatDatepickerModule, NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule, MatListModule, NgxMatNativeDateModule, MatNativeDateModule, MatListModule,
MatCheckboxModule, MatSelectModule, MatStepperModule, MatCheckboxModule, MatSelectModule, MatStepperModule,
MatChipsModule, MatSnackBarModule, MatSlideToggleModule MatChipsModule, MatSnackBarModule, MatSlideToggleModule,
MatRadioModule
], ],
exports : [MatCardModule, exports : [MatCardModule,
MatButtonModule, MatMenuModule, MatButtonModule, MatMenuModule,
@ -50,7 +52,8 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
NgxMatDatetimePickerModule, MatDatepickerModule, NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule, MatListModule, NgxMatNativeDateModule, MatNativeDateModule, MatListModule,
MatCheckboxModule, MatSelectModule, MatStepperModule, MatCheckboxModule, MatSelectModule, MatStepperModule,
MatChipsModule, MatSnackBarModule, MatSlideToggleModule MatChipsModule, MatSnackBarModule, MatSlideToggleModule,
MatRadioModule
] ]
}) })
export class MaterialModule {} export class MaterialModule {}

@ -77,6 +77,9 @@ export class EngagementTableComponent implements OnInit {
* Liste des colonnes du tableau à afficher. * Liste des colonnes du tableau à afficher.
*/ */
@Input() displayedColumns : string[] = []; @Input() displayedColumns : string[] = [];
/**
* True si il s'agit d'une liste d'engagement affichés lors de la saisie EP référent ou de l'affichage des détails EP
*/
@Input() estAffichageEP: boolean = false; @Input() estAffichageEP: boolean = false;
@Input() engagementsSaisis: EngagementDTO[] = []; @Input() engagementsSaisis: EngagementDTO[] = [];
@ -92,7 +95,9 @@ export class EngagementTableComponent implements OnInit {
ngOnInit() { ngOnInit() {
if(this.estAffichageEP) { if(this.estAffichageEP) {
this.taille = this.engagementsSaisis.length; this.taille = this.engagementsSaisis.length;
this.parPage = this.taille;
this.dataSource = new MatTableDataSource(this.engagementsSaisis); this.dataSource = new MatTableDataSource(this.engagementsSaisis);
this.chargement = false;
} }
else else
this.setBUsId(); this.setBUsId();

Loading…
Cancel
Save