Adds brandingStore.
Split userStore into userProfileStore and creatorProfileStore
This commit is contained in:
@@ -1,23 +1,23 @@
|
||||
<script setup>
|
||||
import XIcon from '@/assets/icons/x.svg'
|
||||
import {computed, ref} from 'vue'
|
||||
import {useUserStore} from "@/stores/userStore.js"
|
||||
import Socials from './Socials.vue'
|
||||
import BannerPicker from './BannerPicker.vue'
|
||||
import ColorsPicker from './ColorsPicker.vue'
|
||||
import LogoPicker from "./LogoPicker.vue"
|
||||
import About from "./About.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 userStore = useUserStore()
|
||||
const creatorProfileStore = useCreatorProfileStore()
|
||||
|
||||
const colorBannerTop = computed(() => userStore.creator.colors.bannerTop || '#a0c0f0')
|
||||
const colorBannerBottom = computed(() => userStore.creator.colors.bannerBottom || '#a0c0f0')
|
||||
const colorAccent = computed(() => userStore.creator.colors.accent || '#a0c0f0')
|
||||
const colorMenu = computed(() => userStore.creator.colors.menu || '#a0c0f0')
|
||||
const imageBanner = computed(() => userStore.creator.images.banner || '/images/placeholders/banner.png')
|
||||
const imageLogo = computed(() => userStore.creator.images.logo || '/images/placeholders/logo.png')
|
||||
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('')
|
||||
@@ -28,20 +28,20 @@ const componentsMap = {
|
||||
LogoPicker,
|
||||
Socials,
|
||||
ColorsPicker,
|
||||
About,
|
||||
CreateCreator
|
||||
};
|
||||
|
||||
async function requestAccept(creatorName) {
|
||||
const userProfileStore = useUserProfileStore()
|
||||
const client = useClient()
|
||||
const response = await client.post(
|
||||
'/api/creators',
|
||||
{
|
||||
'creatorId': userStore.user.id,
|
||||
'creatorId': userProfileStore.value.id,
|
||||
'name': creatorName
|
||||
})
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
await userStore.fetchCurrentCreatorProfile()
|
||||
await creatorProfileStore.fetchCurrentCreatorProfile()
|
||||
dialog.value = false
|
||||
} else {
|
||||
console.log(`An issue while creating the creator: ${response.statusText}`)
|
||||
@@ -71,7 +71,7 @@ const closeDialog = () => {
|
||||
<v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
|
||||
<v-card-text>
|
||||
<component :is="currentComponent"
|
||||
:creator="userStore.creator"
|
||||
:creator="creatorProfileStore.value"
|
||||
:colorName="colorToEdit"
|
||||
@closeRequested="closeDialog"
|
||||
@requestAccept="requestAccept"
|
||||
@@ -88,7 +88,7 @@ const closeDialog = () => {
|
||||
{{ $t('creatorinfopage.pageinformation') }}
|
||||
</h1>
|
||||
|
||||
<div v-if="userStore.hasCreator" class="w-full max-w-[800px]">
|
||||
<div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]">
|
||||
|
||||
<div class="my-10 border rounded-2xl">
|
||||
|
||||
@@ -98,31 +98,11 @@ const closeDialog = () => {
|
||||
|
||||
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">{{ userStore.creator.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>
|
||||
|
||||
<button
|
||||
@click="openDialog('About')"
|
||||
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">{{ userStore.creator.about.title }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('About')"
|
||||
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">{{ $t('creatorinfopage.description') }}</span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -196,7 +176,7 @@ const closeDialog = () => {
|
||||
@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">{{ userStore.creator.socials.facebookUrl }}</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>
|
||||
@@ -206,7 +186,7 @@ const closeDialog = () => {
|
||||
@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">{{ userStore.creator.socials.instagramUrl }}</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>
|
||||
@@ -218,7 +198,7 @@ const closeDialog = () => {
|
||||
<span class="flex-none pa-2 w-6 h-6 text-left">
|
||||
<XIcon></XIcon>
|
||||
</span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</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>
|
||||
@@ -228,7 +208,7 @@ const closeDialog = () => {
|
||||
@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">{{ userStore.creator.socials.linkedInUrl }}</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>
|
||||
@@ -240,7 +220,7 @@ const closeDialog = () => {
|
||||
<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">{{ userStore.creator.socials.tikTokUrl }}</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>
|
||||
@@ -250,7 +230,7 @@ const closeDialog = () => {
|
||||
@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">{{ userStore.creator.socials.youtubeUrl }}</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>
|
||||
@@ -260,7 +240,7 @@ const closeDialog = () => {
|
||||
@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">{{ userStore.creator.socials.redditUrl }}</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>
|
||||
@@ -270,7 +250,7 @@ const closeDialog = () => {
|
||||
@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">{{ userStore.creator.socials.websiteUrl }}</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>
|
||||
|
||||
Reference in New Issue
Block a user