From 0e0f34f505261e5625ccd4184df1be8d2df0fd2f Mon Sep 17 00:00:00 2001
From: ychung-mot <young-jin.chung@dxcas.com>
Date: Mon, 23 Sep 2024 14:09:07 -0700
Subject: [PATCH] fix(dss-872)

---
 ...isting-upload-history-table.component.html |   4 +-
 .../export-listings.component.html            |   4 +-
 .../listing-details.component.html            |  32 +-
 .../upload-business-license.component.html    | 286 +++++++++++++-----
 4 files changed, 231 insertions(+), 95 deletions(-)

diff --git a/frontend/src/app/common/listing-upload-history-table/listing-upload-history-table.component.html b/frontend/src/app/common/listing-upload-history-table/listing-upload-history-table.component.html
index 7d7b2dda..deec9ca7 100644
--- a/frontend/src/app/common/listing-upload-history-table/listing-upload-history-table.component.html
+++ b/frontend/src/app/common/listing-upload-history-table/listing-upload-history-table.component.html
@@ -114,7 +114,7 @@ <h2>Platform Upload History</h2>
                         <i class="pi pi-download" *ngIf="row.errors>0"></i></button>
                     <ng-template #zero>{{0}}</ng-template>
                 </td>
-                <td>{{ row.updDtm |date:'YYYY-MM-dd' }}</td>
+                <td>{{ row.updDtm |date:'yyyy-MM-dd' }}</td>
                 <td>{{ row.uploadedBy }}</td>
             </tr>
         </ng-template>
@@ -142,4 +142,4 @@ <h2>Platform Upload History</h2>
             [currentPageReportTemplate]="'Rows per page: 10 &nbsp; {first}-{last} of {totalRecords}'"></p-paginator>
     </ng-template>
 
-</p-card>
\ No newline at end of file
+</p-card>
diff --git a/frontend/src/app/features/components/export-listings/export-listings.component.html b/frontend/src/app/features/components/export-listings/export-listings.component.html
index bd9718b7..539342f6 100644
--- a/frontend/src/app/features/components/export-listings/export-listings.component.html
+++ b/frontend/src/app/features/components/export-listings/export-listings.component.html
@@ -4,7 +4,7 @@
     <div class="message info">
         <i class="pi pi-info-circle"></i>
         <strong class="message-text">Data last updated on {{dateLastUpdated
-            | date: 'YYYY-MM-dd'}}</strong>
+            | date: 'yyyy-MM-dd'}}</strong>
     </div>
 </ng-template>
 <ng-template #warn>
@@ -34,4 +34,4 @@ <h4>Download listings as .CSV file</h4>
 
 <div class="actions">
     <button pButton [disabled]="!selectedJurisdiction" (click)="onDownload()">Download</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html b/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html
index e2aaf47e..dfe92636 100644
--- a/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html
+++ b/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html
@@ -213,7 +213,7 @@ <h2>Detailed Listing Information for</h2>
                             <td>{{ addressChange.type }}</td>
                             <td>{{ addressChange.platformAddress }}</td>
                             <td>{{ addressChange.bestMatchAddress }}</td>
-                            <td>{{ addressChange.date |date:'YYYY-MM-dd' }}</td>
+                            <td>{{ addressChange.date |date:'yyyy-MM-dd' }}</td>
                             <td>{{ addressChange.user }}</td>
                         </tr>
                     </ng-template>
@@ -261,7 +261,7 @@ <h2>Detailed Listing Information for</h2>
                 <div class="property-info-container">
                     <strong class="panel-header-text">Business Licence Information</strong>
                     <p-tag class="last-bl-update-date" *ngIf="blInfo?.updDtm">
-                        <strong class="tag-text">BL Records Last Uploaded:</strong>{{blInfo.updDtm |date:'YYYY-MM-dd' }}
+                        <strong class="tag-text">BL Records Last Uploaded:</strong>{{blInfo.updDtm |date:'yyyy-MM-dd' }}
                     </p-tag>
                 </div>
             </ng-template>
@@ -303,9 +303,9 @@ <h2>Detailed Listing Information for</h2>
                 </div>
 
                 <div *ngIf="blInfo?.businessLicenceNo ||
-                blInfo?.licenceTypeTxt || 
-                blInfo?.expiryDt || 
-                blInfo?.licenceStatusType || 
+                blInfo?.licenceTypeTxt ||
+                blInfo?.expiryDt ||
+                blInfo?.licenceStatusType ||
                 blInfo?.restrictionTxt
                 " class="spacer-hr"></div>
 
@@ -317,7 +317,7 @@ <h2>Detailed Listing Information for</h2>
                     <strong>Licence Type:</strong> <span class="value">{{blInfo.licenceTypeTxt ||'-'}}</span>
                 </div>
                 <div *ngIf="blInfo?.expiryDt" class="row">
-                    <strong>Expiry Date: </strong> <span class="value">{{blInfo.expiryDt |date:'YYYY-MM-dd'}}</span>
+                    <strong>Expiry Date: </strong> <span class="value">{{blInfo.expiryDt |date:'yyyy-MM-dd'}}</span>
                 </div>
                 <div *ngIf="blInfo?.licenceStatusType" class="row">
                     <strong>Status:</strong> <span class="status-name value"
@@ -348,8 +348,8 @@ <h2>Detailed Listing Information for</h2>
                     <strong>Phone: </strong> <span class="value">{{blInfo.businessOwnerPhoneNo ||'-'}}</span>
                 </div>
 
-                <div *ngIf="blInfo?.businessOperatorNm || 
-                blInfo?.businessOperatorEmailAddressDsc || 
+                <div *ngIf="blInfo?.businessOperatorNm ||
+                blInfo?.businessOperatorEmailAddressDsc ||
                 blInfo?.businessOperatorPhoneNo" class="spacer-hr"></div>
 
                 <div *ngIf="blInfo?.businessOperatorNm" class="row">
@@ -362,11 +362,11 @@ <h2>Detailed Listing Information for</h2>
                     <strong>Phone: </strong> <span class="value">{{blInfo.businessOperatorPhoneNo ||'-'}}</span>
                 </div>
 
-                <div *ngIf="blInfo?.propertyZoneTxt || 
-                blInfo?.availableBedroomsQty || 
-                blInfo?.maxGuestsAllowedQty || 
-                isBoolDefined(blInfo?.isPrincipalResidence) || 
-                isBoolDefined(blInfo?.isOwnerLivingOnsite) || 
+                <div *ngIf="blInfo?.propertyZoneTxt ||
+                blInfo?.availableBedroomsQty ||
+                blInfo?.maxGuestsAllowedQty ||
+                isBoolDefined(blInfo?.isPrincipalResidence) ||
+                isBoolDefined(blInfo?.isOwnerLivingOnsite) ||
                 isBoolDefined(blInfo?.isOwnerPropertyTenant) ||
                 blInfo?.infractionTxt ||
                 blInfo?.infractionDt " class="spacer-hr"></div>
@@ -399,11 +399,11 @@ <h2>Detailed Listing Information for</h2>
                 </div>
                 <div *ngIf="blInfo?.infractionDt" class="row">
                     <strong>Infraction Date: </strong> <span
-                        class="value">{{blInfo.infractionDt|date:'YYYY-MM-dd'}}</span>
+                        class="value">{{blInfo.infractionDt|date:'yyyy-MM-dd'}}</span>
                 </div>
 
-                <div *ngIf="blInfo?.propertyFolioNo || 
-                blInfo?.propertyParcelIdentifierNo || 
+                <div *ngIf="blInfo?.propertyFolioNo ||
+                blInfo?.propertyParcelIdentifierNo ||
                 blInfo?.propertyLegalDescriptionTxt" class="spacer-hr"></div>
 
                 <div *ngIf="blInfo?.propertyFolioNo" class="row">
diff --git a/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html b/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html
index 4287a9ed..2fa037ac 100644
--- a/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html
+++ b/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html
@@ -1,74 +1,165 @@
 <div class="title">Upload Business Licence Data</div>
 <div class="tile" *ngIf="currentUser">
     <div class="row" *ngIf="!isCEU; else jurisdiction_block">
-        <button pButton (click)="onUploadOpen()" icon="pi pi-upload">&nbsp;Upload Business Licence Data</button>
+        <button pButton (click)="onUploadOpen()" icon="pi pi-upload">
+            &nbsp;Upload Business Licence Data
+        </button>
     </div>
     <ng-template #jurisdiction_block>
         <div class="row">
-            <p-dropdown placeholder="Select Jurisdiction" appendTo="body" panelStyleClass="select-jurisdiction-panel"
-                [inputId]="'jurisdiction-filter-dropdown'" [filter]="true" [filterBy]="'label'"
-                class="select-jurisdiction-dropdown" [options]="groupedCommunities" [group]="true"
-                [(ngModel)]="jurisdictionId" (onChange)="onJurisdictionChanged($event)">
+            <p-dropdown
+                placeholder="Select Jurisdiction"
+                appendTo="body"
+                panelStyleClass="select-jurisdiction-panel"
+                [inputId]="'jurisdiction-filter-dropdown'"
+                [filter]="true"
+                [filterBy]="'label'"
+                class="select-jurisdiction-dropdown"
+                [options]="groupedCommunities"
+                [group]="true"
+                [(ngModel)]="jurisdictionId"
+                (onChange)="onJurisdictionChanged($event)"
+            >
                 <ng-template let-group pTemplate="group">
-                    <strong>{{group.label}}</strong>
+                    <strong>{{ group.label }}</strong>
                 </ng-template>
             </p-dropdown>
         </div>
     </ng-template>
     <div class="row table-row">
-        <p-table [value]="uploadHistory" [paginator]="uploadHistory.length>12" [showPageLinks]="false"
-            currentPageReportTemplate="{first}-{last} of {totalRecords}" [showFirstLastIcon]="false"
-            [showCurrentPageReport]="true" paginatorStyleClass="paging-right" [rows]="12" styleClass="p-datatable-sm"
-            class="table-paging-right">
+        <p-table
+            [value]="uploadHistory"
+            [paginator]="uploadHistory.length > 12"
+            [showPageLinks]="false"
+            currentPageReportTemplate="{first}-{last} of {totalRecords}"
+            [showFirstLastIcon]="false"
+            [showCurrentPageReport]="true"
+            paginatorStyleClass="paging-right"
+            [rows]="12"
+            styleClass="p-datatable-sm"
+            class="table-paging-right"
+        >
             <ng-template pTemplate="header">
                 <tr>
-                    <th class="sortable-header" [class.sorted]="this.sort && this.sort.prop === 'organizationNm'"
-                        (click)="onSort('status')">
+                    <th
+                        class="sortable-header"
+                        [class.sorted]="this.sort && this.sort.prop === 'organizationNm'"
+                        (click)="onSort('status')"
+                    >
                         Jurisdiction
-                        <i class="pi pi-angle-down"
-                            *ngIf="this.sort && this.sort.prop === 'organizationNm' && this.sort.dir === 'desc'"></i>
-                        <i class="pi pi-angle-up"
-                            *ngIf="this.sort && this.sort.prop === 'organizationNm' && this.sort.dir === 'asc'"></i>
+                        <i
+                            class="pi pi-angle-down"
+                            *ngIf="
+                                this.sort &&
+                                this.sort.prop === 'organizationNm' &&
+                                this.sort.dir === 'desc'
+                            "
+                        ></i>
+                        <i
+                            class="pi pi-angle-up"
+                            *ngIf="
+                                this.sort &&
+                                this.sort.prop === 'organizationNm' &&
+                                this.sort.dir === 'asc'
+                            "
+                        ></i>
                     </th>
-                    <th class="sortable-header" [class.sorted]="this.sort && this.sort.prop === 'status'"
-                        (click)="onSort('status')">
+                    <th
+                        class="sortable-header"
+                        [class.sorted]="this.sort && this.sort.prop === 'status'"
+                        (click)="onSort('status')"
+                    >
                         Status
-                        <i class="pi pi-angle-down"
-                            *ngIf="this.sort && this.sort.prop === 'status' && this.sort.dir === 'desc'"></i>
-                        <i class="pi pi-angle-up"
-                            *ngIf="this.sort && this.sort.prop === 'status' && this.sort.dir === 'asc'"></i>
+                        <i
+                            class="pi pi-angle-down"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'status' && this.sort.dir === 'desc'
+                            "
+                        ></i>
+                        <i
+                            class="pi pi-angle-up"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'status' && this.sort.dir === 'asc'
+                            "
+                        ></i>
                     </th>
-                    <th class="sortable-header" [class.sorted]="this.sort && this.sort.prop === 'total'"
-                        (click)="onSort('total')">
+                    <th
+                        class="sortable-header"
+                        [class.sorted]="this.sort && this.sort.prop === 'total'"
+                        (click)="onSort('total')"
+                    >
                         Total Records
-                        <i class="pi pi-angle-down"
-                            *ngIf="this.sort && this.sort.prop === 'total' && this.sort.dir === 'desc'"></i>
-                        <i class="pi pi-angle-up"
-                            *ngIf="this.sort && this.sort.prop === 'total' && this.sort.dir === 'asc'"></i>
+                        <i
+                            class="pi pi-angle-down"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'total' && this.sort.dir === 'desc'
+                            "
+                        ></i>
+                        <i
+                            class="pi pi-angle-up"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'total' && this.sort.dir === 'asc'
+                            "
+                        ></i>
                     </th>
-                    <th class="sortable-header" [class.sorted]="this.sort && this.sort.prop === 'errors'"
-                        (click)="onSort('errors')">
+                    <th
+                        class="sortable-header"
+                        [class.sorted]="this.sort && this.sort.prop === 'errors'"
+                        (click)="onSort('errors')"
+                    >
                         Errors
-                        <i class="pi pi-angle-down"
-                            *ngIf="this.sort && this.sort.prop === 'errors' && this.sort.dir === 'desc'"></i>
-                        <i class="pi pi-angle-up"
-                            *ngIf="this.sort && this.sort.prop === 'errors' && this.sort.dir === 'asc'"></i>
+                        <i
+                            class="pi pi-angle-down"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'errors' && this.sort.dir === 'desc'
+                            "
+                        ></i>
+                        <i
+                            class="pi pi-angle-up"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'errors' && this.sort.dir === 'asc'
+                            "
+                        ></i>
                     </th>
-                    <th class="sortable-header" [class.sorted]="this.sort && this.sort.prop === 'updDtm'"
-                        (click)="onSort('updDtm')">
+                    <th
+                        class="sortable-header"
+                        [class.sorted]="this.sort && this.sort.prop === 'updDtm'"
+                        (click)="onSort('updDtm')"
+                    >
                         Upload Date
-                        <i class="pi pi-angle-down"
-                            *ngIf="this.sort && this.sort.prop === 'updDtm' && this.sort.dir === 'desc'"></i>
-                        <i class="pi pi-angle-up"
-                            *ngIf="this.sort && this.sort.prop === 'updDtm' && this.sort.dir === 'asc'"></i>
+                        <i
+                            class="pi pi-angle-down"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'updDtm' && this.sort.dir === 'desc'
+                            "
+                        ></i>
+                        <i
+                            class="pi pi-angle-up"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'updDtm' && this.sort.dir === 'asc'
+                            "
+                        ></i>
                     </th>
-                    <th class="sortable-header" [class.sorted]="this.sort && this.sort.prop === 'givenNm'"
-                        (click)="onSort('givenNm')">
+                    <th
+                        class="sortable-header"
+                        [class.sorted]="this.sort && this.sort.prop === 'givenNm'"
+                        (click)="onSort('givenNm')"
+                    >
                         Uploaded By
-                        <i class="pi pi-angle-down"
-                            *ngIf="this.sort && this.sort.prop === 'givenNm' && this.sort.dir === 'desc'"></i>
-                        <i class="pi pi-angle-up"
-                            *ngIf="this.sort && this.sort.prop === 'givenNm' && this.sort.dir === 'asc'"></i>
+                        <i
+                            class="pi pi-angle-down"
+                            *ngIf="
+                                this.sort &&
+                                this.sort.prop === 'givenNm' &&
+                                this.sort.dir === 'desc'
+                            "
+                        ></i>
+                        <i
+                            class="pi pi-angle-up"
+                            *ngIf="
+                                this.sort && this.sort.prop === 'givenNm' && this.sort.dir === 'asc'
+                            "
+                        ></i>
                     </th>
                 </tr>
             </ng-template>
@@ -76,58 +167,103 @@
                 <tr>
                     <td>{{ uploadHistory.organizationNm }}</td>
                     <td>
-                        <span *ngIf="uploadHistory.status==='Processed'; then processed; else pending"></span>
-                        <ng-template #processed> <span
-                                class="state-processed">{{uploadHistory.status}}</span></ng-template>
-                        <ng-template #pending><span class="state-pending">{{uploadHistory.status}}</span></ng-template>
+                        <span
+                            *ngIf="
+                                uploadHistory.status === 'Processed';
+                                then processed;
+                                else pending
+                            "
+                        ></span>
+                        <ng-template #processed>
+                            <span class="state-processed">{{
+                                uploadHistory.status
+                            }}</span></ng-template
+                        >
+                        <ng-template #pending
+                            ><span class="state-pending">{{
+                                uploadHistory.status
+                            }}</span></ng-template
+                        >
                     </td>
                     <td>{{ uploadHistory.total }}</td>
                     <td>
-
-                        <button *ngIf="uploadHistory.errors>0; else zero"
-                            [id]="'downloadErrors_'+uploadHistory.uploadDeliveryId" pButton
+                        <button
+                            *ngIf="uploadHistory.errors > 0; else zero"
+                            [id]="'downloadErrors_' + uploadHistory.uploadDeliveryId"
+                            pButton
                             class="p-button-link zero-padding"
-                            (click)="onDownloadErrors(uploadHistory.uploadDeliveryId,uploadHistory.organizationNm,uploadHistory.reportPeriodYM)">{{uploadHistory.errors
-                            || '-'}}&nbsp;
-                            <i class="pi pi-download" *ngIf="uploadHistory.errors>0"></i></button>
-                        <ng-template #zero>{{0}}</ng-template>
-
+                            (click)="
+                                onDownloadErrors(
+                                    uploadHistory.uploadDeliveryId,
+                                    uploadHistory.organizationNm,
+                                    uploadHistory.reportPeriodYM
+                                )
+                            "
+                        >
+                            {{ uploadHistory.errors || '-' }}&nbsp;
+                            <i class="pi pi-download" *ngIf="uploadHistory.errors > 0"></i>
+                        </button>
+                        <ng-template #zero>{{ 0 }}</ng-template>
                     </td>
-                    <td>{{ uploadHistory.updDtm |date:'YYYY-MM-dd' }}</td>
-                    <td>{{ uploadHistory.givenNm }} {{uploadHistory.familyNm}}</td>
+                    <td>{{ uploadHistory.updDtm | date : 'yyyy-MM-dd' }}</td>
+                    <td>{{ uploadHistory.givenNm }} {{ uploadHistory.familyNm }}</td>
                 </tr>
             </ng-template>
-            <ng-template pTemplate="footer">
-            </ng-template>
+            <ng-template pTemplate="footer"> </ng-template>
             <ng-template pTemplate="emptymessage">
                 <tr>
                     <td colspan="5">No records found</td>
                 </tr>
             </ng-template>
         </p-table>
-        <p-paginator class="bl-history-paginator" *ngIf="currentPage" (onPageChange)="onPageChange($event)" [rows]="10"
+        <p-paginator
+            class="bl-history-paginator"
+            *ngIf="currentPage"
+            (onPageChange)="onPageChange($event)"
+            [rows]="10"
             [totalRecords]="currentPage.totalCount || 0"
             currentPageReportTemplate="Rows per page {rows} {first}-{last} of {totalRecords}"
-            [showFirstLastIcon]="false" [showPageLinks]="false" [showCurrentPageReport]="true"></p-paginator>
+            [showFirstLastIcon]="false"
+            [showPageLinks]="false"
+            [showCurrentPageReport]="true"
+        ></p-paginator>
     </div>
 </div>
 
-<p-dialog header="Upload Business Licence Data" class="upload-bl-popup" [modal]="true" [closable]="true"
-    [(visible)]="isUploadVisible" [style]="{width: '640px'}" clo>
+<p-dialog
+    header="Upload Business Licence Data"
+    class="upload-bl-popup"
+    [modal]="true"
+    [closable]="true"
+    [(visible)]="isUploadVisible"
+    [style]="{ width: '640px' }"
+    clo
+>
     <ng-template pTemplate="body">
-        <div class="row sub-header">
-            Upload Your Business Licence Data (.CSV File Only)
-        </div>
+        <div class="row sub-header">Upload Your Business Licence Data (.CSV File Only)</div>
         <div class="row file-select">
-            <app-upload-file #componentRef [extension]="'.csv'" [sizeLimit]="maxFileSize"
-                (filesSelected)="onFileSelected($event,componentRef)"></app-upload-file>
-            <div class="fileName">{{selectedFile?.name || 'No file selected'}}</div>
+            <app-upload-file
+                #componentRef
+                [extension]="'.csv'"
+                [sizeLimit]="maxFileSize"
+                (filesSelected)="onFileSelected($event, componentRef)"
+            ></app-upload-file>
+            <div class="fileName">{{ selectedFile?.name || 'No file selected' }}</div>
         </div>
     </ng-template>
     <ng-template pTemplate="footer">
         <div class="actions popup-actions">
-            <button [disabled]="!selectedFile" pButton id="submit-preview-btn" (click)="onUploadFile()">Upload</button>
-            <button pButton id="cancel-preview-btn" class="outline-btn" (click)="onCancelUpload()">Cancel</button>
+            <button
+                [disabled]="!selectedFile"
+                pButton
+                id="submit-preview-btn"
+                (click)="onUploadFile()"
+            >
+                Upload
+            </button>
+            <button pButton id="cancel-preview-btn" class="outline-btn" (click)="onCancelUpload()">
+                Cancel
+            </button>
         </div>
     </ng-template>
-</p-dialog>
\ No newline at end of file
+</p-dialog>