fix: Add snackbar to indicate unsaved changes

mealie-recipes · Jan 27, 2025 · 0524a1b · 0524a1b
1 parent f10e133
commit 0524a1b
Showing 1 changed file with 33 additions and 6 deletions.
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -1,5 +1,20 @@
 <template>
   <div>
+    <v-snackbar
+      v-model="snackbar"
+      :timeout="0"
+      top
+    >
+      {{ snackbarText }}
+      <template v-slot:action="{ attrs }">
+        <v-btn text v-bind="attrs" @click="discardChanges">
+          {{ discardText }}
+        </v-btn>
+        <v-btn color="primary" text v-bind="attrs" @click="saveRecipe">
+          {{ saveText }}
+        </v-btn>
+      </template>
+    </v-snackbar>
     <v-container v-show="!isCookMode" key="recipe-page" :class="{ 'pa-0': $vuetify.breakpoint.smAndDown }">
       <v-card :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
         <RecipePageHeader
@@ -174,6 +189,7 @@ import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.
 import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
 import { useNavigationWarning } from "~/composables/use-navigation-warning";
 
+
 const EDITOR_OPTIONS = {
   mode: "code",
   search: false,
@@ -204,7 +220,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { $auth } = useContext();
+    const { $auth, $vuetify, i18n } = useContext();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const { isOwnGroup } = useLoggedInState();
@@ -225,7 +241,7 @@ export default defineComponent({
      * this is used to determine if the recipe has been changed since the last save
      * and prompts the user to save if they have unsaved changes.
      */
-    const originalRecipe = ref<Recipe | null>(null);
+    const originalRecipe = ref<Recipe>({});
 
     invoke(async () => {
       await until(props.recipe).not.toBeNull();
@@ -267,14 +283,14 @@ export default defineComponent({
     });
 
     /** =============================================================
-     * Recipe Save Delete
+     * Recipe Save Delete Cancel
      */
 
     async function saveRecipe() {
       const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
       setMode(PageMode.VIEW);
       if (data?.slug) {
-        Object.assign(originalRecipe.value, props.recipe);
+        originalRecipe.value = deepCopy(props.recipe);
         router.push(`/g/${groupSlug.value}/r/${data.slug}`);
       }
     }
@@ -286,10 +302,17 @@ export default defineComponent({
       }
     }
 
+    async function discardChanges() {
+      Object.assign(props.recipe, originalRecipe.value);
+    }
+
+    const snackbar = computed(() => {
+      return JSON.stringify(props.recipe) !== JSON.stringify(originalRecipe.value) && pageMode.value == PageMode.VIEW;
+    })
+
     /** =============================================================
      * View Preferences
      */
-    const { $vuetify, i18n } = useContext();
 
     const landscape = computed(() => {
       const preferLandscape = props.recipe.settings.landscapeView;
@@ -348,7 +371,10 @@ export default defineComponent({
       scale: ref(1),
       EDITOR_OPTIONS,
       landscape,
-
+      snackbar,
+      snackbarText: i18n.tc("general.unsaved-changes"),
+      saveText: i18n.tc('general.save'),
+      discardText: i18n.tc('general.cancel'),
       pageMode,
       editMode,
       PageMode,
@@ -360,6 +386,7 @@ export default defineComponent({
       toggleCookMode,
       saveRecipe,
       deleteRecipe,
+      discardChanges,
       addStep,
       hasLinkedIngredients,
       notLinkedIngredients,