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

recipe scale

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 09:13:33 +00:00
commit 6dfa186a41
2 changed files with 10 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,7 +37,7 @@
<RecipePageIngredientEditor v-if="isEditForm" v-model="recipe" /> <RecipePageIngredientEditor v-if="isEditForm" v-model="recipe" />
</div> </div>
<div> <div>
<RecipePageScale v-model:scale="scale" :recipe="recipe" /> <RecipePageScale v-model="scale" :recipe="recipe" />
</div> </div>
<!-- <!--
@ -96,7 +96,7 @@
<v-row style="height: 100%" no-gutters class="overflow-hidden"> <v-row style="height: 100%" no-gutters class="overflow-hidden">
<v-col cols="12" sm="5" class="overflow-y-auto pl-4 pr-3 py-2" style="height: 100%"> <v-col cols="12" sm="5" class="overflow-y-auto pl-4 pr-3 py-2" style="height: 100%">
<div class="d-flex align-center"> <div class="d-flex align-center">
<RecipePageScale v-model:scale="scale" :recipe="recipe" /> <RecipePageScale v-model="scale" :recipe="recipe" />
</div> </div>
<RecipePageIngredientToolsView <RecipePageIngredientToolsView
v-if="!isEditForm" v-if="!isEditForm"
@ -124,7 +124,7 @@
</v-sheet> </v-sheet>
<v-sheet v-show="isCookMode && hasLinkedIngredients"> <v-sheet v-show="isCookMode && hasLinkedIngredients">
<div class="mt-2 px-2 px-md-4"> <div class="mt-2 px-2 px-md-4">
<RecipePageScale v-model:scale="scale" :recipe="recipe" /> <RecipePageScale v-model="scale" :recipe="recipe" />
</div> </div>
<RecipePageInstructions <RecipePageInstructions
v-model="recipe.recipeInstructions" v-model="recipe.recipeInstructions"

41
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
View file

@ -2,55 +2,26 @@
<div class="d-flex justify-space-between align-center pt-2 pb-3"> <div class="d-flex justify-space-between align-center pt-2 pb-3">
<RecipeScaleEditButton <RecipeScaleEditButton
v-if="!isEditMode" v-if="!isEditMode"
v-model.number="scaleValue" v-model.number="scale"
:recipe-servings="recipeServings" :recipe-servings="recipeServings"
:edit-scale="!recipe.settings.disableAmount && !isEditMode" :edit-scale="!recipe.settings.disableAmount && !isEditMode"
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue"; import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
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";
import { usePageState } from "~/composables/recipe-page/shared-state"; import { usePageState } from "~/composables/recipe-page/shared-state";
export default defineNuxtComponent({ const props = defineProps<{ recipe: NoUndefinedField<Recipe> }>();
components: {
RecipeScaleEditButton, const scale = defineModel<number>({ default: 1 });
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
scale: {
type: Number,
default: 1,
},
},
emits: ["update:scale"],
setup(props, { emit }) {
const { isEditMode } = usePageState(props.recipe.slug); const { isEditMode } = usePageState(props.recipe.slug);
const recipeServings = computed<number>(() => { const recipeServings = computed<number>(() => {
return props.recipe.recipeServings || props.recipe.recipeYieldQuantity || 1; return props.recipe.recipeServings || props.recipe.recipeYieldQuantity || 1;
}); });
const scaleValue = computed<number>({
get() {
return props.scale;
},
set(val) {
emit("update:scale", val);
},
});
return {
recipeServings,
scaleValue,
isEditMode,
};
},
});
</script> </script>