Changed user menu / sidebar
This commit is contained in:
Alexis
40
pages/my/calendars/[id].vue
Normal file
40
pages/my/calendars/[id].vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script lang="ts" setup>
|
||||
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"]
|
||||
})
|
||||
|
||||
const user = useSupabaseUser()
|
||||
// Redirect user back home when they log out on the page
|
||||
watch(user, (n) => {
|
||||
if (!n) {
|
||||
navigateTo("/")
|
||||
}
|
||||
})
|
||||
|
||||
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 cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
|
||||
const categories = computed<Category[]>(() => catData?.value?.data as Category[])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
|
||||
<div class="grid gap-2 justify-items-center opacity-50">
|
||||
<p>Chargement du calendrier</p>
|
||||
<PhCircleNotch size="50" class="animate-spin"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
|
||||
</template>
|
||||
134
pages/my/index.vue
Normal file
134
pages/my/index.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<script lang="ts" setup>
|
||||
import type { RealtimeChannel } from "@supabase/supabase-js"
|
||||
import type { World } from "~/models/World";
|
||||
|
||||
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"]
|
||||
})
|
||||
|
||||
const user = useSupabaseUser()
|
||||
|
||||
// Redirect user back home when they log out on the page
|
||||
watch(user, (n, _o) => {
|
||||
if (!n) {
|
||||
navigateTo("/")
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* === World subscriptions ===
|
||||
*/
|
||||
/** Active world channel */
|
||||
let worldChannel: RealtimeChannel
|
||||
|
||||
/** Handles world insertion realtime events */
|
||||
function handleInsertedWorld(newWorld: World) {
|
||||
try {
|
||||
worlds.value.push(newWorld)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
/** Handles world deletion realtime events */
|
||||
function handleDeletedWorld(id: number) {
|
||||
try {
|
||||
worlds.value.splice(worlds.value.findIndex(w => w.id === id))
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
worldChannel = supabase.channel("custom-insert-channel")
|
||||
.on(
|
||||
"postgres_changes",
|
||||
{ event: "*", schema: "public", table: "worlds" },
|
||||
async (payload) => {
|
||||
switch (payload.eventType) {
|
||||
case "INSERT":
|
||||
handleInsertedWorld(payload.new as World)
|
||||
break
|
||||
|
||||
case "DELETE":
|
||||
handleDeletedWorld(payload.old.id)
|
||||
break
|
||||
|
||||
case "UPDATE":
|
||||
worlds.value = (await $fetch("/api/worlds/query")).data as World[]
|
||||
break
|
||||
|
||||
default:
|
||||
console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
|
||||
console.log(payload)
|
||||
break
|
||||
}
|
||||
}
|
||||
)
|
||||
.subscribe()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// Unsubscribe from realtime
|
||||
supabase.removeChannel(worldChannel)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="p-8">
|
||||
<Heading>{{ user?.user_metadata.full_name }}</Heading>
|
||||
|
||||
<section v-if="worlds" class="mt-4">
|
||||
<h2 class="mb-4 text-lg font-bold">
|
||||
Mondes
|
||||
</h2>
|
||||
|
||||
<ul class="grid lg:grid-cols-2 gap-2">
|
||||
<li v-for="world in worlds" :key="world.id">
|
||||
<UiCard
|
||||
class="w-full transition-all"
|
||||
:link="`/my/worlds/${world.id}`"
|
||||
:class="{
|
||||
'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !world.color,
|
||||
'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': world.color === 'red',
|
||||
'bg-orange-100 dark:bg-orange-950 border-orange-200 hover:bg-orange-50 dark:hover:bg-orange-900 dark:border-orange-900 dark:focus-within:outline-orange-900': world.color === 'orange',
|
||||
'bg-amber-100 dark:bg-amber-950 border-amber-200 hover:bg-amber-50 dark:hover:bg-amber-900 dark:border-amber-900 dark:focus-within:outline-amber-900': world.color === 'amber',
|
||||
'bg-yellow-100 dark:bg-yellow-950 border-yellow-200 hover:bg-yellow-50 dark:hover:bg-yellow-900 dark:border-yellow-900 dark:focus-within:outline-yellow-900': world.color === 'yellow',
|
||||
'bg-lime-100 dark:bg-lime-950 border-lime-200 hover:bg-lime-50 dark:hover:bg-lime-900 dark:border-lime-900 dark:focus-within:outline-lime-900': world.color === 'lime',
|
||||
' bg-green-100 dark:bg-green-950 border-green-200 hover:bg-green-50 dark:hover:bg-green-900 dark:border-green-900 dark:focus-within:outline-green-900': world.color === 'green',
|
||||
'bg-emerald-100 dark:bg-emerald-950 border-emerald-200 hover:bg-emerald-50 dark:hover:bg-emerald-900 dark:border-emerald-900 dark:focus-within:outline-emerald-900': world.color === 'emerald',
|
||||
'bg-teal-100 dark:bg-teal-950 border-teal-200 hover:bg-teal-50 dark:hover:bg-teal-900 dark:border-teal-900 dark:focus-within:outline-teal-900': world.color === 'teal',
|
||||
'bg-cyan-100 dark:bg-cyan-950 border-cyan-200 hover:bg-cyan-50 dark:hover:bg-cyan-900 dark:border-cyan-900 dark:focus-within:outline-cyan-900': world.color === 'cyan',
|
||||
'bg-sky-100 dark:bg-sky-950 border-sky-200 hover:bg-sky-50 dark:hover:bg-sky-900 dark:border-sky-900 dark:focus-within:outline-sky-900': world.color === 'sky',
|
||||
'bg-blue-100 dark:bg-blue-950 border-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900 dark:border-blue-900 dark:focus-within:outline-blue-900': world.color === 'blue',
|
||||
'bg-indigo-100 dark:bg-indigo-950 border-indigo-200 hover:bg-indigo-50 dark:hover:bg-indigo-900 dark:border-indigo-900 dark:focus-within:outline-indigo-900': world.color === 'indigo',
|
||||
'bg-violet-100 dark:bg-violet-950 border-violet-200 hover:bg-violet-50 dark:hover:bg-violet-900 dark:border-violet-900 dark:focus-within:outline-violet-900': world.color === 'violet',
|
||||
'bg-purple-100 dark:bg-purple-950 border-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900 dark:border-purple-900 dark:focus-within:outline-purple-900': world.color === 'purple',
|
||||
'bg-fuchsia-100 dark:bg-fuchsia-950 border-fuchsia-200 hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 dark:border-fuchsia-900 dark:focus-within:outline-fuchsia-900': world.color === 'fuchsia',
|
||||
'bg-pink-100 dark:bg-pink-950 border-pink-200 hover:bg-pink-50 dark:hover:bg-pink-900 dark:border-pink-900 dark:focus-within:outline-pink-900': world.color === 'pink',
|
||||
'bg-pink-100 dark:bg-rose-950 border-rose-200 hover:bg-rose-50 dark:hover:bg-rose-900 dark:border-rose-900 dark:focus-within:outline-rose-900': world.color === 'rose',
|
||||
'text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900': world.color === 'black',
|
||||
' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-300 dark:border-slate-500 dark:focus-within:outline-slate-100': world.color === 'white',
|
||||
}"
|
||||
>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>{{ world.name }}</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<p class="italic">{{ world.description }}</p>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
171
pages/my/worlds/[id].vue
Normal file
171
pages/my/worlds/[id].vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script lang="ts" setup>
|
||||
import type { RealtimeChannel } from "@supabase/supabase-js"
|
||||
import type { World } from "~/models/World";
|
||||
import type { Calendar } from "~/models/CalendarConfig";
|
||||
import { PhPlus, PhTrash } from "@phosphor-icons/vue";
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const id = route.params.id
|
||||
|
||||
const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id, full: true } })
|
||||
|
||||
const world = ref<World>(res.value?.data as World)
|
||||
|
||||
useHead({
|
||||
title: "Profil"
|
||||
})
|
||||
definePageMeta({
|
||||
middleware: ["auth-guard"]
|
||||
})
|
||||
|
||||
const user = useSupabaseUser()
|
||||
|
||||
// Redirect user back home when they log out on the page
|
||||
watch(user, (n) => {
|
||||
if (!n) {
|
||||
navigateTo("/")
|
||||
}
|
||||
})
|
||||
|
||||
const isCreateEventModalOpen = ref<boolean>(false)
|
||||
|
||||
function hideCreateDialog() {
|
||||
isCreateEventModalOpen.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* === Calendar subscriptions ===
|
||||
*/
|
||||
|
||||
/** Active calendar channel */
|
||||
let calendarChannel: RealtimeChannel
|
||||
|
||||
/** Handles calendar insertion realtime events */
|
||||
function handleInsertedCalendar(newCalendar: Calendar) {
|
||||
try {
|
||||
world.value.calendars?.push(newCalendar)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
/** Handles calendar deletion realtime events */
|
||||
function handleDeletedCalendar(id: number) {
|
||||
try {
|
||||
world.value.calendars?.splice(world.value.calendars.findIndex(c => c.id === id))
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
calendarChannel = supabase.channel("custom-insert-channel")
|
||||
.on(
|
||||
"postgres_changes",
|
||||
{ event: "*", schema: "public", table: "calendars" },
|
||||
(payload) => {
|
||||
switch (payload.eventType) {
|
||||
case "INSERT":
|
||||
handleInsertedCalendar(payload.new as Calendar)
|
||||
break
|
||||
|
||||
case "DELETE":
|
||||
handleDeletedCalendar(payload.old.id)
|
||||
break
|
||||
|
||||
default:
|
||||
console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
|
||||
break
|
||||
}
|
||||
}
|
||||
)
|
||||
.subscribe()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// Unsubscribe from realtime
|
||||
supabase.removeChannel(calendarChannel)
|
||||
})
|
||||
|
||||
const markedCalendar = ref<Calendar | null>(null)
|
||||
const isDeleteEventModalOpen = ref<boolean>(false)
|
||||
|
||||
function deployDeleteModal(calendar: Calendar) {
|
||||
isDeleteEventModalOpen.value = true
|
||||
markedCalendar.value = calendar
|
||||
}
|
||||
|
||||
function hideDeleteModal() {
|
||||
isDeleteEventModalOpen.value = false
|
||||
markedCalendar.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="p-8">
|
||||
<template v-if="pending">
|
||||
<Heading>Chargement...</Heading>
|
||||
</template>
|
||||
<template v-else-if="world">
|
||||
<header class="lg:w-1/2 mb-8">
|
||||
<Spacing>
|
||||
<Heading>{{ world.name }}</Heading>
|
||||
|
||||
<p>{{ world.description }}</p>
|
||||
</Spacing>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<Spacing size="lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<Heading>Calendriers</Heading>
|
||||
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton size="icon" class="rounded-full h-8 w-8" @click="() => isCreateEventModalOpen = true">
|
||||
<PhPlus size="17"/>
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent :side-offset="10">
|
||||
<p>Ajouter un calendrier</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
|
||||
<ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
|
||||
<li v-for="calendar in world.calendars" :key="calendar.id">
|
||||
<UiCard
|
||||
v-if="calendar"
|
||||
class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
|
||||
:link="`/my/calendars/${calendar.id}`"
|
||||
>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
|
||||
<UiCardContent>
|
||||
<p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
|
||||
|
||||
<UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:bg-slate-600" @click="deployDeleteModal(calendar)">
|
||||
<PhTrash size="16" />
|
||||
</UiButton>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-else>
|
||||
<p class="pl-6 opacity-75 italic">
|
||||
Aucun calendrier pour ce monde
|
||||
</p>
|
||||
</template>
|
||||
</Spacing>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<CalendarDialogCreate :world :modal-state="isCreateEventModalOpen" @on-close="hideCreateDialog" />
|
||||
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user