From a97e22908d43c4ce7a1726fc4081d47358dd7fab Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:26:56 -0500
Subject: [PATCH] Upload thumbnail required

---
 src/views/contents/QuickyContentEditor.vue | 174 ++++++++++-----------
 1 file changed, 86 insertions(+), 88 deletions(-)

diff --git a/src/views/contents/QuickyContentEditor.vue b/src/views/contents/QuickyContentEditor.vue
index d12aac7..f4c7a85 100644
--- a/src/views/contents/QuickyContentEditor.vue
+++ b/src/views/contents/QuickyContentEditor.vue
@@ -1,14 +1,14 @@
 <script setup>
-import {useClient} from '@/plugins/api.js';
-import {ref} from 'vue';
-import {v7} from 'uuid';
-import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
+import { useClient } from '@/plugins/api.js';
+import { ref } from 'vue';
+import { v7 } from 'uuid';
+import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
 
 const client = useClient();
 const title = ref('');
 const message = ref('');
 const files = ref([]);
-const Thumbnail = ref(); 
+const Thumbnail = ref();
 const externalUrls = ref([]);
 
 const creatorProfileStore = useCreatorProfileStore();
@@ -22,61 +22,61 @@ const removeUrl = (index) => {
 };
 
 async function publishPost() {
-  const formData = new FormData();
-  formData.append('id', v7());
-  formData.append('creatorId', creatorProfileStore.creator.id);
-  formData.append('title', title.value);
-  formData.append('description', message.value);
-  if (Thumbnail.value) {
-    formData.append('thumbnail', Thumbnail.value); 
+  // Validation : le thumbnail est obligatoire
+  if (!Thumbnail.value) {
+    alert("Veuillez ajouter un thumbnail avant de publier."); // Utilisez une alerte ou une notification Vuetify
+    return;
   }
 
+  const formData = new FormData();
+
+  formData.append('id', v7()); // UUID pour l'ID du contenu
+  formData.append('creatorId', creatorProfileStore.creator.id); // Récupère l'ID du créateur
+  formData.append('title', title.value);
+  formData.append('description', message.value);
+
+  // Ajout du thumbnail
+  formData.append('Thumbnail', Thumbnail.value);
+
+  // Ajout des fichiers
   files.value.forEach(file => {
-    formData.append('files', file);
+    formData.append('files', file); // Ajoute les fichiers au FormData
   });
 
- 
- 
- 
-
-
-
-  externalUrls.value.forEach(externalUrl => {
-    formData.append('externalUrls', externalUrl);
+  // Ajout des URLs externes
+  externalUrls.value.forEach(url => {
+    formData.append('externalUrls', url); // Les URLs sont ajoutées comme tableau
   });
 
   try {
-    const content = await client.post(
-        `/api/contents/`,
+    const response = await client.post(
+        `/api/contents`,
         formData,
         {
           headers: {
             'Content-Type': 'multipart/form-data',
-          }
-        });
+          },
+        },
+    );
 
-
-    title.value = '';
-    message.value = '';
-    files.value = [];
-    Thumbnail.value = '';
-    externalUrls.value = [];
+    console.log('Content published:', response.data);
+    resetForm(); // Réinitialise le formulaire après le succès
   } catch (error) {
-    console.error(error);
+    console.error('Error publishing content:', error);
   }
 }
 
-const cancelPost = () => {
+const resetForm = () => {
   title.value = '';
   message.value = '';
   files.value = [];
-  Thumbnail.value = null; 
+  Thumbnail.value = null;
   externalUrls.value = [];
 };
+
+const cancelPost = resetForm;
 </script>
 
-
-
 <template>
   <v-form>
     <v-card class="text-center rounded-xl w-[600px]">
@@ -85,72 +85,70 @@ const cancelPost = () => {
       </v-card-title>
 
       <v-card-text>
-        <v-text-field v-model="title"
-                      class="p-2"
-                      label="Titre"
-                      density="comfortable"
-                      variant="outlined"
-                      hide-details
-                      clearable
-        ></v-text-field>
-
-        <v-textarea v-model="message"
-                    label="Écrivez votre message ici..."
-                    class="p-2"
-                    density="comfortable"
-                    variant="outlined"
-                    hide-details
-                    clearable
-                    outlined
-        ></v-textarea>
+        <v-text-field
+            v-model="title"
+            label="Titre"
+            density="comfortable"
+            variant="outlined"
+            clearable
+        />
+        <v-textarea
+            v-model="message"
+            label="Message"
+            density="comfortable"
+            variant="outlined"
+            clearable
+        />
 
+        <!-- Ajout des URLs externes -->
         <div v-for="(url, index) in externalUrls" :key="index" class="d-flex align-center">
-          <v-text-field v-model="externalUrls[index]"
-                        class="p-2 flex-grow-1"
-                        label="Url Externe"
-                        density="comfortable"
-                        variant="outlined"
-                        hide-details
-          ></v-text-field>
-          <v-btn icon @click="removeUrl(index)" class="ml-2">
+          <v-text-field
+              v-model="externalUrls[index]"
+              label="URL externe"
+              density="comfortable"
+              variant="outlined"
+          />
+          <v-btn icon @click="removeUrl(index)">
             <v-icon>mdi-minus</v-icon>
           </v-btn>
         </div>
-        <v-btn icon @click="addUrl" class="mt-2">
+        <v-btn icon @click="addUrl">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
-        <v-file-input v-model="Thumbnail"
-                      label="Glissez votre Thumbnail"
-                      class="p-2 custom-file-input"
-                      variant="outlined"
-                      dropzone
-                      prepend-icon=""
-                      placeholder="Glissez et déposez un fichier ici ou cliquez pour sélectionner un fichier"
-        ></v-file-input>
 
+        <!-- Ajout du thumbnail -->
+        <v-file-input
+            v-model="Thumbnail"
+            label="Thumbnail (obligatoire)"
+            variant="outlined"
+            dropzone
+            clearable
+            :rules="[value => !!value || 'Un thumbnail est obligatoire']"
+        />
 
-
-        <v-file-input v-model="files"
-                      label="Glissez vos images"
-                      class="p-2 custom-file-input"
-                      variant="outlined"
-                      multiple
-                      dropzone
-                      prepend-icon=""
-                      placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
-        ></v-file-input>
+        <!-- Ajout des fichiers -->
+        <v-file-input
+            v-model="files"
+            label="Images"
+            variant="outlined"
+            multiple
+            dropzone
+        />
       </v-card-text>
 
       <v-card-actions>
-        <v-btn variant="flat"
-               @click="cancelPost"
-               class="p-20">
-          Cancel
+        <v-btn
+            variant="flat"
+            @click="cancelPost"
+        >
+          Annuler
         </v-btn>
 
-        <v-btn variant="flat"
-               color="primary"
-               @click="publishPost">
+        <v-btn
+            variant="flat"
+            color="primary"
+            @click="publishPost"
+        >
           Publier
         </v-btn>
       </v-card-actions>