Fixes profile loading page

This commit is contained in:
PascalMarchesseault
2024-07-26 13:35:00 -04:00
parent 6b5f8939b0
commit 7c381c1644

View File

@@ -7,7 +7,8 @@
<h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
<div class="relative flex items-center md:mt-0 w-full">
<!-- Navigation buttons for small screens -->
<button @click="scrollLeftFunc" class="rounded p-1 absolute left-2 z-10 md:hidden text-white bg-fuchsia-800">
<button @click="scrollLeftFunc"
class="rounded p-1 absolute left-2 z-10 md:hidden text-white bg-fuchsia-800">
<v-icon>mdi-chevron-left-box</v-icon>
</button>
<div
@@ -17,24 +18,25 @@
@mouseleave="mouseLeave"
@mouseup="mouseUp"
@mousemove="mouseMove">
<v-btn variant="text" @click="currentComponent = 'ManageAccount'">
<v-icon class="mr-2">mdi-account</v-icon>
Gestion de Comptes
<v-btn variant="text" @click="currentComponent = 'PageInformations'">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
Informations de votre page
</v-btn>
<v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
<v-icon class="mr-2">mdi-information</v-icon>
Informations personnelles
</v-btn>
<v-btn variant="text" @click="currentComponent = 'PageInformations'">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
Informations de votre page
<v-btn variant="text" @click="currentComponent = 'ManageAccount'">
<v-icon class="mr-2">mdi-account</v-icon>
Gestion de Comptes
</v-btn>
<v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
<v-icon class="mr-2">mdi-security</v-icon>
Sécurité
</v-btn>
</div>
<button @click="scrollRightFunc" class="rounded p-1 absolute right-2 z-10 md:hidden text-white bg-fuchsia-800">
<button @click="scrollRightFunc"
class="rounded p-1 absolute right-2 z-10 md:hidden text-white bg-fuchsia-800">
<v-icon>mdi-chevron-right-box</v-icon>
</button>
</div>
@@ -45,16 +47,16 @@
<!-- Mid Content -->
<div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
<template v-if="currentComponent === 'ManageAccount'">
<ManageAccount />
<ManageAccount/>
</template>
<template v-else-if="currentComponent === 'PageInformations'">
<PageInformations />
<PageInformations/>
</template>
<template v-else-if="currentComponent === 'PersonnalInfo'">
<PersonnalInfo />
<PersonnalInfo/>
</template>
<template v-else-if="currentComponent === 'AccountSecurity'">
<AccountSecurity />
<AccountSecurity/>
</template>
</div>
</div>
@@ -63,9 +65,9 @@
</template>
<script setup>
import { ref, onBeforeMount, onMounted } from "vue";
import { useUserStore } from "@/stores/user.js";
import { useClient } from "@/plugins/api.js";
import {ref, onBeforeMount, onMounted} from "vue";
import {useUserStore} from "@/stores/user.js";
import {useClient} from "@/plugins/api.js";
import SizeIndicator from "@/views/tools/SizeIndicator.vue";
import ManageAccount from "@/views/Profile/ManageAccount.vue";
import PageInformations from "@/views/Profile/PageInformations.vue";
@@ -76,8 +78,7 @@ const userStore = useUserStore();
const client = useClient();
const currentUser = ref(null);
const snackbar = ref(false);
const currentComponent = ref('ManageAccount'); // Default component
const currentComponent = ref('PageInformations'); // Default component
const isDown = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);