From 1ba7db7eb2d6bd6f2d956ad65c86ecf9fecebe8f Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 2 Jan 2025 01:31:40 -0500
Subject: [PATCH] Resolves some UI issues

---
 src/views/creators/CreatorHome.vue | 181 ++++++++++++++++++-----------
 1 file changed, 113 insertions(+), 68 deletions(-)

diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index c8a840a..8056158 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -117,81 +117,100 @@
     </h2>
 
     <!-- 4 images côte à côte -->
-    <FullscreenImage ref="fullscreenImage" :image-url="currentImage" />      
-      <div>
-      <div v-if="isEditMode" class="text-2xl py-2">Images</div>
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
-        <!-- Première image -->
-        <div v-if="image1Url || isEditMode" class="relative">
-          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
-            <img :src="image1Url || fallbackImage"
-                 alt="Image 1"
-                 class="rounded-md max-w-full h-auto cursor-pointer" />
-          </label>
-          <div v-if="image1Url" @click="openFullscreen(image1Url)">
-            <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" />
+    <FullscreenImage ref="fullscreenImage" :image-url="currentImage" />
+    <div>
+      <!-- Mode édition -->
+      <div v-if="isEditMode">
+        <div class="text-2xl py-2">Images</div>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+          <!-- Première image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
+              <img :src="image1Url || fallbackImage"
+                   alt="Image 1"
+                   class="rounded-md max-w-full h-auto cursor-pointer" />
+            </label>
+            <button @click="deleteImage('image1Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
           </div>
-          <button v-if="isEditMode" @click="deleteImage('image1Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
-        </div>
 
-        <!-- Deuxième image -->
-        <div v-if="image2Url || isEditMode" class="relative">
-          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
-            <img :src="image2Url || fallbackImage"
-                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer" />
-          </label>
-          <div v-if="image2Url" @click="openFullscreen(image2Url)">
-            <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" />
+          <!-- Deuxième image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
+              <img :src="image2Url || fallbackImage"
+                   alt="Image 2"
+                   class="rounded-md max-w-full h-auto cursor-pointer" />
+            </label>
+            <button @click="deleteImage('image2Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
           </div>
-          <button v-if="isEditMode" @click="deleteImage('image2Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
-        </div>
 
-        <!-- Troisième image -->
-        <div v-if="image3Url || isEditMode" class="relative">
-          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
-            <img :src="image3Url || fallbackImage"
-                 alt="Image 3"
-                 class="rounded-md max-w-full h-auto cursor-pointer" />
-          </label>
-          <div v-if="image3Url" @click="openFullscreen(image3Url)">
-            <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" />
+          <!-- Troisième image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
+              <img :src="image3Url || fallbackImage"
+                   alt="Image 3"
+                   class="rounded-md max-w-full h-auto cursor-pointer" />
+            </label>
+            <button @click="deleteImage('image3Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
           </div>
-          <button v-if="isEditMode" @click="deleteImage('image3Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
-        </div>
 
-        <!-- Quatrième image -->
-        <div v-if="image4Url || isEditMode" class="relative">
-          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
-            <img :src="image4Url || fallbackImage"
-                 alt="Image 4"
-                 class="rounded-md max-w-full h-auto cursor-pointer" />
-          </label>
-          <div v-if="image4Url" @click="openFullscreen(image4Url)">
-            <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" />
+          <!-- Quatrième image -->
+          <div class="relative">
+            <label>
+              <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
+              <img :src="image4Url || fallbackImage"
+                   alt="Image 4"
+                   class="rounded-md max-w-full h-auto cursor-pointer" />
+            </label>
+            <button @click="deleteImage('image4Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
           </div>
-          <button v-if="isEditMode" @click="deleteImage('image4Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-            X
-          </button>
         </div>
       </div>
+
+      <!-- Mode normal -->
+      <div v-else>
+        <div class="flex flex-wrap gap-4">
+          <!-- Première image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image1Url" @click="openFullscreen(image1Url)">
+            <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+
+          <!-- Deuxième image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image2Url" @click="openFullscreen(image2Url)">
+            <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+
+          <!-- Troisième image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image3Url" @click="openFullscreen(image3Url)">
+            <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+
+          <!-- Quatrième image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image4Url" @click="openFullscreen(image4Url)">
+            <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+        </div>
+
+
+      </div>
     </div>
 
 
+
     <!-- Texte sous les deux images -->
     <div v-if="isEditMode">
       <div class="text-2xl py-2"> Images</div>
@@ -299,10 +318,9 @@
 </template>
 
 <script setup>
-import {ref, onMounted, computed} from "vue";
+import {ref, onMounted} from "vue";
 import { useClient } from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
-import {useAuthStore} from "@/stores/authStore.js";
 import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
 import { useDisplay } from "vuetify";
 import { watch} from "vue";
@@ -320,7 +338,7 @@ const isLoading = ref(true);
 const isLoggedIn = true;
 const isEditMode = ref(false);
 
-const authStore = useAuthStore();
+
 
 const currentImage = ref("");
 const fullscreenImage = ref(null);
@@ -532,23 +550,50 @@ async function saveChanges() {
   if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]);
 
   try {
+    // Désactiver le bouton de sauvegarde pour éviter les clics multiples
+    isLoading.value = true;
+
+    // Envoyer les données au backend
     const response = await client.post(
         `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
         formData,
         { headers: { "Content-Type": "multipart/form-data" } }
     );
 
+    // Mettre à jour les valeurs locales pour refléter les changements
+    mainTitle.value = editableMainTitle.value;
+    mainImageText.value = editableMainImageText.value;
+    mainVideoText.value = editableMainVideoText.value;
+    imagesSubtitle.value = editableImagesSubtitle.value;
+    imagesText.value = editableImagesText.value;
+    videoSubtitle.value = editableVideoSubtitle.value;
+    videoSubtitleMain.value = editableVideoSubtitleMain.value;
+    videoText.value = editableVideoText.value;
+    videoUrlMain.value = editableVideoUrlMain.value;
+    videoUrl.value = editableVideoUrl.value;
+    phoneNumber.value = editablePhoneNumber.value;
+    email.value = editableEmail.value;
+
     console.log("Données sauvegardées :", response.data);
 
-    // Recharger la page après une sauvegarde réussie
-    window.location.reload();
+    // Réinitialiser le mode édition
+    isEditMode.value = false;
+
+    // Rafraîchir après une légère pause pour s'assurer des mises à jour visuelles
+    setTimeout(() => {
+      window.location.reload();
+    }, 500); // Pause de 500ms pour garantir que tout est bien mis à jour
   } catch (error) {
     console.error("Erreur lors de la sauvegarde :", error);
+  } finally {
+    // Réactiver les interactions
+    isLoading.value = false;
   }
 }
 
 
 
+
 function cancelEdit() {
   // Restaurer les valeurs d'origine
   editableMainTitle.value = mainTitle.value;