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

Cleanup profile

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-08 09:49:52 -05:00
parent 22b0f23a07
commit d1d73181f5
9 changed files with 326 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
frontend/src/views/profile/ProfilePage.vue
View File

@@ -1,16 +1,284 @@
<template>
<div class="flex flex-col gap-8 p-8">
<account-page></account-page>
<creator-page></creator-page>
</div>
<!-- Modal -->
<v-dialog v-model="dialogEditFullnameShown" max-width="800px">
<fullname-dialog
:firstname="userProfileStore.user.firstname"
:lastname="userProfileStore.user.lastname"
@close="handleCloseEditFullname"
@save="handleSaveEditFullname"
></fullname-dialog>
</v-dialog>
<v-dialog v-model="dialogEditAliasShown" max-width="800px">
<alias-dialog
:alias="userProfileStore.user.alias"
@close="handleCloseEditAlias"
@save="handleSaveEditAlias"
></alias-dialog>
</v-dialog>
<!-- Creator Section (integrated directly) -->
<v-dialog v-model="dialog" max-width="800px">
<div class="card">
<component
:is="currentComponent"
:creator="creatorProfileStore.creator"
@closeRequested="closeDialog"
></component>
</div>
</v-dialog>
<div class="space-y-6 p-4">
<div class="card">
<div class="title">
{{ $t('personnalinformation.informations') }}
</div>
<div class="content">
<button
class="action"
@click="openEditFullname">
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
<span class="value">{{ userProfileStore.fullname }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button
class="action"
@click="openEditAlias">
<span class="label">{{ $t('personnalinformation.alias') }}</span>
<span class="value">{{ userProfileStore.user.alias }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<!-- Phone & email -->
<div class="card">
<div class="title">
{{ $t('personnalinformation.contactdetails') }}
</div>
<div class="content">
<button class="action" @click="openDialog('EmailDialog')">
<span class="label">{{ $t('personnalinformation.email') }}</span>
<span class="value">{{ userProfileStore.user.email }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<!-- Lorsque l'utilisateur n'a pas de creator name-->
<div class="card">
<div class="title">
{{ $t('creatorinfopage.informations') }}
</div>
<div class="content">
<!-- NAME -->
<button class="action">
<span class="label">{{ $t('creatorinfopage.name') }}</span>
<span class="value">{{ creatorProfileStore.creator.name }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- TITLE -->
<button class="action" @click="openDialog('ChangeTitleDialog')">
<span class="label">{{ $t('creatorinfopage.title') }}</span>
<span class="value">{{ creatorProfileStore.creator.title }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- STRIPE -->
<button class="action" @click="openDialog('ChangeStripeIdDialog')">
<span class="label">Stripe Account ID</span>
<span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<div class="card">
<div class="title">
{{ $t('creatorinfopage.socialnetwork') }}
</div>
<div class="content">
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-facebook</v-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-instagram</v-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-linkedin</v-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-youtube</v-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-reddit</v-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-web</v-icon></span>
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
</div>
</template>
<script setup>
import CreatorPage from "@/views/profile/CreatorPage.vue";
import AccountPage from "@/views/profile/AccountPage.vue";
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
import {ref} from 'vue';
import SocialsDialog from './creators/SocialsDialog.vue';
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import XIcon from "@/assets/icons/x.svg"
const userProfileStore = useUserProfileStore()
// ### Fullname
const dialogEditFullnameShown = ref(false)
function openEditFullname() {
dialogEditFullnameShown.value = true
}
function handleCloseEditFullname() {
dialogEditFullnameShown.value = false
}
function handleSaveEditFullname(firstname, lastname) {
userProfileStore.changeFullname(firstname, lastname)
dialogEditFullnameShown.value = false
}
// ### Alias
const dialogEditAliasShown = ref(false)
function openEditAlias() {
dialogEditAliasShown.value = true
}
function handleCloseEditAlias() {
dialogEditAliasShown.value = false
}
function handleSaveEditAlias(alias) {
userProfileStore.changeAlias(alias)
dialogEditAliasShown.value = false
}
// ### Email
const dialogEditEmailShown = ref(false)
function openEditEmail() {
dialogEditEmailShown.value = true
}
function handleCloseEditEmail() {
dialogEditEmailShown.value = false
}
function handleSaveEditEmail(firstname, lastname) {
userProfileStore.changeEmail(firstname, lastname)
dialogEditEmailShown.value = false
}
const creatorProfileStore = useCreatorProfileStore();
const dialog = ref(false);
const currentComponent = ref('');
const componentsMap = {
EmailDialog,
SocialsDialog,
ChangeTitleDialog,
ChangeStripeIdDialog,
};
function requestCancel() {
currentComponent.value = null;
dialog.value = false;
}
const openDialog = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
};
const closeDialog = () => {
currentComponent.value = null;
dialog.value = false;
};
</script>
<style scoped>
</style>
.card {
@apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
}
.title {
@apply text-lg font-semibold text-hOnSecondary mb-2;
}
.content {
@apply text-base font-semibold text-hOnSurface flex flex-col w-full;
}
.action {
@apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
}
.label {
@apply flex-none min-w-32 text-left;
}
.value {
@apply flex-auto text-left pr-6 capitalize;
}
.chevron {
@apply flex-none;
}
</style>