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

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

@ -1,7 +1,9 @@
<template>
<div>
<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>
<div class="accordion" role="tablist" v-if="!loading">
<b-card no-body class="mb-1">
@ -42,14 +44,11 @@
</template>
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
</b-card>
</div>
<div class="row mt-3 mb-3">
<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>
<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>
@ -57,25 +56,23 @@
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
Vue.use(BootstrapVue)
const {ApiApiFactory} = require("@/utils/openapi/api");
import {StandardToasts} from "@/utils/utils";
import IngredientsCard from "@/components/IngredientsCard";
import LoadingSpinner from "@/components/LoadingSpinner";
const { ApiApiFactory } = require("@/utils/openapi/api")
import { StandardToasts } from "@/utils/utils"
import IngredientsCard from "@/components/IngredientsCard"
import LoadingSpinner from "@/components/LoadingSpinner"
export default {
name: 'ShoppingModal',
name: "ShoppingModal",
components: { IngredientsCard, LoadingSpinner },
mixins: [],
props: {
recipe: { required: true, type: Object },
servings: { type: Number },
modal_id: { required: true, type: Number },
},
data() {
return {
@ -83,76 +80,98 @@ export default {
steps: [],
recipe_servings: 0,
add_shopping: [],
related_recipes: []
related_recipes: [],
}
},
mounted() {
},
mounted() {},
computed: {
ingredient_factor: function () {
return this.servings / this.recipe.servings || this.recipe_servings
},
},
watch: {
},
watch: {},
methods: {
loadRecipe: function () {
this.add_shopping = []
this.related_recipes = []
let apiClient = new ApiApiFactory()
apiClient.retrieveRecipe(this.recipe.id).then((result) => {
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.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) => {
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)
})
}))
.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(() => {
})
.then(() => {
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) {
if (e.add) {
this.add_shopping.push(e.item.id)
} 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 () {
// 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
id: this.recipe.id,
ingredients: this.add_shopping,
servings: this.servings,
}
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)
}).catch((err) => {
})
.catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
})
this.$bvModal.hide(`shopping_${this.modal_id}`)
}
}
},
},
}
</script>