Ajout d'un popup permettant d'affiche les détails d'un engagement de le valider ou bien le refuser

develop
Yanaël GRETTE 4 years ago
parent 43aac7cbfc
commit 6e404274c3
  1. 30
      src/app/engagements/dialog-engagements.html
  2. 78
      src/app/engagements/engagements.component.ts
  3. 9
      src/app/engagements/engagements.module.ts
  4. 6
      src/app/shared/angular-material/angular-material.module.ts
  5. 15
      src/app/shared/api-swagger/model/etatEngagement.ts
  6. 4
      src/app/shared/mat-tables/engagements-table/engagements-table.html
  7. 13
      src/app/shared/mat-tables/engagements-table/engagements-table.ts

@ -0,0 +1,30 @@
<h3>Détails de l'engagement</h3>
<p> Collaborateur: {{collaborateur.nom}} {{collaborateur.prenom}}</p>
<p> Référent: {{referent.nom}} {{referent.prenom}}</p>
<p>EP effectué le {{ ep.datePrevisionnelle | date: 'dd/MM/yyyy' }} </p>
<p>Action : {{ data.action}}</p>
<p>Modalité: {{ data.modalite }}</p>
<p>Date limite: {{ data.dateLimite | date: 'dd/MM/yyyy' }} </p>
<p>Etat : {{ afficherEtat(data.etatEngagement) }}</p>
<p *ngIf="data.etatEngagement == etatEngagement.NonRealisable"> Raison non réalisable : {{data.raisonNonRealisable}}</p>
<ng-container *ngIf="data.etatEngagement == etatEngagement.EnAttente">
<button mat-raised-button (click)="repondre()">Répondre à l'engagement</button>
<ng-container *ngIf="donnerReponse">
<mat-slide-toggle [(ngModel)]="engagementRespecte">
Engagement respecté
</mat-slide-toggle>
<div>
<mat-form-field *ngIf="!engagementRespecte" appearance="fill">
<mat-label>Raison du refus</mat-label>
<textarea matInput [(ngModel)]="raisonRefus"></textarea>
</mat-form-field>
</div>
<button mat-raised-button (click)="mettreAJourEngagement()">Valider le choix</button>
</ng-container>
</ng-container>
<button mat-raised-button (click)="fermer()">Fermer</button>

@ -1,5 +1,9 @@
import { Component } from "@angular/core";
import { EngagementDTO } from "@shared/api-swagger";
import { Component, Inject } from "@angular/core";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { MatSnackBar } from "@angular/material/snack-bar";
import { CollaborateurDTO, EngagementDTO, EngagementsService, EpInformationDTO, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
import { Subscription } from "rxjs";
@Component({
selector: "app-engagements",
@ -8,9 +12,75 @@ import { EngagementDTO } from "@shared/api-swagger";
export class EngagementsComponent {
displayedColumns : string[] = ["businessunit", "collaborateur", "action", "dispositif", "modalite", "datelimite", "etat"];
constructor() {}
constructor(private dialog: MatDialog) {}
afficherDetailsEngagements(engagement: EngagementDTO) {
console.log(engagement);
const datas = { data: engagement, width: "80%", height: '80%'};
this.dialog.open(DialogEngagementsComponent, datas);
}
}
@Component( {
selector: "dialog-engagements",
templateUrl: "dialog-engagements.html"
})
export class DialogEngagementsComponent {
ep: EpInformationDTO;
collaborateur: CollaborateurDTO;
referent: CollaborateurDTO;
etatEngagement: any = EtatEngagement;
engagementsSubscription: Subscription;
donnerReponse: boolean = false;
raisonRefus : string = "";
engagementRespecte: boolean = true;
constructor(private dialogRef : MatDialogRef<DialogEngagementsComponent>, @Inject(MAT_DIALOG_DATA) public data : EngagementDTO, private engagementsService: EngagementsService,
private snackBar: MatSnackBar){
this.ep = data.ep;
this.collaborateur = data.ep.collaborateur;
this.referent = data.ep.referent;
}
mettreAJourEngagement() {
let engagement : EngagementDTO = this.data;
if(this.engagementRespecte) {
engagement.etatEngagement = EtatEngagement.Respecte;
}
else {
if(this.raisonRefus.length == 0) {
this.snackBar.open("Vous devez justifier le refus de respecter l'engagement.", "Attention", {
duration: 5000,
horizontalPosition: "center",
verticalPosition: "top",
});
return;
}
engagement.raisonNonRealisable = this.raisonRefus;
engagement.etatEngagement = EtatEngagement.NonRealisable;
}
this.engagementsSubscription = this.engagementsService.updateEngagement(engagement, engagement.id).subscribe(
() => location.reload(),
err => console.log(err)
);
}
afficherEtat(etat: EtatEngagement) {
return afficherEtatEngagement(etat);
}
fermer() {
this.dialogRef.close();
}
repondre() {
this.donnerReponse = true;
}
ngOnDestroy() {
if(this.engagementsSubscription != null) {
this.engagementsSubscription.unsubscribe();
}
}
}

@ -5,15 +5,16 @@ import { RouterModule } from '@angular/router';
import { MaterialModule } from "@shared/angular-material/angular-material.module";
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
import { EngagementsComponent } from "./engagements.component";
import { DialogEngagementsComponent, EngagementsComponent } from "./engagements.component";
import { EngagementsRoutingModule } from "./engagements.routing.module";
import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [
EngagementsComponent
EngagementsComponent, DialogEngagementsComponent
],
exports: [],
imports: [
@ -21,7 +22,9 @@ import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
RouterModule,
NavMenuModule,
EngagementsRoutingModule,
MatTablesModule
MatTablesModule,
MaterialModule,
FormsModule
],
})
export class EngagementsModule {}

@ -19,6 +19,8 @@ import {MatSelectModule} from '@angular/material/select';
import {MatStepperModule} from '@angular/material/stepper';
import {MatChipsModule} from '@angular/material/chips';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
@ -36,7 +38,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule,
MatCheckboxModule, MatSelectModule, MatStepperModule,
MatChipsModule, MatSnackBarModule
MatChipsModule, MatSnackBarModule, MatSlideToggleModule
],
exports : [MatCardModule,
MatButtonModule, MatMenuModule,
@ -47,7 +49,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule,
MatCheckboxModule, MatSelectModule, MatStepperModule,
MatChipsModule, MatSnackBarModule
MatChipsModule, MatSnackBarModule, MatSlideToggleModule
]
})
export class MaterialModule {}

@ -20,4 +20,17 @@ export const EtatEngagement = {
Respecte: 'Respecte' as EtatEngagement,
NonRealisable: 'NonRealisable' as EtatEngagement,
DateLimitePassee: 'DateLimitePassee' as EtatEngagement
};
};
export function afficherEtatEngagement(etatEngagement: EtatEngagement) {
switch(etatEngagement) {
case EtatEngagement.Respecte:
return "Respecté";
case EtatEngagement.NonRealisable:
return "Non réalisable";
case EtatEngagement.EnAttente:
return "En attente";
case EtatEngagement.DateLimitePassee:
return "Date limite passée";
}
}

@ -47,7 +47,7 @@
<ng-container matColumnDef="dispositif">
<mat-header-cell *matHeaderCellDef>Dispositif</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.dispotitif}}</mat-cell>
<mat-cell *matCellDef="let row">{{row.dispositif}}</mat-cell>
</ng-container>
<ng-container matColumnDef="modalite">
@ -57,7 +57,7 @@
<ng-container matColumnDef="datelimite">
<mat-header-cell *matHeaderCellDef>Date limite</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.dateLimite}}</mat-cell>
<mat-cell *matCellDef="let row">{{row.dateLimite | date :'dd/MM/yyyy'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="etat">

@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { MatTableDataSource } from "@angular/material/table";
import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement } from "@shared/api-swagger";
import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
import { cles, engagementTypeRecherche } from "@shared/utils/cles";
import { EngagementsRoutingModule } from "app/engagements/engagements.routing.module";
import { Subscription } from "rxjs";
@ -122,16 +122,7 @@ export class EngagementTableComponent implements OnInit {
}
afficherEtat(etat: EtatEngagement) {
switch(etat) {
case EtatEngagement.Respecte:
return "Respecté";
case EtatEngagement.NonRealisable:
return "Non réalisable";
case EtatEngagement.EnAttente:
return "En attente";
case EtatEngagement.DateLimitePassee:
return "Date limite passée";
}
return afficherEtatEngagement(etat);
}
/**

Loading…
Cancel
Save