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

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

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

3
pages/index.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
useHead({
title: "Dashboard"
title: "TTTools — Calendriers de JDR",
titleTemplate: null
})
</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 { Category } from "~/models/Category";
useHead({
title: "Calendrier"
})
definePageMeta({
middleware: ["auth-guard"]
})
@@ -21,11 +18,15 @@ watch(user, (n) => {
const route = useRoute()
const id = route.params.id
const { data: calendarData, pending: calPending } = 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: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
const categories = computed<Category[]>(() => catData?.value?.data as Category[])
useHead({
title: cal.value.name
})
</script>
<template>

9
pages/my/index.vue
View File

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