Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored user menu and titles

Browse Source
This commit is contained in:
Alexis
2024-08-25 18:24:59 +02:00
parent 8b1eb9c258
commit 3f201b90e3
5 changed files with 105 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/global/user/CTA.vue
View File

@@ -1,9 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue" import { computed } from "vue"
import { PhFaders, PhSignOut, PhUserCircle } from "@phosphor-icons/vue" import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
const router = useRouter() const router = useRouter()
const { preference } = useColorMode()
const { auth } = useSupabaseClient() const { auth } = useSupabaseClient()
const user = useSupabaseUser() const user = useSupabaseUser()
@@ -44,8 +45,14 @@ async function handleLogout() {
} }
} }
function gotoPreferencesPage() { function gotoProfilePage() {
// router.push({ path: "/my/preferences" }) router.push({ path: "/my/preferences" })
closeMenu()
}
function gotoSettingsPage() {
router.push({ path: "/my/settings" })
closeMenu() closeMenu()
} }
@@ -53,8 +60,8 @@ function gotoPreferencesPage() {
<template> <template>
<ClientOnly> <ClientOnly>
<UiPopover v-model:open="menuOpened"> <UiDropdownMenu v-model:open="menuOpened">
<UiPopoverTrigger> <UiDropdownMenuTrigger>
<UiAvatar v-if="user" class="cursor-pointer"> <UiAvatar v-if="user" class="cursor-pointer">
<UiAvatarImage <UiAvatarImage
:src="userMeta?.avatar_url" :src="userMeta?.avatar_url"
@@ -66,29 +73,84 @@ function gotoPreferencesPage() {
<UiButton v-else variant="outline" size="icon"> <UiButton v-else variant="outline" size="icon">
<PhUserCircle size="18" /> <PhUserCircle size="18" />
</UiButton> </UiButton>
</UiPopoverTrigger> </UiDropdownMenuTrigger>
<UiPopoverContent class="w-fit p-0" :align="'start'" :side="'top'" :collision-padding="20"> <UiDropdownMenuContent class="w-fit p-0" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">
<UiCommand>
<UiCommandList v-if="user"> <template v-if="user">
<UiCommandGroup :heading="`Connecté en tant que ${user?.email}`"> <p class="p-2 text-xs opacity-75">Connecté en tant que {{ user?.email }}</p>
<UiCommandItem value="preferences" class="flex gap-[.5ch] items-center" @select="gotoPreferencesPage">
<PhFaders size="20" /> <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoProfilePage">
<span>Préférences</span> <PhGlobeHemisphereWest size="20" weight="fill" />
</UiCommandItem> <span>Mondes</span>
</UiCommandGroup> </UiDropdownMenuItem>
<UiCommandSeparator />
<UiCommandGroup> <UiDropdownMenuSeparator />
<UiCommandItem value="logout" class="flex gap-[.5ch] items-center" @select="handleLogout">
<UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<PhPalette size="20" weight="fill" />
<span>Apparence</span>
</UiDropdownMenuItem>
</UiDropdownMenuSubTrigger>
<UiDropdownMenuPortal>
<UiDropdownMenuSubContent>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<PhMoon size="20" />
<span>Sombre</span>
</UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<PhSun size="20" />
<span>Clair</span>
</UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<PhLaptop size="20" />
<span>Système</span>
</UiDropdownMenuItem>
</UiDropdownMenuSubContent>
</UiDropdownMenuPortal>
</UiDropdownMenuSub>
<UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<PhTranslate size="20" />
<span>Langage</span>
</UiDropdownMenuItem>
</UiDropdownMenuSubTrigger>
<UiDropdownMenuPortal>
<UiDropdownMenuSubContent>
<UiDropdownMenuSubContent>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<span>Français</span>
</UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<span>English</span>
</UiDropdownMenuItem>
</UiDropdownMenuSubContent>
</UiDropdownMenuSubContent>
</UiDropdownMenuPortal>
</UiDropdownMenuSub>
<UiDropdownMenuSeparator />
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoSettingsPage">
<PhGear size="20" weight="fill" />
<span>Compte</span>
</UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleLogout">
<PhSignOut size="20" weight="fill" /> <PhSignOut size="20" weight="fill" />
<span>Déconnexion</span> <span>Déconnexion</span>
</UiCommandItem> </UiDropdownMenuItem>
</UiCommandGroup> </template>
</UiCommandList>
<UiCommandList v-else> <template v-else>
<UiCommandItem value="logout" @select="handleGoogleLogin"> Connexion </UiCommandItem> <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleGoogleLogin">
</UiCommandList> <PhGear size="20" weight="fill" />
</UiCommand> <span>Connexion</span>
</UiPopoverContent> </UiDropdownMenuItem>
</UiPopover> </template>
</UiDropdownMenuContent>
</UiDropdownMenu>
</ClientOnly> </ClientOnly>
</template> </template>

3
pages/index.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
useHead({ useHead({
title: "Dashboard" title: "TTTools — Calendriers de JDR",
titleTemplate: null
}) })
</script> </script>

11
pages/my/calendars/[id].vue
View File

@@ -3,9 +3,6 @@ import { PhCircleNotch } from "@phosphor-icons/vue";
import type { Calendar } from "~/models/CalendarConfig"; import type { Calendar } from "~/models/CalendarConfig";
import type { Category } from "~/models/Category"; import type { Category } from "~/models/Category";
useHead({
title: "Calendrier"
})
definePageMeta({ definePageMeta({
middleware: ["auth-guard"] middleware: ["auth-guard"]
}) })
@@ -21,11 +18,15 @@ watch(user, (n) => {
const route = useRoute() const route = useRoute()
const id = route.params.id const id = route.params.id
const { data: calendarData, pending: calPending } = useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } }) const { data: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
const { data: catData, pending: catPending } = useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` }) const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar) const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
const categories = computed<Category[]>(() => catData?.value?.data as Category[]) const categories = computed<Category[]>(() => catData?.value?.data as Category[])
useHead({
title: cal.value.name
})
</script> </script>
<template> <template>

9
pages/my/index.vue
View File

@@ -2,15 +2,16 @@
import type { RealtimeChannel } from "@supabase/supabase-js" import type { RealtimeChannel } from "@supabase/supabase-js"
import type { World } from "~/models/World"; import type { World } from "~/models/World";
useHead({
title: "Mondes"
})
const supabase = useSupabaseClient() const supabase = useSupabaseClient()
const { data: res } = await useFetch("/api/worlds/query") const { data: res } = await useFetch("/api/worlds/query")
const worlds = ref<World[]>(res.value?.data as World[]) const worlds = ref<World[]>(res.value?.data as World[])
useHead({
title: "Profil"
})
definePageMeta({ definePageMeta({
middleware: ["auth-guard"] middleware: ["auth-guard"]
}) })
@@ -18,7 +19,7 @@ definePageMeta({
const user = useSupabaseUser() const user = useSupabaseUser()
// Redirect user back home when they log out on the page // Redirect user back home when they log out on the page
watch(user, (n, _o) => { watch(user, (n) => {
if (!n) { if (!n) {
navigateTo("/") navigateTo("/")
} }

2
pages/my/worlds/[id].vue
View File

@@ -13,7 +13,7 @@ const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id
const world = ref<World>(res.value?.data as World) const world = ref<World>(res.value?.data as World)
useHead({ useHead({
title: "Profil" title: world.value.name
}) })
definePageMeta({ definePageMeta({
middleware: ["auth-guard"] middleware: ["auth-guard"]