feat: NewLabel script setup (#2414)

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

@@ -34,52 +34,43 @@
 	</create-edit>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed, ref} from 'vue'
-import {mapState} from 'pinia'
+import {useI18n} from 'vue-i18n'
+import {useRouter} from 'vue-router'
 
-import LabelModel from '../../models/label'
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '../../components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/colorPicker.vue'
-import { setTitle } from '@/helpers/setTitle'
-import { useLabelStore } from '@/stores/labels'
 
-export default defineComponent({
+import LabelModel from '@/models/label'
-	name: 'NewLabel',
+import {useLabelStore} from '@/stores/labels'
-	data() {
+import {useTitle} from '@/composables/useTitle'
-		return {
+import {success} from '@/message'
-			label: new LabelModel(),
+
-			showError: false,
+const router = useRouter()
-		}
+
-	},
+const {t} = useI18n({useScope: 'global'})
-	components: {
+useTitle(() => t('label.create.title'))
-		CreateEdit,
-		ColorPicker,
-	},
-	mounted() {
-		setTitle(this.$t('label.create.title'))
-	},
-	computed: {
-		...mapState(useLabelStore, {
-			loading: state => state.isLoading,
-		}),
-	},
-	methods: {
-		async newLabel() {
-			if (this.label.title === '') {
-				this.showError = true
-				return
-			}
-			this.showError = false
 
 const labelStore = useLabelStore()
-			const label = labelStore.createLabel(this.label)
+const label = ref(new LabelModel())
-			this.$router.push({
+
+const showError = ref(false)
+const loading = computed(() => labelStore.isLoading)
+
+async function newLabel() {
+	if (label.value.title === '') {
+		showError.value = true
+		return
+	}
+	showError.value = false
+
+	const labelStore = useLabelStore()
+	const newLabel = labelStore.createLabel(label.value)
+	router.push({
 		name: 'labels.index',
-				params: {id: label.id},
+		params: {id: newLabel.id},
-			})
-			this.$message.success({message: this.$t('label.create.success')})
-		},
-	},
 	})
+	success({message: t('label.create.success')})
+}
 </script>