added toast alerts for each step

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -120,8 +120,9 @@
 <script lang="ts">
 import { whenever } from "@vueuse/core";
 import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
 import { useHouseholdSelf } from "~/composables/use-households";
-import type { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
+import type { Recipe, RecipeTimelineEventIn, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
 import type { VForm } from "~/types/auto-forms";
 
 export default defineNuxtComponent({
@@ -198,6 +199,17 @@ export default defineNuxtComponent({
     }
 
     const state = reactive({ datePickerMenu: false, madeThisFormLoading: false });
+
+    function resetMadeThisForm() {
+      state.madeThisFormLoading = false;
+
+      newTimelineEvent.value.eventMessage = "";
+      newTimelineEvent.value.timestamp = undefined;
+      clearImage();
+      madeThisDialog.value = false;
+      domMadeThisForm.value?.reset();
+    }
+
     async function createTimelineEvent() {
       if (!(newTimelineEventTimestampString.value && props.recipe?.id && props.recipe?.slug)) {
         return;
@@ -213,17 +225,35 @@ export default defineNuxtComponent({
       // we choose the end of day so it always comes after "new recipe" events
       newTimelineEvent.value.timestamp = new Date(newTimelineEventTimestampString.value + "T23:59:59").toISOString();
 
+      let newEvent: RecipeTimelineEventOut | null = null;
+      try {
         const eventResponse = await userApi.recipes.createTimelineEvent(newTimelineEvent.value);
-      const newEvent = eventResponse.data;
+        newEvent = eventResponse.data;
+        if (!newEvent) {
+          throw new Error("No event created");
+        }
+      } catch (error) {
+        console.error("Failed to create timeline event:", error);
+        alert.error(i18n.t("recipe.failed-to-add-to-timeline"));
+        resetMadeThisForm();
+        return;
+      }
 
       // we also update the recipe's last made value
       if (!lastMade.value || newTimelineEvent.value.timestamp > lastMade.value) {
+        try {
           lastMade.value = newTimelineEvent.value.timestamp;
           await userApi.recipes.updateLastMade(props.recipe.slug, newTimelineEvent.value.timestamp);
+        } catch (error) {
+          console.error("Failed to update last made date:", error);
+          alert.error(i18n.t("recipe.failed-to-update-recipe"));
+        }
       }
 
       // update the image, if provided
-      if (newTimelineEventImage.value && newEvent) {
+      let imageError = false;
+      if (newTimelineEventImage.value) {
+        try {
           const imageResponse = await userApi.recipes.updateTimelineEventImage(
             newEvent.id,
             newTimelineEventImage.value,
@@ -232,16 +262,19 @@ export default defineNuxtComponent({
           if (imageResponse.data) {
             newEvent.image = imageResponse.data.image;
           }
+        } catch (error) {
+          imageError = true;
+          console.error("Failed to upload image for timeline event:", error);
+        }
       }
 
-      // reset form
+      if (imageError) {
-      newTimelineEvent.value.eventMessage = "";
+        alert.error(i18n.t("recipe.added-to-timeline-but-failed-to-add-image"));
-      newTimelineEvent.value.timestamp = undefined;
+      } else {
-      clearImage();
+        alert.success(i18n.t("recipe.added-to-timeline"));
-      madeThisDialog.value = false;
+      }
-      state.madeThisFormLoading = false;
-      domMadeThisForm.value?.reset();
 
+      resetMadeThisForm();
       context.emit("eventCreated", newEvent);
     }
 

frontend/lang/messages/en-US.json

@@ -579,6 +579,10 @@
     "made-this": "I Made This",
     "how-did-it-turn-out": "How did it turn out?",
     "user-made-this": "{user} made this",
+    "added-to-timeline": "Added to timeline",
+    "failed-to-add-to-timeline": "Failed to add to timeline",
+    "failed-to-update-recipe": "Failed to update recipe",
+    "added-to-timeline-but-failed-to-add-image": "Added to timeline, but failed to add image",
     "api-extras-description": "Recipes extras are a key feature of the Mealie API. They allow you to create custom JSON key/value pairs within a recipe, to reference from 3rd party applications. You can use these keys to provide information, for example to trigger automations or custom messages to relay to your desired device.",
     "message-key": "Message Key",
     "parse": "Parse",