From 8cd5835dd8ffded20cc00d852f0dc9fb899968c8 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sat, 13 Sep 2025 15:36:18 -0500
Subject: [PATCH] fix: Can't Edit Timeline Events (#6160)

---
 .../components/Domain/Recipe/RecipeTimeline.vue | 17 +++++++----------
 .../Domain/Recipe/RecipeTimelineItem.vue        |  6 +++---
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeTimeline.vue b/frontend/components/Domain/Recipe/RecipeTimeline.vue
index b40db74d8..3f90a37a6 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeline.vue
@@ -80,7 +80,7 @@
           :recipe="recipes.get(event.recipeId)"
           :show-recipe-cards="showRecipeCards"
           :width="$vuetify.display.smAndDown ? '100%' : undefined"
-          @update="updateTimelineEvent(index)"
+          @update="updateTimelineEvent(index, $event)"
           @delete="deleteTimelineEvent(index)"
         />
       </v-timeline>
@@ -186,20 +186,17 @@ function toggleEventTypeOption(option: TimelineEventType) {
 }
 
 // Timeline Actions
-async function updateTimelineEvent(index: number) {
-  const event = timelineEvents.value[index];
-  const payload: RecipeTimelineEventUpdate = {
-    subject: event.subject,
-    eventMessage: event.eventMessage,
-    image: event.image,
-  };
-
-  const { response } = await api.recipes.updateTimelineEvent(event.id, payload);
+async function updateTimelineEvent(index: number, event: RecipeTimelineEventUpdate) {
+  const eventId = timelineEvents.value[index].id;
+  const { response } = await api.recipes.updateTimelineEvent(eventId, event);
   if (response?.status !== 200) {
     alert.error(i18n.t("events.something-went-wrong") as string);
     return;
   }
 
+  // Update the local event data to reflect the changes in the UI
+  timelineEvents.value[index] = response.data;
+
   alert.success(i18n.t("events.event-updated") as string);
 }
 
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 9edf93485..c8612d635 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -43,7 +43,7 @@
                 edit: true,
                 delete: true,
               }"
-              @update="$emit('update')"
+              @update="$emit('update', $event)"
               @delete="$emit('delete')"
             />
           </v-col>
@@ -96,7 +96,7 @@ import RecipeCardMobile from "./RecipeCardMobile.vue";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useStaticRoutes } from "~/composables/api";
 import { useTimelineEventTypes } from "~/composables/recipes/use-recipe-timeline-events";
-import type { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
+import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
@@ -113,7 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits<{
   selected: [];
-  update: [];
+  update: [event: RecipeTimelineEventUpdate];
   delete: [];
 }>();