Merge pull request #2471 from sam-warren/EMBCESSMOD-5590

EMBCESSMOD-5590: UI changes for better UX in file uploader

suppliers/src/UI/embc-supplier/package.json

@@ -26,7 +26,9 @@
     "@angular/platform-browser-dynamic": "^17.3.9",
     "@angular/router": "^17.3.9",
     "@bcgov/bootstrap-v5-theme": "^1.0.1",
+    "@fortawesome/angular-fontawesome": "^0.14.0",
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "angular-oauth2-oidc": "^17.0.2",
     "bootstrap": "^4.3.1",

suppliers/src/UI/embc-supplier/src/app/app.component.html

@@ -1,3 +1,4 @@
+<app-toasts></app-toasts>
 <app-header></app-header>
 
 <main class="fill-body background">
@@ -8,7 +9,6 @@
     @if (noticeMsg && !siteDown) {
       <app-banner [bannerMsg]="noticeMsg" bannerType="Notice"></app-banner>
     }
-
     <router-outlet></router-outlet>
   </div>
 </main>

suppliers/src/UI/embc-supplier/src/app/app.component.ts

@@ -9,13 +9,14 @@ import { AuthenticationService } from './core/services/authentication.service';
 import { ConfigService } from './core/services/config.service';
 import { SupplierService } from './core/services/supplier.service';
 import { SupplierHttpService } from './core/services/supplierHttp.service';
+import { ToastsContainer } from './core/components/toasts/toasts-container.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [BannerComponent, FooterComponent, HeaderComponent, RouterOutlet]
+  imports: [BannerComponent, FooterComponent, HeaderComponent, RouterOutlet, ToastsContainer]
 })
 export class AppComponent implements OnInit, OnDestroy {
   title = 'embc-supplier';

suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.html

@@ -1,9 +1,4 @@
 <!-- <label class="requiredField" for="fileDrop">Attach a photo/scanned copy of your invoice</label> -->
-@if (showToast) {
-  <div>
-    <app-toasts aria-live="polite" aria-atomic="true"></app-toasts>
-  </div>
-}
 <div class="drag-drop" appDragDrop (fileDropped)="onInvoiceDropped($event)">
   <input
     type="file"
@@ -34,8 +29,11 @@
 @for (attach of invoiceAttachments; track attach; let fileIndex = $index) {
   <div class="attach-list">
     <div class="row file-style">
-      <p>{{ attach }}</p>
-      <i (click)="deleteAttachedInvoice(fileIndex)" class="fas fa-trash-alt"></i>
+      <div class="row">
+        <fa-icon class="file-icon" [icon]="getFileImage(attach)"></fa-icon>
+        <p>{{ attach }}</p>
+      </div>
+      <fa-icon class="click-icon" [icon]="faTrash" (click)="deleteAttachedInvoice(fileIndex)"></fa-icon>
     </div>
   </div>
 }

suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.scss

@@ -87,8 +87,9 @@
 
 .file-style {
   justify-content: space-between;
-  padding-left: 9px;
-  padding-right: 9px;
+  padding-top: 5px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .drag-text {
@@ -120,3 +121,12 @@
   font-size: 13px;
   font-weight: lighter;
 }
+
+.click-icon {
+  cursor: pointer;
+}
+
+.file-icon {
+  margin-left: 20px;
+  margin-right: 10px;
+}

suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.ts

@@ -1,25 +1,28 @@
 import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
-import { ToastService } from 'src/app/core/services/toast.service';
+import { Toast, ToastService } from 'src/app/core/services/toast.service';
 import { WarningService } from 'src/app/core/services/warning.service';
 import * as constant from 'src/app/core/services/globalConstants';
 import { DragDropDirective } from '../../directives/DragDrop.directive';
-import { ToastsComponent } from '../toasts/toasts.component';
+import { faFileImage, faFilePdf, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @Component({
   selector: 'app-file-upload',
   templateUrl: './fileUpload.component.html',
   styleUrls: ['./fileUpload.component.scss'],
   standalone: true,
-  imports: [ToastsComponent, DragDropDirective]
+  imports: [DragDropDirective, FontAwesomeModule]
 })
 export class FileUploadComponent implements OnInit {
   @Output() attachedFile = new EventEmitter<any>();
   @Output() deleteFile = new EventEmitter<any>();
   @Input() reloadedFiles: any;
   @Input() noOfAttachments: number;
-  showToast = false;
   invoiceAttachments: string[] = [];
   attachSizeError = false;
+  faTrash = faTrash;
+  faFilePdf = faFilePdf;
+  faFileImage = faFileImage;
 
   constructor(
     public toastService: ToastService,
@@ -41,9 +44,6 @@ export class FileUploadComponent implements OnInit {
    * @param event : File drop event
    */
   onInvoiceDropped(event: any) {
-    if (this.showToast) {
-      this.showToast = !this.showToast;
-    }
     if (this.attachSizeError) {
       this.attachSizeError = !this.attachSizeError;
     }
@@ -72,6 +72,7 @@ export class FileUploadComponent implements OnInit {
       } else {
         this.invoiceAttachments.push(e.name);
         this.attachedFile.emit(e);
+        this.toastService.show(e.name + " uploaded successfully", { classname: 'bg-success text-light', delay: 3000, })
       }
     }
   }
@@ -85,4 +86,12 @@ export class FileUploadComponent implements OnInit {
     this.invoiceAttachments.splice(fileIndex, 1);
     this.deleteFile.emit(fileIndex);
   }
+
+  getFileImage(file: string) {
+    if (file.includes('.pdf')) {
+      return faFilePdf;
+    } else {
+      return faFileImage;
+    }
+  }
 }

suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.html

@@ -0,0 +1,13 @@
+<div class="toast-container">
+  @for (toast of toastService.toasts; track toast) {
+    <ngb-toast
+      [class]="toast.classname"
+      [autohide]="true"
+      [delay]="toast.delay || 5000"
+      (hidden)="toastService.remove(toast)"
+    >
+      {{ toast.text }}
+      <fa-icon class="close-icon" [icon]="closeIcon" (click)="toastService.remove(toast)"></fa-icon>
+    </ngb-toast>
+  }
+</div>

suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.scss

@@ -0,0 +1,13 @@
+.toast-container {
+    z-index: 1200;
+    top: 0 !important;
+    right: 0 !important;
+    position: fixed;
+    padding: 10px;
+
+    .close-icon {
+        cursor: pointer;
+        margin-left: 5px;
+    }
+}
+

suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.ts

@@ -0,0 +1,20 @@
+import { Component, inject } from '@angular/core';
+
+import { ToastService } from "../../services/toast.service";
+import { NgTemplateOutlet } from '@angular/common';
+import { NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+@Component({
+	selector: 'app-toasts',
+	standalone: true,
+	imports: [NgbToastModule, NgTemplateOutlet, FontAwesomeModule],
+	templateUrl: "./toasts-container.component.html",
+	styleUrls: ["./toasts-container.component.scss"]
+})
+
+export class ToastsContainer {
+	closeIcon = faXmark;
+	toastService = inject(ToastService);
+}

suppliers/src/UI/embc-supplier/src/app/core/services/toast.service.ts

@@ -1,14 +1,24 @@
-import { Injectable, TemplateRef } from '@angular/core';
+import { Injectable } from '@angular/core';
+
+export interface Toast {
+  text: string;
+  classname?: string;
+  delay?: number;
+}
 
 @Injectable({ providedIn: 'root' })
 export class ToastService {
-  toasts: any[] = [];
+  toasts: Toast[] = [];
 
-  show(textOrTpl: string | TemplateRef<any>, options: any = {}) {
-    this.toasts.push({ textOrTpl, ...options });
+  show(text: string, options: Partial<Toast> = {}) {
+    this.toasts.push({ text, ...options });
   }
 
-  remove(toast) {
+  remove(toast: Toast) {
     this.toasts = this.toasts.filter((t) => t !== toast);
   }
+
+  clear() {
+    this.toasts.splice(0, this.toasts.length);
+  }
 }