Merge pull request #54 from AlexisNP/features/add-create-event-button

Features/add create event button

components/calendar/Calendar.vue

@@ -53,8 +53,8 @@ onMounted(() => {
       <component :is="currentViewComponent" />
 
       <CalendarSearch />
-      <CalendarFormUpdateEvent />
+      <CalendarDialogUpdateEvent />
-      <CalendarFormDeleteEvent />
+      <CalendarDialogDeleteEvent />
     </div>
   </div>
 </template>

components/calendar/CalendarEventDetails.vue

@@ -46,6 +46,7 @@ function deployEditModal() {
   lastActiveEvent.value = { ...props.event }
   revealEditEventModal()
   commandMenuOpened.value = false
+  emit("query:close-popover")
 }
 
 /**
@@ -55,6 +56,7 @@ function deployDeleteModal() {
   lastActiveEvent.value = { ...props.event }
   revealDeleteEventModal()
   commandMenuOpened.value = false
+  emit("query:close-popover")
 }
 </script>
 

components/calendar/CalendarMenu.vue

@@ -10,7 +10,10 @@ const { revealAdvancedSearch } = useCalendar()
   <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
     <div class="px-6 flex justify-between">
       <menu class="flex items-center gap-2">
-        <li class="flex items-center">
+        <li>
+          <CalendarDialogQuickCreateEvent />
+        </li>
+        <li>
           <CalendarMenuToday />
         </li>
         <li>

components/calendar/CalendarMenuToday.vue

@@ -14,7 +14,7 @@ const buttonDisabledState: ComputedRef<boolean> = computed<boolean>(() => {
   <UiTooltipProvider :delay-duration="250">
     <UiTooltip>
       <UiTooltipTrigger as-child>
-        <UiButton size="sm" :disabled="buttonDisabledState" @click="jumpToDefaultDate">
+        <UiButton size="sm" variant="secondary" :disabled="buttonDisabledState" @click="jumpToDefaultDate">
           {{ $t('entity.calendar.date.today') }}
         </UiButton>
       </UiTooltipTrigger>

components/calendar/dialog/CreateEvent.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { RPGDate } from "~/models/Date";
+
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const { resetSkeleton } = useCalendar()
+const popoverOpen = ref(false)
+
+const isLoading = ref(false)
+
+const props = defineProps<{
+  date?: RPGDate
+  btnClass?: string
+}>()
+
+/**
+ * Opens event creation's popover
+ */
+function openEventCreatePopover() {
+  // If another operation is in progress, whether it's another create popup or a modal, don't bother opening it
+  if (operationInProgress.value) {
+    popoverOpen.value = false
+    return
+  }
+
+  resetSkeleton()
+
+  popoverOpen.value = true
+
+  // Set skeleton initial startDate if it's known
+  if (props.date) {
+    eventSkeleton.value.startDate = { ...props.date } // We need to clone it otherwise the props ends up mutating (?)
+  }
+}
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  if (isLoading.value) {
+    popoverOpen.value = false
+    e.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <UiPopover v-model:open="popoverOpen">
+    <UiPopoverTrigger as-child>
+      <button :class="btnClass" @click="openEventCreatePopover()" />
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      :align="'center'"
+      :side="'right'"
+      :collision-padding="60"
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <CalendarFormCreateEvent @event-created="handleClosing" />
+    </UiPopoverContent>
+  </UiPopover>
+</template>

components/calendar/dialog/DeleteEvent.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
+
+const isLoading = ref<boolean>(false)
+
+// Watch the popover state
+watch(isDeleteEventModalOpen, (hasOpened, _o) => {
+  if (hasOpened && lastActiveEvent.value) {
+    eventSkeleton.value = { ...lastActiveEvent.value }
+  }
+})
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event): void {
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog v-model:open="isDeleteEventModalOpen">
+    <UiAlertDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <UiAlertDialogTitle>{{ $t('entity.calendar.event.deleteDialog.title') }}</UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        {{ $t('entity.calendar.event.deleteDialog.subtitle') }}
+      </UiAlertDialogDescription>
+
+      <CalendarFormDeleteEvent />
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>

components/calendar/dialog/QuickCreateEvent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { PhPlus } from "@phosphor-icons/vue";
+
+const isDialogOpen = ref<boolean>(false);
+
+// Toggles the dialog
+function toggleDialog() {
+  isDialogOpen.value = !isDialogOpen.value;
+};
+</script>
+
+<template>
+  <UiButton @click="toggleDialog">
+    <PhPlus size="18" weight="bold" />
+
+    <strong class="font-semibold">
+      {{ $t("entity.calendar.event.newEvent") }}
+    </strong>
+  </UiButton>
+
+  <UiDialog v-model:open="isDialogOpen">
+    <UiDialogContent class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950">
+      <UiDialogTitle>
+        {{ $t("entity.calendar.event.addSingle") }}
+      </UiDialogTitle>
+      <CalendarFormCreateEvent />
+    </UiDialogContent>
+  </UiDialog>
+</template>

components/calendar/dialog/UpdateEvent.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
+
+const isLoading = ref(false)
+
+// Watch the popover state
+watch(isEditEventModalOpen, (hasOpened, _o) => {
+  if (hasOpened && lastActiveEvent.value) {
+    eventSkeleton.value = { ...lastActiveEvent.value }
+  }
+})
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <UiDialog v-model:open="isEditEventModalOpen">
+    <UiDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="(e) => e.preventDefault()"
+    >
+      <header class="pl-8 grid gap-y-2">
+        <UiDialogTitle>
+          {{ $t('entity.calendar.event.editDialog.title') }}
+        </UiDialogTitle>
+
+        <UiDialogDescription>
+          {{ $t('entity.calendar.event.editDialog.subtitle') }}
+        </UiDialogDescription>
+      </header>
+
+      <CalendarFormUpdateEvent />
+    </UiDialogContent>
+  </UiDialog>
+</template>

components/calendar/form/CreateEvent.vue

@@ -2,9 +2,10 @@
 import type { RPGDate } from "~/models/Date";
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
 
-const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const emit = defineEmits(["event-created"])
-const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
+
-const popoverOpen = ref(false)
+const { eventSkeleton } = storeToRefs(useCalendar())
+const { submitSkeleton, cancelLatestRequest } = useCalendar()
 
 const { t } = useI18n()
 
@@ -19,26 +20,6 @@ const props = defineProps<{
   btnClass?: string
 }>()
 
-/**
- * Opens event creation's popover
- */
-function openEventCreatePopover() {
-  // If another operation is in progress, whether it's another create popup or a modal, don't bother opening it
-  if (operationInProgress.value) {
-    popoverOpen.value = false
-    return
-  }
-
-  resetSkeleton()
-
-  popoverOpen.value = true
-
-  // Set skeleton initial startDate if it's known
-  if (props.date) {
-    eventSkeleton.value.startDate = { ...props.date } // We need to clone it otherwise the props ends up mutating (?)
-  }
-}
-
 async function handleSubmit() {
   // Prevent form submission if already loading
   if (isLoading.value) return
@@ -48,7 +29,7 @@ async function handleSubmit() {
   try {
     await submitSkeleton()
 
-    popoverOpen.value = false
+    emit("event-created")
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
@@ -58,17 +39,6 @@ async function handleSubmit() {
   }
 }
 
-/**
- * Prevents the modal from closing if's still loading
- *
- * @param e The closing event (can be keydown or click)
- */
-function handleClosing(e: Event) {
-  if (isLoading.value) {
-    e.preventDefault()
-  }
-}
-
 /**
  * Click on the cancel button
  *
@@ -81,22 +51,6 @@ function handleCancel() {
 </script>
 
 <template>
-  <UiPopover v-model:open="popoverOpen">
-    <UiPopoverTrigger as-child>
-      <button :class="btnClass" @click="openEventCreatePopover()" />
-    </UiPopoverTrigger>
-    <UiPopoverContent
-      :align="'center'"
-      :side="'right'"
-      :collision-padding="60"
-      :disable-outside-pointer-events="true"
-      :trap-focus="true"
-      class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @focus-outside="handleClosing"
-      @interact-outside="handleClosing"
-      @pointer-down-outside="handleClosing"
-    >
   <form @submit.prevent="handleSubmit">
     <div class="grid grid-cols-2 gap-y-3">
       <div class="col-span-2 pl-8">
@@ -111,7 +65,6 @@ function handleCancel() {
           pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
           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 invalid:border-red-500"
         >
-
         <div class="mt-2 mb-1 text-xs opacity-50">
           {{ t('entity.calendar.event.patterns.title') }}
         </div>
@@ -235,6 +188,4 @@ function handleCancel() {
       </div>
     </div>
   </form>
-    </UiPopoverContent>
-  </UiPopover>
 </template>

components/calendar/form/DeleteEvent.vue

@@ -3,7 +3,7 @@ import { PhCircleNotch } from "@phosphor-icons/vue";
 import { useToast } from "~/components/ui/toast";
 
 const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
-const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
+const { isDeleteEventModalOpen, eventSkeleton } = storeToRefs(useCalendar())
 
 const { toast } = useToast()
 const { t } = useI18n()
@@ -14,13 +14,6 @@ const formErrors = reactive<{ message: string | null }>({
   message: null
 })
 
-// Watch the popover state
-watch(isDeleteEventModalOpen, (hasOpened, _o) => {
-  if (hasOpened && lastActiveEvent.value) {
-    eventSkeleton.value = { ...lastActiveEvent.value }
-  }
-})
-
 async function handleAction(): Promise<void> {
   if (isLoading.value) return
 
@@ -48,17 +41,6 @@ async function handleAction(): Promise<void> {
   }
 }
 
-/**
- * Prevents the modal from closing if's still loading
- *
- * @param e The closing event (can be keydown or click)
- */
-function handleClosing(e: Event): void {
-  if (isLoading.value) {
-    e.preventDefault()
-  }
-}
-
 /**
  * Click on the cancel button
  *
@@ -71,22 +53,6 @@ function handleCancel(): void {
 </script>
 
 <template>
-  <UiAlertDialog v-model:open="isDeleteEventModalOpen">
-    <UiAlertDialogContent
-      :disable-outside-pointer-events="true"
-      :trap-focus="true"
-      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @focus-outside="handleClosing"
-      @interact-outside="handleClosing"
-      @pointer-down-outside="handleClosing"
-    >
-      <UiAlertDialogTitle>{{ $t('entity.calendar.event.deleteDialog.title') }}</UiAlertDialogTitle>
-
-      <UiAlertDialogDescription>
-        {{ $t('entity.calendar.event.deleteDialog.subtitle') }}
-      </UiAlertDialogDescription>
-
   <form @submit.prevent="handleAction">
     <div class="grid grid-cols-2 gap-y-4">
       <div class="text-red-500 ml-8">
@@ -118,6 +84,4 @@ function handleCancel(): void {
       </div>
     </footer>
   </form>
-    </UiAlertDialogContent>
-  </UiAlertDialog>
 </template>

components/calendar/form/UpdateEvent.vue

@@ -4,7 +4,7 @@ import { useToast } from "~/components/ui/toast";
 import type { APIError } from "~/models/Errors";
 
 const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
-const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
+const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
 const { toast } = useToast()
 const { t } = useI18n()
@@ -15,13 +15,6 @@ const formErrors = reactive<{ message: string | null }>({
   message: null
 })
 
-// Watch the popover state
-watch(isEditEventModalOpen, (hasOpened, _o) => {
-  if (hasOpened && lastActiveEvent.value) {
-    eventSkeleton.value = { ...lastActiveEvent.value }
-  }
-})
-
 async function handleAction() {
   if (isLoading.value) return
 
@@ -44,18 +37,6 @@ async function handleAction() {
   } finally {
     resetSkeleton()
     isLoading.value = false
-    isEditEventModalOpen.value = false
-  }
-}
-
-/**
- * Prevents the modal from closing if's still loading
- *
- * @param e The closing event (can be keydown or click)
- */
-function handleClosing(e: Event) {
-  if (isLoading.value) {
-    e.preventDefault()
   }
 }
 
@@ -71,26 +52,6 @@ function handleCancel() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isEditEventModalOpen">
-    <UiDialogContent
-      :disable-outside-pointer-events="true"
-      :trap-focus="true"
-      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @focus-outside="handleClosing"
-      @interact-outside="handleClosing"
-      @pointer-down-outside="(e) => e.preventDefault()"
-    >
-      <header class="pl-8 grid gap-y-2">
-        <UiDialogTitle>
-          {{ $t('entity.calendar.event.editDialog.title') }}
-        </UiDialogTitle>
-
-        <UiDialogDescription>
-          {{ $t('entity.calendar.event.editDialog.subtitle') }}
-        </UiDialogDescription>
-      </header>
-
   <form @submit.prevent="handleAction">
     <div class="grid grid-cols-2 gap-y-3">
       <div class="col-span-2">
@@ -239,6 +200,4 @@ function handleCancel() {
       </UiButton>
     </footer>
   </form>
-    </UiDialogContent>
-  </UiDialog>
 </template>

components/calendar/state/monthly/DayTile.vue

@@ -143,7 +143,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     </ClientOnly>
 
     <ClientOnly>
-      <LazyCalendarFormCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
+      <LazyCalendarDialogCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
     </ClientOnly>
   </div>
 </template>

i18n.config.ts

@@ -127,6 +127,8 @@ export default defineI18nConfig(() => ({
           event: {
             nameSingular: "Event",
             namePlural: "Events",
+            addSingle: "Add an event",
+            newEvent: "New event",
             title: "Event title",
             isStart: "Start",
             isEnd: "End",
@@ -348,6 +350,8 @@ export default defineI18nConfig(() => ({
           event: {
             nameSingular: "Évènement",
             namePlural: "Évènements",
+            addSingle: "Ajouter un évènement",
+            newEvent: "Nouvel évènement",
             title: "Titre de l'évènement",
             isStart: "Début",
             isEnd: "Fin",