quick add shoppinglist

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -31,15 +31,19 @@
                         <div class="col col-md-12">
                             <div role="tablist">
                                 <!-- add to shopping form -->
+
                                 <b-row class="row justify-content-md-center" v-if="entrymode">
-                                    <b-col cols="12" sm="4" md="2">
+                                    <b-col cols="12" sm="4" md="2" v-if="!entry_mode_simple">
                                         <b-form-input min="1" type="number" :description="$t('Amount')" v-model="new_item.amount"></b-form-input>
                                     </b-col>
-                                    <b-col cols="12" sm="8" md="3">
+                                    <b-col cols="12" sm="8" md="3" v-if="!entry_mode_simple">
                                         <lookup-input :form="formUnit" :model="Models.UNIT" @change="new_item.unit = $event" :show_label="false" />
                                     </b-col>
-                                    <b-col cols="12" sm="8" md="4">
+                                    <b-col cols="12" sm="8" md="4" v-if="!entry_mode_simple">
-                                        <lookup-input :form="formFood" :model="Models.FOOD" @change="new_item.food = $event" :show_label="false" />
+                                        <lookup-input :form="formFood" :model="Models.FOOD" @change="new_item.food = $event" :show_label="false" :clear="clear" />
+                                    </b-col>
+                                    <b-col cols="12" sm="8" v-if="entry_mode_simple">
+                                        <b-form-input type="text" :placeholder="$t('QuickEntry')" v-model="new_item.ingredient" @keyup.enter="addItem"></b-form-input>
                                     </b-col>
                                     <b-col cols="12" sm="4" md="1">
                                         <b-button variant="link" class="px-0">
@@ -47,6 +51,12 @@
                                         </b-button>
                                     </b-col>
                                 </b-row>
+
+                                <b-row class="row justify-content-md-end" v-if="entrymode">
+                                    <b-form-checkbox switch v-model="entry_mode_simple">
+                                        {{ $t("QuickEntry") }}
+                                    </b-form-checkbox>
+                                </b-row>
                                 <!-- shopping list table -->
                                 <div v-if="items && items.length > 0">
                                     <div v-for="(done, x) in Sections" :key="x">
@@ -530,6 +540,7 @@
 import Vue from "vue"
 import { BootstrapVue } from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
+import VueCookies from "vue-cookies"
 
 import ContextMenu from "@/components/ContextMenu/ContextMenu"
 import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
@@ -542,11 +553,12 @@ import GenericPill from "@/components/GenericPill"
 import LookupInput from "@/components/Modals/LookupInput"
 import draggable from "vuedraggable"
 
-import { ApiMixin, getUserPreference } from "@/utils/utils"
+import { ApiMixin, getUserPreference, StandardToasts, makeToast } from "@/utils/utils"
 import { ApiApiFactory } from "@/utils/openapi/api"
-import { StandardToasts, makeToast } from "@/utils/utils"
 
 Vue.use(BootstrapVue)
+Vue.use(VueCookies)
+let SETTINGS_COOKIE_NAME = "shopping_settings"
 
 export default {
     name: "ShoppingListView",
@@ -566,6 +578,8 @@ export default {
             supermarket_categories_only: false,
             shopcat: null,
             delay: 0,
+            clear: Math.random(),
+            entry_mode_simple: false,
             settings: {
                 shopping_auto_sync: 0,
                 default_delay: 4,
@@ -587,7 +601,7 @@ export default {
             fields: ["checked", "amount", "category", "unit", "food", "recipe", "details"],
             loading: true,
             entrymode: false,
-            new_item: { amount: 1, unit: undefined, food: undefined },
+            new_item: { amount: 1, unit: undefined, food: undefined, ingredient: undefined },
             online: true,
         }
     },
@@ -736,6 +750,9 @@ export default {
         "settings.default_delay": function (newVal, oldVal) {
             this.delay = Number(newVal)
         },
+        entry_mode_simple(newVal) {
+            this.$cookies.set(SETTINGS_COOKIE_NAME, newVal)
+        },
     },
     mounted() {
         this.getShoppingList()
@@ -749,11 +766,29 @@ export default {
             window.addEventListener("online", this.updateOnlineStatus)
             window.addEventListener("offline", this.updateOnlineStatus)
         }
+        this.$nextTick(function () {
+            if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) {
+                this.entry_mode_simple = this.$cookies.get(SETTINGS_COOKIE_NAME)
+            }
+        })
     },
     methods: {
         // this.genericAPI inherited from ApiMixin
-
+        addItem: function () {
-        addItem() {
+            if (this.entry_mode_simple) {
+                this.genericPostAPI("api_ingredient_from_string", { text: this.new_item.ingredient }).then((result) => {
+                    this.new_item = {
+                        amount: result.data.amount,
+                        unit: { name: result.data.unit },
+                        food: { name: result.data.food },
+                    }
+                    this.addEntry()
+                })
+            } else {
+                this.addEntry()
+            }
+        },
+        addEntry: function (x) {
             let api = new ApiApiFactory()
             api.createShoppingListEntry(this.new_item)
                 .then((results) => {
@@ -763,7 +798,8 @@ export default {
                     } else {
                         console.log("no data returned")
                     }
-                    this.new_item = { amount: 1, unit: undefined, food: undefined }
+                    this.new_item = { amount: 1, unit: undefined, food: undefined, ingredient: undefined }
+                    this.clear += 1
                 })
                 .catch((err) => {
                     console.log(err)

vue/src/components/GenericMultiselect.vue

@@ -62,12 +62,16 @@ export default {
         multiple: { type: Boolean, default: true },
         allow_create: { type: Boolean, default: false },
         create_placeholder: { type: String, default: "You Forgot to Add a Tag Placeholder" },
+        clear: { type: Number },
     },
     watch: {
         initial_selection: function (newVal, oldVal) {
             // watch it
             this.selected_objects = newVal
         },
+        clear: function (newVal, oldVal) {
+            this.selected_objects = []
+        },
     },
     mounted() {
         this.search("")

vue/src/components/Modals/LookupInput.vue

@@ -13,6 +13,7 @@
                 :sticky_options="sticky_options"
                 :allow_create="form.allow_create"
                 :create_placeholder="createPlaceholder"
+                :clear="clear"
                 style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
                 :placeholder="modelName"
                 @new="addNew"
@@ -44,6 +45,7 @@ export default {
             },
         },
         show_label: { type: Boolean, default: true },
+        clear: { type: Number },
     },
     data() {
         return {

vue/src/locales/en.json

@@ -277,5 +277,6 @@
     "copy_markdown_table": "Copy as Markdown Table",
     "in_shopping": "In Shopping List",
     "DelayUntil": "Delay Until",
-    "mark_complete": "Mark Complete"
+    "mark_complete": "Mark Complete",
+    "QuickEntry": "Quick Entry"
 }

vue/src/utils/utils.js

@@ -234,7 +234,14 @@ export const ApiMixin = {
             return apiClient[func](...parameters)
         },
         genericGetAPI: function (url, options) {
-            return axios.get(this.resolveDjangoUrl(url), { params: options, emulateJSON: true })
+            return axios.get(resolveDjangoUrl(url), { params: options, emulateJSON: true })
+        },
+        genericPostAPI: function (url, form) {
+            let data = new FormData()
+            Object.keys(form).forEach((field) => {
+                data.append(field, form[field])
+            })
+            return axios.post(resolveDjangoUrl(url), data)
         },
     },
 }