steps overview in recipe view

vue3/src/components/display/IngredientsTable.vue

@@ -0,0 +1,32 @@
+<template>
+    <v-table density="compact" v-if="ingredients.length > 0">
+        <tbody>
+        <IngredientsTableRow v-for="i in ingredients" :ingredient="i" :key="i.id"></IngredientsTableRow>
+        </tbody>
+    </v-table>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import {Ingredient, Step} from "@/openapi";
+import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
+
+export default defineComponent({
+    name: "IngredientsTable",
+    components: {IngredientsTableRow},
+    props: {
+        ingredients: {
+            type: [] as PropType<Array<Ingredient>>,
+            default: [],
+        },
+    },
+    mounted() {
+
+    }
+})
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/components/display/IngredientsTableRow.vue

@@ -0,0 +1,39 @@
+<template>
+    <tr>
+        <template v-if="ingredient.isHeader">
+            <td colspan="4">{{ ingredient.note }}</td>
+        </template>
+        <td>{{ ingredient.amount }}</td>
+        <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
+        <td>{{ ingredient.food.name }}</td>
+        <td>
+            <v-icon class="far fa-comment" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
+                <v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
+            </v-icon>
+        </td>
+    </tr>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import {Ingredient} from "@/openapi";
+
+export default defineComponent({
+    name: "IngredientsTableRow",
+    props: {
+        ingredient: {
+            type: {} as PropType<Ingredient>,
+            required: true
+        }
+    },
+    data(){
+      return {
+          show_tooltip: false,
+      }
+    },
+})
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/display/RecipeView.vue

@@ -56,25 +56,45 @@
         </v-card-text>
     </v-card>
 
+    <v-card class="mt-1" >
+        <v-card-title>Steps Overview</v-card-title>
+        <StepsOverview :steps="recipe.steps"></StepsOverview>
+    </v-card>
+
 
 </template>
 
 <script lang="ts">
 
 import {defineComponent, PropType} from 'vue'
-import {Recipe} from "@/openapi"
+import {Ingredient, Recipe} from "@/openapi"
 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";
 
 export default defineComponent({
     name: "RecipeView",
-    components: {NumberScalerDialog, KeywordsBar},
+    components: {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: {
             type: Object as PropType<Recipe>,
             required: true
         }
-    }
+    },
+    methods: {}
 })
 </script>
 

vue3/src/components/display/StepsOverview.vue

@@ -0,0 +1,34 @@
+<template>
+    <v-container>
+
+        <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">
+import {defineComponent, PropType} from 'vue'
+import {Step} from "@/openapi";
+import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
+import IngredientsTable from "@/components/display/IngredientsTable.vue";
+
+export default defineComponent({
+    name: "StepsOverview",
+    components: {IngredientsTable, IngredientsTableRow},
+    props: {
+        steps: {
+            type: [] as PropType<Array<Step>>,
+            default: [],
+        },
+    }
+})
+</script>
+
+
+<style scoped>
+
+</style>