feat: simplify namespace search (#1835)

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

src/components/namespace/namespace-search.vue

@@ -1,32 +0,0 @@
-<template>
-	<multiselect
-		:placeholder="$t('namespace.search')"
-		@search="findNamespaces"
-		:search-results="namespaces"
-		@select="select"
-		label="title"
-		:search-delay="10"
-	/>
-</template>
-
-<script lang="ts" setup>
-import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
-import Multiselect from '@/components/input/multiselect.vue'
-import NamespaceModel from '@/models/namespace'
-
-const emit = defineEmits(['selected'])
-
-const query = ref('')
-
-const store = useStore()
-const namespaces = computed(() => store.getters['namespaces/searchNamespace'](query.value))
-
-function findNamespaces(newQuery: string) {
-	query.value = newQuery
-}
-
-function select(namespace: NamespaceModel) {
-	emit('selected', namespace)
-}
-</script>

src/composables/useNamespaceSearch.ts

@@ -0,0 +1,19 @@
+import {ref, computed, Ref} from 'vue'
+import {useStore} from 'vuex'
+
+export function useNameSpaceSearch() {
+	const query = ref('')
+	
+	const store = useStore()
+	const namespaces = computed(() => store.getters['namespaces/searchNamespace'](query.value))
+	
+	function findNamespaces(newQuery: string) {
+		query.value = newQuery
+	}
+
+	return {
+		namespaces,
+		findNamespaces,
+	}
+}
+

src/views/list/settings/duplicate.vue

@@ -6,52 +6,68 @@
 		@primary="duplicateList"
 		:loading="listDuplicateService.loading"
 	>
-		<p>
-			{{ $t('list.duplicate.text') }}
-		</p>
-		<namespace-search @selected="selectNamespace"/>
+		<p>{{ $t('list.duplicate.text') }}</p>
+
+		<Multiselect
+			:placeholder="$t('namespace.search')"
+			@search="findNamespaces"
+			:search-results="namespaces"
+			@select="selectNamespace"
+			label="title"
+			:search-delay="10"
+		/>
 	</create-edit>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, shallowReactive} from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
 
 import ListDuplicateService from '@/services/listDuplicateService'
-import NamespaceSearch from '@/components/namespace/namespace-search.vue'
-import ListDuplicateModel from '@/models/listDuplicateModel'
 import CreateEdit from '@/components/misc/create-edit.vue'
+import Multiselect from '@/components/input/multiselect.vue'
 
-export default defineComponent({
-	name: 'list-setting-duplicate',
-	data() {
-		return {
-			listDuplicateService: new ListDuplicateService(),
-			selectedNamespace: null,
+import ListDuplicateModel from '@/models/listDuplicateModel'
+import NamespaceModel from '@/models/namespace'
+
+import { success } from '@/message'
+import { useTitle } from '@/composables/useTitle'
+import { useNameSpaceSearch } from '@/composables/useNamespaceSearch'
+
+
+const { t } = useI18n()
+useTitle(() => t('list.duplicate.title'))
+
+
+const {
+	namespaces,
+	findNamespaces,
+} = useNameSpaceSearch()
+
+const selectedNamespace = ref<NamespaceModel>()
+function selectNamespace(namespace: NamespaceModel) {
+	selectedNamespace.value = namespace
 }
-	},
-	components: {
-		CreateEdit,
-		NamespaceSearch,
-	},
-	created() {
-		this.setTitle(this.$t('list.duplicate.title'))
-	},
-	methods: {
-		selectNamespace(namespace) {
-			this.selectedNamespace = namespace
-		},
 
-		async duplicateList() {
+const route = useRoute()
+const router= useRouter()
+
+const listDuplicateService = shallowReactive(new ListDuplicateService())
+async function duplicateList() {
 	const listDuplicate = new ListDuplicateModel({
-				listId: this.$route.params.listId,
-				namespaceId: this.selectedNamespace.id,
-			})
-			const duplicate = await this.listDuplicateService.create(listDuplicate)
-			this.$store.commit('namespaces/addListToNamespace', duplicate.list)
-			this.$store.commit('lists/setList', duplicate.list)
-			this.$message.success({message: this.$t('list.duplicate.success')})
-			this.$router.push({name: 'list.index', params: {listId: duplicate.list.id}})
-		},
-	},
+		// FIXME: should be parameter
+		listId: route.params.listId,
+		namespaceId: selectedNamespace.value?.id,
 	})
+
+	const duplicate = await listDuplicateService.create(listDuplicate)
+
+	const store = useStore()
+	store.commit('namespaces/addListToNamespace', duplicate.list)
+	store.commit('lists/setList', duplicate.list)
+	success({message: t('list.duplicate.success')})
+	router.push({name: 'list.index', params: {listId: duplicate.list.id}})
+}
 </script>