Merge pull request #22 from AlexisNP/features/add-quick-actions-for-events

Added quick actions for events

components/calendar/CalendarEvent.vue

@@ -10,29 +10,54 @@ const props = defineProps<{
 }>()
 
 const { areDatesIdentical } = useCalendar()
+const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
+const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
 const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate)
 const isEndEvent = spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate)
 
 const titleCharLimit = 50;
-
 const eventTitle = computed<string>(() => props.event.title.length <= titleCharLimit ? props.event.title : `${props.event.title.slice(0, titleCharLimit)}…`)
 
 // Popover code
 const isPopoverDetailsOpen = ref<boolean>(false)
 
+function handleDoubleClick() {
+  isPopoverDetailsOpen.value = false
+  lastActiveEvent.value = { ...props.event }
+  revealEditEventModal()
+}
+
+function handleDelete() {
+  isPopoverDetailsOpen.value = false
+  lastActiveEvent.value = { ...props.event }
+  revealDeleteEventModal()
+}
+
 function handleClosePopover() {
   isPopoverDetailsOpen.value = false
 }
+
+onMounted(() => {
+  // Listen for keydown events
+  window.addEventListener('keydown', (e: KeyboardEvent) => {
+    // If the popover isn't opened, this is not the event we're trying to delete, so return
+    if (!isPopoverDetailsOpen.value) return
+
+    // If the key isn't the delete one, return
+    if (e.key !== 'Delete') return
+
+    handleDelete()
+  })
+})
 </script>
 
 <template>
   <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
-        id="test"
-        class="text-xs px-2 py-1 block w-full text-left rounded-sm"
+        class="text-xs px-2 py-1 block w-full text-left rounded-sm focus-visible:bg-red-200"
         :class="
           cn({
             'text-white bg-slate-600 hover:bg-slate-700': !event.category,
@@ -58,6 +83,8 @@ function handleClosePopover() {
             'rounded-l-none': isEndEvent
           })
         "
+        @dblclick="handleDoubleClick"
+        @keydown.delete="handleDelete"
       >
         <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}

components/calendar/form/DeleteEvent.vue

@@ -86,20 +86,26 @@ function handleCancel() {
           </div>
         </div>
 
-        <footer class="flex gap-2 justify-end">
-          <Transition name="fade-delay">
-            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
-              Annuler
-            </UiButton>
-          </Transition>
+        <footer class="flex gap-2 justify-between">
+          <UiButton type="button" size="sm" variant="ghost" @click="() => isDeleteEventModalOpen = false">
+            Retour
+          </UiButton>
 
-          <UiButton size="sm" :disabled="isLoading">
-            <Transition name="fade">
-              <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+                Annuler
+              </UiButton>
             </Transition>
 
-            Supprimer
-          </UiButton>
+            <UiButton size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              Supprimer
+            </UiButton>
+          </div>
         </footer>
       </form>
     </UiAlertDialogContent>

components/calendar/form/UpdateEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhMapPinArea, PhPencilSimpleLine } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
 const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
@@ -82,15 +82,20 @@ function handleCancel() {
 
       <form @submit.prevent="handleAction">
         <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 class="col-span-2">
+            <div class="flex items-center gap-2">
+              <PhPencilSimpleLine size="20" weight="fill" />
+
+              <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>
 
           <div class="col-span-2 ml-8">

supabase/seed.sql

@@ -294,7 +294,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  'Grande Banque Minérale',
+  'Grande Bourse Minérale',
   'Les artisans et mineurs de Rougefer se réunissent pour vendre le fruit de leur dur labeur.',
   'Cantane',
   '{ "day": 23, "month": 8, "year": 3209 }',