moved generic multiselect create function into component

cookbook/views/api.py

@@ -600,11 +600,11 @@ class IngredientViewSet(viewsets.ModelViewSet):
     def get_queryset(self):
         queryset = self.queryset.filter(step__recipe__space=self.request.space)
         food = self.request.query_params.get('food', None)
-        if food and re.match(r'^([1-9])+$', food):
+        if food and re.match(r'^(\d)+$', food):
             queryset = queryset.filter(food_id=food)
 
         unit = self.request.query_params.get('unit', None)
-        if unit and re.match(r'^([1-9])+$', unit):
+        if unit and re.match(r'^(\d)+$', unit):
             queryset = queryset.filter(unit_id=unit)
 
         return queryset

vue/src/apps/IngredientEditorView/IngredientEditorView.vue

@@ -29,16 +29,20 @@
                 </td>
                 <td style="width: 30vw">
                     <generic-multiselect @change="i.unit = $event.val;"
-                                         :initial_selection="i.unit"
+                                         :initial_single_selection="i.unit"
                                          :model="Models.UNIT"
                                          :search_on_load="false"
+                                         :allow_create="true"
+                                         :create_placeholder="$t('Create')"
                                          :multiple="false"></generic-multiselect>
                 </td>
                 <td style="width: 30vw">
                     <generic-multiselect @change="i.food = $event.val;"
-                                         :initial_selection="i.food"
+                                         :initial_single_selection="i.food"
                                          :model="Models.FOOD"
                                          :search_on_load="false"
+                                         :allow_create="true"
+                                         :create_placeholder="$t('Create')"
                                          :multiple="false"></generic-multiselect>
                 </td>
                 <td style="width: 30vw">
@@ -108,7 +112,7 @@ export default {
             }).catch((r, e) => {
                 StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
             })
-        }
+        },
     },
 }
 </script>

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -440,7 +440,6 @@
                                         :initial_selection="settings.shopping_share"
                                         label="username"
                                         :multiple="true"
-                                        :allow_create="false"
                                         style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
                                         :placeholder="$t('User')"
                                     />

vue/src/components/GenericMultiselect.vue

@@ -19,6 +19,7 @@
         @search-change="search"
         @input="selectionChanged"
         @tag="addNew"
+        @open="selectOpened()"
     >
     </multiselect>
 </template>
@@ -26,7 +27,7 @@
 <script>
 import Vue from "vue"
 import Multiselect from "vue-multiselect"
-import {ApiMixin} from "@/utils/utils"
+import {ApiMixin, StandardToasts} from "@/utils/utils"
 
 export default {
     name: "GenericMultiselect",
@@ -173,15 +174,30 @@ export default {
                 }
             })
         },
+        selectOpened: function () {
+            if (this.objects.length < 1) {
+                this.search("")
+            }
+        },
         selectionChanged: function () {
             this.$emit("change", {var: this.parent_variable, val: this.selected_objects})
         },
         addNew(e) {
-            this.$emit("new", e)
+            //TODO add ability to choose field name other than "name"
-            // could refactor as Promise - seems unnecessary
+            console.log('CREATEING NEW with -> ' , e)
-            setTimeout(() => {
+            this.genericAPI(this.model, this.Actions.CREATE, {name: e}).then(result => {
-                this.search("")
+                let createdObj = result.data?.results ?? result.data
-            }, 750)
+                StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+                if (this.multiple) {
+                    this.selected_objects.push(createdObj)
+                } else {
+                    this.selected_objects = createdObj
+                }
+                this.objects.push(createdObj)
+                this.selectionChanged()
+            }).catch((r, err) => {
+                StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
+            })
         },
     },
 }

vue/src/components/MealPlanEditModal.vue

@@ -48,7 +48,6 @@
                                         :initial_single_selection="entryEditing.meal_type"
                                         :allow_create="true"
                                         :create_placeholder="$t('Create_New_Meal_Type')"
-                                        @new="createMealType"
                                     ></generic-multiselect>
                                     <span class="text-danger" v-if="missing_meal_type">{{ $t("Meal_Type_Required") }}</span>
                                     <small tabindex="-1" class="form-text text-muted" v-if="!missing_meal_type">{{ $t("Meal_Type") }}</small>
@@ -228,20 +227,6 @@ export default {
                 this.entryEditing.meal_type = null
             }
         },
-        createMealType(event) {
-            if (event != "") {
-                let apiClient = new ApiApiFactory()
-
-                apiClient
-                    .createMealType({ name: event })
-                    .then((e) => {
-                        this.$emit("reload-meal-types")
-                    })
-                    .catch((error) => {
-                        StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
-                    })
-            }
-        },
         selectRecipe(event) {
             this.missing_recipe = false
             if (event.val != null) {

vue/src/components/Modals/LookupInput.vue

@@ -18,7 +18,6 @@
                 :label="list_label"
                 style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
                 :placeholder="modelName"
-                @new="addNew"
             >
             </generic-multiselect>
             <em v-if="help" class="small text-muted">{{ help }}</em>
@@ -119,19 +118,6 @@ export default {
         },
     },
     methods: {
-        addNew: function (e) {
-            // if create a new item requires more than 1 parameter or the field 'name' is insufficient this will need reworked
-            // in a perfect world this would trigger a new modal and allow editing all fields
-            this.genericAPI(this.model, this.Actions.CREATE, { name: e })
-                .then((result) => {
-                    this.new_value = result.data
-                    StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
-                })
-                .catch((err) => {
-                    console.log(err)
-                    StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
-                })
-        },
         // ordered lookups have nested attributes that need flattened attributes to drive lookup
         flattenItems: function (itemlist) {
             let flat_items = []

vue/src/utils/models.js

@@ -612,6 +612,18 @@ export class Models {
         list: {
             params: ["filter_list"],
         },
+        create: {
+            params: [["name",]],
+            form: {
+                name: {
+                    form_field: true,
+                    type: "text",
+                    field: "name",
+                    label: "Name",
+                    placeholder: "",
+                },
+            },
+        },
     }
 
     static MEAL_PLAN = {