cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix Shopping Modal to filter onhand from initial list

Browse Source
This commit is contained in:
smilerz 2021-12-20 14:59:56 -06:00
parent 2d94cb70ab
commit e66897c1ea
1 changed files with 158 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
vue/src/components/Modals/ShoppingModal.vue
View File

@ -1,12 +1,14 @@
<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
><h4>{{ $t("Add_Servings_to_Shopping", { servings: servings }) }}</h4></template
>
<loading-spinner v-if="loading"></loading-spinner> <loading-spinner v-if="loading"></loading-spinner>
<div class="accordion" role="tablist" v-if="!loading"> <div class="accordion" role="tablist" v-if="!loading">
<b-card no-body class="mb-1"> <b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab"> <b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.accordion-0 class="text-left" variant="outline-info">{{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-0" visible accordion="my-accordion" role="tabpanel"> <b-collapse id="accordion-0" visible accordion="my-accordion" role="tabpanel">
<ingredients-card <ingredients-card
@ -24,9 +26,9 @@
<template v-for="r in related_recipes"> <template v-for="r in related_recipes">
<b-card no-body class="mb-1" :key="r.recipe.id"> <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 btn-sm block v-b-toggle="'accordion-' + r.recipe.id" class="text-left" variant="outline-primary">{{ r.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-' + r.recipe.id" accordion="my-accordion" role="tabpanel">
<ingredients-card <ingredients-card
:steps="r.steps" :steps="r.steps"
:recipe="r.recipe.id" :recipe="r.recipe.id"
@ -42,14 +44,11 @@
</template> </template>
<!-- eslint-disable vue/no-v-for-template-key-on-child --> <!-- eslint-disable vue/no-v-for-template-key-on-child -->
</b-card> </b-card>
</div> </div>
<div class="row mt-3 mb-3"> <div class="row mt-3 mb-3">
<div class="col-12 text-right"> <div class="col-12 text-right">
<b-button class="mx-2" variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t('Cancel') }} <b-button class="mx-2" variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t("Cancel") }} </b-button>
</b-button> <b-button class="mx-2" variant="success" @click="saveShopping">{{ $t("Save") }} </b-button>
<b-button class="mx-2" variant="success" @click="saveShopping">{{ $t('Save') }}
</b-button>
</div> </div>
</div> </div>
</b-modal> </b-modal>
@ -57,25 +56,23 @@
</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() { data() {
return { return {
@ -83,76 +80,98 @@ export default {
steps: [], steps: [],
recipe_servings: 0, recipe_servings: 0,
add_shopping: [], add_shopping: [],
related_recipes: [] related_recipes: [],
} }
}, },
mounted() { mounted() {},
},
computed: { computed: {
ingredient_factor: function () { ingredient_factor: function () {
return this.servings / this.recipe.servings || this.recipe_servings return this.servings / this.recipe.servings || this.recipe_servings
}, },
}, },
watch: { watch: {},
},
methods: { methods: {
loadRecipe: function() { loadRecipe: function () {
this.add_shopping = [] this.add_shopping = []
this.related_recipes = [] this.related_recipes = []
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.retrieveRecipe(this.recipe.id).then((result) => { apiClient
.retrieveRecipe(this.recipe.id)
.then((result) => {
this.steps = result.data.steps this.steps = result.data.steps
// ALERT: this will all break if ingredients are re-used between recipes // 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 // 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.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.recipe_servings = result.data?.servings
this.loading = false this.loading = false
}) })
.then(() => {
// get a list of related recipes // get a list of related recipes
apiClient.relatedRecipe(this.recipe.id).then((result) => { apiClient
.relatedRecipe(this.recipe.id)
.then((result) => {
return result.data 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)
}) })
})) .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) return Promise.all(promises)
}).then(() => { })
.then(() => {
this.add_shopping = [ this.add_shopping = [
...this.add_shopping, ...this.add_shopping,
...this.related_recipes.map(x => x.steps).flat().map(x => x.ingredients).flat().map(x => x.id) ...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) { addShopping: function (e) {
if (e.add) { if (e.add) {
this.add_shopping.push(e.item.id) this.add_shopping.push(e.item.id)
} else { } else {
this.add_shopping = this.add_shopping.filter(x => x !== e.item.id) this.add_shopping = this.add_shopping.filter((x) => x !== e.item.id)
} }
}, },
saveShopping: function() { saveShopping: function () {
// another choice would be to create ShoppingListRecipes for each recipe - this bundles all related recipe under the parent recipe // another choice would be to create ShoppingListRecipes for each recipe - this bundles all related recipe under the parent recipe
let shopping_recipe = { let shopping_recipe = {
'id': this.recipe.id, id: this.recipe.id,
'ingredients': this.add_shopping, ingredients: this.add_shopping,
'servings': this.servings servings: this.servings,
} }
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.shoppingRecipe(this.recipe.id, shopping_recipe).then((result) => { apiClient
.shoppingRecipe(this.recipe.id, shopping_recipe)
.then((result) => {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
}).catch((err) => { })
.catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE) StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
}) })
this.$bvModal.hide(`shopping_${this.modal_id}`) this.$bvModal.hide(`shopping_${this.modal_id}`)
} },
} },
} }
</script> </script>