feat: NewList script setup (#1989)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1989
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/views/list/NewList.vue

@@ -1,5 +1,5 @@
 <template>
-	<create-edit :title="$t('list.create.header')" @create="newList()" :primary-disabled="list.title === ''">
+	<create-edit :title="$t('list.create.header')" @create="createNewList()" :primary-disabled="list.title === ''">
 		<div class="field">
 			<label class="label" for="listTitle">{{ $t('list.title') }}</label>
 			<div
@@ -8,7 +8,7 @@
 			>
 				<input
 					:class="{ disabled: listService.loading }"
-					@keyup.enter="newList()"
+					@keyup.enter="createNewList()"
 					@keyup.esc="$router.back()"
 					class="input"
 					:placeholder="$t('list.create.titlePlaceholder')"
@@ -31,45 +31,44 @@
 	</create-edit>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {ref, reactive, shallowReactive} from 'vue'
-import ListService from '../../services/list'
+import {useI18n} from 'vue-i18n'
-import ListModel from '../../models/list'
+import {useRouter, useRoute} from 'vue-router'
+import {useStore} from 'vuex'
+
+import ListService from '@/services/list'
+import ListModel from '@/models/list'
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '../../components/input/colorPicker'
+import ColorPicker from '@/components/input/colorPicker.vue'
 
-export default defineComponent({
+import { success } from '@/message'
-	name: 'NewList',
+import { useTitle } from '@/composables/useTitle'
-	data() {
-		return {
-			showError: false,
-			list: new ListModel(),
-			listService: new ListService(),
-		}
-	},
-	components: {
-		CreateEdit,
-		ColorPicker,
-	},
-	mounted() {
-		this.setTitle(this.$t('list.create.header'))
-	},
-	methods: {
-		async newList() {
-			if (this.list.title === '') {
-				this.showError = true
-				return
-			}
-			this.showError = false
 
-			this.list.namespaceId = parseInt(this.$route.params.namespaceId)
+const {t} = useI18n()
-			const list = await this.$store.dispatch('lists/createList', this.list)
+const store = useStore()
-			this.$message.success({message: this.$t('list.create.createdSuccess') })
+const router = useRouter()
-			this.$router.push({
+const route = useRoute()
-				name: 'list.index',
+
-				params: { listId: list.id },
+useTitle(() => t('list.create.header'))
-			})
+
-		},
+const showError = ref(false)
-	},
+const list = reactive(new ListModel())
-})
+const listService = shallowReactive(new ListService())
+
+async function createNewList() {
+	if (list.title === '') {
+		showError.value = true
+		return
+	}
+	showError.value = false
+
+	list.namespaceId = parseInt(route.params.namespaceId)
+	const newList = await store.dispatch('lists/createList', list)
+	await router.push({
+		name: 'list.index',
+		params: { listId: newList.id },
+	})
+	success({message: t('list.create.createdSuccess') })
+}
 </script>