166 lines
3.7 KiB
Vue
166 lines
3.7 KiB
Vue
<template>
|
|
<multiselect
|
|
:clear-on-select="true"
|
|
:close-on-select="false"
|
|
:disabled="disabled"
|
|
:hide-selected="true"
|
|
:internal-search="true"
|
|
:loading="labelService.loading || labelTaskService.loading"
|
|
:multiple="true"
|
|
:options="foundLabels"
|
|
:options-limit="300"
|
|
:searchable="true"
|
|
:showNoOptions="false"
|
|
:taggable="true"
|
|
@search-change="findLabel"
|
|
@select="addLabel"
|
|
@tag="createAndAddLabel"
|
|
label="title"
|
|
placeholder="Type to add a new label..."
|
|
tag-placeholder="Add this as new label"
|
|
track-by="id"
|
|
v-model="labels"
|
|
>
|
|
<template
|
|
slot="tag"
|
|
slot-scope="{ option }">
|
|
<span
|
|
:style="{'background': option.hexColor, 'color': option.textColor}"
|
|
class="tag">
|
|
<span>{{ option.title }}</span>
|
|
<a @click="removeLabel(option)" class="delete is-small"></a>
|
|
</span>
|
|
</template>
|
|
<template slot="clear" slot-scope="props">
|
|
<div
|
|
@mousedown.prevent.stop="clearAllLabels(props.search)"
|
|
class="multiselect__clear"
|
|
v-if="labels.length"></div>
|
|
</template>
|
|
</multiselect>
|
|
</template>
|
|
|
|
<script>
|
|
import {differenceWith} from 'lodash'
|
|
|
|
import LabelService from '../../../services/label'
|
|
import LabelModel from '../../../models/label'
|
|
import LabelTaskService from '../../../services/labelTask'
|
|
import LoadingComponent from '../../misc/loading'
|
|
import ErrorComponent from '../../misc/error'
|
|
|
|
export default {
|
|
name: 'edit-labels',
|
|
props: {
|
|
value: {
|
|
default: () => [],
|
|
type: Array,
|
|
},
|
|
taskId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
disabled: {
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
labelService: LabelService,
|
|
labelTaskService: LabelTaskService,
|
|
foundLabels: [],
|
|
labelTimeout: null,
|
|
labels: [],
|
|
searchQuery: '',
|
|
}
|
|
},
|
|
components: {
|
|
multiselect: () => ({
|
|
component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
|
|
loading: LoadingComponent,
|
|
error: ErrorComponent,
|
|
timeout: 60000,
|
|
}),
|
|
},
|
|
watch: {
|
|
value(newLabels) {
|
|
this.labels = newLabels
|
|
},
|
|
},
|
|
created() {
|
|
this.labelService = new LabelService()
|
|
this.labelTaskService = new LabelTaskService()
|
|
this.labels = this.value
|
|
},
|
|
methods: {
|
|
findLabel(query) {
|
|
this.searchQuery = query
|
|
if (query === '') {
|
|
this.clearAllLabels()
|
|
return
|
|
}
|
|
|
|
if (this.labelTimeout !== null) {
|
|
clearTimeout(this.labelTimeout)
|
|
}
|
|
|
|
// Delay the search 300ms to not send a request on every keystroke
|
|
this.labelTimeout = setTimeout(() => {
|
|
this.labelService.getAll({}, {s: query})
|
|
.then(response => {
|
|
this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
|
|
return first.id === second.id
|
|
}))
|
|
this.labelTimeout = null
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
}, 300)
|
|
},
|
|
clearAllLabels() {
|
|
this.$set(this, 'foundLabels', [])
|
|
},
|
|
addLabel(label) {
|
|
this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
|
|
.then(() => {
|
|
this.$emit('input', this.labels)
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
removeLabel(label) {
|
|
this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
|
|
.then(() => {
|
|
// Remove the label from the list
|
|
for (const l in this.labels) {
|
|
if (this.labels[l].id === label.id) {
|
|
this.labels.splice(l, 1)
|
|
}
|
|
}
|
|
this.$emit('input', this.labels)
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
createAndAddLabel(title) {
|
|
let newLabel = new LabelModel({title: title})
|
|
this.labelService.create(newLabel)
|
|
.then(r => {
|
|
this.addLabel(r)
|
|
this.labels.push(r)
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |