From 5671476d566739279e040144791c70049e5b8a0e Mon Sep 17 00:00:00 2001 From: Sam Warren Date: Wed, 2 Oct 2024 08:44:46 -0600 Subject: [PATCH 1/2] EMBCESSMOD-5590: Update fontawesome icon package --- .../src/UI/embc-supplier/package-lock.json | 59 ++++++++++++++++--- suppliers/src/UI/embc-supplier/package.json | 2 + 2 files changed, 54 insertions(+), 7 deletions(-) diff --git a/suppliers/src/UI/embc-supplier/package-lock.json b/suppliers/src/UI/embc-supplier/package-lock.json index d770a5f2f..9a11418a4 100644 --- a/suppliers/src/UI/embc-supplier/package-lock.json +++ b/suppliers/src/UI/embc-supplier/package-lock.json @@ -20,7 +20,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", @@ -657,14 +659,14 @@ } }, "node_modules/@angular-devkit/build-angular/node_modules/@types/node": { - "version": "20.12.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", - "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", + "version": "22.7.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz", + "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==", "dev": true, "optional": true, "peer": true, "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, "node_modules/@angular-devkit/build-angular/node_modules/@vitejs/plugin-basic-ssl": { @@ -4044,6 +4046,26 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/angular-fontawesome": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.14.1.tgz", + "integrity": "sha512-Yb5HLiEOAxjSLEcaOM51CKIrzdfvoDafXVJERm9vufxfZkVZPZJgrZRgqwLVpejgq4/Ez6TqHZ6SqmJwdtRF6g==", + "dependencies": { + "tslib": "^2.6.2" + }, + "peerDependencies": { + "@angular/core": "^17.0.0", + "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0" + } + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/fontawesome-free": { "version": "5.15.4", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", @@ -4053,6 +4075,29 @@ "node": ">=6" } }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -18073,9 +18118,9 @@ } }, "node_modules/undici-types": { - "version": "5.26.5", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", "dev": true, "optional": true, "peer": true diff --git a/suppliers/src/UI/embc-supplier/package.json b/suppliers/src/UI/embc-supplier/package.json index 7300efd16..ad78748c2 100644 --- a/suppliers/src/UI/embc-supplier/package.json +++ b/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", From 229fcbacec7698317500ae57a0572a2832db0e37 Mon Sep 17 00:00:00 2001 From: Sam Warren Date: Wed, 2 Oct 2024 08:46:32 -0600 Subject: [PATCH 2/2] 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 7a4561fbd..da80226a8 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 @@ +
@@ -8,7 +9,6 @@ @if (noticeMsg && !siteDown) { } -
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 380eed69f..1f1c1218a 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 9fcfc0b94..a778a9f1d 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 @@ -@if (showToast) { -
- -
-}
-

{{ attach }}

- +
+ +

{{ attach }}

+
+
} 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 0790f18fc..5abb2df88 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 e98b9533b..7f6c7bce3 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(); @Output() deleteFile = new EventEmitter(); @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 000000000..535293c11 --- /dev/null +++ b/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts-container.component.html @@ -0,0 +1,13 @@ +
+ @for (toast of toastService.toasts; track toast) { + + {{ toast.text }} + + + } +
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 000000000..9ef144965 --- /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 000000000..16e60a8c9 --- /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 f296c0ee2..000000000 --- a/suppliers/src/UI/embc-supplier/src/app/core/components/toasts/toasts.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
- @for (toast of toastService.toasts; track toast) { - - @if (isTemplate(toast)) { - - } @else { - {{ toast.textOrTpl }} - } - - } -
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 18c60dbfb..000000000 --- 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 735c06acc..c0fcc45a9 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, options: any = {}) { - this.toasts.push({ textOrTpl, ...options }); + show(text: string, options: Partial = {}) { + 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); + } }