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

12
src/main.js
View File

@@ -11,8 +11,9 @@ import * as directives from 'vuetify/directives'
import vueGoogleOauth from 'vue3-google-login' import vueGoogleOauth from 'vue3-google-login'
import {useSubscriptionStore} from "@/stores/subscriptionStore.js"; import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useAuthStore} from "@/stores/authStore.js"; import {useAuthStore} from "@/stores/authStore.js";
import {useUserStore} from "@/stores/userStore.js";
import i18n from './i18n.js'; import i18n from './i18n.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
const vuetify = createVuetify({ const vuetify = createVuetify({
components, components,
@@ -31,9 +32,10 @@ const app = createApp(App)
// Make $t globally available // Make $t globally available
app.config.globalProperties.$t = i18n.global.t; app.config.globalProperties.$t = i18n.global.t;
// this force the creation of the stores // this force the creation and initialization of the stores
const subscriptionStore = useSubscriptionStore() useSubscriptionStore()
const authStore = useAuthStore() useAuthStore()
const userStore = useUserStore() useUserProfileStore()
useCreatorProfileStore()
app.mount('#app'); app.mount('#app');

53
src/stores/brandingStore.js Normal file
View File

@@ -0,0 +1,53 @@
import {defineStore} from 'pinia'
import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core";
import {onBeforeMount, ref, watch} from "vue";
import {useRoute} from "vue-router";
export const useBrandingStore = defineStore(
'branding',
() => {
const currentBrand = ref('')
const value = useSessionStorage(
'branding',
{},
{writeDefaults: false})
const loading = ref(true)
const route = useRoute()
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => {
console.log(`creator: ${route.params.creator}`)
console.log(`currentBrand: ${currentBrand.value}`)
if (route.params.creator != currentBrand.value) {
await fetchCreatorData(route.params.creator);
currentBrand.value = route.params.creator
}
}
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const client = useClient()
const response = await client.get(`/api/creators/@${creatorAlias}`)
value.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
return {
value,
loading
}
})

47
src/stores/creatorProfileStore.js Normal file
View File

@@ -0,0 +1,47 @@
import {computed, watch} from 'vue'
import {defineStore} from 'pinia'
import {useAuthStore} from "@/stores/authStore.js";
import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core";
export const useCreatorProfileStore = defineStore(
'creator-profile',
() => {
const authStore = useAuthStore()
const authWatcher = watch(
() => authStore.isAuthenticated,
async (newValue) => {
if (newValue) {
await fetchCurrentCreatorProfile()
} else {
value.value = undefined
}
})
const value = useSessionStorage(
'creator-profile',
{},
{writeDefaults: false})
const hasCreator = computed(() =>
value.value
&& Object.getOwnPropertyNames(value.value).length >= 1)
const client = useClient()
async function fetchCurrentCreatorProfile() {
try {
const creatorResponse = await client.get(`/api/creators/profile`)
value.value = creatorResponse.data
// TODO: no cache-busting ???
} catch (error) {
value.value = undefined
}
}
return {
creator: value,
hasCreator
}
})

82
src/stores/userStore.js → src/stores/userProfileStore.js
View File

@@ -4,38 +4,30 @@ import {useAuthStore} from "@/stores/authStore.js";
import {useClient} from "@/plugins/api.js"; import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core"; import {useSessionStorage} from "@vueuse/core";
export const useUserStore = defineStore( export const useUserProfileStore = defineStore(
'user', 'user-profile',
() => { () => {
const authStore = useAuthStore() const authStore = useAuthStore()
const authWatcher = watch( const authWatcher = watch(
() => authStore.isAuthenticated, () => authStore.isAuthenticated,
async (newValue) => { async (newValue) => {
if (newValue) { if (newValue) {
await fetchCurrentUserProfile() await fetchCurrentUserProfile()
await fetchCurrentCreatorProfile()
} else { } else {
user.value = undefined value.value = undefined
creator.value = undefined
} }
}) })
const user = useSessionStorage( const value = useSessionStorage(
'user-user', 'user-profile',
{}, {},
{writeDefaults: false}) {writeDefaults: false})
const creator = useSessionStorage(
'user-creator',
{},
{writeDefaults: false})
const hasCreator = computed(() =>
creator.value
&& Object.getOwnPropertyNames(creator.value).length >= 1)
const fullname = computed(() => { const fullname = computed(() => {
if (user.value) { if (value.value) {
const {firstname, lastname} = user.value; const {firstname, lastname} = value.value;
if (firstname && lastname) { if (firstname && lastname) {
return `${lastname}, ${firstname}`; return `${lastname}, ${firstname}`;
@@ -49,38 +41,29 @@ export const useUserStore = defineStore(
}) })
const alias = computed(() => { const alias = computed(() => {
if (user.value) { if (value.value) {
return user.value.alias || `${user.value.firstname || ''} ${user.value.lastname || ''}`.trim() || 'Anonyme' return value.value.alias || `${value.value.firstname || ''} ${value.value.lastname || ''}`.trim() || 'Anonyme'
} }
return 'Anonyme'; return 'Anonyme';
}) })
const portraitUrl = computed(() => { const portraitUrl = computed(() => {
return user.value && user.value.portraitUrl return value.value && value.value.portraitUrl
? user.value.portraitUrl ? value.value.portraitUrl
: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
}) })
const client = useClient()
async function fetchCurrentUserProfile() { async function fetchCurrentUserProfile() {
try { try {
const client = useClient()
const userResponse = await client.get("/api/users/profile"); const userResponse = await client.get("/api/users/profile");
user.value = userResponse.data value.value = userResponse.data
// Cache-busting only if portraitUrl exists // Cache-busting only if portraitUrl exists
if (user.value.portraitUrl) { if (value.value.portraitUrl) {
user.value.portraitUrl = `${user.value.portraitUrl}?${Date.now()}`; value.value.portraitUrl = `${value.value.portraitUrl}?${Date.now()}`;
} }
} catch (error) { } catch (error) {
user.value = undefined; value.value = undefined;
}
}
async function fetchCurrentCreatorProfile() {
try {
const creatorResponse = await client.get(`/api/creators/profile`)
creator.value = creatorResponse.data
} catch (error) {
creator.value = undefined
} }
} }
@@ -92,8 +75,8 @@ export const useUserStore = defineStore(
firstname: firstname, firstname: firstname,
lastname: lastname lastname: lastname
}) })
user.value.firstname = firstname; value.value.firstname = firstname;
user.value.lastname = lastname; value.value.lastname = lastname;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -106,7 +89,7 @@ export const useUserStore = defineStore(
{ {
alias: alias alias: alias
}) })
user.value.alias = alias; value.value.alias = alias;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -119,7 +102,7 @@ export const useUserStore = defineStore(
{ {
birthdate: birthdate birthdate: birthdate
}) })
user.value.birthDate = birthdate; value.value.birthDate = birthdate;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -132,7 +115,7 @@ export const useUserStore = defineStore(
{ {
phoneNumber: phoneNumber phoneNumber: phoneNumber
}) })
user.value.phoneNumber = phoneNumber; value.value.phoneNumber = phoneNumber;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -145,7 +128,7 @@ export const useUserStore = defineStore(
{ {
email: email email: email
}) })
user.value.email = email; value.value.email = email;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -158,12 +141,12 @@ export const useUserStore = defineStore(
{ {
address: address address: address
}) })
user.value.address = address; value.value.address = address;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
} }
async function changePortrait(selectedFile) { async function changePortrait(selectedFile) {
try { try {
const formData = new FormData(); const formData = new FormData();
@@ -172,18 +155,16 @@ export const useUserStore = defineStore(
const response = await client.post( const response = await client.post(
`/api/users/portrait`, `/api/users/portrait`,
formData) formData)
user.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting value.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
} }
return { return {
user, user: value,
creator,
alias, alias,
hasCreator,
fullname, fullname,
portraitUrl, portraitUrl,
changeFullname, changeFullname,
@@ -192,7 +173,6 @@ export const useUserStore = defineStore(
changePhone, changePhone,
changeEmail, changeEmail,
changeAddress, changeAddress,
changePortrait, changePortrait
fetchCurrentCreatorProfile
} }
}) })

8
src/views/contents/ContentCard.vue
View File

@@ -72,13 +72,7 @@
{{ messageCount }} {{ messageCount }}
</v-btn> </v-btn>
<donation-button :color-border="colorMenu" <donation-button></donation-button>
:color-accent="colorAccent"
:creator-id="creatorId"
:creator-name="creatorName"
:creator-logo="creatorLogo"
iconColorClass="text-black"
></donation-button>
</div> </div>

10
src/views/contents/PublishContentButton.vue
View File

@@ -1,8 +1,9 @@
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import {useClient} from '@/plugins/api.js';
import {ref} from 'vue'; import {ref} from 'vue';
import {useUserStore} from '@/stores/userStore.js';
import {v7} from 'uuid'; import {v7} from 'uuid';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
const props = defineProps({ const props = defineProps({
creator: {type: Object, required: true}, creator: {type: Object, required: true},
@@ -10,7 +11,8 @@ const props = defineProps({
const emits = defineEmits(['content-posted']) const emits = defineEmits(['content-posted'])
const userStore = useUserStore(); const userProfileStore = useUserProfileStore()
const creatorProfileStore = useCreatorProfileStore()
const isDialogActive = ref(false); const isDialogActive = ref(false);
@@ -31,7 +33,7 @@ const removeUrl = (index) => {
async function publishPost() { async function publishPost() {
const formData = new FormData(); const formData = new FormData();
formData.append('id', v7()); formData.append('id', v7());
formData.append('creatorId', userStore.user.id); formData.append('creatorId', creatorProfileStore.value.id);
formData.append('title', title.value); formData.append('title', title.value);
formData.append('description', message.value); formData.append('description', message.value);
files.value.forEach(file => { files.value.forEach(file => {
@@ -73,7 +75,7 @@ const closeDialog = () => {
<template> <template>
<button <button
v-if="creator && userStore.user && creator.id === userStore.user.id" v-if="creator && userProfileStore.value && creator.id === userProfileStore.value.id"
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4" class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
@click="isDialogActive = true"> @click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon> <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>

16
src/views/contents/Reaction.vue
View File

@@ -1,12 +1,12 @@
<script setup> <script setup>
import { useUserStore } from "@/stores/userStore.js";
import { REACTIONS } from "@/Constants/Reactions.js"; import { REACTIONS } from "@/Constants/Reactions.js";
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import { useClient } from "@/plugins/api.js"; import { useClient } from "@/plugins/api.js";
import {useAuthStore} from "@/stores/authStore.js" import {useAuthStore} from "@/stores/authStore.js"
import MustBeLogged from "@/views/MustBeLogged.vue"; import MustBeLogged from "@/views/MustBeLogged.vue";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
const userStore = useUserStore(); const userProfileStore = useUserProfileStore();
const authStore = useAuthStore() const authStore = useAuthStore()
const props = defineProps({ const props = defineProps({
@@ -49,8 +49,8 @@ async function reactToContent(reaction) {
const request = { const request = {
ContentId: contentId.value, ContentId: contentId.value,
reaction: reaction, reaction: reaction,
userId: userStore.user.id, userId: userProfileStore.value.id,
userName: `${userStore.user.firstName} ${userStore.user.lastName}`, userName: `${userProfileStore.value.firstName} ${userProfileStore.value.lastName}`,
}; };
adjustReactionCount(reaction); adjustReactionCount(reaction);
await client.post("/api/content/reaction/", request); await client.post("/api/content/reaction/", request);
@@ -61,8 +61,8 @@ async function reactToContent(reaction) {
const requestAdd = { const requestAdd = {
ContentId: contentId.value, ContentId: contentId.value,
reaction: reaction, reaction: reaction,
userId: userStore.user.id, userId: userProfileStore.value.id,
userName: `${userStore.user.firstName} ${userStore.user.lastName}`, userName: `${userProfileStore.value.firstName} ${userProfileStore.value.lastName}`,
}; };
adjustReactionCount(reaction); adjustReactionCount(reaction);
await client.post("/api/content/reaction/", requestAdd); await client.post("/api/content/reaction/", requestAdd);
@@ -71,7 +71,7 @@ async function reactToContent(reaction) {
} else { } else {
const requestRemove = { const requestRemove = {
ContentId: contentId.value, ContentId: contentId.value,
userId: userStore.user.id, userId: userProfileStore.value.id,
}; };
adjustReactionCount(reaction); adjustReactionCount(reaction);
await client.post("/api/content/reaction/remove", requestRemove); await client.post("/api/content/reaction/remove", requestRemove);
@@ -168,7 +168,7 @@ function adjustReactionCount(newReaction) {
} }
function initializeReactions() { function initializeReactions() {
const userReaction = props.content.reactions.find((x) => x.userId === userStore.user.id); const userReaction = props.content.reactions.find((x) => x.userId === userProfileStore.value.id);
if (userReaction) { if (userReaction) {
currentReaction.value = userReaction.reaction; currentReaction.value = userReaction.reaction;
hasReacted.value = true; hasReacted.value = true;

8
src/views/contents/contentcards/NContentCard.vue
View File

@@ -72,13 +72,7 @@
{{ messageCount }} {{ messageCount }}
</v-btn> </v-btn>
<donation-button :color-border="colorMenu" <donation-button></donation-button>
:color-accent="colorAccent"
:creator-id="creatorId"
:creator-name="creatorName"
:creator-logo="creatorLogo"
iconColorClass="text-black"
></donation-button>
</div> </div>

8
src/views/contents/contentcards/SmContentCard.vue
View File

@@ -72,13 +72,7 @@
{{ messageCount }} {{ messageCount }}
</v-btn> </v-btn>
<donation-button :color-border="colorMenu" <donation-button></donation-button>
:color-accent="colorAccent"
:creator-id="creatorId"
:creator-name="creatorName"
:creator-logo="creatorLogo"
iconColorClass="text-black"
></donation-button>
</div> </div>

9
src/views/contents/contentfullscreen/FullScreenContentMd.vue
View File

@@ -53,14 +53,7 @@
<div class="flex justify-around py-2"> <div class="flex justify-around py-2">
<Reaction v-if="data" :content="data"></Reaction> <Reaction v-if="data" :content="data"></Reaction>
<donation-button v-if="data" <donation-button v-if="data"></donation-button>
:color-border="data.colorMenu"
:color-accent="data.colorAccent"
:creator-id="data.createdBy"
:creator-name="data.createdByName"
:creator-logo="data.createdByPortraitUrl"
iconColorClass="text-black"
></donation-button>
</div> </div>
</div> </div>

6
src/views/contents/contentfullscreen/FullScreenContentSm.vue
View File

@@ -57,12 +57,6 @@
<Reaction v-if="data" :content="data"></Reaction> <Reaction v-if="data" :content="data"></Reaction>
<donation-button v-if="data" <donation-button v-if="data"
:color-border="data.colorMenu"
:color-accent="data.colorAccent"
:creator-id="data.createdBy"
:creator-name="data.createdByName"
:creator-logo="data.createdByPortraitUrl"
iconColorClass="text-black"
></donation-button> ></donation-button>
</div> </div>

18
src/views/creators/CreatorBanner.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="shadow-lg rounded-2xl" <div class="shadow-lg rounded-2xl"
:style="{ backgroundColor: creator.colors.secondary}"> :style="{ backgroundColor: branding.value.colors.secondary}">
<div class="relative z-20"> <div class="relative z-20">
<!--Banner--> <!--Banner-->
@@ -8,7 +8,7 @@
<div> <div>
<img <img
class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]" class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
:src="creator.images.banner ? creator.images.banner : '/images/placeholders/banner.png'" :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
alt="Profile Banner" alt="Profile Banner"
style="max-height: 425px" style="max-height: 425px"
> >
@@ -17,23 +17,15 @@
</div> </div>
<!--actions - Lowerpart--> <!--actions - Lowerpart-->
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions> <banner-actions></banner-actions>
</div> </div>
</template> </template>
<script setup> <script setup>
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue"; import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const branding = useBrandingStore()
creator: {type: Object, required: true},
});
const emits = defineEmits(['content-posted'])
function addContent(content) {
emits('content-posted', content)
}
</script> </script>

16
src/views/creators/CreatorHome.vue
View File

@@ -5,11 +5,9 @@
<creator-news-summary></creator-news-summary> <creator-news-summary></creator-news-summary>
</div> </div>
<div class="px-4" :style="{ color: userStore.creator.colors.onBackground}"> <div class="px-4" :style="{ color: brandingStore.value.colors.onBackground}">
<h1>{{ userStore.creator.about.title }}</h1> <h1>TEST</h1>
<p> <p>GET ME AN EDITOR NOW!</p>
{{ userStore.creator.about.description }}
</p>
</div> </div>
</div> </div>
@@ -17,10 +15,12 @@
</template> </template>
<script setup> <script setup>
import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
import {useUserStore} from "@/stores/userStore.js";
const userStore = useUserStore() import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
</script> </script>
<style scoped> <style scoped>

41
src/views/creators/CreatorLayout.vue
View File

@@ -1,11 +1,9 @@
<template> <template>
<div :style="{ backgroundColor: creator.colors.background }"> <div :style="{ backgroundColor: brandingStore.value.colors.background }">
<div class="max-w-[1500px] mx-auto"> <div class="max-w-[1500px] mx-auto">
<div v-if="creator && creator.id"> <div v-if="brandingStore.value && brandingStore.value.id">
<creator-banner :creator="creator" <creator-banner></creator-banner>
@content-posted="contentPosted"
></creator-banner>
</div> </div>
<div v-else> <div v-else>
<div v-if="loading"> <div v-if="loading">
@@ -27,7 +25,7 @@
</div> </div>
<div class="max-w-80"> <div class="max-w-80">
<rewards :creator="creator"></rewards> <rewards></rewards>
</div> </div>
</div> </div>
@@ -45,34 +43,7 @@ import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue"; import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import Rewards from "@/views/creators/Rewards.vue"; import Rewards from "@/views/creators/Rewards.vue";
import Footer from "@/views/main/Footer.vue"; import Footer from "@/views/main/Footer.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const creator = ref(null) const brandingStore = useBrandingStore()
const loading = ref(true)
const contents = ref([])
const client = useClient()
const route = useRoute()
function contentPosted(content) {
contents.value.unshift(content)
}
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => await fetchCreatorData(route.params.creator)
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
</script> </script>

8
src/views/creators/CreatorNewsSummary.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase" <div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}"> :style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
Actualité Actualité
</div> </div>
<div v-for="(item, index) in articles" <div v-for="(item, index) in articles"
class="my-1 text-white" class="my-1 text-white"
:key="index" :key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }"> :style="{ backgroundColor: brandingStore.value.colors.primary }">
<div class="flex justify-between items-center border-b-2 border-white p-2 mx-2"> <div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
<p class="text-xl tracking-[8px]"> <p class="text-xl tracking-[8px]">
@@ -64,9 +64,9 @@
<script setup> <script setup>
import {ref} from 'vue'; import {ref} from 'vue';
import {useUserStore} from "@/stores/userStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
const userStore = useUserStore() const brandingStore = useBrandingStore()
const articles = ref([ const articles = ref([
{ {

35
src/views/creators/DonationButton.vue
View File

@@ -6,20 +6,20 @@
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }"> <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2"> <div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens! Je Soutiens!
</div> </div>
<div class="flex flex-row align-center px-3"> <div class="flex flex-row align-center px-3">
<img <img
:src="creatorLogo" :src="brandingStore.value.images.logo"
alt="Profile Image" alt="Profile Image"
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${colorAccent}` }"> :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div> <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
@@ -50,7 +50,8 @@
clearable clearable
></v-textarea> ></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }" <v-btn variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
@click="goPay()" class="w-full mt-5"> @click="goPay()" class="w-full mt-5">
Envoyez Envoyez
</v-btn> </v-btn>
@@ -68,34 +69,29 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn> <v-btn block class="ma-auto"
style="width: 200px;"
@click="closeDialog()">Annuler
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</template> </template>
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js'; import {loadStripe} from '@stripe/stripe-js';
import {computed, onMounted, ref} from 'vue'; import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
const props = defineProps({ const props = defineProps({
colorBorder: {required: true},
colorAccent: {required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {required: true},
iconColorClass: {default: 'text-black'} iconColorClass: {default: 'text-black'}
}); });
const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)
const donationModal = ref(false); const donationModal = ref(false);
function openDonationDialog() { function openDonationDialog() {
@@ -145,6 +141,7 @@ function closeDialog() {
checkout.destroy(); checkout.destroy();
} }
} }
async function goPay() { async function goPay() {
isPaymentDialogActive.value = true; isPaymentDialogActive.value = true;

46
src/views/creators/DonationButtonBanner.vue
View File

@@ -1,28 +1,32 @@
<template> <template>
<v-btn :style="{ <v-btn :style="{
backgroundColor: colorBorder, color: 'white', backgroundColor: brandingStore.value.colors.primary,
borderRadius: '8px', padding:'20px 24px', color: 'white',
display: 'flex', alignItems: 'center', borderRadius: '8px',
justifyContent: 'center' }" @click="openDonationDialog()"> padding:'20px 24px',
<div class="font-bold"> Je soutiens </div> display: 'flex',
alignItems: 'center',
justifyContent: 'center' }"
@click="openDonationDialog()">
<div class="font-bold"> Je soutiens</div>
</v-btn> </v-btn>
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }"> <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2"> <div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens! Je Soutiens!
</div> </div>
<div class="flex flex-row align-center px-3"> <div class="flex flex-row align-center px-3">
<img <img
:src="creatorLogo" :src="brandingStore.value.image.logoUrl"
alt="Profile Image" alt="Profile Image"
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${colorAccent}` }"> :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div> <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
@@ -53,7 +57,7 @@
clearable clearable
></v-textarea> ></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }" <v-btn variant="outlined" :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
@click="goPay()" class="w-full mt-5"> @click="goPay()" class="w-full mt-5">
Envoyez Envoyez
</v-btn> </v-btn>
@@ -76,28 +80,16 @@
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</template> </template>
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js'; import {loadStripe} from '@stripe/stripe-js';
import {computed, onMounted, ref} from 'vue'; import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
colorBorder: {required: true},
colorAccent: {required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {required: true},
iconColorClass: {default: 'text-black'}
});
const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)
const donationModal = ref(false); const donationModal = ref(false);
@@ -109,7 +101,6 @@ function closeDonationDialog() {
donationModal.value = false donationModal.value = false
} }
const isPaymentDialogActive = ref(false); const isPaymentDialogActive = ref(false);
const tipAmount = ref(0); const tipAmount = ref(0);
@@ -148,6 +139,7 @@ function closeDialog() {
checkout.destroy(); checkout.destroy();
} }
} }
async function goPay() { async function goPay() {
isPaymentDialogActive.value = true; isPaymentDialogActive.value = true;

50
src/views/creators/DonationButtonBannerSlim.vue
View File

@@ -1,28 +1,32 @@
<template> <template>
<v-btn :style="{ <v-btn :style="{
backgroundColor: colorBorder, color: 'white', backgroundColor: brandingStore.value.colors.primary,
borderRadius: '8px', padding:'0px 24px', color: 'white',
display: 'flex', alignItems: 'center', borderRadius: '8px',
justifyContent: 'center' }" @click="openDonationDialog()"> padding:'0px 24px',
<div class="font-bold"> Je soutiens </div> display: 'flex',
alignItems: 'center',
justifyContent: 'center' }"
@click="openDonationDialog()">
<div class="font-bold">Je soutiens</div>
</v-btn> </v-btn>
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }"> <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2"> <div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens! Je Soutiens!
</div> </div>
<div class="flex flex-row align-center px-3"> <div class="flex flex-row align-center px-3">
<img <img
:src="creatorLogo" :src="brandingStore.value.images.logo"
alt="Profile Image" alt="Profile Image"
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${colorAccent}` }"> :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div> <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
@@ -53,7 +57,8 @@
clearable clearable
></v-textarea> ></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }" <v-btn variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
@click="goPay()" class="w-full mt-5"> @click="goPay()" class="w-full mt-5">
Envoyez Envoyez
</v-btn> </v-btn>
@@ -71,33 +76,21 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn> <v-btn block class="ma-auto" style="width: 200px;" @click="closeDialog()">Annuler</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</template> </template>
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js'; import {loadStripe} from '@stripe/stripe-js';
import {computed, onMounted, ref} from 'vue'; import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
colorBorder: {required: true},
colorAccent: {required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {required: true},
iconColorClass: {default: 'text-black'}
});
const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)
const donationModal = ref(false); const donationModal = ref(false);
@@ -148,6 +141,7 @@ function closeDialog() {
checkout.destroy(); checkout.destroy();
} }
} }
async function goPay() { async function goPay() {
isPaymentDialogActive.value = true; isPaymentDialogActive.value = true;

48
src/views/creators/FollowButton.vue
View File

@@ -1,27 +1,22 @@
<script setup> <script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue"; import {computed, ref} from "vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
creator: {type: Object, required: true},
backgroundColor: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
const subscriptionStore = useSubscriptionStore(); const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id)); const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
function subscribeToCreator() { function subscribeToCreator() {
subscriptionStore.subscribeTo(props.creator.id); subscriptionStore.subscribeTo(brandingStore.value.id);
} }
// Référence pour contrôler l'affichage du modal // Référence pour contrôler l'affichage du modal
const showUnsubscribeModal = ref(false); const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() { function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(props.creator.id); subscriptionStore.unsubscribeFrom(brandingStore.value.id);
// Fermer le modal après désabonnement // Fermer le modal après désabonnement
showUnsubscribeModal.value = false; showUnsubscribeModal.value = false;
} }
@@ -33,7 +28,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: backgroundColor, backgroundColor: brandingStore.value.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px 0 0 8px', borderRadius: '8px 0 0 8px',
padding: '10px 24px', padding: '10px 24px',
@@ -50,17 +45,17 @@ function unsubscribeFromCreator() {
<template v-else> <template v-else>
<v-btn <v-btn
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: backgroundColor, backgroundColor: brandingStore.value.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px 0 0 8px', borderRadius: '8px 0 0 8px',
padding: '10px 24px', padding: '10px 24px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
transition: 'background-color 0.3s ease' transition: 'background-color 0.3s ease'
}" }"
@click="showUnsubscribeModal = true" @click="showUnsubscribeModal = true"
> >
@@ -70,7 +65,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500"> <v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl" <v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${creator.colors.menu}` }"> :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2"> <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center"> <div class="flex-1 text-center">
@@ -87,12 +82,13 @@ function unsubscribeFromCreator() {
</v-btn> </v-btn>
<v-btn class="flex-grow-1" <v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined" :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
variant="outlined"
@click="showUnsubscribeModal = false"> @click="showUnsubscribeModal = false">
<div :style="{ color: creator.colors.menu }">Non</div> <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>

10
src/views/creators/Rewards.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase" <div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}"> :style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
Récompenses Récompenses
</div> </div>
<div v-for="(item, index) in rewards" <div v-for="(item, index) in rewards"
class="my-1 text-white" class="my-1 text-white"
:key="index" :key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }"> :style="{ backgroundColor: brandingStore.value.colors.primary }">
<div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]"> <div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
{{ item.title }} {{ item.title }}
@@ -30,10 +30,10 @@
</template> </template>
<script setup> <script setup>
import {ref, computed} from 'vue'; import {ref} from 'vue';
import {useUserStore} from "@/stores/userStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
const userStore = useUserStore() const brandingStore = useBrandingStore()
const rewards = ref([ const rewards = ref([
{ {

30
src/views/creators/SubscribeButton.vue
View File

@@ -1,25 +1,22 @@
<script setup> <script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js"; import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue"; import {computed, ref} from "vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
creator: {type: Object, required: true}, const subscriptionStore = useSubscriptionStore()
backgroundColor: {required: true},
});
const subscriptionStore = useSubscriptionStore(); const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
function subscribeToCreator() { function subscribeToCreator() {
subscriptionStore.subscribeTo(props.creator.id); subscriptionStore.subscribeTo(brandingStore.value.id);
} }
// Référence pour contrôler l'affichage du modal // Référence pour contrôler l'affichage du modal
const showUnsubscribeModal = ref(false); const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() { function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(props.creator.id); subscriptionStore.unsubscribeFrom(brandingStore.value.id);
// Fermer le modal après désabonnement // Fermer le modal après désabonnement
showUnsubscribeModal.value = false; showUnsubscribeModal.value = false;
} }
@@ -31,7 +28,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: backgroundColor, backgroundColor: brandingStore.value.colors.secondary,
color: 'white', color: 'white',
borderRadius: '0 8px 8px 0', borderRadius: '0 8px 8px 0',
padding: '10px 24px', padding: '10px 24px',
@@ -42,7 +39,7 @@ function unsubscribeFromCreator() {
}" }"
@click="subscribeToCreator" @click="subscribeToCreator"
> >
{{ $t('subscribebutton.subscribe') }} {{ $t('subscribebutton.subscribe') }}
</v-btn> </v-btn>
</template> </template>
@@ -51,7 +48,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: backgroundColor, backgroundColor: brandingStore.value.colors.secondary,
color: 'white', color: 'white',
borderRadius: '0 8px 8px 0', borderRadius: '0 8px 8px 0',
padding: '10px 24px', padding: '10px 24px',
@@ -68,7 +65,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500"> <v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl" <v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${creator.colors.menu}` }"> :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2"> <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center"> <div class="flex-1 text-center">
@@ -83,11 +80,12 @@ function unsubscribeFromCreator() {
:style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }" :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
@click="unsubscribeFromCreator">Oui @click="unsubscribeFromCreator">Oui
</v-btn> </v-btn>
<v-btn class="flex-grow-1" <v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined" :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
variant="outlined"
@click="showUnsubscribeModal = false"> @click="showUnsubscribeModal = false">
<div :style="{ color: creator.colors.menu }">Non</div> <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

30
src/views/creators/SubscribeButtonSlim.vue
View File

@@ -1,28 +1,21 @@
<script setup> <script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue"; import {computed, ref} from "vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
creator: {type: Object, required: true},
colorBorder: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
const subscriptionStore = useSubscriptionStore(); const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id)); const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
function subscribeToCreator() { function subscribeToCreator() {
subscriptionStore.subscribeTo(props.creator.id); subscriptionStore.subscribeTo(brandingStore.value.id);
} }
const showUnsubscribeModal = ref(false); const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() { function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(props.creator.id); subscriptionStore.unsubscribeFrom(brandingStore.value.id);
showUnsubscribeModal.value = false; showUnsubscribeModal.value = false;
} }
</script> </script>
@@ -32,7 +25,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
class="mr-4" class="mr-4"
:style="{ :style="{
backgroundColor: colorBorder, backgroundColor: brandingStore.value.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px', borderRadius: '8px',
padding: '0px 24px', padding: '0px 24px',
@@ -51,7 +44,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
class="mr-4" class="mr-4"
:style="{ :style="{
backgroundColor: colorBorder, backgroundColor: brandingStore.value.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px', borderRadius: '8px',
padding: '0px 24px', padding: '0px 24px',
@@ -68,7 +61,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500"> <v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl" <v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${creator.colors.menu}` }"> :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2"> <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center"> <div class="flex-1 text-center">
@@ -85,9 +78,10 @@ function unsubscribeFromCreator() {
</v-btn> </v-btn>
<v-btn class="flex-grow-1" <v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined" :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
variant="outlined"
@click="showUnsubscribeModal = false"> @click="showUnsubscribeModal = false">
<div :style="{ color: creator.colors.menu }">Non</div> <div :style="{ color: brandingStore.value.colors.primary }">Non</div>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

15
src/views/creators/SubscriptionList.vue
View File

@@ -12,11 +12,12 @@ const subscriptionStore = useSubscriptionStore()
<RouterLink class="capitalize" :to="`/@${subscription.creatorName}`"> <RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">
<div class="flex items-center content-center font-sans font-semibold pt-2 "> <div class="flex items-center content-center font-sans font-semibold pt-2 ">
<img :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' " <img
alt="Profile Image" :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
class="rounded-full mx-2" alt="Profile Image"
width="32px" class="rounded-full mx-2"
height="32px"> width="32px"
height="32px">
{{ subscription.creatorName }} {{ subscription.creatorName }}
</div> </div>
@@ -26,9 +27,7 @@ const subscriptionStore = useSubscriptionStore()
</template> </template>
<template v-else> <template v-else>
<slot> <span>No subscriptions</span>
<span>No subscriptions</span>
</slot>
</template> </template>
</template> </template>

33
src/views/creators/banner/bannerlower/BannerActions.vue
View File

@@ -4,40 +4,21 @@ import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm
import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue"; import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue";
import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue"; import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
const props = defineProps({
creator: {type: Object, required: true}
});
const emits = defineEmits(['content-posted']);
function addContent(content) {
emits('content-posted', content);
}
</script> </script>
<template> <template>
<div> <div>
<banner-actions-sm class="d-sm-none" <banner-actions-sm class="d-sm-none"
:creator="creator"
@content-posted="addContent"
></banner-actions-sm> ></banner-actions-sm>
<div class="d-none d-sm-flex d-md-none"> <banner-actions-md class="d-none d-sm-flex d-md-none"
<banner-actions-md :creator="creator" ></banner-actions-md>
@content-posted="addContent"
></banner-actions-md>
</div>
<div class="d-none d-md-flex d-lg-none"> <banner-actions-lg class="d-none d-md-flex d-lg-none"
<banner-actions-lg :creator="creator" ></banner-actions-lg>
@content-posted="addContent"
></banner-actions-lg>
</div>
<div class="d-none d-lg-flex"> <banner-actions-xl class="d-none d-lg-flex"
<banner-actions-xl :creator="creator" ></banner-actions-xl>
@content-posted="addContent"
></banner-actions-xl>
</div>
</div> </div>
</template> </template>

65
src/views/creators/banner/bannerlower/BannerActionsLg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="relative w-full"> <div class="relative w-full">
<div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1" <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }"> :style="{ backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
<!-- Logo & User Info --> <!-- Logo & User Info -->
<div class="relative z-20"> <div class="relative z-20">
@@ -9,30 +9,21 @@
<div> <div>
<img <img
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32" class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}" :style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
/> />
</div> </div>
<div class="flex flex-row ml-auto space-x-2.5"> <div class="flex flex-row ml-auto space-x-2.5">
<donation-button-banner <donation-button-banner></donation-button-banner>
:color-border="creator.colors.menu"
:color-accent="creator.colors.accent"
:creator-id="creator.id"
:creator-name="creator.name"
:creator-logo="creator.images.logo"
iconColorClass="text-white">
</donation-button-banner>
<div class="flex flex-column"> <div class="flex flex-column">
<!-- Bouton abonnement affiché seulement si non abonné --> <!-- Bouton abonnement affiché seulement si non abonné -->
<subscribe-button <subscribe-button></subscribe-button>
:creator="creator"
:color-border="creator.colors.menu">
</subscribe-button>
<div class="font-bold text-white flex justify-end mr-5 py-1.5"> <div class="font-bold text-white flex justify-end mr-5 py-1.5">
{{ creator.subscriberCount }} {{ $t('banner.subscription') }} {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
</div> </div>
</div> </div>
</div> </div>
@@ -42,36 +33,26 @@
<!-- Conteneur sticky --> <!-- Conteneur sticky -->
<div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20" <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }"> :style="{ backgroundColor: brandingStore.value.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
<div class="shadow-3xl flex flex-row items-center py-2 px-2"> <div class="shadow-3xl flex flex-row items-center py-2 px-2">
<div> <div>
<img <img
class="max-w-[40px] max-h-[40px] ml-5 rounded-full" class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}" :style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
/> />
</div> </div>
<div class="ml-5 text-white"> <div class="ml-5 text-white">
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p> <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
</div> </div>
<div class="ml-auto flex flex-row space-x-2.5 mr-3 "> <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
<donation-button-banner-slim <donation-button-banner-slim></donation-button-banner-slim>
class=""
:color-border="creator.colors.menu"
:color-accent="creator.colors.accent"
:creator-id="creator.id"
:creator-name="creator.name"
:creator-logo="creator.images.logo"
>
</donation-button-banner-slim>
<!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné --> <!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
<subscribe-button-slim <subscribe-button-slim
v-if="!isSubscribed" v-if="!isSubscribed">
:creator="creator"
:color-border="creator.colors.menu">
</subscribe-button-slim> </subscribe-button-slim>
</div> </div>
@@ -82,21 +63,19 @@
<script setup> <script setup>
import { ref, onMounted, computed } from 'vue'; import {ref, onMounted, computed} from 'vue';
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
import SubscribeButton from "@/views/creators/SubscribeButton.vue"; import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue"; import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue"; import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue"; import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
creator: { type: Object, required: true } const subscriptionStore = useSubscriptionStore()
});
const subscriptionStore = useSubscriptionStore();
// Calculer si l'utilisateur est abonné // Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id)); const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(brandingStore.value.id));
const isSticky = ref(false); const isSticky = ref(false);
const mainContainer = ref(null); const mainContainer = ref(null);
@@ -106,7 +85,7 @@ onMounted(() => {
([entry]) => { ([entry]) => {
isSticky.value = !entry.isIntersecting; isSticky.value = !entry.isIntersecting;
}, },
{ threshold: 0 } {threshold: 0}
); );
if (mainContainer.value) { if (mainContainer.value) {

25
src/views/creators/banner/bannerlower/BannerActionsMd.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div class="rounded-b-2xl" <div class="rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }"> :style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
<div> <div>
<!-- Logo-Name-Followers --> <!-- Logo-Name-Followers -->
@@ -9,32 +9,26 @@
<div> <div>
<img <img
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3" class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}" :style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
/> />
</div> </div>
<div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40"> <div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
<div class="flex justify-between"> <div class="flex justify-between">
<div> <div>
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p> <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div> <div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div> </div>
</div> </div>
<div class="flex justify-between mt-2"> <div class="flex justify-between mt-2">
<subscribe-button :creator="creator"></subscribe-button> <subscribe-button></subscribe-button>
<div class="flex space-x-2"> <div class="flex space-x-2">
<donation-button iconColorClass="text-white"
<donation-button :color-border="creator.colors.menu"
:color-accent="creator.colors.accent"
:creator-id="creator.id"
:creator-name="creator.name"
:creator-logo="creator.images.logo"
iconColorClass="text-white"
></donation-button> ></donation-button>
</div> </div>
</div> </div>
@@ -50,9 +44,8 @@
<script setup> <script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue"; import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue"; import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
creator: {type: Object, required: true}
});
</script> </script>

44
src/views/creators/banner/bannerlower/BannerActionsSm.vue
View File

@@ -1,27 +1,14 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div <div
:style="{ :style="{backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.value.colors.accent}`}">
backgroundColor: creator.colors.bannerBottom || '#A30E79',
borderBottom: `2px solid ${creator.colors.accent || '#000000'}`
}">
<div> <div>
<!-- Logo-Name-Followers--> <!-- Logo-Name-Followers-->
<div class="flex flex-row relative z-20"> <div class="flex flex-row relative z-20">
<div>
<!-- bug space-->
<!-- <img-->
<!-- -->
<!-- class="rounded-full border-solid border-2 -mt-4 max-w-[80px] h-auto ml-2"-->
<!-- :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
<!-- alt="Profile Picture"-->
<!-- :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
<!-- />-->
</div>
<div class="flex flex-column text-white capitalize px-2 mt-1"> <div class="flex flex-column text-white capitalize px-2 mt-1">
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p> <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div> <div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div> </div>
</div> </div>
@@ -30,21 +17,11 @@
<div class="flex flex-row items-center justify-between w-full px-4"> <div class="flex flex-row items-center justify-between w-full px-4">
<div> <div>
<subscribe-button :creator="creator" <subscribe-button></subscribe-button>
></subscribe-button>
</div> </div>
<div class="flex ml-auto space-x-4"> <div class="flex ml-auto space-x-4">
<publish-content-button :creator="creator" <donation-button iconColorClass="text-white"
@content-posted="addContent"
></publish-content-button>
<donation-button :color-border="creator.colors.menu"
:color-accent="creator.colors.accent"
:creator-id="creator.id"
:creator-name="creator.name"
:creator-logo="creator.images.logo"
iconColorClass="text-white"
></donation-button> ></donation-button>
</div> </div>
@@ -58,16 +35,9 @@
<script setup> <script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue"; import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue"; import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({ const brandingStore = useBrandingStore()
creator: {type: Object, required: true}
});
const emits = defineEmits(['content-posted']);
function addContent(content) {
emits('content-posted', content);
}
</script> </script>

81
src/views/creators/banner/bannerlower/BannerActionsXl.vue
View File

@@ -4,7 +4,7 @@
<div class="relative w-full shadow-xl rounded-2xl"> <div class="relative w-full shadow-xl rounded-2xl">
<div ref="mainContainer" class="rounded-b-2xl shadow-2xl" <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
:style="{ backgroundColor: creator.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"> :style="{ backgroundColor: brandingStore.value.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
<div> <div>
<div> <div>
@@ -14,16 +14,16 @@
<div> <div>
<img <img
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10" class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: creator.colors.secondary, height: '190px'}" :style="{ borderColor: brandingStore.value.colors.secondary, height: '190px'}"
/> />
</div> </div>
<div class="ml-64 text-white w-25 min-w-60"> <div class="ml-64 text-white w-25 min-w-60">
<p class="capitalize text-2xl mt-1">{{ creator.name }}</p> <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
<p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
<div class="text-xs"> <div class="text-xs">
105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }} 105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
</div> </div>
</div> </div>
</div> </div>
@@ -50,29 +50,23 @@
</div> </div>
<!-- Follow and Subscribe Buttons --> <!-- Follow and Subscribe Buttons -->
<div class="flex flex-row space-x-1 justify-center mt-3 mb-2"> <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
<follow-button <follow-button></follow-button>
:creator="creator" <subscribe-button></subscribe-button>
:background-color="creator.colors.secondary">
</follow-button>
<subscribe-button
:creator="creator"
:background-color="creator.colors.secondary">
</subscribe-button>
</div> </div>
</div> </div>
</div> </div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white" <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
:style="{ backgroundColor: creator.colors.background}"> :style="{ backgroundColor: brandingStore.value.colors.background}">
<div class="w-96 h-28 flex flex-col"> <div class="w-96 h-28 flex flex-col">
<!-- Section 3 et 4 - Prend 2/3 de la hauteur --> <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
<div class="flex flex-row flex-grow-[2] min-h-20"> <div class="flex flex-row flex-grow-[2] min-h-20">
<div class="rounded-tl-md w-1/2 flex items-center justify-center" <div class="rounded-tl-md w-1/2 flex items-center justify-center"
:style="{ backgroundColor: creator.colors.primary, opacity: 0.20 }"> :style="{ backgroundColor: brandingStore.value.colors.primary, opacity: 0.20 }">
</div> </div>
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl" <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: creator.colors.secondary}"> :style="{ backgroundColor: brandingStore.value.colors.secondary}">
<div class="absolute left-1"> <div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5"> <div class="flex flex-row items-center justify-center space-x-5">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@@ -87,11 +81,11 @@
<div class="flex flex-col items-center space-y-2"> <div class="flex flex-col items-center space-y-2">
<v-btn <v-btn
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }" :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">+ variant="tonal">+
</v-btn> </v-btn>
<v-btn <v-btn
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }" :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">- variant="tonal">-
</v-btn> </v-btn>
</div> </div>
@@ -108,7 +102,7 @@
</div> </div>
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md" <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: creator.colors.secondary, opacity: 0.80 }"> :style="{ backgroundColor: brandingStore.value.colors.secondary, opacity: 0.80 }">
<textarea <textarea
rows="1" rows="1"
@@ -126,18 +120,18 @@
</div> </div>
<div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center" <div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: creator.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"> :style="{ backgroundColor: brandingStore.value.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="flex justify-evenly w-full"> <div class="flex justify-evenly w-full">
<RouterLink class="nav-button" <RouterLink class="nav-button"
:to="`/@${creator.name}`"> :to="`/@${brandingStore.value.name}`">
Présentation Présentation
</RouterLink> </RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700" <RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/news`"> :to="`/@${brandingStore.value.name}/news`">
Actualité Actualité
</RouterLink> </RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700" <RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/content`"> :to="`/@${brandingStore.value.name}/content`">
Exclusivité Exclusivité
</RouterLink> </RouterLink>
</div> </div>
@@ -161,69 +155,66 @@
import {ref, onMounted} from 'vue'; import {ref, onMounted} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue"; import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import FollowButton from "@/views/creators/FollowButton.vue"; import FollowButton from "@/views/creators/FollowButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
function GetSocialsUrls() { function GetSocialsUrls() {
const socials = []; const socials = [];
if (props.creator.socials.facebookUrl !== null) { if (brandingStore.value.socials.facebookUrl !== null) {
socials.push({ socials.push({
icon: "mdi-facebook", icon: "mdi-facebook",
url: props.creator.socials.facebookUrl url: brandingStore.value.socials.facebookUrl
}) })
} }
if (props.creator.socials.instagramUrl !== null) { if (brandingStore.value.socials.instagramUrl !== null) {
socials.push({ socials.push({
icon: "mdi-instagram", icon: "mdi-instagram",
url: props.creator.socials.instagramUrl url: brandingStore.value.socials.instagramUrl
}) })
} }
if (props.creator.socials.xUrl !== null) { if (brandingStore.value.socials.xUrl !== null) {
socials.push({ socials.push({
icon: "mdi-twitter", icon: "mdi-twitter",
url: props.creator.socials.xUrl url: brandingStore.value.socials.xUrl
}) })
} }
if (props.creator.socials.linkedInUrl !== null) { if (brandingStore.value.socials.linkedInUrl !== null) {
socials.push({ socials.push({
icon: 'mdi-linkedin', icon: 'mdi-linkedin',
url: props.creator.socials.linkedInUrl url: brandingStore.value.socials.linkedInUrl
}) })
} }
if (props.creator.socials.tikTokUrl !== null) { if (brandingStore.value.socials.tikTokUrl !== null) {
socials.push({ socials.push({
icon: '/images/socials/tiktok-white.png', icon: '/images/socials/tiktok-white.png',
url: props.creator.socials.tikTokUrl url: brandingStore.value.socials.tikTokUrl
}) })
} }
if (props.creator.socials.youtubeUrl !== null) { if (brandingStore.value.socials.youtubeUrl !== null) {
socials.push({ socials.push({
icon: 'mdi-youtube', icon: 'mdi-youtube',
url: props.creator.socials.youtubeUrl url: brandingStore.value.socials.youtubeUrl
}) })
} }
if (props.creator.socials.redditUrl !== null) { if (brandingStore.value.socials.redditUrl !== null) {
socials.push({ socials.push({
icon: 'mdi-reddit', icon: 'mdi-reddit',
url: props.creator.socials.redditUrl url: brandingStore.value.socials.redditUrl
}) })
} }
if (props.creator.socials.websiteUrl !== null) { if (brandingStore.value.socials.websiteUrl !== null) {
socials.push({ socials.push({
icon: 'mdi-web', icon: 'mdi-web',
url: props.creator.socials.websiteUrl url: brandingStore.value.socials.websiteUrl
}) })
} }
return socials; return socials;
} }
const props = defineProps({
creator: {type: Object, required: true}
});
// Calculer si l'utilisateur est abonné // Calculer si l'utilisateur est abonné
const isSticky = ref(false); const isSticky = ref(false);
const mainContainer = ref(null); const mainContainer = ref(null);

20
src/views/main/Header.vue
View File

@@ -97,10 +97,10 @@
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<div v-bind="props" class="flex align-center font-sans py-1 px-2 rounded-lg hover:bg-gray-100"> <div v-bind="props" class="flex align-center font-sans py-1 px-2 rounded-lg hover:bg-gray-100">
<span class="max-w-xs hidden md:block capitalize"> <span class="max-w-xs hidden md:block capitalize">
{{ userStore.alias }} {{ userProfileStore.alias }}
</span> </span>
<img <img
:src="userStore.portraitUrl" :src="userProfileStore.portraitUrl"
alt="Profile Image" alt="Profile Image"
class="ml-2 rounded-full" class="ml-2 rounded-full"
width="32" width="32"
@@ -119,13 +119,13 @@
</template> </template>
<template v-else> <template v-else>
<v-list-item v-if="userStore.creator && Object.keys(userStore.creator).length > 0" class="nav-button"> <v-list-item v-if="creatorProfileStore.value && Object.keys(creatorProfileStore.value).length > 0" class="nav-button">
<router-link :to="`/@${userStore.creator.name}`"> <router-link :to="`/@${creatorProfileStore.value.name}`">
<v-btn class="w-100" variant="plain">@{{ userStore.creator.name }}</v-btn> <v-btn class="w-100" variant="plain">@{{ creatorProfileStore.value.name }}</v-btn>
</router-link> </router-link>
</v-list-item> </v-list-item>
<v-list-item v-if="!userStore.hasCreator" class="nav-button"> <v-list-item v-if="!creatorProfileStore.hasCreator" class="nav-button">
<router-link to="/profile?target=CreatorPage"> <router-link to="/profile?target=CreatorPage">
<v-btn class="w-100" variant="plain">Activer votre page</v-btn> <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
</router-link> </router-link>
@@ -158,12 +158,16 @@
import { ref, onBeforeUnmount, onBeforeMount, watch } from "vue"; import { ref, onBeforeUnmount, onBeforeMount, watch } from "vue";
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useSideBarStore } from '@/stores/sideBarStore.js'; import { useSideBarStore } from '@/stores/sideBarStore.js';
import { useUserStore } from "@/stores/userStore.js";
import { useAuthStore } from "@/stores/authStore.js"; import { useAuthStore } from "@/stores/authStore.js";
import { useDisplay } from 'vuetify'; import { useDisplay } from 'vuetify';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
const authStore = useAuthStore(); const authStore = useAuthStore();
const userStore = useUserStore(); const userProfileStore = useUserProfileStore();
const creatorProfileStore = useCreatorProfileStore();
const sideBarStore = useSideBarStore(); const sideBarStore = useSideBarStore();
const { smAndDown } = useDisplay(); const { smAndDown } = useDisplay();

3
src/views/main/SideBar.vue
View File

@@ -63,9 +63,6 @@ initializeLocale();
</div> </div>
<subscription-list> <subscription-list>
<template v-slot:default>
<span v-if="subscriptionListIsEmpty">Aucun abonnement</span>
</template>
</subscription-list> </subscription-list>
</div> </div>

8
src/views/main/Wallet.vue
View File

@@ -47,9 +47,9 @@
<script async setup> <script async setup>
import { onBeforeMount, ref, computed } from 'vue'; import { onBeforeMount, ref, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import {useUserStore} from "@/stores/userStore.js"; import {useUserProfileStore} from "@/stores/userProfileStore.js";
const userStore = useUserStore(); const userProfileStore = useUserProfileStore();
const router = useRouter(); const router = useRouter();
const userTransactions = ref([]); const userTransactions = ref([]);
@@ -72,8 +72,8 @@ const transactionCount = computed(() => userTransactions.value.length);
onBeforeMount( () => { onBeforeMount( () => {
try { try {
userTransactions.value = userStore.user.userTransactions; userTransactions.value = userProfileStore.value.userTransactions;
totalBalance.value = userStore.user.totalBalance; totalBalance.value = userProfileStore.value.totalBalance;
} catch (error) { } catch (error) {
navigateToHome(); navigateToHome();
} }

11
src/views/messages/MessageList.vue
View File

@@ -6,10 +6,11 @@
class="justify-items-center" class="justify-items-center"
> >
<template v-for="message in messages" :key="message"> <template v-for="message in messages" :key="message">
<message :message="message" <div class="border-b">
@message-deleted="(messageId) => handleDeleteMessage(messageId)" <message :message="message"
class="border-b" @message-deleted="(messageId) => handleDeleteMessage(messageId)"
></message> ></message>
</div>
</template> </template>
<template v-slot:load-more="{ props }"> <template v-slot:load-more="{ props }">
@@ -89,7 +90,7 @@ async function fetchMessages({done, page_size = 10}) {
} }
} }
function handleDeleteMessage(message){ function handleDeleteMessage(message) {
messages.value = messages.value.filter(item => item.id !== message.id); messages.value = messages.value.filter(item => item.id !== message.id);
} }
</script> </script>

19
src/views/messages/PostMessage.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex flex-row items-center "> <div class="flex flex-row items-center ">
<img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px"> <img :src="userProfileStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
<div class="flex-grow"> <div class="flex-grow">
<div class="flex flex-row bg-gray-100 rounded-2xl"> <div class="flex flex-row bg-gray-100 rounded-2xl">
<v-textarea <v-textarea
@@ -15,7 +15,7 @@
maxlength="1024" maxlength="1024"
class="pr-1 ml-6 flex-grow" class="pr-1 ml-6 flex-grow"
@keydown.enter.prevent="publish" @keydown.enter.prevent="publish"
> >
</v-textarea> </v-textarea>
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
@@ -36,14 +36,17 @@
</div> </div>
</div> </div>
<must-be-logged v-model="loginModal" message="Vous devez être connecté pour ajouter un commentaire."></must-be-logged> <must-be-logged v-model="loginModal"
message="Vous devez être connecté pour ajouter un commentaire."
></must-be-logged>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue' import {ref} from 'vue'
import {v7} from 'uuid' import {v7} from 'uuid'
import {useClient} from '@/plugins/api.js' import {useClient} from '@/plugins/api.js'
import {useUserStore} from "@/stores/userStore.js" import {useUserProfileStore} from "@/stores/userProfileStore.js"
import {useAuthStore} from "@/stores/authStore.js" import {useAuthStore} from "@/stores/authStore.js"
import MustBeLogged from "@/views/MustBeLogged.vue"; import MustBeLogged from "@/views/MustBeLogged.vue";
@@ -59,7 +62,7 @@ const emits = defineEmits(['message-posted'])
const loginModal = ref(false); const loginModal = ref(false);
const client = useClient() const client = useClient()
const value = ref("") const value = ref("")
const userStore = useUserStore() const userProfileStore = useUserProfileStore()
const authStore = useAuthStore() const authStore = useAuthStore()
const publish = async () => { const publish = async () => {
@@ -76,9 +79,9 @@ const publish = async () => {
emits('message-posted', { emits('message-posted', {
"id": messageId, "id": messageId,
"subjectId": props.subjectId, "subjectId": props.subjectId,
"createdBy": userStore.user.id, "createdBy": userProfileStore.value.id,
"createdByName": userStore.alias, "createdByName": userProfileStore.alias,
"createdByPortraitUrl": userStore.portraitUrl, "createdByPortraitUrl": userProfileStore.portraitUrl,
"createdAt": new Date(Date.now()).toISOString(), "createdAt": new Date(Date.now()).toISOString(),
"value": value.value, "value": value.value,
"parentId": null "parentId": null

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 class="value">Un portrait vous permet de personnaliser votre profil</span>
<span> <span>
<img <img
:src="userStore.user.portraitUrl" :src="userProfileStore.value.portraitUrl"
alt="Profile Image" alt="Profile Image"
class="rounded-full" class="rounded-full"
width="48px" width="48px"
@@ -30,7 +30,7 @@
class="editableValue" class="editableValue"
@click="openEditFullname"> @click="openEditFullname">
<span class="label">{{ $t('personnalinformation.fullname') }}</span> <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> <span><v-icon>mdi-chevron-right</v-icon></span>
</button> </button>
@@ -38,7 +38,7 @@
class="editableValue" class="editableValue"
@click="openEditAlias"> @click="openEditAlias">
<span class="label">{{ $t('personnalinformation.alias') }}</span> <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> <span><v-icon>mdi-chevron-right</v-icon></span>
</button> </button>
@@ -46,7 +46,7 @@
class="editableValue" class="editableValue"
@click="openEditBirthday"> @click="openEditBirthday">
<span class="label">{{ $t('personnalinformation.dob') }}</span> <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> <span><v-icon>mdi-chevron-right</v-icon></span>
</button> </button>
@@ -62,7 +62,7 @@
class="editableValue" class="editableValue"
@click="openEditEmail"> @click="openEditEmail">
<span class="label">{{ $t('personnalinformation.email') }}</span> <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> <span><v-icon>mdi-chevron-right</v-icon></span>
</button> </button>
@@ -70,7 +70,7 @@
class="editableValue" class="editableValue"
@click="openEditPhone"> @click="openEditPhone">
<span class="label">{{ $t('personnalinformation.phone') }}</span> <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> <span><v-icon>mdi-chevron-right</v-icon></span>
</button> </button>
</v-card> </v-card>
@@ -85,7 +85,7 @@
class="editableValue" class="editableValue"
@click="openEditAddress"> @click="openEditAddress">
<span class="label">{{ $t('personnalinformation.home') }}</span> <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> <span><v-icon>mdi-chevron-right</v-icon></span>
</button> </button>
</v-card> </v-card>
@@ -94,7 +94,7 @@
<!-- Modal --> <!-- Modal -->
<v-dialog v-model="dialogEditPortraitShown" max-width="600px"> <v-dialog v-model="dialogEditPortraitShown" max-width="600px">
<portrait-dialog <portrait-dialog
:portrait-url="userStore.user.portraitUrl" :portrait-url="userProfileStore.value.portraitUrl"
@close="handleCloseEditPortrait" @close="handleCloseEditPortrait"
@save="handleSaveEditPortrait" @save="handleSaveEditPortrait"
></portrait-dialog> ></portrait-dialog>
@@ -102,8 +102,8 @@
<v-dialog v-model="dialogEditFullnameShown" max-width="600px"> <v-dialog v-model="dialogEditFullnameShown" max-width="600px">
<fullname-dialog <fullname-dialog
:firstname="userStore.user.firstname" :firstname="userProfileStore.value.firstname"
:lastname="userStore.user.lastname" :lastname="userProfileStore.value.lastname"
@close="handleCloseEditFullname" @close="handleCloseEditFullname"
@save="handleSaveEditFullname" @save="handleSaveEditFullname"
></fullname-dialog> ></fullname-dialog>
@@ -111,7 +111,7 @@
<v-dialog v-model="dialogEditAliasShown" max-width="600px"> <v-dialog v-model="dialogEditAliasShown" max-width="600px">
<alias-dialog <alias-dialog
:alias="userStore.user.alias" :alias="userProfileStore.value.alias"
@close="handleCloseEditAlias" @close="handleCloseEditAlias"
@save="handleSaveEditAlias" @save="handleSaveEditAlias"
></alias-dialog> ></alias-dialog>
@@ -119,7 +119,7 @@
<v-dialog v-model="dialogEditBirthdayShown" max-width="600px"> <v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
<birthday-dialog <birthday-dialog
:birth-date="userStore.user.birthDate" :birth-date="userProfileStore.value.birthDate"
@close="handleCloseEditBirthday" @close="handleCloseEditBirthday"
@save="handleSaveEditBirthday" @save="handleSaveEditBirthday"
></birthday-dialog> ></birthday-dialog>
@@ -127,7 +127,7 @@
<v-dialog v-model="dialogEditPhoneShown" max-width="600px"> <v-dialog v-model="dialogEditPhoneShown" max-width="600px">
<phone-dialog <phone-dialog
:phone="userStore.user.phoneNumber" :phone="userProfileStore.value.phoneNumber"
@close="handleCloseEditPhone" @close="handleCloseEditPhone"
@save="handleSaveEditPhone" @save="handleSaveEditPhone"
></phone-dialog> ></phone-dialog>
@@ -135,7 +135,7 @@
<v-dialog v-model="dialogEditEmailShown" max-width="600px"> <v-dialog v-model="dialogEditEmailShown" max-width="600px">
<email-dialog <email-dialog
:email="userStore.user.email" :email="userProfileStore.value.email"
@close="handleCloseEditEmail" @close="handleCloseEditEmail"
@save="handleSaveEditEmail" @save="handleSaveEditEmail"
></email-dialog> ></email-dialog>
@@ -143,7 +143,7 @@
<v-dialog v-model="dialogEditAddressShown" max-width="600px"> <v-dialog v-model="dialogEditAddressShown" max-width="600px">
<address-dialog <address-dialog
:address="userStore.user.address" :address="userProfileStore.value.address"
@close="handleCloseEditAddress" @close="handleCloseEditAddress"
@save="handleSaveEditAddress" @save="handleSaveEditAddress"
></address-dialog> ></address-dialog>
@@ -159,9 +159,10 @@ import BirthdayDialog from "@/views/profile/account/BirthdayDialog.vue";
import AliasDialog from "@/views/profile/account/AliasDialog.vue"; import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue"; import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import PortraitDialog from "@/views/profile/account/PortraitDialog.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 // ### Portrait
@@ -176,7 +177,7 @@ function handleCloseEditPortrait() {
} }
function handleSaveEditPortrait(portraitData) { function handleSaveEditPortrait(portraitData) {
userStore.changePortrait(portraitData) userProfileStore.changePortrait(portraitData)
dialogEditPortraitShown.value = false dialogEditPortraitShown.value = false
} }
@@ -193,7 +194,7 @@ function handleCloseEditFullname() {
} }
function handleSaveEditFullname(firstname, lastname) { function handleSaveEditFullname(firstname, lastname) {
userStore.changeFullname(firstname, lastname) userProfileStore.changeFullname(firstname, lastname)
dialogEditFullnameShown.value = false dialogEditFullnameShown.value = false
} }
@@ -210,7 +211,7 @@ function handleCloseEditAlias() {
} }
function handleSaveEditAlias(alias) { function handleSaveEditAlias(alias) {
userStore.changeAlias(alias) userProfileStore.changeAlias(alias)
dialogEditAliasShown.value = false dialogEditAliasShown.value = false
} }
@@ -227,7 +228,7 @@ function handleCloseEditBirthday() {
} }
function handleSaveEditBirthday(birthday) { function handleSaveEditBirthday(birthday) {
userStore.changeBirthday(birthday) userProfileStore.changeBirthday(birthday)
dialogEditBirthdayShown.value = false dialogEditBirthdayShown.value = false
} }
@@ -244,7 +245,7 @@ function handleCloseEditPhone() {
} }
function handleSaveEditPhone(phone) { function handleSaveEditPhone(phone) {
userStore.changePhone(phone) userProfileStore.changePhone(phone)
dialogEditPhoneShown.value = false dialogEditPhoneShown.value = false
} }
@@ -261,7 +262,7 @@ function handleCloseEditEmail() {
} }
function handleSaveEditEmail(email) { function handleSaveEditEmail(email) {
userStore.changeEmail(email) userProfileStore.changeEmail(email)
dialogEditEmailShown.value = false dialogEditEmailShown.value = false
} }
@@ -277,7 +278,7 @@ function handleCloseEditAddress() {
} }
function handleSaveEditAddress(address) { function handleSaveEditAddress(address) {
userStore.changeAddress(address) userProfileStore.changeAddress(address)
dialogEditAddressShown.value = false dialogEditAddressShown.value = false
} }
</script> </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> <script setup>
import XIcon from '@/assets/icons/x.svg' import XIcon from '@/assets/icons/x.svg'
import {computed, ref} from 'vue' import {computed, ref} from 'vue'
import {useUserStore} from "@/stores/userStore.js"
import Socials from './Socials.vue' import Socials from './Socials.vue'
import BannerPicker from './BannerPicker.vue' import BannerPicker from './BannerPicker.vue'
import ColorsPicker from './ColorsPicker.vue' import ColorsPicker from './ColorsPicker.vue'
import LogoPicker from "./LogoPicker.vue" import LogoPicker from "./LogoPicker.vue"
import About from "./About.vue";
import CreateCreator from "./CreateCreator.vue"; import CreateCreator from "./CreateCreator.vue";
import {useClient} from "@/plugins/api.js"; 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 colorBannerTop = computed(() => creatorProfileStore.value.colors.bannerTop || '#a0c0f0')
const colorBannerBottom = computed(() => userStore.creator.colors.bannerBottom || '#a0c0f0') const colorBannerBottom = computed(() => creatorProfileStore.value.colors.bannerBottom || '#a0c0f0')
const colorAccent = computed(() => userStore.creator.colors.accent || '#a0c0f0') const colorAccent = computed(() => creatorProfileStore.value.colors.accent || '#a0c0f0')
const colorMenu = computed(() => userStore.creator.colors.menu || '#a0c0f0') const colorMenu = computed(() => creatorProfileStore.value.colors.menu || '#a0c0f0')
const imageBanner = computed(() => userStore.creator.images.banner || '/images/placeholders/banner.png') const imageBanner = computed(() => creatorProfileStore.value.images.banner || '/images/placeholders/banner.png')
const imageLogo = computed(() => userStore.creator.images.logo || '/images/placeholders/logo.png') const imageLogo = computed(() => creatorProfileStore.value.images.logo || '/images/placeholders/logo.png')
const dialog = ref(false); const dialog = ref(false);
const currentComponent = ref('') const currentComponent = ref('')
@@ -28,20 +28,20 @@ const componentsMap = {
LogoPicker, LogoPicker,
Socials, Socials,
ColorsPicker, ColorsPicker,
About,
CreateCreator CreateCreator
}; };
async function requestAccept(creatorName) { async function requestAccept(creatorName) {
const userProfileStore = useUserProfileStore()
const client = useClient() const client = useClient()
const response = await client.post( const response = await client.post(
'/api/creators', '/api/creators',
{ {
'creatorId': userStore.user.id, 'creatorId': userProfileStore.value.id,
'name': creatorName 'name': creatorName
}) })
if (response.status >= 200 && response.status < 300) { if (response.status >= 200 && response.status < 300) {
await userStore.fetchCurrentCreatorProfile() await creatorProfileStore.fetchCurrentCreatorProfile()
dialog.value = false dialog.value = false
} else { } else {
console.log(`An issue while creating the creator: ${response.statusText}`) 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 :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
<v-card-text> <v-card-text>
<component :is="currentComponent" <component :is="currentComponent"
:creator="userStore.creator" :creator="creatorProfileStore.value"
:colorName="colorToEdit" :colorName="colorToEdit"
@closeRequested="closeDialog" @closeRequested="closeDialog"
@requestAccept="requestAccept" @requestAccept="requestAccept"
@@ -88,7 +88,7 @@ const closeDialog = () => {
{{ $t('creatorinfopage.pageinformation') }} {{ $t('creatorinfopage.pageinformation') }}
</h1> </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"> <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"> 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-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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </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>
</div> </div>
@@ -196,7 +176,7 @@ const closeDialog = () => {
@click="openDialog('Socials')" @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"> 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="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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -206,7 +186,7 @@ const closeDialog = () => {
@click="openDialog('Socials')" @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"> 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-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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -218,7 +198,7 @@ const closeDialog = () => {
<span class="flex-none pa-2 w-6 h-6 text-left"> <span class="flex-none pa-2 w-6 h-6 text-left">
<XIcon></XIcon> <XIcon></XIcon>
</span> </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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -228,7 +208,7 @@ const closeDialog = () => {
@click="openDialog('Socials')" @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 "> 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="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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -240,7 +220,7 @@ const closeDialog = () => {
<span class="flex-none pa-2 min-w-32 text-left"> <span class="flex-none pa-2 min-w-32 text-left">
<XIcon class="w-5 h-5"></XIcon> <XIcon class="w-5 h-5"></XIcon>
</span> </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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -250,7 +230,7 @@ const closeDialog = () => {
@click="openDialog('Socials')" @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 "> 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="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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -260,7 +240,7 @@ const closeDialog = () => {
@click="openDialog('Socials')" @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 "> 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="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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
@@ -270,7 +250,7 @@ const closeDialog = () => {
@click="openDialog('Socials')" @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 "> 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="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"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>