Search Pt3

portal-frontend/src/app/features/public/public.module.ts

@@ -11,6 +11,7 @@ import { FileTypeFilterDropDownComponent } from './search/file-type-filter-drop-
 import { NoticeOfIntentSearchTableComponent } from './search/notice-of-intent-search-table/notice-of-intent-search-table.component';
 import { NotificationSearchTableComponent } from './search/notification-search-table/notification-search-table.component';
 import { PublicSearchComponent } from './search/public-search.component';
+import { SearchListComponent } from './search/search-list/search-list.component';
 
 const routes: Routes = [
   {
@@ -26,6 +27,7 @@ const routes: Routes = [
     NoticeOfIntentSearchTableComponent,
     ApplicationSearchTableComponent,
     FileTypeFilterDropDownComponent,
+    SearchListComponent,
   ],
   imports: [
     CommonModule,

portal-frontend/src/app/features/public/search/application-search-table/application-search-table.component.html

@@ -63,7 +63,7 @@
     <tr class="mat-row no-data" *matNoDataRow>
       <td class="text-center" colspan="6">
         <div><b>No applications found.</b></div>
-        <div>Please adjust criteria and try again.</div>
+        <div>Please adjust search criteria and try again.</div>
       </td>
     </tr>
   </table>
@@ -78,5 +78,5 @@
 
 <div class="no-data" *ngIf="_totalCount === 0">
   <div><b>No applications found.</b></div>
-  <div>Please adjust criteria and try again.</div>
+  <div>Please adjust search criteria and try again.</div>
 </div>

portal-frontend/src/app/features/public/search/application-search-table/application-search-table.component.ts

@@ -73,9 +73,7 @@ export class ApplicationSearchTableComponent implements OnDestroy {
   }
 
   async onSelectRecord(record: SearchResult) {
-    const url = this.router.serializeUrl(this.router.createUrlTree([`/application/${record.referenceId}`]));
-
-    window.open(url, '_blank');
+    await this.router.navigateByUrl(`/public/application/${record.referenceId}`);
   }
 
   private mapApplications(applications: ApplicationSearchResultDto[]): SearchResult[] {

portal-frontend/src/app/features/public/search/notice-of-intent-search-table/notice-of-intent-search-table.component.html

@@ -63,7 +63,7 @@
     <tr class="mat-row no-data" *matNoDataRow>
       <td class="text-center" colspan="6">
         <div><b>No notice of intent found.</b></div>
-        <div>Please adjust criteria and try again.</div>
+        <div>Please adjust search criteria and try again.</div>
       </td>
     </tr>
   </table>
@@ -77,5 +77,5 @@
 </ng-container>
 <div class="no-data" *ngIf="_totalCount === 0">
   <div><b>No notice of intent found.</b></div>
-  <div>Please adjust criteria and try again.</div>
+  <div>Please adjust search criteria and try again.</div>
 </div>

portal-frontend/src/app/features/public/search/notice-of-intent-search-table/notice-of-intent-search-table.component.ts

@@ -72,9 +72,7 @@ export class NoticeOfIntentSearchTableComponent implements OnDestroy {
   }
 
   async onSelectRecord(record: SearchResult) {
-    const url = this.router.serializeUrl(this.router.createUrlTree([`/notice-of-intent/${record.referenceId}`]));
-
-    window.open(url, '_blank');
+    await this.router.navigateByUrl(`/public/notice-of-intent/${record.referenceId}`);
   }
 
   private mapNoticeOfIntent(applications: NoticeOfIntentSearchResultDto[]): SearchResult[] {

portal-frontend/src/app/features/public/search/notification-search-table/notification-search-table.component.html

@@ -16,7 +16,7 @@
     </ng-container>
 
     <ng-container matColumnDef="ownerName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Owner Name</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Transferee</th>
       <td mat-cell *matCellDef="let element">
         {{ element.ownerName | emptyColumn }}
       </td>
@@ -63,7 +63,7 @@
     <tr class="mat-row no-data" *matNoDataRow>
       <td class="text-center" colspan="6">
         <div><b>No notice of intent found.</b></div>
-        <div>Please adjust criteria and try again.</div>
+        <div>Please adjust search criteria and try again.</div>
       </td>
     </tr>
   </table>
@@ -77,5 +77,5 @@
 </ng-container>
 <div class="no-data" *ngIf="_totalCount === 0">
   <div><b>No notifications found.</b></div>
-  <div>Please adjust criteria and try again.</div>
+  <div>Please adjust search criteria and try again.</div>
 </div>

portal-frontend/src/app/features/public/search/notification-search-table/notification-search-table.component.ts

@@ -71,9 +71,7 @@ export class NotificationSearchTableComponent implements OnDestroy {
   }
 
   async onSelectRecord(record: SearchResult) {
-    const url = this.router.serializeUrl(this.router.createUrlTree([`/notification/${record.referenceId}`]));
-
-    window.open(url, '_blank');
+    await this.router.navigateByUrl(`/public/notification/${record.referenceId}`);
   }
 
   private mapNotifications(notifications: NotificationSearchResultDto[]): SearchResult[] {

portal-frontend/src/app/features/public/search/public-search.component.html

@@ -12,7 +12,7 @@ <h3>Search by one or more of the following fields:</h3>
       <div>
         <label for="fileNumber">ALC ID</label>
         <mat-form-field appearance="outline">
-          <input id="fileNumber" matInput formControlName="fileNumber" />
+          <input mask="0*" id="fileNumber" matInput formControlName="fileNumber" />
         </mat-form-field>
       </div>
       <div>
@@ -66,7 +66,7 @@ <h3>Search by one or more of the following fields:</h3>
       <div>
         <label for="status">Region</label>
         <mat-form-field appearance="outline">
-          <mat-select id="region" formControlName="region">
+          <mat-select multiple="true" id="region" formControlName="region">
             <mat-option *ngFor="let region of regions" [value]="region.code">{{ region.label }}</mat-option>
           </mat-select>
         </mat-form-field>
@@ -89,7 +89,7 @@ <h3>Search by one or more of the following fields:</h3>
       <div>
         <label for="status">Status</label>
         <mat-form-field appearance="outline">
-          <mat-select id="status" [formControl]="portalStatusControl">
+          <mat-select multiple="true" id="status" [formControl]="portalStatusControl">
             <mat-option *ngFor="let status of STATUS_MAP" [value]="status[1]">
               {{ status[0] }}
             </mat-option>
@@ -99,7 +99,7 @@ <h3>Search by one or more of the following fields:</h3>
       <div class="full-width">
         <label for="status">Decision Dates</label>
         <mat-form-field appearance="outline">
-          <mat-date-range-input [rangePicker]="decisionDatePicker">
+          <mat-date-range-input [max]="today" [rangePicker]="decisionDatePicker">
             <input matStartDate formControlName="dateDecidedFrom" />
             <input matEndDate formControlName="dateDecidedTo" />
           </mat-date-range-input>
@@ -115,12 +115,28 @@ <h3>Search by one or more of the following fields:</h3>
     </div>
   </form>
 
+  <div *ngIf="isLoading && searchResultsHidden" class="center">
+    <mat-spinner></mat-spinner>
+  </div>
   <div class="search-fields-wrapper search-result-wrapper" *ngIf="!searchResultsHidden">
     <h2 class="search-title">Search Results</h2>
-    <mat-tab-group mat-align-tabs="start" mat-stretch-tabs="false" #searchResultTabs>
+    <div *ngIf="isLoading && !searchResultsHidden" class="center">
+      <mat-spinner></mat-spinner>
+    </div>
+    <mat-tab-group *ngIf="!isLoading" mat-align-tabs="start" mat-stretch-tabs #searchResultTabs>
       <mat-tab>
         <ng-template mat-tab-label> Applications: {{ applicationTotal }} </ng-template>
+        <app-search-list
+          *ngIf="isMobile"
+          [results]="applications"
+          [totalCount]="applicationTotal"
+          [statuses]="statuses"
+          [regions]="regions"
+          (loadMore)="onLoadMore('APP')"
+        >
+        </app-search-list>
         <app-application-search-table
+          *ngIf="!isMobile"
           [applications]="applications"
           [totalCount]="applicationTotal"
           [statuses]="statuses"
@@ -131,7 +147,17 @@ <h2 class="search-title">Search Results</h2>
 
       <mat-tab>
         <ng-template mat-tab-label> Notice of Intent: {{ noticeOfIntentTotal }} </ng-template>
+        <app-search-list
+          *ngIf="isMobile"
+          [results]="noticeOfIntents"
+          [totalCount]="noticeOfIntentTotal"
+          [statuses]="statuses"
+          [regions]="regions"
+          (loadMore)="onLoadMore('NOI')"
+        >
+        </app-search-list>
         <app-notice-of-intent-search-table
+          *ngIf="!isMobile"
           [noticeOfIntents]="noticeOfIntents"
           [totalCount]="noticeOfIntentTotal"
           [statuses]="statuses"
@@ -142,7 +168,17 @@ <h2 class="search-title">Search Results</h2>
 
       <mat-tab>
         <ng-template mat-tab-label> Notifications: {{ notificationTotal }} </ng-template>
+        <app-search-list
+          *ngIf="isMobile"
+          [results]="notifications"
+          [totalCount]="notificationTotal"
+          [statuses]="statuses"
+          [regions]="regions"
+          (loadMore)="onLoadMore('NOTI')"
+        >
+        </app-search-list>
         <app-notification-search-table
+          *ngIf="!isMobile"
           [statuses]="statuses"
           [notifications]="notifications"
           [totalCount]="notificationTotal"

portal-frontend/src/app/features/public/search/public-search.component.scss

@@ -8,6 +8,10 @@
     border-radius: rem(16);
     font-weight: bold;
   }
+
+  .no-data {
+    margin-top: rem(16);
+  }
 }
 
 .search-form {

portal-frontend/src/app/features/public/search/public-search.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatPaginator } from '@angular/material/paginator';
@@ -19,6 +19,7 @@ import {
 import { SearchService } from '../../../services/search/search.service';
 import { StatusService } from '../../../services/status/status.service';
 import { ToastService } from '../../../services/toast/toast.service';
+import { MOBILE_BREAKPOINT } from '../../../shared/utils/breakpoints';
 import { FileTypeFilterDropDownComponent } from './file-type-filter-drop-down/file-type-filter-drop-down.component';
 import { TableChange } from './search.interface';
 
@@ -57,7 +58,7 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
   sortField = 'dateSubmitted';
 
   localGovernmentControl = new FormControl<string | undefined>(undefined);
-  portalStatusControl = new FormControl<string | undefined>(undefined);
+  portalStatusControl = new FormControl<string[]>([]);
   componentTypeControl = new FormControl<string[] | undefined>(undefined);
   pidControl = new FormControl<string | undefined>(undefined);
   nameControl = new FormControl<string | undefined>(undefined);
@@ -71,7 +72,7 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
     componentType: this.componentTypeControl,
     government: this.localGovernmentControl,
     decisionMaker: new FormControl<string | undefined>(undefined),
-    region: new FormControl<string | undefined>(undefined),
+    region: new FormControl<string[]>([]),
     dateDecidedFrom: new FormControl(undefined),
     dateDecidedTo: new FormControl(undefined),
   });
@@ -86,6 +87,29 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
   searchResultsHidden = true;
   decisionMakers: DecisionMakerDto[] = [];
   STATUS_MAP = Object.entries(STATUS_MAP);
+  isMobile = false;
+  isLoading = false;
+  today = new Date();
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    const isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+
+    if (this.isMobile !== isMobile) {
+      if (isMobile) {
+        this.itemsPerPage = 5;
+        this.pageIndex = 0;
+      } else {
+        this.itemsPerPage = 20;
+        this.pageIndex = 0;
+      }
+      if (!this.searchResultsHidden) {
+        this.onSubmit();
+      }
+    }
+
+    this.isMobile = isMobile;
+  }
 
   constructor(
     private searchService: SearchService,
@@ -98,6 +122,11 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+    if (this.isMobile) {
+      this.itemsPerPage = 5;
+    }
+
     this.setup();
 
     this.searchForm.valueChanges.pipe(takeUntil(this.$destroy)).subscribe(() => {
@@ -139,8 +168,10 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
 
   async onSubmit() {
     const searchParams = this.getSearchParams();
+    this.isLoading = true;
     const result = await this.searchService.search(searchParams);
     this.searchResultsHidden = false;
+    this.isLoading = false;
 
     // push tab activation to next render cycle, after the tabGroup is rendered
     setTimeout(() => {
@@ -176,6 +207,8 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
 
   onReset() {
     this.searchForm.reset();
+    this.isLoading = false;
+    this.searchResultsHidden = true;
 
     if (this.fileTypeFilterDropDownComponent) {
       this.fileTypeFilterDropDownComponent.reset();
@@ -197,9 +230,9 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
       name: this.formatStringSearchParam(searchControls.name.value),
       civicAddress: this.formatStringSearchParam(searchControls.civicAddress.value),
       pid: this.formatStringSearchParam(searchControls.pid.value),
-      portalStatusCode: searchControls.portalStatus.value ?? undefined,
+      portalStatusCodes: searchControls.portalStatus.value ?? undefined,
       governmentName: this.formatStringSearchParam(searchControls.government.value),
-      regionCode: searchControls.region.value ?? undefined,
+      regionCodes: searchControls.region.value ?? undefined,
       decisionMakerCode: searchControls.decisionMaker.value ?? undefined,
       dateDecidedFrom: searchControls.dateDecidedFrom.value
         ? new Date(searchControls.dateDecidedFrom.value).getTime()
@@ -235,6 +268,38 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
     this.notificationTotal = result?.total ?? 0;
   }
 
+  async onLoadMore(table: string) {
+    this.pageIndex += 1;
+    const searchParams = this.getSearchParams();
+
+    let result;
+    switch (table) {
+      case 'APP':
+        result = await this.searchService.searchApplications(searchParams);
+        if (result) {
+          this.applications = [...this.applications, ...result?.data];
+          this.applicationTotal = result?.total ?? 0;
+        }
+        break;
+      case 'NOI':
+        result = await this.searchService.searchNoticeOfIntents(searchParams);
+        if (result) {
+          this.noticeOfIntents = [...this.noticeOfIntents, ...result?.data];
+          this.noticeOfIntentTotal = result?.total ?? 0;
+        }
+        break;
+      case 'NOTI':
+        result = await this.searchService.searchNotifications(searchParams);
+        if (result) {
+          this.notifications = [...this.notifications, ...result?.data];
+          this.notificationTotal = result?.total ?? 0;
+        }
+        break;
+      default:
+        this.toastService.showErrorToast('Not implemented');
+    }
+  }
+
   async onTableChange(event: TableChange) {
     this.pageIndex = event.pageIndex;
     this.itemsPerPage = event.itemsPerPage;

portal-frontend/src/app/features/public/search/search-list/search-list.component.html

@@ -0,0 +1,26 @@
+<div class="result-list" *ngIf="totalCount > 0">
+  <div *ngFor="let result of _results" (click)="onSelectRecord(result)" class="result">
+    <div class="subheading2">{{ result.fileNumber }} - {{ result.ownerName }}</div>
+    <div [title]="result.type">{{ result.type }}</div>
+    <div [title]="result.localGovernmentName">{{ result.localGovernmentName }}</div>
+    <div>Last Updated: {{ result.lastUpdate | momentFormat }}</div>
+    <div
+      *ngIf="result.status"
+      class="label"
+      [style]="{ 'background-color': result.status.portalBackgroundColor, color: result.status.portalColor }"
+    >
+      {{ result.status.label }}
+    </div>
+  </div>
+</div>
+<div *ngIf="totalCount !== 0">
+  <div class="center">Showing results 1-{{ visibleCount }} of {{ totalCount }}</div>
+  <div class="center">
+    <a *ngIf="visibleCount < totalCount" (click)="onLoadMore()"> View more results </a>
+  </div>
+</div>
+
+<div class="no-data" *ngIf="totalCount === 0">
+  <div><b>No applications found.</b></div>
+  <div>Please adjust search criteria and try again.</div>
+</div>