321 lines
14 KiB
Vue
321 lines
14 KiB
Vue
<script setup>
|
|
import XIcon from '@/assets/icons/x.svg'
|
|
import {computed, ref} from 'vue'
|
|
import Socials from './Socials.vue'
|
|
import BannerPicker from './BannerPicker.vue'
|
|
import ColorsPicker from './ColorsPicker.vue'
|
|
import LogoPicker from "./LogoPicker.vue"
|
|
import CreateCreator from "./CreateCreator.vue";
|
|
import {useClient} from "@/plugins/api.js";
|
|
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
|
|
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
|
|
|
const creatorProfileStore = useCreatorProfileStore()
|
|
|
|
const colorBannerTop = computed(() => creatorProfileStore.value.colors.bannerTop || '#a0c0f0')
|
|
const colorBannerBottom = computed(() => creatorProfileStore.value.colors.bannerBottom || '#a0c0f0')
|
|
const colorAccent = computed(() => creatorProfileStore.value.colors.accent || '#a0c0f0')
|
|
const colorMenu = computed(() => creatorProfileStore.value.colors.menu || '#a0c0f0')
|
|
const imageBanner = computed(() => creatorProfileStore.value.images.banner || '/images/placeholders/banner.png')
|
|
const imageLogo = computed(() => creatorProfileStore.value.images.logo || '/images/placeholders/logo.png')
|
|
|
|
const dialog = ref(false);
|
|
const currentComponent = ref('')
|
|
const colorToEdit = ref(null)
|
|
|
|
const componentsMap = {
|
|
BannerPicker,
|
|
LogoPicker,
|
|
Socials,
|
|
ColorsPicker,
|
|
CreateCreator
|
|
};
|
|
|
|
async function requestAccept(creatorName) {
|
|
const userProfileStore = useUserProfileStore()
|
|
const client = useClient()
|
|
const response = await client.post(
|
|
'/api/creators',
|
|
{
|
|
'creatorId': userProfileStore.value.id,
|
|
'name': creatorName
|
|
})
|
|
if (response.status >= 200 && response.status < 300) {
|
|
await creatorProfileStore.fetchCurrentCreatorProfile()
|
|
dialog.value = false
|
|
} else {
|
|
console.log(`An issue while creating the creator: ${response.statusText}`)
|
|
}
|
|
}
|
|
|
|
function requestCancel() {
|
|
dialog.value = false
|
|
}
|
|
|
|
const openDialog = (component, colorName = null) => {
|
|
currentComponent.value = componentsMap[component]
|
|
colorToEdit.value = colorName
|
|
dialog.value = true
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
currentComponent.value = null
|
|
dialog.value = false
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<v-dialog v-model="dialog" max-width="800px">
|
|
<v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
|
|
<v-card-text>
|
|
<component :is="currentComponent"
|
|
:creator="creatorProfileStore.value"
|
|
:colorName="colorToEdit"
|
|
@closeRequested="closeDialog"
|
|
@requestAccept="requestAccept"
|
|
@requestCancel="requestCancel"
|
|
></component>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- Lorsque l'utilisateur n'a pas de creator name-->
|
|
<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>
|
|
{{ $t('creatorinfopage.pageinformation') }}
|
|
</h1>
|
|
|
|
<div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]">
|
|
|
|
<div class="my-10 border rounded-2xl">
|
|
|
|
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.informations') }}</div>
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
|
|
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">{{ $t('creatorinfopage.name') }}</span>
|
|
<span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.value.name }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded-2xl">
|
|
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div>
|
|
<div class="flex flex-col w-full">
|
|
|
|
<button
|
|
@click="openDialog('ColorsPicker', 'bannerTop')"
|
|
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
|
|
:style="{ backgroundColor: colorBannerTop }"
|
|
>
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</button>
|
|
|
|
<button>
|
|
<img
|
|
@click="openDialog('BannerPicker')"
|
|
:src="imageBanner"
|
|
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
|
|
alt="Tutorial Banner"
|
|
>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('ColorsPicker', 'bannerBottom')"
|
|
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
|
|
:style="{ backgroundColor: colorBannerBottom }"
|
|
>
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</button>
|
|
|
|
<button class="flex justify-center my-5">
|
|
<img
|
|
@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"
|
|
:style="{ borderColor: colorAccent }"
|
|
:src="imageLogo"
|
|
alt="Profile Image"
|
|
>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('ColorsPicker', 'accent')"
|
|
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-circle-outline</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.borderpicturecolor') }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('ColorsPicker', 'menu')"
|
|
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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.menucolor') }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 border rounded-2xl">
|
|
|
|
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.socialnetwork') }}</div>
|
|
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
@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">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.facebookUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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">
|
|
<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">{{ creatorProfileStore.value.socials.instagramUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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">
|
|
<span class="flex-none pa-2 w-6 h-6 text-left">
|
|
<XIcon></XIcon>
|
|
</span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.xUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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 ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.linkedInUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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 ">
|
|
<span class="flex-none pa-2 min-w-32 text-left">
|
|
<XIcon class="w-5 h-5"></XIcon>
|
|
</span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.tikTokUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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 ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.youtubeUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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 ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.redditUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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 ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.websiteUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="w-full max-w-[800px]">
|
|
<div class="my-10 border rounded-2xl">
|
|
|
|
<div class="py-5 uppercase ml-4 px-4">Informations pour pour votre page</div>
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
@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">
|
|
<span class="flex-none pa-2 min-w-32 text-left">Nom (Unique) </span>
|
|
<span class="flex-auto text-left pr-6">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.</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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">
|
|
<span class="flex-none pa-2 min-w-32 text-left">Titre</span>
|
|
<span class="flex-auto text-left pr-6">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'. </span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@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 ">
|
|
<span class="pa-2 min-w-32 text-left">Description</span>
|
|
<span class="flex-auto text-left pr-6">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. </span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
|
|
.HoverBtn:hover {
|
|
@apply bg-[#A6147D] text-white;
|
|
@apply hover:opacity-90;
|
|
/* Réduire l'opacité au survol */
|
|
}
|
|
|
|
.custom-border {
|
|
border: 3px solid;
|
|
}
|
|
|
|
</style>
|
|
|
|
|