refactor InputCombo

This commit is contained in:
j3d1 2019-12-23 21:09:30 +01:00
parent 0ad42dad88
commit ed164c889a
2 changed files with 35 additions and 24 deletions

View file

@ -10,13 +10,14 @@
label="description" label="description"
:model="item" :model="item"
field="description" field="description"
:validation-fn="str => str.length > 0" :validation-fn="str => str && str.length > 0"
/> />
<InputCombo <InputCombo
label="box" label="box"
:model="item" :model="item"
field="box" nameKey="box"
:options="getBoxes" uniqueKey="cid"
:options="boxes"
/> />
</div> </div>
</template> </template>
@ -34,7 +35,7 @@ export default {
computed: { computed: {
...mapGetters(['getBoxes']), ...mapGetters(['getBoxes']),
boxes({ getBoxes }) { boxes({ getBoxes }) {
return getBoxes.map(box => box.name); return getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
} }
}, },
methods: { methods: {

View file

@ -11,22 +11,25 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<a <a
v-for="option in options" v-for="option in options"
:key="option" :key="option[uniqueKey]"
class="dropdown-item" class="dropdown-item"
@click="setInternalValue(option)" @click="setInternalValue(option)"
> >
{{ option }} {{ option[nameKey] }}
</a> </a>
</div> </div>
</div>
<input type="text" class="form-control" :id="label" v-model="internalName">
<div class="input-group-append">
<button <button
class="btn" class="btn"
:class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }" :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
v-if="!isValid"
@click="addOption()" @click="addOption()"
> >
<font-awesome-icon icon="plus"/> <font-awesome-icon icon="plus"/>
</button> </button>
</div> </div>
<input type="text" class="form-control" :id="label" v-model="internalValue">
<Addon type="Combo Box" :is-valid="isValid"/> <Addon type="Combo Box" :is-valid="isValid"/>
</div> </div>
</div> </div>
@ -38,27 +41,34 @@ import Addon from './Addon';
export default { export default {
name: 'InputCombo', name: 'InputCombo',
components: {Addon}, components: {Addon},
props: [ 'label', 'model', 'field', 'options', 'onOptionAdd' ], props: [ 'label', 'model', 'nameKey', 'uniqueKey', 'options', 'onOptionAdd' ],
data: ({ model, field }) => ({ data: ({ options, model, nameKey, uniqueKey }) => ({
internalValue: model[field], internalName: model[nameKey],
selectedOption: options.filter(e => e[uniqueKey] === model[uniqueKey])[0],
addingOption: false addingOption: false
}), }),
computed: { computed: {
isValid: ({ internalValue, options }) => options.includes(internalValue) isValid: ({options, nameKey, internalName}) => options.some(e => e[nameKey] === internalName)
}, },
watch: { watch: {
internalValue(newValue, oldValue) { internalName(newValue, oldValue) {
if (this.isValid) {
if(newValue!=this.selectedOption[this.nameKey]){
this.selectedOption = this.options.filter(e => e[this.nameKey] === this.internalName)[0];
}
this.model[this.nameKey] = this.selectedOption[this.nameKey];
this.model[this.uniqueKey] = this.selectedOption[this.uniqueKey];
}
console.log(oldValue, newValue, this.isValid); console.log(oldValue, newValue, this.isValid);
if (this.isValid)
this.model[this.field] = newValue;
} }
}, },
methods: { methods: {
setInternalValue(value) { setInternalValue(option) {
this.internalValue = value; this.selectedOption = option;
this.internalName = option[this.nameKey];
}, },
addOption() { addOption() {
this.onOptionAdd(this.internalValue); this.onOptionAdd({[this.nameKey]: this.internalName});
} }
} }
}; };