Added world deletion actions

components/world/dialog/Delete.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import { useToast } from "~/components/ui/toast";
+import type { World } from "~/models/World";
+
+const { toast } = useToast()
+const { t } = useI18n()
+
+const props = defineProps<{
+  modalState: boolean,
+  world: World | null
+}>()
+
+const isLoading = ref<boolean>(false)
+
+const emit = defineEmits(["on-close"])
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value) return
+  if (!props.world) return
+
+  isLoading.value = true
+
+  try {
+    await $fetch(`/api/worlds/${props.world.id}`, { method: "DELETE" })
+    emit("on-close")
+
+    toast({
+      title: t("entity.world.deletedToast.title", { world: props.world.name }),
+      variant: "success",
+      duration: 3000
+    })
+  } catch (err) {
+    console.log(err)
+    if (err instanceof Error) {
+      toast({
+        title: err.message,
+        variant: "destructive"
+      })
+    }
+  } 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"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <UiAlertDialogTitle>
+        {{ $t('entity.world.deleteDialog.title') }}
+      </UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        {{ $t('entity.world.deleteDialog.subtitle') }}
+      </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="outline" @click="handleClosing">
+            {{ $t('ui.action.back') }}
+          </UiButton>
+
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                {{ $t('ui.action.cancel') }}
+              </UiButton>
+            </Transition>
+
+            <UiButton v-if="world" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              {{ $t('entity.deleteOne', { entity: world?.name }) }}
+            </UiButton>
+          </div>
+        </footer>
+      </form>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>

i18n.config.ts

@@ -83,6 +83,13 @@ export default defineI18nConfig(() => ({
             title: "Create a world",
             subtitle: "Worlds are the building blocks which hold all your characters, your calendars…"
           },
+          deleteDialog: {
+            title: "Delete this world ?",
+            subtitle: "This world will be deleted permanently, and all of its associated data will be lost !",
+          },
+          deletedToast: {
+            title: "The world \"{world}\" has been successfuly deleted.",
+          },
         },
         calendar: {
           nameSingular: "Calendar",
@@ -284,6 +291,13 @@ export default defineI18nConfig(() => ({
             title: "Créer un monde",
             subtitle: "Un monde est la brique de base qui contient vos personnages, vos calendriers…"
           },
+          deleteDialog: {
+            title: "Supprimer ce monde ?",
+            subtitle: "Le monde sera supprimé définitivement, vous perdrez toutes les données associées !",
+          },
+          deletedToast: {
+            title: "Le monde \"{world}\" a été supprimé avec succès.",
+          },
         },
         calendar: {
           nameSingular: "Calendriers",

pages/my/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhPlus } from "@phosphor-icons/vue";
+import { PhPlus, PhTrash } from "@phosphor-icons/vue";
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
 
@@ -85,6 +85,19 @@ onUnmounted(() => {
   // Unsubscribe from realtime
   supabase.removeChannel(worldChannel)
 })
+
+const markedWorld = ref<World | null>(null)
+const isDeleteWorldModalOpen = ref<boolean>(false)
+
+function deployDeleteModal(calendar: World) {
+  isDeleteWorldModalOpen.value = true
+  markedWorld.value = calendar
+}
+
+function hideDeleteModal() {
+  isDeleteWorldModalOpen.value = false
+  markedWorld.value = null
+}
 </script>
 
 <template>
@@ -118,7 +131,7 @@ onUnmounted(() => {
           </UiTooltipProvider>
         </div>
 
-        <ul class="grid lg:grid-cols-2 gap-2">
+        <ul class="grid lg:grid-cols-3 gap-2">
           <li v-for="world in worlds" :key="world.id">
             <UiCard
               class="w-full transition-all"
@@ -151,6 +164,10 @@ onUnmounted(() => {
               </UiCardHeader>
               <UiCardContent>
                 <p class="italic">{{ world.description }}</p>
+
+                <UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="deployDeleteModal(world)">
+                  <PhTrash size="16" />
+                </UiButton>
               </UiCardContent>
             </UiCard>
           </li>
@@ -158,10 +175,8 @@ onUnmounted(() => {
       </Spacing>
     </section>
 
-    <WorldDialogCreate
-      :modal-state="isCreateWorldModalOpen"
-      @on-close="hideCreateDialog"
-    />
+    <WorldDialogCreate :modal-state="isCreateWorldModalOpen" @on-close="hideCreateDialog" />
+    <WorldDialogDelete :world="markedWorld" :modal-state="isDeleteWorldModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>
 

pages/my/worlds/[id].vue

@@ -86,15 +86,15 @@ onUnmounted(() => {
 })
 
 const markedCalendar = ref<Calendar | null>(null)
-const isDeleteEventModalOpen = ref<boolean>(false)
+const isDeleteCalendarModalOpen = ref<boolean>(false)
 
 function deployDeleteModal(calendar: Calendar) {
-  isDeleteEventModalOpen.value = true
+  isDeleteCalendarModalOpen.value = true
   markedCalendar.value = calendar
 }
 
 function hideDeleteModal() {
-  isDeleteEventModalOpen.value = false
+  isDeleteCalendarModalOpen.value = false
   markedCalendar.value = null
 }
 </script>
@@ -176,7 +176,7 @@ function hideDeleteModal() {
     </template>
 
     <CalendarDialogCreate :world :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
-    <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
+    <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>
 

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

@@ -0,0 +1,41 @@
+import { z } from "zod"
+import { serverSupabaseClient } from "#supabase/server"
+import type { World } from "~/models/World"
+
+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 monde est manquant ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from("worlds")
+      .delete()
+      .eq("id", params.id)
+      .maybeSingle<World>()
+
+    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

@@ -172,9 +172,10 @@ create policy "Allow individual update access" on public.users for update using
 create policy "Allow individual read access" on public.user_roles for select using ( auth.uid() = user_id );
 
 -- World policies
-create policy "Allow individual read access for GMs" on public.worlds for select using ( ( auth.uid() = gm_id ) );
-create policy "Allow individual insert access for GMs" on public.worlds for insert with check ( auth.uid() = gm_id );
-create policy "Allow individual update access for GMs" on public.worlds for update using ( auth.uid() = gm_id );
+create policy "Allow GMs to see their worlds" on public.worlds for select using ( ( auth.uid() = gm_id ) );
+create policy "Allow GMs to create worlds" on public.worlds for insert with check ( auth.uid() = gm_id );
+create policy "Allow GMs to edit their worlds" on public.worlds for update using ( auth.uid() = gm_id );
+create policy "Allow GMs to delete their worlds" on public.worlds for delete using ( auth.uid() = gm_id );
 
 -- Calendar policies
 create policy "Allow GMs to see their calendars" on public.calendars for select using (