From 8913a7d1b3b23091c60c98495eff9b799f28fdff Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 10:35:53 +0200
Subject: [PATCH 1/6] Added double click for quick edit

---
 components/calendar/CalendarEvent.vue        | 9 +++++++++
 components/calendar/CalendarEventDetails.vue | 1 +
 2 files changed, 10 insertions(+)

diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 736b6cb..fe1abba 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -10,6 +10,8 @@ const props = defineProps<{
 }>()
 
 const { areDatesIdentical } = useCalendar()
+const { revealEditEventModal } = useCalendarEvents()
+const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
 const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate)
@@ -22,6 +24,12 @@ const eventTitle = computed<string>(() => props.event.title.length <= titleCharL
 // Popover code
 const isPopoverDetailsOpen = ref<boolean>(false)
 
+function handleDoubleClick() {
+  isPopoverDetailsOpen.value = false
+  lastActiveEvent.value = { ...props.event }
+  revealEditEventModal()
+}
+
 function handleClosePopover() {
   isPopoverDetailsOpen.value = false
 }
@@ -58,6 +66,7 @@ function handleClosePopover() {
             'rounded-l-none': isEndEvent
           })
         "
+        @dblclick="handleDoubleClick"
       >
         <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 3ae0c96..7a14659 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -67,6 +67,7 @@ function deployDeleteModal() {
     :side="'left'"
     :collision-padding="60"
     :hide-when-detached="true"
+    :disable-outside-pointer-events="true"
     :class="{
       'border-slate-800': !event.category,
       'border-lime-800': event.category?.name === 'naissance',

From 78c138760296801b9fef3ed18f568c007c427843 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 10:44:45 +0200
Subject: [PATCH 2/6] Added delete for quick removal

---
 components/calendar/CalendarEvent.vue        | 12 +++++++++---
 components/calendar/CalendarEventDetails.vue |  1 -
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index fe1abba..c0f0811 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const { areDatesIdentical } = useCalendar()
-const { revealEditEventModal } = useCalendarEvents()
+const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
 const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
@@ -30,6 +30,12 @@ function handleDoubleClick() {
   revealEditEventModal()
 }
 
+function handleDelete() {
+  isPopoverDetailsOpen.value = false
+  lastActiveEvent.value = { ...props.event }
+  revealDeleteEventModal()
+}
+
 function handleClosePopover() {
   isPopoverDetailsOpen.value = false
 }
@@ -39,8 +45,7 @@ function handleClosePopover() {
   <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,
@@ -67,6 +72,7 @@ function handleClosePopover() {
           })
         "
         @dblclick="handleDoubleClick"
+        @keydown.delete="handleDelete"
       >
         <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 7a14659..3ae0c96 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -67,7 +67,6 @@ function deployDeleteModal() {
     :side="'left'"
     :collision-padding="60"
     :hide-when-detached="true"
-    :disable-outside-pointer-events="true"
     :class="{
       'border-slate-800': !event.category,
       'border-lime-800': event.category?.name === 'naissance',

From 017b54dec779d3bf816b7f2dae5d360ab8339c21 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 10:49:48 +0200
Subject: [PATCH 3/6] Added pencil icon to edit modal

---
 components/calendar/form/UpdateEvent.vue | 25 ++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 4e072f7..3f64638 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/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">

From 8d19f0aca285873516f2cddc50d2637654d1512d Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 10:54:07 +0200
Subject: [PATCH 4/6] Made delete button destructive

---
 components/calendar/form/DeleteEvent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index caeb0a0..3160339 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -93,7 +93,7 @@ function handleCancel() {
             </UiButton>
           </Transition>
 
-          <UiButton size="sm" :disabled="isLoading">
+          <UiButton size="sm" variant="destructive" :disabled="isLoading">
             <Transition name="fade">
               <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
             </Transition>

From f4ad06d74465476762f33eb68d220413152cca20 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 11:37:30 +0200
Subject: [PATCH 5/6] Added back button for delete modal

---
 components/calendar/form/DeleteEvent.vue | 28 ++++++++++++++----------
 supabase/seed.sql                        |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 3160339..3c3ebaf 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/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" variant="destructive" :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>
diff --git a/supabase/seed.sql b/supabase/seed.sql
index 5a22b1d..ccdda57 100644
--- a/supabase/seed.sql
+++ b/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 }',

From f7c135f49873f6731d139ffb0052cc1e34c551fe Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 12:37:01 +0200
Subject: [PATCH 6/6] Added quick delete if the popover for one event is
 deployed

---
 components/calendar/CalendarEvent.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index c0f0811..8abdc39 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -18,7 +18,6 @@ const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, prop
 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
@@ -39,6 +38,19 @@ function handleDelete() {
 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>