This commit is contained in:
SrGesus 2025-06-16 10:19:29 -07:00 committed by GitHub
commit ff6999fb95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,5 +1,20 @@
<template> <template>
<div> <div>
<v-snackbar
v-model="snackbar"
:timeout="0"
top
>
{{ snackbarText }}
<template #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-container v-show="!isCookMode" key="recipe-page" :class="{ 'pa-0': $vuetify.breakpoint.smAndDown }">
<v-card :flat="$vuetify.breakpoint.smAndDown" class="d-print-none"> <v-card :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
<RecipePageHeader <RecipePageHeader
@ -204,7 +219,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const { $auth } = useContext(); const { $auth, $vuetify, i18n } = useContext();
const route = useRoute(); const route = useRoute();
const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || ""); const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();
@ -234,7 +249,7 @@ export default defineComponent({
onUnmounted(async () => { onUnmounted(async () => {
const isSame = JSON.stringify(props.recipe) === JSON.stringify(originalRecipe.value); const isSame = JSON.stringify(props.recipe) === JSON.stringify(originalRecipe.value);
if (isEditMode.value && !isSame && props.recipe?.slug !== undefined) { if (!isSame && props.recipe?.slug !== undefined) {
const save = window.confirm( const save = window.confirm(
i18n.tc("general.unsaved-changes"), i18n.tc("general.unsaved-changes"),
); );
@ -267,14 +282,15 @@ export default defineComponent({
}); });
/** ============================================================= /** =============================================================
* Recipe Save Delete * Recipe Save Delete Cancel
*/ */
async function saveRecipe() { async function saveRecipe() {
const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe); const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
setMode(PageMode.VIEW); setMode(PageMode.VIEW);
if (data?.slug) { if (data?.slug) {
router.push(`/g/${groupSlug.value}/r/` + data.slug); originalRecipe.value = deepCopy(props.recipe);
router.push(`/g/${groupSlug.value}/r/${data.slug}`);
} }
} }
@ -285,10 +301,17 @@ export default defineComponent({
} }
} }
function discardChanges() {
Object.assign(props.recipe, originalRecipe.value);
}
const snackbar = computed(() => {
return JSON.stringify(props.recipe) !== JSON.stringify(originalRecipe.value) && pageMode.value !== PageMode.EDIT;
})
/** ============================================================= /** =============================================================
* View Preferences * View Preferences
*/ */
const { $vuetify, i18n } = useContext();
const landscape = computed(() => { const landscape = computed(() => {
const preferLandscape = props.recipe.settings.landscapeView; const preferLandscape = props.recipe.settings.landscapeView;
@ -347,7 +370,10 @@ export default defineComponent({
scale: ref(1), scale: ref(1),
EDITOR_OPTIONS, EDITOR_OPTIONS,
landscape, landscape,
snackbar,
snackbarText: i18n.tc("general.unsaved-changes"),
saveText: i18n.tc("general.save"),
discardText: i18n.tc("general.cancel"),
pageMode, pageMode,
editMode, editMode,
PageMode, PageMode,
@ -359,6 +385,7 @@ export default defineComponent({
toggleCookMode, toggleCookMode,
saveRecipe, saveRecipe,
deleteRecipe, deleteRecipe,
discardChanges,
addStep, addStep,
hasLinkedIngredients, hasLinkedIngredients,
notLinkedIngredients, notLinkedIngredients,