bind data in dynamic fields to parent model
This commit is contained in:
smilerz
File diff suppressed because one or more lines are too long
@ -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')
|
||||
|
||||
@ -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'},
|
||||
{'label': 'first',
|
||||
'type': 'text'},
|
||||
{'label': 'second',
|
||||
'type': 'lookup'},
|
||||
{'label': 'third',
|
||||
'type': 'checkbox'},
|
||||
{'label': 'fourth',
|
||||
'type': 'checkbox'},
|
||||
{'label': 'fifth',
|
||||
'type': 'lookup'},
|
||||
{'label': 'sixth',
|
||||
'type': 'text'}
|
||||
'type': 'instruction',
|
||||
'value': undefined},
|
||||
{'field': 'name',
|
||||
'label': 'first',
|
||||
'type': 'text',
|
||||
'value': undefined,
|
||||
'placeholder': 'do the thing'},
|
||||
{'field': 'shopping',
|
||||
'label': 'second',
|
||||
'type': 'lookup',
|
||||
'value': undefined},
|
||||
{'field': 'isreal',
|
||||
'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')
|
||||
alert('i did it')
|
||||
console.log(this.new_item)
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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},
|
||||
show_move: {type: Boolean, default: false},
|
||||
value: {type: String, default: ''},
|
||||
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')
|
||||
|
||||
Reference in New Issue
Block a user