Detail

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>

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;

src/app/profile/dashboard/orientation-details/orientation-details.component.ts

-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) => {