number scaler component and changing entry amount

vue/src/components/NumberScalerComponent.vue

@@ -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>

vue/src/components/ShoppingLineItem.vue

@@ -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,},
     },