Merge pull request #351 from bcgov/upload-listings-hotfix

DSS-453: Listing file upload: Improving User Experience During Large File Uploads
bcgov · May 31, 2024 · aef5df1 · aef5df1
2 parents 75b044d + 78c118e
commit aef5df1
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 8 deletions.
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1,2 +1,13 @@
 <app-layout *ngIf="currentUserLoaded"></app-layout>
-<div *ngIf="!currentUserLoaded">Loading...</div>
+<div *ngIf="!currentUserLoaded">Loading...</div>
+<div class="loader" *ngIf="isLoading">
+    <div class="spinner">
+        <div class="lds-ring">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    </div>
+    <div class="title">{{loaderTitle}}</div>
+</div>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -0,0 +1,72 @@
+:host {
+    overflow: auto;
+
+    .loader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: #333333AA;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+
+        .spinner {
+
+            .lds-ring,
+            .lds-ring div {
+                box-sizing: border-box;
+            }
+
+            .lds-ring {
+                display: inline-block;
+                position: relative;
+                width: 80px;
+                height: 80px;
+            }
+
+            .lds-ring div {
+                box-sizing: border-box;
+                display: block;
+                position: absolute;
+                width: 64px;
+                height: 64px;
+                margin: 8px;
+                border: 8px solid #FFFFFF;
+                border-radius: 50%;
+                animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+                border-color: #FFFFFF transparent transparent transparent;
+            }
+
+            .lds-ring div:nth-child(1) {
+                animation-delay: -0.45s;
+            }
+
+            .lds-ring div:nth-child(2) {
+                animation-delay: -0.3s;
+            }
+
+            .lds-ring div:nth-child(3) {
+                animation-delay: -0.15s;
+            }
+
+            @keyframes lds-ring {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+
+        .title {
+            color: #FFFFFF;
+            font-size: 1.75rem;
+        }
+    }
+}
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -4,6 +4,7 @@ import { LayoutComponent } from './common/layout/layout.component';
 import { CommonModule } from '@angular/common';
 import { KeycloakAngularModule } from 'keycloak-angular';
 import { UserDataService } from './common/services/user-data.service';
+import { GlobalLoaderService } from './common/services/global-loader.service';
 
 @Component({
     selector: 'app-root',
@@ -14,10 +15,26 @@ import { UserDataService } from './common/services/user-data.service';
 })
 export class AppComponent implements OnInit {
     currentUserLoaded = false;
+    isLoading = true;
+    loaderTitle? = 'Loading'
 
-    constructor(private userService: UserDataService) { }
+    constructor(private userService: UserDataService, private loaderService: GlobalLoaderService) { }
 
     ngOnInit(): void {
-        this.userService.getCurrentUser().subscribe((user) => { this.currentUserLoaded = !!user })
+        this.loaderService.loadingNotification.subscribe({
+            next: ({ isLoading, title }) => {
+                this.isLoading = isLoading;
+                this.loaderTitle = title;
+            },
+        })
+
+        this.userService.getCurrentUser().subscribe({
+            next: (user) => {
+                this.currentUserLoaded = !!user;
+            },
+            complete: () => {
+                this.loaderService.loadingEnd();
+            },
+        })
     }
 }
diff --git a/...d/src/app/common/listing-upload-history-table/listing-upload-history-table.component.html b/...d/src/app/common/listing-upload-history-table/listing-upload-history-table.component.html
@@ -1,5 +1,5 @@
 <h2>Platform Upload History</h2>
-<p-card>
+<p-card *ngIf="currentUser">
     <div class="form-group-row" *ngIf="!isSmall && currentUser.organizationType !== 'Platform'">
         <div class="form-group-row-col">
             <label for="platformId">Select Platform</label>

diff --git a/frontend/src/app/common/services/global-loader.service.spec.ts b/frontend/src/app/common/services/global-loader.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GlobalLoaderService } from './global-loader.service';
+
+describe('GlobalLoaderService', () => {
+  let service: GlobalLoaderService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GlobalLoaderService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/common/services/global-loader.service.ts b/frontend/src/app/common/services/global-loader.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GlobalLoaderService {
+  loadingNotification = new Subject<{ isLoading: boolean, title?: string }>()
+
+  constructor() { }
+
+  loadingStart(title: string): void {
+    this.loadingNotification.next({ isLoading: true, title });
+  }
+
+  loadingEnd(): void {
+    this.loadingNotification.next({ isLoading: false, title: '' });
+  }
+}
diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.ts b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.ts
@@ -45,7 +45,6 @@ export class ComplianceNoticeComponent implements OnInit {
   myForm!: FormGroup;
 
   platformOptions = new Array<DropdownOption>();
-  reasonOptions = new Array<DropdownOption>();
 
   isPreviewVisible = false;
   hideForm = false;
@@ -84,7 +83,6 @@ export class ComplianceNoticeComponent implements OnInit {
     this.initForm();
 
     this.delistingService.getPlatforms().subscribe((platformOptions) => this.platformOptions = platformOptions);
-    this.delistingService.getReasons().subscribe((reasonOptions) => this.reasonOptions = reasonOptions);
   }
 
   onPreview(): void {

diff --git a/frontend/src/app/features/components/upload-listings/upload-listings.component.html b/frontend/src/app/features/components/upload-listings/upload-listings.component.html
@@ -51,7 +51,7 @@
         </div>
     </div>
     <div class="form-group-row">
-        <button [disabled]="myForm.invalid" pButton id="upload-btn" name="upload-btn"
+        <button [disabled]="myForm.invalid || isUploadStarted" pButton id="upload-btn" name="upload-btn"
             (click)="onUpload()">Upload</button>
     </div>
 </form>
diff --git a/frontend/src/app/features/components/upload-listings/upload-listings.component.ts b/frontend/src/app/features/components/upload-listings/upload-listings.component.ts
@@ -15,6 +15,7 @@ import { UserDataService } from '../../../common/services/user-data.service';
 import { Observable, forkJoin } from 'rxjs';
 import { User } from '../../../common/models/user';
 import { environment } from '../../../../environments/environment';
+import { GlobalLoaderService } from '../../../common/services/global-loader.service';
 
 @Component({
   selector: 'app-upload-listings',
@@ -38,6 +39,7 @@ export class UploadListingsComponent implements OnInit {
   uploadedFile: any;
   uploadElem!: FileUpload;
   currentUser!: User;
+  isUploadStarted = false;
 
   myForm = this.fb.group({
     platformId: [0, Validators.required],
@@ -66,6 +68,7 @@ export class UploadListingsComponent implements OnInit {
     private yearMonthGenService: YearMonthGenService,
     private messageService: MessageService,
     private userDataService: UserDataService,
+    private loaderService: GlobalLoaderService
   ) { }
 
   ngOnInit(): void {
@@ -81,7 +84,7 @@ export class UploadListingsComponent implements OnInit {
         } else {
           this.myForm.controls['platformId'].setValue(currentUser.organizationId);
         }
-      }
+      },
     });
   }
 
@@ -94,6 +97,7 @@ export class UploadListingsComponent implements OnInit {
       this.uploadElem.disabled = true;
     }
   }
+
   onClear(): void {
     this.uploadElem.clear();
     this.myForm.controls['file'].setValue(null);
@@ -102,7 +106,9 @@ export class UploadListingsComponent implements OnInit {
   }
 
   onUpload(): void {
+    this.isUploadStarted = true;
     const formResult = this.myForm.value;
+    this.loaderService.loadingStart('Uploading');
 
     this.listingDataService.uploadData(formResult.month || '', formResult.platformId || 0, this.uploadedFile)
       .subscribe({
@@ -112,6 +118,12 @@ export class UploadListingsComponent implements OnInit {
 
           this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File has been uploaded successfully' });
         },
+        complete: () => {
+          this.loaderService.loadingEnd();
+          setTimeout(() => {
+            this.isUploadStarted = false;
+          }, 300);
+        }
       });
   }
 }