From 6749fdb46ea5edb104c5cbd89beaa3072ae642a7 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 18:28:38 +0200
Subject: [PATCH 1/7] Moved event modal states and functions to event store

---
 components/calendar/Calendar.vue             |   4 +-
 components/calendar/CalendarEventDetails.vue |   4 +-
 components/calendar/form/DeleteEvent.vue     | 112 +++++++++++++++++++
 stores/CalendarStore.ts                      |  11 --
 stores/EventStore.ts                         |  36 +++++-
 5 files changed, 152 insertions(+), 15 deletions(-)
 create mode 100644 components/calendar/form/DeleteEvent.vue

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index b16f81e..063aa40 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -7,7 +7,8 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const { isAdvancedSearchOpen, isEditEventModalOpen } = storeToRefs(useCalendar())
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
+const { isEditEventModalOpen, isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
 
 const route = useRoute()
 const worldId = route.params.id
@@ -111,5 +112,6 @@ onMounted(() => {
 
     <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
     <CalendarFormUpdateEvent v-model:model-value="isEditEventModalOpen" />
+    <CalendarFormDeleteEvent v-model:model-value="isDeleteEventModalOpen" />
   </div>
 </template>
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 9816ace..b7c252a 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -11,8 +11,8 @@ import {
   PhDotsThreeOutlineVertical
 } from '@phosphor-icons/vue'
 
-const { defaultDate, getFormattedDateTitle, jumpToDate, revealEditEventModal, getRelativeString } = useCalendar()
-const { deleteEvent } = useCalendarEvents()
+const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
+const { deleteEvent, revealEditEventModal } = useCalendarEvents()
 const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
new file mode 100644
index 0000000..58c4c8a
--- /dev/null
+++ b/components/calendar/form/DeleteEvent.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import { PhAlarm } from '@phosphor-icons/vue'
+import { VisuallyHidden } from 'radix-vue'
+
+const isModalOpened = defineModel<boolean>({ default: false })
+const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
+const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
+
+const formErrors = reactive<{ message: string | null }>({
+  message: null
+})
+
+// Watch the popover state
+watch(isModalOpened, (hasOpened, _o) => {
+  if (hasOpened && lastActiveEvent.value) {
+    eventSkeleton.value = { ...lastActiveEvent.value }
+  } else {
+    resetSkeleton()
+  }
+})
+
+async function handleSubmit() {
+  try {
+    await updateEventFromSkeleton()
+
+    isModalOpened.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      formErrors.message = err.message
+    }
+  }
+}
+</script>
+
+<template>
+  <UiDialog v-model:open="isModalOpened" :modal="true">
+    <UiDialogContent
+      :align="'center'"
+      :side="'right'"
+      :collision-padding="60"
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+    >
+      <VisuallyHidden>
+        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+
+        <UiDialogDescription>
+          Mettre à jour les données de l'évènement
+        </UiDialogDescription>
+      </VisuallyHidden>
+
+      <form @submit.prevent="handleSubmit">
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="col-span-2 ml-8">
+            <input
+              id="new-event-title"
+              v-model="eventSkeleton.title"
+              type="text"
+              name="new-event-title"
+              required
+              placeholder="Titre de l'évènement"
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+          </div>
+
+          <div class="col-span-2 ml-8">
+            <textarea
+              id="new-event-description"
+              v-model="eventSkeleton.description"
+              name="new-event-description"
+              placeholder="Description brève de l'évènement"
+              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            />
+          </div>
+
+          <div class="col-span-2">
+            <div class="flex items-center gap-2">
+              <PhAlarm size="18" weight="fill" />
+
+              <CalendarInputRPGDate
+                v-model:model-value="eventSkeleton.startDate"
+                placeholder="Date de début"
+                :initial-date="lastActiveEvent?.startDate"
+                :required="true"
+              />
+
+              <span>—</span>
+
+              <CalendarInputRPGDate
+                v-model:model-value="eventSkeleton.endDate"
+                placeholder="Date de fin"
+                :initial-date="lastActiveEvent?.endDate"
+              />
+            </div>
+          </div>
+
+          <div class="text-red-500 ml-8">
+            <span class="text-sm">
+              {{ formErrors.message }}
+            </span>
+          </div>
+
+          <div class="text-right">
+            <UiButton size="sm" type="submit">
+              Sauvegarder
+            </UiButton>
+          </div>
+        </div>
+      </form>
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index 1b7fe75..2d9fd4f 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -298,15 +298,6 @@ export const useCalendar = defineStore('calendar', () => {
     isAdvancedSearchOpen.value = true
   }
 
-  /**
-   * State for advanced search modal
-   */
-  const isEditEventModalOpen: Ref<boolean> = ref<boolean>(false)
-
-  function revealEditEventModal() {
-    isEditEventModalOpen.value = true
-  }
-
   /**
    * Switches the active viewType
    *
@@ -649,8 +640,6 @@ export const useCalendar = defineStore('calendar', () => {
     isCurrentScreenActive,
     isAdvancedSearchOpen,
     revealAdvancedSearch,
-    isEditEventModalOpen,
-    revealEditEventModal,
     convertDateToDays,
     getDifferenceInDays,
     areDatesIdentical,
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index d703b5a..6281662 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -165,6 +165,24 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     }
   }
 
+  /**
+   * State for event modal edition
+   */
+  const isEditEventModalOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealEditEventModal() {
+    isEditEventModalOpen.value = true
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isDeleteEventModalOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealDeleteEventModal() {
+    isDeleteEventModalOpen.value = true
+  }
+
   /**
    * EVENT CREATION FUNCTIONS
    */
@@ -219,5 +237,21 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     }
   }
 
-  return { allEvents, setEvents, currentEvents, getRelativeEventFromDate, getRelativeEventFromEvent, eventSkeleton, resetSkeleton, submitSkeleton, lastActiveEvent, updateEventFromSkeleton, deleteEvent }
+  return {
+    allEvents,
+    setEvents,
+    currentEvents,
+    getRelativeEventFromDate,
+    getRelativeEventFromEvent,
+    eventSkeleton,
+    resetSkeleton,
+    submitSkeleton,
+    lastActiveEvent,
+    updateEventFromSkeleton,
+    deleteEvent,
+    isEditEventModalOpen,
+    revealEditEventModal,
+    isDeleteEventModalOpen,
+    revealDeleteEventModal
+  }
 })

From 53024c6117076631ac509b64a1501621c873eb6c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 18:35:13 +0200
Subject: [PATCH 2/7] Added delete modal confirmation

---
 components/calendar/CalendarEventDetails.vue | 13 +++-
 components/calendar/form/DeleteEvent.vue     | 63 +++-----------------
 stores/EventStore.ts                         | 12 ++--
 3 files changed, 23 insertions(+), 65 deletions(-)

diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index b7c252a..e588198 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -12,7 +12,7 @@ import {
 } from '@phosphor-icons/vue'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
-const { deleteEvent, revealEditEventModal } = useCalendarEvents()
+const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
 const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
@@ -47,6 +47,15 @@ function deployEditModal() {
   revealEditEventModal()
   commandMenuOpened.value = false
 }
+
+/**
+ * Confirm event deletion
+ */
+function deployDeleteModal() {
+  lastActiveEvent.value = { ...props.event }
+  revealDeleteEventModal()
+  commandMenuOpened.value = false
+}
 </script>
 
 <template>
@@ -146,7 +155,7 @@ function deployEditModal() {
             <UiCommandList>
               <UiCommandGroup>
                 <UiCommandItem value="edit-event" @select="deployEditModal"> Modifier </UiCommandItem>
-                <UiCommandItem value="delete-event" @select="deleteEvent(event.id!)"> Supprimer </UiCommandItem>
+                <UiCommandItem value="delete-event" @select="deployDeleteModal"> Supprimer </UiCommandItem>
               </UiCommandGroup>
             </UiCommandList>
           </UiCommand>
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 58c4c8a..822e344 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import { PhAlarm } from '@phosphor-icons/vue'
-import { VisuallyHidden } from 'radix-vue'
-
 const isModalOpened = defineModel<boolean>({ default: false })
-const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
+const { resetSkeleton, deleteEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const formErrors = reactive<{ message: string | null }>({
@@ -21,7 +18,7 @@ watch(isModalOpened, (hasOpened, _o) => {
 
 async function handleSubmit() {
   try {
-    await updateEventFromSkeleton()
+    await deleteEventFromSkeleton()
 
     isModalOpened.value = false
   } catch (err) {
@@ -42,58 +39,14 @@ async function handleSubmit() {
       :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
     >
-      <VisuallyHidden>
-        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+      <UiDialogTitle> Supprimer l'évènement</UiDialogTitle>
 
-        <UiDialogDescription>
-          Mettre à jour les données de l'évènement
-        </UiDialogDescription>
-      </VisuallyHidden>
+      <UiDialogDescription>
+        Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
+      </UiDialogDescription>
 
       <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">
-          <div class="col-span-2 ml-8">
-            <input
-              id="new-event-title"
-              v-model="eventSkeleton.title"
-              type="text"
-              name="new-event-title"
-              required
-              placeholder="Titre de l'évènement"
-              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
-          </div>
-
-          <div class="col-span-2 ml-8">
-            <textarea
-              id="new-event-description"
-              v-model="eventSkeleton.description"
-              name="new-event-description"
-              placeholder="Description brève de l'évènement"
-              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
-            />
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-2">
-              <PhAlarm size="18" weight="fill" />
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.startDate"
-                placeholder="Date de début"
-                :initial-date="lastActiveEvent?.startDate"
-                :required="true"
-              />
-
-              <span>—</span>
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.endDate"
-                placeholder="Date de fin"
-                :initial-date="lastActiveEvent?.endDate"
-              />
-            </div>
-          </div>
-
           <div class="text-red-500 ml-8">
             <span class="text-sm">
               {{ formErrors.message }}
@@ -101,8 +54,8 @@ async function handleSubmit() {
           </div>
 
           <div class="text-right">
-            <UiButton size="sm" type="submit">
-              Sauvegarder
+            <UiButton size="sm" type="submit" variant="destructive">
+              Supprimer
             </UiButton>
           </div>
         </div>
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 6281662..454bd24 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -223,14 +223,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     }
   }
 
-  async function deleteEvent(eventId: number) {
-    if (!eventId) {
-      throw new Error('ID of the event is required')
-    }
-
+  async function deleteEventFromSkeleton() {
     try {
-      await $fetch(`/api/calendars/events/${eventId}`, { method: 'DELETE' })
-      const eventIndex = baseEvents.value.findIndex(e => e.id === eventId)
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE' })
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value.splice(eventIndex, 1)
     } catch (err) {
       console.log(err)
@@ -248,7 +244,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     submitSkeleton,
     lastActiveEvent,
     updateEventFromSkeleton,
-    deleteEvent,
+    deleteEventFromSkeleton,
     isEditEventModalOpen,
     revealEditEventModal,
     isDeleteEventModalOpen,

From 06b7dadf81d542429b489ead2db2de8b27a51245 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 18:55:40 +0200
Subject: [PATCH 3/7] Added alert dialog

The shadcn cli doesn't seem to work with this one so I grabbed it from their github
---
 components/ui/alert-dialog/AlertDialog.vue    | 14 +++++++
 .../ui/alert-dialog/AlertDialogAction.vue     | 20 +++++++++
 .../ui/alert-dialog/AlertDialogCancel.vue     | 20 +++++++++
 .../ui/alert-dialog/AlertDialogContent.vue    | 42 +++++++++++++++++++
 .../alert-dialog/AlertDialogDescription.vue   | 25 +++++++++++
 .../ui/alert-dialog/AlertDialogFooter.vue     | 21 ++++++++++
 .../ui/alert-dialog/AlertDialogHeader.vue     | 16 +++++++
 .../ui/alert-dialog/AlertDialogTitle.vue      | 22 ++++++++++
 .../ui/alert-dialog/AlertDialogTrigger.vue    | 11 +++++
 components/ui/alert-dialog/index.ts           |  9 ++++
 10 files changed, 200 insertions(+)
 create mode 100644 components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 components/ui/alert-dialog/index.ts

diff --git a/components/ui/alert-dialog/AlertDialog.vue b/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..8fb30de
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogAction.vue b/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..d3414bf
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button/index'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogCancel.vue b/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..08302c0
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button/index'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogContent.vue b/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..9f09909
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogDescription.vue b/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..9682cbb
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogFooter.vue b/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..55d0a0e
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogHeader.vue b/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..c61c449
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogTitle.vue b/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..50c583d
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogTrigger.vue b/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..4f5e2fd
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/components/ui/alert-dialog/index.ts b/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..91d138a
--- /dev/null
+++ b/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'

From edeaaa1e1911441fb68b6e7b60e1aa2b111a20a9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 21:39:47 +0200
Subject: [PATCH 4/7] Removed redundant data pass

---
 components/calendar/Calendar.vue              |  9 +++----
 components/calendar/form/DeleteEvent.vue      | 23 ++++++++--------
 components/calendar/form/UpdateEvent.vue      | 26 +++++++++++--------
 components/calendar/search/CalendarSearch.vue | 11 ++++----
 4 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 063aa40..202e877 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -7,9 +7,6 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-const { isEditEventModalOpen, isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
-
 const route = useRoute()
 const worldId = route.params.id
 
@@ -110,8 +107,8 @@ onMounted(() => {
       </div>
     </template>
 
-    <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
-    <CalendarFormUpdateEvent v-model:model-value="isEditEventModalOpen" />
-    <CalendarFormDeleteEvent v-model:model-value="isDeleteEventModalOpen" />
+    <CalendarSearch />
+    <CalendarFormUpdateEvent />
+    <CalendarFormDeleteEvent />
   </div>
 </template>
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 822e344..3fcfcdd 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-const isModalOpened = defineModel<boolean>({ default: false })
+const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
+
 const { resetSkeleton, deleteEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
@@ -8,7 +9,7 @@ const formErrors = reactive<{ message: string | null }>({
 })
 
 // Watch the popover state
-watch(isModalOpened, (hasOpened, _o) => {
+watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
   } else {
@@ -20,7 +21,7 @@ async function handleSubmit() {
   try {
     await deleteEventFromSkeleton()
 
-    isModalOpened.value = false
+    isDeleteEventModalOpen.value = false
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
@@ -30,20 +31,20 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isModalOpened" :modal="true">
-    <UiDialogContent
+  <UiAlertDialog v-model:open="isDeleteEventModalOpen" :modal="true">
+    <UiAlertDialogContent
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      class="min-w-96 bg-slate-900 border-slate-800"
     >
-      <UiDialogTitle> Supprimer l'évènement</UiDialogTitle>
+      <UiAlertDialogTitle> Supprimer l'évènement</UiAlertDialogTitle>
 
-      <UiDialogDescription>
+      <UiAlertDialogDescription>
         Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
-      </UiDialogDescription>
+      </UiAlertDialogDescription>
 
       <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">
@@ -60,6 +61,6 @@ async function handleSubmit() {
           </div>
         </div>
       </form>
-    </UiDialogContent>
-  </UiDialog>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
 </template>
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 58c4c8a..0bf23da 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -2,7 +2,8 @@
 import { PhAlarm } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
-const isModalOpened = defineModel<boolean>({ default: false })
+const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
+
 const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
@@ -11,7 +12,7 @@ const formErrors = reactive<{ message: string | null }>({
 })
 
 // Watch the popover state
-watch(isModalOpened, (hasOpened, _o) => {
+watch(isEditEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
   } else {
@@ -23,7 +24,7 @@ async function handleSubmit() {
   try {
     await updateEventFromSkeleton()
 
-    isModalOpened.value = false
+    isEditEventModalOpen.value = false
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
@@ -33,8 +34,8 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isModalOpened" :modal="true">
-    <UiDialogContent
+  <UiAlertDialog v-model:open="isEditEventModalOpen" :modal="true">
+    <UiAlertDialogContent
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
@@ -43,11 +44,11 @@ async function handleSubmit() {
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
     >
       <VisuallyHidden>
-        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+        <UiAlertDialogTitle> Modifier l'évènement</UiAlertDialogTitle>
 
-        <UiDialogDescription>
+        <UiAlertDialogDescription>
           Mettre à jour les données de l'évènement
-        </UiDialogDescription>
+        </UiAlertDialogDescription>
       </VisuallyHidden>
 
       <form @submit.prevent="handleSubmit">
@@ -100,13 +101,16 @@ async function handleSubmit() {
             </span>
           </div>
 
-          <div class="text-right">
+          <div class="flex gap-2 justify-end">
+            <UiButton size="sm" type="button" variant="secondary">
+              Annuler
+            </UiButton>
             <UiButton size="sm" type="submit">
               Sauvegarder
             </UiButton>
           </div>
         </div>
       </form>
-    </UiDialogContent>
-  </UiDialog>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
 </template>
diff --git a/components/calendar/search/CalendarSearch.vue b/components/calendar/search/CalendarSearch.vue
index 2b2a457..74dba7b 100644
--- a/components/calendar/search/CalendarSearch.vue
+++ b/components/calendar/search/CalendarSearch.vue
@@ -27,10 +27,9 @@ import {
 import SearchList from './lists/SearchList.vue'
 import type { Category } from '~/models/Category'
 
-const { characters } = storeToRefs(useCharacters())
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
 const { allEvents } = storeToRefs(useCalendarEvents())
-
-const modalOpen = defineModel<boolean>({ default: false })
+const { characters } = storeToRefs(useCharacters())
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -170,14 +169,14 @@ function resetSearch() {
  * Opens the search Uidialog
  */
 function openUiDialog() {
-  modalOpen.value = true
+  isAdvancedSearchOpen.value = true
 }
 
 /**
  * Closes the search Uidialog
  */
 function closeUiDialog() {
-  modalOpen.value = false
+  isAdvancedSearchOpen.value = false
 }
 
 /**
@@ -233,7 +232,7 @@ function handleCategorySelect(e: (Category)) {
 </script>
 
 <template>
-  <UiDialog v-model:open="modalOpen" @update:open="resetSearch()">
+  <UiDialog v-model:open="isAdvancedSearchOpen" @update:open="resetSearch()">
     <UiDialogContent
       class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{

From 05f5c5a92caa880217df17a8471ffddafefcca74 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 22:56:41 +0200
Subject: [PATCH 5/7] Added actions / cancel to alert modals

---
 components/calendar/form/DeleteEvent.vue | 19 +++++++++++--------
 components/calendar/form/UpdateEvent.vue | 21 ++++++++++-----------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 3fcfcdd..0892603 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -17,7 +17,7 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleSubmit() {
+async function handleAction() {
   try {
     await deleteEventFromSkeleton()
 
@@ -46,21 +46,24 @@ async function handleSubmit() {
         Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
       </UiAlertDialogDescription>
 
-      <form @submit.prevent="handleSubmit">
+      <form>
         <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 class="text-right">
-            <UiButton size="sm" type="submit" variant="destructive">
-              Supprimer
-            </UiButton>
-          </div>
         </div>
       </form>
+
+      <UiAlertDialogFooter>
+        <UiAlertDialogCancel>
+          Annuler
+        </UiAlertDialogCancel>
+        <UiAlertDialogAction class="destructive" @click="handleAction">
+          Supprimer
+        </UiAlertDialogAction>
+      </UiAlertDialogFooter>
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 0bf23da..03f3f7d 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -20,7 +20,7 @@ watch(isEditEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleSubmit() {
+async function handleAction() {
   try {
     await updateEventFromSkeleton()
 
@@ -51,7 +51,7 @@ async function handleSubmit() {
         </UiAlertDialogDescription>
       </VisuallyHidden>
 
-      <form @submit.prevent="handleSubmit">
+      <form>
         <div class="grid grid-cols-2 gap-y-4">
           <div class="col-span-2 ml-8">
             <input
@@ -100,17 +100,16 @@ async function handleSubmit() {
               {{ formErrors.message }}
             </span>
           </div>
-
-          <div class="flex gap-2 justify-end">
-            <UiButton size="sm" type="button" variant="secondary">
-              Annuler
-            </UiButton>
-            <UiButton size="sm" type="submit">
-              Sauvegarder
-            </UiButton>
-          </div>
         </div>
       </form>
+      <UiAlertDialogFooter>
+        <UiAlertDialogCancel>
+          Annuler
+        </UiAlertDialogCancel>
+        <UiAlertDialogAction @click="handleAction">
+          Sauvegarder
+        </UiAlertDialogAction>
+      </UiAlertDialogFooter>
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

From 4972c2638535722b2b1e470e0002d6d833ffd68b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 23:21:33 +0200
Subject: [PATCH 6/7] Removed resetSkeleton call

Same logic from commit b71f7745a41725c92920a230351854fe17a44a4b, as this would remove useful data from the skeleton used to splice / change the client side data
---
 components/calendar/form/DeleteEvent.vue | 4 ++--
 components/calendar/form/UpdateEvent.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 0892603..97a2f59 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -12,8 +12,6 @@ const formErrors = reactive<{ message: string | null }>({
 watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
-  } else {
-    resetSkeleton()
   }
 })
 
@@ -26,6 +24,8 @@ async function handleAction() {
     if (err instanceof Error) {
       formErrors.message = err.message
     }
+  } finally {
+    resetSkeleton()
   }
 }
 </script>
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 03f3f7d..08d5d28 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -15,8 +15,6 @@ const formErrors = reactive<{ message: string | null }>({
 watch(isEditEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
-  } else {
-    resetSkeleton()
   }
 })
 
@@ -29,6 +27,8 @@ async function handleAction() {
     if (err instanceof Error) {
       formErrors.message = err.message
     }
+  } finally {
+    resetSkeleton()
   }
 }
 </script>

From 85e67105600090d9d67ecb1fe760cb3e7793ccf0 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 5 Jun 2024 23:24:37 +0200
Subject: [PATCH 7/7] Removed useless prop from alert dialog

---
 components/calendar/form/DeleteEvent.vue | 2 +-
 components/calendar/form/UpdateEvent.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 97a2f59..224d563 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -31,7 +31,7 @@ async function handleAction() {
 </script>
 
 <template>
-  <UiAlertDialog v-model:open="isDeleteEventModalOpen" :modal="true">
+  <UiAlertDialog v-model:open="isDeleteEventModalOpen">
     <UiAlertDialogContent
       :align="'center'"
       :side="'right'"
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 08d5d28..3347aba 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -34,7 +34,7 @@ async function handleAction() {
 </script>
 
 <template>
-  <UiAlertDialog v-model:open="isEditEventModalOpen" :modal="true">
+  <UiAlertDialog v-model:open="isEditEventModalOpen">
     <UiAlertDialogContent
       :align="'center'"
       :side="'right'"