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

Fixes profile loading page

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-26 13:35:00 -04:00
parent 6b5f8939b0
commit 7c381c1644
1 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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