From f119d3f32c3a0d17db35899ff21fdf2d1a6fb926 Mon Sep 17 00:00:00 2001
From: Austin Hulen <austin@thehulens.com>
Date: Fri, 26 Jul 2024 12:16:44 -0700
Subject: [PATCH 1/2] Update File Upload to include upload button instead of
 auto upload. Added a confirmation dialog warning user that new upload will
 replace current file attachment.

---
 src/ui/UserPortal/components/ChatInput.vue | 54 ++++++++++++++++++----
 src/ui/UserPortal/plugins/primevue.ts      |  5 ++
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
index f28a92fec0..2fc9d58f35 100644
--- a/src/ui/UserPortal/components/ChatInput.vue
+++ b/src/ui/UserPortal/components/ChatInput.vue
@@ -49,17 +49,23 @@
 			</OverlayPanel>
 			<Dialog v-model:visible="showFileUploadDialog" header="Upload File" modal aria-label="File Upload Dialog">
 				<FileUpload
-					accept="audio/mpeg,audio/wav"
-					:auto="true"
+					:auto="false"
 					:custom-upload="true"
 					@uploader="handleUpload"
 					ref="fileUpload"
+					:fileLimit="1"
 				>
-					<template #header>
-						File Uploader
+					<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+						<div>
+							<div class="upload-files-header">
+								<Button @click="chooseCallback()" icon="pi pi-images" label="Choose" :disabled="files.length !== 0" style="margin-right: .5rem"></Button>
+								<Button @click="uploadFile(uploadCallback)" icon="pi pi-cloud-upload" label="Upload" :disabled="!files || files.length === 0" style="margin-right: .5rem"></Button>
+								<Button @click="clearCallback()" icon="pi pi-times" label="Cancel" :disabled="!files || files.length === 0"></Button>
+							</div>
+						</div>
 					</template>
-					<template #content>
-						<div class="">
+					<template #empty>
+						<div>
 							<i class="pi pi-cloud-upload file-upload-icon" />
 							<div style="width: 500px">
 								<p style="text-align: center;">
@@ -73,6 +79,7 @@
 						</div>
 					</template>
 				</FileUpload>
+				<ConfirmDialog></ConfirmDialog>
 			</Dialog>
 			<Mentionable
 				:keys="['@']"
@@ -234,6 +241,33 @@ export default {
 		browseFiles() {
 			this.$refs.fileUpload.$el.querySelector('input[type="file"]').click();
 		},
+		uploadFile(uploadCallback) {
+			if (this.$appStore.attachments.length) {
+				this.$confirm.require({
+					message: 'Uploading a new file will replace the file already attached.',
+					header: 'Confirm File Replacement',
+					icon: 'pi pi-exclamation-triangle',
+					rejectProps: {
+						label: 'Cancel',
+						severity: 'secondary',
+						outlined: true
+					},
+					acceptProps: {
+						label: 'Upload'
+					},
+					accept: () => {
+						uploadCallback();
+						this.showFileUploadDialog = false;
+					},
+					reject: () => {
+						this.showFileUploadDialog = false;
+					}
+				});
+			} else {
+				uploadCallback();
+				this.showFileUploadDialog = false;
+			}
+		}
 	},
 };
 </script>
@@ -353,6 +387,10 @@ export default {
 	border-top-left-radius: 6px;
 	border-top-right-radius: 6px;
 }
+
+.upload-files-header {
+	width: 500px;
+}
 </style>
 
 <style lang="scss">
@@ -381,8 +419,4 @@ export default {
 	font-size: 5rem;
     color: #000;
 }
-
-.p-fileupload-buttonbar {
-	display: none;
-}
 </style>
diff --git a/src/ui/UserPortal/plugins/primevue.ts b/src/ui/UserPortal/plugins/primevue.ts
index b18aed897f..f674d717a7 100644
--- a/src/ui/UserPortal/plugins/primevue.ts
+++ b/src/ui/UserPortal/plugins/primevue.ts
@@ -15,6 +15,8 @@ import FileUpload from 'primevue/fileupload';
 import OverlayPanel from 'primevue/overlaypanel';
 import Badge from 'primevue/badge';
 import BadgeDirective from 'primevue/badgedirective';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmationService from 'primevue/confirmationservice';
 
 import { defineNuxtPlugin } from '#app';
 
@@ -34,6 +36,9 @@ export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.component('OverlayPanel', OverlayPanel);
 	nuxtApp.vueApp.component('Badge', Badge);
 	nuxtApp.vueApp.directive('badge', BadgeDirective);
+	nuxtApp.vueApp.component('ConfirmDialog', ConfirmDialog);
+
+	nuxtApp.vueApp.use(ConfirmationService);
 
 	nuxtApp.vueApp.use(ToastService);
 	nuxtApp.vueApp.directive('tooltip', Tooltip);

From a4890463d0746220d2c7bcc70e63f87dc2c2a3c9 Mon Sep 17 00:00:00 2001
From: Austin Hulen <austin@thehulens.com>
Date: Fri, 26 Jul 2024 12:55:17 -0700
Subject: [PATCH 2/2] Update file upload content style

---
 src/ui/UserPortal/components/ChatInput.vue | 32 +++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
index 2fc9d58f35..85cb6ae57b 100644
--- a/src/ui/UserPortal/components/ChatInput.vue
+++ b/src/ui/UserPortal/components/ChatInput.vue
@@ -64,6 +64,20 @@
 							</div>
 						</div>
 					</template>
+
+					<template #content="{ files, removeFileCallback }">
+						<div class="flex flex-wrap gap-4">
+							<div v-for="(file, index) of files" :key="file.name + file.type + file.size" style="border-color: rgb(226, 232, 240); border-radius: 6px; border-style: solid; border-width: 1px; display: flex; flex-direction: row; justify-content: space-between; padding: 0.5rem; width: 100%; align-items: center;">
+								<div style="flex: 1; display: flex; flex-direction: row; align-items: center; gap: 10px">
+									<i class="pi pi-file" style="font-size: 2rem; margin-right: 1rem;"></i>
+									<span style="font-weight: 600;">{{ file.name }}</span>
+									<div>{{ formatSize(file.size) }}</div>
+								</div>
+								<Button icon="pi pi-times" @click="removeFileCallback(index)" text severity="danger" style=""/>
+							</div>
+						</div>
+					</template>
+
 					<template #empty>
 						<div>
 							<i class="pi pi-cloud-upload file-upload-icon" />
@@ -241,6 +255,7 @@ export default {
 		browseFiles() {
 			this.$refs.fileUpload.$el.querySelector('input[type="file"]').click();
 		},
+
 		uploadFile(uploadCallback) {
 			if (this.$appStore.attachments.length) {
 				this.$confirm.require({
@@ -267,7 +282,22 @@ export default {
 				uploadCallback();
 				this.showFileUploadDialog = false;
 			}
-		}
+		},
+
+		formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
+            if (bytes === 0) {
+                return `0 ${sizes[0]}`;
+            }
+
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+            return `${formattedSize} ${sizes[i]}`;
+        }
 	},
 };
 </script>