improved sub recipe rendering

This commit is contained in:
vabene1111
2025-08-16 13:59:25 +02:00
parent 5128fcc9eb
commit 460cb43113
2 changed files with 17 additions and 5 deletions

View File

@@ -35,11 +35,11 @@
</v-card-text>
<template v-if="step.stepRecipe">
<v-card-text>
<v-card class="mt-1" v-for="(subRecipeStep, subRecipeStepIndex) in step.stepRecipeData.steps" :key="subRecipeStep.id">
<v-card class="ma-2 border-md" prepend-icon="$recipes" :title="step.stepRecipeData.name">
<v-card-text class="mt-1" v-for="(subRecipeStep, subRecipeStepIndex) in step.stepRecipeData.steps" :key="subRecipeStep.id">
<step-view v-model="step.stepRecipeData.steps[subRecipeStepIndex]" :step-number="subRecipeStepIndex+1" :ingredientFactor="ingredientFactor"></step-view>
</v-card>
</v-card-text>
</v-card-text>
</v-card>
</template>
<template v-if="step.file">
<v-img :src="step.file.preview" v-if="step.file.preview"></v-img>

View File

@@ -1,13 +1,24 @@
<template>
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> {{$t('StepsOverview')}}</v-expansion-panel-title>
<v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> {{ $t('StepsOverview') }}</v-expansion-panel-title>
<v-expansion-panel-text>
<v-container>
<v-row v-for="(s, i) in props.steps">
<v-col class="pa-1" cols="12" md="6">
<b v-if="s.showAsHeader">{{ i + 1 }}. {{ s.name }} </b>
<ingredients-table v-model="s.ingredients" :ingredient-factor="props.ingredientFactor"></ingredients-table>
<template v-if="s.stepRecipe">
<v-card class="ma-2 border-md" prepend-icon="$recipes" :title="s.stepRecipeData.name"
:to="{name: 'RecipeViewPage', params: {id: s.stepRecipeData.id}}" target="_blank">
<v-row v-for="subRecipeStep in s.stepRecipeData.steps">
<v-col>
<ingredients-table v-model="subRecipeStep.ingredients" :ingredient-factor="props.ingredientFactor"></ingredients-table>
</v-col>
</v-row>
</v-card>
</template>
</v-col>
</v-row>
</v-container>
@@ -22,6 +33,7 @@
import {PropType} from 'vue'
import {Step} from "@/openapi";
import IngredientsTable from "@/components/display/IngredientsTable.vue";
import StepView from "@/components/display/StepView.vue";
const props = defineProps({
steps: {