From a0fd1f41044d5a475e3734cdc598d519076d46cd Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 18 Jan 2022 14:00:25 +0100
Subject: [PATCH] fixed step header rendering

---
 vue/src/components/IngredientsCard.vue | 41 +++++++++++++++++---------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/vue/src/components/IngredientsCard.vue b/vue/src/components/IngredientsCard.vue
index 9f385e578..60637c5a7 100644
--- a/vue/src/components/IngredientsCard.vue
+++ b/vue/src/components/IngredientsCard.vue
@@ -7,7 +7,8 @@
                 </div>
                 <div class="col col-md-6 text-right" v-if="header">
                     <h4>
-                        <i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2" @click="saveShopping(true)"></i>
+                        <i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2"
+                           @click="saveShopping(true)"></i>
                         <i v-if="show_shopping" class="fas fa-save text-success px-2" @click="saveShopping()"></i>
                         <i class="fas fa-shopping-cart px-2" @click="getShopping()"></i>
                     </h4>
@@ -15,15 +16,21 @@
             </div>
             <div class="row text-right" v-if="ShoppingRecipes.length > 1">
                 <div class="col col-md-6 offset-md-6 text-right">
-                    <b-form-select v-model="selected_shoppingrecipe" :options="ShoppingRecipes" size="sm"></b-form-select>
+                    <b-form-select v-model="selected_shoppingrecipe" :options="ShoppingRecipes"
+                                   size="sm"></b-form-select>
                 </div>
             </div>
-            <br v-if="header" />
+            <br v-if="header"/>
             <div class="row no-gutter">
                 <div class="col-md-12">
                     <table class="table table-sm">
                         <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-                        <template v-for="s in steps">
+                        <template v-for="s in steps" >
+                            <tr v-bind:key="s.id" v-if="s.show_as_header">
+                                <td colspan="5" @click="done">
+                                    <b>{{ s.name }}</b>
+                                </td>
+                            </tr>
                             <template v-for="i in s.ingredients">
                                 <ingredient-component
                                     :ingredient="i"
@@ -49,17 +56,18 @@
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import IngredientComponent from "@/components/IngredientComponent"
-import { ApiMixin, StandardToasts } from "@/utils/utils"
+import {ApiMixin, StandardToasts} from "@/utils/utils"
+
 Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientCard",
     mixins: [ApiMixin],
-    components: { IngredientComponent },
+    components: {IngredientComponent},
     props: {
         steps: {
             type: Array,
@@ -67,12 +75,12 @@ export default {
                 return []
             },
         },
-        recipe: { type: Number },
-        ingredient_factor: { type: Number, default: 1 },
-        servings: { type: Number, default: 1 },
-        detailed: { type: Boolean, default: true },
-        header: { type: Boolean, default: false },
-        add_shopping_mode: { type: Boolean, default: false },
+        recipe: {type: Number},
+        ingredient_factor: {type: Number, default: 1},
+        servings: {type: Number, default: 1},
+        detailed: {type: Boolean, default: true},
+        header: {type: Boolean, default: false},
+        add_shopping_mode: {type: Boolean, default: false},
     },
     data() {
         return {
@@ -87,7 +95,12 @@ export default {
             // returns open shopping lists associated with this recipe
             let recipe_in_list = this.shopping_list
                 .map((x) => {
-                    return { value: x?.list_recipe, text: x?.recipe_mealplan?.name, recipe: x?.recipe_mealplan?.recipe ?? 0, servings: x?.recipe_mealplan?.servings }
+                    return {
+                        value: x?.list_recipe,
+                        text: x?.recipe_mealplan?.name,
+                        recipe: x?.recipe_mealplan?.recipe ?? 0,
+                        servings: x?.recipe_mealplan?.servings
+                    }
                 })
                 .filter((x) => x?.recipe == this.recipe)
             return [...new Map(recipe_in_list.map((x) => [x["value"], x])).values()] //  filter to unique lists