mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-03 05:11:31 -05:00
add recipes to shopping list
This commit is contained in:
Chris Scoggins
File diff suppressed because it is too large
Load Diff
@@ -7,8 +7,7 @@
|
||||
</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>
|
||||
@@ -16,17 +15,16 @@
|
||||
</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" >
|
||||
<tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== ''">
|
||||
<template v-for="s in steps">
|
||||
<tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== '' && !add_shopping_mode">
|
||||
<td colspan="5">
|
||||
<b>{{ s.name }}</b>
|
||||
</td>
|
||||
@@ -56,18 +54,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,
|
||||
@@ -75,12 +73,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 {
|
||||
@@ -99,7 +97,7 @@ export default {
|
||||
value: x?.list_recipe,
|
||||
text: x?.recipe_mealplan?.name,
|
||||
recipe: x?.recipe_mealplan?.recipe ?? 0,
|
||||
servings: x?.recipe_mealplan?.servings
|
||||
servings: x?.recipe_mealplan?.servings,
|
||||
}
|
||||
})
|
||||
.filter((x) => x?.recipe == this.recipe)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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
|
||||
><h4>{{ $t("Add_Servings_to_Shopping", { servings: recipe_servings }) }}</h4></template
|
||||
>
|
||||
<loading-spinner v-if="loading"></loading-spinner>
|
||||
<div class="accordion" role="tablist" v-if="!loading">
|
||||
@@ -15,7 +15,7 @@
|
||||
:steps="steps"
|
||||
:recipe="recipe.id"
|
||||
:ingredient_factor="ingredient_factor"
|
||||
:servings="servings"
|
||||
:servings="recipe_servings"
|
||||
:show_shopping="true"
|
||||
:add_shopping_mode="true"
|
||||
:header="false"
|
||||
@@ -33,7 +33,7 @@
|
||||
:steps="r.steps"
|
||||
:recipe="r.recipe.id"
|
||||
:ingredient_factor="ingredient_factor"
|
||||
:servings="servings"
|
||||
:servings="recipe_servings"
|
||||
:show_shopping="true"
|
||||
:add_shopping_mode="true"
|
||||
:header="false"
|
||||
@@ -45,12 +45,19 @@
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-input-group class="my-3">
|
||||
<b-input-group-prepend is-text>
|
||||
{{ $t("Servings") }}
|
||||
</b-input-group-prepend>
|
||||
|
||||
<b-form-spinbutton min="1" v-model="recipe_servings" inline style="height: 3em"></b-form-spinbutton>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t("Cancel") }} </b-button>
|
||||
<b-button variant="success" @click="saveShopping">{{ $t("Save") }} </b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -71,25 +78,37 @@ export default {
|
||||
mixins: [],
|
||||
props: {
|
||||
recipe: { required: true, type: Object },
|
||||
servings: { type: Number },
|
||||
servings: { type: Number, default: undefined },
|
||||
modal_id: { required: true, type: Number },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
steps: [],
|
||||
recipe_servings: 0,
|
||||
recipe_servings: undefined,
|
||||
add_shopping: [],
|
||||
related_recipes: [],
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.recipe_servings = this.servings
|
||||
},
|
||||
computed: {
|
||||
ingredient_factor: function () {
|
||||
return this.servings / this.recipe.servings || this.recipe_servings
|
||||
return this.recipe_servings / this.recipe.servings
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
recipe: {
|
||||
handler() {
|
||||
this.loadRecipe()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
servings: function (newVal) {
|
||||
this.recipe_servings = parseInt(newVal)
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
loadRecipe: function () {
|
||||
this.add_shopping = []
|
||||
@@ -109,7 +128,9 @@ export default {
|
||||
.filter((x) => !x?.food?.food_onhand)
|
||||
.map((x) => x.id),
|
||||
]
|
||||
this.recipe_servings = result.data?.servings
|
||||
if (!this.recipe_servings) {
|
||||
this.recipe_servings = result.data?.servings
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
.then(() => {
|
||||
@@ -159,19 +180,27 @@ export default {
|
||||
let shopping_recipe = {
|
||||
id: this.recipe.id,
|
||||
ingredients: this.add_shopping,
|
||||
servings: this.servings,
|
||||
servings: this.recipe_servings,
|
||||
}
|
||||
let apiClient = new ApiApiFactory()
|
||||
apiClient
|
||||
.shoppingRecipe(this.recipe.id, shopping_recipe)
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
this.$emit("finish")
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
|
||||
this.$bvModal.hide(`shopping_${this.modal_id}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.b-form-spinbutton.form-control {
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user