Add quick create event button

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/dialog/CreateEvent.vue

@@ -0,0 +1,67 @@
+<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) {
+    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 />
+    </UiPopoverContent>
+  </UiPopover>
+</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>
+      <UiDialogTitle>
+        {{ $t("entity.calendar.event.addSingle") }}
+      </UiDialogTitle>
+      <CalendarFormCreateEvent />
+    </UiDialogContent>
+  </UiDialog>
+</template>

components/calendar/form/CreateEvent.vue

@@ -2,8 +2,8 @@
 import type { RPGDate } from "~/models/Date";
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
 
-const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const { eventSkeleton } = storeToRefs(useCalendar())
-const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
+const { submitSkeleton, cancelLatestRequest } = useCalendar()
 const popoverOpen = ref(false)
 
 const { t } = useI18n()
@@ -19,26 +19,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
@@ -58,17 +38,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,160 +50,142 @@ function handleCancel() {
 </script>
 
 <template>
-  <UiPopover v-model:open="popoverOpen">
+  <form @submit.prevent="handleSubmit">
-    <UiPopoverTrigger as-child>
+    <div class="grid grid-cols-2 gap-y-3">
-      <button :class="btnClass" @click="openEventCreatePopover()" />
+      <div class="col-span-2 pl-8">
-    </UiPopoverTrigger>
+        <input
-    <UiPopoverContent
+          id="new-event-title"
-      :align="'center'"
+          v-model="eventSkeleton.title"
-      :side="'right'"
+          type="text"
-      :collision-padding="60"
+          name="new-event-title"
-      :disable-outside-pointer-events="true"
+          required
-      :trap-focus="true"
+          :placeholder="$t('entity.calendar.event.title')"
-      class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+          :maxlength="120"
-      @escape-key-down="handleClosing"
+          pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
-      @focus-outside="handleClosing"
+          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"
-      @interact-outside="handleClosing"
+        >
-      @pointer-down-outside="handleClosing"
+
-    >
+        <div class="mt-2 mb-1 text-xs opacity-50">
-      <form @submit.prevent="handleSubmit">
+          {{ t('entity.calendar.event.patterns.title') }}
-        <div class="grid grid-cols-2 gap-y-3">
+        </div>
-          <div class="col-span-2 pl-8">
+      </div>
+
+      <div class="col-span-2 my-2 pl-8">
+        <textarea
+          id="new-event-description"
+          v-model="eventSkeleton.description"
+          name="new-event-description"
+          :placeholder="$t('entity.addDescription')"
+          :maxlength="1200"
+          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 invalid:border-red-500"
+        />
+        <div class="mt-2 mb-1 text-xs opacity-50">
+          {{ t('entity.calendar.event.patterns.description') }}
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhAlarm size="18" weight="fill" />
+
+          <CalendarInputRPGDate
+            v-model:model-value="eventSkeleton.startDate"
+            :placeholder="$t('entity.calendar.date.start')"
+            :initial-date="props.date"
+            :required="true"
+          />
+
+          <span>—</span>
+
+          <CalendarInputRPGDate
+            v-model:model-value="eventSkeleton.endDate"
+            :placeholder="$t('entity.calendar.date.end')"
+            :initial-date="props.date"
+          />
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhTag size="18" weight="fill" />
+
+          <CalendarInputEventCategory
+            v-model="eventSkeleton.category"
+            :placeholder="$t('entity.category.addPrimary')"
+          />
+        </div>
+      </div>
+
+      <!-- <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhTag size="18" weight="fill" />
+
+          <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" :placeholder="$t('entity.category.addSecondaries')" />
+        </div>
+      </div> -->
+
+      <div class="col-span-2 mb-2">
+        <div class="flex items-center gap-4">
+          <PhMapPinArea size="18" weight="fill" />
+
+          <div class="grow">
             <input
-              id="new-event-title"
+              id="new-event-location"
-              v-model="eventSkeleton.title"
+              v-model="eventSkeleton.location"
               type="text"
-              name="new-event-title"
+              name="new-event-location"
-              required
+              :placeholder="$t('entity.calendar.event.addLocation')"
-              :placeholder="$t('entity.calendar.event.title')"
+              :maxlength="160"
-              :maxlength="120"
+              pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
-              pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
+              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
-              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') }}
+              {{ t('entity.calendar.event.patterns.location') }}
             </div>
           </div>
-
-          <div class="col-span-2 my-2 pl-8">
-            <textarea
-              id="new-event-description"
-              v-model="eventSkeleton.description"
-              name="new-event-description"
-              :placeholder="$t('entity.addDescription')"
-              :maxlength="1200"
-              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 invalid:border-red-500"
-            />
-            <div class="mt-2 mb-1 text-xs opacity-50">
-              {{ t('entity.calendar.event.patterns.description') }}
-            </div>
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhAlarm size="18" weight="fill" />
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.startDate"
-                :placeholder="$t('entity.calendar.date.start')"
-                :initial-date="props.date"
-                :required="true"
-              />
-
-              <span>—</span>
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.endDate"
-                :placeholder="$t('entity.calendar.date.end')"
-                :initial-date="props.date"
-              />
-            </div>
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhTag size="18" weight="fill" />
-
-              <CalendarInputEventCategory
-                v-model="eventSkeleton.category"
-                :placeholder="$t('entity.category.addPrimary')"
-              />
-            </div>
-          </div>
-
-          <!-- <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhTag size="18" weight="fill" />
-
-              <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" :placeholder="$t('entity.category.addSecondaries')" />
-            </div>
-          </div> -->
-
-          <div class="col-span-2 mb-2">
-            <div class="flex items-center gap-4">
-              <PhMapPinArea size="18" weight="fill" />
-
-              <div class="grow">
-                <input
-                  id="new-event-location"
-                  v-model="eventSkeleton.location"
-                  type="text"
-                  name="new-event-location"
-                  :placeholder="$t('entity.calendar.event.addLocation')"
-                  :maxlength="160"
-                  pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
-                  class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
-                >
-                <div class="mt-2 mb-1 text-xs opacity-50">
-                  {{ t('entity.calendar.event.patterns.location') }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
-              <PhEyeClosed v-else size="18" />
-
-              <div class="flex items-center gap-x-2">
-                <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
-                <UiLabel for="new-event-visibility">
-                  <template v-if="!eventSkeleton.hidden">
-                    {{ $t('entity.calendar.event.isPublic') }}
-                  </template>
-                  <template v-else>
-                    {{ $t('entity.calendar.event.isHidden') }}
-                  </template>
-                </UiLabel>
-              </div>
-            </div>
-          </div>
-
-          <div class="text-red-500 pl-8">
-            <span class="text-sm">
-              {{ formErrors.message }}
-            </span>
-          </div>
-
-          <div class="flex gap-2 justify-end">
-            <Transition name="fade-delay">
-              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
-                {{ $t('ui.action.cancel') }}
-              </UiButton>
-            </Transition>
-
-            <UiButton size="sm" :disabled="isLoading">
-              <Transition name="fade">
-                <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
-              </Transition>
-
-              {{ $t('ui.action.save') }}
-            </UiButton>
-          </div>
         </div>
-      </form>
+      </div>
-    </UiPopoverContent>
+
-  </UiPopover>
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
+          <PhEyeClosed v-else size="18" />
+
+          <div class="flex items-center gap-x-2">
+            <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+            <UiLabel for="new-event-visibility">
+              <template v-if="!eventSkeleton.hidden">
+                {{ $t('entity.calendar.event.isPublic') }}
+              </template>
+              <template v-else>
+                {{ $t('entity.calendar.event.isHidden') }}
+              </template>
+            </UiLabel>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-red-500 pl-8">
+        <span class="text-sm">
+          {{ formErrors.message }}
+        </span>
+      </div>
+
+      <div class="flex gap-2 justify-end">
+        <Transition name="fade-delay">
+          <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+            {{ $t('ui.action.cancel') }}
+          </UiButton>
+        </Transition>
+
+        <UiButton size="sm" :disabled="isLoading">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+          </Transition>
+
+          {{ $t('ui.action.save') }}
+        </UiButton>
+      </div>
+    </div>
+  </form>
 </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",