Merge pull request #1381 from bcgov/feature/ALCS-1608

Add Lots of Loading Spinners
bcgov · Feb 5, 2024 · d574a33 · d574a33
2 parents 812aae4 + d1bcd66
commit d574a33
Show file tree

Hide file tree

Showing 20 changed files with 106 additions and 55 deletions.
diff --git a/alcs-frontend/src/app/features/application/applicant-info/applicant-info.component.html b/alcs-frontend/src/app/features/application/applicant-info/applicant-info.component.html
@@ -14,4 +14,7 @@
       [showEdit]="true"
     ></app-application-details>
   </div>
+  <div class="center">
+    <mat-spinner *ngIf="!application || !submission"></mat-spinner>
+  </div>
 </div>
diff --git a/...eatures/application/applicant-info/application-details/application-details.component.html b/...eatures/application/applicant-info/application-details/application-details.component.html
@@ -1,5 +1,5 @@
 <section>
-  <app-parcel *ngIf="files && submission" [files]="files" [application]="submission"></app-parcel>
+  <app-parcel *ngIf="submission" [application]="submission"></app-parcel>
   <div class="review-table edit-section">
     <div class="full-width center">
       <button *ngIf="showEdit" [disabled]="disableEdit" (click)="onEdit(0)" mat-flat-button color="accent">

diff --git a/.../app/features/application/applicant-info/application-details/parcel/parcel.component.html b/.../app/features/application/applicant-info/application-details/parcel/parcel.component.html
@@ -3,6 +3,10 @@ <h3 class="flex-item">
 </h3>
 
 <div class="review-table">
+  <div *ngIf="!parcels" class="center full-width">
+    <mat-spinner />
+  </div>
+
   <ng-container *ngFor="let parcel of parcels; let parcelInd = index">
     <div class="full-width flex-space-between-wrap">
       <h4 [id]="parcel.uuid">Parcel #{{ parcelInd + 1 }}: Parcel and Owner Information</h4>

diff --git a/...rc/app/features/application/applicant-info/application-details/parcel/parcel.component.ts b/...rc/app/features/application/applicant-info/application-details/parcel/parcel.component.ts
@@ -16,13 +16,12 @@ export class ParcelComponent implements OnInit, OnChanges, OnDestroy, AfterConte
   $destroy = new Subject<void>();
 
   @Input() application!: ApplicationSubmissionDto;
-  @Input() files: ApplicationDocumentDto[] = [];
 
   pageTitle: string = 'Application Parcels';
   showCertificateOfTitle: boolean = true;
 
   fileId: string = '';
-  parcels: any[] = [];
+  parcels: any[] | undefined;
 
   PARCEL_OWNERSHIP_TYPES = PARCEL_OWNERSHIP_TYPE;
   private anchorededParcelUuid: string | undefined;

diff --git a/alcs-frontend/src/app/features/application/proposal/parcel-prep/parcel-prep.component.html b/alcs-frontend/src/app/features/application/proposal/parcel-prep/parcel-prep.component.html
@@ -1,4 +1,7 @@
-<table mat-table [dataSource]="parcels">
+<div *ngIf="!parcels" class="center">
+  <mat-spinner></mat-spinner>
+</div>
+<table *ngIf="parcels" mat-table [dataSource]="parcels">
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 

diff --git a/alcs-frontend/src/app/features/application/proposal/parcel-prep/parcel-prep.component.ts b/alcs-frontend/src/app/features/application/proposal/parcel-prep/parcel-prep.component.ts
@@ -11,16 +11,18 @@ export class ParcelPrepComponent implements OnChanges {
   @Input() fileNumber = '';
 
   displayedColumns = ['number', 'pid', 'pin', 'civicAddress', 'area', 'alrArea', 'owners', 'actions'];
-  parcels: {
-    pin?: string;
-    pid?: string;
-    mapAreaHectares: string;
-    alrArea: number;
-    owners: string;
-    fullOwners: string;
-    hasManyOwners: boolean;
-    uuid: string;
-  }[] = [];
+  parcels:
+    | {
+        pin?: string;
+        pid?: string;
+        mapAreaHectares: string;
+        alrArea: number;
+        owners: string;
+        fullOwners: string;
+        hasManyOwners: boolean;
+        uuid: string;
+      }[]
+    | undefined;
 
   constructor(
     private parcelService: ApplicationParcelService,

diff --git a/alcs-frontend/src/app/features/notice-of-intent/applicant-info/applicant-info.component.html b/alcs-frontend/src/app/features/notice-of-intent/applicant-info/applicant-info.component.html
@@ -8,4 +8,8 @@
       [showEdit]="true"
     ></app-noi-details>
   </div>
+
+  <div class="center">
+    <mat-spinner *ngIf="!noticeOfIntent || !submission"></mat-spinner>
+  </div>
 </div>
diff --git a/...e-of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.component.ts b/...e-of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.component.ts
@@ -56,10 +56,10 @@ export class NoticeOfIntentDetailsComponent implements OnInit, OnChanges, OnDest
     this.otherFiles = documents.filter(
       (document) =>
         document.type &&
-        [DOCUMENT_TYPE.PHOTOGRAPH, DOCUMENT_TYPE.OTHER, DOCUMENT_TYPE.PROFESSIONAL_REPORT].includes(document.type.code)
+        [DOCUMENT_TYPE.PHOTOGRAPH, DOCUMENT_TYPE.OTHER, DOCUMENT_TYPE.PROFESSIONAL_REPORT].includes(document.type.code),
     );
     this.authorizationLetters = documents.filter(
-      (document) => document.type?.code === DOCUMENT_TYPE.AUTHORIZATION_LETTER
+      (document) => document.type?.code === DOCUMENT_TYPE.AUTHORIZATION_LETTER,
     );
     this.files = documents;
   }

diff --git a/...tice-of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.module.ts b/...tice-of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.module.ts
@@ -1,5 +1,6 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgIf } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { NgxMaskPipe } from 'ngx-mask';
 import { SharedModule } from '../../../../shared/shared.module';
 import { AdditionalInformationComponent } from './additional-information/additional-information.component';
@@ -18,7 +19,7 @@ import { RosoDetailsComponent } from './roso-details/roso-details.component';
     NoticeOfIntentDetailsComponent,
     AdditionalInformationComponent,
   ],
-  imports: [CommonModule, SharedModule, NgxMaskPipe],
+  imports: [CommonModule, SharedModule, NgxMaskPipe, MatProgressSpinnerModule, NgIf],
   exports: [NoticeOfIntentDetailsComponent],
 })
 export class NoticeOfIntentDetailsModule {}
diff --git a/...res/notice-of-intent/applicant-info/notice-of-intent-details/parcel/parcel.component.html b/...res/notice-of-intent/applicant-info/notice-of-intent-details/parcel/parcel.component.html
@@ -1,6 +1,10 @@
 <h3 class="flex-item">Notice of Intent Parcels</h3>
 
 <div class="review-table">
+  <div *ngIf="!parcels" class="center full-width">
+    <mat-spinner />
+  </div>
+
   <ng-container *ngFor="let parcel of parcels; let parcelInd = index">
     <div class="full-width flex-space-between-wrap">
       <h4 [id]="parcel.uuid">Parcel #{{ parcelInd + 1 }}: Parcel and Owner Information</h4>

diff --git a/...tures/notice-of-intent/applicant-info/notice-of-intent-details/parcel/parcel.component.ts b/...tures/notice-of-intent/applicant-info/notice-of-intent-details/parcel/parcel.component.ts
@@ -11,18 +11,18 @@ import {
 import { PARCEL_OWNERSHIP_TYPE } from '../../../../../shared/dto/parcel-ownership.type.dto';
 
 @Component({
-  selector: 'app-parcel',
+  selector: 'app-parcel[noticeOfIntent][files]',
   templateUrl: './parcel.component.html',
   styleUrls: ['./parcel.component.scss'],
 })
 export class ParcelComponent implements OnInit, OnChanges, OnDestroy, AfterContentChecked {
   $destroy = new Subject<void>();
 
   @Input() noticeOfIntent!: NoticeOfIntentSubmissionDto;
-  @Input() files: NoticeOfIntentDocumentDto[] = [];
+  @Input() files!: NoticeOfIntentDocumentDto[];
 
   fileId: string = '';
-  parcels: NoticeOfIntentParcelDto[] = [];
+  parcels: NoticeOfIntentParcelDto[] | undefined;
 
   PARCEL_OWNERSHIP_TYPES = PARCEL_OWNERSHIP_TYPE;
   private anchorededParcelUuid: string | undefined;
@@ -45,6 +45,8 @@ export class ParcelComponent implements OnInit, OnChanges, OnDestroy, AfterConte
     const file = this.files.find((file) => file.uuid === uuid);
     if (file) {
       await this.noiDocumentService.download(file.uuid, file.fileName);
+    } else {
+      console.error('Failed to find File in Array');
     }
   }
 

diff --git a/...rontend/src/app/features/notice-of-intent/proposal/parcel-prep/parcel-prep.component.html b/...rontend/src/app/features/notice-of-intent/proposal/parcel-prep/parcel-prep.component.html
@@ -1,4 +1,7 @@
-<table mat-table [dataSource]="parcels">
+<div *ngIf="!parcels" class="center">
+  <mat-spinner></mat-spinner>
+</div>
+<table *ngIf="parcels" mat-table [dataSource]="parcels">
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 

diff --git a/...-frontend/src/app/features/notice-of-intent/proposal/parcel-prep/parcel-prep.component.ts b/...-frontend/src/app/features/notice-of-intent/proposal/parcel-prep/parcel-prep.component.ts
@@ -11,16 +11,18 @@ export class ParcelPrepComponent implements OnChanges {
   @Input() fileNumber = '';
 
   displayedColumns = ['number', 'pid', 'pin', 'civicAddress', 'area', 'alrArea', 'owners', 'actions'];
-  parcels: {
-    pin?: string;
-    pid?: string;
-    mapAreaHectares: string;
-    alrArea: number;
-    owners: string;
-    fullOwners: string;
-    hasManyOwners: boolean;
-    uuid: string;
-  }[] = [];
+  parcels:
+    | {
+        pin?: string;
+        pid?: string;
+        mapAreaHectares: string;
+        alrArea: number;
+        owners: string;
+        fullOwners: string;
+        hasManyOwners: boolean;
+        uuid: string;
+      }[]
+    | undefined;
 
   constructor(
     private parcelService: NoticeOfIntentParcelService,

diff --git a/.../src/app/features/applications/view-submission/view-application-submission.component.html b/.../src/app/features/applications/view-submission/view-application-submission.component.html
@@ -33,6 +33,9 @@ <h4 *ngIf="application">Application ID: {{ application.fileNumber }}</h4>
   <div class="navigation">
     <mat-tab-group [(selectedIndex)]="selectedIndex">
       <mat-tab label="Applicant Submission">
+        <div *ngIf="!application" class="center">
+          <mat-spinner></mat-spinner>
+        </div>
         <div *ngIf="application" class="content">
           <section>
             <div class="header">

diff --git a/...nd/src/app/features/notice-of-intents/edit-submission/parcels/parcel-details.component.ts b/...nd/src/app/features/notice-of-intents/edit-submission/parcels/parcel-details.component.ts
@@ -1,6 +1,5 @@
 import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
 import { BehaviorSubject, takeUntil } from 'rxjs';
 import { NoticeOfIntentOwnerDto } from '../../../../services/notice-of-intent-owner/notice-of-intent-owner.dto';
 import { NoticeOfIntentOwnerService } from '../../../../services/notice-of-intent-owner/notice-of-intent-owner.service';

diff --git a/...eatures/notice-of-intents/view-submission/view-notice-of-intent-submission.component.html b/...eatures/notice-of-intents/view-submission/view-notice-of-intent-submission.component.html
@@ -33,6 +33,9 @@ <h4 *ngIf="submission">NOI ID: {{ submission.fileNumber }}</h4>
   <div class="navigation">
     <mat-tab-group [(selectedIndex)]="selectedIndex">
       <mat-tab label="Applicant Submission">
+        <div *ngIf="!submission" class="center">
+          <mat-spinner></mat-spinner>
+        </div>
         <div *ngIf="submission" class="content">
           <section>
             <div class="header">
@@ -41,8 +44,12 @@ <h2>Applicant Submission</h2>
                 <button mat-flat-button color="accent" (click)="onDownloadSubmissionPdf(submission.fileNumber)">
                   Download PDF
                 </button>
-                <button mat-flat-button color="primary" *ngIf="submission && submission.canEdit" 
-                [routerLink]="'/notice-of-intent/' + submission.fileNumber + '/edit'">
+                <button
+                  mat-flat-button
+                  color="primary"
+                  *ngIf="submission && submission.canEdit"
+                  [routerLink]="'/notice-of-intent/' + submission.fileNumber + '/edit'"
+                >
                   <div class="continue-button-content">
                     <span>Continue NOI</span>
                     <mat-icon>keyboard_double_arrow_right</mat-icon>
@@ -69,16 +76,18 @@ <h2>Applicant Submission</h2>
       </mat-tab>
     </mat-tab-group>
     <div *ngIf="submission && submission.canEdit" class="continue-button-container">
-      <button mat-stroked-button color="warn" (click)="onCancel(submission.uuid)">
-        Cancel NOI
+      <button mat-stroked-button color="warn" (click)="onCancel(submission.uuid)">Cancel NOI</button>
+      <button
+        mat-flat-button
+        color="primary"
+        *ngIf="submission && submission.canEdit"
+        [routerLink]="'/notice-of-intent/' + submission.fileNumber + '/edit'"
+      >
+        <div class="continue-button-content">
+          <span>Continue NOI</span>
+          <mat-icon>keyboard_double_arrow_right</mat-icon>
+        </div>
       </button>
-      <button mat-flat-button color="primary" *ngIf="submission && submission.canEdit" 
-        [routerLink]="'/notice-of-intent/' + submission.fileNumber + '/edit'">
-          <div class="continue-button-content">
-            <span>Continue NOI</span>
-            <mat-icon>keyboard_double_arrow_right</mat-icon>
-          </div>
-        </button>
     </div>
   </div>
 </div>
diff --git a/...rc/app/features/notifications/view-submission/view-notification-submission.component.html b/...rc/app/features/notifications/view-submission/view-notification-submission.component.html
@@ -33,13 +33,20 @@ <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }}</h4>
   <div class="navigation">
     <mat-tab-group [(selectedIndex)]="selectedIndex">
       <mat-tab label="Applicant Submission">
+        <div *ngIf="!submission" class="center">
+          <mat-spinner></mat-spinner>
+        </div>
         <div *ngIf="submission" class="content">
           <section>
             <div class="header">
               <h2>Applicant Submission</h2>
               <div class="btns-wrapper">
-                <button mat-flat-button color="primary" *ngIf="submission && submission.canEdit" 
-                [routerLink]="'/notification/' + submission.fileNumber + '/edit'">
+                <button
+                  mat-flat-button
+                  color="primary"
+                  *ngIf="submission && submission.canEdit"
+                  [routerLink]="'/notification/' + submission.fileNumber + '/edit'"
+                >
                   <div class="continue-button-content">
                     <span>Continue SRW</span>
                     <mat-icon>keyboard_double_arrow_right</mat-icon>
@@ -68,16 +75,13 @@ <h2>Applicant Submission</h2>
       </mat-tab>
     </mat-tab-group>
     <div *ngIf="submission && submission.canEdit" class="continue-button-container">
-      <button mat-stroked-button color="warn" (click)="onCancel(submission.uuid)">
-        Cancel SRW
+      <button mat-stroked-button color="warn" (click)="onCancel(submission.uuid)">Cancel SRW</button>
+      <button mat-flat-button color="primary" [routerLink]="'/notification/' + submission.fileNumber + '/edit'">
+        <div class="continue-button-content">
+          <span>Continue SRW</span>
+          <mat-icon>keyboard_double_arrow_right</mat-icon>
+        </div>
       </button>
-      <button mat-flat-button color="primary"
-        [routerLink]="'/notification/' + submission.fileNumber + '/edit'">
-          <div class="continue-button-content">
-            <span>Continue SRW</span>
-            <mat-icon>keyboard_double_arrow_right</mat-icon>
-          </div>
-        </button>
     </div>
   </div>
 </div>
diff --git a/portal-frontend/src/app/features/public/application/public-application.component.html b/portal-frontend/src/app/features/public/application/public-application.component.html
@@ -36,6 +36,9 @@ <h4 *ngIf="submission">Application ID: {{ submission.fileNumber }}</h4>
   <div class="navigation">
     <mat-tab-group [(selectedIndex)]="selectedIndex">
       <mat-tab label="Applicant Submission">
+        <div *ngIf="!submission" class="center">
+          <mat-spinner></mat-spinner>
+        </div>
         <div *ngIf="submission" class="content">
           <section>
             <div class="header">

diff --git a/...-frontend/src/app/features/public/notice-of-intent/public-notice-of-intent.component.html b/...-frontend/src/app/features/public/notice-of-intent/public-notice-of-intent.component.html
@@ -36,6 +36,9 @@ <h4 *ngIf="submission">Notice of Intent ID: {{ submission.fileNumber }}</h4>
   <div class="navigation">
     <mat-tab-group [(selectedIndex)]="selectedIndex">
       <mat-tab label="Applicant Submission">
+        <div *ngIf="!submission" class="center">
+          <mat-spinner></mat-spinner>
+        </div>
         <div *ngIf="submission" class="content">
           <section>
             <div class="header">

diff --git a/portal-frontend/src/app/features/public/notification/public-notification.component.html b/portal-frontend/src/app/features/public/notification/public-notification.component.html
@@ -36,6 +36,9 @@ <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }}</h4>
   <div class="navigation">
     <mat-tab-group [(selectedIndex)]="selectedIndex">
       <mat-tab label="Applicant Submission">
+        <div *ngIf="!submission" class="center">
+          <mat-spinner></mat-spinner>
+        </div>
         <div *ngIf="submission" class="content">
           <section>
             <div class="header">