mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.1 KiB
75 lines
2.1 KiB
2 years ago
|
<script lang="ts" setup>
|
||
2 years ago
|
import { onMounted } from '@vue/runtime-core'
|
||
2 years ago
|
import type { Form } from 'ant-design-vue'
|
||
2 years ago
|
import { ref } from 'vue'
|
||
2 years ago
|
import { navigateTo, useNuxtApp } from '#app'
|
||
2 years ago
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
|
||
2 years ago
|
import { projectTitleValidator } from '~/utils/projectCreateUtils'
|
||
2 years ago
|
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
|
||
2 years ago
|
|
||
|
const name = ref('')
|
||
|
const loading = ref(false)
|
||
|
const valid = ref(false)
|
||
|
|
||
2 years ago
|
const { $api, $toast, $state } = useNuxtApp()
|
||
2 years ago
|
|
||
2 years ago
|
const nameValidationRules = [
|
||
2 years ago
|
{
|
||
|
required: true,
|
||
|
message: 'Title is required',
|
||
|
},
|
||
2 years ago
|
projectTitleValidator,
|
||
2 years ago
|
]
|
||
2 years ago
|
|
||
2 years ago
|
const formState = reactive({
|
||
|
title: '',
|
||
|
})
|
||
|
|
||
2 years ago
|
const createProject = async () => {
|
||
|
loading.value = true
|
||
|
try {
|
||
2 years ago
|
const result = await $api.project.create({
|
||
2 years ago
|
title: formState.title,
|
||
2 years ago
|
})
|
||
2 years ago
|
|
||
2 years ago
|
await navigateTo(`/nc/${result.id}`)
|
||
2 years ago
|
} catch (e: any) {
|
||
2 years ago
|
$toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
|
||
2 years ago
|
}
|
||
|
loading.value = false
|
||
|
}
|
||
2 years ago
|
|
||
2 years ago
|
const form = ref<typeof Form>()
|
||
2 years ago
|
|
||
2 years ago
|
// hide sidebar
|
||
|
$state.sidebarOpen.value = false
|
||
|
|
||
|
// select and focus title field on load
|
||
2 years ago
|
onMounted(() => {
|
||
2 years ago
|
const input = form.value?.$el?.querySelector('input')
|
||
|
if (input) {
|
||
|
input.setSelectionRange(0, formState.title.length)
|
||
|
input.focus()
|
||
|
}
|
||
2 years ago
|
})
|
||
2 years ago
|
</script>
|
||
|
|
||
2 years ago
|
<template>
|
||
2 years ago
|
<a-card class="w-[500px] mx-auto !mt-100px shadow-md">
|
||
2 years ago
|
<h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
|
||
2 years ago
|
|
||
2 years ago
|
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
|
||
2 years ago
|
<a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
|
||
2 years ago
|
<a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
|
||
2 years ago
|
</a-form-item>
|
||
|
|
||
2 years ago
|
<a-form-item style="text-align: center" class="mt-2">
|
||
2 years ago
|
<a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
|
||
2 years ago
|
<MaterialSymbolsRocketLaunchOutline class="mr-1" />
|
||
|
<span> {{ $t('general.create') }} </span></a-button
|
||
2 years ago
|
>
|
||
|
</a-form-item>
|
||
|
</a-form>
|
||
|
</a-card>
|
||
2 years ago
|
</template>
|