Merge pull request #1868 from bcgov/feature/ALCS-2148

Add Existing Residences to Application NARU

alcs-frontend/src/app/features/application/applicant-info/application-details/naru-details/naru-details.component.html

@@ -78,6 +78,23 @@
     {{ _applicationSubmission.naruInfrastructure }}
   </div>
 
+  <ng-container *ngIf="_applicationSubmission.naruExistingResidences">
+    <div class="full-width existing-residences">
+      <div class="grid-1 subheading2">Existing Residence</div>
+      <div class="grid-2 subheading2">Total Floor Area</div>
+      <div class="grid-3 subheading2">Description</div>
+      <ng-container *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let i = index">
+        <div class="grid-1">
+          {{ i + 1 }}
+        </div>
+        <div class="grid-2">
+          {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+        </div>
+        <div class="grid-3">{{ existingResidence.description }}</div>
+      </ng-container>
+    </div>
+  </ng-container>
+
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
     <div *ngFor="let file of proposalMap">

alcs-frontend/src/app/features/application/applicant-info/application-details/naru-details/naru-details.component.scss

@@ -4,3 +4,28 @@
   grid-column-gap: 36px;
   grid-row-gap: 12px;
 }
+
+.existing-residences {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  word-wrap: break-word;
+  white-space: pre-line;
+  grid-column-gap: 36px;
+  grid-row-gap: 12px;
+
+  .full-width {
+    grid-column: 1/3;
+  }
+
+  .grid-1 {
+    grid-column: 1/2;
+  }
+
+  .grid-2 {
+    grid-column: 2/3;
+  }
+
+  .grid-3 {
+    grid-column: 3/5;
+  }
+}

alcs-frontend/src/app/services/application/application.dto.ts

@@ -48,6 +48,11 @@ export interface ProposedLot {
   componentUuid: string;
 }
 
+export interface ExistingResidence {
+  floorArea: number;
+  description: string;
+}
+
 export interface ApplicationReviewDto {
   localGovernmentFileNumber: string;
   firstName: string;
@@ -211,6 +216,7 @@ export interface ApplicationSubmissionDto {
   naruToPlaceAverageDepth: number | null;
   naruSleepingUnits: number | null;
   naruAgriTourism: string | null;
+  naruExistingResidences?: ExistingResidence[];
 
   //Inclusion / Exclusion Fields
   prescribedBody: string | null;

portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.html

@@ -112,6 +112,33 @@
     <app-no-data [showRequired]="showErrors" *ngIf="!_applicationSubmission.naruInfrastructure"></app-no-data>
   </div>
 
+  <ng-container *ngIf="_applicationSubmission.naruExistingResidences">
+    <div class="full-width existing-residences" *ngIf="!isMobile">
+      <div class="subheading2">Existing Residence</div>
+      <div class="subheading2">Total Floor Area</div>
+      <div class="subheading2">Description</div>
+      <ng-container *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let i = index">
+        <div>
+          {{ i + 1 }}
+        </div>
+        <div>
+          {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
+        </div>
+        <div>{{ existingResidence.description }}</div>
+      </ng-container>
+    </div>
+    <ng-container *ngIf="isMobile">
+      <div class="subheading2 grid-1">Total Floor Area of Existing Residence(s) - If Applicable</div>
+      <app-naru-residence-mobile-card
+        *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let last = last"
+        [existingResidence]="existingResidence"
+        [isLast]="last"
+        [isReviewStep]="true"
+      >
+      </app-naru-residence-mobile-card>
+    </ng-container>
+  </ng-container>
+
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
     <a *ngFor="let map of proposalMap" (click)="openFile(map)">

portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.scss

@@ -16,3 +16,19 @@
     grid-column-gap: rem(16);
   }
 }
+
+.existing-residences {
+  display: grid;
+  grid-template-columns: max-content max-content max-content max-content max-content;
+  overflow-x: auto;
+  grid-column-gap: rem(36);
+  grid-row-gap: rem(12);
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .full-width {
+    grid-column: 1/3;
+  }
+}

portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.ts

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostListener, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApplicationDocumentDto } from '../../../../services/application-document/application-document.dto';
 import { ApplicationDocumentService } from '../../../../services/application-document/application-document.service';
 import { ApplicationSubmissionDetailedDto } from '../../../../services/application-submission/application-submission.dto';
 import { DOCUMENT_TYPE } from '../../../../shared/dto/document.dto';
 import { openFileInline } from '../../../../shared/utils/file';
+import { MOBILE_BREAKPOINT } from '../../../../shared/utils/breakpoints';
 
 @Component({
   selector: 'app-naru-details[applicationSubmission]',
@@ -16,6 +17,8 @@ export class NaruDetailsComponent {
   @Input() showEdit = true;
   @Input() draftMode = false;
 
+  isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+
   _applicationSubmission: ApplicationSubmissionDetailedDto | undefined;
 
   @Input() set applicationSubmission(applicationSubmission: ApplicationSubmissionDetailedDto | undefined) {
@@ -53,4 +56,9 @@ export class NaruDetailsComponent {
       openFileInline(res.url, file.fileName);
     }
   }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+  }
 }

portal-frontend/src/app/features/applications/edit-submission/edit-submission-base.module.ts

@@ -38,6 +38,7 @@ import { SuccessComponent } from './success/success.component';
 import { PrimaryContactConfirmationDialogComponent } from './primary-contact/primary-contact-confirmation-dialog/primary-contact-confirmation-dialog.component';
 import { OtherAttachmentsUploadDialogComponent } from './other-attachments/other-attachments-upload-dialog/other-attachments-upload-dialog.component';
 import { MatCard, MatCardHeader, MatCardModule } from '@angular/material/card';
+import { ExistingResidenceDialogComponent } from './proposal/naru-proposal/existing-residence-dialog/existing-residence-dialog.component';
 
 @NgModule({
   declarations: [
@@ -63,6 +64,7 @@ import { MatCard, MatCardHeader, MatCardModule } from '@angular/material/card';
     PofoProposalComponent,
     PfrsProposalComponent,
     NaruProposalComponent,
+    ExistingResidenceDialogComponent,
     ExclProposalComponent,
     InclProposalComponent,
     CoveProposalComponent,
@@ -110,6 +112,7 @@ import { MatCard, MatCardHeader, MatCardModule } from '@angular/material/card';
     CoveProposalComponent,
     CovenantTransfereeDialogComponent,
     SuccessComponent,
+    ExistingResidenceDialogComponent,
   ],
 })
 export class EditSubmissionBaseModule {}

portal-frontend/src/app/features/applications/edit-submission/proposal/naru-proposal/existing-residence-dialog/existing-residence-dialog.component.html

@@ -0,0 +1,88 @@
+<div mat-dialog-title>
+  <h2 *ngIf="!data.isEdit">Add New Owner</h2>
+  <h2 *ngIf="data.isEdit">Edit Owner</h2>
+</div>
+<div mat-dialog-content>
+  <form [formGroup]="form">
+    <div class="form-container">
+      <div class="form-field-floor-area">
+        <div class="label">
+          <label for="floorAreaId">Total Floor Area (m2)</label>
+        </div>
+        <div class="subtext">Include the basement and any attached garage</div>
+        <mat-form-field appearance="outline">
+          <input
+            min="0.01"
+            mask="separator.5"
+            separatorLimit="9999999999"
+            thousandSeparator=","
+            matInput
+            id="floorAreaId"
+            formControlName="floorArea"
+          />
+          <span matTextSuffix>m<sup>2</sup></span>
+        </mat-form-field>
+        <div
+          *ngIf="
+            form.controls['floorArea']!.invalid &&
+            (form.controls['floorArea']!.dirty || form.controls['floorArea']!.touched)
+          "
+          class="field-error"
+        >
+          <mat-icon>warning</mat-icon>
+          <div *ngIf="form.controls['floorArea']!.errors?.['required']">This field is required</div>
+        </div>
+      </div>
+
+      <div class="form-field-description">
+        <div class="label">
+          <label for="descirptionId">Description of the Residence</label>
+        </div>
+        <div class="subtext">Include if it has an attached garage or basement</div>
+        <mat-form-field appearance="outline">
+          <textarea
+            formControlName="description"
+            #descriptionText
+            maxlength="4000"
+            id="descriptionId"
+            matInput
+          ></textarea>
+        </mat-form-field>
+        <div class="subtext">Characters left: {{ 4000 - description.value?.length! }}</div>
+        <div
+          *ngIf="
+            form.controls['description']!.invalid &&
+            (form.controls['description']!.dirty || form.controls['description']!.touched)
+          "
+          class="field-error"
+        >
+          <mat-icon>warning</mat-icon>
+          <div *ngIf="form.controls['description']!.errors?.['required']">This field is required</div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+<mat-dialog-actions align="end">
+  <div class="button-container">
+    <button
+      *ngIf="!this.data.existingResidenceData"
+      mat-flat-button
+      color="primary"
+      (click)="onSaveAdd()"
+      [disabled]="isSaving"
+    >
+      ADD
+    </button>
+    <button
+      *ngIf="this.data.existingResidenceData"
+      mat-flat-button
+      color="primary"
+      (click)="onSaveAdd()"
+      [disabled]="isSaving"
+    >
+      SAVE
+    </button>
+    <button mat-stroked-button color="primary" [mat-dialog-close]="false" (click)="onCancel()">CANCEL</button>
+  </div>
+</mat-dialog-actions>