jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds brandingStore.

Browse Source 
Split userStore into userProfileStore and creatorProfileStore
This commit is contained in:
Jonathan Bourdon
2024-09-22 02:42:26 -04:00
parent 3cfb3951e3
commit cd51474d08
36 changed files with 458 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/profile/account/AccountPage.vue
View File

@@ -18,7 +18,7 @@
<span class="value">Un portrait vous permet de personnaliser votre profil</span>
<span>
<img
:src="userStore.user.portraitUrl"
:src="userProfileStore.value.portraitUrl"
alt="Profile Image"
class="rounded-full"
width="48px"
@@ -30,7 +30,7 @@
class="editableValue"
@click="openEditFullname">
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
<span class="value">{{ userStore.fullname }}</span>
<span class="value">{{ userProfileStore.fullname }}</span>
<span><v-icon>mdi-chevron-right</v-icon></span>
</button>
@@ -38,7 +38,7 @@
class="editableValue"
@click="openEditAlias">
<span class="label">{{ $t('personnalinformation.alias') }}</span>
<span class="value">{{ userStore.user.alias }}</span>
<span class="value">{{ userProfileStore.value.alias }}</span>
<span><v-icon>mdi-chevron-right</v-icon></span>
</button>
@@ -46,7 +46,7 @@
class="editableValue"
@click="openEditBirthday">
<span class="label">{{ $t('personnalinformation.dob') }}</span>
<span class="value">{{ userStore.user.birthDate }}</span>
<span class="value">{{ userProfileStore.value.birthDate }}</span>
<span><v-icon>mdi-chevron-right</v-icon></span>
</button>
@@ -62,7 +62,7 @@
class="editableValue"
@click="openEditEmail">
<span class="label">{{ $t('personnalinformation.email') }}</span>
<span class="value">{{ userStore.user.email }}</span>
<span class="value">{{ userProfileStore.value.email }}</span>
<span><v-icon>mdi-chevron-right</v-icon></span>
</button>
@@ -70,7 +70,7 @@
class="editableValue"
@click="openEditPhone">
<span class="label">{{ $t('personnalinformation.phone') }}</span>
<span class="value">{{ userStore.user.phoneNumber }}</span>
<span class="value">{{ userProfileStore.value.phoneNumber }}</span>
<span><v-icon>mdi-chevron-right</v-icon></span>
</button>
</v-card>
@@ -85,7 +85,7 @@
class="editableValue"
@click="openEditAddress">
<span class="label">{{ $t('personnalinformation.home') }}</span>
<span class="value">{{ userStore.user.address }}</span>
<span class="value">{{ userProfileStore.value.address }}</span>
<span><v-icon>mdi-chevron-right</v-icon></span>
</button>
</v-card>
@@ -94,7 +94,7 @@
<!-- Modal -->
<v-dialog v-model="dialogEditPortraitShown" max-width="600px">
<portrait-dialog
:portrait-url="userStore.user.portraitUrl"
:portrait-url="userProfileStore.value.portraitUrl"
@close="handleCloseEditPortrait"
@save="handleSaveEditPortrait"
></portrait-dialog>
@@ -102,8 +102,8 @@
<v-dialog v-model="dialogEditFullnameShown" max-width="600px">
<fullname-dialog
:firstname="userStore.user.firstname"
:lastname="userStore.user.lastname"
:firstname="userProfileStore.value.firstname"
:lastname="userProfileStore.value.lastname"
@close="handleCloseEditFullname"
@save="handleSaveEditFullname"
></fullname-dialog>
@@ -111,7 +111,7 @@
<v-dialog v-model="dialogEditAliasShown" max-width="600px">
<alias-dialog
:alias="userStore.user.alias"
:alias="userProfileStore.value.alias"
@close="handleCloseEditAlias"
@save="handleSaveEditAlias"
></alias-dialog>
@@ -119,7 +119,7 @@
<v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
<birthday-dialog
:birth-date="userStore.user.birthDate"
:birth-date="userProfileStore.value.birthDate"
@close="handleCloseEditBirthday"
@save="handleSaveEditBirthday"
></birthday-dialog>
@@ -127,7 +127,7 @@
<v-dialog v-model="dialogEditPhoneShown" max-width="600px">
<phone-dialog
:phone="userStore.user.phoneNumber"
:phone="userProfileStore.value.phoneNumber"
@close="handleCloseEditPhone"
@save="handleSaveEditPhone"
></phone-dialog>
@@ -135,7 +135,7 @@
<v-dialog v-model="dialogEditEmailShown" max-width="600px">
<email-dialog
:email="userStore.user.email"
:email="userProfileStore.value.email"
@close="handleCloseEditEmail"
@save="handleSaveEditEmail"
></email-dialog>
@@ -143,7 +143,7 @@
<v-dialog v-model="dialogEditAddressShown" max-width="600px">
<address-dialog
:address="userStore.user.address"
:address="userProfileStore.value.address"
@close="handleCloseEditAddress"
@save="handleSaveEditAddress"
></address-dialog>
@@ -159,9 +159,10 @@ import BirthdayDialog from "@/views/profile/account/BirthdayDialog.vue";
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import PortraitDialog from "@/views/profile/account/PortraitDialog.vue";
import {useUserStore} from "@/stores/userStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
const userProfileStore = useUserProfileStore()
const userStore = useUserStore()
// ### Portrait
@@ -176,7 +177,7 @@ function handleCloseEditPortrait() {
}
function handleSaveEditPortrait(portraitData) {
userStore.changePortrait(portraitData)
userProfileStore.changePortrait(portraitData)
dialogEditPortraitShown.value = false
}
@@ -193,7 +194,7 @@ function handleCloseEditFullname() {
}
function handleSaveEditFullname(firstname, lastname) {
userStore.changeFullname(firstname, lastname)
userProfileStore.changeFullname(firstname, lastname)
dialogEditFullnameShown.value = false
}
@@ -210,7 +211,7 @@ function handleCloseEditAlias() {
}
function handleSaveEditAlias(alias) {
userStore.changeAlias(alias)
userProfileStore.changeAlias(alias)
dialogEditAliasShown.value = false
}
@@ -227,7 +228,7 @@ function handleCloseEditBirthday() {
}
function handleSaveEditBirthday(birthday) {
userStore.changeBirthday(birthday)
userProfileStore.changeBirthday(birthday)
dialogEditBirthdayShown.value = false
}
@@ -244,7 +245,7 @@ function handleCloseEditPhone() {
}
function handleSaveEditPhone(phone) {
userStore.changePhone(phone)
userProfileStore.changePhone(phone)
dialogEditPhoneShown.value = false
}
@@ -261,7 +262,7 @@ function handleCloseEditEmail() {
}
function handleSaveEditEmail(email) {
userStore.changeEmail(email)
userProfileStore.changeEmail(email)
dialogEditEmailShown.value = false
}
@@ -277,7 +278,7 @@ function handleCloseEditAddress() {
}
function handleSaveEditAddress(address) {
userStore.changeAddress(address)
userProfileStore.changeAddress(address)
dialogEditAddressShown.value = false
}
</script>

67
src/views/profile/creators/About.vue
View File

@@ -1,67 +0,0 @@
<script setup>
import {ref} from 'vue'
import {useClient} from "@/plugins/api.js";
const props = defineProps({
creator: {
required: true
}
})
const emits = defineEmits(['closeRequested'])
const title = ref(props.creator.about.title)
const description = ref(props.creator.about.description)
const client = useClient()
const save = async () => {
try {
await client.post(
`/api/creators/${props.creator.id}/about`,
{
"title": title.value || null,
"description": description.value || null
})
props.creator.about.title = title
props.creator.about.description = description
emits('closeRequested')
} catch (error) {
console.error(error)
}
}
const cancel = () => {
emits('closeRequested')
}
</script>
<template>
<div class="pb-5 text-2xl">About</div>
<div class="flex flex-row align-center">
<v-text-field
variant="outlined"
v-model="title"
label="Titre"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<v-text-field
variant="outlined"
v-model="description"
label="Description"
outlined
></v-text-field>
</div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
</div>
</template>

66
src/views/profile/creators/CreatorPage.vue
View File

@@ -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>