First draft of calendar deletion

components/calendar/dialog/Delete.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from '@phosphor-icons/vue';
+import type { Calendar } from '~/models/CalendarConfig';
+
+const props = defineProps<{
+  modalState: boolean,
+  calendar: Calendar | null
+}>()
+
+const isLoading = ref<boolean>(false)
+
+const emit = defineEmits(['on-close'])
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value) return
+  if (!props.calendar) return
+
+  isLoading.value = true
+
+  try {
+    await $fetch(`/api/calendars/${props.calendar.id}`, { method: 'DELETE' })
+
+    // isDeleteEventModalOpen.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      // formErrors.message = err.message
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing() {
+  if (!isLoading.value) {
+    emit('on-close')
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <UiAlertDialogTitle> Êtes-vous sûr de supprimer ce calendrier ?</UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !
+      </UiAlertDialogDescription>
+
+      <form @submit.prevent="handleAction">
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="text-red-500 ml-8">
+            <span class="text-sm">
+              <!-- {{ formErrors.message }} -->
+            </span>
+          </div>
+        </div>
+
+        <footer class="flex gap-2 justify-between">
+          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+            Retour
+          </UiButton>
+
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                Annuler
+              </UiButton>
+            </Transition>
+
+            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              Supprimer "{{ calendar?.name }}"
+            </UiButton>
+          </div>
+        </footer>
+      </form>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>

components/calendar/form/DeleteEvent.vue

@@ -4,7 +4,7 @@ import { PhCircleNotch } from '@phosphor-icons/vue';
 const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
-const isLoading = ref(false)
+const isLoading = ref<boolean>(false)
 
 const formErrors = reactive<{ message: string | null }>({
   message: null
@@ -17,7 +17,7 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleAction() {
+async function handleAction(): Promise<void> {
   if (isLoading.value) return
 
   isLoading.value = true
@@ -41,7 +41,7 @@ async function handleAction() {
  *
  * @param e The closing event (can be keydown or click)
  */
-function handleClosing(e: Event) {
+function handleClosing(e: Event): void {
   if (isLoading.value) {
     e.preventDefault()
   }
@@ -52,7 +52,7 @@ function handleClosing(e: Event) {
  *
  * Must cancel the abortController in the store, and stop the loading
  */
-function handleCancel() {
+function handleCancel(): void {
   cancelLatestRequest()
   isLoading.value = false
 }

components/ui/card/Card.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <div
     :class="
-      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all', props.class, {
+      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
         'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
           props.link
       })
@@ -22,7 +22,7 @@ const props = defineProps<{
     <NuxtLink
       v-if="props.link"
       :to="props.link"
-      class="absolute inset-0 focus-visible:outline-none"
+      class="absolute inset-0 z-10 focus-visible:outline-none"
     />
   </div>
 </template>

pages/i/world/[id].vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { RealtimeChannel } from '@supabase/supabase-js'
-import { PhPlus } from '@phosphor-icons/vue';
+import { PhPlus, PhTrash } from '@phosphor-icons/vue';
 import type { World } from '~/models/World';
 import type { Calendar } from '~/models/CalendarConfig';
 
@@ -28,10 +28,10 @@ watch(user, (n, _o) => {
   }
 })
 
-const alertModalOpened = ref<boolean>(false)
+const isCreateEventModalOpen = ref<boolean>(false)
 
-function handleDialogClose() {
+function hideCreateDialog() {
-  alertModalOpened.value = false
+  isCreateEventModalOpen.value = false
 }
 
 /**
@@ -87,6 +87,19 @@ 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>
@@ -111,7 +124,7 @@ onUnmounted(() => {
             <UiTooltipProvider :delay-duration="250">
               <UiTooltip>
                 <UiTooltipTrigger as-child>
-                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => alertModalOpened = true">
+                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => isCreateEventModalOpen = true">
                     <PhPlus size="17"/>
                   </UiButton>
                 </UiTooltipTrigger>
@@ -130,11 +143,15 @@ onUnmounted(() => {
                 :link="`/i/calendar/${calendar.id}`"
               >
                 <UiCardHeader>
-                  <UiCardTitle>{{ calendar.name }}</UiCardTitle>
+                  <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>
@@ -148,6 +165,7 @@ onUnmounted(() => {
       </section>
     </template>
 
-    <CalendarDialogCreate :world :modal-state="alertModalOpened" @on-close="handleDialogClose" />
+    <CalendarDialogCreate :world :modal-state="isCreateEventModalOpen" @on-close="hideCreateDialog" />
+    <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>

server/api/calendars/[id].delete.ts

@@ -0,0 +1,41 @@
+import { z } from 'zod'
+import { serverSupabaseClient } from "#supabase/server"
+import type { Calendar } from "~/models/CalendarConfig"
+
+const paramsSchema = z.object({
+  id: z.number({ coerce: true }).positive().int()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const { data: params, error: paramsError} = await getValidatedRouterParams(event, paramsSchema.safeParse)
+
+  if (paramsError) {
+    throw createError({
+      cause: 'Utilisateur',
+      fatal: false,
+      message: "L'identifiant du calendrier est manquant ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from('calendars')
+      .delete()
+      .eq('id', params.id)
+      .maybeSingle<Calendar>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    throw createError({
+      cause: 'Serveur',
+      status: 500,
+      fatal: false,
+      message: 'Une erreur inconnue est survenue.'
+    })
+  }
+})

supabase/migrations/202401_init.sql

@@ -175,19 +175,25 @@ create policy "Allow individual insert access for GMs" on public.worlds for inse
 create policy "Allow individual update access for GMs" on public.worlds for update using ( auth.uid() = gm_id );
 
 -- Calendar policies
-create policy "Allow individual read access for GMs" on public.calendars for select using (
+create policy "Allow GMs to see their calendars" on public.calendars for select using (
     exists (
         select 1 from worlds
         where worlds.id = calendars.world_id
     )
 );
-create policy "Allow individual insert access for GMs" on public.calendars for insert with check (
+create policy "Allow GMs to add calendars to their worldd" on public.calendars for insert with check (
     exists (
         select 1 from worlds
         where worlds.id = calendars.world_id
     )
 );
-create policy "Allow individual update access for GMs" on public.calendars for update with check (
+create policy "Allow GMs to edit their calendars" on public.calendars for update with check (
+    exists (
+        select 1 from worlds
+        where worlds.id = calendars.world_id
+    )
+);
+create policy "Allow GMs to delete their calendars" on public.calendars for delete using (
     exists (
         select 1 from worlds
         where worlds.id = calendars.world_id