From 373484f17c6eb2d5446be61507a453c2676bb03f Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 4 Jun 2024 18:31:26 +0200
Subject: [PATCH] Added transition to updating event

---
 components/calendar/CalendarEvent.vue         |  1 -
 components/calendar/form/UpdateEvent.vue      |  2 +-
 components/calendar/state/monthly/DayTile.vue | 25 ++++++++++++++++---
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index bf08ba4..0fa5535 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -60,7 +60,6 @@ function handleClosePopover() {
     </UiPopoverTrigger>
 
     <CalendarEventDetails
-      v-once
       :event
       :spans-multiple-days
       :is-start-event
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index fe932d4..58c4c8a 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -101,7 +101,7 @@ async function handleSubmit() {
           </div>
 
           <div class="text-right">
-            <UiButton size="sm">
+            <UiButton size="sm" type="submit">
               Sauvegarder
             </UiButton>
           </div>
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 4d2be2f..48f3bca 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -107,9 +107,11 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
           'opacity-40': props.faded && !isSelectedDate
         }"
       >
-        <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
-          <CalendarEventButton :event :tile-date="date" />
-        </li>
+        <TransitionGroup name="event">
+          <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
+            <CalendarEventButton :event :tile-date="date" />
+          </li>
+        </TransitionGroup>
 
         <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
           <UiPopover>
@@ -159,4 +161,21 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     border-top-width: 1px;
   }
 }
+
+.event-enter-active {
+  transition: all 120ms ease-in-out;
+}
+.event-leave-active {
+  transition: all 180ms ease-in-out;
+}
+.event-enter-from,
+.event-leave-to {
+  opacity: 0;
+}
+.event-enter-from {
+  transform: translateX(.15rem);
+}
+.event-leave-to {
+  transform: translateX(-.5rem);
+}
 </style>