From 229fcbacec7698317500ae57a0572a2832db0e37 Mon Sep 17 00:00:00 2001
From: Sam Warren <samwarren4@gmail.com>
Date: Wed, 2 Oct 2024 08:46:32 -0600
Subject: [PATCH] EMBCESSMOD-5590: Improve Toast integration, add better UI to
 file uploader

---
 .../embc-supplier/src/app/app.component.html  |  2 +-
 .../UI/embc-supplier/src/app/app.component.ts |  3 ++-
 .../fileUpload/fileUpload.component.html      | 12 ++++------
 .../fileUpload/fileUpload.component.scss      | 14 +++++++++--
 .../fileUpload/fileUpload.component.ts        | 23 +++++++++++++------
 .../toasts/toasts-container.component.html    | 13 +++++++++++
 .../toasts/toasts-container.component.scss    | 13 +++++++++++
 .../toasts/toasts-container.component.ts      | 20 ++++++++++++++++
 .../components/toasts/toasts.component.html   | 17 --------------
 .../components/toasts/toasts.component.ts     | 16 -------------
 .../src/app/core/services/toast.service.ts    | 20 ++++++++++++----
 11 files changed, 97 insertions(+), 56 deletions(-)
 create mode 100644 suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.html
 create mode 100644 suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.scss
 create mode 100644 suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.ts
 delete mode 100644 suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.html
 delete mode 100644 suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.ts

diff --git a/suppliers/src/UI/embc-supplier/src/app/app.component.html b/suppliers/src/UI/embc-supplier/src/app/app.component.html
index 7a4561fbdb..da80226a8d 100644
--- a/suppliers/src/UI/embc-supplier/src/app/app.component.html
+++ b/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>
diff --git a/suppliers/src/UI/embc-supplier/src/app/app.component.ts b/suppliers/src/UI/embc-supplier/src/app/app.component.ts
index 380eed69f2..1f1c1218ad 100644
--- a/suppliers/src/UI/embc-supplier/src/app/app.component.ts
+++ b/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';
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.html b/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.html
index 9fcfc0b94d..a778a9f1df 100644
--- a/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.html
+++ b/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>
 }
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.scss b/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.scss
index 0790f18fc6..5abb2df888 100644
--- a/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.ts b/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.ts
index e98b9533b2..7f6c7bce35 100644
--- a/suppliers/src/UI/embc-supplier/src/app/core/components/fileUpload/fileUpload.component.ts
+++ b/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;
+    }
+  }
 }
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.html b/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.html
new file mode 100644
index 0000000000..535293c115
--- /dev/null
+++ b/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>
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.scss b/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.scss
new file mode 100644
index 0000000000..9ef1449653
--- /dev/null
+++ b/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;
+    }
+}
+
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.ts b/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.ts
new file mode 100644
index 0000000000..16e60a8c90
--- /dev/null
+++ b/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);
+}
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.html b/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.html
deleted file mode 100644
index f296c0ee26..0000000000
--- a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div style="margin-bottom: 4px">
-  @for (toast of toastService.toasts; track toast) {
-    <ngb-toast
-      header="Action not allowed"
-      [class]="toast.classname"
-      [autohide]="true"
-      [delay]="toast.delay || 5000"
-      (hide)="toastService.remove(toast)"
-    >
-      @if (isTemplate(toast)) {
-        <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
-      } @else {
-        {{ toast.textOrTpl }}
-      }
-    </ngb-toast>
-  }
-</div>
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.ts b/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.ts
deleted file mode 100644
index 18c60dbfbd..0000000000
--- a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, TemplateRef } from '@angular/core';
-import { ToastService } from '../../services/toast.service';
-import { NgbToast } from '@ng-bootstrap/ng-bootstrap';
-import { NgTemplateOutlet } from '@angular/common';
-@Component({
-  selector: 'app-toasts',
-  templateUrl: './toasts.component.html',
-  standalone: true,
-  imports: [NgbToast, NgTemplateOutlet]
-})
-export class ToastsComponent {
-  constructor(public toastService: ToastService) {}
-  isTemplate(toast) {
-    return toast.textOrTpl instanceof TemplateRef;
-  }
-}
diff --git a/suppliers/src/UI/embc-supplier/src/app/core/services/toast.service.ts b/suppliers/src/UI/embc-supplier/src/app/core/services/toast.service.ts
index 735c06acc6..c0fcc45a93 100644
--- a/suppliers/src/UI/embc-supplier/src/app/core/services/toast.service.ts
+++ b/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);
+  }
 }