From 636623ee963128a4334b91a40096036a184c0ca1 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 9 Sep 2024 23:21:27 +0200
Subject: [PATCH] Added world deletion actions

---
 components/world/dialog/Delete.vue  | 110 ++++++++++++++++++++++++++++
 i18n.config.ts                      |  14 ++++
 pages/my/index.vue                  |  27 +++++--
 pages/my/worlds/[id].vue            |   8 +-
 server/api/worlds/[id].delete.ts    |  41 +++++++++++
 supabase/migrations/202401_init.sql |   7 +-
 6 files changed, 194 insertions(+), 13 deletions(-)
 create mode 100644 components/world/dialog/Delete.vue
 create mode 100644 server/api/worlds/[id].delete.ts

diff --git a/components/world/dialog/Delete.vue b/components/world/dialog/Delete.vue
new file mode 100644
index 0000000..5f08af5
--- /dev/null
+++ b/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>
diff --git a/i18n.config.ts b/i18n.config.ts
index a0cb46b..d59fc6e 100644
--- a/i18n.config.ts
+++ b/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",
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 8aae1aa..7ed7f45 100644
--- a/pages/my/index.vue
+++ b/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>
 
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 9b6a158..184f5d8 100644
--- a/pages/my/worlds/[id].vue
+++ b/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>
 
diff --git a/server/api/worlds/[id].delete.ts b/server/api/worlds/[id].delete.ts
new file mode 100644
index 0000000..0b9bd0d
--- /dev/null
+++ b/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."
+    })
+  }
+})
diff --git a/supabase/migrations/202401_init.sql b/supabase/migrations/202401_init.sql
index ca78c9d..5d34e3a 100644
--- a/supabase/migrations/202401_init.sql
+++ b/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 (