feat: move select filters to dedicated components

src/components/input/SelectList.vue

@@ -0,0 +1,63 @@
+<template>
+	<multiselect
+		v-model="selectedLists"
+		:search-results="foundLists"
+		:loading="listService.loading"
+		:multiple="true"
+		:placeholder="$t('list.search')"
+		label="title"
+		@search="findLists"
+	/>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
+
+import Multiselect from '@/components/input/multiselect.vue'
+
+import type {IList} from '@/modelTypes/IList'
+
+import ListService from '@/services/list'
+import {includesById} from '@/helpers/utils'
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<IList[]>,
+		default: () => [],
+	},
+})
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: IList[]): void
+}>()
+
+const lists = ref<IList[]>([])
+
+watchEffect(() => {
+	lists.value = props.modelValue
+})
+
+const selectedLists = computed({
+	get() {
+		return lists.value
+	},
+	set: (value) => {
+		lists.value = value
+		emit('update:modelValue', value)
+	},
+})
+
+const listService = shallowReactive(new ListService())
+const foundLists = ref<IList[]>([])
+
+async function findLists(query: string) {
+	if (query === '') {
+		foundLists.value = []
+		return
+	}
+
+	const response = await listService.getAll({}, {s: query}) as IList[]
+
+	// Filter selected items from the results
+	foundLists.value = response.filter(({id}) => !includesById(lists.value, id))
+}
+</script>

src/components/input/SelectNamespace.vue

@@ -0,0 +1,63 @@
+<template>
+	<multiselect
+		v-model="selectedNamespaces"
+		:search-results="foundNamespaces"
+		:loading="namespaceService.loading"
+		:multiple="true"
+		:placeholder="$t('namespace.search')"
+		label="namespace"
+		@search="findNamespaces"
+	/>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
+
+import Multiselect from '@/components/input/multiselect.vue'
+
+import type {INamespace} from '@/modelTypes/INamespace'
+
+import NamespaceService from '@/services/namespace'
+import {includesById} from '@/helpers/utils'
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<INamespace[]>,
+		default: () => [],
+	},
+})
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: INamespace[]): void
+}>()
+
+const namespaces = ref<INamespace[]>([])
+
+watchEffect(() => {
+	namespaces.value = props.modelValue
+})
+
+const selectedNamespaces = computed({
+	get() {
+		return namespaces.value
+	},
+	set: (value) => {
+		namespaces.value = value
+		emit('update:modelValue', value)
+	},
+})
+
+const namespaceService = shallowReactive(new NamespaceService())
+const foundNamespaces = ref<INamespace[]>([])
+
+async function findNamespaces(query: string) {
+	if (query === '') {
+		foundNamespaces.value = []
+		return
+	}
+
+	const response = await namespaceService.getAll({}, {s: query}) as INamespace[]
+
+	// Filter selected items from the results
+	foundNamespaces.value = response.filter(({id}) => !includesById(namespaces.value, id))
+}
+</script>

src/components/input/SelectUser.vue

@@ -0,0 +1,63 @@
+<template>
+	<multiselect
+		v-model="selectedUsers"
+		:search-results="foundUsers"
+		:loading="userService.loading"
+		:multiple="true"
+		:placeholder="$t('team.edit.search')"
+		label="username"
+		@search="findUsers"
+	/>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
+
+import Multiselect from '@/components/input/multiselect.vue'
+
+import type {IUser} from '@/modelTypes/IUser'
+
+import UserService from '@/services/user'
+import {includesById} from '@/helpers/utils'
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<IUser[]>,
+		default: () => [],
+	},
+})
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: IUser[]): void
+}>()
+
+const users = ref<IUser[]>([])
+
+watchEffect(() => {
+	users.value = props.modelValue
+})
+
+const selectedUsers = computed({
+	get() {
+		return users.value
+	},
+	set: (value) => {
+		users.value = value
+		emit('update:modelValue', value)
+	},
+})
+
+const userService = shallowReactive(new UserService())
+const foundUsers = ref<IUser[]>([])
+
+async function findUsers(query: string) {
+	if (query === '') {
+		foundUsers.value = []
+		return
+	}
+
+	const response = await userService.getAll({}, {s: query}) as IUser[]
+
+	// Filter selected items from the results
+	foundUsers.value = response.filter(({id}) => !includesById(users.value, id))
+}
+</script>