56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<b-form-group
|
|
v-bind:label="label"
|
|
class="mb-3">
|
|
<generic-multiselect
|
|
@change="new_value=$event.val"
|
|
:initial_selection="[value]"
|
|
:model="model"
|
|
:multiple="false"
|
|
:sticky_options="sticky_options"
|
|
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
|
:placeholder="modelName">
|
|
</generic-multiselect>
|
|
</b-form-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GenericMultiselect from "@/components/GenericMultiselect";
|
|
|
|
export default {
|
|
name: 'LookupInput',
|
|
components: {GenericMultiselect},
|
|
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 {}}},
|
|
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
|
|
// perfect world would have it trigger a new modal associated with the associated item model
|
|
},
|
|
data() {
|
|
return {
|
|
new_value: undefined,
|
|
}
|
|
},
|
|
computed: {
|
|
modelName() {
|
|
return this?.model?.name ?? this.$t('Search')
|
|
}
|
|
},
|
|
watch: {
|
|
'new_value': function () {
|
|
this.$root.$emit('change', this.field, this.new_value?.id ?? null)
|
|
},
|
|
},
|
|
methods: {
|
|
Button: function(e) {
|
|
this.$bvModal.show('modal')
|
|
}
|
|
}
|
|
}
|
|
</script> |