From c31ba2b439d40935be7de2c568c3b7cb8fef526e Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 18 Mar 2025 09:04:43 +0100
Subject: [PATCH] Detail
---
.../orientation-details.component.html | 59 +++++++++++++------
.../orientation-details.component.scss | 14 +++++
.../orientation-details.component.ts | 33 ++++++++---
3 files changed, 82 insertions(+), 24 deletions(-)
diff --git a/src/app/profile/dashboard/orientation-details/orientation-details.component.html b/src/app/profile/dashboard/orientation-details/orientation-details.component.html
index 7dc728f2b..6308a31a7 100644
--- a/src/app/profile/dashboard/orientation-details/orientation-details.component.html
+++ b/src/app/profile/dashboard/orientation-details/orientation-details.component.html
@@ -11,20 +11,26 @@
>
</h1>
<div class="date inline">
- <app-svg-icon [icon]="'clock'" [folder]="'ico'" [iconClass]="'icon-12'" />
+ <app-svg-icon *ngIf="from === 'todoOrientations'" [icon]="'clock'" [folder]="'ico'" [iconClass]="'icon-12'" />
Il y a {{ this.orientationService.daysAgo(orientation.createdAt) }} jour(s)
</div>
</div>
- <!--app-button class="hide-on-mobile" [label]="'Clôturer'" [variant]="'primaryBlack'" (action)="showModal()" /-->
<app-button
- *ngIf="!isEditMode"
+ *ngIf="from === 'todoOrientations'"
+ class="hide-on-mobile"
+ [label]="'Clôturer'"
+ [variant]="'primaryBlack'"
+ (action)="showModal()"
+ />
+ <app-button
+ *ngIf="!isEditMode && from === 'todoOrientations'"
class="hide-on-mobile"
[label]="'Modifier'"
[variant]="'secondary'"
(action)="editOrientation()"
/>
<app-button
- *ngIf="isEditMode"
+ *ngIf="isEditMode && from === 'todoOrientations'"
class="hide-on-mobile"
[label]="'Enregistrer'"
[variant]="'primary'"
@@ -36,16 +42,21 @@
<section>
<span class="secondary-header">
<h2>Traitement</h2>
- <!--app-button class="hide-on-desktop" [label]="'Clôturer'" [variant]="'primaryBlack'" (action)="showModal()" /-->
+ <!--app-button
+ *ngIf="from === 'todoOrientations'"
+ class="hide-on-desktop"
+ [label]="'Clôturer'"
+ [variant]="'primaryBlack'"
+ (action)="showModal()" /-->
<app-button
- *ngIf="!isEditMode"
+ *ngIf="!isEditMode && from === 'todoOrientations'"
class="hide-on-desktop"
[label]="'Modifier'"
[variant]="'secondary'"
(action)="editOrientation()"
/>
<app-button
- *ngIf="isEditMode"
+ *ngIf="isEditMode && from === 'todoOrientations'"
class="hide-on-desktop"
[label]="'Modifier'"
[variant]="'primary'"
@@ -97,10 +108,13 @@
<ng-container *ngIf="orientation.accompanimentType !== 'onlineMediation'">
<div class="inline">
<app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'calendarBlue'" />
- <p>
+ <div class="datePickerContainer">
<span class="category-name">Date de RDV :</span>
- TODO : date + datepicker
- </p>
+ <span class="datePicker">
+ <label for="date">Date:</label>
+ <input type="date" id="date" name="date" />
+ </span>
+ </div>
</div>
<div class="inline">
@@ -146,9 +160,17 @@
<p class="inline">
<span class="category-name">Traité par : </span>
<app-tag-item
- [label]="'Jean-Paul Machin'"
+ *ngIf="orientation.modifiedBy"
+ class="hide-on-mobile"
+ [ariaLabel]="
+ 'Accompagnant souhaité : ' +
+ orientation.modifiedBy.name +
+ ' ' +
+ (orientation.modifiedBy.surname | uppercase)
+ "
+ [label]="orientation.modifiedBy.name + ' ' + orientation.modifiedBy.surname.toUpperCase()"
[iconFolder]="'avatar'"
- [iconName]="'avatar1'"
+ [iconName]="orientation.modifiedBy.avatar || 'avatar1'"
[type]="'entity light'"
/>
</p>
@@ -267,6 +289,7 @@
*ngIf="orientation"
[opened]="isModalOpenned"
[title]="'Clôturer un accompagnement'"
+ [validateDisabled]="isValidateDisabled"
(closed)="closeOrientation($event)"
>
<div class="modalContent emphasized">
@@ -275,17 +298,19 @@
<div class="modalForm">
<div class="subtitle">Statut de l'accompagnement :</div>
<div class="inline">
- <input id="finished" type="radio" name="status" value="finished" />
- <label for="finished">Terminé</label>
+ {{ orientation.status }}
+ <input id="completed" type="radio" name="status" value="completed" [(ngModel)]="selectedStatus" />
+ <label for="completed">Terminé</label>
</div>
<div class="inline">
- <input type="radio" name="status" value="notDone" />
- <label for="notDone">Non réalisé</label>
+ {{ orientation.status }}
+ <input id="uncompleted" type="radio" name="status" value="uncompleted" [(ngModel)]="selectedStatus" />
+ <label for="uncompleted">Non réalisé</label>
</div>
<div>
<label for="comment">Commentaires <span class="optional">(facultatifs)</span></label>
- <app-textarea id="comment" />
+ <app-textarea #comment id="comment" [value]="orientation.closingComment" />
</div>
</div>
</app-modal>
diff --git a/src/app/profile/dashboard/orientation-details/orientation-details.component.scss b/src/app/profile/dashboard/orientation-details/orientation-details.component.scss
index 6bc3a94c0..32ee9921d 100644
--- a/src/app/profile/dashboard/orientation-details/orientation-details.component.scss
+++ b/src/app/profile/dashboard/orientation-details/orientation-details.component.scss
@@ -108,6 +108,20 @@
color: $grey-4-5-1;
}
+ .datePickerContainer {
+ display: flex;
+ align-items: center;
+ .datePicker {
+ display: inline-grid;
+ input {
+ margin-top: 8px;
+ width: 250px;
+ height: 32px;
+ padding: 8px;
+ }
+ }
+ }
+
.pipe {
color: $grey-7;
padding: 8px;
diff --git a/src/app/profile/dashboard/orientation-details/orientation-details.component.ts b/src/app/profile/dashboard/orientation-details/orientation-details.component.ts
index b41811086..33f32448e 100644
--- a/src/app/profile/dashboard/orientation-details/orientation-details.component.ts
+++ b/src/app/profile/dashboard/orientation-details/orientation-details.component.ts
@@ -1,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, SecurityContext, ViewChild } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { User } from '../../../models/user.model';
import { NotificationService } from '../../../services/notification.service';
import { OrientationService } from '../../../services/orientation.service';
+import { TextareaComponent } from '../../../shared/components/textarea/textarea.component';
import { ProfileService } from '../../services/profile.service';
@Component({
@@ -16,13 +18,18 @@ export class OrientationDetailsComponent implements OnInit {
public orientationService: OrientationService,
private notificationService: NotificationService,
private profileService: ProfileService,
+ private sanitizer: DomSanitizer,
) {}
+ @ViewChild('comment', { static: false }) commentTextarea: TextareaComponent;
+
public orientation;
public isModalOpenned = false;
public userProfile: User;
public isEditMode = false;
public from: string;
+ public closingComment = '';
+ public selectedStatus = '';
ngOnInit(): void {
this.route.queryParams.subscribe((params) => {
@@ -34,9 +41,12 @@ export class OrientationDetailsComponent implements OnInit {
if (orientationId) {
this.orientationService.getOrientation(orientationId).subscribe((orientation) => {
this.orientation = orientation;
+ this.acknowledgeNewOrientation();
+ this.selectedStatus = this.orientation.status;
});
}
});
+
this.profileService.getProfile().then((profile) => {
this.userProfile = new User(profile);
});
@@ -52,11 +62,11 @@ export class OrientationDetailsComponent implements OnInit {
public closeOrientation(event): void {
if (event) {
- // close orientation
- // wip test patch
+ const comment = this.commentTextarea?.value || '';
+ const sanitizedComment = this.sanitizer.sanitize(SecurityContext.HTML, comment);
this.patchOrientation({
- status: 'completed',
- closingComment: 'closing comment',
+ status: this.selectedStatus,
+ closingComment: sanitizedComment,
closingDate: new Date(),
modifiedBy: this.userProfile._id,
});
@@ -64,8 +74,13 @@ export class OrientationDetailsComponent implements OnInit {
this.isModalOpenned = false;
}
- public setOrientationStatus(status): void {
- // TODO : patch status
+ public acknowledgeNewOrientation(): void {
+ if (this.orientation.status === 'new') {
+ this.patchOrientation({
+ status: 'acknowledged',
+ modifiedBy: this.userProfile._id,
+ });
+ }
}
public editOrientation(): void {
@@ -86,6 +101,10 @@ export class OrientationDetailsComponent implements OnInit {
// TODO : patch comment
}
+ get isValidateDisabled(): boolean {
+ return !this.selectedStatus || !this.commentTextarea?.value?.trim();
+ }
+
private patchOrientation(updatedFields): void {
this.orientationService.patchOrientation(this.orientation._id, updatedFields).subscribe({
next: (orientation) => {
--
GitLab