diff --git a/src/stores/creatorProfileStore.js b/src/stores/creatorProfileStore.js index 2f2d5e3..9946702 100644 --- a/src/stores/creatorProfileStore.js +++ b/src/stores/creatorProfileStore.js @@ -49,21 +49,9 @@ export const useCreatorProfileStore = defineStore('creator-profile', () => { } } - async function fetchSpecificCreatorProfile(creatorAlias) { - try { - const creatorResponse = await client.get( - `/api/creators/@${creatorAlias}` - ); - value.value = creatorResponse.data; - } catch (error) { - value.value = undefined; - } - } - return { creator: value, hasCreator, fetchCurrentCreatorProfile, - fetchSpecificCreatorProfile, }; }); diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue index c3776b2..8ddcd98 100644 --- a/src/views/creators/BannerActions.vue +++ b/src/views/creators/BannerActions.vue @@ -1,13 +1,12 @@ - - + - @@ -85,221 +91,289 @@ const closeDialog = () => { - - - {{ $t('creatorinfopage.informations') }} + + {{ $t('creatorinfopage.informations') }} + - {{ $t('creatorinfopage.name') }} - {{ creatorProfileStore.creator.name }} - - mdi-chevron-right - + 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" + > + {{ + $t('creatorinfopage.name') + }} + {{ + creatorProfileStore.creator.name + }} + + mdi-chevron-right + - {{ $t('creatorinfopage.title') }} - {{ creatorProfileStore.creator.title }} - - mdi-chevron-right - + @click="openDialog('ChangeTitle')" + 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" + > + {{ + $t('creatorinfopage.title') + }} + {{ + creatorProfileStore.creator.title + }} + + mdi-chevron-right + - Stripe Account - asdasd038338 - - mdi-chevron-right - + 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" + > + Stripe Account + asdasd038338 + + mdi-chevron-right + - {{ $t('creatorinfopage.banner&profile') }} + + {{ $t('creatorinfopage.banner&profile') }} + - - - - Choisissez votre palette de couleurs. - - mdi-chevron-right - + @click="openDialog('ColorsPicker')" + 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" + > + + Choisissez votre palette de couleurs. + + + mdi-chevron-right + + @click="openDialog('BannerPicker')" + :src="imageBanner" + class="w-full transition duration-200 ease-in-out transform hover:brightness-125" + alt="Tutorial Banner" + /> + @click="openDialog('LogoPicker')" + class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full" + :src="imageLogo" + alt="Profile Image" + /> - - - - {{ $t('creatorinfopage.socialnetwork') }} + + {{ $t('creatorinfopage.socialnetwork') }} + - mdi-facebook - {{ creatorProfileStore.creator.socials.facebookUrl }} + @click="openDialog('Socials')" + 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" + > + mdi-facebook + {{ + creatorProfileStore.creator.socials.facebookUrl + }} - mdi-chevron-right - + mdi-chevron-right + - mdi-instagram - {{ creatorProfileStore.creator.socials.instagramUrl }} + @click="openDialog('Socials')" + 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" + > + + mdi-instagram + {{ + creatorProfileStore.creator.socials.instagramUrl + }} - mdi-chevron-right - + mdi-chevron-right + - - - - {{ creatorProfileStore.creator.socials.xUrl }} - - mdi-chevron-right - + @click="openDialog('Socials')" + 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" + > + + + + {{ + creatorProfileStore.creator.socials.xUrl + }} + + mdi-chevron-right + - mdi-linkedin - {{ creatorProfileStore.creator.socials.linkedInUrl }} + @click="openDialog('Socials')" + 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" + > + mdi-linkedin + {{ + creatorProfileStore.creator.socials.linkedInUrl + }} - mdi-chevron-right - + mdi-chevron-right + - - - - {{ creatorProfileStore.creator.socials.tikTokUrl }} + @click="openDialog('Socials')" + 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" + > + + + + {{ + creatorProfileStore.creator.socials.tikTokUrl + }} - mdi-chevron-right - + mdi-chevron-right + - mdi-youtube - {{ creatorProfileStore.creator.socials.youtubeUrl }} + @click="openDialog('Socials')" + 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" + > + mdi-youtube + {{ + creatorProfileStore.creator.socials.youtubeUrl + }} - mdi-chevron-right - + mdi-chevron-right + - mdi-reddit - {{ creatorProfileStore.creator.socials.redditUrl }} + @click="openDialog('Socials')" + 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" + > + mdi-reddit + {{ + creatorProfileStore.creator.socials.redditUrl + }} - mdi-chevron-right - + mdi-chevron-right + - mdi-web - {{ creatorProfileStore.creator.socials.websiteUrl }} + @click="openDialog('Socials')" + 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" + > + mdi-web + {{ + creatorProfileStore.creator.socials.websiteUrl + }} - mdi-chevron-right - + mdi-chevron-right + - - - - - Informations pour pour votre page + + Informations pour pour votre page + - Nom (Unique) - Vous devez vous assurer de choisir un nom unique ou d'utiliser votre propre nom. Cela est important car c'est votre nom de marque, celui que vous allez présenter aux gens. Par exemple, notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour notre page officielle sur la plateforme. - - mdi-chevron-right - + @click="openDialog('CreateCreator')" + class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out" + > + Nom (Unique) + Vous devez vous assurer de choisir un nom unique ou d'utiliser + votre propre nom. Cela est important car c'est votre nom de + marque, celui que vous allez présenter aux gens. Par exemple, + notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour + notre page officielle sur la plateforme. + + mdi-chevron-right + + @click="openDialog('CreateCreator')" + class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out" + > Titre - Le titre doit refléter ce que vous souhaitez mettre en avant sur la plateforme, ce que vous voulez présenter comme contenu ou la raison de votre présence sur la plateforme. Par exemple, des artistes pourraient écrire chanteur, danseur, peintre ou autre. Une entreprise pourrait indiquer son activité. Dans notre cas, pour Hutopy, c'est 'Créer un monde meilleur'. + Le titre doit refléter ce que vous souhaitez mettre en avant sur + la plateforme, ce que vous voulez présenter comme contenu ou la + raison de votre présence sur la plateforme. Par exemple, des + artistes pourraient écrire chanteur, danseur, peintre ou autre. + Une entreprise pourrait indiquer son activité. Dans notre cas, + pour Hutopy, c'est 'Créer un monde meilleur'. + - mdi-chevron-right - + mdi-chevron-right + + @click="openDialog('CreateCreator')" + 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" + > Description - Pour la description, c'est un espace où vous pouvez écrire ce que vous souhaitez : décrire votre page, le service que vous offrez, la raison de votre présence sur la plateforme, votre historique... Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici afin de créer une plateforme sur laquelle les gens pourront s'exprimer et créer, tout en étant respectés et non exploités. + Pour la description, c'est un espace où vous pouvez écrire ce que + vous souhaitez : décrire votre page, le service que vous offrez, + la raison de votre présence sur la plateforme, votre historique... + Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici + afin de créer une plateforme sur laquelle les gens pourront + s'exprimer et créer, tout en étant respectés et non exploités. + - mdi-chevron-right - + mdi-chevron-right + - - - - -