social-media/frontend/src/views/profile/ProfilePage.vue

<template>

  <div class="flex flex-col min-h-screen w-[1024px]">
    <!-- 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="dialogShown" max-width="800px">
        <component
            :is="currentComponent"
            :creator="creatorProfileStore.creator"
            @closeRequested="closeDialog"
        ></component>
    </v-dialog>

    <div class="space-y-6 p-4">

      <div class="card">

        <div class="card-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="card-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>

      <template v-if="creatorProfileStore.creator !== undefined">
        <div class="card">
          <div class="card-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="card-title">
            {{ $t('creatorinfopage.socialnetwork') }}
          </div>
          <div class="content">

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <facebook class="social-icon"></facebook>
              </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">
                <instagram class="social-icon"></instagram>
              </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 class="social-icon"></x>
              </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">
                <linkedin class="social-icon"></linkedin>
              </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">
                <tiktok class="social-icon"></tiktok>
              </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">
                <youtube class="social-icon"></youtube>
              </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">
                <reddit class="social-icon"></reddit>
              </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">
                <web class="social-icon"></web>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

          </div>
        </div>
      </template>

    </div>

  </div>
</template>

<script setup>
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 Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
import X from "@/views/svg/X.vue";
import Linkedin from "@/views/svg/Linkedin.vue";
import Tiktok from "@/views/svg/Tiktok.vue";
import Instagram from "@/views/svg/Instagram.vue";
import Facebook from "@/views/svg/Facebook.vue";

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 dialogShown = ref(false);
const currentComponent = ref('');

const componentsMap = {
  EmailDialog,
  SocialsDialog,
  ChangeTitleDialog,
  ChangeStripeIdDialog,
};

function requestCancel() {
  currentComponent.value = null;
  dialogShown.value = false;
}

const openDialog = (component) => {
  currentComponent.value = componentsMap[component];
  dialogShown.value = true;
};

const closeDialog = () => {
  currentComponent.value = null;
  dialogShown.value = false;
};
</script>

<style scoped>

.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;
}

.social-icon {
  @apply w-6 h-6;
}

.value {
  @apply flex-auto text-left pr-6 capitalize;
}

.chevron {
  @apply flex-none;
}

</style>