github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-23 06:45:22 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

recipe editor toolbar use v-model instead of prop and turn into script setup

Browse source
This commit is contained in:
Kuchenpirat 2025-06-19 09:35:35 +00:00
commit de1d9c5959
2 changed files with 30 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View file

@ -31,7 +31,7 @@
<RecipePageInfoEditor v-if="isEditMode" :recipe="recipe" :landscape="landscape" /> <RecipePageInfoEditor v-if="isEditMode" :recipe="recipe" :landscape="landscape" />
</div> </div>
<div> <div>
<RecipePageEditorToolbar v-if="isEditForm" :recipe="recipe" /> <RecipePageEditorToolbar v-if="isEditForm" v-model="recipe" />
</div> </div>
<div> <div>
<RecipePageIngredientEditor v-if="isEditForm" :recipe="recipe" /> <RecipePageIngredientEditor v-if="isEditForm" :recipe="recipe" />

44
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
View file

@ -47,7 +47,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { computed } from "vue";
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
@ -58,57 +59,34 @@ import { useUserStore } from "~/composables/store/use-user-store";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue"; import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import { useHouseholdStore } from "~/composables/store"; import { useHouseholdStore } from "~/composables/store";
export default defineNuxtComponent({ const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
components: {
RecipeImageUploadBtn,
RecipeSettingsMenu,
UserAvatar,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
},
setup(props) {
const { user } = usePageUser(); const { user } = usePageUser();
const api = useUserApi(); const api = useUserApi();
const { imageKey } = usePageState(props.recipe.slug); const { imageKey } = usePageState(recipe.value.slug);
const canEditOwner = computed(() => { const canEditOwner = computed(() => {
return user.id === props.recipe.userId || user.admin; return user.id === recipe.value.userId || user.admin;
}); });
const { store: allUsers } = useUserStore(); const { store: allUsers } = useUserStore();
const { store: households } = useHouseholdStore(); const { store: households } = useHouseholdStore();
const ownerHousehold = computed(() => { const ownerHousehold = computed(() => {
const owner = allUsers.value.find(u => u.id === props.recipe.userId); const owner = allUsers.value.find(u => u.id === recipe.value.userId);
if (!owner) { if (!owner) {
return null; return null;
}; }
return households.value.find(h => h.id === owner.householdId); return households.value.find(h => h.id === owner.householdId);
}); });
async function uploadImage(fileObject: File) { async function uploadImage(fileObject: File) {
if (!props.recipe || !props.recipe.slug) { if (!recipe.value || !recipe.value.slug) {
return; return;
} }
const newVersion = await api.recipes.updateImage(props.recipe.slug, fileObject); const newVersion = await api.recipes.updateImage(recipe.value.slug, fileObject);
if (newVersion?.data?.image) { if (newVersion?.data?.image) {
props.recipe.image = newVersion.data.image; recipe.value.image = newVersion.data.image;
} }
imageKey.value++; imageKey.value++;
} }
return {
user,
canEditOwner,
uploadImage,
imageKey,
allUsers,
ownerHousehold,
};
},
});
</script> </script>