💄 Trip: notes edition toggle

src/src/app/components/trip/trip.component.ts

@@ -1850,7 +1850,8 @@ export class TripComponent implements AfterViewInit {
     })!;
 
     modal.onClose.pipe(take(1)).subscribe({
-      next: (notes: string | null) => {
+      next: (notes: string) => {
+        if (notes === undefined) return;
         this.apiService
           .putTrip({ notes: notes ?? "" }, this.trip!.id)
           .pipe(take(1))

src/src/app/modals/trip-notes-modal/trip-notes-modal.component.html

@@ -1,12 +1,30 @@
 <section>
   <div>
+    @if (isEditing) {
     <p-floatlabel variant="in">
       <textarea pTextarea id="notes" [formControl]="notes" rows="4" autoResize fluid></textarea>
       <label for="notes">Notes</label>
     </p-floatlabel>
+    } @else {
+    @if (notes.value) {
+    <div class="mt-4 border-l-3 border-gray-900 pl-6 py-2">
+      <p class="leading-relaxed text-gray-800 whitespace-pre-line">{{ notes.value }}</p>
+    </div>
+    } @else {
+    <div class="text-center">
+      <p class="mt-2 text-gray-500 dark:text-gray-400">Nothing yet.</p>
+    </div>
+    }
+    }
   </div>
 
-  <div class="mt-4 text-right">
+  <div class="mt-4 flex justify-between">
-    <p-button (click)="closeDialog()" label="Confirm" />
+    @if (isEditing) {
+    <p-button text label="Cancel" icon="pi pi-times" severity="danger" (click)="cancelEditing()" />
+    <p-button (click)="closeDialog()" [disabled]="notes.pristine" label="Confirm" />
+    } @else {
+    <div></div>
+    <p-button text label="Edit" icon="pi pi-pencil" (click)="toggleEditing()" />
+    }
   </div>
 </section>

src/src/app/modals/trip-notes-modal/trip-notes-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder, FormControl, ReactiveFormsModule } from "@angular/forms";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { ButtonModule } from "primeng/button";
 import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
 import { FloatLabelModule } from "primeng/floatlabel";
@@ -18,11 +18,11 @@ import { TextareaModule } from "primeng/textarea";
   styleUrl: "./trip-notes-modal.component.scss",
 })
 export class TripNotesModalComponent {
-  notes = new FormControl("");
+  notes = new FormControl('');
+  isEditing: boolean = false;
 
   constructor(
     private ref: DynamicDialogRef,
-    private fb: FormBuilder,
     private config: DynamicDialogConfig,
   ) {
     if (this.config.data) {
@@ -30,6 +30,16 @@ export class TripNotesModalComponent {
     }
   }
 
+  cancelEditing() {
+    this.notes.setValue(this.config.data);
+    this.notes.markAsPristine();
+    this.toggleEditing();
+  }
+
+  toggleEditing() {
+    this.isEditing = !this.isEditing;
+  }
+
   closeDialog() {
     // Normalize data for API POST
     this.ref.close(this.notes.value);