feat(gui-v2): add all inputs and buttons in project create page

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

packages/nc-gui-v2/components.d.ts

@@ -11,6 +11,8 @@ declare module '@vue/runtime-core' {
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
+    ACollapse: typeof import('ant-design-vue/es')['Collapse']
+    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
@@ -31,6 +33,7 @@ declare module '@vue/runtime-core' {
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

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

@@ -12,6 +12,7 @@ import {
   getDefaultConnectionConfig,
   getTestDatabaseName,
   projectTitleValidator,
+  sslUsage,
 } from '~/utils/projectCreateUtils'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
@@ -68,6 +69,10 @@ const testConnection = async () => {
           ...projectDatasource.value.connection,
           database: getTestDatabaseName(projectDatasource.value),
         },
+        inflection: {
+          tableName: 'camelize',
+          columnName: 'camelize',
+        },
       }
 
       const result = await $api.utils.testConnection(testConnectionConfig)
@@ -108,6 +113,8 @@ const onClientChange = () => {
   formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
 }
 
+const inflectionTypes = ['camelize', 'none']
+
 // populate database name based on title
 // watch(()=>formStat)
 </script>
@@ -161,79 +168,6 @@ const onClientChange = () => {
       <!--        </a-col> -->
       <!--      </a-row> -->
       <!--
-    <a-form-item label="InputNumber">
-      <a-form-item name="input-number" no-style>
-        <a-input-number v-model:value="formState['input-number']" />
-      </a-form-item>
-      <span class="ant-form-text">machines</span>
-    </a-form-item>
-
-    <a-form-item name="switch" label="Switch">
-      <a-switch v-model:checked="formState.switch" />
-    </a-form-item>
-
-    <a-form-item name="slider" label="Slider">
-      <a-slider
-        v-model:value="formState.slider"
-        :marks="{
-          0: 'A',
-          20: 'B',
-          40: 'C',
-          60: 'D',
-          80: 'E',
-          100: 'F',
-        }"
-      />
-    </a-form-item>
-
-    <a-form-item name="radio-group" label="Radio.Group">
-      <a-radio-group v-model:value="formState['radio-group']">
-        <a-radio value="a">item 1</a-radio>
-        <a-radio value="b">item 2</a-radio>
-        <a-radio value="c">item 3</a-radio>
-      </a-radio-group>
-    </a-form-item>
-
-    <a-form-item
-      name="radio-button"
-      label="Radio.Button"
-      :rules="[{ required: true, message: 'Please pick an item!' }]"
-    >
-      <a-radio-group v-model:value="formState['radio-button']">
-        <a-radio-button value="a">item 1</a-radio-button>
-        <a-radio-button value="b">item 2</a-radio-button>
-        <a-radio-button value="c">item 3</a-radio-button>
-      </a-radio-group>
-    </a-form-item>
-
-    <a-form-item name="checkbox-group" label="Checkbox.Group">
-      <a-checkbox-group v-model:value="formState['checkbox-group']">
-        <a-row>
-          <a-col :span="8">
-            <a-checkbox value="A" style="line-height: 32px">A</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="C" style="line-height: 32px">C</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="D" style="line-height: 32px">D</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="E" style="line-height: 32px">E</a-checkbox>
-          </a-col>
-          <a-col :span="8">
-            <a-checkbox value="F" style="line-height: 32px">F</a-checkbox>
-          </a-col>
-        </a-row>
-      </a-checkbox-group>
-    </a-form-item>
-
-    <a-form-item name="rate" label="Rate">
-      <a-rate v-model:value="formState.rate" allow-half />
-    </a-form-item>
 
     <a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
       <a-upload
@@ -248,99 +182,91 @@ const onClientChange = () => {
         </a-button>
       </a-upload>
     </a-form-item>
+ -->
 
-    <a-form-item label="Dragger">
+      <a-collapse ghost>
-      <a-form-item name="dragger" no-style>
+        <a-collapse-panel key="1" header="Advance options">
-        <a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
+          <a-form-item :label="$t('lables.ssl')" v-bind="validateInfos['dataSource.ssl']">
-          <p class="ant-upload-drag-icon">
+            <a-select v-model:value="formState.dataSource.ssl" size="small" @change="onClientChange">
-            <InboxOutlined />
+              <a-select-option v-for="opt in Object.keys(sslUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
-          </p>
+            </a-select>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
-          <p class="ant-upload-hint">Support for a single or bulk upload.</p>
-        </a-upload-dragger>
-      </a-form-item>
-    </a-form-item> -->
-
-      <a-form-item class="text-center">
-        <a-button type="primary" html-type="submit">Submit</a-button>
           </a-form-item>
-    </a-form>
-  </a-card>
-
-  <!--  <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
-      <v-container fluid class="flex justify-center items-center h-5/6">
-        <v-card max-width="600">
-          &lt;!&ndash; Create Project &ndash;&gt;
-          <v-container class="pb-10 px-12">
-            <h1 class="my-4 prose-lg text-center">
-              {{ $t('activity.createProject') }}
-            </h1>
 
-            <v-row>
+          <a-form-item :label="$t('labels.dbCredentials')">
-              <v-col offset="2" cols="8">
+            <!--            <a-input v-model:value="formState.dataSource.connection.database" size="small" /> -->
-                <v-text-field
-                  v-model="name"
-                  :rules="titleValidationRule"
-                  class="nc-metadb-project-name"
-                  :label="$t('labels.projName')"
-                />
-              </v-col>
 
-              <v-col cols="6">
+            <div class="flex gap-2">
-                <v-select
+              <a-tooltip placement="top">
-                  v-model="projectDatasource.client"
+                <template #title>
-                  density="compact"
+                  <span>{{ $t('tooltip.clientCert') }}</span>
-                  :items="clientTypes"
+                </template>
-                  item-title="text"
+                <a-button size="small">
-                  item-value="value"
+                  {{ $t('labels.clientCert') }}
-                  class="nc-metadb-project-name"
+                </a-button>
-                  label="Database client"
+              </a-tooltip>
-                />
+              <a-tooltip placement="top">
-              </v-col>
+                <template #title>
-              <v-col cols="6">
+                  <span>{{ $t('tooltip.clientKey') }}</span>
-                <v-text-field v-model="projectDatasource.connection.host" density="compact" :label="$t('labels.hostAddress')" />
+                </template>
-              </v-col>
+                <a-button size="small">
-              <v-col cols="6">
+                  {{ $t('labels.clientKey') }}
-                <v-text-field
+                </a-button>
-                  v-model="projectDatasource.connection.port"
+              </a-tooltip>
-                  density="compact"
+              <a-tooltip placement="top">
-                  :label="$t('labels.port')"
+                <template #title>
-                  type="number"
+                  <span>{{ $t('tooltip.clientCA') }}</span>
-                />
+                </template>
-              </v-col>
+                <a-button size="small">
-              <v-col cols="6">
+                  {{ $t('labels.serverCA') }}
-                <v-text-field v-model="projectDatasource.connection.user" density="compact" :label="$t('labels.username')" />
+                </a-button>
-              </v-col>
+              </a-tooltip>
-              <v-col cols="6">
+            </div>
-                <v-text-field
+          </a-form-item>
-                  v-model="projectDatasource.connection.password"
-                  density="compact"
-                  type="password"
-                  :label="$t('labels.password')"
-                />
-              </v-col>
-              <v-col cols="6">
-                <v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" />
-              </v-col>
-            </v-row>
 
-            <div class="d-flex justify-center" style="gap: 4px">
+          <!-- <v-row> -->
-              <v-btn :disabled="!testSuccess" large :loading="loading" color="primary" @click="createProject">
+          <!--  <v-col> -->
-                <MaterialSymbolsRocketLaunchOutline class="mr-1" />
+          <a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
-                <span> {{ $t('general.create') }} </span>
+            <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
-              </v-btn>
+              <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+                >{{ client.text }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!--  </v-col> -->
+          <!--  <v-col> -->
+          <a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.client']">
+            <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
+              <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+                >{{ client.text }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!--  </v-col> -->
+          <!-- </v-row> -->
+          <div class="flex justify-end">
+            <a-button size="small">
+              <!-- Edit connection JSON -->
+              {{ $t('activity.editConnJson') }}
+            </a-button>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
 
-              &lt;!&ndash;              <v-btn small class="px-2"> &ndash;&gt;
+      <a-form-item class="flex justify-center">
-              &lt;!&ndash;     todo:implement test connection &ndash;&gt;
+        <div class="flex justify-center gap-2">
-              &lt;!&ndash;         <v-btn size="sm" class="text-sm text-capitalize">
+          <a-button type="primary" html-type="submit">Submit</a-button>
-                    &lt;!&ndash; Test Database Connection &ndash;&gt;
+          <a-button type="primary" html-type="submit">Test Connection</a-button>
-                    {{ $t('activity.testDbConn') }}
-                  </v-btn> &ndash;&gt;
         </div>
-          </v-container>
+      </a-form-item>
-        </v-card>
+    </a-form>
-      </v-container>
+  </a-card>
-    </v-form> -->
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.ant-collapse-header) {
+  @apply !px-0;
+}
+:deep(.ant-collapse-content-box) {
+  @apply !pr-0;
+}
+</style>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onMounted } from '@vue/runtime-core'
 import { ref } from 'vue'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -36,6 +37,12 @@ const createProject = async () => {
   }
   loading.value = false
 }
+
+const input = ref()
+
+onMounted(() => {
+  input.value.input.focus()
+})
 </script>
 
 <template>
@@ -44,7 +51,7 @@ const createProject = async () => {
 
     <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
-        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
+        <a-input ref="input" v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
       <a-form-item style="text-align: center" class="mt-2">

packages/nc-gui-v2/utils/projectCreateUtils.ts

@@ -184,3 +184,11 @@ export const fieldRequiredValidator = {
   required: true,
   message: 'Field is required',
 }
+
+export const sslUsage = {
+  'No': 'No',
+  'Preferred': 'Preferred',
+  'Required': 'pg',
+  'Required-CA': 'Required-CA',
+  'Required-IDENTITY': 'Required-IDENTITY',
+}