Browse Source

fix: corrections in create project

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 3 years ago
parent
commit
291fd0c0cc
  1. 27
      packages/nc-gui-v2/package-lock.json
  2. 1
      packages/nc-gui-v2/package.json
  3. 90
      packages/nc-gui-v2/pages/projects/create-external.vue
  4. 11
      packages/nc-gui-v2/pages/projects/index.vue

27
packages/nc-gui-v2/package-lock.json generated

@ -5,7 +5,6 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@nuxtjs/toast": "^3.3.1",
"nocodb-sdk": "file:../nocodb-sdk", "nocodb-sdk": "file:../nocodb-sdk",
"nuxt3-store": "^1.0.0", "nuxt3-store": "^1.0.0",
"vuetify": "^3.0.0-alpha.13" "vuetify": "^3.0.0-alpha.13"
@ -1278,14 +1277,6 @@
"url": "https://github.com/chalk/chalk?sponsor=1" "url": "https://github.com/chalk/chalk?sponsor=1"
} }
}, },
"node_modules/@nuxtjs/toast": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
"integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
"dependencies": {
"vue-toasted": "^1.1.28"
}
},
"node_modules/@rollup/plugin-alias": { "node_modules/@rollup/plugin-alias": {
"version": "3.1.9", "version": "3.1.9",
"resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz",
@ -11537,11 +11528,6 @@
"vue": "^3.2.0" "vue": "^3.2.0"
} }
}, },
"node_modules/vue-toasted": {
"version": "1.1.28",
"resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
"integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
},
"node_modules/vue/node_modules/@vue/shared": { "node_modules/vue/node_modules/@vue/shared": {
"version": "3.2.33", "version": "3.2.33",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
@ -12850,14 +12836,6 @@
} }
} }
}, },
"@nuxtjs/toast": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
"integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
"requires": {
"vue-toasted": "^1.1.28"
}
},
"@rollup/plugin-alias": { "@rollup/plugin-alias": {
"version": "3.1.9", "version": "3.1.9",
"resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz",
@ -20373,11 +20351,6 @@
"@vue/devtools-api": "^6.0.0" "@vue/devtools-api": "^6.0.0"
} }
}, },
"vue-toasted": {
"version": "1.1.28",
"resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
"integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
},
"vuetify": { "vuetify": {
"version": "3.0.0-beta.5", "version": "3.0.0-beta.5",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz", "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz",

1
packages/nc-gui-v2/package.json

@ -15,7 +15,6 @@
"sass-loader": "^10.3.0" "sass-loader": "^10.3.0"
}, },
"dependencies": { "dependencies": {
"@nuxtjs/toast": "^3.3.1",
"nocodb-sdk": "file:../nocodb-sdk", "nocodb-sdk": "file:../nocodb-sdk",
"nuxt3-store": "^1.0.0", "nuxt3-store": "^1.0.0",
"vuetify": "^3.0.0-alpha.13" "vuetify": "^3.0.0-alpha.13"

90
packages/nc-gui-v2/pages/projects/create-external.vue

@ -1,11 +1,26 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'
import { useNuxtApp, useRouter } from '#app'
import { useNuxtApp, useRouter } from "#app"; const clientTypes = [
import { ref } from "vue"; {
text: 'MySql',
const name = ref(''); value: 'mysql2',
const loading = ref(false); }, {
const valid = ref(false); text: 'MSSAL',
value: 'mssql',
}, {
text: 'PostgreSQL',
value: 'pg',
}, {
text: 'SQLite',
value: 'sqlite',
},
]
const name = ref('')
const loading = ref(false)
const valid = ref(false)
const projectDatasource = reactive({ const projectDatasource = reactive({
client: 'mysql2', client: 'mysql2',
connection: { connection: {
@ -14,45 +29,46 @@ const projectDatasource = reactive({
port: 3306, port: 3306,
host: 'localhost', host: 'localhost',
database: '', database: '',
} },
}); })
const inflection = reactive({
tableName: 'camelize',
columnName: 'camelize',
})
const { $api } = useNuxtApp(); const { $api } = useNuxtApp()
const $router = useRouter(); const $router = useRouter()
const { user } = useUser() const { user } = useUser()
const titleValidationRule = [ const titleValidationRule = [
v => !!v || "Title is required", v => !!v || 'Title is required',
v => v.length <= 50 || "Project name exceeds 50 characters" v => v.length <= 50 || 'Project name exceeds 50 characters',
]; ]
const createProject = async () => { const createProject = async () => {
loading.value = true; loading.value = true
try { try {
const result = await $api.project.create({ const result = await $api.project.create({
title: name.value, title: name.value,
bases: [ bases: [
{ {
type: projectDatasource.client, type: projectDatasource.client,
config: projectDatasource, config: projectDatasource,
// inflection_column: inflection.column_name, inflection_column: inflection.columnName,
// inflection_table: inflection.table_name inflection_table: inflection.tableName,
} },
], ],
external: true external: true,
}) })
await $router.push( `/dashboard/${result.id}`); await $router.push(`/dashboard/${result.id}`)
} catch (e) { }
catch (e) {
// todo: toast // todo: toast
// this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000) // this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
} }
loading.value = false; loading.value = false
}
};
</script> </script>
<template> <template>
@ -60,7 +76,6 @@ const createProject = async () => {
<div class="main justify-center d-flex mx-auto" style="min-height: 600px;overflow: auto"> <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-form ref="form" v-model="valid" @submit.prevent="createProject">
<v-card style="width:530px;margin-top: 100px" class="mx-auto"> <v-card style="width:530px;margin-top: 100px" class="mx-auto">
<!-- Create Project --> <!-- Create Project -->
<v-container class="pb-10 px-12" style="padding-top: 43px !important;"> <v-container class="pb-10 px-12" style="padding-top: 43px !important;">
<h1 class="mt-4 mb-4 text-center"> <h1 class="mt-4 mb-4 text-center">
@ -78,15 +93,14 @@ const createProject = async () => {
<!-- :rules="titleValidationRule" --> <!-- :rules="titleValidationRule" -->
</div> </div>
<v-container fluid> <v-container fluid>
<v-row> <v-row>
<v-col cols="6"> <v-col cols="6">
<v-select <v-select
v-model="projectDatasource.client"
:items="clientTypes" :items="clientTypes"
item-title="text" item-title="text"
item-value="value" item-value="value"
v-model="projectDatasource.client"
class="nc-metadb-project-name" class="nc-metadb-project-name"
label="Database client" label="Database client"
/> />
@ -128,12 +142,28 @@ const createProject = async () => {
label="Database name" label="Database name"
/> />
</v-col> </v-col>
<v-col cols="6">
<v-text-field
v-model="inflection.tableName"
class="nc-metadb-project-name"
type="password"
label="Password"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="inflection.columnName"
class="nc-metadb-project-name"
label="Database name"
/>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
<div class="text-center"> <div class="text-center">
<v-btn <v-btn
class="mt-3" class="mt-3 mx-auto"
large large
:loading="loading" :loading="loading"
color="primary" color="primary"

11
packages/nc-gui-v2/pages/projects/index.vue

@ -21,6 +21,13 @@ const navigateToDashboard = async (project) => {
await $router.push(`/dashboard/${project.id}`) await $router.push(`/dashboard/${project.id}`)
} }
const navigateToCreateProject = () => {
$router.push('/projects/create')
}
const navigateToCreateExtProject = () => {
$router.push('/projects/create-external')
}
onMounted(async () => { onMounted(async () => {
await loadProjects() await loadProjects()
}) })
@ -33,10 +40,10 @@ onMounted(async () => {
<v-container> <v-container>
<div class="pa-2 d-flex mb-10"> <div class="pa-2 d-flex mb-10">
<v-spacer /> <v-spacer />
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="createProject"> <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateToCreateProject">
Create Project Create Project
</v-btn> </v-btn>
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="createExtProject"> <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateToCreateExtProject">
Create External Project Create External Project
</v-btn> </v-btn>
</div><v-row> </div><v-row>

Loading…
Cancel
Save