From b3660415b621af479ba8bb325606d6131106ab5b Mon Sep 17 00:00:00 2001
From: abradat <shn.khorsandi@gmail.com>
Date: Mon, 21 Oct 2024 10:05:15 -0700
Subject: [PATCH 1/2] Add mobile design for NARU residences to public view

---
 .../naru-details/naru-details.component.html  | 48 +++++++++++++++++--
 .../naru-details/naru-details.component.scss  |  4 ++
 .../naru-details/naru-details.component.ts    | 10 +++-
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html
index fc54d54ae4..e9edd1e8ae 100644
--- a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html
+++ b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html
@@ -127,7 +127,7 @@
   </div>
 
   <ng-container *ngIf="applicationSubmission.naruExistingResidences">
-    <div class="full-width existing-residences">
+    <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>
@@ -146,23 +146,61 @@
         <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>
+      <ng-container *ngIf="applicationSubmission.naruExistingResidences?.length === 0">
+        <div>
+          <app-no-data></app-no-data>
+        </div>
+      </ng-container>
+      <app-naru-residence-mobile-card
+        *ngFor="let existingResidence of applicationSubmission.naruExistingResidences; let last = last; let i = index"
+        [residence]="{
+          id: i + 1,
+          floorArea: existingResidence.floorArea,
+          description: existingResidence.description,
+          isExpanded: false,
+        }"
+        [isLast]="last"
+        [isReviewStep]="true"
+      >
+      </app-naru-residence-mobile-card>
+    </ng-container>
   </ng-container>
 
   <ng-container *ngIf="applicationSubmission.naruProposedResidences">
-    <div class="full-width existing-residences">
+    <div class="full-width existing-residences" *ngIf="!isMobile">
       <div class="subheading2">Proposed Residence</div>
       <div class="subheading2">Total Floor Area</div>
       <div class="subheading2">Description</div>
       <ng-container *ngFor="let proposedResidence of applicationSubmission.naruProposedResidences; let i = index">
-        <div>
-          {{ i + 1 }}
-        </div>
+        <div>{{ i + 1 }}</div>
         <div>
           {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
         <div>{{ proposedResidence.description }}</div>
       </ng-container>
     </div>
+    <ng-container *ngIf="isMobile">
+      <div class="subheading2 grid-1 residence-mobile-header">Total Floor Area of Proposed Residence(s)</div>
+      <ng-container *ngIf="applicationSubmission.naruProposedResidences?.length === 0">
+        <div>
+          <app-no-data></app-no-data>
+        </div>
+      </ng-container>
+      <app-naru-residence-mobile-card
+        *ngFor="let proposedResidence of applicationSubmission.naruProposedResidences; let last = last; let i = index"
+        [residence]="{
+          id: i + 1,
+          floorArea: proposedResidence.floorArea,
+          description: proposedResidence.description,
+          isExpanded: false,
+        }"
+        [isLast]="last"
+        [isReviewStep]="true"
+      >
+      </app-naru-residence-mobile-card>
+    </ng-container>
   </ng-container>
 
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
diff --git a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss
index 1133f57b42..3938b8090b 100644
--- a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss
+++ b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss
@@ -37,3 +37,7 @@
     grid-column: 1/3;
   }
 }
+
+.residence-mobile-header {
+  padding-top: rem(15);
+}
diff --git a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.ts b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.ts
index 29231ca6fb..f614191fba 100644
--- a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.ts
+++ b/portal-frontend/src/app/features/public/application/submission/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 { PublicApplicationSubmissionDto } from '../../../../../services/public/public-application.dto';
 import { PublicDocumentDto } from '../../../../../services/public/public.dto';
 import { PublicService } from '../../../../../services/public/public.service';
 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]',
@@ -15,6 +16,8 @@ export class NaruDetailsComponent {
   proposalMap: PublicDocumentDto[] = [];
   buildingPlans: PublicDocumentDto[] = [];
 
+  isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+
   @Input() applicationSubmission!: PublicApplicationSubmissionDto;
   @Input() set applicationDocuments(documents: PublicDocumentDto[]) {
     this.proposalMap = documents.filter((document) => document.type?.code === DOCUMENT_TYPE.PROPOSAL_MAP);
@@ -32,4 +35,9 @@ export class NaruDetailsComponent {
       openFileInline(res.url, file.fileName);
     }
   }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+  }
 }

From ca04eb4780e878cada63ea1432e054fdd3f471aa Mon Sep 17 00:00:00 2001
From: abradat <shn.khorsandi@gmail.com>
Date: Mon, 21 Oct 2024 10:35:40 -0700
Subject: [PATCH 2/2] Add index hashtag to NARU residences on portal and ALCS

---
 .../naru-details/naru-details.component.html  |  8 ++----
 .../naru-details/naru-details.component.html  | 26 ++++++++++++-------
 .../naru-proposal.component.html              |  4 +--
 .../naru-details/naru-details.component.html  |  8 +++---
 .../naru-details/naru-details.component.scss  |  4 ---
 5 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/alcs-frontend/src/app/features/application/applicant-info/application-details/naru-details/naru-details.component.html b/alcs-frontend/src/app/features/application/applicant-info/application-details/naru-details/naru-details.component.html
index 639ca8f3b4..aa7a740a5a 100644
--- a/alcs-frontend/src/app/features/application/applicant-info/application-details/naru-details/naru-details.component.html
+++ b/alcs-frontend/src/app/features/application/applicant-info/application-details/naru-details/naru-details.component.html
@@ -113,9 +113,7 @@
         </div>
       </ng-container>
       <ng-container *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let i = index">
-        <div class="grid-1">
-          {{ i + 1 }}
-        </div>
+        <div class="grid-1">#{{ i + 1 }}</div>
         <div class="grid-2">
           {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
@@ -130,9 +128,7 @@
       <div class="grid-2 subheading2">Total Floor Area</div>
       <div class="grid-3 subheading2">Description</div>
       <ng-container *ngFor="let proposedResidence of _applicationSubmission.naruProposedResidences; let i = index">
-        <div class="grid-1">
-          {{ i + 1 }}
-        </div>
+        <div class="grid-1">#{{ i + 1 }}</div>
         <div class="grid-2">
           {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
diff --git a/portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.html b/portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.html
index 0ec5fa11cf..4f8423663c 100644
--- a/portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.html
+++ b/portal-frontend/src/app/features/applications/application-details/naru-details/naru-details.component.html
@@ -151,9 +151,7 @@
         </div>
       </ng-container>
       <ng-container *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let i = index">
-        <div>
-          {{ i + 1 }}
-        </div>
+        <div>#{{ i + 1 }}</div>
         <div>
           {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
@@ -168,8 +166,13 @@
         </div>
       </ng-container>
       <app-naru-residence-mobile-card
-        *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let last = last"
-        [residence]="existingResidence"
+        *ngFor="let existingResidence of _applicationSubmission.naruExistingResidences; let last = last; let i = index"
+        [residence]="{
+          id: i + 1,
+          floorArea: existingResidence.floorArea,
+          description: existingResidence.description,
+          isExpanded: false,
+        }"
         [isLast]="last"
         [isReviewStep]="true"
       >
@@ -187,9 +190,7 @@
       </div>
     </ng-container>
     <ng-container *ngFor="let proposedResidence of _applicationSubmission.naruProposedResidences; let i = index">
-      <div>
-        {{ i + 1 }}
-      </div>
+      <div>#{{ i + 1 }}</div>
       <div>
         {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
       </div>
@@ -204,8 +205,13 @@
       </div>
     </ng-container>
     <app-naru-residence-mobile-card
-      *ngFor="let proposedResidence of _applicationSubmission.naruProposedResidences; let last = last"
-      [residence]="proposedResidence"
+      *ngFor="let proposedResidence of _applicationSubmission.naruProposedResidences; let last = last; let i = index"
+      [residence]="{
+        id: i + 1,
+        floorArea: proposedResidence.floorArea,
+        description: proposedResidence.description,
+        isExpanded: false,
+      }"
       [isLast]="last"
       [isReviewStep]="true"
     >
diff --git a/portal-frontend/src/app/features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.html b/portal-frontend/src/app/features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.html
index fa94eb7893..75376d9dbf 100644
--- a/portal-frontend/src/app/features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.html
+++ b/portal-frontend/src/app/features/applications/edit-submission/proposal/naru-proposal/naru-proposal.component.html
@@ -455,7 +455,7 @@ <h2>Proposal</h2>
         <table mat-table [dataSource]="existingResidencesSource">
           <ng-container class="sample" matColumnDef="index">
             <th mat-header-cell *matHeaderCellDef>Existing Residence</th>
-            <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
+            <td mat-cell *matCellDef="let i = index">#{{ i + 1 }}</td>
           </ng-container>
 
           <ng-container matColumnDef="floorArea">
@@ -527,7 +527,7 @@ <h2>Proposal</h2>
         <table mat-table [dataSource]="proposedResidencesSource">
           <ng-container class="sample" matColumnDef="index">
             <th mat-header-cell *matHeaderCellDef>Proposed Residence</th>
-            <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
+            <td mat-cell *matCellDef="let i = index">#{{ i + 1 }}</td>
           </ng-container>
 
           <ng-container matColumnDef="floorArea">
diff --git a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html
index e9edd1e8ae..1485d14e1f 100644
--- a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html
+++ b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.html
@@ -137,9 +137,7 @@
         </div>
       </ng-container>
       <ng-container *ngFor="let existingResidence of applicationSubmission.naruExistingResidences; let i = index">
-        <div>
-          {{ i + 1 }}
-        </div>
+        <div>#{{ i + 1 }}</div>
         <div>
           {{ existingResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
@@ -174,7 +172,7 @@
       <div class="subheading2">Total Floor Area</div>
       <div class="subheading2">Description</div>
       <ng-container *ngFor="let proposedResidence of applicationSubmission.naruProposedResidences; let i = index">
-        <div>{{ i + 1 }}</div>
+        <div>#{{ i + 1 }}</div>
         <div>
           {{ proposedResidence.floorArea }} <span matTextSuffix>m<sup>2</sup></span>
         </div>
@@ -182,7 +180,7 @@
       </ng-container>
     </div>
     <ng-container *ngIf="isMobile">
-      <div class="subheading2 grid-1 residence-mobile-header">Total Floor Area of Proposed Residence(s)</div>
+      <div class="subheading2 grid-1">Total Floor Area of Proposed Residence(s)</div>
       <ng-container *ngIf="applicationSubmission.naruProposedResidences?.length === 0">
         <div>
           <app-no-data></app-no-data>
diff --git a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss
index 3938b8090b..1133f57b42 100644
--- a/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss
+++ b/portal-frontend/src/app/features/public/application/submission/naru-details/naru-details.component.scss
@@ -37,7 +37,3 @@
     grid-column: 1/3;
   }
 }
-
-.residence-mobile-header {
-  padding-top: rem(15);
-}