refactor InputCombo
This commit is contained in:
parent
0ad42dad88
commit
ed164c889a
2 changed files with 35 additions and 24 deletions
|
@ -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: {
|
||||||
|
|
|
@ -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});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue