fix Shopping Modal to filter onhand from initial list

This commit is contained in:
smilerz 2021-12-20 14:59:56 -06:00
parent 2d94cb70ab
commit e66897c1ea

View File

@ -1,158 +1,177 @@
<template> <template>
<div> <div>
<b-modal :id="`shopping_${this.modal_id}`" hide-footer @show="loadRecipe"> <b-modal :id="`shopping_${this.modal_id}`" hide-footer @show="loadRecipe">
<template v-slot:modal-title><h4>{{$t('Add_Servings_to_Shopping',{'servings': servings})}}</h4></template> <template v-slot:modal-title
<loading-spinner v-if="loading"></loading-spinner> ><h4>{{ $t("Add_Servings_to_Shopping", { servings: servings }) }}</h4></template
<div class="accordion" role="tablist" v-if="!loading"> >
<b-card no-body class="mb-1"> <loading-spinner v-if="loading"></loading-spinner>
<b-card-header header-tag="header" class="p-1" role="tab"> <div class="accordion" role="tablist" v-if="!loading">
<b-button block v-b-toggle.accordion-0 class="text-left" variant="outline-info">{{recipe.name}}</b-button> <b-card no-body class="mb-1">
</b-card-header>
<b-collapse id="accordion-0" visible accordion="my-accordion" role="tabpanel">
<ingredients-card
:steps="steps"
:recipe="recipe.id"
:ingredient_factor="ingredient_factor"
:servings="servings"
:show_shopping="true"
:add_shopping_mode="true"
:header="false"
@add-to-shopping="addShopping($event)"
/>
</b-collapse>
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="r in related_recipes">
<b-card no-body class="mb-1" :key="r.recipe.id">
<b-card-header header-tag="header" class="p-1" role="tab"> <b-card-header header-tag="header" class="p-1" role="tab">
<b-button btn-sm block v-b-toggle="'accordion-' +r.recipe.id" class="text-left" variant="outline-primary">{{r.recipe.name}}</b-button> <b-button block v-b-toggle.accordion-0 class="text-left" variant="outline-info">{{ recipe.name }}</b-button>
</b-card-header> </b-card-header>
<b-collapse :id="'accordion-'+r.recipe.id" accordion="my-accordion" role="tabpanel"> <b-collapse id="accordion-0" visible accordion="my-accordion" role="tabpanel">
<ingredients-card <ingredients-card
:steps="r.steps" :steps="steps"
:recipe="r.recipe.id" :recipe="recipe.id"
:ingredient_factor="ingredient_factor" :ingredient_factor="ingredient_factor"
:servings="servings" :servings="servings"
:show_shopping="true" :show_shopping="true"
:add_shopping_mode="true" :add_shopping_mode="true"
:header="false" :header="false"
@add-to-shopping="addShopping($event)" @add-to-shopping="addShopping($event)"
/> />
</b-collapse> </b-collapse>
</b-card> <!-- eslint-disable vue/no-v-for-template-key-on-child -->
</template> <template v-for="r in related_recipes">
<!-- eslint-disable vue/no-v-for-template-key-on-child --> <b-card no-body class="mb-1" :key="r.recipe.id">
</b-card> <b-card-header header-tag="header" class="p-1" role="tab">
<b-button btn-sm block v-b-toggle="'accordion-' + r.recipe.id" class="text-left" variant="outline-primary">{{ r.recipe.name }}</b-button>
</div> </b-card-header>
<div class="row mt-3 mb-3"> <b-collapse :id="'accordion-' + r.recipe.id" accordion="my-accordion" role="tabpanel">
<div class="col-12 text-right"> <ingredients-card
<b-button class="mx-2" variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t('Cancel') }} :steps="r.steps"
</b-button> :recipe="r.recipe.id"
<b-button class="mx-2" variant="success" @click="saveShopping">{{ $t('Save') }} :ingredient_factor="ingredient_factor"
</b-button> :servings="servings"
:show_shopping="true"
:add_shopping_mode="true"
:header="false"
@add-to-shopping="addShopping($event)"
/>
</b-collapse>
</b-card>
</template>
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
</b-card>
</div> </div>
</div> <div class="row mt-3 mb-3">
</b-modal> <div class="col-12 text-right">
<b-button class="mx-2" variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t("Cancel") }} </b-button>
<b-button class="mx-2" variant="success" @click="saveShopping">{{ $t("Save") }} </b-button>
</div>
</div>
</b-modal>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from "vue"
import {BootstrapVue} from 'bootstrap-vue' import { BootstrapVue } from "bootstrap-vue"
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
const {ApiApiFactory} = require("@/utils/openapi/api"); const { ApiApiFactory } = require("@/utils/openapi/api")
import {StandardToasts} from "@/utils/utils"; import { StandardToasts } from "@/utils/utils"
import IngredientsCard from "@/components/IngredientsCard"; import IngredientsCard from "@/components/IngredientsCard"
import LoadingSpinner from "@/components/LoadingSpinner"; import LoadingSpinner from "@/components/LoadingSpinner"
export default { export default {
name: 'ShoppingModal', name: "ShoppingModal",
components: {IngredientsCard, LoadingSpinner}, components: { IngredientsCard, LoadingSpinner },
mixins: [], mixins: [],
props: { props: {
recipe: {required: true, type: Object}, recipe: { required: true, type: Object },
servings: {type: Number}, servings: { type: Number },
modal_id: {required: true, type: Number}, modal_id: { required: true, type: Number },
},
data() {
return {
loading: true,
steps: [],
recipe_servings: 0,
add_shopping: [],
related_recipes: []
}
},
mounted() {
},
computed: {
ingredient_factor: function () {
return this.servings / this.recipe.servings || this.recipe_servings
}, },
}, data() {
watch: { return {
loading: true,
}, steps: [],
methods: { recipe_servings: 0,
loadRecipe: function() { add_shopping: [],
this.add_shopping = [] related_recipes: [],
this.related_recipes = [] }
let apiClient = new ApiApiFactory()
apiClient.retrieveRecipe(this.recipe.id).then((result) => {
this.steps = result.data.steps
// ALERT: this will all break if ingredients are re-used between recipes
// ALERT: this also doesn't quite work right if the same recipe appears multiple time in the related recipes
this.add_shopping = [...this.add_shopping, ...this.steps.map(x => x.ingredients).flat().map(x => x.id)]
this.recipe_servings = result.data?.servings
this.loading = false
})
// get a list of related recipes
apiClient.relatedRecipe(this.recipe.id).then((result) => {
return result.data
}).then((related_recipes) => {
let promises = []
related_recipes.forEach(x => {
promises.push(apiClient.listSteps(x.id).then((recipe_steps) => {
this.related_recipes.push({
'recipe': x,
'steps': recipe_steps.data.results.filter(x => x.ingredients.length > 0)
})
}))
})
return Promise.all(promises)
}).then(() => {
this.add_shopping = [
...this.add_shopping,
...this.related_recipes.map(x => x.steps).flat().map(x => x.ingredients).flat().map(x => x.id)
]
})
}, },
addShopping: function(e) { mounted() {},
if (e.add) { computed: {
this.add_shopping.push(e.item.id) ingredient_factor: function () {
} else { return this.servings / this.recipe.servings || this.recipe_servings
this.add_shopping = this.add_shopping.filter(x => x !== e.item.id) },
} },
watch: {},
methods: {
loadRecipe: function () {
this.add_shopping = []
this.related_recipes = []
let apiClient = new ApiApiFactory()
apiClient
.retrieveRecipe(this.recipe.id)
.then((result) => {
this.steps = result.data.steps
// ALERT: this will all break if ingredients are re-used between recipes
// ALERT: this also doesn't quite work right if the same recipe appears multiple time in the related recipes
this.add_shopping = [
...this.add_shopping,
...this.steps
.map((x) => x.ingredients)
.flat()
.filter((x) => !x.food.on_hand && !x.food.ignore_shopping)
.map((x) => x.id),
]
this.recipe_servings = result.data?.servings
this.loading = false
})
.then(() => {
// get a list of related recipes
apiClient
.relatedRecipe(this.recipe.id)
.then((result) => {
return result.data
})
.then((related_recipes) => {
let promises = []
related_recipes.forEach((x) => {
promises.push(
apiClient.listSteps(x.id).then((recipe_steps) => {
this.related_recipes.push({
recipe: x,
steps: recipe_steps.data.results.filter((x) => x.ingredients.length > 0),
})
})
)
})
return Promise.all(promises)
})
.then(() => {
this.add_shopping = [
...this.add_shopping,
...this.related_recipes
.map((x) => x.steps)
.flat()
.map((x) => x.ingredients)
.flat()
.filter((x) => !x.food.on_hand && !x.food.ignore_shopping)
.map((x) => x.id),
]
})
})
},
addShopping: function (e) {
if (e.add) {
this.add_shopping.push(e.item.id)
} else {
this.add_shopping = this.add_shopping.filter((x) => x !== e.item.id)
}
},
saveShopping: function () {
// another choice would be to create ShoppingListRecipes for each recipe - this bundles all related recipe under the parent recipe
let shopping_recipe = {
id: this.recipe.id,
ingredients: this.add_shopping,
servings: this.servings,
}
let apiClient = new ApiApiFactory()
apiClient
.shoppingRecipe(this.recipe.id, shopping_recipe)
.then((result) => {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
})
.catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
})
this.$bvModal.hide(`shopping_${this.modal_id}`)
},
}, },
saveShopping: function() {
// another choice would be to create ShoppingListRecipes for each recipe - this bundles all related recipe under the parent recipe
let shopping_recipe = {
'id': this.recipe.id,
'ingredients': this.add_shopping,
'servings': this.servings
}
let apiClient = new ApiApiFactory()
apiClient.shoppingRecipe(this.recipe.id, shopping_recipe).then((result) => {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
}).catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
})
this.$bvModal.hide(`shopping_${this.modal_id}`)
}
}
} }
</script> </script>