99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<template>
|
|
<multiselect
|
|
v-model="selected_objects"
|
|
:options="objects"
|
|
:close-on-select="true"
|
|
:clear-on-select="true"
|
|
:hide-selected="multiple"
|
|
:preserve-search="true"
|
|
:placeholder="lookupPlaceholder"
|
|
:label="label"
|
|
track-by="id"
|
|
:multiple="multiple"
|
|
:taggable="allow_create"
|
|
:tag-placeholder="create_placeholder"
|
|
:loading="loading"
|
|
@search-change="search"
|
|
@input="selectionChanged"
|
|
@tag="addNew">
|
|
</multiselect>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Multiselect from 'vue-multiselect'
|
|
import {ApiMixin} from "@/utils/utils";
|
|
|
|
export default {
|
|
name: "GenericMultiselect",
|
|
components: {Multiselect},
|
|
mixins: [ApiMixin],
|
|
data() {
|
|
return {
|
|
// this.Models and this.Actions inherited from ApiMixin
|
|
loading: false,
|
|
objects: [],
|
|
selected_objects: [],
|
|
}
|
|
},
|
|
props: {
|
|
placeholder: {type: String, default: undefined},
|
|
model: {type: Object, default () {return {}}},
|
|
label: {type: String, default: 'name'},
|
|
parent_variable: {type: String, default: undefined},
|
|
limit: {type: Number, default: 10,},
|
|
sticky_options: {type:Array, default(){return []}},
|
|
initial_selection: {type:Array, default(){return []}},
|
|
multiple: {type: Boolean, default: true},
|
|
allow_create: {type: Boolean, default: false}, // TODO: this will create option to add new drop-downs
|
|
create_placeholder: {type: String, default: 'You Forgot to Add a Tag Placeholder'},
|
|
},
|
|
watch: {
|
|
initial_selection: function (newVal, oldVal) { // watch it
|
|
this.selected_objects = newVal
|
|
},
|
|
},
|
|
mounted() {
|
|
this.search('')
|
|
this.selected_objects = this.initial_selection
|
|
},
|
|
computed: {
|
|
lookupPlaceholder() {
|
|
return this.placeholder || this.model.name || this.$t('Search')
|
|
},
|
|
},
|
|
methods: {
|
|
// this.genericAPI inherited from ApiMixin
|
|
search: function (query) {
|
|
let options = {
|
|
'page': 1,
|
|
'pageSize': 10,
|
|
'query': query
|
|
}
|
|
this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
|
|
this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
|
|
})
|
|
},
|
|
selectionChanged: function () {
|
|
if (this.multiple) {
|
|
this.$emit('change', {var: this.parent_variable, val: this.selected_objects})
|
|
} else {
|
|
// if not multiple listener is expecting a single object, not an array
|
|
this.$emit('change', {var: this.parent_variable, val: this.selected_objects?.[0] ?? null})
|
|
}
|
|
|
|
},
|
|
addNew(e) {
|
|
this.$emit('new', e)
|
|
// could refactor as Promise - seems unecessary
|
|
setTimeout(() => { this.search(''); }, 750);
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|