bind data in dynamic fields to parent model

vue/src/components/Modals/CheckboxInput.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-form-checkbox>{{label}}</b-form-checkbox>
+        <b-form-checkbox v-model="new_value">{{label}}</b-form-checkbox>
     </div>
 </template>
 
@@ -9,11 +9,25 @@
 export default {
   name: 'CheckboxInput',
   props: {
+    field: {type: String, default: 'You Forgot To Set Field Name'},
     label: {type: String, default: 'Checkbox Field'},
-    show_delete: {type: Boolean, default: true},
+    value: {type: Boolean, default: false},
     show_move: {type: Boolean, default: false},
     show_merge: {type: Boolean, default: false},
   },
+  data() {
+    return {
+      new_value: undefined,
+    }
+  },
+  mounted() {
+    this.new_value = this.value
+  },
+  watch: {
+    'new_value': function () {
+      this.$root.$emit('change', this.field, this.new_value)
+    },
+  },
   methods: {
       Button: function(e) {
         this.$bvModal.show('modal')

vue/src/components/Modals/GenericModalForm.vue

@@ -1,25 +1,23 @@
 <template>
     <div>
-        <!-- <modal name=modal style="z-index: 9999"
-          :draggable="true"
-          :resizable="false"
-          :scrollable="true"
-          :minHeight="300"
-          :minWidth="100"
-          height="auto"
-          :shiftX=".5"
-          :shiftY=".1"
-        >  -->
       <b-modal class="modal" id="modal" >
         <template v-slot:modal-title><h4>{{model}} {{action}}</h4></template>
         <div v-for="(f, i) in fields" v-bind:key=i>
           <p v-if="f.type=='instruction'">{{f.label}}</p>
           <lookup-input v-if="f.type=='lookup'"
-            :label="f.label"/> <!-- TODO add ability to create new items associated with lookup -->
+            :label="f.label"
+            :value="f.value"
+            :field="f.field"
+            @change="changeValue"/> <!-- TODO add ability to create new items associated with lookup -->
           <checkbox-input v-if="f.type=='checkbox'"
-            :label="f.label"/>
+            :label="f.label"
+            :value="f.value"
+            :field="f.field"/>
           <text-input v-if="f.type=='text'"
-            :label="f.label"/>
+            :label="f.label"
+            :value="f.value"
+            :field="f.field"
+            :placeholder="f.placeholder"/>
         </div>
         
         <template  v-slot:modal-footer>
@@ -49,22 +47,39 @@ export default {
   },
   data() {
     return {
+      new_item: {},
       action: '',
       fields: [
         {'label': 'This is a long set of instructions that tell you to be careful with what you do next or really bad things are likely to happen.',
-          'type': 'instruction'},
+          'type': 'instruction',
-        {'label': 'first',
+          'value': undefined},
-          'type': 'text'},
+        {'field': 'name',
-        {'label': 'second',
+          'label': 'first',
-        'type': 'lookup'},
+          'type': 'text',
-        {'label': 'third',
+          'value': undefined,
-        'type': 'checkbox'},
+          'placeholder': 'do the thing'},
-        {'label': 'fourth',
+        {'field': 'shopping',
-        'type': 'checkbox'},
+          'label': 'second',
-        {'label': 'fifth',
+          'type': 'lookup',
-        'type': 'lookup'},
+          'value': undefined},
-        {'label': 'sixth',
+        {'field': 'isreal',
-        'type': 'text'}
+          'label': 'third',
+          'type': 'checkbox',
+          'value': undefined},
+        {'field': 'ignore',
+          'label': 'fourth',
+          'type': 'checkbox',
+          'value': undefined},
+        {'field': 'another_category',
+          'label': 'fifth',
+          'type': 'lookup',
+          'value': undefined},
+        {'field': 'description',
+          'label': 'sixth',
+          'type': 'text',
+          'value': undefined,
+          'placeholder': 'also, do the thing'
+        }
       ],
       buttons: {
         'new':{'label': this.$t('Save')},
@@ -75,9 +90,9 @@ export default {
       }
     }
   },
-  // mounted() {
+  mounted() {
-
+    this.$root.$on('change', this.changeValue);  // modal is outside Vue instance(?) so have to listen at root of component
-  // },
+  },
   computed: {
     buttonLabel() {
       return this.buttons[this.action].label;
@@ -96,8 +111,21 @@ export default {
         this.$bvModal.show('modal')
       },
       doAction: function(){
-        this.$bvModal.hide('modal')
+        console.log(this.new_item)
-        alert('i did it')
+        let alert_text = ''
+        for (const [k, v] of Object.entries(this.fields)) {
+          if (v.type !== 'instruction'){
+            alert_text = alert_text + v.field + ": " + this.new_item[v.field] + "\n"
+          }
+        }
+        this.$nextTick(function() {this.$bvModal.hide('modal')})
+        setTimeout(() => {}, 0) // confirm that the 
+        alert(alert_text)
+        console.log(this.model_values)
+      },
+      changeValue: function(field, value) {
+        this.new_item[field] = value
+        console.log('catch value', field, value)
       }
   }
 }

vue/src/components/Modals/LookupInput.vue

@@ -4,6 +4,7 @@
             v-bind:label="label"
             class="mb-3">
         <generic-multiselect 
+          @change="new_value=$event.val"
           label="name"
           :initial_selection="[]"  
           search_function="listSupermarketCategorys" 
@@ -22,11 +23,25 @@ export default {
   name: 'LookupInput',
   components: {GenericMultiselect},
   props: {
+    field: {type: String, default: 'You Forgot To Set Field Name'},
     label: {type: String, default: 'Lookup Field'},
-    show_delete: {type: Boolean, default: true},
+    value: {type: Object, default () {return {}}},
     show_move: {type: Boolean, default: false},
     show_merge: {type: Boolean, default: false},
   },
+  data() {
+    return {
+      new_value: undefined,
+    }
+  },
+  mounted() {
+    this.new_value = this.value.id
+  },
+  watch: {
+    'new_value': function () {
+      this.$root.$emit('change', this.field, this.new_value)
+    },
+  },
   methods: {
       Button: function(e) {
         this.$bvModal.show('modal')

vue/src/components/Modals/TextInput.vue

@@ -4,7 +4,9 @@
             v-bind:label="label"
             class="mb-3">
         <b-form-input
+            v-model="new_value"
             type="string"
+            :placeholder="placeholder"
         ></b-form-input>
         </b-form-group>
     </div>
@@ -15,11 +17,25 @@
 export default {
   name: 'TextInput',
   props: {
+    field: {type: String, default: 'You Forgot To Set Field Name'},
     label: {type: String, default: 'Text Field'},
-    show_delete: {type: Boolean, default: true},
+    value: {type: String, default: ''},
-    show_move: {type: Boolean, default: false},
+    placeholder: {type: String, default: 'You Should Add Placeholder Text'},
     show_merge: {type: Boolean, default: false},
   },
+  data() {
+    return {
+      new_value: undefined,
+    }
+  },
+  mounted() {
+    this.new_value = this.value
+  },
+  watch: {
+    'new_value': function () {
+      this.$root.$emit('change', this.field, this.new_value)
+    },
+  },
   methods: {
       Button: function(e) {
         this.$bvModal.show('modal')