From 78185151e7d2de2a0a9ec0f0ff8cb06df04c9945 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Wed, 16 Apr 2025 17:53:16 -0400
Subject: [PATCH] Fix NameEditor reservations handling of errors

---
 .../src/views/creators/CreatorLogoEditor.vue  | 105 +++++++++++++-----
 1 file changed, 78 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/creators/CreatorLogoEditor.vue b/frontend/src/views/creators/CreatorLogoEditor.vue
index 2f199f9..f72744c 100644
--- a/frontend/src/views/creators/CreatorLogoEditor.vue
+++ b/frontend/src/views/creators/CreatorLogoEditor.vue
@@ -4,21 +4,30 @@
       Logo
     </div>
 
-    <div class="card-content flex flex-col items-center">
-      <img
-          :src="fileUrl || fallbackUrl"
-          alt="Aperçu du logo"
-          class="mb-5 transition duration-200 ease-in-out transform w-[200px] h-[200px]"
-      />
+    <div class="card-content">
+      <div class="image-preview-container">
+        <img
+            :src="fileUrl || fallbackUrl"
+            alt="Aperçu du logo"
+            class="preview-image"
+        />
+      </div>
 
-      <v-file-input
-          v-model="selectedFile"
-          accept="image/*"
-          class="w-full"
-          label="Votre logo"
-          variant="outlined"
-          @change="onFileSelected"
-      ></v-file-input>
+      <div class="file-input-container">
+        <input
+            type="file"
+            ref="fileInput"
+            accept="image/*"
+            class="hidden"
+            @change="onFileSelected"
+        />
+        <button 
+            class="choose-file-button"
+            @click="triggerFileInput"
+        >
+          Choisir une image...
+        </button>
+      </div>
     </div>
 
     <div class="card-actions">
@@ -32,10 +41,8 @@
       </button>
     </div>
   </div>
-
 </template>
 
-
 <script setup>
 import {ref} from 'vue'
 import {useClient} from '@/plugins/api.js'
@@ -48,18 +55,26 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested'])
 
-const selectedFile = ref("")
+const fileInput = ref(null)
+const selectedFile = ref(null)
 const fileUrl = ref(props.creator.images.logo)
-const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' // Chemin de votre image de secours
+const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'
 
-const onFileSelected = () => {
-  if (selectedFile.value) {
+const triggerFileInput = () => {
+  fileInput.value.click()
+}
+
+const onFileSelected = (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    selectedFile.value = file
     const reader = new FileReader()
-    reader.onload = (event) => {
-      fileUrl.value = event.target.result
+    reader.onload = (e) => {
+      fileUrl.value = e.target.result
     }
-    reader.readAsDataURL(selectedFile.value)
+    reader.readAsDataURL(file)
   } else {
+    selectedFile.value = null
     fileUrl.value = null
   }
 }
@@ -67,15 +82,16 @@ const onFileSelected = () => {
 const client = useClient()
 const publish = async () => {
   try {
-    const formData = new FormData();
+    const formData = new FormData()
     formData.append('file', selectedFile.value)
 
     const response = await client.post(
         `/api/creators/${props.creator.id}/logo`,
-        formData)
+        formData
+    )
 
-    props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`;
-    emits('closeRequested');
+    props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`
+    emits('closeRequested')
   } catch (error) {
     console.error(error)
   }
@@ -86,3 +102,38 @@ const cancel = () => {
 }
 </script>
 
+<style scoped>
+.image-preview-container {
+  @apply mb-5;
+  @apply w-full;
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
+  @apply overflow-hidden;
+  @apply rounded-lg;
+  @apply bg-gray-100;
+}
+
+.preview-image {
+  @apply w-[200px];
+  @apply h-[200px];
+  @apply object-cover;
+  @apply rounded-full;
+}
+
+.file-input-container {
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
+  @apply w-full;
+}
+
+.choose-file-button {
+  @apply px-4;
+  @apply py-2;
+  @apply primary;
+  @apply rounded-lg;
+  @apply cursor-pointer;
+}
+</style>
+