Merge pull request #1979 from bcgov/feature/ALCS-2175-adv-search-poc

ALCS-2175 Advanced search revamp
bcgov · Nov 14, 2024 · b86e630 · b86e630
2 parents bd14a7a + 667befe
commit b86e630
Show file tree

Hide file tree

Showing 33 changed files with 828 additions and 263 deletions.
diff --git a/.../src/app/features/search/application-search-table/application-search-table.component.html b/.../src/app/features/search/application-search-table/application-search-table.component.html
@@ -46,13 +46,14 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="portalStatus">
+    <ng-container matColumnDef="status">
       <th class="type-cell" mat-header-cell *matHeaderCellDef mat-sort-header>Portal Status</th>
       <td mat-cell class="type-cell" *matCellDef="let element">
         <app-application-submission-status-type-pill
           *ngIf="element.status"
           [type]="element.status"
         ></app-application-submission-status-type-pill>
+        <app-spinner-status *ngIf="!element.status" />
       </td>
     </ng-container>
 

diff --git a/...nd/src/app/features/search/application-search-table/application-search-table.component.ts b/...nd/src/app/features/search/application-search-table/application-search-table.component.ts
@@ -19,7 +19,7 @@ interface SearchResult {
   referenceId: string;
   board?: string;
   class: string;
-  status?: ApplicationSubmissionStatusPill;
+  status?: ApplicationSubmissionStatusPill | null;
 }
 
 @Component({
@@ -42,7 +42,7 @@ export class ApplicationSearchTableComponent {
 
   @Output() tableChange = new EventEmitter<TableChange>();
 
-  displayedColumns = ['fileId', 'dateSubmitted', 'ownerName', 'type', 'government', 'portalStatus'];
+  displayedColumns = ['fileId', 'dateSubmitted', 'ownerName', 'type', 'government', 'status'];
   dataSource: SearchResult[] = [];
   itemsPerPage = 20;
   total = 0;
@@ -88,24 +88,22 @@ export class ApplicationSearchTableComponent {
   private mapApplications(applications: ApplicationSearchResultDto[]): SearchResult[] {
     return applications.map((e) => {
       const status = this.statuses.find((st) => st.code === e.status);
-
       return {
         fileNumber: e.fileNumber,
         dateSubmitted: e.dateSubmitted,
         ownerName: e.ownerName,
         type: e.type,
         localGovernmentName: e.localGovernmentName,
-        portalStatus: e.portalStatus,
         referenceId: e.referenceId,
         board: e.boardCode,
         class: e.class,
-        status: {
-          backgroundColor: status?.portalBackgroundColor ?? defaultStatusBackgroundColour,
-          textColor: status?.portalColor ?? defaultStatusColour,
-          borderColor: status?.portalBackgroundColor,
-          label: status?.label,
-          shortLabel: status?.label,
-        },
+        status: status ? {
+          backgroundColor: status.portalBackgroundColor ?? defaultStatusBackgroundColour,
+          textColor: status.portalColor ?? defaultStatusColour,
+          borderColor: status.portalBackgroundColor,
+          label: status.label,
+          shortLabel: status.label,
+        } : null,
       };
     });
   }

diff --git a/...eatures/search/notice-of-intent-search-table/notice-of-intent-search-table.component.html b/...eatures/search/notice-of-intent-search-table/notice-of-intent-search-table.component.html
@@ -46,13 +46,14 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="portalStatus">
+    <ng-container matColumnDef="status">
       <th class="type-cell" mat-header-cell *matHeaderCellDef mat-sort-header>Portal Status</th>
       <td mat-cell class="type-cell" *matCellDef="let element">
         <app-application-submission-status-type-pill
           *ngIf="element.status"
           [type]="element.status"
         ></app-application-submission-status-type-pill>
+        <app-spinner-status *ngIf="!element.status" />
       </td>
     </ng-container>
 

diff --git a/.../features/search/notice-of-intent-search-table/notice-of-intent-search-table.component.ts b/.../features/search/notice-of-intent-search-table/notice-of-intent-search-table.component.ts
@@ -19,7 +19,7 @@ interface SearchResult {
   referenceId: string;
   board?: string;
   class: string;
-  status?: ApplicationSubmissionStatusPill;
+  status?: ApplicationSubmissionStatusPill | null;
 }
 
 @Component({
@@ -41,7 +41,7 @@ export class NoticeOfIntentSearchTableComponent {
 
   @Output() tableChange = new EventEmitter<TableChange>();
 
-  displayedColumns = ['fileId', 'dateSubmitted', 'ownerName', 'type', 'government', 'portalStatus'];
+  displayedColumns = ['fileId', 'dateSubmitted', 'ownerName', 'type', 'government', 'status'];
   dataSource: SearchResult[] = [];
 
   itemsPerPage = 20;
@@ -98,13 +98,13 @@ export class NoticeOfIntentSearchTableComponent {
         referenceId: e.referenceId,
         board: e.boardCode,
         class: e.class,
-        status: {
+        status: status ? {
           backgroundColor: status!.alcsBackgroundColor,
           textColor: status!.alcsColor,
           borderColor: status!.alcsBackgroundColor,
           label: status!.label,
           shortLabel: status!.label,
-        },
+        } : null,
       };
     });
   }

diff --git a/...rc/app/features/search/notification-search-table/notification-search-table.component.html b/...rc/app/features/search/notification-search-table/notification-search-table.component.html
@@ -46,13 +46,14 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="portalStatus">
+    <ng-container matColumnDef="status">
       <th class="type-cell" mat-header-cell *matHeaderCellDef mat-sort-header>Portal Status</th>
       <td mat-cell class="type-cell" *matCellDef="let element">
         <app-application-submission-status-type-pill
           *ngIf="element.status"
           [type]="element.status"
         ></app-application-submission-status-type-pill>
+        <app-spinner-status *ngIf="!element.status" />
       </td>
     </ng-container>
 

diff --git a/.../src/app/features/search/notification-search-table/notification-search-table.component.ts b/.../src/app/features/search/notification-search-table/notification-search-table.component.ts
@@ -18,7 +18,7 @@ interface SearchResult {
   referenceId: string;
   board?: string;
   class: string;
-  status?: ApplicationSubmissionStatusPill;
+  status?: ApplicationSubmissionStatusPill | null;
 }
 
 @Component({
@@ -41,7 +41,7 @@ export class NotificationSearchTableComponent {
 
   @Output() tableChange = new EventEmitter<TableChange>();
 
-  displayedColumns = ['fileId', 'dateSubmitted', 'ownerName', 'type', 'government', 'portalStatus'];
+  displayedColumns = ['fileId', 'dateSubmitted', 'ownerName', 'type', 'government', 'status'];
   dataSource: SearchResult[] = [];
   itemsPerPage = 20;
   total = 0;
@@ -97,13 +97,13 @@ export class NotificationSearchTableComponent {
         referenceId: e.referenceId,
         board: e.boardCode,
         class: e.class,
-        status: {
+        status: status ? {
           backgroundColor: status ? status!.alcsBackgroundColor : '',
           textColor: status ? status!.alcsColor : '',
           borderColor: status ? status!.alcsBackgroundColor : '',
           label: status ? status!.label : '',
           shortLabel: status ? status!.label : '',
-        },
+        } : null,
       };
     });
   }

diff --git a/alcs-frontend/src/app/features/search/search.component.html b/alcs-frontend/src/app/features/search/search.component.html
@@ -331,7 +331,7 @@ <h4>Date Range</h4>
 
 <div class="search-fields-wrapper search-result-wrapper" *ngIf="!searchResultsHidden">
   <h2 class="search-title">Search Results:</h2>
-  <mat-tab-group id="results" mat-align-tabs="start" [mat-stretch-tabs]="isCommissioner" #searchResultTabs>
+  <mat-tab-group id="results" mat-align-tabs="start" [mat-stretch-tabs]="isCommissioner" (selectedTabChange)="onTabChanged($event.index);" #searchResultTabs>
     <mat-tab>
       <ng-template mat-tab-label> Applications: {{ applicationTotal }}</ng-template>
       <app-application-search-table

diff --git a/alcs-frontend/src/app/features/search/search.component.ts b/alcs-frontend/src/app/features/search/search.component.ts
@@ -43,6 +43,14 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes';
 export const defaultStatusBackgroundColour = '#ffffff';
 export const defaultStatusColour = '#313132';
 
+enum searchTabs {
+  Applications = 0,
+  Nois = 1,
+  Plannings = 2,
+  Notifications = 3,
+  Inquiries = 4,
+}
+
 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
@@ -346,6 +354,7 @@ export class SearchComponent implements OnInit, OnDestroy {
 
     this.applications = result?.data ?? [];
     this.applicationTotal = result?.total ?? 0;
+    this.updateApplicationStatuses();
   }
 
   async onNoticeOfIntentSearch() {
@@ -354,6 +363,7 @@ export class SearchComponent implements OnInit, OnDestroy {
 
     this.noticeOfIntents = result?.data ?? [];
     this.noticeOfIntentTotal = result?.total ?? 0;
+    this.updateNoiStatuses();
   }
 
   async onPlanningReviewSearch() {
@@ -370,6 +380,7 @@ export class SearchComponent implements OnInit, OnDestroy {
 
     this.notifications = result?.data ?? [];
     this.notificationTotal = result?.total ?? 0;
+    this.updateNotificationStatuses();
   }
 
   async onInquirySearch() {
@@ -407,6 +418,22 @@ export class SearchComponent implements OnInit, OnDestroy {
     }
   }
 
+  async onTabChanged(index: number) {
+    switch (index) {
+      case searchTabs.Applications:
+        await this.updateApplicationStatuses();
+        break;
+      case searchTabs.Nois:
+        await this.updateNoiStatuses();
+        break;
+      case searchTabs.Notifications:
+        await this.updateNotificationStatuses();
+        break;
+      default:
+        break;
+    }
+  }
+
   onFileTypeChange(fileTypes: string[]) {
     this.componentTypeControl.setValue(fileTypes);
   }
@@ -529,6 +556,7 @@ export class SearchComponent implements OnInit, OnDestroy {
     ];
 
     this.tabGroup.selectedIndex = searchCounts.indexOf(Math.max(...searchCounts));
+    this.onTabChanged(this.tabGroup.selectedIndex);
   }
 
   private formatStringSearchParam(value: string | undefined | null) {
@@ -563,4 +591,49 @@ export class SearchComponent implements OnInit, OnDestroy {
     this.allStatuses = result;
     this.allStatuses.sort((a, b) => (a.label > b.label ? 1 : -1));
   }
+
+  private async updateApplicationStatuses() {
+    const needsUpdate = this.applications.filter((a) => a.status === null).length > 0;
+    if (!needsUpdate) return;
+    const statusUpdates = await this.searchService.advancedSearchApplicationStatusFetch(
+      this.applications.map((a) => a.fileNumber)
+    );
+    this.applications = this.applications.map((a) => {
+      const updatedStatus = statusUpdates ? statusUpdates.find((s) => s.fileNumber === a.fileNumber) : null;
+      return {
+        ...a,
+        status: updatedStatus ? updatedStatus.status : '',
+      }
+    });
+  }
+
+  private async updateNoiStatuses() {
+    const needsUpdate = this.noticeOfIntents.filter((a) => a.status === null).length > 0;
+    if (!needsUpdate) return;
+    const statusUpdates = await this.searchService.advancedSearchNoiStatusFetch(
+      this.noticeOfIntents.map((a) => a.fileNumber)
+    );
+    this.noticeOfIntents = this.noticeOfIntents.map((a) => {
+      const updatedStatus = statusUpdates ? statusUpdates.find((s) => s.fileNumber === a.fileNumber) : null;
+      return {
+        ...a,
+        status: updatedStatus ? updatedStatus.status : '',
+      }
+    });
+  }
+
+  private async updateNotificationStatuses() {
+    const needsUpdate = this.notifications.filter((a) => a.status === null).length > 0;
+    if (!needsUpdate) return;
+    const statusUpdates = await this.searchService.advancedSearchNotificationStatusFetch(
+      this.notifications.map((a) => a.fileNumber)
+    );
+    this.notifications = this.notifications.map((a) => {
+      const updatedStatus = statusUpdates ? statusUpdates.find((s) => s.fileNumber === a.fileNumber) : null;
+      return {
+        ...a,
+        status: updatedStatus ? updatedStatus.status : '',
+      }
+    });
+  }
 }
diff --git a/alcs-frontend/src/app/features/search/search.module.ts b/alcs-frontend/src/app/features/search/search.module.ts
@@ -13,6 +13,7 @@ import { NotificationSearchTableComponent } from './notification-search-table/no
 import { SearchComponent } from './search.component';
 import { InquirySearchTableComponent } from './inquiry-search-table/inquiry-search-table.component';
 import { MatChipsModule } from '@angular/material/chips';
+import { SpinnerStatusComponent } from './spinner-status/spinner-status.component';
 
 const routes: Routes = [
   {
@@ -30,6 +31,7 @@ const routes: Routes = [
     NotificationSearchTableComponent,
     FileTypeFilterDropDownComponent,
     InquirySearchTableComponent,
+    SpinnerStatusComponent,
   ],
   imports: [
     CommonModule,

diff --git a/alcs-frontend/src/app/features/search/spinner-status/spinner-status.component.html b/alcs-frontend/src/app/features/search/spinner-status/spinner-status.component.html
@@ -0,0 +1,3 @@
+<div class="spinner-container">
+  <mat-spinner class="spinner-overlay"></mat-spinner>
+</div>
diff --git a/alcs-frontend/src/app/features/search/spinner-status/spinner-status.component.scss b/alcs-frontend/src/app/features/search/spinner-status/spinner-status.component.scss
@@ -0,0 +1,12 @@
+.spinner-container {
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner-overlay {
+  z-index: 2;
+  opacity: 0.4;
+}
diff --git a/alcs-frontend/src/app/features/search/spinner-status/spinner-status.component.ts b/alcs-frontend/src/app/features/search/spinner-status/spinner-status.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner-status',
+  templateUrl: './spinner-status.component.html',
+  styleUrls: ['./spinner-status.component.scss'],
+})
+export class SpinnerStatusComponent {}
diff --git a/alcs-frontend/src/app/services/search/search.dto.ts b/alcs-frontend/src/app/services/search/search.dto.ts
@@ -11,7 +11,7 @@ export interface ApplicationSearchResultDto {
   dateSubmitted: number;
   portalStatus?: string;
   class: string;
-  status: string;
+  status?: string | null;
 }
 
 export interface NoticeOfIntentSearchResultDto extends ApplicationSearchResultDto {}
@@ -93,3 +93,8 @@ export interface SearchResultDto {
   boardCode?: string;
   label?: ApplicationTypeDto;
 }
+
+export interface StatusUpdateSearchResultDto {
+  fileNumber: string;
+  status: string;
+}