number scaler component and changing entry amount
This commit is contained in:
vabene1111
parent
69b24db442
commit
6d4f094455
@ -108,29 +108,11 @@
|
||||
<span><small class="text-muted">{{ r.recipe_name }}</small></span>
|
||||
<!-- TODO show meal plan date/type -->
|
||||
</b-button>
|
||||
<!-- <b-form-input min="1" type="number" :debounce="300" v-model="r.servings" @update="updateServings(r.shopping_list_recipe_id, r.servings)"></b-form-input>-->
|
||||
<b-button variant="danger" @click="deleteRecipe(r.shopping_list_recipe_id)"><i
|
||||
class="fas fa-trash fa-fw"></i></b-button>
|
||||
</b-button-group>
|
||||
|
||||
<b-button-group class="w-100 mt-1">
|
||||
<b-button @click="r.servings = updateServings(r, 'half')"
|
||||
:disabled="shopping_list_store.currently_updating"><i class="fas fa-divide"></i> 2
|
||||
</b-button>
|
||||
<b-button variant="info" @click="r.servings = updateServings(r, 'sub')"
|
||||
:disabled="shopping_list_store.currently_updating"><i class="fas fa-minus"></i>
|
||||
</b-button>
|
||||
<b-button variant="info" @click="r.servings = updateServings(r, 'prompt')">{{
|
||||
r.servings
|
||||
}}
|
||||
</b-button>
|
||||
<b-button variant="info" @click="r.servings = updateServings(r, 'add')"
|
||||
:disabled="shopping_list_store.currently_updating"><i class="fas fa-plus"></i>
|
||||
</b-button>
|
||||
<b-button @click="r.servings = updateServings(r, 'multiply')"
|
||||
:disabled="shopping_list_store.currently_updating"><i class="fas fa-times"></i> 2
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
<number-scaler-component :number="r.servings" @change="updateServings(r, $event)" :disable="useShoppingListStore().currently_updating"></number-scaler-component>
|
||||
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -488,11 +470,13 @@ import {Workbox} from 'workbox-window';
|
||||
import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
|
||||
import {useShoppingListStore} from "@/stores/ShoppingListStore";
|
||||
import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
|
||||
import NumberScalerComponent from "@/components/NumberScalerComponent.vue";
|
||||
|
||||
export default {
|
||||
name: "ShoppingListView",
|
||||
mixins: [ApiMixin, ResolveUrlMixin],
|
||||
components: {
|
||||
NumberScalerComponent,
|
||||
|
||||
ShoppingLineItem,
|
||||
GenericMultiselect,
|
||||
@ -741,39 +725,22 @@ export default {
|
||||
* change number of servings of a shopping list recipe
|
||||
* backend handles scaling of associated entries
|
||||
* @param recipe recipe to update
|
||||
* @param mode mode to change servings
|
||||
* @param servings number of servings to set recipe to
|
||||
*/
|
||||
updateServings(recipe, mode) {
|
||||
if (mode === 'half') {
|
||||
recipe.servings = recipe.servings / 2
|
||||
}
|
||||
if (mode === 'multiply') {
|
||||
recipe.servings = recipe.servings * 2
|
||||
}
|
||||
if (mode === 'add') {
|
||||
recipe.servings++
|
||||
}
|
||||
if (mode === 'sub') {
|
||||
recipe.servings--
|
||||
}
|
||||
if (mode === 'prompt') {
|
||||
let servings = prompt(this.$t('Servings'), recipe.servings);
|
||||
if (servings !== null && servings !== "" && !isNaN(servings) && !isNaN(parseFloat(servings))) {
|
||||
recipe.servings = parseFloat(servings)
|
||||
} else {
|
||||
console.log('Invalid input in servings prompt', servings)
|
||||
}
|
||||
}
|
||||
|
||||
if (recipe.servings > 0 && recipe.servings !== "") {
|
||||
updateServings(recipe, servings) {
|
||||
if (servings > 0 && servings !== "") {
|
||||
let api = new ApiApiFactory()
|
||||
useShoppingListStore().currently_updating = true
|
||||
api.partialUpdateShoppingListRecipe(recipe.shopping_list_recipe_id, {
|
||||
id: recipe.shopping_list_recipe_id,
|
||||
servings: recipe.servings
|
||||
servings: servings
|
||||
}).then(() => {
|
||||
useShoppingListStore().currently_updating = false
|
||||
useShoppingListStore().refreshFromAPI()
|
||||
}).catch((err) => {
|
||||
useShoppingListStore().currently_updating = false
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
return recipe.servings
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
74
vue/src/components/NumberScalerComponent.vue
Normal file
74
vue/src/components/NumberScalerComponent.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-button-group class="w-100 mt-1">
|
||||
<b-button @click="updateNumber( 'half')"
|
||||
:disabled="disable"><i class="fas fa-divide"></i> 2
|
||||
</b-button>
|
||||
<b-button variant="info" @click="updateNumber( 'sub')"
|
||||
:disabled="disable"><i class="fas fa-minus"></i>
|
||||
</b-button>
|
||||
<b-button variant="info" @click="updateNumber('prompt')"
|
||||
:disabled="disable">
|
||||
{{ number }}
|
||||
</b-button>
|
||||
<b-button variant="info" @click="updateNumber( 'add')"
|
||||
:disabled="disable"><i class="fas fa-plus"></i>
|
||||
</b-button>
|
||||
<b-button @click="updateNumber('multiply')"
|
||||
:disabled="disable"><i class="fas fa-times"></i> 2
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import {BootstrapVue} from "bootstrap-vue"
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
export default {
|
||||
name: "NumberScalerComponent",
|
||||
props: {
|
||||
number: {type: Number, default:0},
|
||||
disable: {type: Boolean, default: false}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* perform given operation on linked number
|
||||
* @param operation update mode
|
||||
*/
|
||||
updateNumber: function(operation) {
|
||||
if (operation === 'half') {
|
||||
this.$emit('change', this.number / 2)
|
||||
}
|
||||
if (operation === 'multiply') {
|
||||
this.$emit('change', this.number * 2)
|
||||
}
|
||||
if (operation === 'add') {
|
||||
this.$emit('change', this.number + 1)
|
||||
}
|
||||
if (operation === 'sub') {
|
||||
this.$emit('change', this.number - 1)
|
||||
}
|
||||
if (operation === 'prompt') {
|
||||
let input_number = prompt(this.$t('Input'), this.number);
|
||||
if (input_number !== null && input_number !== "" && !isNaN(input_number) && !isNaN(parseFloat(input_number))) {
|
||||
this.$emit('change', parseFloat(input_number))
|
||||
} else {
|
||||
console.log('Invalid number input in prompt', input_number)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -57,7 +57,7 @@
|
||||
<b-col cold="12">
|
||||
<b-button-group class="mt-1 w-100">
|
||||
<b-button variant="dark" block class="btn btn-block text-left">
|
||||
<span>{{ food.name }}</span>
|
||||
<span><span v-if="e.amount > 0">{{e.amount}}</span> {{e.unit?.name}} {{ food.name }}</span>
|
||||
<span><br/><small class="text-muted">
|
||||
<span v-if="e.recipe_mealplan && e.recipe_mealplan.recipe_name !== ''">
|
||||
<a :href="resolveDjangoUrl('view_recipe', e.recipe_mealplan.recipe)"> {{ e.recipe_mealplan.recipe_name }} </a>({{
|
||||
@ -76,6 +76,8 @@
|
||||
<b-button variant="warning" @click="detail_modal_visible = false; useShoppingListStore().deleteObject(e)"><i class="fas fa-trash"></i></b-button> <!-- TODO implement -->
|
||||
</b-button-group>
|
||||
|
||||
<number-scaler-component :number="e.amount" @change="e.amount = $event; useShoppingListStore().updateObject(e)"></number-scaler-component>
|
||||
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
@ -97,6 +99,7 @@ import {useMealPlanStore} from "@/stores/MealPlanStore";
|
||||
import {useShoppingListStore} from "@/stores/ShoppingListStore";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
|
||||
import NumberScalerComponent from "@/components/NumberScalerComponent.vue";
|
||||
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
@ -104,7 +107,7 @@ Vue.use(BootstrapVue)
|
||||
export default {
|
||||
name: "ShoppingLineItem",
|
||||
mixins: [ApiMixin],
|
||||
components: {},
|
||||
components: {NumberScalerComponent},
|
||||
props: {
|
||||
entries: {type: Object,},
|
||||
},
|
||||
|
||||
@ -96,6 +96,7 @@
|
||||
"base_unit": "Base Unit",
|
||||
"base_amount": "Base Amount",
|
||||
"Datatype": "Datatype",
|
||||
"Input": "Input",
|
||||
"Number of Objects": "Number of Objects",
|
||||
"Add_Step": "Add Step",
|
||||
"Keywords": "Keywords",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user