Transit
This commit is contained in:
283
frontend/src/views/profile/CreatorPage.vue
Normal file
283
frontend/src/views/profile/CreatorPage.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<script setup>
|
||||
import XIcon from '@/assets/icons/x.svg';
|
||||
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
|
||||
import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
|
||||
import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
|
||||
import {computed, ref} from 'vue';
|
||||
import ColorsPicker from './creators/ColorsPicker.vue';
|
||||
import LogoPicker from '../creators/CreatorLogoEditor.vue';
|
||||
import Socials from './creators/Socials.vue';
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
|
||||
const dialog = ref(false);
|
||||
const currentComponent = ref('');
|
||||
|
||||
const componentsMap = {
|
||||
LogoPicker,
|
||||
Socials,
|
||||
ColorsPicker,
|
||||
ChangeTitle,
|
||||
ChangeStripeID,
|
||||
};
|
||||
|
||||
function requestCancel() {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
const openDialog = (component) => {
|
||||
currentComponent.value = componentsMap[component];
|
||||
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.creator"
|
||||
@closeRequested="closeDialog"
|
||||
@requestAccept="requestAccept"
|
||||
@requestCancel="requestCancel"
|
||||
></component>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Lorsque l'utilisateur n'a pas de creator name-->
|
||||
<v-card rounded="xl" class="w-full">>
|
||||
<h1 class="uppercase">
|
||||
{{ $t('creatorinfopage.informations') }}
|
||||
</h1>
|
||||
|
||||
<!-- INFOS -->
|
||||
<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.creator.name }}
|
||||
</span>
|
||||
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TITLE -->
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@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"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left">{{
|
||||
$t('creatorinfopage.title')
|
||||
}}</span>
|
||||
<span class="flex-auto text-left pr-6 capitalize">{{
|
||||
creatorProfileStore.creator.title
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- STRIPE -->
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@click="openDialog('ChangeStripeID')"
|
||||
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"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left"
|
||||
>Stripe Account ID</span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.stripeId
|
||||
}}</span>
|
||||
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
|
||||
<v-card rounded="xl" class="w-full">
|
||||
<div class="py-5 uppercase ml-4">
|
||||
{{ $t('creatorinfopage.banner&profile') }}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@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"
|
||||
>
|
||||
<span class="flex-auto text-left pr-6 capitalize">
|
||||
Choisissez votre palette de couleurs.
|
||||
</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-card rounded="xl" class="w-full">
|
||||
<div class="uppercase">
|
||||
{{ $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.creator.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.creator.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-9 h-9 text-left ml-0.5">
|
||||
<XIcon></XIcon>
|
||||
</span>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.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.creator.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.creator.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.creator.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.creator.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"
|
||||
>
|
||||
<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.creator.socials?.websiteUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.HoverBtn:hover {
|
||||
@apply bg-[#A6147D] text-white;
|
||||
@apply hover:opacity-90;
|
||||
}
|
||||
|
||||
.custom-border {
|
||||
border: 3px solid;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user