2019-11-24 13:16:24 +00:00
|
|
|
<template>
|
2022-05-14 14:36:08 +00:00
|
|
|
<Multiselect
|
2021-06-03 20:23:04 +00:00
|
|
|
:loading="loading"
|
2021-06-23 23:24:57 +00:00
|
|
|
:placeholder="$t('task.label.placeholder')"
|
2020-09-05 20:35:52 +00:00
|
|
|
:multiple="true"
|
2021-01-06 22:36:31 +00:00
|
|
|
@search="findLabel"
|
|
|
|
:search-results="foundLabels"
|
|
|
|
@select="addLabel"
|
2020-09-05 20:35:52 +00:00
|
|
|
label="title"
|
2023-05-30 17:54:01 +00:00
|
|
|
:creatable="creatable"
|
2021-01-06 22:36:31 +00:00
|
|
|
@create="createAndAddLabel"
|
2021-06-23 23:24:57 +00:00
|
|
|
:create-placeholder="$t('task.label.createPlaceholder')"
|
2020-09-05 20:35:52 +00:00
|
|
|
v-model="labels"
|
2021-06-03 20:58:47 +00:00
|
|
|
:search-delay="10"
|
2021-11-09 19:07:06 +00:00
|
|
|
:close-after-select="false"
|
2019-11-24 13:16:24 +00:00
|
|
|
>
|
2022-05-14 14:36:08 +00:00
|
|
|
<template #tag="{item: label}">
|
2020-09-05 20:35:52 +00:00
|
|
|
<span
|
2022-05-14 14:36:08 +00:00
|
|
|
:style="{'background': label.hexColor, 'color': label.textColor}"
|
2021-01-17 09:55:04 +00:00
|
|
|
class="tag">
|
2022-05-14 14:36:08 +00:00
|
|
|
<span>{{ label.title }}</span>
|
2022-05-10 23:14:38 +00:00
|
|
|
<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
|
2020-09-05 20:35:52 +00:00
|
|
|
</span>
|
2019-11-24 13:16:24 +00:00
|
|
|
</template>
|
2022-05-14 14:36:08 +00:00
|
|
|
<template #searchResult="{option}">
|
2021-01-14 21:06:22 +00:00
|
|
|
<span
|
2022-05-14 14:36:08 +00:00
|
|
|
v-if="typeof option === 'string'"
|
2022-01-18 21:22:32 +00:00
|
|
|
class="tag search-result">
|
2022-05-14 14:36:08 +00:00
|
|
|
<span>{{ option }}</span>
|
2021-01-14 21:06:22 +00:00
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
v-else
|
2022-05-14 14:36:08 +00:00
|
|
|
:style="{'background': option.hexColor, 'color': option.textColor}"
|
2022-01-18 21:22:32 +00:00
|
|
|
class="tag search-result">
|
2022-05-14 14:36:08 +00:00
|
|
|
<span>{{ option.title }}</span>
|
2021-01-14 21:06:22 +00:00
|
|
|
</span>
|
|
|
|
</template>
|
2022-05-14 14:36:08 +00:00
|
|
|
</Multiselect>
|
2019-11-24 13:16:24 +00:00
|
|
|
</template>
|
|
|
|
|
2022-05-14 14:36:08 +00:00
|
|
|
<script setup lang="ts">
|
2022-06-23 01:08:35 +00:00
|
|
|
import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
|
2022-05-14 14:36:08 +00:00
|
|
|
import {useI18n} from 'vue-i18n'
|
|
|
|
|
2022-09-05 16:32:42 +00:00
|
|
|
import LabelModel from '@/models/label'
|
2022-05-14 14:36:08 +00:00
|
|
|
import LabelTaskService from '@/services/labelTask'
|
|
|
|
import {success} from '@/message'
|
2021-01-06 22:36:31 +00:00
|
|
|
|
2022-05-10 23:14:38 +00:00
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
2021-07-25 13:27:15 +00:00
|
|
|
import Multiselect from '@/components/input/multiselect.vue'
|
2022-09-23 10:55:53 +00:00
|
|
|
import type {ILabel} from '@/modelTypes/ILabel'
|
|
|
|
import {useLabelStore} from '@/stores/labels'
|
|
|
|
import {useTaskStore} from '@/stores/tasks'
|
2024-01-15 13:00:08 +00:00
|
|
|
import {getRandomColorHex} from '@/helpers/color/randomColor'
|
2022-05-14 14:36:08 +00:00
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
modelValue: {
|
2022-07-20 22:42:36 +00:00
|
|
|
type: Array as PropType<ILabel[]>,
|
2022-05-14 14:36:08 +00:00
|
|
|
default: () => [],
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2022-05-14 14:36:08 +00:00
|
|
|
taskId: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
|
|
|
default: 0,
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2022-05-14 14:36:08 +00:00
|
|
|
disabled: {
|
|
|
|
default: false,
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2023-05-30 17:54:01 +00:00
|
|
|
creatable: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true,
|
|
|
|
},
|
2022-05-14 14:36:08 +00:00
|
|
|
})
|
|
|
|
|
2022-09-13 15:30:33 +00:00
|
|
|
const emit = defineEmits(['update:modelValue'])
|
2022-05-14 14:36:08 +00:00
|
|
|
|
2022-05-23 05:23:59 +00:00
|
|
|
const {t} = useI18n({useScope: 'global'})
|
2022-05-14 14:36:08 +00:00
|
|
|
|
|
|
|
const labelTaskService = shallowReactive(new LabelTaskService())
|
2022-07-20 22:42:36 +00:00
|
|
|
const labels = ref<ILabel[]>([])
|
2022-05-14 14:36:08 +00:00
|
|
|
const query = ref('')
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => props.modelValue,
|
|
|
|
(value) => {
|
|
|
|
labels.value = value
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2022-05-14 14:36:08 +00:00
|
|
|
{
|
|
|
|
immediate: true,
|
|
|
|
deep: true,
|
2021-06-03 20:23:04 +00:00
|
|
|
},
|
2022-05-14 14:36:08 +00:00
|
|
|
)
|
2020-09-05 20:35:52 +00:00
|
|
|
|
2022-09-23 10:55:53 +00:00
|
|
|
const taskStore = useTaskStore()
|
2022-09-21 14:23:57 +00:00
|
|
|
const labelStore = useLabelStore()
|
|
|
|
|
|
|
|
const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
|
|
|
|
const loading = computed(() => labelTaskService.loading || labelStore.isLoading)
|
2022-05-14 14:36:08 +00:00
|
|
|
|
|
|
|
function findLabel(newQuery: string) {
|
|
|
|
query.value = newQuery
|
|
|
|
}
|
|
|
|
|
2022-07-20 22:42:36 +00:00
|
|
|
async function addLabel(label: ILabel, showNotification = true) {
|
2022-05-14 14:36:08 +00:00
|
|
|
if (props.taskId === 0) {
|
2022-09-23 10:55:53 +00:00
|
|
|
emit('update:modelValue', labels.value)
|
2022-05-14 14:36:08 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2022-09-23 10:55:53 +00:00
|
|
|
await taskStore.addLabel({label, taskId: props.taskId})
|
|
|
|
emit('update:modelValue', labels.value)
|
2022-05-14 14:36:08 +00:00
|
|
|
if (showNotification) {
|
|
|
|
success({message: t('task.label.addSuccess')})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-07-20 22:42:36 +00:00
|
|
|
async function removeLabel(label: ILabel) {
|
2022-05-14 14:36:08 +00:00
|
|
|
if (props.taskId !== 0) {
|
2022-09-23 10:55:53 +00:00
|
|
|
await taskStore.removeLabel({label, taskId: props.taskId})
|
2022-05-14 14:36:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
for (const l in labels.value) {
|
|
|
|
if (labels.value[l].id === label.id) {
|
2022-07-20 19:15:35 +00:00
|
|
|
labels.value.splice(l, 1) // FIXME: l should be index
|
2022-05-14 14:36:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
emit('update:modelValue', labels.value)
|
|
|
|
success({message: t('task.label.removeSuccess')})
|
|
|
|
}
|
|
|
|
|
|
|
|
async function createAndAddLabel(title: string) {
|
|
|
|
if (props.taskId === 0) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2024-01-15 13:00:08 +00:00
|
|
|
const newLabel = await labelStore.createLabel(new LabelModel({
|
|
|
|
title,
|
|
|
|
hexColor: getRandomColorHex(),
|
|
|
|
}))
|
2022-05-14 14:36:08 +00:00
|
|
|
addLabel(newLabel, false)
|
|
|
|
labels.value.push(newLabel)
|
|
|
|
success({message: t('task.label.addCreateSuccess')})
|
|
|
|
}
|
2019-11-24 13:16:24 +00:00
|
|
|
</script>
|
2021-11-04 16:28:20 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.tag {
|
2022-01-18 21:22:32 +00:00
|
|
|
margin: .25rem !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tag.search-result {
|
|
|
|
margin: 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.input-wrapper) {
|
|
|
|
padding: .25rem !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(input.input) {
|
|
|
|
padding: 0 .5rem;
|
2021-11-04 16:28:20 +00:00
|
|
|
}
|
|
|
|
</style>
|