mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-07 23:28:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

recipe view as model chain and ingredient checkbox

Browse Source
This commit is contained in:
vabene1111
2024-12-31 15:23:44 +01:00
parent 545c464f4f
commit 846a4796e2
40 changed files with 113 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
vue3/src/components/display/RecipeView.vue
View File

@@ -1,5 +1,5 @@
<template>
<template v-if="props.recipe.name == undefined">
<template v-if="recipe.name == undefined">
<v-skeleton-loader type="card" class="mt-md-4 rounded-0"></v-skeleton-loader>
<v-skeleton-loader type="article" class="mt-2"></v-skeleton-loader>
<v-skeleton-loader type="article" class="mt-2"></v-skeleton-loader>
@@ -8,17 +8,17 @@
<v-skeleton-loader type="list-item-avatar-three-line"></v-skeleton-loader>
</template>
<template v-if="props.recipe.name != undefined">
<template v-if="recipe.name != undefined">
<v-card class="mt-md-4 rounded-0">
<recipe-image
max-height="25vh"
:recipe="props.recipe"
:recipe="recipe"
v-if="recipe.internal"
>
<template #overlay>
<v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ props.recipe.createdBy.displayName }}</v-chip>
<keywords-component variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></keywords-component>
<v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ recipe.createdBy.displayName }}</v-chip>
<keywords-component variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></keywords-component>
</template>
</recipe-image>
@@ -26,7 +26,7 @@
<v-card>
<v-sheet class="d-flex align-center">
<span class="ps-2 text-h5 flex-grow-1 pa-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
{{ props.recipe.name }}
{{ recipe.name }}
</span>
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
</v-sheet>
@@ -42,18 +42,18 @@
<v-container>
<v-row class="text-center text-body-2">
<v-col class="pt-1 pb-1">
<i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
<i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} min<br/>
<div class="text-grey">{{ $t('WorkingTime') }}</div>
</v-col>
<v-col class="pt-1 pb-1">
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} min</div>
<div class="text-grey">{{ $t('WaitingTime') }}</div>
</v-col>
<v-col class="pt-1 pb-1">
<div class="cursor-pointer">
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
<div class="text-grey"><span v-if="recipe.servingsText">{{ recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
<number-scaler-dialog :number="servings" @confirm="(s: number) => {servings = s}" title="Servings">
</number-scaler-dialog>
</div>
@@ -64,12 +64,12 @@
</v-container>
</v-card>
<v-card class="mt-1" v-if="props.recipe.steps.length > 1">
<steps-overview :steps="props.recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
<v-card class="mt-1" v-if="recipe.steps.length > 1">
<steps-overview :steps="recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
</v-card>
<v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
<step :step="step" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
<v-card class="mt-1" v-for="(step, index) in recipe.steps" :key="step.id">
<step v-model="recipe.steps[index]" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
</v-card>
</template>
@@ -94,23 +94,22 @@ import PdfViewer from "../../../../vue/src/components/PdfViewer.vue";
import ImageViewer from "../../../../vue/src/components/ImageViewer.vue";
import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
const recipe = defineModel<Recipe>({required: true})
const props = defineProps({
recipe: {
type: Object as PropType<Recipe>,
required: true
}
})
const servings = ref(1)
const showFullRecipeName = ref(false)
const ingredientFactor = computed(() => {
return servings.value / ((props.recipe.servings != undefined) ? props.recipe.servings : 1)
return servings.value / ((recipe.value.servings != undefined) ? recipe.value.servings : 1)
})
watch(() => props.recipe.servings, () => {
if (props.recipe.servings) {
servings.value = props.recipe.servings
watch(() => recipe.value.servings, () => {
if (recipe.value.servings) {
servings.value = recipe.value.servings
}
})