src/views/namespaces/NewNamespace.vue

@@ -10,9 +10,12 @@
 				class="control is-expanded"
 				:class="{ 'is-loading': namespaceService.loading }"
 			>
+				<!-- The user should be able to close the modal by pressing escape - that already works with the default modal.
+					But with the input modal here since it autofocuses the input that input field catches the focus instead.
+					Hence we place the listener on the input field directly. -->
 				<input
 					@keyup.enter="newNamespace()"
-					@keyup.esc="back()"
+					@keyup.esc="$router.back()"
 					class="input"
 					:placeholder="$t('namespace.attributes.titlePlaceholder')"
 					type="text"
@@ -40,48 +43,42 @@
 	</create-edit>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {ref, shallowReactive} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRouter} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
-import NamespaceModel from '../../models/namespace'
-import NamespaceService from '../../services/namespace'
 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 {useNamespaceStore} from '@/stores/namespaces'
 
-export default defineComponent({
+import NamespaceModel from '@/models/namespace'
-	name: 'NewNamespace',
+import NamespaceService from '@/services/namespace'
-	data() {
+import {useNamespaceStore} from '@/stores/namespaces'
-		return {
+import type {INamespace} from '@/modelTypes/INamespace'
-			showError: false,
+
-			namespace: new NamespaceModel(),
+import {useTitle} from '@/composables/useTitle'
-			namespaceService: new NamespaceService(),
+import {success} from '@/message'
-		}
+
-	},
+const showError = ref(false)
-	components: {
+const namespace = ref<INamespace>(new NamespaceModel())
-		Message,
+const namespaceService = shallowReactive(new NamespaceService())
-		ColorPicker,
+
-		CreateEdit,
+const {t} = useI18n({useScope: 'global'})
-	},
+const router = useRouter()
-	mounted() {
+
-		setTitle(this.$t('namespace.create.title'))
+useTitle(() => t('namespace.create.title'))
-	},
+
-	methods: {
+async function newNamespace() {
-		async newNamespace() {
+	if (namespace.value.title === '') {
-			if (this.namespace.title === '') {
+		showError.value = true
-				this.showError = true
 		return
 	}
-			this.showError = false
+	showError.value = false
 
-			const namespace = await this.namespaceService.create(this.namespace)
+	const newNamespace = await namespaceService.create(namespace.value)
-			const namespaceStore = useNamespaceStore()
+	useNamespaceStore().addNamespace(newNamespace)
-			namespaceStore.addNamespace(namespace)
+	success({message: t('namespace.create.success')})
-			this.$message.success({message: this.$t('namespace.create.success')})
+	router.back()
-			this.$router.back()
+}
-		},
-	},
-})
 </script>