refactor: tab view and project create

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/dashboard/TabView.vue

@@ -6,21 +6,24 @@ const { tabs, activeTab } = useTabs()
 
 <template>
   <div>
-    <v-tabs v-model="activeTab" density="compact">
+
-      <v-tab v-for="(tab, i) of tabs" :key="i" :value="i">
+
-        {{ tab.title }}
+    <v-tabs density="compact" v-model="activeTab">
-      </v-tab>
+
+      <v-tab v-for="(tab,i) in tabs" :key="i" :value="i" >{{tab.title}} </v-tab>
+
     </v-tabs>
 
     <v-window v-model="activeTab">
       <v-window-item
-        v-for="(tab, i) of tabs"
+        v-for="(tab,i) in tabs"
         :key="i"
         :value="i"
       >
         <TabsSmartsheet :tab-meta="tab" />
       </v-window-item>
     </v-window>
+
   </div>
 </template>
 

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

@@ -55,7 +55,7 @@ const createProject = async () => {
             </div>
             <div class="text-center">
               <v-btn
-                class="mt-3"
+                class="mt-3 mx-auto"
                 large
                 :loading="loading"
                 color="primary"

packages/nc-gui-v2/pages/projects/createExternal.vue

@@ -1,34 +1,37 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useNuxtApp, useRouter } from '#app'
 
-const name = ref('')
+import { useNuxtApp, useRouter } from "#app";
-const loading = ref(false)
+import { ref } from "vue";
-const valid = ref(false)
+
+const name = ref('');
+const loading = ref(false);
+const valid = ref(false);
 const projectDatasource = reactive({
-  client: 'mysql2',
+  client:'mysql2',
-  connection: {
+  connection:{
     user: 'root',
     password: 'password',
     port: 3306,
     host: 'localhost',
     database: '',
-  },
+  }
-})
+});
+
+const { $api } = useNuxtApp();
+const $router = useRouter();
+const {user} = useUser()
 
-const { $api } = useNuxtApp()
-const $router = useRouter()
-const { user } = useUser()
 
 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 () => {
-  loading.value = true
+  loading.value = true;
   try {
-    const result = await $api.project.create({
+
+    const result= await $api.project.create({
       title: name.value,
       bases: [
         {
@@ -36,19 +39,20 @@ const createProject = async () => {
           config: projectDatasource,
           // inflection_column: inflection.column_name,
           // inflection_table: inflection.table_name
-        },
+        }
       ],
-      external: true,
+      external: true
     })
 
-    await $router.push(`/dashboard/${result.id}`)
+    await $router.push( `/dashboard/${result.id}`);
-  }
+  } catch (e) {
-  catch (e) {
     // todo: toast
     // this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
   }
-  loading.value = false
+  loading.value = false;
-}
+
+};
+
 </script>
 
 <template>
@@ -56,10 +60,11 @@ const createProject = async () => {
     <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') }} -->
+              <!--            {{ $t('activity.createProject') }}-->
               Create Project
             </h1>
             <div class="mx-auto" style="width:350px">
@@ -70,13 +75,17 @@ const createProject = async () => {
                 class="nc-metadb-project-name"
                 label="Project name"
               />
-              <!--                :rules="titleValidationRule" -->
+              <!--                :rules="titleValidationRule"-->
             </div>
 
+
             <v-container fluid>
               <v-row>
                 <v-col cols="6">
-                  <v-text-field
+                  <v-select
+                    :items="clientTypes"
+                    item-title="text"
+                    item-value="value"
                     v-model="projectDatasource.client"
                     class="nc-metadb-project-name"
                     label="Database client"
@@ -134,7 +143,7 @@ const createProject = async () => {
                   mdi-rocket-launch-outline
                 </v-icon>
                 <!-- Create -->
-                <!--                <span class="mr-1">{{ // $t("general.create") }}</span> -->
+                <!--                <span class="mr-1">{{ // $t("general.create") }}</span>-->
                 <span class="mr-1"> Create project </span>
               </v-btn>
             </div>