add new from ListInput

vue/src/components/Modals/GenericModalForm.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <b-modal class="modal" id="modal" @hidden="cancelAction">
+      <b-modal :id="'modal_'+id" @hidden="cancelAction">
         <template v-slot:modal-title><h4>{{form.title}}</h4></template>
         <div v-for="(f, i) in form.fields" v-bind:key=i>
           <p v-if="f.type=='instruction'">{{f.label}}</p>
@@ -11,6 +11,7 @@
             :field="f.field"
             :model="listModel(f.list)"
             :sticky_options="f.sticky_options || undefined"
+            :create_new="f.allow_create"
             @change="storeValue"/> <!-- TODO add ability to create new items associated with lookup -->
           <!-- TODO: add multi-selection input list -->
           <checkbox-input v-if="f.type=='checkbox'"
@@ -53,21 +54,24 @@ export default {
   name: 'GenericModalForm',
   components: {CheckboxInput, LookupInput, TextInput, EmojiInput},
   props: {
-    model: {required: true, type: Object, default: function() {}},
-    action: {required: true, type: Object, default: function() {}},
-    item1: {type: Object, default: function() {}},
-    item2: {type: Object, default: function() {}},
+    model: {required: true, type: Object},
+    action: {required: true, type: Object},
+    item1: {type: Object, default () {return undefined}},
+    item2: {type: Object, default () {return undefined}},
     show: {required: true, type: Boolean, default: false},
   },
   data() {
     return {
+      id: undefined,
       form_data: {},
       form: {},
       dirty: false
     }
   },
   mounted() {
-    this.$root.$on('change', this.storeValue);  // modal is outside Vue instance(?) so have to listen at root of component
+    this.id = Math.random()
+    this.$root.$on('change', this.storeValue);  // boostrap modal placed at document so have to listen at root of component
+    
   },
   computed: {
     buttonLabel() {
@@ -79,9 +83,9 @@ export default {
       if (this.show) {
         this.form = getForm(this.model, this.action, this.item1, this.item2)
         this.dirty = true
-        this.$bvModal.show('modal')
+        this.$bvModal.show('modal_' + this.id)
       } else {
-        this.$bvModal.hide('modal')
+        this.$bvModal.hide('modal_' + this.id)
         this.form_data = {}
       }
     },

vue/src/components/Modals/LookupInput.vue

@@ -1,16 +1,20 @@
 <template>
     <div>
-        <b-form-group 
+        <b-form-group
             v-bind:label="label"
             class="mb-3">
           <generic-multiselect 
             @change="new_value=$event.val"
-            :initial_selection="[value]"  
+            @remove="new_value=undefined"
+            :initial_selection="initialSelection"  
             :model="model"
             :multiple="false"
             :sticky_options="sticky_options"
+            :allow_create="create_new"
+            :create_placeholder="createPlaceholder"
             style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-            :placeholder="modelName">
+            :placeholder="modelName"
+            @new="addNew">
           </generic-multiselect>
         </b-form-group>
     </div>
@@ -18,15 +22,18 @@
 
 <script>
 import GenericMultiselect from "@/components/GenericMultiselect";
+import {StandardToasts, ApiMixin} from "@/utils/utils";
 
 export default {
   name: 'LookupInput',
   components: {GenericMultiselect},
+  mixins: [ApiMixin],
   props: {
     field: {type: String, default: 'You Forgot To Set Field Name'},
     label: {type: String, default: ''},
-    value: {type: Object, default () {return {}}},
-    model: {type: Object, default () {return {}}},
+    value: {type: Object, default () {return undefined}},
+    model: {type: Object, default () {return undefined}},
+    create_new: {type: Boolean, default: false},
     sticky_options: {type:Array, default(){return []}},
     // TODO: include create_new and create_text props and associated functionality to create objects for drop down
     // see 'tagging' here: https://vue-multiselect.js.org/#sub-tagging
@@ -37,9 +44,27 @@ export default {
       new_value: undefined,
     }
   },
+  mounted() {
+    this.new_value = this.value
+  },
   computed: {
     modelName() {
       return this?.model?.name  ?? this.$t('Search')
+    },
+    initialSelection() {
+      // multiselect is expect to get an array of objects - make sure it gets one
+      if (Array.isArray(this.new_value)) {
+        return this.new_value
+      } else if (!this.new_value) {
+        return []
+      } else if (this.new_value.id) {
+        return [this.new_value]
+      } else {
+        return [{'id': -1, 'name': this.new_value}]
+      }
+    },
+    createPlaceholder() {
+      return this.$t('Create_New_' + this?.model?.name)
     }
   },
   watch: {
@@ -47,5 +72,20 @@ export default {
       this.$root.$emit('change', this.field, this.new_value ?? null)
     },
   },
+  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)
+      })
+      this.show_modal = false
+      
+    },
+  }
 }
 </script>