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.
77 lines
2.3 KiB
77 lines
2.3 KiB
<script lang="ts" setup> |
|
import { ref } from 'vue' |
|
import { useNuxtApp, useRouter } from '#app' |
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
|
|
|
const name = ref('') |
|
const loading = ref(false) |
|
const valid = ref(false) |
|
|
|
const { $api, $toast } = useNuxtApp() |
|
const $router = useRouter() |
|
|
|
const titleValidationRule = [ |
|
(v: string) => !!v || 'Title is required', |
|
(v: string) => v.length <= 50 || 'Project name exceeds 50 characters', |
|
] |
|
|
|
const createProject = async () => { |
|
loading.value = true |
|
try { |
|
const result = await $api.project.create({ |
|
title: name.value, |
|
}) |
|
|
|
await $router.push(`/nc/${result.id}`) |
|
} catch (e: any) { |
|
// todo: toast |
|
$toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000) |
|
} |
|
loading.value = false |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="main justify-center d-flex mx-auto" style="min-height: 600px; overflow: auto"> |
|
<v-form ref="form" v-model="valid" @submit.prevent="createProject"> |
|
<v-card style="width: 530px; margin-top: 100px" class="mx-auto"> |
|
<!-- Create Project --> |
|
<v-container class="pb-10 px-12" style="padding-top: 43px !important"> |
|
<h1 class="mt-4 mb-4 text-center"> |
|
<!-- {{ $t('activity.createProject') }} --> |
|
Create Project |
|
</h1> |
|
<div class="mx-auto" style="width: 350px"> |
|
<!-- label="Enter Project Name" --> |
|
<!-- rule text: Required --> |
|
<v-text-field v-model="name" class="nc-metadb-project-name" label="Project name" /> |
|
<!-- :rules="titleValidationRule" --> |
|
</div> |
|
<div class="text-center"> |
|
<v-btn class="mt-3 mx-auto" large :loading="loading" color="primary" @click="createProject"> |
|
<v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline </v-icon> |
|
<!-- Create --> |
|
<!-- <span class="mr-1">{{ // $t("general.create") }}</span> --> |
|
<span class="mr-1"> Create project </span> |
|
</v-btn> |
|
</div> |
|
</v-container> |
|
</v-card> |
|
</v-form> |
|
</div> |
|
</template> |
|
|
|
<style scoped> |
|
:deep(label) { |
|
font-size: 0.75rem; |
|
} |
|
|
|
.wrapper { |
|
border: 2px solid var(--v-backgroundColor-base); |
|
border-radius: 4px; |
|
} |
|
|
|
.main { |
|
height: calc(100vh - 48px); |
|
} |
|
</style>
|
|
|