steps

vue3/src/components/display/IngredientsTable.vue

@@ -16,7 +16,7 @@ export default defineComponent({
     components: {IngredientsTableRow},
     props: {
         ingredients: {
-            type: [] as PropType<Array<Ingredient>>,
+            type: Array as PropType<Array<Ingredient>>,
             default: [],
         },
     },

vue3/src/components/display/RecipeView.vue

@@ -56,12 +56,15 @@
         </v-card-text>
     </v-card>
 
-    <v-card class="mt-1" >
-        <v-card-title>Steps Overview</v-card-title>
+    <v-card class="mt-1">
         <StepsOverview :steps="recipe.steps"></StepsOverview>
     </v-card>
 
 
+    <v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
+        <Step :step="s"></Step>
+    </v-card>
+
 </template>
 
 <script lang="ts">
@@ -72,21 +75,13 @@ import KeywordsBar from "@/components/display/KeywordsBar.vue"
 import NumberScalerDialog from "@/components/inputs/NumberScalerDialog.vue"
 import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import StepsOverview from "@/components/display/StepsOverview.vue";
+import Step from "@/components/display/Step.vue";
 
 export default defineComponent({
     name: "RecipeView",
-    components: {StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
+    components: {Step, StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
     computed: {
-        allIngredients: function () {
-            let ingredients = [] as Ingredient[]
-            if(this.recipe.steps !== undefined){
-                this.recipe.steps.forEach((s) => {
-                    ingredients = ingredients.concat(s.ingredients)
-                })
-            }
 
-            return ingredients
-        }
     },
     props: {
         recipe: {

vue3/src/components/display/Step.vue

@@ -0,0 +1,42 @@
+<template>
+    <v-card>
+        <v-card-title>
+            <v-row>
+                <v-col>{{ step.name }}</v-col>
+                <v-col class="text-right">
+                    <v-btn-group density="compact" variant="tonal">
+                        <v-btn size="small" color="info" v-if="step.time > 0"><i class="fas fa-stopwatch mr-1"></i> {{ step.time }}</v-btn>
+                        <v-btn size="small" color="success" ><i class="fas fa-check"></i></v-btn>
+                    </v-btn-group>
+                </v-col>
+            </v-row>
+        </v-card-title>
+
+        <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
+
+        <v-card-text v-if="step.instruction?.length > 0">
+            {{ step.instruction }}
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import IngredientsTable from "@/components/display/IngredientsTable.vue";
+import {Step} from "@/openapi";
+
+export default defineComponent({
+    name: "Step",
+    components: {IngredientsTable},
+    props: {
+        step: {
+            type: {} as PropType<Step>,
+            required: true,
+        }
+    }
+})
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/display/StepsOverview.vue

@@ -1,13 +1,20 @@
 <template>
-    <v-container>
+    <v-expansion-panels>
+        <v-expansion-panel title="Steps Overview">
+            <v-expansion-panel-text>
+                <v-container>
+                    <v-row v-for="(s, i) in steps">
+                        <v-col class="pa-1">
+                            <b v-if="s.showAsHeader">{{ i + 1 }}. {{ s.name }} </b>
+                            <IngredientsTable :ingredients="s.ingredients"></IngredientsTable>
+                        </v-col>
+                    </v-row>
+                </v-container>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+
+    </v-expansion-panels>
 
-        <v-row v-for="(s, i) in steps" >
-            <v-col class="pa-1">
-                <b v-if="s.showAsHeader">{{i}}. {{ s.name }} </b>
-                <IngredientsTable :ingredients="s.ingredients"></IngredientsTable>
-            </v-col>
-        </v-row>
-    </v-container>
 </template>
 
 <script lang="ts">
@@ -21,7 +28,7 @@ export default defineComponent({
     components: {IngredientsTable, IngredientsTableRow},
     props: {
         steps: {
-            type: [] as PropType<Array<Step>>,
+            type: Array as PropType<Array<Step>>,
             default: [],
         },
     }