From bae4bd52991f122b14766d1c8b309d3a1a93b207 Mon Sep 17 00:00:00 2001
From: Daniel Haselhan <daniel@bit3.ca>
Date: Wed, 15 May 2024 14:55:49 -0700
Subject: [PATCH] Change referral to use text area for two fields

* Update text area so it wraps text
* Move edit button to after the text instead of to the right of it
---
 .../planning-review/referrals/referral.component.html |  4 ++--
 .../inline-textarea/inline-textarea.component.html    | 11 ++++++-----
 .../inline-textarea/inline-textarea.component.scss    |  5 +++--
 .../inline-textarea/inline-textarea.component.ts      |  3 ++-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/alcs-frontend/src/app/features/planning-review/referrals/referral.component.html b/alcs-frontend/src/app/features/planning-review/referrals/referral.component.html
index fe1570dfe2..4d361f8d8b 100644
--- a/alcs-frontend/src/app/features/planning-review/referrals/referral.component.html
+++ b/alcs-frontend/src/app/features/planning-review/referrals/referral.component.html
@@ -39,7 +39,7 @@ <h5>Referral #{{ planingReferrals.length - i }}</h5>
         <div>
           <div class="subheading2">Referral Description</div>
           <div>
-            <app-inline-text
+            <app-inline-textarea
               [value]="referral.referralDescription"
               [required]="true"
               (save)="updateReferralField(referral.uuid, 'referralDescription', $event)"
@@ -61,7 +61,7 @@ <h5>Referral #{{ planingReferrals.length - i }}</h5>
           <div>
             <div class="subheading2">Response Description</div>
             <div>
-              <app-inline-text
+              <app-inline-textarea
                 [value]="referral.responseDescription"
                 [required]="true"
                 (save)="updateReferralField(referral.uuid, 'responseDescription', $event)"
diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.html b/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.html
index 8b4e4583c7..31c2649324 100644
--- a/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.html
+++ b/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.html
@@ -1,12 +1,12 @@
-<div class="inline-number-wrapper">
-  <span class="left" *ngIf="!isEditing">
+<div class="inline-textarea-wrapper">
+  <span *ngIf="!isEditing">
     <a (click)="startEdit()" class="add" *ngIf="!value"> Add text </a>
     <span *ngIf="value">
       {{ value }}
+      <button *ngIf="value" class="edit-button" mat-icon-button (click)="startEdit()">
+        <mat-icon class="edit-icon">edit</mat-icon>
+      </button>
     </span>
-    <button *ngIf="value" class="edit-button" mat-icon-button (click)="startEdit()">
-      <mat-icon class="edit-icon">edit</mat-icon>
-    </button>
   </span>
   <div
     class="editing"
@@ -25,6 +25,7 @@
       [(ngModel)]="pendingValue"
       (keydown.enter)="confirmEdit()"
       (keydown.escape)="cancelEdit()"
+      [required]="required"
     ></textarea>
 
     <div class="button-container">
diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.scss b/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.scss
index 5775eff0d0..b318889538 100644
--- a/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.scss
+++ b/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.scss
@@ -1,7 +1,8 @@
 @use '../../../../styles/colors';
 
-.inline-number-wrapper {
+.inline-textarea-wrapper {
   padding-top: 4px;
+  white-space: pre-line;
 }
 
 .editing {
@@ -16,7 +17,7 @@
 .edit-button {
   height: 24px;
   width: 24px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 
diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.ts b/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.ts
index 34d879ecc0..3b28d9b341 100644
--- a/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.ts
+++ b/alcs-frontend/src/app/shared/inline-editors/inline-textarea/inline-textarea.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentChecked, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-inline-textarea[value]',
@@ -8,6 +8,7 @@ import { AfterContentChecked, Component, ElementRef, EventEmitter, Input, Output
 export class InlineTextareaComponent {
   @Input() value?: string | undefined;
   @Input() placeholder: string = 'Enter a value';
+  @Input() required = false;
   @Output() save = new EventEmitter<string | null>();
 
   @ViewChild('editInput') textInput!: ElementRef;