Textes are working!! need to convert image now

src/stores/brandingStore.js

@@ -29,6 +29,7 @@ export const useBrandingStore = defineStore(
             "onSurface": "#000",
         }
         const colors = ref(defaultColors)
+        const presentationInfos = ref([]) 
 
         const route = useRoute()
         watch(
@@ -41,10 +42,12 @@ export const useBrandingStore = defineStore(
                         value.value = await fetchCreatorData(newCreator)
                         currentBrand.value = newCreator
                         colors.value = value.value.colors
+                        presentationInfos.value = value.value.presentationInfos 
                     } else {
                         value.value = {}
                         currentBrand.value = undefined
                         colors.value = defaultColors
+                        presentationInfos.value = [] 
                     }
                 }
 
@@ -66,6 +69,7 @@ export const useBrandingStore = defineStore(
             currentBrand,
             value,
             colors,
-            loading
+            loading,
+            presentationInfos 
         }
     })

src/views/creators/BannerActions.vue

@@ -58,11 +58,11 @@
           <div class="absolute bottom-6 right-8 z-20 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
                :style="{ backgroundColor: brandingStore.colors.secondary}">
            
-            <donation-button-banner               
+<!--            <donation-button-banner               -->
-                :creator-id="creatorId"
+<!--                :creator-id="creatorId"-->
-                :creator-name="creatorName"
+<!--                :creator-name="creatorName"-->
-                :on-success-url="successUrl"
+<!--                :on-success-url="successUrl"-->
-                :on-cancelled-url="cancelledUrl"></donation-button-banner>
+<!--                :on-cancelled-url="cancelledUrl"></donation-button-banner>-->
           </div>
        
 

src/views/creators/CreatorHome.vue

@@ -2,24 +2,27 @@
   <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8"
        :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
 
-    <!-- Bouton Edit -->
+    <!-- Boutons pour Éditer/Enregistrer et Annuler -->
-    <div class="flex justify-end space-x-2">
+    <div v-if="creatorProfileStore.creator.id === brandingStore.value.id" class="flex justify-end space-x-2">
+      <!-- Bouton principal : Éditer ou Enregistrer -->
       <button
           v-if="isLoggedIn"
-          @click="toggleEditMode"
+          @click="isEditMode ? saveChanges() : toggleEditMode()"
           class="px-4 py-2 rounded-md hover:opacity-90"
-          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+      >
         {{ isEditMode ? 'Enregistrer' : 'Éditer' }}
       </button>
-      <div v-if="isEditMode">
+
       <button
-            v-if="isLoggedIn"           
+          v-if="isEditMode && isLoggedIn"
-            class="px-4 py-2 rounded-md hover:opacity-90"
+          @click="cancelEdit"
-            :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
+          class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white"
+      >
         Annuler
       </button>
     </div>
-    </div>
+
 
 
     <!-- Titre principal -->
@@ -234,8 +237,6 @@
       ></iframe>
     </div>
 
-
-
     <!-- Texte sous la vidéo -->
     <div v-if="isEditMode" class="text-2xl"> Description</div>
     <div v-if="isEditMode">
@@ -251,6 +252,7 @@
       <div v-if="isEditMode" class="flex flex-col space-y-2">
         <!-- Édition du téléphone -->
         <div>
+
           <label class="text-lg">Numéro de téléphone</label>
           <input
               v-model="editablePhoneNumber"
@@ -279,73 +281,52 @@
           class="space-x-64"
       >
         <!-- Affichage du téléphone -->
-        <div v-if="phoneNumber" class="flex items-center space-x-2">
+        <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
           <i class="mdi mdi-phone-outline text-2xl"></i>
-          <span>{{ phoneNumber }}</span>
+          <span>{{ editablePhoneNumber }}</span>
         </div>
         <!-- Affichage de l'email -->
-        <div v-if="email" class="flex items-center space-x-2">
+        <div v-if="editableEmail" class="flex items-center space-x-2">
           <i class="mdi mdi-email-outline text-2xl"></i>
           <a
-              :href="`mailto:${email}`"
+              :href="`mailto:${editableEmail}`"
               class="no-underline text-current"
           >
-            {{ email }}
+            {{ editableEmail }}
           </a>
         </div>
 
       </div>
     </div>
 
-
-
   </div>
 
-
-  
-  
 </template>
 
 <script setup>
 import {ref, onMounted, computed} 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";
 
-const phoneNumber = ref("+1 (555) 123-4567"); // Remplacez par le numéro de téléphone
-const email = ref("contact@exemple.com"); // Remplacez par l'email
 
+const creatorProfileStore = useCreatorProfileStore();
 const brandingStore = useBrandingStore();
-const isEditMode = ref(false);
+const client = useClient();
+
+const isLoading = ref(true);
 const isLoggedIn = true;
+const isEditMode = ref(false);
 
 const authStore = useAuthStore();
-const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);
+
+
 
 // Image de fallback pour l'éditeur
 const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
 
-// Données JSON directement dans le fichier
-const demoData = {
-  mainTitle: "Votre référence d'Arma Reforger",
-  mainImageUrl: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
-  mainImageText: "Je suis la référence incontournable sur le jeu Arma Reforger grâce à ma maîtrise approfondie de ses mécanismes et à ma passion pour son univers. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
-  mainvideoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
-  mainVideoText: "Youpidou. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
-  imagesSubtitle2: "Participez à Mes Sessions de Jeu en Direct",
-  image1Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
-  image2Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
-  image3Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
-  image4Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
-  imagesText: "Me supporter et regarder mes sessions de jeu en direct, c'est bien plus qu'un simple divertissement. En tant que joueur passionné, je partage des stratégies, des astuces et une approche unique qui enrichissent l’expérience de la communauté. Votre soutien me permet de créer du contenu de qualité, d’améliorer mes équipements et d’explorer de nouvelles façons de vous divertir. En rejoignant mes sessions, vous participez à une aventure interactive où vos idées et commentaires influencent le déroulement. Ensemble, nous bâtissons une communauté dynamique et inspirante, où chaque spectateur joue un rôle clé dans cette expérience immersive.",
-  videoSubtitle: "Exemple d'une Séance de Jeu Typique",
-  videoSubtitleMain: "Main video",
- 
-  videoUrlMain: "https://www.youtube.com/embed/8l8CRkZkt30?si=8w2lHQ2mwoHTpf9-",
-  videoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
-
-  videoText: "Supporter cette page, c’est permettre de créer un contenu de qualité, basé sur des recherches approfondies et une expérimentation continue. Votre soutien aide à transformer cette passion en métier, tout en garantissant des vidéos, guides et sessions enrichissants. Le créateur, motivé par l’envie de fournir un contenu toujours meilleur, apprécie chaque geste qui rend cette aventure possible."
-};
-
 // Variables réactives pour les données
 const editablePhoneNumber = ref("");
 const editableEmail = ref("");
@@ -364,6 +345,12 @@ const videoSubtitleMain = ref("");
 const videoUrlMain = ref("");
 const videoUrl = ref("");
 const videoText = ref("");
+const phoneNumber = ref("");
+const email = ref("");
+
+
+const editableImages = ref([null, null, null, null]); 
+
 
 // Editable fields
 const editableMainTitle = ref("");
@@ -379,20 +366,9 @@ const editableVideoUrl = ref("");
 
 // Activer/désactiver le mode édition
 function toggleEditMode() {
+  isEditMode.value = !isEditMode.value;
   if (isEditMode.value) {
-    mainTitle.value = editableMainTitle.value;
+    // Charger les valeurs pour l'édition
-    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;
-  } else {
     editableMainTitle.value = mainTitle.value;
     editableMainImageText.value = mainImageText.value;
     editableMainVideoText.value = mainVideoText.value;
@@ -405,10 +381,25 @@ function toggleEditMode() {
     editableVideoUrl.value = videoUrl.value;
     editablePhoneNumber.value = phoneNumber.value;
     editableEmail.value = email.value;
+  } else {
+    // Sauvegarder les modifications
+    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;
   }
-  isEditMode.value = !isEditMode.value;
 }
 
+
+
 // Supprimer une image
 function deleteImage(field) {
   if (field === "mainImageUrl") mainImageUrl.value = null;
@@ -419,39 +410,118 @@ function deleteImage(field) {
 }
 
 // Mettre à jour une image
-function updateImage(field, event) {
+function updateImage(index, event) {
   const file = event.target.files[0];
   if (file) {
-    const reader = new FileReader();
+    // Stocker le fichier pour l'enregistrement
-    reader.onload = () => {
+    editableImages.value[index] = file;
-      if (field === "mainImageUrl") mainImageUrl.value = reader.result;
+
-      else if (field === "image1Url") image1Url.value = reader.result;
+    // Générer une URL temporaire pour la prévisualisation
-      else if (field === "image2Url") image2Url.value = reader.result;
+    const previewUrl = URL.createObjectURL(file);
-      else if (field === "image3Url") image3Url.value = reader.result; // Correction ici
+
-      else if (field === "image4Url") image4Url.value = reader.result;
+    // Mettre à jour la prévisualisation (remplacer dans l'interface utilisateur)
-    };
+    if (index === 0) image1Url.value = previewUrl;
-    reader.readAsDataURL(file);
+    else if (index === 1) image2Url.value = previewUrl;
+    else if (index === 2) image3Url.value = previewUrl;
+    else if (index === 3) image4Url.value = previewUrl;
   }
 }
 
+
 // Charger les données au montage
 onMounted(() => {
-  mainTitle.value = demoData.mainTitle;
+  mainTitle.value = brandingStore.presentationInfos.title;
-  mainImageUrl.value = demoData.mainImageUrl;
+  mainImageUrl.value = brandingStore.presentationInfos.mainImageUrl;
-  mainImageText.value = demoData.mainImageText;
+  mainImageText.value = brandingStore.presentationInfos.mainImageText;
-  mainVideoText.value = demoData.mainVideoText;
+  mainVideoText.value = brandingStore.presentationInfos.mainVideoText;
-  imagesSubtitle.value = demoData.imagesSubtitle;
+  imagesSubtitle.value = brandingStore.presentationInfos.imagesSubtitle;
-  image1Url.value = demoData.image1Url;
+  image1Url.value = brandingStore.presentationInfos.image1Url;
-  image2Url.value = demoData.image2Url;
+  image2Url.value = brandingStore.presentationInfos.image2Url;
-  image3Url.value = demoData.image3Url;
+  image3Url.value = brandingStore.presentationInfos.image3Url;
-  image4Url.value = demoData.image4Url;
+  image4Url.value = brandingStore.presentationInfos.image4Url;
-  imagesText.value = demoData.imagesText;
+  imagesText.value = brandingStore.presentationInfos.imagesText;
-  videoSubtitle.value = demoData.videoSubtitle;
+  videoSubtitle.value = brandingStore.presentationInfos.videoSubtitle;
-  videoSubtitleMain.value = demoData.videoSubtitleMain;
+  videoSubtitleMain.value = brandingStore.presentationInfos.videoSubtitleMain;
-  videoUrl.value = demoData.videoUrl;
+  videoUrl.value = brandingStore.presentationInfos.videoUrl;
-  videoUrlMain.value = demoData.videoUrlMain;
+  videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
-  videoText.value = demoData.videoText;
+  videoText.value = brandingStore.presentationInfos.videoText;
+  editablePhoneNumber.value = brandingStore.presentationInfos.phoneNumber;
+  editableEmail.value= brandingStore.presentationInfos.email;
+  phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
+  email.value = brandingStore.presentationInfos.email;
 });
+
+async function saveChanges() {
+  if (!creatorProfileStore.creator.id) {
+    console.error("L'ID du créateur est manquant !");
+    return;
+  }
+
+  const payload = {
+    PhoneNumber: editablePhoneNumber.value, // Correctement mappé
+    Email: editableEmail.value,            // Correctement mappé
+    Title: editableMainTitle.value,        // Correspond à "Title" dans le backend
+    MainImageText: editableMainImageText.value, // Correspond à "MainImageText"
+    MainVideoText: editableMainVideoText.value, // Correspond à "MainVideoText"
+    ImagesSubtitle: editableImagesSubtitle.value, // Correspond à "ImagesSubtitle"
+    ImagesText: editableImagesText.value,   // Correspond à "ImagesText"
+    VideoSubtitle: editableVideoSubtitle.value, // Correspond à "VideoSubtitle"
+    VideoSubtitleMain: editableVideoSubtitleMain.value, // Correspond à "VideoSubtitleMain"
+    VideoUrlMain: editableVideoUrlMain.value, // Correspond à "VideoUrlMain"
+    VideoUrl: editableVideoUrl.value,       // Correspond à "VideoUrl"
+    VideoText: editableVideoText.value      // Correspond à "VideoText"
+  };
+
+
+
+
+  console.log("Payload envoyé :", payload); // Log pour déboguer les valeurs envoyées
+
+  try {
+    const response = await client.post(
+        `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
+        payload,
+        { headers: { "Content-Type": "application/json" } }
+    );
+
+    console.log("Données sauvegardées :", response.data);
+
+    // Recharger la page après une sauvegarde réussie
+    window.location.reload();
+  } catch (error) {
+    console.error("Erreur lors de la sauvegarde :", error);
+  }
+}
+
+
+
+
+
+
+
+function cancelEdit() {
+  // Restaurer les valeurs d'origine
+  editableMainTitle.value = mainTitle.value;
+  editableMainImageText.value = mainImageText.value;
+  editableMainVideoText.value = mainVideoText.value;
+  editableImagesSubtitle.value = imagesSubtitle.value;
+  editableImagesText.value = imagesText.value;
+  editableVideoSubtitle.value = videoSubtitle.value;
+  editableVideoSubtitleMain.value = videoSubtitleMain.value;
+  editableVideoText.value = videoText.value;
+  editableVideoUrlMain.value = videoUrlMain.value;
+  editableVideoUrl.value = videoUrl.value;
+  editablePhoneNumber.value = phoneNumber.value;
+  editableEmail.value = email.value;
+
+  // Désactiver le mode édition
+  isEditMode.value = false;
+}
+
+
+
+
+
 </script>
 
 <style scoped>
@@ -470,5 +540,4 @@ onMounted(() => {
   border: 0;
   border-radius: 0.5rem; /* Pour les bords arrondis */
 }
-
 </style>