feat: create base front end

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -44,6 +44,8 @@ const useForm = Form.useForm
 
 const testSuccess = ref(false)
 
+const testingConnection = ref(false)
+
 const form = ref<typeof Form>()
 
 const { api } = useApi()
@@ -52,6 +54,8 @@ const { $e } = useNuxtApp()
 
 const { t } = useI18n()
 
+const creatingBase = ref(false)
+
 const formState = ref<ProjectCreateForm>({
   title: '',
   dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
@@ -225,26 +229,27 @@ function getConnectionConfig() {
 const focusInvalidInput = () => {
   form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
 }
-const isConnSuccess = ref(false)
+
+const { $jobs } = useNuxtApp()
 
 const createBase = async () => {
   try {
     await validate()
-    isConnSuccess.value = false
   } catch (e) {
     focusInvalidInput()
-    isConnSuccess.value = false
     return
   }
 
   try {
     if (!projectId.value) return
 
+    creatingBase.value = true
+
     const connection = getConnectionConfig()
 
     const config = { ...formState.value.dataSource, connection }
 
-    await api.base.create(projectId.value, {
+    const jobData = await api.base.create(projectId.value, {
       alias: formState.value.title,
       type: formState.value.dataSource.client,
       config,
@@ -252,12 +257,23 @@ const createBase = async () => {
       inflection_table: formState.value.inflection.inflectionTable,
     })
 
+    $jobs.subscribe({ id: jobData.id }, undefined, async (status: string) => {
+      if (status === JobStatus.COMPLETED) {
         $e('a:base:create:extdb')
 
+        if (projectId.value) {
           await loadProject(projectId.value, true)
           await loadProjectTables(projectId.value, true)
+        }
+
         emit('baseCreated')
         emit('close')
+      } else if (status === JobStatus.FAILED) {
+        message.error('Failed to create base')
+      }
+
+      creatingBase.value = false
+    })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -274,6 +290,8 @@ const testConnection = async () => {
   $e('a:base:create:extdb:test-connection', [])
 
   try {
+    testingConnection.value = true
+
     if (formState.value.dataSource.client === ClientType.SQLITE) {
       testSuccess.value = true
     } else {
@@ -290,7 +308,6 @@ const testConnection = async () => {
 
       if (result.code === 0) {
         testSuccess.value = true
-        isConnSuccess.value = true
       } else {
         testSuccess.value = false
 
@@ -302,6 +319,8 @@ const testConnection = async () => {
 
     message.error(await extractSdkResponseErrorMsg(e))
   }
+
+  testingConnection.value = false
 }
 
 const handleImportURL = async () => {
@@ -367,15 +386,6 @@ watch(
 </script>
 
 <template>
-  <GeneralModal v-model:visible="isConnSuccess" class="!w-[25rem]">
-    <div class="flex flex-col h-full p-8">
-      <div class="text-lg font-semibold self-start mb-4">{{ t('msg.info.dbConnected') }}</div>
-      <div class="flex gap-x-2 mt-5 ml-7 pt-2.5 justify-end">
-        <NcButton key="back" type="secondary" @click="isConnSuccess = false">{{ $t('general.cancel') }}</NcButton>
-        <NcButton key="submit" type="primary" @click="createBase"> {{ $t('activity.addBase') }}</NcButton>
-      </div>
-    </div>
-  </GeneralModal>
   <div class="create-base bg-white relative flex flex-col justify-center gap-2 w-full">
     <h1 class="prose-2xl font-bold self-start mb-4 flex items-center gap-2">
       {{ $t('title.newBase') }}
@@ -470,7 +480,7 @@ watch(
           </a-form-item>
           <div class="flex items-right justify-end gap-2">
             <!--                Use Connection URL -->
-            <NcButton size="small" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
+            <NcButton type="ghost" size="small" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
               {{ $t('activity.useConnectionUrl') }}
             </NcButton>
           </div>
@@ -563,7 +573,7 @@ watch(
                   v-model:value="formState.inflection.inflectionTable"
                   dropdown-class-name="nc-dropdown-inflection-table-name"
                 >
-                  <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }} </a-select-option>
+                  <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }} </a-select-option>
                 </a-select>
               </a-form-item>
 
@@ -572,7 +582,7 @@ watch(
                   v-model:value="formState.inflection.inflectionColumn"
                   dropdown-class-name="nc-dropdown-inflection-column-name"
                 >
-                  <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }} </a-select-option>
+                  <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }} </a-select-option>
                 </a-select>
               </a-form-item>
 
@@ -589,7 +599,14 @@ watch(
 
       <a-form-item class="flex justify-end !mt-5">
         <div class="flex justify-end gap-2">
-          <NcButton type="primary" size="small" class="nc-extdb-btn-test-connection !rounded-md" @click="testConnection">
+          <NcButton
+            type="primary"
+            size="small"
+            class="nc-extdb-btn-test-connection !rounded-md"
+            :loading="testingConnection"
+            @click="testConnection"
+          >
+            <GeneralIcon v-if="testSuccess" icon="circleCheck" class="mr-2" />
             {{ $t('activity.testDbConn') }}
           </NcButton>
 
@@ -597,6 +614,7 @@ watch(
             size="small"
             type="primary"
             :disabled="!testSuccess"
+            :loading="creatingBase"
             class="nc-extdb-btn-submit !rounded-md"
             @click="createBase"
           >
@@ -628,17 +646,6 @@ watch(
     >
       <a-input v-model:value="importURL" />
     </a-modal>
-
-    <!-- connection succesfull modal -->
-    <GeneralModal v-model:visible="isConnSuccess" class="!w-[25rem]">
-      <div class="flex flex-col h-full p-8">
-        <div class="text-lg font-semibold self-start mb-4">{{ t('msg.info.dbConnected') }}</div>
-        <div class="flex gap-x-2 mt-5 ml-7 pt-2.5 justify-end">
-          <NcButton key="back" type="secondary" @click="isConnSuccess = false">{{ $t('general.cancel') }}</NcButton>
-          <NcButton key="submit" type="primary" @click="createBase">{{ $t('activity.addBase') }}</NcButton>
-        </div>
-      </div>
-    </GeneralModal>
   </div>
 </template>
 

packages/nc-gui/utils/iconUtils.ts

@@ -1,6 +1,7 @@
 import MdiCheckBold from '~icons/mdi/check-bold'
 import MdiCropSquare from '~icons/mdi/crop-square'
 import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
+import MdiCheckboxMarkedCircle from '~icons/mdi/checkbox-marked-circle'
 import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
 import MdiStar from '~icons/mdi/star'
 import MdiStarOutline from '~icons/mdi/star-outline'
@@ -366,6 +367,7 @@ export const iconMap = {
   expand: h('span', { class: 'material-symbols' }, 'open_in_full'),
   shrink: h('span', { class: 'material-symbols' }, 'close_fullscreen'),
   check: NcCheck,
+  circleCheck: MdiCheckboxMarkedCircle,
   acl: h('span', { class: 'material-symbols' }, 'shield'),
   sync: MsSync,
   warning: MaterialSymbolsWarningOutlineRounded,