feat(gui-v2): add spinning to template editor & clean up

packages/nc-gui-v2/components/template/Editor.vue

@@ -27,38 +27,6 @@ interface Option {
 const useForm = Form.useForm
 const { quickImportType, projectTemplate, importData } = defineProps<Props>()
 const { $api } = useNuxtApp()
-const hasSelectColumn = ref(<boolean[]>{})
-const expansionPanel = ref(<number[]>[])
-const editableTn = ref(<boolean[]>{})
-const inputRefs = ref(<HTMLInputElement[]>[])
-const { addTab } = useTabs()
-const { sqlUi, project, loadTables } = useProject()
-const loading = ref(false)
-const toast = useToast()
-const buttonSize = ref<SizeType>('large')
-const templateForm = reactive<{ tables: object[] }>({
-  tables: [],
-})
-
-const uiTypeOptions = ref<Option[]>(
-  (Object.keys(UITypes) as Array<keyof typeof UITypes>)
-    .filter(
-      (uiType: any) =>
-        !isVirtualCol(uiType) &&
-        ![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
-          uiType,
-        ),
-    )
-    .map((uiType: string) => ({
-      value: uiType,
-      label: uiType,
-    })),
-)
-
-const filterOption = (input: string, option: Option) => {
-  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
-}
-
 const tableColumns = [
   {
     name: 'Column Name',
@@ -82,19 +50,48 @@ const tableColumns = [
     align: 'right',
   },
 ]
-
+const templateForm = reactive<{ tables: object[] }>({
+  tables: [],
+})
+const buttonSize = ref<SizeType>('large')
+const hasSelectColumn = ref(<boolean[]>{})
+const expansionPanel = ref(<number[]>[])
+const editableTn = ref(<boolean[]>{})
+const inputRefs = ref(<HTMLInputElement[]>[])
+const isImporting = ref(false)
+const importingTip = ref('Importing')
+const uiTypeOptions = ref<Option[]>(
+  (Object.keys(UITypes) as Array<keyof typeof UITypes>)
+    .filter(
+      (uiType: any) =>
+        !isVirtualCol(uiType) &&
+        ![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
+          uiType,
+        ),
+    )
+    .map((uiType: string) => ({
+      value: uiType,
+      label: uiType,
+    })),
+)
 const data = reactive(<any>{
   name: 'Project Name',
   tables: [],
 })
 
+const toast = useToast()
+const { addTab } = useTabs()
+const { sqlUi, project, loadTables } = useProject()
+
+onMounted(() => {
+  parseAndLoadTemplate()
+})
+
 const validators = computed(() => {
   // TODO: centralise
   const tnValidator = [{ required: true, message: 'Please fill in table name', trigger: 'change' }]
   const cnValidator = [{ required: true, message: 'Please fill in column name', trigger: 'change' }]
   const uidtValidator = [{ required: true, message: 'Please fill in column type', trigger: 'change' }]
-  // TODO: check existing validation logic
-  const dtxpValidator = [{}]
   let res: any = {}
   for (let tableIdx = 0; tableIdx < data.tables.length; tableIdx++) {
     res[`tables.${tableIdx}.table_name`] = tnValidator
@@ -104,22 +101,21 @@ const validators = computed(() => {
       res[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = uidtValidator
       if (isSelect(data.tables[tableIdx].columns[columnIdx])) {
         hasSelectColumn.value[tableIdx] = true
-        res[`tables.${tableIdx}.columns.${columnIdx}.dtxp`] = dtxpValidator
       }
     }
   }
   return res
 })
 
-const { resetFields, validate, validateInfos } = useForm(data, validators)
-
 const editorTitle = computed(() => {
   return `${quickImportType.toUpperCase()} Import: ${data.title}`
 })
 
-onMounted(() => {
-  parseAndLoadTemplate()
-})
+const { resetFields, validate, validateInfos } = useForm(data, validators)
+
+const filterOption = (input: string, option: Option) => {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
+}
 
 const parseAndLoadTemplate = () => {
   if (projectTemplate) {
@@ -198,12 +194,12 @@ const importTemplate = async () => {
     await validate()
   } catch (errorInfo) {
     toast.error('Please fill all the required values')
-    loading.value = false
+    isImporting.value = false
     return
   }
 
   try {
-    loading.value = true
+    isImporting.value = true
     // tab info to be used to show the tab after successful import
     const tab = {
       id: '',
@@ -263,6 +259,7 @@ const importTemplate = async () => {
             if (data) {
               total += data.length
               for (let i = 0; i < data.length; i += offset) {
+                importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
                 const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns)
                 await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.table_title, batchData)
                 progress += batchData.length
@@ -282,15 +279,16 @@ const importTemplate = async () => {
     toast.error(await extractSdkResponseErrorMsg(e))
   } finally {
     // TODO: close dialog when the integration is ready
-    loading.value = false
+    isImporting.value = false
   }
 }
 </script>
 
 <template>
+  <a-spin :spinning="isImporting" :tip="importingTip" size="large">
     <a-card :title="editorTitle">
       <template #extra>
-      <a-button type="primary" :loading="loading" @click="importTemplate" :size="buttonSize">
+        <a-button type="primary" @click="importTemplate" :size="buttonSize">
           {{ $t('activity.import') }}
         </a-button>
       </template>
@@ -299,7 +297,12 @@ const importTemplate = async () => {
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import
         </p>
-      <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion>
+        <a-collapse
+          v-if="data.tables && data.tables.length"
+          v-model:activeKey="expansionPanel"
+          class="template-collapse"
+          accordion
+        >
           <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
             <template #header>
               <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" noStyle>
@@ -335,7 +338,6 @@ const importTemplate = async () => {
             <a-table
               v-if="table.columns.length"
               class="template-form"
-            size="middle"
               row-class-name="template-form-row"
               :data-source="table.columns"
               :columns="tableColumns"
@@ -384,10 +386,7 @@ const importTemplate = async () => {
                 </template>
 
                 <template v-else-if="column.key === 'dtxp'">
-                <a-form-item
-                  v-if="isSelect(record)"
-                  v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]"
-                >
+                  <a-form-item v-if="isSelect(record)">
                     <a-input v-model:value="record.dtxp" />
                   </a-form-item>
                 </template>
@@ -472,12 +471,14 @@ const importTemplate = async () => {
         </a-collapse>
       </a-form>
     </a-card>
+  </a-spin>
 </template>
 
 <style scoped lang="scss">
 .template-collapse {
   background-color: #ffffff;
 }
+
 .template-form {
   :deep(.ant-table-thead) > tr > th {
     background: #ffffff;