add food substitutions

vue/src/components/Badges/OnHand.vue

@@ -1,13 +1,6 @@
 <template>
     <span>
-        <b-button
-            class="btn text-decoration-none fas px-1 py-0 border-0"
-            variant="link"
-            v-b-popover.hover.html
-            :title="[onhand ? $t('FoodOnHand', { food: item.name }) : $t('FoodNotOnHand', { food: item.name })]"
-            :class="[onhand ? 'text-success fa-clipboard-check' : 'text-muted fa-clipboard']"
-            @click="toggleOnHand"
-        />
+        <b-button v-if="!item.ignore_shopping" class="btn text-decoration-none fas px-1 py-0 border-0" variant="link" v-b-popover.hover.html :title="Title" :class="IconClass" @click="toggleOnHand" />
     </span>
 </template>
 
@@ -25,6 +18,26 @@ export default {
             onhand: false,
         }
     },
+    computed: {
+        Title: function () {
+            if (this.onhand) {
+                return this.$t("FoodOnHand", { food: this.item.name })
+            } else if (this.item.substitute_onhand) {
+                return this.$t("SubstituteOnHand")
+            } else {
+                return this.$t("FoodNotOnHand", { food: this.item.name })
+            }
+        },
+        IconClass: function () {
+            if (this.onhand) {
+                return "text-success fa-clipboard-check"
+            } else if (this.item.substitute_onhand) {
+                return "text-warning fa-clipboard-check"
+            } else {
+                return "text-muted fa-clipboard"
+            }
+        },
+    },
     mounted() {
         this.onhand = this.item.food_onhand
     },

vue/src/components/IngredientComponent.vue

@@ -33,6 +33,7 @@
                 </div>
             </td>
             <td v-else-if="show_shopping" class="text-right text-nowrap">
+                <shopping-badge v-if="ingredient.food.ignore_shopping" :item="shoppingBadgeFood" />
                 <b-button
                     v-if="!ingredient.food.ignore_shopping"
                     class="btn text-decoration-none fas fa-shopping-cart px-2 user-select-none"
@@ -56,10 +57,11 @@
 <script>
 import { calculateAmount, ResolveUrlMixin, ApiMixin } from "@/utils/utils"
 import OnHandBadge from "@/components/Badges/OnHand"
+import ShoppingBadge from "@/components/Badges/Shopping"
 
 export default {
     name: "IngredientComponent",
-    components: { OnHandBadge },
+    components: { OnHandBadge, ShoppingBadge },
     props: {
         ingredient: Object,
         ingredient_factor: { type: Number, default: 1 },
@@ -87,6 +89,11 @@ export default {
         this.shop = this.ingredient?.shop
     },
     computed: {
+        shoppingBadgeFood() {
+            // shopping badge is hidden when ignore_shopping=true.
+            // force true in this context to allow adding to shopping list from recipe view
+            return { ...this.ingredient.food, ignore_shopping: false }
+        },
         ShoppingPopover() {
             if (this.ingredient?.shopping_status == false) {
                 return this.$t("NotInShopping", { food: this.ingredient.food.name })

vue/src/components/IngredientsCard.vue

@@ -56,7 +56,6 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import IngredientComponent from "@/components/IngredientComponent"
 import { ApiMixin, StandardToasts } from "@/utils/utils"
-import ShoppingListViewVue from "../apps/ShoppingListView/ShoppingListView.vue"
 
 Vue.use(BootstrapVue)
 

vue/src/components/Modals/GenericModalForm.vue

@@ -16,8 +16,11 @@
                 <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
             </div>
             <template v-slot:modal-footer>
-                <div class="row w-100 justify-content-end">
-                    <div class="col-auto">
+                <div class="row w-100">
+                    <div class="col-6 align-self-end">
+                        <b-form-checkbox v-if="advancedForm" sm switch v-model="show_advanced">{{ $t("Advanced") }}</b-form-checkbox>
+                    </div>
+                    <div class="col-auto justify-content-end">
                         <b-button class="mx-1" variant="secondary" v-on:click="cancelAction">{{ $t("Cancel") }}</b-button>
                         <b-button class="mx-1" variant="primary" v-on:click="doAction">{{ form.ok_label }}</b-button>
                     </div>
@@ -78,7 +81,8 @@ export default {
             form: {},
             dirty: false,
             special_handling: false,
-            show_help: true,
+            show_help: false,
+            show_advanced: false,
         }
     },
     mounted() {
@@ -86,6 +90,13 @@ export default {
         this.$root.$on("change", this.storeValue) // bootstrap modal placed at document so have to listen at root of component
     },
     computed: {
+        advancedForm() {
+            return this.form.fields
+                .map((x) => {
+                    return x?.advanced ?? false
+                })
+                .includes(true)
+        },
         buttonLabel() {
             return this.buttons[this.action].label
         },
@@ -268,6 +279,11 @@ export default {
         visibleCondition(field, field_type) {
             let type_match = field?.type == field_type
             let checks = true
+            let show_advanced = true
+            if (field?.advanced) {
+                show_advanced = this.show_advanced
+            }
+
             if (type_match && field?.condition) {
                 const value = this.item1[field?.condition?.field]
                 const preference = getUserPreference(field?.condition?.field)
@@ -294,7 +310,7 @@ export default {
                         }
                 }
             }
-            return type_match && checks
+            return type_match && checks && show_advanced
         },
     },
 }

vue/src/components/Modals/ShoppingModal.vue

@@ -55,7 +55,7 @@
                     </b-input-group-prepend>
 
                     <b-form-spinbutton min="1" v-model="recipe_servings" inline style="height: 3em"></b-form-spinbutton>
-                    <CustomInputSpinButton v-model.number="recipe_servings" style="height: 3em" />
+                    <!-- <CustomInputSpinButton v-model.number="recipe_servings" style="height: 3em" /> -->
 
                     <b-input-group-append>
                         <b-button variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t("Cancel") }} </b-button>
@@ -76,11 +76,11 @@ const { ApiApiFactory } = require("@/utils/openapi/api")
 import { StandardToasts } from "@/utils/utils"
 import IngredientsCard from "@/components/IngredientsCard"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import CustomInputSpinButton from "@/components/CustomInputSpinButton"
+// import CustomInputSpinButton from "@/components/CustomInputSpinButton"
 
 export default {
     name: "ShoppingModal",
-    components: { IngredientsCard, LoadingSpinner, CustomInputSpinButton },
+    components: { IngredientsCard, LoadingSpinner },
     mixins: [],
     props: {
         recipe: { required: true, type: Object },