mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-07 15:18:20 -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

22
vue3/src/components/display/Step.vue
View File

@@ -2,11 +2,11 @@
<v-card>
<v-card-title>
<v-row>
<v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
<v-col><span v-if="step.name">{{ step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
<v-col class="text-right">
<v-btn-group density="compact" variant="tonal">
<v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i
class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}
<v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}
</v-btn>
<v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw"
:class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i>
@@ -16,14 +16,14 @@
</v-row>
</v-card-title>
<template v-if="!stepChecked">
<timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
<timer :seconds="step.time != undefined ? step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
<v-card-text>
<v-row>
<v-col cols="12" md="6" v-if="props.step?.ingredients.length > 0">
<ingredients-table :ingredients="props.step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
<v-col cols="12" md="6" v-if="step.ingredients.length > 0">
<ingredients-table v-model="step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
</v-col>
<v-col cols="12" md="6">
<instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
<instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
</v-col>
</v-row>
</v-card-text>
@@ -41,11 +41,9 @@ import {Step} from "@/openapi";
import Instructions from "@/components/display/Instructions.vue";
import Timer from "@/components/display/Timer.vue";
const step = defineModel<Step>({required: true})
const props = defineProps({
step: {
type: {} as PropType<Step>,
required: true,
},
stepNumber: {
type: Number,
required: false,
@@ -61,7 +59,7 @@ const timerRunning = ref(false)
const stepChecked = ref(false)
const hasDetails = computed(() => {
return props.step.ingredients.length > 0 || (props.step.instruction != undefined && props.step.instruction.length > 0) || props.step.stepRecipeData != undefined || props.step.file != undefined
return step.value.ingredients.length > 0 || (step.value.instruction != undefined && step.value.instruction.length > 0) || step.value.stepRecipeData != undefined || step.value.file != undefined
})
</script>