From 84069e03dc56c7f4bf0b115fbac344d66b97d85e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Fri, 19 Jul 2024 13:55:22 +0200
Subject: [PATCH] Add filename display on file upload

This update introduces a new feature to the DropFile component; now filenames are displayed when they are uploaded. This provides a user-friendly way to view the file being managed. Additionally, some styling adjustments were made to accommodate this new addition.
---
 .../unreleased/Feature-20240719-135515.yaml   |  5 +++++
 .../public/vuejs/DropFileWidget/DropFile.vue  | 20 ++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changes/unreleased/Feature-20240719-135515.yaml

diff --git a/.changes/unreleased/Feature-20240719-135515.yaml b/.changes/unreleased/Feature-20240719-135515.yaml
new file mode 100644
index 000000000..b4fb2fffd
--- /dev/null
+++ b/.changes/unreleased/Feature-20240719-135515.yaml
@@ -0,0 +1,5 @@
+kind: Feature
+body: Display filename on file upload within the UI interface
+time: 2024-07-19T13:55:15.16139422+02:00
+custom:
+  Issue: ""
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
index 94b4f02fb..4eb9e09b1 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
@@ -16,6 +16,7 @@ const emit = defineEmits<{
 
 const is_dragging: Ref<boolean> = ref(false);
 const uploading: Ref<boolean> = ref(false);
+const display_filename: Ref<string|null> = ref(null);
 
 const has_existing_doc = computed<boolean>(() => {
     return props.existingDoc !== undefined && props.existingDoc !== null;
@@ -79,6 +80,7 @@ const onFileChange = async (event: Event): Promise<void> => {
 
 const handleFile = async (file: File): Promise<void> => {
     uploading.value = true;
+    display_filename.value = file.name;
     const type = file.type;
     const buffer = await file.arrayBuffer();
     const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
@@ -103,7 +105,7 @@ const handleFile = async (file: File): Promise<void> => {
 <template>
     <div class="drop-file">
         <div v-if="!uploading" :class="{ area: true, dragging: is_dragging}" @click="onZoneClick" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
-            <p v-if="has_existing_doc">
+            <p v-if="has_existing_doc" class="file-icon">
                 <i class="fa fa-file-pdf-o" v-if="props.existingDoc?.type === 'application/pdf'"></i>
                 <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.oasis.opendocument.text'"></i>
                 <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
@@ -115,6 +117,8 @@ const handleFile = async (file: File): Promise<void> => {
                 <i class="fa fa-file-archive-o" v-else-if="props.existingDoc?.type === 'application/x-zip-compressed'"></i>
                 <i class="fa fa-file-code-o" v-else ></i>
             </p>
+
+            <p v-if="display_filename !== null" class="display-filename">{{ display_filename }}</p>
             <!-- todo i18n -->
             <p v-if="has_existing_doc">Déposez un document ou cliquez ici pour remplacer le document existant</p>
             <p v-else>Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier</p>
@@ -130,9 +134,18 @@ const handleFile = async (file: File): Promise<void> => {
 .drop-file {
     width: 100%;
 
+    .file-icon {
+        font-size: xx-large;
+    }
+
+    .display-filename {
+        font-variant: small-caps;
+        font-weight: 200;
+    }
+
     & > .area, & > .waiting {
         width: 100%;
-        height: 8rem;
+        height: 10rem;
 
         display: flex;
         flex-direction: column;
@@ -149,7 +162,4 @@ const handleFile = async (file: File): Promise<void> => {
     }
 }
 
-div.chill-collection ul.list-entry li.entry:nth-child(2n) {
-
-}
 </style>