Adds external urls to post-content

src/views/contents/PublishContentButton.vue

@@ -18,6 +18,15 @@ const client = useClient();
 const title = ref('');
 const message = ref('');
 const files = ref([]);
+const externalUrls = ref([]);
+
+const addUrl = () => {
+  externalUrls.value.push('');
+};
+
+const removeUrl = (index) => {
+  externalUrls.value.splice(index, 1);
+};
 
 async function publishPost() {
   const formData = new FormData();
@@ -28,6 +37,9 @@ async function publishPost() {
   files.value.forEach(file => {
     formData.append('files', file);
   });
+  externalUrls.value.forEach(externalUrl => {
+    formData.append('externalUrls', externalUrl);
+  });
 
   try {
     const content = await client.post(
@@ -40,7 +52,7 @@ async function publishPost() {
         })
 
     emits('content-posted', content.data)
-    
+
     closeDialog();
   } catch (error) {
     console.error(error);
@@ -74,25 +86,10 @@ const closeDialog = () => {
                 border: `3px solid ${creator.colors.menu}` 
               }">
 
-        <div class="py-4 text-2xl font-bold  border-b mb-2">
+        <v-card-title class="font-medium">
           Créer un Contenu
-        </div>
+        </v-card-title>
 
-        <div class="flex flex-row align-center px-3">
-          <img
-              :src="userStore.portraitUrl"
-              alt="Profile Image"
-              class="rounded-full"
-              width="40"
-              height="40"
-              :style="{ 
-                border: `2px solid ${creator.colors.accent}` 
-              }">
-          <div class="capitalize px-2 text-2xl">{{ userStore.creator.name }}</div>
-          <v-btn icon @click="cancelPost" class="ml-auto" variant="text">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </div>
         <v-card-text>
           <v-text-field v-model="title"
                         class="p-2"
@@ -113,6 +110,23 @@ const closeDialog = () => {
                       outlined
           ></v-textarea>
 
+          <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-icon>mdi-minus</v-icon>
+            </v-btn>
+          </div>
+          <v-btn icon @click="addUrl" class="mt-2">
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+
           <v-file-input v-model="files"
                         label="Glissez vos images"
                         class="p-2 custom-file-input"
@@ -123,13 +137,21 @@ const closeDialog = () => {
                         placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
           ></v-file-input>
 
-          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }"
-                 @click="publishPost" class="w-full">
-            Publier
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-btn variant="flat"
+                 @click="cancelPost"
+                  class="p-20">
+            Cancel
           </v-btn>
 
-
-        </v-card-text>
+          <v-btn variant="flat"
+                 color="primary"
+                 @click="publishPost">
+            Publier
+          </v-btn>
+        </v-card-actions>
       </v-card>
     </v-form>
   </v-dialog>

src/views/creators/CreatorBanner.vue

@@ -14,9 +14,13 @@
                 target="_blank"
                 class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
               <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-              <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
+              <img v-if="socialNetwork.icon.includes('tiktok')" 
+                   :src="socialNetwork.icon"
+                   class="w-9 h-9"
                    alt="Tiktok">
-              <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
+              <img v-if="socialNetwork.icon.includes('websiteIcon')"
+                   :src="socialNetwork.icon" 
+                   class="w-9 h-9"
                    alt="Website">
             </a>
           </div>