feat: editLabels script setup (#1940)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1940
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/editLabels.vue

@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		:loading="loading"
 		:placeholder="$t('task.label.placeholder')"
 		:multiple="true"
@@ -14,135 +14,126 @@
 		:search-delay="10"
 		:close-after-select="false"
 	>
-		<template #tag="props">
+		<template #tag="{item: label}">
 			<span
-				:style="{'background': props.item.hexColor, 'color': props.item.textColor}"
+				:style="{'background': label.hexColor, 'color': label.textColor}"
 				class="tag">
-				<span>{{ props.item.title }}</span>
+				<span>{{ label.title }}</span>
-				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(props.item)" class="delete is-small" />
+				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
 			</span>
 		</template>
-		<template #searchResult="props">
+		<template #searchResult="{option}">
 			<span
-				v-if="typeof props.option === 'string'"
+				v-if="typeof option === 'string'"
 				class="tag search-result">
-				<span>{{ props.option }}</span>
+				<span>{{ option }}</span>
 			</span>
 			<span
 				v-else
-				:style="{'background': props.option.hexColor, 'color': props.option.textColor}"
+				:style="{'background': option.hexColor, 'color': option.textColor}"
 				class="tag search-result">
-				<span>{{ props.option.title }}</span>
+				<span>{{ option.title }}</span>
 			</span>
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {PropType, ref, computed, shallowReactive, watch} from 'vue'
-import LabelModel from '../../../models/label'
+import {useStore} from 'vuex'
-import LabelTaskService from '../../../services/labelTask'
+import {useI18n} from 'vue-i18n'
+
+import LabelModel from '@/models/label'
+import LabelTaskService from '@/services/labelTask'
+import {success} from '@/message'
 
 import Multiselect from '@/components/input/multiselect.vue'
-import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
-export default defineComponent({
+const props = defineProps({
-	name: 'edit-labels',
-	props: {
 	modelValue: {
+		type: Array as PropType<LabelModel[]>,
 		default: () => [],
-			type: Array,
 	},
 	taskId: {
 		type: Number,
 		required: false,
-			default: () => 0,
+		default: 0,
 	},
 	disabled: {
 		default: false,
 	},
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const store = useStore()
+const {t} = useI18n()
+
+const labelTaskService = shallowReactive(new LabelTaskService())
+const labels = ref<LabelModel[]>([])
+const query = ref('')
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		labels.value = value
 	},
-	emits: ['update:modelValue', 'change'],
+	{
-	data() {
-		return {
-			labelTaskService: new LabelTaskService(),
-			labelTimeout: null,
-			labels: [],
-			query: '',
-		}
-	},
-	components: {
-		Multiselect,
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.labels = value
-			},
 		immediate: true,
 		deep: true,
 	},
-	},
+)
-	computed: {
-		foundLabels() {
-			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
-		},
-		loading() {
-			return this.labelTaskService.loading || (this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'labels')
-		},
-	},
-	methods: {
-		findLabel(query) {
-			this.query = query
-		},
 
-		async addLabel(label, showNotification = true) {
+const foundLabels = computed(() => store.getters['labels/filterLabelsByQuery'](labels.value, query.value))
-			const bubble = () => {
+const loading = computed(() => labelTaskService.loading || (store.state.loading && store.state.loadingModule === 'labels'))
-				this.$emit('update:modelValue', this.labels)
+
-				this.$emit('change', this.labels)
+function findLabel(newQuery: string) {
+	query.value = newQuery
 }
 
-			if (this.taskId === 0) {
+async function addLabel(label: LabelModel, showNotification = true) {
+	const bubble = () => {
+		emit('update:modelValue', labels.value)
+		emit('change', labels.value)
+	}
+	
+	if (props.taskId === 0) {
 		bubble()
 		return
 	}
 
-			await this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
+	await store.dispatch('tasks/addLabel', {label, taskId: props.taskId})
 	bubble()
 	if (showNotification) {
-				this.$message.success({message: this.$t('task.label.addSuccess')})
+		success({message: t('task.label.addSuccess')})
 	}
-		},
-
-		async removeLabel(label) {
-			if (this.taskId !== 0) {
-				await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
 }
 
-			for (const l in this.labels) {
+async function removeLabel(label: LabelModel) {
-				if (this.labels[l].id === label.id) {
+	if (props.taskId !== 0) {
-					this.labels.splice(l, 1)
+		await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
 	}
-			}
-			this.$emit('update:modelValue', this.labels)
-			this.$emit('change', this.labels)
-			this.$message.success({message: this.$t('task.label.removeSuccess')})
-		},
 
-		async createAndAddLabel(title) {
+	for (const l in labels.value) {
-			if (this.taskId === 0) {
+		if (labels.value[l].id === label.id) {
+			labels.value.splice(l, 1)
+		}
+	}
+	emit('update:modelValue', labels.value)
+	emit('change', labels.value)
+	success({message: t('task.label.removeSuccess')})
+}
+
+async function createAndAddLabel(title: string) {
+	if (props.taskId === 0) {
 		return
 	}
 
-			const newLabel = new LabelModel({title: title})
+	const newLabel = await store.dispatch('labels/createLabel', new LabelModel({title}))
-			const label = await this.$store.dispatch('labels/createLabel', newLabel)
+	addLabel(newLabel, false)
-			this.addLabel(label, false)
+	labels.value.push(newLabel)
-			this.labels.push(label)
+	success({message: t('task.label.addCreateSuccess')})
-			this.$message.success({message: this.$t('task.label.addCreateSuccess')})
+}
-		},
-
-	},
-})
 </script>
 
 <style lang="scss" scoped>