feat: NewTeam script setup (#2388)

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

src/models/team.ts

@@ -18,7 +18,7 @@ export default class TeamModel extends AbstractModel<ITeam> implements ITeam {
 	created: Date = null
 	updated: Date = null
 
-	constructor(data: Partial<ITeam>) {
+	constructor(data: Partial<ITeam> = {}) {
 		super()
 		this.assignData(data)
 

src/views/teams/NewTeam.vue

@@ -1,6 +1,6 @@
 <template>
 	<create-edit
-		:title="$t('team.create.title')"
+		:title="title"
 		@create="newTeam()"
 		:primary-disabled="team.name === ''"
 	>
@@ -29,43 +29,43 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default { name: 'NewTeam' }
-import TeamModel from '../../models/team'
+</script>
-import TeamService from '../../services/team'
+
+<script setup lang="ts">
+import {reactive, ref, shallowReactive, computed} from 'vue'
+import {useI18n} from 'vue-i18n'
+
+import TeamModel from '@/models/team'
+import TeamService from '@/services/team'
+
 import CreateEdit from '@/components/misc/create-edit.vue'
 
-import { setTitle } from '@/helpers/setTitle'
+import {useTitle} from '@/composables/useTitle'
+import {useRouter} from 'vue-router'
+import {success} from '@/message'
 
-export default defineComponent({
+const {t} = useI18n()
-	name: 'NewTeam',
+const title = computed(() => t('team.create.title'))
-	data() {
+useTitle(title)
-		return {
+const router = useRouter()
-			teamService: new TeamService(),
+
-			team: new TeamModel(),
+const teamService = shallowReactive(new TeamService())
-			showError: false,
+const team = reactive(new TeamModel())
-		}
+const showError = ref(false)
-	},
+
-	components: {
+async function newTeam() {
-		CreateEdit,
+	if (team.name === '') {
-	},
+		showError.value = true
-	mounted() {
-		setTitle(this.$t('team.create.title'))
-	},
-	methods: {
-		async newTeam() {
-			if (this.team.name === '') {
-				this.showError = true
 		return
 	}
-			this.showError = false
+	showError.value = false
 
-			const response = await this.teamService.create(this.team)
+	const response = await teamService.create(team)
-			this.$router.push({
+	router.push({
 		name: 'teams.edit',
 		params: { id: response.id },
 	})
-			this.$message.success({message: this.$t('team.create.success') })
+	success({message: t('team.create.success') })
-		},
+}
-	},
-})
 </script>