Merge pull request #1914 from bcgov/hotfix/ALCS-2295

Fix Missing NARU Proposed/Existing Residence Data for Files After the Migration
bcgov · Oct 17, 2024 · 728e6e7 · 728e6e7
2 parents 72d0e8d + 9a06865
commit 728e6e7
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 26 deletions.
diff --git a/...s/application/applicant-info/application-details/naru-details/naru-details.component.html b/...s/application/applicant-info/application-details/naru-details/naru-details.component.html
@@ -131,7 +131,12 @@
           {{ i + 1 }}
         </div>
         <div class="grid-2">
-          {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+          <ng-container *ngIf="existingResidence.floorArea === 0; else validFloorArea">
+            <app-no-data></app-no-data>
+          </ng-container>
+          <ng-template #validFloorArea>
+            {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+          </ng-template>
         </div>
         <div class="grid-3">{{ existingResidence.description }}</div>
       </ng-container>
@@ -153,7 +158,14 @@
         <div class="grid-2">
           {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
-        <div class="grid-3">{{ proposedResidence.description }}</div>
+        <div class="grid-3">
+          <ng-container *ngIf="!proposedResidence.description; else validDescription">
+            <app-no-data></app-no-data>
+          </ng-container>
+          <ng-template #validDescription>
+            {{ proposedResidence.description }}
+          </ng-template>
+        </div>
       </ng-container>
     </div>
   </ng-container>

diff --git a/...rc/app/features/applications/application-details/naru-details/naru-details.component.html b/...rc/app/features/applications/application-details/naru-details/naru-details.component.html
@@ -155,7 +155,12 @@
           {{ i + 1 }}
         </div>
         <div>
-          {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+          <ng-container *ngIf="existingResidence.floorArea === 0; else validFloorArea">
+            <app-no-data [showRequired]="showErrors"></app-no-data>
+          </ng-container>
+          <ng-template #validFloorArea>
+            {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+          </ng-template>
         </div>
         <div>{{ existingResidence.description }}</div>
       </ng-container>
@@ -172,6 +177,7 @@
         [residence]="existingResidence"
         [isLast]="last"
         [isReviewStep]="true"
+        [showErrors]="showErrors"
       >
       </app-naru-residence-mobile-card>
     </ng-container>
@@ -193,7 +199,14 @@
       <div>
         {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
       </div>
-      <div>{{ proposedResidence.description }}</div>
+      <div>
+        <ng-container *ngIf="!proposedResidence.description; else validDescription">
+          <app-no-data [showRequired]="showErrors"></app-no-data>
+        </ng-container>
+        <ng-template #validDescription>
+          {{ proposedResidence.description }}
+        </ng-template>
+      </div>
     </ng-container>
   </div>
   <ng-container *ngIf="isMobile">
@@ -208,6 +221,7 @@
       [residence]="proposedResidence"
       [isLast]="last"
       [isReviewStep]="true"
+      [showErrors]="showErrors"
     >
     </app-naru-residence-mobile-card>
   </ng-container>

diff --git a/...features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.html b/...features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.html
@@ -461,7 +461,16 @@ <h2>Proposal</h2>
           <ng-container matColumnDef="floorArea">
             <th mat-header-cell *matHeaderCellDef>Total Floor Area</th>
             <td mat-cell *matCellDef="let element">
-              {{ element.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+              <ng-container *ngIf="element.floorArea === 0; else validFloorArea">
+                <div class="no-data-text-error">No Data</div>
+                <div class="field-error">
+                  <mat-icon>warning</mat-icon>
+                  <div>This field is required</div>
+                </div>
+              </ng-container>
+              <ng-template #validFloorArea>
+                {{ element.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+              </ng-template>
             </td>
           </ng-container>
 
@@ -509,6 +518,7 @@ <h2>Proposal</h2>
           [residence]="existingResidence"
           [isLast]="last"
           [isReviewStep]="false"
+          [showErrors]="showErrors"
           (editClicked)="onAddEditResidence(true, existingResidence, true)"
           (removeClicked)="onDeleteResidence(true, existingResidence)"
         >
@@ -540,10 +550,19 @@ <h2>Proposal</h2>
           <ng-container matColumnDef="description">
             <th mat-header-cell *matHeaderCellDef class="description-column">Description</th>
             <td mat-cell *matCellDef="let element" class="description-data">
-              {{ element.isExpanded ? element.description : getTruncatedDescription(element.description) }}
-              <a *ngIf="isDescriptionTruncated(element.description)" (click)="toggleReadMore(false, element)">
-                {{ element.isExpanded ? 'Read Less' : 'Read More' }}
-              </a>
+              <ng-container *ngIf="!element.description; else validDescription">
+                <div class="no-data-text-error">No Data</div>
+                <div class="field-error">
+                  <mat-icon>warning</mat-icon>
+                  <div>This field is required</div>
+                </div>
+              </ng-container>
+              <ng-template #validDescription>
+                {{ element.isExpanded ? element.description : getTruncatedDescription(element.description) }}
+                <a *ngIf="isDescriptionTruncated(element.description)" (click)="toggleReadMore(false, element)">
+                  {{ element.isExpanded ? 'Read Less' : 'Read More' }}
+                </a>
+              </ng-template>
             </td>
           </ng-container>
 
@@ -581,6 +600,7 @@ <h2>Proposal</h2>
           [residence]="proposedResidence"
           [isLast]="last"
           [isReviewStep]="false"
+          [showErrors]="showErrors"
           (editClicked)="onAddEditResidence(false, proposedResidence, true)"
           (removeClicked)="onDeleteResidence(false, proposedResidence)"
         >
@@ -590,12 +610,15 @@ <h2>Proposal</h2>
         type="button"
         mat-stroked-button
         color="primary"
-        [ngClass]="{ 'error-field-outlined ng-invalid': showErrors && proposedResidencesRequired }"
+        [ngClass]="{
+          'error-field-outlined ng-invalid':
+            showErrors && proposedResidencesRequired && proposedResidences.length === 0,
+        }"
         (click)="onAddEditResidence(false, undefined, false)"
       >
         + Add Proposed Residence
       </button>
-      <div class="field-error" *ngIf="showErrors && proposedResidencesRequired">
+      <div class="field-error" *ngIf="showErrors && proposedResidencesRequired && proposedResidences.length === 0">
         <mat-icon>warning</mat-icon>
         <div>This field is required</div>
       </div>

diff --git a/...features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.scss b/...features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.scss
@@ -112,3 +112,10 @@ td {
     margin-bottom: 0 !important;
   }
 }
+
+.no-data-text-error {
+  color: colors.$grey-dark;
+  font-weight: 400;
+  padding-bottom: 0 !important;
+  display: inline;
+}
diff --git a/...ons/edit-submission/proposal/naru-proposal/residence-dialog/residence-dialog.component.ts b/...ons/edit-submission/proposal/naru-proposal/residence-dialog/residence-dialog.component.ts
@@ -34,9 +34,14 @@ export class ResidenceDialogComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.data.residenceData) {
-      this.floorArea.setValue(this.data.residenceData.floorArea!.toString());
+      this.floorArea.setValue(
+        this.data.residenceData.floorArea === 0 ? '' : this.data.residenceData.floorArea!.toString(),
+      );
       this.description.setValue(this.data.residenceData.description!);
       this.residence = { ...this.data.residenceData };
+      if (this.data.residenceData.floorArea === 0 || this.data.residenceData.description === '') {
+        this.form.markAllAsTouched();
+      }
     }
   }
 

diff --git a/...d/src/app/features/public/application/submission/naru-details/naru-details.component.html b/...d/src/app/features/public/application/submission/naru-details/naru-details.component.html
@@ -141,7 +141,12 @@
           {{ i + 1 }}
         </div>
         <div>
-          {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+          <ng-container *ngIf="existingResidence.floorArea === 0; else validFloorArea">
+            <app-no-data></app-no-data>
+          </ng-container>
+          <ng-template #validFloorArea>
+            {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+          </ng-template>
         </div>
         <div>{{ existingResidence.description }}</div>
       </ng-container>
@@ -160,7 +165,14 @@
         <div>
           {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
-        <div>{{ proposedResidence.description }}</div>
+        <div>
+          <ng-container *ngIf="!proposedResidence.description; else validDescription">
+            <app-no-data></app-no-data>
+          </ng-container>
+          <ng-template #validDescription>
+            {{ proposedResidence.description }}
+          </ng-template>
+        </div>
       </ng-container>
     </div>
   </ng-container>

diff --git a/...rc/app/shared/mobile/naru-residence-mobile-card/naru-residence-mobile-card.component.html b/...rc/app/shared/mobile/naru-residence-mobile-card/naru-residence-mobile-card.component.html
@@ -1,8 +1,14 @@
-<mat-card [ngClass]="{ 'last-card': isLast, 'review-step': isReviewStep }">
+<mat-card [ngClass]="{ 'last-card': isLast, 'review-step': isReviewStep, 'error-card': isError && !isReviewStep }">
   <mat-card-header>
     <mat-card-title>
-      #{{ residence.id }} Total Floor Area: {{ residence.floorArea }}
-      <span matTextSuffix>m<sup>2</sup></span>
+      #{{ residence.id }} Total Floor Area:
+      <ng-container *ngIf="residence.floorArea === 0; else validFloorArea">
+        <div class="text-error">No Data</div>
+      </ng-container>
+      <ng-template #validFloorArea>
+        {{ residence.floorArea }}
+        <span matTextSuffix>m<sup>2</sup></span>
+      </ng-template>
     </mat-card-title>
     <ng-container *ngIf="!isReviewStep">
       <button mat-icon-button [mat-menu-trigger-for]="menu">
@@ -19,6 +25,19 @@
     </ng-container>
   </mat-card-header>
   <mat-card-content>
+    <ng-container *ngIf="!residence.description">
+      <div class="text-error">No Data</div>
+    </ng-container>
+    <div class="field-error" *ngIf="(residence.floorArea === 0 || !residence.description) && !isReviewStep">
+      <mat-icon>warning</mat-icon>
+      <div>This field is required</div>
+    </div>
+    <app-no-data
+      class="no-data"
+      [showRequired]="showErrors"
+      *ngIf="(residence.floorArea === 0 || !residence.description) && isReviewStep"
+      text=""
+    ></app-no-data>
     {{ residence.isExpanded ? residence.description : getTruncatedDescription(residence.description) }}
     <a *ngIf="isDescriptionTruncated(residence.description)" (click)="toggleReadMore(residence)">
       {{ residence.isExpanded ? 'Read Less' : 'Read More' }}

diff --git a/...rc/app/shared/mobile/naru-residence-mobile-card/naru-residence-mobile-card.component.scss b/...rc/app/shared/mobile/naru-residence-mobile-card/naru-residence-mobile-card.component.scss
@@ -1,10 +1,11 @@
+@use '../../../../styles/functions.scss' as *;
 @use '../../../../styles/colors';
 
 mat-card {
   width: 100%;
   box-shadow: none;
   border: none;
-  border-bottom: 1px solid #565656;
+  border-bottom: rem(1) solid #565656;
   border-radius: 0;
   word-wrap: break-word;
   white-space: normal;
@@ -21,8 +22,8 @@ mat-card-header {
 mat-card-content {
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  padding: 0 0 10px 0 !important;
+  gap: rem(15);
+  padding: 0 0 rem(10) 0 !important;
 }
 
 .span-action {
@@ -31,20 +32,52 @@ mat-card-content {
 
 .last-card {
   border-bottom: none !important;
-  margin-bottom: 20px;
+  margin-bottom: rem(20);
 }
 
 .review-step {
-  border-bottom: 1px solid #565656;
+  border-bottom: rem(1) solid #565656;
   background-color: transparent;
 
   mat-card-header {
-    padding: 5px 0 10px 0 !important;
+    padding: rem(5) 0 rem(10) 0 !important;
   }
 }
 
 a {
   align-self: flex-end;
-  padding-right: 30px;
-  padding-bottom: 10px;
+  padding-right: rem(30);
+  padding-bottom: rem(10);
+}
+
+.text-error {
+  color: colors.$grey-dark;
+  font-weight: 400;
+  display: inline;
+  padding-bottom: 0 !important;
+}
+
+.field-error {
+  color: colors.$error-color;
+  font-size: rem(15);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+
+  .mat-icon {
+    min-width: rem(24);
+  }
+}
+
+.error-card {
+  border-radius: rem(4) !important;
+  border: rem(2) solid colors.$error-color !important;
+  padding: 0 0 rem(5) rem(10);
+  margin-top: rem(5);
+  margin-left: rem(-5);
+}
+
+.no-data {
+  margin-bottom: rem(-5) !important;
+  margin-top: rem(-10) !important;
 }
diff --git a/.../src/app/shared/mobile/naru-residence-mobile-card/naru-residence-mobile-card.component.ts b/.../src/app/shared/mobile/naru-residence-mobile-card/naru-residence-mobile-card.component.ts
@@ -12,13 +12,22 @@ import { EXISTING_RESIDENCE_DESCRIPTION_CHAR_LIMIT_MOBILE } from '../../constant
   templateUrl: './naru-residence-mobile-card.component.html',
   styleUrl: './naru-residence-mobile-card.component.scss',
 })
-export class NaruResidenceMobileCardComponent {
+export class NaruResidenceMobileCardComponent implements OnInit {
   @Input() residence!: FormExisingResidence | FormProposedResidence;
   @Input() isLast: boolean = false;
   @Input() isReviewStep: boolean = false;
+  @Input() showErrors: boolean = false;
   @Output() editClicked = new EventEmitter<FormExisingResidence>();
   @Output() removeClicked = new EventEmitter<FormExisingResidence>();
 
+  isError: boolean = false;
+
+  ngOnInit(): void {
+    if (this.residence.floorArea === 0 || this.residence.description === '') {
+      this.isError = true;
+    }
+  }
+
   onEdit() {
     this.editClicked.emit(this.residence);
   }

diff --git a/...iders/typeorm/migrations/1728581017573-convert_naru_floor_area_and_existing_structuers.ts b/...iders/typeorm/migrations/1728581017573-convert_naru_floor_area_and_existing_structuers.ts
@@ -0,0 +1,43 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class ConvertNaruFloorAreaAndExistingStructuers1728581017573
+  implements MigrationInterface
+{
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            UPDATE alcs.application_submission as2
+            SET naru_existing_residences = jsonb_build_array(
+                jsonb_build_object(
+                    'floorArea', 0,
+                    'description', as2.naru_existing_structures
+                )
+            ) 
+            WHERE as2.naru_existing_structures IS NOT NULL;
+        `);
+
+    await queryRunner.query(`
+            UPDATE alcs.application_submission as2
+            SET naru_proposed_residences = jsonb_build_array(
+                jsonb_build_object(
+                    'floorArea', (as2.naru_floor_area::float) ,
+                    'description', ''
+                )
+            ) 
+            WHERE as2.naru_floor_area IS NOT NULL;   
+        `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            UPDATE alcs.application_submission as2
+            SET naru_existing_residences = '[]'::jsonb
+            WHERE as2.naru_existing_structures IS NOT NULL;
+        `);
+
+    await queryRunner.query(`        
+            UPDATE alcs.application_submission as2
+            SET naru_proposed_residences = '[]'::jsonb
+            WHERE as2.naru_floor_area IS NOT NULL;
+        `);
+  }
+}