Merge pull request #1692 from bcgov/feature/ALCS-1903

Change referral to use text area for two fields
bcgov · May 15, 2024 · 6467c22 · 6467c22
2 parents 3b6767d + bae4bd5
commit 6467c22
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;