feat: deleteNamespace script setup (#2387)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2387
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/router/index.ts

@@ -249,6 +249,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
 		{
 			path: '/tasks/:id',

src/views/namespaces/settings/archive.vue

@@ -22,7 +22,7 @@ export default { name: 'namespace-setting-archive' }
 </script>
 
 <script setup lang="ts">
-import {watch, reactive, ref, shallowReactive} from 'vue'
+import {watch, ref, computed, shallowReactive} from 'vue'
 import {useRouter} from 'vue-router'
 import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
@@ -31,7 +31,6 @@ import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 
 import NamespaceService from '@/services/namespace'
-import type {INamespace} from '@/modelTypes/INamespace'
 import NamespaceModel from '@/models/namespace'
 
 const props = defineProps({
@@ -45,31 +44,35 @@ const store = useStore()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
-const title = ref('')
-useTitle(title)
-
 const namespaceService = shallowReactive(new NamespaceService())
-const namespace : INamespace = reactive(new NamespaceModel())
+const namespace = ref(new NamespaceModel())
 
 watch(
 	() => props.namespaceId,
 	async () => {
-		Object.assign(namespace, store.getters['namespaces/getNamespaceById'](props.namespaceId))
+		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
 
 		// FIXME: ressouce should be loaded in store
-		Object.assign(namespace, await namespaceService.get({id: props.namespaceId}))
+		namespace.value = await namespaceService.get({id: props.namespaceId})
-		title.value = namespace.isArchived ?
-				t('namespace.archive.titleUnarchive', {namespace: namespace.title}) :
-				t('namespace.archive.titleArchive', {namespace: namespace.title})
 	},
 	{ immediate: true },
 )
 
+const title = computed(() => {
+	if (!namespace.value) {
+		return
+	}
+	return namespace.value.isArchived
+		? t('namespace.archive.titleUnarchive', {namespace: namespace.value.title})
+		: t('namespace.archive.titleArchive', {namespace: namespace.value.title})
+})
+useTitle(title)
+
 async function archiveNamespace() {
 	try {
-		const isArchived = !namespace.isArchived
+		const isArchived = !namespace.value.isArchived
 		const archivedNamespace = await namespaceService.update({
-			...namespace,
+			...namespace.value,
 			isArchived,
 		})
 		store.commit('namespaces/setNamespaceById', archivedNamespace)

src/views/namespaces/settings/delete.vue

@@ -13,36 +13,56 @@
 </template>
 
 <script lang="ts">	
-import {defineComponent} from 'vue'
+export default { name: 'namespace-setting-delete' }
-import { setTitle } from '@/helpers/setTitle'
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
-	name: 'namespace-setting-delete',
+import {ref, computed, watch, shallowReactive} from 'vue'
-	computed: {
+import {useI18n} from 'vue-i18n'
-		namespace() {
+import {useRouter} from 'vue-router'
-			return this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
+
-		},
+import {useStore} from '@/store'
-		title() {
+import {useTitle} from '@/composables/useTitle'
-			if (!this.namespace) {
+import {success} from '@/message'
-				return
+import NamespaceModel from '@/models/namespace'
-			}
+import NamespaceService from '@/services/namespace'
-			return this.$t('namespace.delete.title', {namespace: this.namespace.title})
+
-		},
+const props = defineProps({
-	},
+	namespaceId: {
-	watch: {
+		type: Number,
-		title: {
+		required: true,
-			handler(title) {
-				setTitle(title)
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		async deleteNamespace() {
-			await this.$store.dispatch('namespaces/deleteNamespace', this.namespace)
-			this.$message.success({message: this.$t('namespace.delete.success')})
-			this.$router.push({name: 'home'})
-		},
 	},
 })
+
+const store = useStore()
+const router = useRouter()
+const {t} = useI18n({useScope: 'global'})
+
+const namespaceService = shallowReactive(new NamespaceService())
+const namespace = ref(new NamespaceModel())
+
+watch(
+	() => props.namespaceId,
+	async () => {
+		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
+
+		// FIXME: ressouce should be loaded in store
+		namespace.value = await namespaceService.get({id: props.namespaceId})
+	},
+	{ immediate: true },
+)
+
+const title = computed(() => {
+	if (!namespace.value) {
+		return
+	}
+	return t('namespace.delete.title', {namespace: namespace.value.title})
+})
+useTitle(title)
+
+async function deleteNamespace() {
+	await store.dispatch('namespaces/deleteNamespace', namespace.value)
+	success({message: t('namespace.delete.success')})
+	router.push({name: 'home'})
+}
 </script>