Moved event modal states and functions to event store

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>

components/calendar/CalendarEventDetails.vue

@@ -11,8 +11,8 @@ import {
   PhDotsThreeOutlineVertical
 } from '@phosphor-icons/vue'
 
-const { defaultDate, getFormattedDateTitle, jumpToDate, revealEditEventModal, getRelativeString } = useCalendar()
+const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
-const { deleteEvent } = useCalendarEvents()
+const { deleteEvent, revealEditEventModal } = useCalendarEvents()
 const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{

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>

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,

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
+  }
 })