Adds SocialNetworks for Creators

src/views/Profile/PageInformations.vue

@@ -1,13 +1,6 @@
 <script setup>
 import {ref} from 'vue';
-import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
-import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
-import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
-import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
-import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
-import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
-import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
-import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
+import SocialNetworks from '@/views/Profile/Dialogs/PageInformations/SocialNetworks.vue';
 import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
 import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
 import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
@@ -22,14 +15,7 @@ const dialog = ref(false);
 const currentComponent = ref('');
 
 const componentsMap = {
-  ModalFacebook,
-  ModalInstagram,
-  ModalLinkedIn,
-  ModalReddit,
-  ModalTikTok,
-  ModalWebsite,
-  ModalX,
-  ModalYoutube,
+  SocialNetworks,
   BannerPicker,
   ColorTopBanner,
   ColorBottomBanner,
@@ -39,6 +25,7 @@ const componentsMap = {
 };
 
 const openDialog = (component) => {
+  console.dir(userStore.creator)
   currentComponent.value = componentsMap[component]
   dialog.value = true
 }
@@ -51,7 +38,7 @@ const closeDialog = () => {
 </script>
 
 <template>
-  
+
   <v-dialog v-model="dialog" max-width="600px">
     <v-card>
       <v-card-text>
@@ -62,7 +49,7 @@ const closeDialog = () => {
       </v-card-text>
     </v-card>
   </v-dialog>
-  
+
   <div class="flex flex-col items-center w-full">
     <h1 class="uppercase pb-5 text-2xl">
       <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
@@ -127,91 +114,92 @@ const closeDialog = () => {
 
     <!-- Réseaux sociaux -->
     <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
+
       <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
+
       <div class="flex flex-col w-full">
         <button
-            @click="openDialog('ModalFacebook')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
-          <span class="flex-auto text-left pr-6">Facebook</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.facebookUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalInstagram')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
-          <span class="flex-auto text-left pr-6">Instagram</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.instagramUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalX')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png"
-                                                                class="w-5 h-5"></span>
-          <span class="flex-auto text-left pr-6">X</span>
+          <span class="flex-none pa-2 min-w-32 text-left"><v-icon>mdi-twitter</v-icon></span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.xUrl }}</span>
           <span class="flex-none">          
                         <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalLinkedIn')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
-          <span class="flex-auto text-left pr-6">LinkedIn</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.linkedInUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalTikTok')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
-          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png"
-                                                                class="w-5 h-5"></span>
-          <span class="flex-auto text-left pr-6">TikTok</span>
+          <span class="flex-none pa-2 min-w-32 text-left"> 
+            <img src="/images/socials/tiktok-black.png" class="w-5 h-5">
+          </span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.tikTokUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalYoutube')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
-          <span class="flex-auto text-left pr-6">Youtube</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.youtubeUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalReddit')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
-          <span class="flex-auto text-left pr-6">Reddit</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.redditUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('ModalWebsite')"
+            @click="openDialog('SocialNetworks')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
-          <span class="flex-auto text-left pr-6">Site web personnel</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.websiteUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
-
       </div>
     </div>
   </div>