From 430a50ed710224b0afbda464954dd983a502f950 Mon Sep 17 00:00:00 2001
From: Wonkeun No <zakk23v@hotmail.com>
Date: Fri, 14 Oct 2022 14:32:44 -0400
Subject: [PATCH 001/117] Add an argument to ROUND func to show decimal numbers

---
 packages/nc-gui/utils/formulaUtils.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/utils/formulaUtils.ts b/packages/nc-gui/utils/formulaUtils.ts
index 63b89a94e2..9b084ce6b0 100644
--- a/packages/nc-gui/utils/formulaUtils.ts
+++ b/packages/nc-gui/utils/formulaUtils.ts
@@ -176,12 +176,12 @@ const formulas: Record<string, any> = {
     type: formulaTypes.NUMERIC,
     validation: {
       args: {
-        rqd: 1,
+        rqd: 2,
       },
     },
-    description: 'Nearest integer to the input parameter',
-    syntax: 'ROUND(value)',
-    examples: ['ROUND(3.1415) => 3', 'ROUND({column1})'],
+    description: 'Rounded number to a specified number of decimal places',
+    syntax: 'ROUND(value, decimals)',
+    examples: ['ROUND(3.1415,2) => 3.14', 'ROUND({column1}, 3)'],
   },
   MOD: {
     type: formulaTypes.NUMERIC,

From 3c6c34adc07701a00928df023138e31ff2141ea2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Oct 2022 11:41:35 +0800
Subject: [PATCH 002/117] refactor(nc-gui): pass tableIdx instead of passing
 table to addNewColumnRow

---
 .../nc-gui/components/template/Editor.vue     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 023216ec71..f6c403fb49 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -97,7 +97,7 @@ const srcDestMapping = ref<Record<string, any>[]>([])
 const data = reactive<{
   title: string | null
   name: string
-  tables: (TableType & { ref_table_name: string; columns: (ColumnType & { _disableSelect?: boolean })[] })[]
+  tables: (TableType & { ref_table_name: string; columns: (ColumnType & { key: number; _disableSelect?: boolean })[] })[]
 }>({
   title: null,
   name: 'Project Name',
@@ -206,15 +206,15 @@ function deleteTableColumn(tableIdx: number, columnIdx: number) {
   data.tables[tableIdx].columns?.splice(columnIdx, 1)
 }
 
-function addNewColumnRow(table: Record<string, any>, uidt?: string) {
-  table.columns.push({
-    key: table.columns.length,
-    column_name: `title${table.columns.length + 1}`,
+function addNewColumnRow(tableIdx: number, uidt: string) {
+  data.tables[tableIdx].columns.push({
+    key: data.tables[tableIdx].columns.length + 1,
+    column_name: `title${data.tables[tableIdx].columns.length + 1}`,
     uidt,
   })
 
   nextTick(() => {
-    const input = inputRefs.value[table.columns.length - 1]
+    const input = inputRefs.value[data.tables[tableIdx].columns.length - 1]
 
     input.focus()
     input.select()
@@ -794,7 +794,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   <span>Add Number Column</span>
                 </template>
 
-                <a-button class="group" @click="addNewColumnRow(table, 'Number')">
+                <a-button class="group" @click="addNewColumnRow(tableIdx, 'Number')">
                   <div class="flex items-center">
                     <mdi-numeric class="group-hover:!text-accent flex text-lg" />
                   </div>
@@ -807,7 +807,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   <span>Add SingleLineText Column</span>
                 </template>
 
-                <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
+                <a-button class="group" @click="addNewColumnRow(tableIdx, 'SingleLineText')">
                   <div class="flex items-center">
                     <mdi-alpha-a class="group-hover:!text-accent text-lg" />
                   </div>
@@ -820,7 +820,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   <span>Add LongText Column</span>
                 </template>
 
-                <a-button class="group" @click="addNewColumnRow(table, 'LongText')">
+                <a-button class="group" @click="addNewColumnRow(tableIdx, 'LongText')">
                   <div class="flex items-center">
                     <mdi-text class="group-hover:!text-accent text-lg" />
                   </div>
@@ -833,7 +833,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   <span>Add Other Column</span>
                 </template>
 
-                <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
+                <a-button class="group" @click="addNewColumnRow(tableIdx, 'SingleLineText')">
                   <div class="flex items-center gap-1">
                     <mdi-plus class="group-hover:!text-accent text-lg" />
                   </div>

From 0e2fcd5f3a0487731e2ba8952d38c6db32d1fca0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Oct 2022 11:51:31 +0800
Subject: [PATCH 003/117] fix(nc-gui): incorrect focus when adding a new column
 during import

useTemplateRefsList will not reset the existing refs. It appends new refs everytime a new column is added.
---
 packages/nc-gui/components/template/Editor.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index f6c403fb49..dbf6dabfed 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -25,7 +25,6 @@ import {
   useNuxtApp,
   useProject,
   useTabs,
-  useTemplateRefsList,
 } from '#imports'
 import { TabType } from '~/lib'
 
@@ -71,7 +70,7 @@ const expansionPanel = ref<number[]>([])
 
 const editableTn = ref<boolean[]>([])
 
-const inputRefs = useTemplateRefsList<HTMLInputElement>()
+const inputRefs = ref<HTMLInputElement[]>([])
 
 const isImporting = ref(false)
 
@@ -208,14 +207,13 @@ function deleteTableColumn(tableIdx: number, columnIdx: number) {
 
 function addNewColumnRow(tableIdx: number, uidt: string) {
   data.tables[tableIdx].columns.push({
-    key: data.tables[tableIdx].columns.length + 1,
+    key: data.tables[tableIdx].columns.length,
     column_name: `title${data.tables[tableIdx].columns.length + 1}`,
     uidt,
   })
 
   nextTick(() => {
     const input = inputRefs.value[data.tables[tableIdx].columns.length - 1]
-
     input.focus()
     input.select()
   })
@@ -723,7 +721,14 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input :ref="inputRefs.set" v-model:value="record.column_name" />
+                    <a-input
+                      :ref="
+                        (el) => {
+                          inputRefs[record.key] = el
+                        }
+                      "
+                      v-model:value="record.column_name"
+                    />
                   </a-form-item>
                 </template>
 

From 15024005d075ffcf078a689d788cb2464d70e35e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Oct 2022 16:03:27 +0800
Subject: [PATCH 004/117] refactor(nc-gui): use parserhelpers functions for
 import

---
 .../utils/parsers/ExcelTemplateAdapter.ts     | 73 +++++--------------
 .../utils/parsers/JSONTemplateAdapter.ts      | 41 +----------
 .../nc-gui/utils/parsers/parserHelpers.ts     | 70 ++++++++++++++++--
 3 files changed, 83 insertions(+), 101 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 32e361b6b5..93d252867a 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -1,6 +1,13 @@
 import { UITypes } from 'nocodb-sdk'
 import TemplateGenerator from './TemplateGenerator'
-import { getCheckboxValue, isCheckboxType } from './parserHelpers'
+import {
+  extractMultiOrSingleSelectProps,
+  getCheckboxValue,
+  isCheckboxType,
+  isEmailType,
+  isMultiLineTextType,
+  isUrlType,
+} from './parserHelpers'
 import { getDateFormat } from '~/utils'
 
 const excelTypeToUidt: Record<string, UITypes> = {
@@ -73,9 +80,6 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
   parse() {
     const tableNamePrefixRef: Record<string, any> = {}
 
-    // TODO: find the upper bound / make it configurable
-    const maxSelectOptionsAllowed = 64
-
     for (let i = 0; i < this.wb.SheetNames.length; i++) {
       const columnNamePrefixRef: Record<string, any> = { id: 0 }
       const sheet: any = this.wb.SheetNames[i]
@@ -133,7 +137,6 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
           meta: {},
         }
 
-        // const cellId = `${col.toString(26).split('').map(s => (parseInt(s, 26) + 10).toString(36).toUpperCase())}2`;
         const cellId = this.xlsx.utils.encode_cell({
           c: range.s.c + col,
           r: columnNameRowExist,
@@ -141,11 +144,18 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
         const cellProps = ws[cellId] || {}
         column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
 
-        // todo: optimize
         if (column.uidt === UITypes.SingleLineText) {
           // check for long text
-          if (rows.some((r: any) => (r[col] || '').toString().match(/[\r\n]/) || (r[col] || '').toString().length > 255)) {
+          if (isMultiLineTextType(rows)) {
             column.uidt = UITypes.LongText
+          }
+
+          if (isEmailType(rows)) {
+            column.uidt = UITypes.Email
+          }
+
+          if (isUrlType(rows)) {
+            column.uidt = UITypes.URL
           } else {
             const vals = rows
               .slice(columnNameRowExist ? 1 : 0)
@@ -156,53 +166,8 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             if (checkboxType.length === 1) {
               column.uidt = UITypes.Checkbox
             } else {
-              if (vals.some((v: any) => v && v.toString().includes(','))) {
-                const flattenedVals = vals.flatMap((v: any) =>
-                  v
-                    ? v
-                        .toString()
-                        .trim()
-                        .split(/\s*,\s*/)
-                    : [],
-                )
-
-                // TODO: handle case sensitive case
-                const uniqueVals = [...new Set(flattenedVals.map((v: any) => v.toString().trim().toLowerCase()))]
-
-                if (uniqueVals.length > maxSelectOptionsAllowed) {
-                  // too many options are detected, convert the column to SingleLineText instead
-                  column.uidt = UITypes.SingleLineText
-                  // _disableSelect is used to disable the <a-select-option/> in TemplateEditor
-                  column._disableSelect = true
-                } else {
-                  // assume the column type is multiple select if there are repeated values
-                  if (flattenedVals.length > uniqueVals.length && uniqueVals.length <= Math.ceil(flattenedVals.length / 2)) {
-                    column.uidt = UITypes.MultiSelect
-                  }
-                  // set dtxp here so that users can have the options even they switch the type from other types to MultiSelect
-                  // once it's set, dtxp needs to be reset if the final column type is not MultiSelect
-                  column.dtxp = `'${uniqueVals.join("','")}'`
-                }
-              } else {
-                // TODO: handle case sensitive case
-                const uniqueVals = [...new Set(vals.map((v: any) => v.toString().trim().toLowerCase()))]
-
-                if (uniqueVals.length > maxSelectOptionsAllowed) {
-                  // too many options are detected, convert the column to SingleLineText instead
-                  column.uidt = UITypes.SingleLineText
-                  // _disableSelect is used to disable the <a-select-option/> in TemplateEditor
-                  column._disableSelect = true
-                } else {
-                  // assume the column type is single select if there are repeated values
-                  // once it's set, dtxp needs to be reset if the final column type is not Single Select
-                  if (vals.length > uniqueVals.length && uniqueVals.length <= Math.ceil(vals.length / 2)) {
-                    column.uidt = UITypes.SingleSelect
-                  }
-                  // set dtxp here so that users can have the options even they switch the type from other types to SingleSelect
-                  // once it's set, dtxp needs to be reset if the final column type is not SingleSelect
-                  column.dtxp = `'${uniqueVals.join("','")}'`
-                }
-              }
+              // Single Select / Multi Select
+              Object.assign(column, extractMultiOrSingleSelectProps(vals))
             }
           }
         } else if (column.uidt === UITypes.Number) {
diff --git a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
index 91a8a62791..56812c6533 100644
--- a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
@@ -1,13 +1,5 @@
 import { UITypes } from 'nocodb-sdk'
-import {
-  extractMultiOrSingleSelectProps,
-  getCheckboxValue,
-  isCheckboxType,
-  isDecimalType,
-  isEmailType,
-  isMultiLineTextType,
-  isUrlType,
-} from './parserHelpers'
+import { getCheckboxValue, getColumnUIDTAndMetas } from './parserHelpers'
 import TemplateGenerator from './TemplateGenerator'
 
 const jsonTypeToUidt: Record<string, string> = {
@@ -110,42 +102,13 @@ export default class JSONTemplateAdapter extends TemplateGenerator {
       column.uidt = jsonTypeToUidt[typeof firstRowVal] || UITypes.SingleLineText
 
       const colData = jsonData.map((r: any) => extractNestedData(r, path))
-      Object.assign(column, this._getColumnUIDTAndMetas(colData, column.uidt))
+      Object.assign(column, getColumnUIDTAndMetas(colData, column.uidt))
       columns.push(column)
     }
 
     return columns
   }
 
-  _getColumnUIDTAndMetas(colData: any, defaultType: any) {
-    const colProps = { uidt: defaultType }
-    // todo: optimize
-    if (colProps.uidt === UITypes.SingleLineText) {
-      // check for long text
-      if (isMultiLineTextType(colData)) {
-        colProps.uidt = UITypes.LongText
-      }
-      if (isEmailType(colData)) {
-        colProps.uidt = UITypes.Email
-      }
-      if (isUrlType(colData)) {
-        colProps.uidt = UITypes.URL
-      } else {
-        const checkboxType = isCheckboxType(colData)
-        if (checkboxType.length === 1) {
-          colProps.uidt = UITypes.Checkbox
-        } else {
-          Object.assign(colProps, extractMultiOrSingleSelectProps(colData))
-        }
-      }
-    } else if (colProps.uidt === UITypes.Number) {
-      if (isDecimalType(colData)) {
-        colProps.uidt = UITypes.Decimal
-      }
-    }
-    return colProps
-  }
-
   _parseTableData(tableMeta: any) {
     for (const row of this.jsonData as any) {
       const rowData: any = {}
diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index 639e641d54..ce07e8494d 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -40,6 +40,7 @@ export const isCheckboxType: any = (values: [], col = null) => {
   }
   return options
 }
+
 export const getCheckboxValue = (value: number) => {
   return value && aggBooleanOptions[value]
 }
@@ -51,6 +52,7 @@ export const isMultiLineTextType = (values: [], col = null) => {
 }
 
 export const extractMultiOrSingleSelectProps = (colData: []) => {
+  const maxSelectOptionsAllowed = 64
   const colProps: any = {}
   if (colData.some((v: any) => v && (v || '').toString().includes(','))) {
     let flattenedVals = colData.flatMap((v: any) =>
@@ -64,20 +66,40 @@ export const extractMultiOrSingleSelectProps = (colData: []) => {
     const uniqueVals = (flattenedVals = flattenedVals.filter(
       (v, i, arr) => i === arr.findIndex((v1) => v.toLowerCase() === v1.toLowerCase()),
     ))
-    if (flattenedVals.length > uniqueVals.length && uniqueVals.length <= Math.ceil(flattenedVals.length / 2)) {
-      colProps.uidt = UITypes.MultiSelect
+    if (uniqueVals.length > maxSelectOptionsAllowed) {
+      // too many options are detected, convert the column to SingleLineText instead
+      colProps.uidt = UITypes.SingleLineText
+      // _disableSelect is used to disable the <a-select-option/> in TemplateEditor
+      colProps._disableSelect = true
+    } else {
+      // assume the column type is multiple select if there are repeated values
+      if (flattenedVals.length > uniqueVals.length && uniqueVals.length <= Math.ceil(flattenedVals.length / 2)) {
+        colProps.uidt = UITypes.MultiSelect
+      }
+      // set dtxp here so that users can have the options even they switch the type from other types to MultiSelect
+      // once it's set, dtxp needs to be reset if the final column type is not MultiSelect
       colProps.dtxp = `'${uniqueVals.join("','")}'`
     }
   } else {
-    const uniqueVals = colData
-      .map((v: any) => (v || '').toString().trim())
-      .filter((v, i, arr) => i === arr.findIndex((v1) => v.toLowerCase() === v1.toLowerCase()))
-    if (colData.length > uniqueVals.length && uniqueVals.length <= Math.ceil(colData.length / 2)) {
-      colProps.uidt = UITypes.SingleSelect
+    const uniqueVals = [...new Set(colData.map((v: any) => v.toString().trim().toLowerCase()))]
+
+    if (uniqueVals.length > maxSelectOptionsAllowed) {
+      // too many options are detected, convert the column to SingleLineText instead
+      colProps.uidt = UITypes.SingleLineText
+      // _disableSelect is used to disable the <a-select-option/> in TemplateEditor
+      colProps._disableSelect = true
+    } else {
+      // assume the column type is single select if there are repeated values
+      // once it's set, dtxp needs to be reset if the final column type is not Single Select
+      if (colData.length > uniqueVals.length && uniqueVals.length <= Math.ceil(colData.length / 2)) {
+        colProps.uidt = UITypes.SingleSelect
+      }
+      // set dtxp here so that users can have the options even they switch the type from other types to SingleSelect
+      // once it's set, dtxp needs to be reset if the final column type is not SingleSelect
       colProps.dtxp = `'${uniqueVals.join("','")}'`
     }
+    return colProps
   }
-  return colProps
 }
 
 export const isDecimalType = (colData: []) =>
@@ -89,7 +111,39 @@ export const isEmailType = (colData: []) =>
   !colData.some((v: any) => {
     return v && !isEmail(v)
   })
+
 export const isUrlType = (colData: []) =>
   !colData.some((v: any) => {
     return v && !isValidURL(v)
   })
+
+export const getColumnUIDTAndMetas = (colData: [], defaultType: string) => {
+  const colProps = { uidt: defaultType }
+
+  if (colProps.uidt === UITypes.SingleLineText) {
+    // check for long text
+    if (isMultiLineTextType(colData)) {
+      colProps.uidt = UITypes.LongText
+    }
+    if (isEmailType(colData)) {
+      colProps.uidt = UITypes.Email
+    }
+    if (isUrlType(colData)) {
+      colProps.uidt = UITypes.URL
+    } else {
+      const checkboxType = isCheckboxType(colData)
+      if (checkboxType.length === 1) {
+        colProps.uidt = UITypes.Checkbox
+      } else {
+        Object.assign(colProps, extractMultiOrSingleSelectProps(colData))
+      }
+    }
+  } else if (colProps.uidt === UITypes.Number) {
+    if (isDecimalType(colData)) {
+      colProps.uidt = UITypes.Decimal
+    }
+  }
+  // TODO: currency
+  // TODO: date / datetime
+  return colProps
+}

From 96db6145fc1878d24119d5a451b6b8d930a3428d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 17 Oct 2022 15:52:01 +0530
Subject: [PATCH 005/117] fix(gui): avoid overwriting cell value after update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/composables/useViewData.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index a190818557..cb7e75ec78 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -1,4 +1,4 @@
-import { ViewTypes } from 'nocodb-sdk'
+import { ViewTypes, isVirtualCol } from 'nocodb-sdk'
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
@@ -206,7 +206,7 @@ export function useViewData(
     ltarState: Record<string, any> = {},
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
-    const row = currentRow.row;
+    const row = currentRow.row
     if (currentRow.rowMeta) currentRow.rowMeta.saving = true
     try {
       const { missingRequiredColumns, insertObj } = await populateInsertObject({
@@ -266,15 +266,23 @@ export function useViewData(
       )
       // audit
       $api.utils.auditRowUpdate(id, {
-        fk_model_id: meta.value?.id as string,
+        fk_model_id: metaValue?.id as string,
         column_name: property,
         row_id: id,
         value: getHTMLEncodedText(toUpdate.row[property]),
         prev_value: getHTMLEncodedText(toUpdate.oldRow[property]),
       })
 
-      /** update row data(to sync formula and other related columns) */
-      Object.assign(toUpdate.row, updatedRowData)
+      /** update row data(to sync formula and other related columns)
+       * update only virtual columns data to avoid overwriting any changes made by user
+       */
+      Object.assign(
+        toUpdate.row,
+        metaValue!.columns!.reduce<Record<string, any>>((acc: Record<string, any>, col: ColumnType) => {
+          if (isVirtualCol(col)) acc[col.title!] = updatedRowData[col.title!]
+          return acc
+        }, {} as Record<string, any>),
+      )
       Object.assign(toUpdate.oldRow, updatedRowData)
     } catch (e: any) {
       message.error(`${t('msg.error.rowUpdateFailed')} ${await extractSdkResponseErrorMsg(e)}`)

From 213c6f3ca5fb690cf8f49193cbc9d33aa1b2a48a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Oct 2022 19:21:36 +0800
Subject: [PATCH 006/117] refactor(nc-gui): change project type in
 JSONTemplateAdapter

---
 packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
index 56812c6533..1843e2fd75 100644
--- a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
@@ -18,7 +18,10 @@ export default class JSONTemplateAdapter extends TemplateGenerator {
   data: Record<string, any>
   _jsonData: string | Record<string, any>
   jsonData: Record<string, any>
-  project: Record<string, any>
+  project: {
+    title: string
+    tables: Record<string, any>[]
+  }
   columns: object
   constructor(name = 'test', data: object, parserConfig = {}) {
     super()

From 7adf48d0b9c4f6cb54f88000151a2b24425d5cba Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Oct 2022 20:30:14 +0800
Subject: [PATCH 007/117] refactor(nc-gui): use set for calculating unique
 values

---
 packages/nc-gui/utils/parsers/parserHelpers.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index ce07e8494d..fbcf69bf37 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -63,9 +63,9 @@ export const extractMultiOrSingleSelectProps = (colData: []) => {
             .split(/\s*,\s*/)
         : [],
     )
-    const uniqueVals = (flattenedVals = flattenedVals.filter(
-      (v, i, arr) => i === arr.findIndex((v1) => v.toLowerCase() === v1.toLowerCase()),
-    ))
+
+    const uniqueVals = [...new Set(flattenedVals.map((v: any) => v.toString().trim().toLowerCase()))]
+
     if (uniqueVals.length > maxSelectOptionsAllowed) {
       // too many options are detected, convert the column to SingleLineText instead
       colProps.uidt = UITypes.SingleLineText

From 6d6b93195397bf50e7637fdcba66132357f95bea Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Oct 2022 23:46:35 +0800
Subject: [PATCH 008/117] fix(nc-gui): isEmailType & isUrlType logic

---
 packages/nc-gui/utils/parsers/parserHelpers.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index fbcf69bf37..878e7800ac 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -108,13 +108,13 @@ export const isDecimalType = (colData: []) =>
   })
 
 export const isEmailType = (colData: []) =>
-  !colData.some((v: any) => {
-    return v && !isEmail(v)
+  colData.some((v: any) => {
+    return v && isEmail(v)
   })
 
 export const isUrlType = (colData: []) =>
-  !colData.some((v: any) => {
-    return v && !isValidURL(v)
+  colData.some((v: any) => {
+    return v && isValidURL(v)
   })
 
 export const getColumnUIDTAndMetas = (colData: [], defaultType: string) => {

From 0ba2778c573fdb417a85d0453316970b158f7088 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 01:02:33 +0800
Subject: [PATCH 009/117] wip(nc-gui): csv template adapter with papaparse v5
 streaming

---
 .../utils/parsers/CSVTemplateAdapter.ts       | 205 ++++++++++++++++--
 1 file changed, 186 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index f68c9be56e..f85c759b3e 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -1,42 +1,209 @@
 import { parse } from 'papaparse'
 import TemplateGenerator from './TemplateGenerator'
+import { UploadFile } from 'ant-design-vue'
+import { UITypes } from 'nocodb-sdk'
+import {
+  extractMultiOrSingleSelectProps,
+  isCheckboxType,
+  isDecimalType,
+  isEmailType,
+  isMultiLineTextType,
+  isUrlType,
+} from '#imports'
 
 export default class CSVTemplateAdapter extends TemplateGenerator {
+  config: Record<string, any>
   fileName: string
-  project: object
-  data: object
-  csv: any
-  csvData: any
-  columns: object
+  files: UploadFile[]
+  detectedColumnTypes: Record<number, Record<string, number>>
+  distinctValues: Record<number, Set<string>>
+  headers: Record<number, string[]>
+  project: {
+    title: string
+    tables: Record<string, any>[]
+  }
+  columnValues: Record<number, []>
 
-  constructor(name: string, data: object) {
+  constructor(fileName: string, files: UploadFile[], parserConfig = {}) {
     super()
-    this.fileName = name
-    this.csvData = data
+    this.config = {
+      maxRowsToParse: 500,
+      ...parserConfig,
+    }
+    this.fileName = fileName // TODO: check usage
+    this.files = files
     this.project = {
       title: this.fileName,
       tables: [],
     }
-    this.data = {}
-    this.csv = {}
-    this.columns = {}
-    this.csvData = {}
+    this.detectedColumnTypes = {}
+    this.distinctValues = {}
+    this.headers = {}
+    this.columnValues = {}
   }
 
-  async init() {
-    this.csv = parse(this.csvData, { header: true })
+  async init() {}
+
+  initTemplate(tableIdx: number, fileName: string, columnNames: string[]) {
+    const columnNameRowExist = +columnNames.every((v: any) => v === null || typeof v === 'string')
+    const columnNamePrefixRef: Record<string, any> = { id: 0 }
+
+    this.project.tables.push({
+      table_name: fileName,
+      ref_table_name: fileName,
+      columns: [],
+    })
+
+    this.headers[tableIdx] = []
+
+    for (const [columnIdx, columnName] of columnNames.entries()) {
+      let cn: string = ((columnNameRowExist && columnName.toString().trim()) || `field_${columnIdx + 1}`)
+        .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
+        .trim()
+      while (cn in columnNamePrefixRef) {
+        cn = `${cn}${++columnNamePrefixRef[cn]}`
+      }
+      columnNamePrefixRef[cn] = 0
+
+      this.detectedColumnTypes[columnIdx] = {}
+      this.distinctValues[columnIdx] = new Set<string>()
+      this.columnValues[columnIdx] = []
+
+      this.project.tables[tableIdx].columns.push({
+        column_name: cn,
+        ref_column_name: cn,
+        meta: {},
+        uidt: UITypes.SingleLineText,
+        key: columnIdx,
+      })
+
+      this.headers[tableIdx].push(cn)
+    }
   }
 
-  parseData() {
-    this.columns = this.csv.meta.fields
-    this.data = this.csv.data
+  detectInitialUidt(v: string) {
+    if (!isNaN(Number(v)) && !isNaN(parseFloat(v))) return UITypes.Number
+    if (!isNaN(new Date(v).getDate())) return UITypes.DateTime
+    if (['true', 'True', 'false', 'False', '1', '0', 'T', 'F', 'Y', 'N'].includes(v)) return UITypes.Checkbox
+    return UITypes.SingleLineText
+  }
+
+  detectColumnType(data: []) {
+    for (let columnIdx = 0; columnIdx < data.length; columnIdx++) {
+      const colData: any = [data[columnIdx]]
+      const colProps = { uidt: this.detectInitialUidt(data[columnIdx]) }
+      // TODO: centralise
+      if (colProps.uidt === UITypes.SingleLineText) {
+        if (isMultiLineTextType(colData)) {
+          colProps.uidt = UITypes.LongText
+        }
+        if (isEmailType(colData)) {
+          colProps.uidt = UITypes.Email
+        }
+        if (isUrlType(colData)) {
+          colProps.uidt = UITypes.URL
+        } else {
+          const checkboxType = isCheckboxType(colData)
+          if (checkboxType.length === 1) {
+            colProps.uidt = UITypes.Checkbox
+          } else {
+            if (columnIdx < this.config.maxRowsToParse) {
+              this.columnValues[columnIdx].push(data[columnIdx])
+            }
+          }
+        }
+      } else if (colProps.uidt === UITypes.Number) {
+        if (isDecimalType(colData)) {
+          colProps.uidt = UITypes.Decimal
+        }
+      } else if (colProps.uidt === UITypes.DateTime) {
+        if (columnIdx < this.config.maxRowsToParse) {
+          this.columnValues[columnIdx].push(data[columnIdx])
+        }
+      }
+      if (!(colProps.uidt in this.detectedColumnTypes[columnIdx])) {
+        this.detectedColumnTypes[columnIdx] = {
+          ...this.detectedColumnTypes[columnIdx],
+          [colProps.uidt]: 0,
+        }
+      }
+      this.detectedColumnTypes[columnIdx][colProps.uidt] += 1
+      if (data[columnIdx]) {
+        this.distinctValues[columnIdx].add(data[columnIdx])
+      }
+    }
+  }
+
+  getMaxPossibleUidt(columnIdx: number) {
+    let mx = -1
+    let key: string = UITypes.SingleLineText
+    Object.entries(this.detectedColumnTypes[columnIdx]).forEach(([k, v]) => {
+      if (v > mx) {
+        mx = v
+        key = k
+      }
+    })
+    return key
+  }
+
+  updateTemplate(tableIdx: number) {
+    for (let columnIdx = 0; columnIdx < this.headers[tableIdx].length; columnIdx++) {
+      if (this.columnValues[columnIdx].length > 0) {
+        if (this.project.tables[tableIdx].columns[columnIdx].uidt === UITypes.DateTime) {
+          // TODO: handle DateTime
+          // set meta
+        }
+        Object.assign(
+          this.project.tables[tableIdx].columns[columnIdx],
+          extractMultiOrSingleSelectProps(this.columnValues[columnIdx]),
+        )
+      } else {
+        this.project.tables[tableIdx].columns[columnIdx].uidt = this.getMaxPossibleUidt(columnIdx)
+      }
+    }
+  }
+
+  parse() {
+    const that = this
+    for (const [tableIdx, file] of this.files.entries()) {
+      let steppers = 0
+      parse(file.originFileObj as File, {
+        worker: true,
+        step: function (row) {
+          steppers += 1
+          if (row) {
+            if (steppers == 1) {
+              that.initTemplate(tableIdx, file.name!, row.data as [])
+            } else {
+              that.detectColumnType(row.data as [])
+            }
+            // TODO: remove
+            if (steppers <= 10) {
+              console.log('Row:', row.data)
+            }
+          }
+        },
+        complete: function () {
+          console.log('complete')
+          console.log('steppers: ' + steppers)
+          that.updateTemplate(tableIdx)
+          console.log(that.project.tables)
+          // TODO: enable import button
+          // TODO: put info.file.originFileObj to list
+        },
+      })
+    }
   }
 
   getColumns() {
-    return this.columns
+    // return this.columns
   }
 
   getData() {
-    return this.data
+    // return this.data
+  }
+
+  getTemplate() {
+    return this.project
   }
 }

From a25f32f184188ee740ca119feb66e7273d046b1e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 11:13:38 +0800
Subject: [PATCH 010/117] feat(nc-gui): add callback & push non-nullable data
 to columnValues

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index f85c759b3e..43a9980346 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -1,5 +1,4 @@
 import { parse } from 'papaparse'
-import TemplateGenerator from './TemplateGenerator'
 import { UploadFile } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import {
@@ -11,7 +10,7 @@ import {
   isUrlType,
 } from '#imports'
 
-export default class CSVTemplateAdapter extends TemplateGenerator {
+export default class CSVTemplateAdapter {
   config: Record<string, any>
   fileName: string
   files: UploadFile[]
@@ -25,7 +24,6 @@ export default class CSVTemplateAdapter extends TemplateGenerator {
   columnValues: Record<number, []>
 
   constructor(fileName: string, files: UploadFile[], parserConfig = {}) {
-    super()
     this.config = {
       maxRowsToParse: 500,
       ...parserConfig,
@@ -107,7 +105,7 @@ export default class CSVTemplateAdapter extends TemplateGenerator {
           if (checkboxType.length === 1) {
             colProps.uidt = UITypes.Checkbox
           } else {
-            if (columnIdx < this.config.maxRowsToParse) {
+            if (data[columnIdx] && columnIdx < this.config.maxRowsToParse) {
               this.columnValues[columnIdx].push(data[columnIdx])
             }
           }
@@ -117,7 +115,7 @@ export default class CSVTemplateAdapter extends TemplateGenerator {
           colProps.uidt = UITypes.Decimal
         }
       } else if (colProps.uidt === UITypes.DateTime) {
-        if (columnIdx < this.config.maxRowsToParse) {
+        if (data[columnIdx] && columnIdx < this.config.maxRowsToParse) {
           this.columnValues[columnIdx].push(data[columnIdx])
         }
       }
@@ -163,7 +161,7 @@ export default class CSVTemplateAdapter extends TemplateGenerator {
     }
   }
 
-  parse() {
+  parse(callback: Function) {
     const that = this
     for (const [tableIdx, file] of this.files.entries()) {
       let steppers = 0
@@ -190,6 +188,7 @@ export default class CSVTemplateAdapter extends TemplateGenerator {
           console.log(that.project.tables)
           // TODO: enable import button
           // TODO: put info.file.originFileObj to list
+          callback()
         },
       })
     }

From 1b2a508fbbd75fa66573d46e0b5f401c01d5238f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 11:28:30 +0800
Subject: [PATCH 011/117] refactor(nc-gui): remove file name to adapter

---
 .../utils/parsers/CSVTemplateAdapter.ts       | 17 ++--
 .../utils/parsers/ExcelTemplateAdapter.ts     | 86 +++++++++----------
 .../utils/parsers/JSONTemplateAdapter.ts      |  7 +-
 3 files changed, 52 insertions(+), 58 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 43a9980346..3004a69be3 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -1,5 +1,5 @@
 import { parse } from 'papaparse'
-import { UploadFile } from 'ant-design-vue'
+import type { UploadFile } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import {
   extractMultiOrSingleSelectProps,
@@ -12,26 +12,23 @@ import {
 
 export default class CSVTemplateAdapter {
   config: Record<string, any>
-  fileName: string
   files: UploadFile[]
   detectedColumnTypes: Record<number, Record<string, number>>
   distinctValues: Record<number, Set<string>>
   headers: Record<number, string[]>
   project: {
-    title: string
     tables: Record<string, any>[]
   }
+
   columnValues: Record<number, []>
 
-  constructor(fileName: string, files: UploadFile[], parserConfig = {}) {
+  constructor(files: UploadFile[], parserConfig = {}) {
     this.config = {
       maxRowsToParse: 500,
       ...parserConfig,
     }
-    this.fileName = fileName // TODO: check usage
     this.files = files
     this.project = {
-      title: this.fileName,
       tables: [],
     }
     this.detectedColumnTypes = {}
@@ -167,10 +164,10 @@ export default class CSVTemplateAdapter {
       let steppers = 0
       parse(file.originFileObj as File, {
         worker: true,
-        step: function (row) {
+        step(row) {
           steppers += 1
           if (row) {
-            if (steppers == 1) {
+            if (steppers === 1) {
               that.initTemplate(tableIdx, file.name!, row.data as [])
             } else {
               that.detectColumnType(row.data as [])
@@ -181,9 +178,9 @@ export default class CSVTemplateAdapter {
             }
           }
         },
-        complete: function () {
+        complete() {
           console.log('complete')
-          console.log('steppers: ' + steppers)
+          console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
           console.log(that.project.tables)
           // TODO: enable import button
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 93d252867a..3ea18aeaab 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -22,13 +22,10 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
     maxRowsToParse: number
   } & Record<string, any>
 
-  name: string
-
   excelData: any
 
   project: {
-    title: string
-    tables: any[]
+    tables: Record<string, any>[]
   }
 
   data: Record<string, any> = {}
@@ -37,19 +34,16 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
 
   xlsx: typeof import('xlsx')
 
-  constructor(name = '', data = {}, parserConfig = {}) {
+  constructor(data = {}, parserConfig = {}) {
     super()
     this.config = {
       maxRowsToParse: 500,
       ...parserConfig,
     }
 
-    this.name = name
-
     this.excelData = data
 
     this.project = {
-      title: this.name,
       tables: [],
     }
 
@@ -64,17 +58,22 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       cellDates: true,
     }
 
-    if (this.name.slice(-3) === 'csv') {
-      this.wb = this.xlsx.read(new TextDecoder().decode(new Uint8Array(this.excelData)), {
-        type: 'string',
-        ...options,
-      })
-    } else {
-      this.wb = this.xlsx.read(new Uint8Array(this.excelData), {
-        type: 'array',
-        ...options,
-      })
-    }
+    // TODO: remove later
+    // if (this.name.slice(-3) === 'csv') {
+    //   this.wb = this.xlsx.read(new TextDecoder().decode(new Uint8Array(this.excelData)), {
+    //     type: 'string',
+    //     ...options,
+    //   })
+    // } else {
+    //   this.wb = this.xlsx.read(new Uint8Array(this.excelData), {
+    //     type: 'array',
+    //     ...options,
+    //   })
+    // }
+    this.wb = this.xlsx.read(new Uint8Array(this.excelData), {
+      type: 'array',
+      ...options,
+    })
   }
 
   parse() {
@@ -94,33 +93,33 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       this.data[tn] = []
       const ws: any = this.wb.Sheets[sheet]
       const range = this.xlsx.utils.decode_range(ws['!ref'])
-      let rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
-
-      if (this.name.slice(-3) !== 'csv') {
-        // fix precision bug & timezone offset issues introduced by xlsx
-        const basedate = new Date(1899, 11, 30, 0, 0, 0)
-        // number of milliseconds since base date
-        const dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000
-        // number of milliseconds in a day
-        const day_ms = 24 * 60 * 60 * 1000
-        // handle date1904 property
-        const fixImportedDate = (date: Date) => {
-          const parsed = this.xlsx.SSF.parse_date_code((date.getTime() - dnthresh) / day_ms, {
-            date1904: this.wb.Workbook.WBProps.date1904,
-          })
-          return new Date(parsed.y, parsed.m, parsed.d, parsed.H, parsed.M, parsed.S)
-        }
-        // fix imported date
-        rows = rows.map((r: any) =>
-          r.map((v: any) => {
-            return v instanceof Date ? fixImportedDate(v) : v
-          }),
-        )
-      }
+      const rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
+
+      // TODO: remove later
+      // if (this.name.slice(-3) !== 'csv') {
+      //   // fix precision bug & timezone offset issues introduced by xlsx
+      //   const basedate = new Date(1899, 11, 30, 0, 0, 0)
+      //   // number of milliseconds since base date
+      //   const dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000
+      //   // number of milliseconds in a day
+      //   const day_ms = 24 * 60 * 60 * 1000
+      //   // handle date1904 property
+      //   const fixImportedDate = (date: Date) => {
+      //     const parsed = this.xlsx.SSF.parse_date_code((date.getTime() - dnthresh) / day_ms, {
+      //       date1904: this.wb.Workbook.WBProps.date1904,
+      //     })
+      //     return new Date(parsed.y, parsed.m, parsed.d, parsed.H, parsed.M, parsed.S)
+      //   }
+      //   // fix imported date
+      //   rows = rows.map((r: any) =>
+      //     r.map((v: any) => {
+      //       return v instanceof Date ? fixImportedDate(v) : v
+      //     }),
+      //   )
+      // }
 
       const columnNameRowExist = +rows[0].every((v: any) => v === null || typeof v === 'string')
 
-      // const colLen = Math.max()
       for (let col = 0; col < rows[0].length; col++) {
         let cn: string = ((columnNameRowExist && rows[0] && rows[0][col] && rows[0][col].toString().trim()) || `field_${col + 1}`)
           .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
@@ -193,6 +192,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             column.uidt = UITypes.Currency
           }
         } else if (column.uidt === UITypes.DateTime) {
+          // TODO: centralise
           // hold the possible date format found in the date
           const dateFormat: Record<string, number> = {}
           if (
diff --git a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
index 1843e2fd75..ee3214489a 100644
--- a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
@@ -14,25 +14,22 @@ const extractNestedData: any = (obj: any, path: any) => path.reduce((val: any, k
 
 export default class JSONTemplateAdapter extends TemplateGenerator {
   config: Record<string, any>
-  name: string
   data: Record<string, any>
   _jsonData: string | Record<string, any>
   jsonData: Record<string, any>
   project: {
-    title: string
     tables: Record<string, any>[]
   }
+
   columns: object
-  constructor(name = 'test', data: object, parserConfig = {}) {
+  constructor(data: object, parserConfig = {}) {
     super()
     this.config = {
       maxRowsToParse: 500,
       ...parserConfig,
     }
-    this.name = name
     this._jsonData = data
     this.project = {
-      title: this.name,
       tables: [],
     }
     this.jsonData = []

From 12a64cf641c851787838b39608513eaa1fdb110f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 11:28:52 +0800
Subject: [PATCH 012/117] wip(nc-gui): papaparse integration

---
 .../nc-gui/components/dlg/QuickImport.vue     | 113 +++++++++++++-----
 1 file changed, 80 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index e2f7629ca3..d569e572c0 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -54,7 +54,9 @@ const templateEditorModal = ref(false)
 const useForm = Form.useForm
 
 const importState = reactive({
-  fileList: [] as (UploadFile & { data: string | ArrayBuffer })[],
+  // TODO: remove
+  // fileList: [] as (UploadFile & { data: string | ArrayBuffer })[],
+  fileList: [] as UploadFile[],
   url: '',
   jsonEditor: {},
   parserConfig: {
@@ -134,17 +136,17 @@ async function handlePreImport() {
   loading.value = true
 
   if (activeKey.value === 'uploadTab') {
-    await parseAndExtractData(importState.fileList[0].data, importState.fileList[0].name)
+    // TODO: update
+    await parseAndExtractData2(importState.fileList)
   } else if (activeKey.value === 'urlTab') {
     try {
       await validate()
-
-      await parseAndExtractData(importState.url, '')
+      await parseAndExtractData(importState.url)
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
     }
   } else if (activeKey.value === 'jsonEditorTab') {
-    await parseAndExtractData(JSON.stringify(importState.jsonEditor), '')
+    await parseAndExtractData(JSON.stringify(importState.jsonEditor))
   }
 
   loading.value = false
@@ -164,13 +166,14 @@ async function handleImport() {
   dialogShow.value = false
 }
 
-async function parseAndExtractData(val: string | ArrayBuffer, name: string) {
+// papaparse experiment
+async function parseAndExtractData2(val: UploadFile[]) {
   try {
     templateData.value = null
     importData.value = null
     importColumns.value = []
 
-    const templateGenerator = getAdapter(name, val)
+    const templateGenerator = getAdapter(val)
 
     if (!templateGenerator) {
       message.error(t('msg.error.templateGeneratorNotFound'))
@@ -179,7 +182,36 @@ async function parseAndExtractData(val: string | ArrayBuffer, name: string) {
 
     await templateGenerator.init()
 
-    templateGenerator.parse()
+    templateGenerator.parse(() => {
+      templateData.value = templateGenerator.getTemplate()
+      // templateData.value.tables[0].table_name = populateUniqueTableName()
+      // importData.value = templateGenerator.getData()
+
+      // if (importOnly) importColumns.value = templateGenerator.getColumns()
+
+      templateEditorModal.value = true
+    })
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+async function parseAndExtractData(val: string | ArrayBuffer) {
+  try {
+    templateData.value = null
+    importData.value = null
+    importColumns.value = []
+
+    const templateGenerator = getAdapter(val)
+
+    if (!templateGenerator) {
+      message.error(t('msg.error.templateGeneratorNotFound'))
+      return
+    }
+
+    await templateGenerator.init()
+
+    templateGenerator.parse(() => {})
     templateData.value = templateGenerator.getTemplate()
     templateData.value.tables[0].table_name = populateUniqueTableName()
     importData.value = templateGenerator.getData()
@@ -202,27 +234,34 @@ function handleChange(info: UploadChangeParam) {
   const status = info.file.status
 
   if (status !== 'uploading' && status !== 'removed') {
-    const reader = new FileReader()
-
-    reader.onload = (e: ProgressEvent<FileReader>) => {
-      const target = importState.fileList.find((f) => f.uid === info.file.uid)
-
-      if (e.target && e.target.result) {
-        /** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */
-        if (target) {
-          target.data = e.target.result
-        } else if (!target) {
-          /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
-          importState.fileList.push({
-            ...info.file,
-            status: 'done',
-            data: e.target.result,
-          })
-        }
-      }
+    // const reader = new FileReader()
+    // reader.onload = (e: ProgressEvent<FileReader>) => {
+    //   const target = importState.fileList.find((f) => f.uid === info.file.uid)
+    //   if (e.target && e.target.result) {
+    //     /** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */
+    //     if (target) {
+    //       target.data = e.target.result
+    //     } else if (!target) {
+    //       /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
+    //       importState.fileList.push({
+    //         ...info.file,
+    //         status: 'done',
+    //         data: e.target.result,
+    //       })
+    //     }
+    //   }
+    // }
+    // reader.readAsArrayBuffer(info.file.originFileObj!)
+
+    if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
+      /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
+      importState.fileList.push({
+        ...info.file,
+        status: 'done',
+      })
     }
-
-    reader.readAsArrayBuffer(info.file.originFileObj!)
+    console.log(info)
+    console.log(importState.fileList)
   }
 
   if (status === 'done') {
@@ -246,22 +285,30 @@ function populateUniqueTableName() {
   return `Sheet${c}`
 }
 
-function getAdapter(name: string, val: any) {
-  if (IsImportTypeExcel.value || isImportTypeCsv.value) {
+function getAdapter(val: any) {
+  if (isImportTypeCsv.value) {
+    switch (activeKey.value) {
+      case 'uploadTab':
+        return new CSVTemplateAdapter(val, importState.parserConfig)
+      case 'urlTab':
+        // TODO: implement one for CSV
+        return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
+    }
+  } else if (IsImportTypeExcel.value || isImportTypeCsv.value) {
     switch (activeKey.value) {
       case 'uploadTab':
-        return new ExcelTemplateAdapter(name, val, importState.parserConfig)
+        return new ExcelTemplateAdapter(val, importState.parserConfig)
       case 'urlTab':
         return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
     }
   } else if (isImportTypeJson.value) {
     switch (activeKey.value) {
       case 'uploadTab':
-        return new JSONTemplateAdapter(name, val, importState.parserConfig)
+        return new JSONTemplateAdapter(val, importState.parserConfig)
       case 'urlTab':
         return new JSONUrlTemplateAdapter(val, importState.parserConfig)
       case 'jsonEditorTab':
-        return new JSONTemplateAdapter(name, val, importState.parserConfig)
+        return new JSONTemplateAdapter(val, importState.parserConfig)
     }
   }
 

From d892aef5d3879ae702d404c60aa9bbeb422ab6e7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 11:41:10 +0800
Subject: [PATCH 013/117] feat(nc-gui): add spinner during parsing large data

---
 .../nc-gui/components/dlg/QuickImport.vue     | 210 +++++++++---------
 1 file changed, 108 insertions(+), 102 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index d569e572c0..ee7432a30e 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -51,6 +51,8 @@ const importColumns = ref([])
 
 const templateEditorModal = ref(false)
 
+const isParsingData = ref(false)
+
 const useForm = Form.useForm
 
 const importState = reactive({
@@ -134,6 +136,7 @@ const modalWidth = computed(() => {
 
 async function handlePreImport() {
   loading.value = true
+  isParsingData.value = true
 
   if (activeKey.value === 'uploadTab') {
     // TODO: update
@@ -149,7 +152,9 @@ async function handlePreImport() {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor))
   }
 
-  loading.value = false
+  // TODO: fix
+  // loading.value = false
+  // isParsingData.value = false
 }
 
 async function handleImport() {
@@ -188,8 +193,8 @@ async function parseAndExtractData2(val: UploadFile[]) {
       // importData.value = templateGenerator.getData()
 
       // if (importOnly) importColumns.value = templateGenerator.getColumns()
-
       templateEditorModal.value = true
+      isParsingData.value = false
     })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -338,115 +343,116 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
     wrap-class-name="nc-modal-quick-import"
     @keydown.esc="dialogShow = false"
   >
-    <div class="px-5">
-      <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
-
-      <div class="mt-5">
-        <LazyTemplateEditor
-          v-if="templateEditorModal"
-          ref="templateEditorRef"
-          :project-template="templateData"
-          :import-data="importData"
-          :import-columns="importColumns"
-          :import-only="importOnly"
-          :quick-import-type="importType"
-          :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
-          class="nc-quick-import-template-editor"
-          @import="handleImport"
-        />
-
-        <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" tab-position="top">
-          <a-tab-pane key="uploadTab" :closable="false">
-            <template #tab>
-              <!--              Upload -->
-              <div class="flex items-center gap-2">
-                <MdiFileUploadOutline />
-                {{ $t('general.upload') }}
+    <a-spin :spinning="isParsingData" tip="Parsing Data ..." size="large">
+      <div class="px-5">
+        <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
+
+        <div class="mt-5">
+          <LazyTemplateEditor
+            v-if="templateEditorModal"
+            ref="templateEditorRef"
+            :project-template="templateData"
+            :import-data="importData"
+            :import-columns="importColumns"
+            :import-only="importOnly"
+            :quick-import-type="importType"
+            :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
+            class="nc-quick-import-template-editor"
+            @import="handleImport"
+          />
+
+          <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" tab-position="top">
+            <a-tab-pane key="uploadTab" :closable="false">
+              <template #tab>
+                <!--              Upload -->
+                <div class="flex items-center gap-2">
+                  <MdiFileUploadOutline />
+                  {{ $t('general.upload') }}
+                </div>
+              </template>
+
+              <div class="py-6">
+                <a-upload-dragger
+                  v-model:fileList="importState.fileList"
+                  name="file"
+                  class="nc-input-import !scrollbar-thin-dull"
+                  :accept="importMeta.acceptTypes"
+                  :max-count="1"
+                  list-type="picture"
+                  :custom-request="customReqCbk"
+                  @change="handleChange"
+                  @reject="rejectDrop"
+                >
+                  <MdiFilePlusOutline size="large" />
+
+                  <!--                Click or drag file to this area to upload -->
+                  <p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p>
+
+                  <p class="ant-upload-hint">
+                    {{ importMeta.uploadHint }}
+                  </p>
+                </a-upload-dragger>
               </div>
-            </template>
-
-            <div class="py-6">
-              <a-upload-dragger
-                v-model:fileList="importState.fileList"
-                name="file"
-                class="nc-input-import !scrollbar-thin-dull"
-                :accept="importMeta.acceptTypes"
-                :max-count="1"
-                list-type="picture"
-                :custom-request="customReqCbk"
-                @change="handleChange"
-                @reject="rejectDrop"
-              >
-                <MdiFilePlusOutline size="large" />
-
-                <!--                Click or drag file to this area to upload -->
-                <p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p>
-
-                <p class="ant-upload-hint">
-                  {{ importMeta.uploadHint }}
-                </p>
-              </a-upload-dragger>
-            </div>
-          </a-tab-pane>
-
-          <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
-            <template #tab>
-              <span class="flex items-center gap-2">
-                <MdiCodeJson />
-                JSON Editor
-              </span>
-            </template>
-
-            <div class="pb-3 pt-3">
-              <LazyMonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
-            </div>
-          </a-tab-pane>
-
-          <a-tab-pane v-else key="urlTab" :closable="false">
-            <template #tab>
-              <span class="flex items-center gap-2">
-                <MdiLinkVariant />
-                URL
-              </span>
-            </template>
-
-            <div class="pr-10 pt-5">
-              <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
-                <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
-                  <a-input v-model:value="importState.url" size="large" />
-                </a-form-item>
-              </a-form>
-            </div>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
+            </a-tab-pane>
+
+            <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
+              <template #tab>
+                <span class="flex items-center gap-2">
+                  <MdiCodeJson />
+                  JSON Editor
+                </span>
+              </template>
+
+              <div class="pb-3 pt-3">
+                <LazyMonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
+              </div>
+            </a-tab-pane>
+
+            <a-tab-pane v-else key="urlTab" :closable="false">
+              <template #tab>
+                <span class="flex items-center gap-2">
+                  <MdiLinkVariant />
+                  URL
+                </span>
+              </template>
+
+              <div class="pr-10 pt-5">
+                <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
+                  <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
+                    <a-input v-model:value="importState.url" size="large" />
+                  </a-form-item>
+                </a-form>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
 
-      <div v-if="!templateEditorModal">
-        <a-divider />
+        <div v-if="!templateEditorModal">
+          <a-divider />
 
-        <div class="mb-4">
-          <!--          Advanced Settings -->
-          <span class="prose-lg">{{ $t('title.advancedSettings') }}</span>
+          <div class="mb-4">
+            <!--          Advanced Settings -->
+            <span class="prose-lg">{{ $t('title.advancedSettings') }}</span>
 
-          <a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
-            <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
-          </a-form-item>
+            <a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
+              <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
+            </a-form-item>
 
-          <!--          Flatten nested -->
-          <div v-if="isImportTypeJson" class="mt-3">
-            <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
-              <span class="caption">{{ $t('labels.flattenNested') }}</span>
-            </a-checkbox>
-          </div>
+            <!--          Flatten nested -->
+            <div v-if="isImportTypeJson" class="mt-3">
+              <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
+                <span class="caption">{{ $t('labels.flattenNested') }}</span>
+              </a-checkbox>
+            </div>
 
-          <!--          Import Data -->
-          <div v-if="isImportTypeJson" class="mt-4">
-            <a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox>
+            <!--          Import Data -->
+            <div v-if="isImportTypeJson" class="mt-4">
+              <a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-
+    </a-spin>
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
 

From e4d8683fa6add1444e3aed973e013d0a29484003 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 11:43:13 +0800
Subject: [PATCH 014/117] chore(nc-gui): revise TODO tag for import for
 tracking easily later

---
 packages/nc-gui/components/dlg/QuickImport.vue        |  8 ++++----
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts   | 10 +++++-----
 packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index ee7432a30e..a0e355e6b6 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -56,7 +56,7 @@ const isParsingData = ref(false)
 const useForm = Form.useForm
 
 const importState = reactive({
-  // TODO: remove
+  // TODO(import): remove
   // fileList: [] as (UploadFile & { data: string | ArrayBuffer })[],
   fileList: [] as UploadFile[],
   url: '',
@@ -139,7 +139,7 @@ async function handlePreImport() {
   isParsingData.value = true
 
   if (activeKey.value === 'uploadTab') {
-    // TODO: update
+    // TODO(import): update
     await parseAndExtractData2(importState.fileList)
   } else if (activeKey.value === 'urlTab') {
     try {
@@ -152,7 +152,7 @@ async function handlePreImport() {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor))
   }
 
-  // TODO: fix
+  // TODO(import): fix
   // loading.value = false
   // isParsingData.value = false
 }
@@ -296,7 +296,7 @@ function getAdapter(val: any) {
       case 'uploadTab':
         return new CSVTemplateAdapter(val, importState.parserConfig)
       case 'urlTab':
-        // TODO: implement one for CSV
+        // TODO(import): implement one for CSV
         return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
     }
   } else if (IsImportTypeExcel.value || isImportTypeCsv.value) {
diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 3004a69be3..4729696dfd 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -87,7 +87,7 @@ export default class CSVTemplateAdapter {
     for (let columnIdx = 0; columnIdx < data.length; columnIdx++) {
       const colData: any = [data[columnIdx]]
       const colProps = { uidt: this.detectInitialUidt(data[columnIdx]) }
-      // TODO: centralise
+      // TODO(import): centralise
       if (colProps.uidt === UITypes.SingleLineText) {
         if (isMultiLineTextType(colData)) {
           colProps.uidt = UITypes.LongText
@@ -145,7 +145,7 @@ export default class CSVTemplateAdapter {
     for (let columnIdx = 0; columnIdx < this.headers[tableIdx].length; columnIdx++) {
       if (this.columnValues[columnIdx].length > 0) {
         if (this.project.tables[tableIdx].columns[columnIdx].uidt === UITypes.DateTime) {
-          // TODO: handle DateTime
+          // TODO(import): handle DateTime
           // set meta
         }
         Object.assign(
@@ -172,7 +172,7 @@ export default class CSVTemplateAdapter {
             } else {
               that.detectColumnType(row.data as [])
             }
-            // TODO: remove
+            // TODO(import): remove
             if (steppers <= 10) {
               console.log('Row:', row.data)
             }
@@ -183,8 +183,8 @@ export default class CSVTemplateAdapter {
           console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
           console.log(that.project.tables)
-          // TODO: enable import button
-          // TODO: put info.file.originFileObj to list
+          // TODO(import): enable import button
+          // TODO(import): put info.file.originFileObj to list
           callback()
         },
       })
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 3ea18aeaab..bc3ae723a5 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -58,7 +58,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       cellDates: true,
     }
 
-    // TODO: remove later
+    // TODO(import): remove later
     // if (this.name.slice(-3) === 'csv') {
     //   this.wb = this.xlsx.read(new TextDecoder().decode(new Uint8Array(this.excelData)), {
     //     type: 'string',
@@ -95,7 +95,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       const range = this.xlsx.utils.decode_range(ws['!ref'])
       const rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
 
-      // TODO: remove later
+      // TODO(import): remove later
       // if (this.name.slice(-3) !== 'csv') {
       //   // fix precision bug & timezone offset issues introduced by xlsx
       //   const basedate = new Date(1899, 11, 30, 0, 0, 0)
@@ -192,7 +192,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             column.uidt = UITypes.Currency
           }
         } else if (column.uidt === UITypes.DateTime) {
-          // TODO: centralise
+          // TODO(import): centralise
           // hold the possible date format found in the date
           const dateFormat: Record<string, number> = {}
           if (

From a3fa0e1e3cd4ccd8d38851263304b3d7c2b2b038 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 11:43:24 +0800
Subject: [PATCH 015/117] chore(nc-gui): lint

---
 packages/nc-gui/utils/parsers/parserHelpers.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index 878e7800ac..3b308467f6 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -55,7 +55,7 @@ export const extractMultiOrSingleSelectProps = (colData: []) => {
   const maxSelectOptionsAllowed = 64
   const colProps: any = {}
   if (colData.some((v: any) => v && (v || '').toString().includes(','))) {
-    let flattenedVals = colData.flatMap((v: any) =>
+    const flattenedVals = colData.flatMap((v: any) =>
       v
         ? v
             .toString()
@@ -143,7 +143,7 @@ export const getColumnUIDTAndMetas = (colData: [], defaultType: string) => {
       colProps.uidt = UITypes.Decimal
     }
   }
-  // TODO: currency
-  // TODO: date / datetime
+  // TODO(import): currency
+  // TODO(import): date / datetime
   return colProps
 }

From 5f262c5d9034aff4eeb41f161d2470d3c4a911d5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 12:28:40 +0800
Subject: [PATCH 016/117] fix(nc-gui): preimport & import loading

---
 .../nc-gui/components/dlg/QuickImport.vue     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index a0e355e6b6..2753f3418b 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -41,7 +41,9 @@ const jsonEditorRef = ref()
 
 const templateEditorRef = ref()
 
-const loading = ref(false)
+const preImportLoading = ref(false)
+
+const importLoading = ref(false)
 
 const templateData = ref()
 
@@ -135,7 +137,7 @@ const modalWidth = computed(() => {
 })
 
 async function handlePreImport() {
-  loading.value = true
+  preImportLoading.value = true
   isParsingData.value = true
 
   if (activeKey.value === 'uploadTab') {
@@ -152,22 +154,20 @@ async function handlePreImport() {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor))
   }
 
-  // TODO(import): fix
-  // loading.value = false
+  // TODO(import):
+  preImportLoading.value = false
   // isParsingData.value = false
 }
 
 async function handleImport() {
   try {
-    loading.value = true
-
+    importLoading.value = true
     await templateEditorRef.value.importTemplate()
   } catch (e: any) {
     return message.error(await extractSdkResponseErrorMsg(e))
   } finally {
-    loading.value = false
+    importLoading.value = false
   }
-
   dialogShow.value = false
 }
 
@@ -472,14 +472,14 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
         key="pre-import"
         type="primary"
         class="nc-btn-import"
-        :loading="loading"
+        :loading="preImportLoading"
         :disabled="disablePreImportButton"
         @click="handlePreImport"
       >
         {{ $t('activity.import') }}
       </a-button>
 
-      <a-button v-else key="import" type="primary" :loading="loading" :disabled="disableImportButton" @click="handleImport">
+      <a-button v-else key="import" type="primary" :loading="importLoading" :disabled="disableImportButton" @click="handleImport">
         {{ $t('activity.import') }}
       </a-button>
     </template>

From 15bda1fb1cf1d2003d7e9d4d98d10f8bd7c58fc5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 12:37:13 +0800
Subject: [PATCH 017/117] fix(nc-gui): retrieve tn from fileName for csv import

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 4729696dfd..f39c1c914b 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -42,10 +42,11 @@ export default class CSVTemplateAdapter {
   initTemplate(tableIdx: number, fileName: string, columnNames: string[]) {
     const columnNameRowExist = +columnNames.every((v: any) => v === null || typeof v === 'string')
     const columnNamePrefixRef: Record<string, any> = { id: 0 }
+    const tn = fileName.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
 
     this.project.tables.push({
-      table_name: fileName,
-      ref_table_name: fileName,
+      table_name: tn,
+      ref_table_name: tn,
       columns: [],
     })
 

From b95be12114a96942f03ca2d346a952e1269e9d02 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 13:53:13 +0800
Subject: [PATCH 018/117] refactor(nc-gui): revise templateGenerator logic &
 move  getData to handleImport

---
 .../nc-gui/components/dlg/QuickImport.vue     | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 2753f3418b..a0b47e6ddb 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -2,6 +2,7 @@
 import type { TableType } from 'nocodb-sdk'
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import {
+  CSVTemplateAdapter,
   ExcelTemplateAdapter,
   ExcelUrlTemplateAdapter,
   Form,
@@ -136,6 +137,8 @@ const modalWidth = computed(() => {
   return 'max(60vw, 600px)'
 })
 
+let templateGenerator: CSVTemplateAdapter | JSONTemplateAdapter | ExcelTemplateAdapter | null
+
 async function handlePreImport() {
   preImportLoading.value = true
   isParsingData.value = true
@@ -161,7 +164,13 @@ async function handlePreImport() {
 
 async function handleImport() {
   try {
+    if (!templateGenerator) {
+      message.error(t('msg.error.templateGeneratorNotFound'))
+      return
+    }
+
     importLoading.value = true
+    importData.value = templateGenerator.getData()
     await templateEditorRef.value.importTemplate()
   } catch (e: any) {
     return message.error(await extractSdkResponseErrorMsg(e))
@@ -178,7 +187,7 @@ async function parseAndExtractData2(val: UploadFile[]) {
     importData.value = null
     importColumns.value = []
 
-    const templateGenerator = getAdapter(val)
+    templateGenerator = getAdapter(val)
 
     if (!templateGenerator) {
       message.error(t('msg.error.templateGeneratorNotFound'))
@@ -188,10 +197,9 @@ async function parseAndExtractData2(val: UploadFile[]) {
     await templateGenerator.init()
 
     templateGenerator.parse(() => {
-      templateData.value = templateGenerator.getTemplate()
+      templateData.value = templateGenerator!.getTemplate()
+      // TODO(import): remove
       // templateData.value.tables[0].table_name = populateUniqueTableName()
-      // importData.value = templateGenerator.getData()
-
       // if (importOnly) importColumns.value = templateGenerator.getColumns()
       templateEditorModal.value = true
       isParsingData.value = false
@@ -218,9 +226,8 @@ async function parseAndExtractData(val: string | ArrayBuffer) {
 
     templateGenerator.parse(() => {})
     templateData.value = templateGenerator.getTemplate()
-    templateData.value.tables[0].table_name = populateUniqueTableName()
-    importData.value = templateGenerator.getData()
 
+    // TODO(import): check
     if (importOnly) importColumns.value = templateGenerator.getColumns()
 
     templateEditorModal.value = true

From c43233ebd7f9f46d0c029184055c32e3307a4044 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 13:53:49 +0800
Subject: [PATCH 019/117] refactor(nc-gui): pass tn & delete column values
 after it is used

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index f39c1c914b..9349c679c6 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -20,6 +20,7 @@ export default class CSVTemplateAdapter {
     tables: Record<string, any>[]
   }
 
+  data: Record<string, any> = {}
   columnValues: Record<number, []>
 
   constructor(files: UploadFile[], parserConfig = {}) {
@@ -39,10 +40,9 @@ export default class CSVTemplateAdapter {
 
   async init() {}
 
-  initTemplate(tableIdx: number, fileName: string, columnNames: string[]) {
+  initTemplate(tableIdx: number, tn: string, columnNames: string[]) {
     const columnNameRowExist = +columnNames.every((v: any) => v === null || typeof v === 'string')
     const columnNamePrefixRef: Record<string, any> = { id: 0 }
-    const tn = fileName.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
 
     this.project.tables.push({
       table_name: tn,
@@ -156,6 +156,7 @@ export default class CSVTemplateAdapter {
       } else {
         this.project.tables[tableIdx].columns[columnIdx].uidt = this.getMaxPossibleUidt(columnIdx)
       }
+      delete this.columnValues[columnIdx]
     }
   }
 
@@ -163,13 +164,14 @@ export default class CSVTemplateAdapter {
     const that = this
     for (const [tableIdx, file] of this.files.entries()) {
       let steppers = 0
+      const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
       parse(file.originFileObj as File, {
         worker: true,
         step(row) {
           steppers += 1
           if (row) {
             if (steppers === 1) {
-              that.initTemplate(tableIdx, file.name!, row.data as [])
+              that.initTemplate(tableIdx, tn, row.data as [])
             } else {
               that.detectColumnType(row.data as [])
             }
@@ -197,7 +199,7 @@ export default class CSVTemplateAdapter {
   }
 
   getData() {
-    // return this.data
+    return this.data
   }
 
   getTemplate() {

From e2925fe06e86a1e8bc30bbe2160c3edfef90fa96 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 14:59:45 +0800
Subject: [PATCH 020/117] feat(nc-gui): add csvTemplateAdapter getData logic

---
 .../utils/parsers/CSVTemplateAdapter.ts       | 45 +++++++++++++++++--
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 9349c679c6..7daa904262 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -3,6 +3,7 @@ import type { UploadFile } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import {
   extractMultiOrSingleSelectProps,
+  getCheckboxValue,
   isCheckboxType,
   isDecimalType,
   isEmailType,
@@ -175,10 +176,6 @@ export default class CSVTemplateAdapter {
             } else {
               that.detectColumnType(row.data as [])
             }
-            // TODO(import): remove
-            if (steppers <= 10) {
-              console.log('Row:', row.data)
-            }
           }
         },
         complete() {
@@ -199,6 +196,46 @@ export default class CSVTemplateAdapter {
   }
 
   getData() {
+    const that = this
+    for (const [tableIdx, file] of this.files.entries()) {
+      let steppers = 0
+      const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
+      this.data[tn] = []
+      parse(file.originFileObj as File, {
+        worker: true,
+        step(row) {
+          steppers += 1
+          if (row && steppers >= 2) {
+            const rowData: Record<string, any> = {}
+            for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
+              const column = that.project.tables[tableIdx].columns[columnIdx]
+              const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
+              if (column.uidt === UITypes.Checkbox) {
+                // TODO(import): check type
+                // rowData[column.column_name] = getCheckboxValue(+data)
+                rowData[column.column_name] = data
+              } else if (column.uidt === UITypes.Currency) {
+                rowData[column.column_name] = data
+              } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
+                rowData[column.column_name] = (data || '').toString().trim() || null
+              } else if (column.uidt === UITypes.Date) {
+                // TODO(import): check format
+                rowData[column.column_name] = data
+              } else {
+                // TODO(import): do parsing if necessary based on type
+                rowData[column.column_name] = data
+              }
+            }
+            that.data[tn].push(rowData)
+          }
+        },
+        complete() {
+          console.log('getData(): complete')
+          console.log(`getData(): steppers: ${steppers}`)
+          console.log(that.data[tn])
+        },
+      })
+    }
     return this.data
   }
 

From a8640df6a90e867782f682993ad0c14f1f83681e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 16:20:25 +0800
Subject: [PATCH 021/117] fix(nc-gui): revise getCheckboxValue type

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 3 +--
 packages/nc-gui/utils/parsers/parserHelpers.ts      | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 7daa904262..6b402ed555 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -211,8 +211,7 @@ export default class CSVTemplateAdapter {
               const column = that.project.tables[tableIdx].columns[columnIdx]
               const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
               if (column.uidt === UITypes.Checkbox) {
-                // TODO(import): check type
-                // rowData[column.column_name] = getCheckboxValue(+data)
+                rowData[column.column_name] = getCheckboxValue(data)
                 rowData[column.column_name] = data
               } else if (column.uidt === UITypes.Currency) {
                 rowData[column.column_name] = data
diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index 3b308467f6..4653c0365f 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -41,7 +41,7 @@ export const isCheckboxType: any = (values: [], col = null) => {
   return options
 }
 
-export const getCheckboxValue = (value: number) => {
+export const getCheckboxValue = (value: any) => {
   return value && aggBooleanOptions[value]
 }
 

From e82ddb0966106d726a986fdbca193b0e154148af Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 19:40:21 +0800
Subject: [PATCH 022/117] feat(nc-gui): handle datetime logic for import

---
 .../utils/parsers/CSVTemplateAdapter.ts       | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 6b402ed555..db281e92b6 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -4,6 +4,7 @@ import { UITypes } from 'nocodb-sdk'
 import {
   extractMultiOrSingleSelectProps,
   getCheckboxValue,
+  getDateFormat,
   isCheckboxType,
   isDecimalType,
   isEmailType,
@@ -85,7 +86,7 @@ export default class CSVTemplateAdapter {
     return UITypes.SingleLineText
   }
 
-  detectColumnType(data: []) {
+  detectColumnType(tableIdx: number, data: []) {
     for (let columnIdx = 0; columnIdx < data.length; columnIdx++) {
       const colData: any = [data[columnIdx]]
       const colProps = { uidt: this.detectInitialUidt(data[columnIdx]) }
@@ -107,6 +108,7 @@ export default class CSVTemplateAdapter {
             if (data[columnIdx] && columnIdx < this.config.maxRowsToParse) {
               this.columnValues[columnIdx].push(data[columnIdx])
             }
+            colProps.uidt = UITypes.SingleSelect
           }
         }
       } else if (colProps.uidt === UITypes.Number) {
@@ -125,6 +127,8 @@ export default class CSVTemplateAdapter {
         }
       }
       this.detectedColumnTypes[columnIdx][colProps.uidt] += 1
+      this.project.tables[tableIdx].columns[columnIdx].uidt = colProps.uidt
+
       if (data[columnIdx]) {
         this.distinctValues[columnIdx].add(data[columnIdx])
       }
@@ -146,14 +150,29 @@ export default class CSVTemplateAdapter {
   updateTemplate(tableIdx: number) {
     for (let columnIdx = 0; columnIdx < this.headers[tableIdx].length; columnIdx++) {
       if (this.columnValues[columnIdx].length > 0) {
-        if (this.project.tables[tableIdx].columns[columnIdx].uidt === UITypes.DateTime) {
-          // TODO(import): handle DateTime
-          // set meta
+        const uidt = this.project.tables[tableIdx].columns[columnIdx].uidt
+        if (uidt === UITypes.DateTime) {
+          const dateFormat: Record<string, number> = {}
+          if (
+            this.columnValues[columnIdx].slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
+              const isDate = v.split(' ').length === 1
+              if (isDate) {
+                dateFormat[getDateFormat(v)] = (dateFormat[getDateFormat(v)] || 0) + 1
+              }
+              return isDate
+            })
+          ) {
+            this.project.tables[tableIdx].columns[columnIdx].uidt = UITypes.Date
+            // take the date format with the max occurrence
+            this.project.tables[tableIdx].columns[columnIdx].meta.date_format =
+              Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
+          }
+        } else if (uidt === UITypes.SingleSelect || uidt === UITypes.MultiSelect) {
+          Object.assign(
+            this.project.tables[tableIdx].columns[columnIdx],
+            extractMultiOrSingleSelectProps(this.columnValues[columnIdx]),
+          )
         }
-        Object.assign(
-          this.project.tables[tableIdx].columns[columnIdx],
-          extractMultiOrSingleSelectProps(this.columnValues[columnIdx]),
-        )
       } else {
         this.project.tables[tableIdx].columns[columnIdx].uidt = this.getMaxPossibleUidt(columnIdx)
       }
@@ -174,7 +193,7 @@ export default class CSVTemplateAdapter {
             if (steppers === 1) {
               that.initTemplate(tableIdx, tn, row.data as [])
             } else {
-              that.detectColumnType(row.data as [])
+              that.detectColumnType(tableIdx, row.data as [])
             }
           }
         },

From 8b82b8a15ea665fc6f9ba6520a93155d3fc73fda Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 18 Oct 2022 20:21:45 +0800
Subject: [PATCH 023/117] fix(nc-gui): single select detection & select type

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index db281e92b6..9c82a766eb 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -107,8 +107,8 @@ export default class CSVTemplateAdapter {
           } else {
             if (data[columnIdx] && columnIdx < this.config.maxRowsToParse) {
               this.columnValues[columnIdx].push(data[columnIdx])
+              colProps.uidt = UITypes.SingleSelect
             }
-            colProps.uidt = UITypes.SingleSelect
           }
         }
       } else if (colProps.uidt === UITypes.Number) {
@@ -168,6 +168,9 @@ export default class CSVTemplateAdapter {
               Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
           }
         } else if (uidt === UITypes.SingleSelect || uidt === UITypes.MultiSelect) {
+          // assume it is a SingleLineText first
+          this.project.tables[tableIdx].columns[columnIdx].uidt = UITypes.SingleLineText
+          // override with UITypes.SingleSelect or UITypes.MultiSelect if applicable
           Object.assign(
             this.project.tables[tableIdx].columns[columnIdx],
             extractMultiOrSingleSelectProps(this.columnValues[columnIdx]),

From 5a4efd58d8431c7ce5f99882ac229c51982d6473 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 11:48:29 +0800
Subject: [PATCH 024/117] fix(nc-gui): csv import column detection logic

---
 .../utils/parsers/CSVTemplateAdapter.ts       | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 9c82a766eb..3f545eb0c6 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -127,7 +127,6 @@ export default class CSVTemplateAdapter {
         }
       }
       this.detectedColumnTypes[columnIdx][colProps.uidt] += 1
-      this.project.tables[tableIdx].columns[columnIdx].uidt = colProps.uidt
 
       if (data[columnIdx]) {
         this.distinctValues[columnIdx].add(data[columnIdx])
@@ -135,22 +134,23 @@ export default class CSVTemplateAdapter {
     }
   }
 
-  getMaxPossibleUidt(columnIdx: number) {
-    let mx = -1
-    let key: string = UITypes.SingleLineText
-    Object.entries(this.detectedColumnTypes[columnIdx]).forEach(([k, v]) => {
-      if (v > mx) {
-        mx = v
-        key = k
+  getPossibleUidt(columnIdx: number) {
+    // if there are multiple detected column types
+    // then return either LongText or SingleLineText
+    if (Object.keys(this.detectedColumnTypes[columnIdx]).length > 1) {
+      if (UITypes.LongText in this.detectedColumnTypes[columnIdx]) {
+        return UITypes.LongText
       }
-    })
-    return key
+      return UITypes.SingleLineText
+    }
+    // otherwise, all records have the same column type
+    return Object.keys(this.detectedColumnTypes[columnIdx])[0]
   }
 
   updateTemplate(tableIdx: number) {
     for (let columnIdx = 0; columnIdx < this.headers[tableIdx].length; columnIdx++) {
+      const uidt = this.getPossibleUidt(columnIdx)
       if (this.columnValues[columnIdx].length > 0) {
-        const uidt = this.project.tables[tableIdx].columns[columnIdx].uidt
         if (uidt === UITypes.DateTime) {
           const dateFormat: Record<string, number> = {}
           if (
@@ -176,10 +176,10 @@ export default class CSVTemplateAdapter {
             extractMultiOrSingleSelectProps(this.columnValues[columnIdx]),
           )
         }
+        delete this.columnValues[columnIdx]
       } else {
-        this.project.tables[tableIdx].columns[columnIdx].uidt = this.getMaxPossibleUidt(columnIdx)
+        this.project.tables[tableIdx].columns[columnIdx].uidt = uidt
       }
-      delete this.columnValues[columnIdx]
     }
   }
 
@@ -204,7 +204,6 @@ export default class CSVTemplateAdapter {
           console.log('complete')
           console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
-          console.log(that.project.tables)
           // TODO(import): enable import button
           // TODO(import): put info.file.originFileObj to list
           callback()

From 3f435a1baefb1f29ecfc38ae9bdd81962d23bd98 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 13:06:04 +0800
Subject: [PATCH 025/117] fix(nc-gui): import DateTime & Date detection logic

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 3f545eb0c6..e36a2dbe43 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -10,6 +10,7 @@ import {
   isEmailType,
   isMultiLineTextType,
   isUrlType,
+  validateDateWithUnknownFormat,
 } from '#imports'
 
 export default class CSVTemplateAdapter {
@@ -81,13 +82,15 @@ export default class CSVTemplateAdapter {
 
   detectInitialUidt(v: string) {
     if (!isNaN(Number(v)) && !isNaN(parseFloat(v))) return UITypes.Number
-    if (!isNaN(new Date(v).getDate())) return UITypes.DateTime
+    if (validateDateWithUnknownFormat(v)) return UITypes.DateTime
     if (['true', 'True', 'false', 'False', '1', '0', 'T', 'F', 'Y', 'N'].includes(v)) return UITypes.Checkbox
     return UITypes.SingleLineText
   }
 
   detectColumnType(tableIdx: number, data: []) {
     for (let columnIdx = 0; columnIdx < data.length; columnIdx++) {
+      // skip null data
+      if (!data[columnIdx]) continue
       const colData: any = [data[columnIdx]]
       const colProps = { uidt: this.detectInitialUidt(data[columnIdx]) }
       // TODO(import): centralise
@@ -135,6 +138,11 @@ export default class CSVTemplateAdapter {
   }
 
   getPossibleUidt(columnIdx: number) {
+    const len = Object.keys(this.detectedColumnTypes[columnIdx]).length
+    // all records are null
+    if (len == 0) {
+      return UITypes.SingleLineText
+    }
     // if there are multiple detected column types
     // then return either LongText or SingleLineText
     if (Object.keys(this.detectedColumnTypes[columnIdx]).length > 1) {
@@ -166,6 +174,9 @@ export default class CSVTemplateAdapter {
             // take the date format with the max occurrence
             this.project.tables[tableIdx].columns[columnIdx].meta.date_format =
               Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
+          } else {
+            // Datetime
+            this.project.tables[tableIdx].columns[columnIdx].uidt = uidt
           }
         } else if (uidt === UITypes.SingleSelect || uidt === UITypes.MultiSelect) {
           // assume it is a SingleLineText first

From a9e272e0744624aad82f2ddd855af64a3bcaa6ac Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 13:40:40 +0800
Subject: [PATCH 026/117] feat(nc-gui): import numeric detection logic

---
 .../nc-gui/utils/parsers/CSVTemplateAdapter.ts     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index e36a2dbe43..4e2b035da7 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -143,6 +143,17 @@ export default class CSVTemplateAdapter {
     if (len == 0) {
       return UITypes.SingleLineText
     }
+    // handle numeric case
+    if (
+      Object.keys(this.detectedColumnTypes[columnIdx]).length == 2 &&
+      UITypes.Number in this.detectedColumnTypes[columnIdx] &&
+      UITypes.Decimal in this.detectedColumnTypes[columnIdx]
+    ) {
+      if (this.detectedColumnTypes[columnIdx][UITypes.Number] > this.detectedColumnTypes[columnIdx][UITypes.Decimal]) {
+        return UITypes.Number
+      }
+      return UITypes.Decimal
+    }
     // if there are multiple detected column types
     // then return either LongText or SingleLineText
     if (Object.keys(this.detectedColumnTypes[columnIdx]).length > 1) {
@@ -215,8 +226,6 @@ export default class CSVTemplateAdapter {
           console.log('complete')
           console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
-          // TODO(import): enable import button
-          // TODO(import): put info.file.originFileObj to list
           callback()
         },
       })
@@ -263,7 +272,6 @@ export default class CSVTemplateAdapter {
         complete() {
           console.log('getData(): complete')
           console.log(`getData(): steppers: ${steppers}`)
-          console.log(that.data[tn])
         },
       })
     }

From 6c7d5e05949d5f2b6a3268dfac172cfb15b6e866 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 13:44:08 +0800
Subject: [PATCH 027/117] refactor(nc-gui): getPossibleUidt function

---
 .../nc-gui/utils/parsers/CSVTemplateAdapter.ts  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 4e2b035da7..db0760e8aa 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -138,32 +138,29 @@ export default class CSVTemplateAdapter {
   }
 
   getPossibleUidt(columnIdx: number) {
-    const len = Object.keys(this.detectedColumnTypes[columnIdx]).length
+    const detectedColTypes = this.detectedColumnTypes[columnIdx]
+    const len = Object.keys(detectedColTypes).length
     // all records are null
     if (len == 0) {
       return UITypes.SingleLineText
     }
     // handle numeric case
-    if (
-      Object.keys(this.detectedColumnTypes[columnIdx]).length == 2 &&
-      UITypes.Number in this.detectedColumnTypes[columnIdx] &&
-      UITypes.Decimal in this.detectedColumnTypes[columnIdx]
-    ) {
-      if (this.detectedColumnTypes[columnIdx][UITypes.Number] > this.detectedColumnTypes[columnIdx][UITypes.Decimal]) {
+    if (len == 2 && UITypes.Number in detectedColTypes && UITypes.Decimal in detectedColTypes) {
+      if (detectedColTypes[UITypes.Number] > detectedColTypes[UITypes.Decimal]) {
         return UITypes.Number
       }
       return UITypes.Decimal
     }
     // if there are multiple detected column types
     // then return either LongText or SingleLineText
-    if (Object.keys(this.detectedColumnTypes[columnIdx]).length > 1) {
-      if (UITypes.LongText in this.detectedColumnTypes[columnIdx]) {
+    if (len > 1) {
+      if (UITypes.LongText in detectedColTypes) {
         return UITypes.LongText
       }
       return UITypes.SingleLineText
     }
     // otherwise, all records have the same column type
-    return Object.keys(this.detectedColumnTypes[columnIdx])[0]
+    return Object.keys(detectedColTypes)[0]
   }
 
   updateTemplate(tableIdx: number) {

From 7f01c9b7387a01cc814588e56734cbe9bb38d29b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 14:20:20 +0800
Subject: [PATCH 028/117] feat(nc-gui): prevent uploading files greater than
 5MB

---
 packages/nc-gui/components/dlg/QuickImport.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index a0b47e6ddb..0e38ffb281 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
+import { Upload } from 'ant-design-vue'
 import {
   CSVTemplateAdapter,
   ExcelTemplateAdapter,
@@ -244,8 +245,7 @@ function rejectDrop(fileList: UploadFile[]) {
 
 function handleChange(info: UploadChangeParam) {
   const status = info.file.status
-
-  if (status !== 'uploading' && status !== 'removed') {
+  if (status && status !== 'uploading' && status !== 'removed') {
     // const reader = new FileReader()
     // reader.onload = (e: ProgressEvent<FileReader>) => {
     //   const target = importState.fileList.find((f) => f.uid === info.file.uid)
@@ -272,8 +272,6 @@ function handleChange(info: UploadChangeParam) {
         status: 'done',
       })
     }
-    console.log(info)
-    console.log(importState.fileList)
   }
 
   if (status === 'done') {
@@ -341,6 +339,15 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
   })
   customReqArgs.onSuccess()
 }
+
+/** check if the file size exceeds the limit */
+const beforeUpload = (file: UploadFile) => {
+  const exceedLimit = file.size! / 1024 / 1024 > 5
+  if (exceedLimit) {
+    message.error(`File ${file.name} is too big. The accepted file size is less than 5MB.`)
+  }
+  return !exceedLimit || Upload.LIST_IGNORE
+}
 </script>
 
 <template>
@@ -387,6 +394,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
                   :max-count="1"
                   list-type="picture"
                   :custom-request="customReqCbk"
+                  :before-upload="beforeUpload"
                   @change="handleChange"
                   @reject="rejectDrop"
                 >

From 33406498e7a3a65eee032dc0dc89c74f09da2530 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 14:21:39 +0800
Subject: [PATCH 029/117] fix(nc-gui): lint issues, remove worker & add
 skipEmptyLines

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index db0760e8aa..1f5a43a557 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -141,11 +141,11 @@ export default class CSVTemplateAdapter {
     const detectedColTypes = this.detectedColumnTypes[columnIdx]
     const len = Object.keys(detectedColTypes).length
     // all records are null
-    if (len == 0) {
+    if (len === 0) {
       return UITypes.SingleLineText
     }
     // handle numeric case
-    if (len == 2 && UITypes.Number in detectedColTypes && UITypes.Decimal in detectedColTypes) {
+    if (len === 2 && UITypes.Number in detectedColTypes && UITypes.Decimal in detectedColTypes) {
       if (detectedColTypes[UITypes.Number] > detectedColTypes[UITypes.Decimal]) {
         return UITypes.Number
       }
@@ -170,7 +170,7 @@ export default class CSVTemplateAdapter {
         if (uidt === UITypes.DateTime) {
           const dateFormat: Record<string, number> = {}
           if (
-            this.columnValues[columnIdx].slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
+            this.columnValues[columnIdx].slice(1, this.config.maxRowsToParse).every((v: any) => {
               const isDate = v.split(' ').length === 1
               if (isDate) {
                 dateFormat[getDateFormat(v)] = (dateFormat[getDateFormat(v)] || 0) + 1
@@ -208,7 +208,7 @@ export default class CSVTemplateAdapter {
       let steppers = 0
       const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
       parse(file.originFileObj as File, {
-        worker: true,
+        skipEmptyLines: 'greedy',
         step(row) {
           steppers += 1
           if (row) {

From 0de099c618d41a9b426cbc4dc1d116ac7df10011 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 16:37:06 +0800
Subject: [PATCH 030/117] feat(nc-gui): create dummy column names when header
 is not available

---
 .../nc-gui/utils/parsers/CSVTemplateAdapter.ts    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 1f5a43a557..e8025c7199 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -29,6 +29,7 @@ export default class CSVTemplateAdapter {
   constructor(files: UploadFile[], parserConfig = {}) {
     this.config = {
       maxRowsToParse: 500,
+      firstRowAsHeaders: true,
       ...parserConfig,
     }
     this.files = files
@@ -213,7 +214,19 @@ export default class CSVTemplateAdapter {
           steppers += 1
           if (row) {
             if (steppers === 1) {
-              that.initTemplate(tableIdx, tn, row.data as [])
+              if (that.config.header) {
+                // row.data is header
+                that.initTemplate(tableIdx, tn, row.data as [])
+              } else {
+                // use dummy column names as header
+                that.initTemplate(
+                  tableIdx,
+                  tn,
+                  [...Array((row.data as []).length)].map((_, i) => `column${i + 1}`),
+                )
+                // row.data is data
+                that.detectColumnType(tableIdx, row.data as [])
+              }
             } else {
               that.detectColumnType(tableIdx, row.data as [])
             }

From e843e1d9f67dae198d3b351c020ac2792bb5dd20 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 16:37:53 +0800
Subject: [PATCH 031/117] feat(nc-gui): add auto-select field types & use first
 row as headers checkbox

---
 .../nc-gui/components/dlg/QuickImport.vue     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 0e38ffb281..2f24557d4b 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -68,6 +68,8 @@ const importState = reactive({
   parserConfig: {
     maxRowsToParse: 500,
     normalizeNested: true,
+    autoSelectFieldTypes: true,
+    firstRowAsHeaders: true,
     importData: true,
   },
 })
@@ -446,21 +448,33 @@ const beforeUpload = (file: UploadFile) => {
           <a-divider />
 
           <div class="mb-4">
-            <!--          Advanced Settings -->
+            <!-- Advanced Settings -->
             <span class="prose-lg">{{ $t('title.advancedSettings') }}</span>
 
-            <a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
+            <a-form-item class="!my-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
               <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
             </a-form-item>
 
-            <!--          Flatten nested -->
+            <a-form-item v-if="isImportTypeCsv" class="!my-2">
+              <a-checkbox v-model:checked="importState.parserConfig.autoSelectFieldTypes">
+                <span class="caption">Auto-Select Field Types</span>
+              </a-checkbox>
+            </a-form-item>
+
+            <a-form-item v-if="isImportTypeCsv" class="!my-2">
+              <a-checkbox v-model:checked="importState.parserConfig.firstRowAsHeaders">
+                <span class="caption">Use First Row as Headers</span>
+              </a-checkbox>
+            </a-form-item>
+
+            <!-- Flatten nested -->
             <div v-if="isImportTypeJson" class="mt-3">
               <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
                 <span class="caption">{{ $t('labels.flattenNested') }}</span>
               </a-checkbox>
             </div>
 
-            <!--          Import Data -->
+            <!-- Import Data -->
             <div v-if="isImportTypeJson" class="mt-4">
               <a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox>
             </div>

From 5c14090e4d8c3eabef848a040a98a202f318254a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 17:00:37 +0800
Subject: [PATCH 032/117] feat(nc-gui): add detectColumnType logic

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index e8025c7199..0861c81e63 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -29,6 +29,7 @@ export default class CSVTemplateAdapter {
   constructor(files: UploadFile[], parserConfig = {}) {
     this.config = {
       maxRowsToParse: 500,
+      autoSelectFieldTypes: true,
       firstRowAsHeaders: true,
       ...parserConfig,
     }
@@ -224,11 +225,16 @@ export default class CSVTemplateAdapter {
                   tn,
                   [...Array((row.data as []).length)].map((_, i) => `column${i + 1}`),
                 )
+                if (that.config.autoSelectFieldTypes) {
+                  // row.data is data
+                  that.detectColumnType(tableIdx, row.data as [])
+                }
+              }
+            } else {
+              if (that.config.autoSelectFieldTypes) {
                 // row.data is data
                 that.detectColumnType(tableIdx, row.data as [])
               }
-            } else {
-              that.detectColumnType(tableIdx, row.data as [])
             }
           }
         },

From e8c904bdba8a8fe5cc4dabec7867700857356536 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 17:16:56 +0800
Subject: [PATCH 033/117] fix(nc-gui): header -> firstRowAsHeaders

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 0861c81e63..e65875e19a 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -215,7 +215,7 @@ export default class CSVTemplateAdapter {
           steppers += 1
           if (row) {
             if (steppers === 1) {
-              if (that.config.header) {
+              if (that.config.firstRowAsHeaders) {
                 // row.data is header
                 that.initTemplate(tableIdx, tn, row.data as [])
               } else {

From aa31a9320a33debf5eafc6ea82c7b9be5e2712bc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 17:24:17 +0800
Subject: [PATCH 034/117] fix(nc-gui): correct insert data starting row

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index e65875e19a..7f46192e4e 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -262,7 +262,7 @@ export default class CSVTemplateAdapter {
         worker: true,
         step(row) {
           steppers += 1
-          if (row && steppers >= 2) {
+          if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
             const rowData: Record<string, any> = {}
             for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
               const column = that.project.tables[tableIdx].columns[columnIdx]

From cc05d4b5c1427b7102d28483379e99479b6cd657 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 17:34:33 +0800
Subject: [PATCH 035/117] fix(nc-gui): take data[col.column_name] for import

---
 packages/nc-gui/components/template/Editor.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index dbf6dabfed..a49f0ab0dd 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -227,7 +227,7 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
   const dateFormatMap: Record<number, string> = {}
   return batchData.map((data) =>
     (columns || []).reduce((aggObj, col: Record<string, any>) => {
-      let d = data[col.ref_column_name || col.column_name]
+      let d = data[col.column_name || col.ref_column_name]
       if (col.uidt === UITypes.Date && d) {
         let dateFormat
         if (col?.meta?.date_format) {
@@ -242,13 +242,13 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
         d = dayjs(d).utc().format(dateFormat)
       } else if (col.uidt === UITypes.DateTime && d) {
         // TODO: handle more formats for DateTime
-        d = dayjs(data[col.ref_column_name || col.column_name])
+        d = dayjs(data[col.column_name || col.ref_column_name])
           .utc()
           .format('YYYY-MM-DD HH:mm')
       }
       return {
         ...aggObj,
-        [col.column_name]: d,
+        [col.column_name || col.ref_column_name]: d,
       }
     }, {}),
   )

From 6ad264c90283471f75de45dff05d2b6600edfcb2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 22:44:31 +0800
Subject: [PATCH 036/117] feat(nc-gui): add importFileList &
 streamImportFileList types

---
 packages/nc-gui/lib/types.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 127e811491..44adc68d73 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -1,6 +1,7 @@
 import type { FilterType, ViewTypes } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
+import type { UploadFile } from 'ant-design-vue'
 import type { ProjectRole, Role, TabType } from './enums'
 import type { rolePermissions } from './constants'
 
@@ -94,3 +95,7 @@ export interface SharedView {
   type?: ViewTypes
   meta: SharedViewMeta
 }
+
+export type importFileList = (UploadFile & { data: string | ArrayBuffer })[]
+
+export type streamImportFileList = UploadFile[]

From bed7495a67b69c0e3912c4c27e71f594405321b4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Oct 2022 22:45:03 +0800
Subject: [PATCH 037/117] feat(nc-gui): cover old logic for non streaming
 import

---
 .../nc-gui/components/dlg/QuickImport.vue     | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 2f24557d4b..d81e0fbef0 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -22,6 +22,7 @@ import {
   useProject,
   useVModel,
 } from '#imports'
+import type { importFileList, streamImportFileList } from '~/lib'
 
 interface Props {
   modelValue: boolean
@@ -60,9 +61,7 @@ const isParsingData = ref(false)
 const useForm = Form.useForm
 
 const importState = reactive({
-  // TODO(import): remove
-  // fileList: [] as (UploadFile & { data: string | ArrayBuffer })[],
-  fileList: [] as UploadFile[],
+  fileList: [] as importFileList | streamImportFileList,
   url: '',
   jsonEditor: {},
   parserConfig: {
@@ -147,8 +146,11 @@ async function handlePreImport() {
   isParsingData.value = true
 
   if (activeKey.value === 'uploadTab') {
-    // TODO(import): update
-    await parseAndExtractData2(importState.fileList)
+    if (isImportTypeCsv) {
+      await parseAndExtractStreamData(importState.fileList as streamImportFileList)
+    } else {
+      await parseAndExtractData((importState.fileList as importFileList)[0].data)
+    }
   } else if (activeKey.value === 'urlTab') {
     try {
       await validate()
@@ -183,8 +185,7 @@ async function handleImport() {
   dialogShow.value = false
 }
 
-// papaparse experiment
-async function parseAndExtractData2(val: UploadFile[]) {
+async function parseAndExtractStreamData(val: UploadFile[]) {
   try {
     templateData.value = null
     importData.value = null
@@ -248,31 +249,32 @@ function rejectDrop(fileList: UploadFile[]) {
 function handleChange(info: UploadChangeParam) {
   const status = info.file.status
   if (status && status !== 'uploading' && status !== 'removed') {
-    // const reader = new FileReader()
-    // reader.onload = (e: ProgressEvent<FileReader>) => {
-    //   const target = importState.fileList.find((f) => f.uid === info.file.uid)
-    //   if (e.target && e.target.result) {
-    //     /** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */
-    //     if (target) {
-    //       target.data = e.target.result
-    //     } else if (!target) {
-    //       /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
-    //       importState.fileList.push({
-    //         ...info.file,
-    //         status: 'done',
-    //         data: e.target.result,
-    //       })
-    //     }
-    //   }
-    // }
-    // reader.readAsArrayBuffer(info.file.originFileObj!)
-
-    if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
-      /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
-      importState.fileList.push({
-        ...info.file,
-        status: 'done',
-      })
+    if (isImportTypeCsv) {
+      if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
+        ;(importState.fileList as streamImportFileList).push({
+          ...info.file,
+          status: 'done',
+        })
+      }
+    } else {
+      const reader = new FileReader()
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        const target = (importState.fileList as importFileList).find((f) => f.uid === info.file.uid)
+        if (e.target && e.target.result) {
+          /** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */
+          if (target) {
+            target.data = e.target.result
+          } else if (!target) {
+            /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
+            importState.fileList.push({
+              ...info.file,
+              status: 'done',
+              data: e.target.result,
+            })
+          }
+        }
+      }
+      reader.readAsArrayBuffer(info.file.originFileObj!)
     }
   }
 

From 1e533a018ff639037c318ed4a406d00d0bb5cd6c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 12:34:27 +0800
Subject: [PATCH 038/117] feat(nc-gui): add callback function in parse

---
 packages/nc-gui/utils/parsers/TemplateGenerator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/TemplateGenerator.ts b/packages/nc-gui/utils/parsers/TemplateGenerator.ts
index ad6ec3e317..836e26b27a 100644
--- a/packages/nc-gui/utils/parsers/TemplateGenerator.ts
+++ b/packages/nc-gui/utils/parsers/TemplateGenerator.ts
@@ -1,5 +1,5 @@
 export default class TemplateGenerator {
-  parse() {
+  parse(callback: Function) {
     throw new Error("'parse' method is not implemented")
   }
 

From 404374a9884044f8c9ca8851b7ebadfd6716170a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 12:35:21 +0800
Subject: [PATCH 039/117] fix(nc-gui): lint

---
 packages/nc-gui/utils/parsers/TemplateGenerator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/TemplateGenerator.ts b/packages/nc-gui/utils/parsers/TemplateGenerator.ts
index 836e26b27a..829fdad127 100644
--- a/packages/nc-gui/utils/parsers/TemplateGenerator.ts
+++ b/packages/nc-gui/utils/parsers/TemplateGenerator.ts
@@ -1,5 +1,5 @@
 export default class TemplateGenerator {
-  parse(callback: Function) {
+  parse(_: Function) {
     throw new Error("'parse' method is not implemented")
   }
 

From 2e11b200a3e39f338fbcc5262f54faa8c463c8ce Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 12:35:46 +0800
Subject: [PATCH 040/117] fix(nc-gui): column remap logic

---
 packages/nc-gui/components/template/Editor.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index a49f0ab0dd..f3fb974daa 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -227,7 +227,12 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
   const dateFormatMap: Record<number, string> = {}
   return batchData.map((data) =>
     (columns || []).reduce((aggObj, col: Record<string, any>) => {
-      let d = data[col.column_name || col.ref_column_name]
+      // for excel & json, if the column name is changed in TemplateEditor,
+      // then only col.column_name exists in data, else col.ref_column_name
+      // for csv, col.column_name always exists in data
+      // since it streams the data in getData() with the updated col.column_name
+      const key = col.column_name in data ? col.column_name : col.ref_column_name
+      let d = data[key]
       if (col.uidt === UITypes.Date && d) {
         let dateFormat
         if (col?.meta?.date_format) {
@@ -242,13 +247,11 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
         d = dayjs(d).utc().format(dateFormat)
       } else if (col.uidt === UITypes.DateTime && d) {
         // TODO: handle more formats for DateTime
-        d = dayjs(data[col.column_name || col.ref_column_name])
-          .utc()
-          .format('YYYY-MM-DD HH:mm')
+        d = dayjs(data[key]).utc().format('YYYY-MM-DD HH:mm')
       }
       return {
         ...aggObj,
-        [col.column_name || col.ref_column_name]: d,
+        [col.column_name]: d,
       }
     }, {}),
   )

From 9732debc4b2135a7b79ec4591f09255c8ba8fa9d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 12:36:20 +0800
Subject: [PATCH 041/117] feat(nc-gui): templateGenerator logic for excel &
 json

---
 .../nc-gui/components/dlg/QuickImport.vue     | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index d81e0fbef0..c7688c9e4d 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -146,7 +146,7 @@ async function handlePreImport() {
   isParsingData.value = true
 
   if (activeKey.value === 'uploadTab') {
-    if (isImportTypeCsv) {
+    if (isImportTypeCsv.value) {
       await parseAndExtractStreamData(importState.fileList as streamImportFileList)
     } else {
       await parseAndExtractData((importState.fileList as importFileList)[0].data)
@@ -161,10 +161,6 @@ async function handlePreImport() {
   } else if (activeKey.value === 'jsonEditorTab') {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor))
   }
-
-  // TODO(import):
-  preImportLoading.value = false
-  // isParsingData.value = false
 }
 
 async function handleImport() {
@@ -207,6 +203,7 @@ async function parseAndExtractStreamData(val: UploadFile[]) {
       // if (importOnly) importColumns.value = templateGenerator.getColumns()
       templateEditorModal.value = true
       isParsingData.value = false
+      preImportLoading.value = false
     })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -219,7 +216,7 @@ async function parseAndExtractData(val: string | ArrayBuffer) {
     importData.value = null
     importColumns.value = []
 
-    const templateGenerator = getAdapter(val)
+    templateGenerator = getAdapter(val)
 
     if (!templateGenerator) {
       message.error(t('msg.error.templateGeneratorNotFound'))
@@ -228,13 +225,13 @@ async function parseAndExtractData(val: string | ArrayBuffer) {
 
     await templateGenerator.init()
 
-    templateGenerator.parse(() => {})
-    templateData.value = templateGenerator.getTemplate()
-
-    // TODO(import): check
-    if (importOnly) importColumns.value = templateGenerator.getColumns()
-
-    templateEditorModal.value = true
+    templateGenerator.parse(() => {
+      templateData.value = templateGenerator!.getTemplate()
+      if (importOnly) importColumns.value = templateGenerator!.getColumns()
+      templateEditorModal.value = true
+      isParsingData.value = false
+      preImportLoading.value = false
+    })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -249,7 +246,7 @@ function rejectDrop(fileList: UploadFile[]) {
 function handleChange(info: UploadChangeParam) {
   const status = info.file.status
   if (status && status !== 'uploading' && status !== 'removed') {
-    if (isImportTypeCsv) {
+    if (isImportTypeCsv.value) {
       if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
         ;(importState.fileList as streamImportFileList).push({
           ...info.file,
@@ -308,7 +305,7 @@ function getAdapter(val: any) {
         // TODO(import): implement one for CSV
         return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
     }
-  } else if (IsImportTypeExcel.value || isImportTypeCsv.value) {
+  } else if (IsImportTypeExcel.value) {
     switch (activeKey.value) {
       case 'uploadTab':
         return new ExcelTemplateAdapter(val, importState.parserConfig)

From a2e515de5d714d453fd66edcbc00252ae0d266f1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 12:39:08 +0800
Subject: [PATCH 042/117] feat(nc-gui): add callback to excel parsing +
 refactor

---
 .../utils/parsers/ExcelTemplateAdapter.ts     | 354 +++++++++---------
 1 file changed, 173 insertions(+), 181 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index bc3ae723a5..53e7a05e00 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -3,12 +3,12 @@ import TemplateGenerator from './TemplateGenerator'
 import {
   extractMultiOrSingleSelectProps,
   getCheckboxValue,
+  getDateFormat,
   isCheckboxType,
   isEmailType,
   isMultiLineTextType,
   isUrlType,
-} from './parserHelpers'
-import { getDateFormat } from '~/utils'
+} from '#imports'
 
 const excelTypeToUidt: Record<string, UITypes> = {
   d: UITypes.DateTime,
@@ -58,200 +58,192 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       cellDates: true,
     }
 
-    // TODO(import): remove later
-    // if (this.name.slice(-3) === 'csv') {
-    //   this.wb = this.xlsx.read(new TextDecoder().decode(new Uint8Array(this.excelData)), {
-    //     type: 'string',
-    //     ...options,
-    //   })
-    // } else {
-    //   this.wb = this.xlsx.read(new Uint8Array(this.excelData), {
-    //     type: 'array',
-    //     ...options,
-    //   })
-    // }
     this.wb = this.xlsx.read(new Uint8Array(this.excelData), {
       type: 'array',
       ...options,
     })
   }
 
-  parse() {
+  parse(callback: Function) {
     const tableNamePrefixRef: Record<string, any> = {}
-
-    for (let i = 0; i < this.wb.SheetNames.length; i++) {
-      const columnNamePrefixRef: Record<string, any> = { id: 0 }
-      const sheet: any = this.wb.SheetNames[i]
-      let tn: string = (sheet || 'table').replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
-
-      while (tn in tableNamePrefixRef) {
-        tn = `${tn}${++tableNamePrefixRef[tn]}`
-      }
-      tableNamePrefixRef[tn] = 0
-
-      const table = { table_name: tn, ref_table_name: tn, columns: [] as any[] }
-      this.data[tn] = []
-      const ws: any = this.wb.Sheets[sheet]
-      const range = this.xlsx.utils.decode_range(ws['!ref'])
-      const rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
-
-      // TODO(import): remove later
-      // if (this.name.slice(-3) !== 'csv') {
-      //   // fix precision bug & timezone offset issues introduced by xlsx
-      //   const basedate = new Date(1899, 11, 30, 0, 0, 0)
-      //   // number of milliseconds since base date
-      //   const dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000
-      //   // number of milliseconds in a day
-      //   const day_ms = 24 * 60 * 60 * 1000
-      //   // handle date1904 property
-      //   const fixImportedDate = (date: Date) => {
-      //     const parsed = this.xlsx.SSF.parse_date_code((date.getTime() - dnthresh) / day_ms, {
-      //       date1904: this.wb.Workbook.WBProps.date1904,
-      //     })
-      //     return new Date(parsed.y, parsed.m, parsed.d, parsed.H, parsed.M, parsed.S)
-      //   }
-      //   // fix imported date
-      //   rows = rows.map((r: any) =>
-      //     r.map((v: any) => {
-      //       return v instanceof Date ? fixImportedDate(v) : v
-      //     }),
-      //   )
-      // }
-
-      const columnNameRowExist = +rows[0].every((v: any) => v === null || typeof v === 'string')
-
-      for (let col = 0; col < rows[0].length; col++) {
-        let cn: string = ((columnNameRowExist && rows[0] && rows[0][col] && rows[0][col].toString().trim()) || `field_${col + 1}`)
-          .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
-          .trim()
-
-        while (cn in columnNamePrefixRef) {
-          cn = `${cn}${++columnNamePrefixRef[cn]}`
-        }
-        columnNamePrefixRef[cn] = 0
-
-        const column: Record<string, any> = {
-          column_name: cn,
-          ref_column_name: cn,
-          meta: {},
-        }
-
-        const cellId = this.xlsx.utils.encode_cell({
-          c: range.s.c + col,
-          r: columnNameRowExist,
-        })
-        const cellProps = ws[cellId] || {}
-        column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
-
-        if (column.uidt === UITypes.SingleLineText) {
-          // check for long text
-          if (isMultiLineTextType(rows)) {
-            column.uidt = UITypes.LongText
-          }
-
-          if (isEmailType(rows)) {
-            column.uidt = UITypes.Email
-          }
-
-          if (isUrlType(rows)) {
-            column.uidt = UITypes.URL
-          } else {
-            const vals = rows
-              .slice(columnNameRowExist ? 1 : 0)
-              .map((r: any) => r[col])
-              .filter((v: any) => v !== null && v !== undefined && v.toString().trim() !== '')
-
-            const checkboxType = isCheckboxType(vals)
-            if (checkboxType.length === 1) {
-              column.uidt = UITypes.Checkbox
-            } else {
-              // Single Select / Multi Select
-              Object.assign(column, extractMultiOrSingleSelectProps(vals))
+    this.wb.SheetNames.reduce((acc: any, sheet: any) => {
+      return acc.then(
+        () =>
+          new Promise((resolve) => {
+            const columnNamePrefixRef: Record<string, any> = { id: 0 }
+            let tn: string = (sheet || 'table').replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
+
+            while (tn in tableNamePrefixRef) {
+              tn = `${tn}${++tableNamePrefixRef[tn]}`
             }
-          }
-        } else if (column.uidt === UITypes.Number) {
-          if (
-            rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
-              return v && v[col] && parseInt(v[col]) !== +v[col]
-            })
-          ) {
-            column.uidt = UITypes.Decimal
-          }
-          if (
-            rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
-              const cellId = this.xlsx.utils.encode_cell({
-                c: range.s.c + col,
-                r: i + columnNameRowExist,
+            tableNamePrefixRef[tn] = 0
+
+            const table = { table_name: tn, ref_table_name: tn, columns: [] as any[] }
+            this.data[tn] = []
+            const ws: any = this.wb.Sheets[sheet]
+            const range = this.xlsx.utils.decode_range(ws['!ref'])
+            let rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
+
+            // fix precision bug & timezone offset issues introduced by xlsx
+            const basedate = new Date(1899, 11, 30, 0, 0, 0)
+            // number of milliseconds since base date
+            const dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000
+            // number of milliseconds in a day
+            const day_ms = 24 * 60 * 60 * 1000
+            // handle date1904 property
+            const fixImportedDate = (date: Date) => {
+              const parsed = this.xlsx.SSF.parse_date_code((date.getTime() - dnthresh) / day_ms, {
+                date1904: this.wb.Workbook.WBProps.date1904,
               })
+              return new Date(parsed.y, parsed.m, parsed.d, parsed.H, parsed.M, parsed.S)
+            }
+            // fix imported date
+            rows = rows.map((r: any) =>
+              r.map((v: any) => {
+                return v instanceof Date ? fixImportedDate(v) : v
+              }),
+            )
+
+            const columnNameRowExist = +rows[0].every((v: any) => v === null || typeof v === 'string')
+
+            for (let col = 0; col < rows[0].length; col++) {
+              let cn: string = (
+                (columnNameRowExist && rows[0] && rows[0][col] && rows[0][col].toString().trim()) ||
+                `field_${col + 1}`
+              )
+                .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
+                .trim()
+
+              while (cn in columnNamePrefixRef) {
+                cn = `${cn}${++columnNamePrefixRef[cn]}`
+              }
+              columnNamePrefixRef[cn] = 0
+
+              const column: Record<string, any> = {
+                column_name: cn,
+                ref_column_name: cn,
+                meta: {},
+              }
 
-              const cellObj = ws[cellId]
-
-              return !cellObj || (cellObj.w && cellObj.w.startsWith('$'))
-            })
-          ) {
-            column.uidt = UITypes.Currency
-          }
-        } else if (column.uidt === UITypes.DateTime) {
-          // TODO(import): centralise
-          // hold the possible date format found in the date
-          const dateFormat: Record<string, number> = {}
-          if (
-            rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
               const cellId = this.xlsx.utils.encode_cell({
                 c: range.s.c + col,
-                r: i + columnNameRowExist,
+                r: columnNameRowExist,
               })
+              const cellProps = ws[cellId] || {}
+              column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
+
+              if (column.uidt === UITypes.SingleLineText) {
+                // check for long text
+                if (isMultiLineTextType(rows)) {
+                  column.uidt = UITypes.LongText
+                }
+
+                if (isEmailType(rows)) {
+                  column.uidt = UITypes.Email
+                }
+
+                if (isUrlType(rows)) {
+                  column.uidt = UITypes.URL
+                } else {
+                  const vals = rows
+                    .slice(columnNameRowExist ? 1 : 0)
+                    .map((r: any) => r[col])
+                    .filter((v: any) => v !== null && v !== undefined && v.toString().trim() !== '')
+
+                  const checkboxType = isCheckboxType(vals)
+                  if (checkboxType.length === 1) {
+                    column.uidt = UITypes.Checkbox
+                  } else {
+                    // Single Select / Multi Select
+                    Object.assign(column, extractMultiOrSingleSelectProps(vals))
+                  }
+                }
+              } else if (column.uidt === UITypes.Number) {
+                if (
+                  rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
+                    return v && v[col] && parseInt(v[col]) !== +v[col]
+                  })
+                ) {
+                  column.uidt = UITypes.Decimal
+                }
+                if (
+                  rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
+                    const cellId = this.xlsx.utils.encode_cell({
+                      c: range.s.c + col,
+                      r: i + columnNameRowExist,
+                    })
+
+                    const cellObj = ws[cellId]
+
+                    return !cellObj || (cellObj.w && cellObj.w.startsWith('$'))
+                  })
+                ) {
+                  column.uidt = UITypes.Currency
+                }
+              } else if (column.uidt === UITypes.DateTime) {
+                // TODO(import): centralise
+                // hold the possible date format found in the date
+                const dateFormat: Record<string, number> = {}
+                if (
+                  rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
+                    const cellId = this.xlsx.utils.encode_cell({
+                      c: range.s.c + col,
+                      r: i + columnNameRowExist,
+                    })
+
+                    const cellObj = ws[cellId]
+                    const isDate = !cellObj || (cellObj.w && cellObj.w.split(' ').length === 1)
+                    if (isDate && cellObj) {
+                      dateFormat[getDateFormat(cellObj.w)] = (dateFormat[getDateFormat(cellObj.w)] || 0) + 1
+                    }
+                    return isDate
+                  })
+                ) {
+                  column.uidt = UITypes.Date
+                  // take the date format with the max occurrence
+                  column.meta.date_format =
+                    Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
+                }
+              }
+              table.columns.push(column)
+            }
 
-              const cellObj = ws[cellId]
-              const isDate = !cellObj || (cellObj.w && cellObj.w.split(' ').length === 1)
-              if (isDate && cellObj) {
-                dateFormat[getDateFormat(cellObj.w)] = (dateFormat[getDateFormat(cellObj.w)] || 0) + 1
+            let rowIndex = 0
+            for (const row of rows.slice(1)) {
+              const rowData: Record<string, any> = {}
+              for (let i = 0; i < table.columns.length; i++) {
+                if (table.columns[i].uidt === UITypes.Checkbox) {
+                  rowData[table.columns[i].column_name] = getCheckboxValue(row[i])
+                } else if (table.columns[i].uidt === UITypes.Currency) {
+                  const cellId = this.xlsx.utils.encode_cell({
+                    c: range.s.c + i,
+                    r: rowIndex + columnNameRowExist,
+                  })
+
+                  const cellObj = ws[cellId]
+                  rowData[table.columns[i].column_name] = (cellObj && cellObj.w && cellObj.w.replace(/[^\d.]+/g, '')) || row[i]
+                } else if (table.columns[i].uidt === UITypes.SingleSelect || table.columns[i].uidt === UITypes.MultiSelect) {
+                  rowData[table.columns[i].column_name] = (row[i] || '').toString().trim() || null
+                } else if (table.columns[i].uidt === UITypes.Date) {
+                  const cellId = this.xlsx.utils.encode_cell({
+                    c: range.s.c + i,
+                    r: rowIndex + columnNameRowExist,
+                  })
+                  const cellObj = ws[cellId]
+                  rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
+                } else {
+                  // toto: do parsing if necessary based on type
+                  rowData[table.columns[i].column_name] = row[i]
+                }
               }
-              return isDate
-            })
-          ) {
-            column.uidt = UITypes.Date
-            // take the date format with the max occurrence
-            column.meta.date_format =
-              Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
-          }
-        }
-        table.columns.push(column)
-      }
-
-      let rowIndex = 0
-      for (const row of rows.slice(1)) {
-        const rowData: Record<string, any> = {}
-        for (let i = 0; i < table.columns.length; i++) {
-          if (table.columns[i].uidt === UITypes.Checkbox) {
-            rowData[table.columns[i].column_name] = getCheckboxValue(row[i])
-          } else if (table.columns[i].uidt === UITypes.Currency) {
-            const cellId = this.xlsx.utils.encode_cell({
-              c: range.s.c + i,
-              r: rowIndex + columnNameRowExist,
-            })
-
-            const cellObj = ws[cellId]
-            rowData[table.columns[i].column_name] = (cellObj && cellObj.w && cellObj.w.replace(/[^\d.]+/g, '')) || row[i]
-          } else if (table.columns[i].uidt === UITypes.SingleSelect || table.columns[i].uidt === UITypes.MultiSelect) {
-            rowData[table.columns[i].column_name] = (row[i] || '').toString().trim() || null
-          } else if (table.columns[i].uidt === UITypes.Date) {
-            const cellId = this.xlsx.utils.encode_cell({
-              c: range.s.c + i,
-              r: rowIndex + columnNameRowExist,
-            })
-            const cellObj = ws[cellId]
-            rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
-          } else {
-            // toto: do parsing if necessary based on type
-            rowData[table.columns[i].column_name] = row[i]
-          }
-        }
-        this.data[tn].push(rowData)
-        rowIndex++
-      }
-      this.project.tables.push(table)
-    }
+              this.data[tn].push(rowData)
+              rowIndex++
+            }
+            this.project.tables.push(table)
+            resolve(true)
+          }),
+      )
+    }, Promise.resolve()).then(callback)
   }
 
   getTemplate() {

From 4ad73666f82bd13ad171276c4295a749193546ca Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 13:10:54 +0800
Subject: [PATCH 043/117] feat(nc-gui): optionally import data

---
 .../nc-gui/components/dlg/QuickImport.vue     |  8 +-
 .../utils/parsers/CSVTemplateAdapter.ts       | 69 +++++++++---------
 .../utils/parsers/ExcelTemplateAdapter.ts     | 73 +++++++++----------
 .../utils/parsers/JSONTemplateAdapter.ts      |  5 +-
 4 files changed, 72 insertions(+), 83 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index c7688c9e4d..00840a7e4a 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -467,16 +467,16 @@ const beforeUpload = (file: UploadFile) => {
             </a-form-item>
 
             <!-- Flatten nested -->
-            <div v-if="isImportTypeJson" class="mt-3">
+            <a-form-item v-if="isImportTypeJson" class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
                 <span class="caption">{{ $t('labels.flattenNested') }}</span>
               </a-checkbox>
-            </div>
+            </a-form-item>
 
             <!-- Import Data -->
-            <div v-if="isImportTypeJson" class="mt-4">
+            <a-form-item class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox>
-            </div>
+            </a-form-item>
           </div>
         </div>
       </div>
diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 7f46192e4e..d4c39a4494 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -27,12 +27,7 @@ export default class CSVTemplateAdapter {
   columnValues: Record<number, []>
 
   constructor(files: UploadFile[], parserConfig = {}) {
-    this.config = {
-      maxRowsToParse: 500,
-      autoSelectFieldTypes: true,
-      firstRowAsHeaders: true,
-      ...parserConfig,
-    }
+    this.config = parserConfig
     this.files = files
     this.project = {
       tables: [],
@@ -258,38 +253,40 @@ export default class CSVTemplateAdapter {
       let steppers = 0
       const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
       this.data[tn] = []
-      parse(file.originFileObj as File, {
-        worker: true,
-        step(row) {
-          steppers += 1
-          if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
-            const rowData: Record<string, any> = {}
-            for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
-              const column = that.project.tables[tableIdx].columns[columnIdx]
-              const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
-              if (column.uidt === UITypes.Checkbox) {
-                rowData[column.column_name] = getCheckboxValue(data)
-                rowData[column.column_name] = data
-              } else if (column.uidt === UITypes.Currency) {
-                rowData[column.column_name] = data
-              } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
-                rowData[column.column_name] = (data || '').toString().trim() || null
-              } else if (column.uidt === UITypes.Date) {
-                // TODO(import): check format
-                rowData[column.column_name] = data
-              } else {
-                // TODO(import): do parsing if necessary based on type
-                rowData[column.column_name] = data
+      if (this.config.importData) {
+        parse(file.originFileObj as File, {
+          worker: true,
+          step(row) {
+            steppers += 1
+            if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
+              const rowData: Record<string, any> = {}
+              for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
+                const column = that.project.tables[tableIdx].columns[columnIdx]
+                const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
+                if (column.uidt === UITypes.Checkbox) {
+                  rowData[column.column_name] = getCheckboxValue(data)
+                  rowData[column.column_name] = data
+                } else if (column.uidt === UITypes.Currency) {
+                  rowData[column.column_name] = data
+                } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
+                  rowData[column.column_name] = (data || '').toString().trim() || null
+                } else if (column.uidt === UITypes.Date) {
+                  // TODO(import): check format
+                  rowData[column.column_name] = data
+                } else {
+                  // TODO(import): do parsing if necessary based on type
+                  rowData[column.column_name] = data
+                }
               }
+              that.data[tn].push(rowData)
             }
-            that.data[tn].push(rowData)
-          }
-        },
-        complete() {
-          console.log('getData(): complete')
-          console.log(`getData(): steppers: ${steppers}`)
-        },
-      })
+          },
+          complete() {
+            console.log('getData(): complete')
+            console.log(`getData(): steppers: ${steppers}`)
+          },
+        })
+      }
     }
     return this.data
   }
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 53e7a05e00..438c304fb0 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -18,9 +18,7 @@ const excelTypeToUidt: Record<string, UITypes> = {
 }
 
 export default class ExcelTemplateAdapter extends TemplateGenerator {
-  config: {
-    maxRowsToParse: number
-  } & Record<string, any>
+  config: Record<string, any>
 
   excelData: any
 
@@ -36,17 +34,11 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
 
   constructor(data = {}, parserConfig = {}) {
     super()
-    this.config = {
-      maxRowsToParse: 500,
-      ...parserConfig,
-    }
-
+    this.config = parserConfig
     this.excelData = data
-
     this.project = {
       tables: [],
     }
-
     this.xlsx = {} as any
   }
 
@@ -79,7 +71,6 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             tableNamePrefixRef[tn] = 0
 
             const table = { table_name: tn, ref_table_name: tn, columns: [] as any[] }
-            this.data[tn] = []
             const ws: any = this.wb.Sheets[sheet]
             const range = this.xlsx.utils.decode_range(ws['!ref'])
             let rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
@@ -207,39 +198,43 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
               }
               table.columns.push(column)
             }
+            this.project.tables.push(table)
 
-            let rowIndex = 0
-            for (const row of rows.slice(1)) {
-              const rowData: Record<string, any> = {}
-              for (let i = 0; i < table.columns.length; i++) {
-                if (table.columns[i].uidt === UITypes.Checkbox) {
-                  rowData[table.columns[i].column_name] = getCheckboxValue(row[i])
-                } else if (table.columns[i].uidt === UITypes.Currency) {
-                  const cellId = this.xlsx.utils.encode_cell({
-                    c: range.s.c + i,
-                    r: rowIndex + columnNameRowExist,
-                  })
+            this.data[tn] = []
+            if (this.config.importData) {
+              let rowIndex = 0
+              for (const row of rows.slice(1)) {
+                const rowData: Record<string, any> = {}
+                for (let i = 0; i < table.columns.length; i++) {
+                  if (table.columns[i].uidt === UITypes.Checkbox) {
+                    rowData[table.columns[i].column_name] = getCheckboxValue(row[i])
+                  } else if (table.columns[i].uidt === UITypes.Currency) {
+                    const cellId = this.xlsx.utils.encode_cell({
+                      c: range.s.c + i,
+                      r: rowIndex + columnNameRowExist,
+                    })
 
-                  const cellObj = ws[cellId]
-                  rowData[table.columns[i].column_name] = (cellObj && cellObj.w && cellObj.w.replace(/[^\d.]+/g, '')) || row[i]
-                } else if (table.columns[i].uidt === UITypes.SingleSelect || table.columns[i].uidt === UITypes.MultiSelect) {
-                  rowData[table.columns[i].column_name] = (row[i] || '').toString().trim() || null
-                } else if (table.columns[i].uidt === UITypes.Date) {
-                  const cellId = this.xlsx.utils.encode_cell({
-                    c: range.s.c + i,
-                    r: rowIndex + columnNameRowExist,
-                  })
-                  const cellObj = ws[cellId]
-                  rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
-                } else {
-                  // toto: do parsing if necessary based on type
-                  rowData[table.columns[i].column_name] = row[i]
+                    const cellObj = ws[cellId]
+                    rowData[table.columns[i].column_name] = (cellObj && cellObj.w && cellObj.w.replace(/[^\d.]+/g, '')) || row[i]
+                  } else if (table.columns[i].uidt === UITypes.SingleSelect || table.columns[i].uidt === UITypes.MultiSelect) {
+                    rowData[table.columns[i].column_name] = (row[i] || '').toString().trim() || null
+                  } else if (table.columns[i].uidt === UITypes.Date) {
+                    const cellId = this.xlsx.utils.encode_cell({
+                      c: range.s.c + i,
+                      r: rowIndex + columnNameRowExist,
+                    })
+                    const cellObj = ws[cellId]
+                    rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
+                  } else {
+                    // toto: do parsing if necessary based on type
+                    rowData[table.columns[i].column_name] = row[i]
+                  }
                 }
+                this.data[tn].push(rowData)
+                rowIndex++
               }
-              this.data[tn].push(rowData)
-              rowIndex++
             }
-            this.project.tables.push(table)
+
             resolve(true)
           }),
       )
diff --git a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
index ee3214489a..7167eb993c 100644
--- a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
@@ -24,10 +24,7 @@ export default class JSONTemplateAdapter extends TemplateGenerator {
   columns: object
   constructor(data: object, parserConfig = {}) {
     super()
-    this.config = {
-      maxRowsToParse: 500,
-      ...parserConfig,
-    }
+    this.config = parserConfig
     this._jsonData = data
     this.project = {
       tables: [],

From 2dc5045891129bf3f80aea2d27d48460002ced35 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 13:18:50 +0800
Subject: [PATCH 044/117] feat(nc-gui): allow Auto-Select Field Types in Excel
 & JSON import

---
 .../nc-gui/components/dlg/QuickImport.vue     |   2 +-
 .../utils/parsers/ExcelTemplateAdapter.ts     | 143 +++++++++---------
 .../utils/parsers/JSONTemplateAdapter.ts      |  12 +-
 3 files changed, 80 insertions(+), 77 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 00840a7e4a..85753d9865 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -454,7 +454,7 @@ const beforeUpload = (file: UploadFile) => {
               <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
             </a-form-item>
 
-            <a-form-item v-if="isImportTypeCsv" class="!my-2">
+            <a-form-item class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.autoSelectFieldTypes">
                 <span class="caption">Auto-Select Field Types</span>
               </a-checkbox>
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 438c304fb0..6e49843bf8 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -114,86 +114,89 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                 column_name: cn,
                 ref_column_name: cn,
                 meta: {},
+                uidt: UITypes.SingleLineText,
               }
 
-              const cellId = this.xlsx.utils.encode_cell({
-                c: range.s.c + col,
-                r: columnNameRowExist,
-              })
-              const cellProps = ws[cellId] || {}
-              column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
-
-              if (column.uidt === UITypes.SingleLineText) {
-                // check for long text
-                if (isMultiLineTextType(rows)) {
-                  column.uidt = UITypes.LongText
-                }
+              if (this.config.autoSelectFieldTypes) {
+                const cellId = this.xlsx.utils.encode_cell({
+                  c: range.s.c + col,
+                  r: columnNameRowExist,
+                })
+                const cellProps = ws[cellId] || {}
+                column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
+
+                if (column.uidt === UITypes.SingleLineText) {
+                  // check for long text
+                  if (isMultiLineTextType(rows)) {
+                    column.uidt = UITypes.LongText
+                  }
 
-                if (isEmailType(rows)) {
-                  column.uidt = UITypes.Email
-                }
+                  if (isEmailType(rows)) {
+                    column.uidt = UITypes.Email
+                  }
 
-                if (isUrlType(rows)) {
-                  column.uidt = UITypes.URL
-                } else {
-                  const vals = rows
-                    .slice(columnNameRowExist ? 1 : 0)
-                    .map((r: any) => r[col])
-                    .filter((v: any) => v !== null && v !== undefined && v.toString().trim() !== '')
-
-                  const checkboxType = isCheckboxType(vals)
-                  if (checkboxType.length === 1) {
-                    column.uidt = UITypes.Checkbox
+                  if (isUrlType(rows)) {
+                    column.uidt = UITypes.URL
                   } else {
-                    // Single Select / Multi Select
-                    Object.assign(column, extractMultiOrSingleSelectProps(vals))
+                    const vals = rows
+                      .slice(columnNameRowExist ? 1 : 0)
+                      .map((r: any) => r[col])
+                      .filter((v: any) => v !== null && v !== undefined && v.toString().trim() !== '')
+
+                    const checkboxType = isCheckboxType(vals)
+                    if (checkboxType.length === 1) {
+                      column.uidt = UITypes.Checkbox
+                    } else {
+                      // Single Select / Multi Select
+                      Object.assign(column, extractMultiOrSingleSelectProps(vals))
+                    }
                   }
-                }
-              } else if (column.uidt === UITypes.Number) {
-                if (
-                  rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
-                    return v && v[col] && parseInt(v[col]) !== +v[col]
-                  })
-                ) {
-                  column.uidt = UITypes.Decimal
-                }
-                if (
-                  rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
-                    const cellId = this.xlsx.utils.encode_cell({
-                      c: range.s.c + col,
-                      r: i + columnNameRowExist,
+                } else if (column.uidt === UITypes.Number) {
+                  if (
+                    rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
+                      return v && v[col] && parseInt(v[col]) !== +v[col]
                     })
+                  ) {
+                    column.uidt = UITypes.Decimal
+                  }
+                  if (
+                    rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
+                      const cellId = this.xlsx.utils.encode_cell({
+                        c: range.s.c + col,
+                        r: i + columnNameRowExist,
+                      })
 
-                    const cellObj = ws[cellId]
+                      const cellObj = ws[cellId]
 
-                    return !cellObj || (cellObj.w && cellObj.w.startsWith('$'))
-                  })
-                ) {
-                  column.uidt = UITypes.Currency
-                }
-              } else if (column.uidt === UITypes.DateTime) {
-                // TODO(import): centralise
-                // hold the possible date format found in the date
-                const dateFormat: Record<string, number> = {}
-                if (
-                  rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
-                    const cellId = this.xlsx.utils.encode_cell({
-                      c: range.s.c + col,
-                      r: i + columnNameRowExist,
+                      return !cellObj || (cellObj.w && cellObj.w.startsWith('$'))
                     })
-
-                    const cellObj = ws[cellId]
-                    const isDate = !cellObj || (cellObj.w && cellObj.w.split(' ').length === 1)
-                    if (isDate && cellObj) {
-                      dateFormat[getDateFormat(cellObj.w)] = (dateFormat[getDateFormat(cellObj.w)] || 0) + 1
-                    }
-                    return isDate
-                  })
-                ) {
-                  column.uidt = UITypes.Date
-                  // take the date format with the max occurrence
-                  column.meta.date_format =
-                    Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
+                  ) {
+                    column.uidt = UITypes.Currency
+                  }
+                } else if (column.uidt === UITypes.DateTime) {
+                  // TODO(import): centralise
+                  // hold the possible date format found in the date
+                  const dateFormat: Record<string, number> = {}
+                  if (
+                    rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
+                      const cellId = this.xlsx.utils.encode_cell({
+                        c: range.s.c + col,
+                        r: i + columnNameRowExist,
+                      })
+
+                      const cellObj = ws[cellId]
+                      const isDate = !cellObj || (cellObj.w && cellObj.w.split(' ').length === 1)
+                      if (isDate && cellObj) {
+                        dateFormat[getDateFormat(cellObj.w)] = (dateFormat[getDateFormat(cellObj.w)] || 0) + 1
+                      }
+                      return isDate
+                    })
+                  ) {
+                    column.uidt = UITypes.Date
+                    // take the date format with the max occurrence
+                    column.meta.date_format =
+                      Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
+                  }
                 }
               }
               table.columns.push(column)
diff --git a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
index 7167eb993c..a3ea20a1e0 100644
--- a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
@@ -89,17 +89,17 @@ export default class JSONTemplateAdapter extends TemplateGenerator {
       }
     } else {
       const cn = path.join('_').replace(/\W/g, '_').trim()
-
       const column: Record<string, any> = {
         column_name: cn,
         ref_column_name: cn,
+        uidt: UITypes.SingleLineText,
         path,
       }
-
-      column.uidt = jsonTypeToUidt[typeof firstRowVal] || UITypes.SingleLineText
-
-      const colData = jsonData.map((r: any) => extractNestedData(r, path))
-      Object.assign(column, getColumnUIDTAndMetas(colData, column.uidt))
+      if (this.config.autoSelectFieldTypes) {
+        column.uidt = jsonTypeToUidt[typeof firstRowVal] || UITypes.SingleLineText
+        const colData = jsonData.map((r: any) => extractNestedData(r, path))
+        Object.assign(column, getColumnUIDTAndMetas(colData, column.uidt))
+      }
       columns.push(column)
     }
 

From 1d36ecc17f675c02eab1ac4fce67a8ed69356ede Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 14:11:48 +0800
Subject: [PATCH 045/117] refactor(nc-gui): fall currency & date to the else
 case

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index d4c39a4494..723583f05e 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -266,13 +266,8 @@ export default class CSVTemplateAdapter {
                 if (column.uidt === UITypes.Checkbox) {
                   rowData[column.column_name] = getCheckboxValue(data)
                   rowData[column.column_name] = data
-                } else if (column.uidt === UITypes.Currency) {
-                  rowData[column.column_name] = data
                 } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
                   rowData[column.column_name] = (data || '').toString().trim() || null
-                } else if (column.uidt === UITypes.Date) {
-                  // TODO(import): check format
-                  rowData[column.column_name] = data
                 } else {
                   // TODO(import): do parsing if necessary based on type
                   rowData[column.column_name] = data

From 041bf96ada5d8749013bbec211caad5eaf7b7315 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 14:15:50 +0800
Subject: [PATCH 046/117] fix(nc-gui): handle invalid date cases in import

---
 packages/nc-gui/components/template/Editor.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index f3fb974daa..3b5e2f439c 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -244,9 +244,13 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
           dateFormat = getDateFormat(d)
           dateFormatMap[col.key] = dateFormat
         }
-        d = dayjs(d).utc().format(dateFormat)
+        const dayjsObj = dayjs(d)
+        if (dayjsObj.isValid()) {
+          d = dayjsObj.format('YYYY-MM-DD')
+        } else {
+          d = dayjs(d, dateFormat).format('YYYY-MM-DD')
+        }
       } else if (col.uidt === UITypes.DateTime && d) {
-        // TODO: handle more formats for DateTime
         d = dayjs(data[key]).utc().format('YYYY-MM-DD HH:mm')
       }
       return {

From 642ada6249ee85ed8bbf436c0165515cb3fb0c0a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 16:35:24 +0800
Subject: [PATCH 047/117] feat(nc-gui): get importData.value after pre import

---
 packages/nc-gui/components/dlg/QuickImport.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 85753d9865..624d4e5342 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -228,6 +228,7 @@ async function parseAndExtractData(val: string | ArrayBuffer) {
     templateGenerator.parse(() => {
       templateData.value = templateGenerator!.getTemplate()
       if (importOnly) importColumns.value = templateGenerator!.getColumns()
+      importData.value = templateGenerator!.getData()
       templateEditorModal.value = true
       isParsingData.value = false
       preImportLoading.value = false

From f308f41bb3db336c8fb4ab5cf072d26f4c8e283c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 16:35:48 +0800
Subject: [PATCH 048/117] fix(nc-gui): take raw data if autoSelectFieldType is
 true

---
 .../utils/parsers/ExcelTemplateAdapter.ts     | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 6e49843bf8..06af94288d 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -88,6 +88,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
               })
               return new Date(parsed.y, parsed.m, parsed.d, parsed.H, parsed.M, parsed.S)
             }
+
             // fix imported date
             rows = rows.map((r: any) =>
               r.map((v: any) => {
@@ -209,28 +210,39 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
               for (const row of rows.slice(1)) {
                 const rowData: Record<string, any> = {}
                 for (let i = 0; i < table.columns.length; i++) {
-                  if (table.columns[i].uidt === UITypes.Checkbox) {
-                    rowData[table.columns[i].column_name] = getCheckboxValue(row[i])
-                  } else if (table.columns[i].uidt === UITypes.Currency) {
-                    const cellId = this.xlsx.utils.encode_cell({
-                      c: range.s.c + i,
-                      r: rowIndex + columnNameRowExist,
-                    })
-
-                    const cellObj = ws[cellId]
-                    rowData[table.columns[i].column_name] = (cellObj && cellObj.w && cellObj.w.replace(/[^\d.]+/g, '')) || row[i]
-                  } else if (table.columns[i].uidt === UITypes.SingleSelect || table.columns[i].uidt === UITypes.MultiSelect) {
-                    rowData[table.columns[i].column_name] = (row[i] || '').toString().trim() || null
-                  } else if (table.columns[i].uidt === UITypes.Date) {
+                  if (!this.config.autoSelectFieldType) {
+                    // take raw data instead of data parsed by xlsx
                     const cellId = this.xlsx.utils.encode_cell({
                       c: range.s.c + i,
                       r: rowIndex + columnNameRowExist,
                     })
                     const cellObj = ws[cellId]
-                    rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
+                    rowData[table.columns[i].column_name] = cellObj.w
                   } else {
-                    // toto: do parsing if necessary based on type
-                    rowData[table.columns[i].column_name] = row[i]
+                    if (table.columns[i].uidt === UITypes.Checkbox) {
+                      rowData[table.columns[i].column_name] = getCheckboxValue(row[i])
+                    } else if (table.columns[i].uidt === UITypes.Currency) {
+                      const cellId = this.xlsx.utils.encode_cell({
+                        c: range.s.c + i,
+                        r: rowIndex + columnNameRowExist,
+                      })
+
+                      const cellObj = ws[cellId]
+                      rowData[table.columns[i].column_name] =
+                        (cellObj && cellObj.w && cellObj.w.replace(/[^\d.]+/g, '')) || row[i]
+                    } else if (table.columns[i].uidt === UITypes.SingleSelect || table.columns[i].uidt === UITypes.MultiSelect) {
+                      rowData[table.columns[i].column_name] = (row[i] || '').toString().trim() || null
+                    } else if (table.columns[i].uidt === UITypes.Date) {
+                      const cellId = this.xlsx.utils.encode_cell({
+                        c: range.s.c + i,
+                        r: rowIndex + columnNameRowExist,
+                      })
+                      const cellObj = ws[cellId]
+                      rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
+                    } else {
+                      // TODO: do parsing if necessary based on type
+                      rowData[table.columns[i].column_name] = row[i]
+                    }
                   }
                 }
                 this.data[tn].push(rowData)

From 34eddb9f153be4c7632fd046247012e72243e629 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 18:27:53 +0800
Subject: [PATCH 049/117] fix(nc-gui): autoSelectFieldType ->
 autoSelectFieldTypes

---
 packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 06af94288d..ac3f2f17a3 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -210,7 +210,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
               for (const row of rows.slice(1)) {
                 const rowData: Record<string, any> = {}
                 for (let i = 0; i < table.columns.length; i++) {
-                  if (!this.config.autoSelectFieldType) {
+                  if (!this.config.autoSelectFieldTypes) {
                     // take raw data instead of data parsed by xlsx
                     const cellId = this.xlsx.utils.encode_cell({
                       c: range.s.c + i,

From f8ad01387387a2b4ba0eade6e44b92f18857f1d6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 20 Oct 2022 18:57:55 +0800
Subject: [PATCH 050/117] refactor(nc-gui): import rename logic

---
 .../nc-gui/components/template/Editor.vue     | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 3b5e2f439c..f59b758dd6 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -105,7 +105,7 @@ const data = reactive<{
 
 const validators = computed(() =>
   data.tables.reduce<Record<string, [ReturnType<typeof fieldRequiredValidator>]>>((acc, table, tableIdx) => {
-    acc[`tables.${tableIdx}.ref_table_name`] = [fieldRequiredValidator()]
+    acc[`tables.${tableIdx}.table_name`] = [fieldRequiredValidator()]
     hasSelectColumn.value[tableIdx] = false
 
     table.columns?.forEach((column, columnIdx) => {
@@ -149,7 +149,7 @@ onMounted(() => {
   // used to record the previous EditableTn values
   // for checking the table duplication in current import
   // and updating the key in importData
-  prevEditableTn.value = data.tables.map((t) => t.ref_table_name)
+  prevEditableTn.value = data.tables.map((t) => t.table_name)
 
   nextTick(() => {
     inputRefs.value[0]?.focus()
@@ -182,7 +182,7 @@ function parseTemplate({ tables = [], ...rest }: Props['projectTemplate']) {
         }),
         ...v.map((v: any) => ({
           column_name: v.title,
-          ref_table_name: {
+          table_name: {
             ...v,
           },
         })),
@@ -478,8 +478,8 @@ async function importTemplate() {
         }
 
         const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
-          table_name: table.ref_table_name,
-          // leave title empty to get a generated one based on ref_table_name
+          table_name: table.table_name,
+          // leave title empty to get a generated one based on table_name
           title: '',
           columns: table.columns || [],
         })
@@ -505,6 +505,8 @@ async function importTemplate() {
         await Promise.all(
           data.tables.map((table: Record<string, any>) =>
             (async (tableMeta) => {
+              // use ref_table_name here instead of table_name
+              // since importData[talbeMeta.table_name] would be empty after renaming
               const data = importData[tableMeta.ref_table_name]
               if (data) {
                 total += data.length
@@ -563,16 +565,12 @@ onMounted(() => {
 
 function handleEditableTnChange(idx: number) {
   const oldValue = prevEditableTn.value[idx]
-  const newValue = data.tables[idx].ref_table_name
-  if (data.tables.filter((t) => t.ref_table_name === newValue).length > 1) {
+  const newValue = data.tables[idx].table_name
+  if (data.tables.filter((t) => t.table_name === newValue).length > 1) {
     message.warn('Duplicate Table Name')
-    data.tables[idx].ref_table_name = oldValue
+    data.tables[idx].table_name = oldValue
   } else {
     prevEditableTn.value[idx] = newValue
-    if (oldValue !== newValue) {
-      // update the key name of importData
-      delete Object.assign(importData, { [newValue]: importData[oldValue] })[oldValue]
-    }
   }
   setEditableTn(idx, false)
 }
@@ -598,7 +596,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
             <span class="font-weight-bold text-lg flex items-center gap-2">
               <mdi-table class="text-primary" />
 
-              {{ table.ref_table_name }}
+              {{ table.table_name }}
             </span>
           </template>
 
@@ -665,21 +663,21 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
         >
           <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
             <template #header>
-              <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.ref_table_name`]" no-style>
+              <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
                 <a-input
-                  v-model:value="table.ref_table_name"
-                  class="max-w-xs"
+                  v-model:value="table.table_name"
+                  class="max-w-xs font-weight-bold text-lg"
                   size="large"
                   hide-details
+                  :bordered="false"
                   @click="$event.stopPropagation()"
                   @blur="handleEditableTnChange(tableIdx)"
                   @keydown.enter="handleEditableTnChange(tableIdx)"
                 />
               </a-form-item>
-
               <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
                 <mdi-table class="text-primary" />
-                {{ table.ref_table_name }}
+                {{ table.table_name }}
               </span>
             </template>
 

From 7c326ce118af868c7f29e3da6a3281f1ef16b216 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 01:14:13 +0200
Subject: [PATCH 051/117] fix(nc-gui): Add detached expanded form

---
 .../smartsheet/expanded-form/Detached.vue     | 20 +++++++
 .../smartsheet/expanded-form/index.vue        | 32 +++++-----
 .../nc-gui/components/tabs/Smartsheet.vue     |  4 ++
 .../virtual-cell/components/ItemChip.vue      | 39 ++++++++-----
 .../useExpandedFormDetached/index.ts          | 58 +++++++++++++++++++
 5 files changed, 126 insertions(+), 27 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
 create mode 100644 packages/nc-gui/composables/useExpandedFormDetached/index.ts

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
new file mode 100644
index 0000000000..cdc4311005
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { useExpandedFormDetached } from '#imports'
+
+const { isOpen, state, row, rowId, loadRow: shouldLoadRow, meta, useMetaFields, view, close } = useExpandedFormDetached()
+</script>
+
+<template>
+  <LazySmartsheetExpandedForm
+    v-if="!!row && !!meta"
+    v-model="isOpen"
+    :row="row"
+    :load-row="shouldLoadRow"
+    :meta="meta"
+    :row-id="rowId"
+    :state="state"
+    :use-meta-fields="useMetaFields"
+    :view="view"
+    @cancel="close"
+  />
+</template>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 3dbb20469f..01c4505cc1 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -9,7 +9,10 @@ import {
   MetaInj,
   ReloadRowDataHookInj,
   computedInject,
+  createEventHook,
+  inject,
   message,
+  onBeforeMount,
   provide,
   ref,
   toRef,
@@ -57,21 +60,23 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
-if (props.loadRow) {
-  await loadRow()
-}
+onBeforeMount(async () => {
+  if (props.loadRow) {
+    await loadRow()
+  }
 
-if (props.rowId) {
-  try {
-    await loadRow(props.rowId)
-  } catch (e: any) {
-    if (e.response?.status === 404) {
-      // todo: i18n
-      message.error('Record not found')
-      router.replace({ query: {} })
-    } else throw e
+  if (props.rowId) {
+    try {
+      await loadRow(props.rowId)
+    } catch (e: any) {
+      if (e.response?.status === 404) {
+        // todo: i18n
+        message.error('Record not found')
+        router.replace({ query: {} })
+      } else throw e
+    }
   }
-}
+})
 
 useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)
 
@@ -134,6 +139,7 @@ export default {
     width="min(90vw,1000px)"
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
+    destroy-on-close
     class="nc-drawer-expanded-form"
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index db6aad701d..38d473de5c 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -7,6 +7,7 @@ import {
   IsLockedInj,
   MetaInj,
   OpenNewRecordFormHookInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
   TabMetaInj,
@@ -55,6 +56,7 @@ provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
+provide(ReadonlyInj, false)
 </script>
 
 <template>
@@ -79,6 +81,8 @@ provide(TabMetaInj, activeTab)
       </Transition>
     </div>
 
+    <LazySmartsheetExpandedFormDetached />
+
     <!-- Lazy loading the sidebar causes issues when deleting elements, i.e. it appears as if multiple elements are removed when they are not -->
     <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>
diff --git a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
index fe11b08950..61d15603e1 100644
--- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-import { ActiveCellInj, IsFormInj, IsLockedInj, ReadonlyInj, inject, ref, useLTARStoreOrThrow, useUIPermission } from '#imports'
+import {
+  ActiveCellInj,
+  IsFormInj,
+  IsLockedInj,
+  ReadonlyInj,
+  inject,
+  ref,
+  useExpandedFormDetached,
+  useLTARStoreOrThrow,
+  useUIPermission,
+} from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -22,7 +32,19 @@ const isForm = inject(IsFormInj)!
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const expandedFormDlg = ref(false)
+const { open } = useExpandedFormDetached()
+
+function openExpandedForm() {
+  if (!readOnly && !isLocked.value) {
+    open({
+      isOpen: true,
+      row: { row: item, rowMeta: {}, oldRow: { ...item } },
+      meta: relatedTableMeta.value,
+      loadRow: true,
+      useMetaFields: true,
+    })
+  }
+}
 </script>
 
 <script lang="ts">
@@ -35,24 +57,13 @@ export default {
   <div
     class="chip group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
-    @click="expandedFormDlg = true"
+    @click="openExpandedForm"
   >
     <span class="name">{{ value }}</span>
 
     <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
-
-    <Suspense>
-      <SmartsheetExpandedForm
-        v-if="!readOnly && !isLocked && expandedFormDlg"
-        v-model="expandedFormDlg"
-        :row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
-        :meta="relatedTableMeta"
-        load-row
-        use-meta-fields
-      />
-    </Suspense>
   </div>
 </template>
 
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
new file mode 100644
index 0000000000..43cc0d04e4
--- /dev/null
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -0,0 +1,58 @@
+import type { TableType, ViewType } from 'nocodb-sdk'
+import { reactive, toRefs, useInjectionState } from '#imports'
+import type { Row } from '~/lib'
+
+interface UseExpandedFormDetachedProps {
+  isOpen?: boolean
+  row: Row | null
+  state?: Record<string, any> | null
+  meta: TableType
+  loadRow?: boolean
+  useMetaFields?: boolean
+  rowId?: string
+  view?: ViewType
+}
+
+const [setup, use] = useInjectionState(() => {
+  const state = reactive<UseExpandedFormDetachedProps>({
+    isOpen: false,
+    state: null,
+    loadRow: false,
+    useMetaFields: false,
+    row: null,
+    meta: null as any,
+  })
+
+  const open = (props: UseExpandedFormDetachedProps) => {
+    state.state = props.state
+    state.loadRow = props.loadRow
+    state.useMetaFields = props.useMetaFields
+    state.rowId = props.rowId
+    state.row = props.row
+    state.loadRow = props.loadRow
+    state.meta = props.meta
+    state.isOpen = props.isOpen
+
+    state.isOpen = true
+  }
+
+  const close = () => {
+    state.isOpen = false
+  }
+
+  return {
+    ...toRefs(state),
+    open,
+    close,
+  }
+})
+
+export function useExpandedFormDetached() {
+  const state = use()
+
+  if (!state) {
+    return setup()
+  }
+
+  return state
+}

From a82af3a53ff28107c0eff23d6df024b11f7efdee Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 01:14:25 +0200
Subject: [PATCH 052/117] feat(nc-gui): extend `useDialog` by app context opts

---
 .../nc-gui/composables/useDialog/index.ts     | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/composables/useDialog/index.ts b/packages/nc-gui/composables/useDialog/index.ts
index efa883c805..2acf55dd1e 100644
--- a/packages/nc-gui/composables/useDialog/index.ts
+++ b/packages/nc-gui/composables/useDialog/index.ts
@@ -1,17 +1,22 @@
-import type { VNode } from '@vue/runtime-dom'
-import { isVNode, render } from '@vue/runtime-dom'
+import type { AppContext, VNode } from '@vue/runtime-dom'
+import { Suspense, isVNode, render } from '@vue/runtime-dom'
 import type { ComponentPublicInstance } from '@vue/runtime-core'
 import type { MaybeRef } from '@vueuse/core'
 import { isClient } from '@vueuse/core'
 import { createEventHook, h, ref, toReactive, tryOnScopeDispose, unref, useNuxtApp, watch } from '#imports'
 
+interface UseDialogOptions {
+  target: MaybeRef<HTMLElement | ComponentPublicInstance>
+  context: Partial<AppContext>
+}
+
 /**
  * Programmatically create a component and attach it to the body (or a specific mount target), like a dialog or modal.
  * This composable is not SSR friendly - it should be used only on the client.
  *
  * @param componentOrVNode The component to create and attach. Can be a VNode or a component definition.
  * @param props The props to pass to the component.
- * @param mountTarget The target to attach the component to. Defaults to the document body
+ * @param options Additional options to use {@see UseDialogOptions}
  *
  * @example
  * import { useDialog } from '#imports'
@@ -39,7 +44,7 @@ import { createEventHook, h, ref, toReactive, tryOnScopeDispose, unref, useNuxtA
 export function useDialog(
   componentOrVNode: any,
   props: NonNullable<Parameters<typeof h>[1]> = {},
-  mountTarget?: MaybeRef<Element | ComponentPublicInstance>,
+  { target, context }: Partial<UseDialogOptions> = {},
 ) {
   if (typeof document === 'undefined' || !isClient) {
     console.warn('[useDialog]: Cannot use outside of browser!')
@@ -54,24 +59,36 @@ export function useDialog(
 
   const vNodeRef = ref<VNode>()
 
-  let _mountTarget = unref(mountTarget)
-
-  _mountTarget = _mountTarget ? ('$el' in _mountTarget ? (_mountTarget.$el as HTMLElement) : _mountTarget) : document.body
-
-  /** if specified, append vnode to mount target instead of document.body */
-  _mountTarget.appendChild(domNode)
+  const mountTarget = ref<HTMLElement>()
 
   /** When props change, we want to re-render the element with the new prop values */
   const stop = watch(
     toReactive(props),
     (reactiveProps) => {
+      const _mountTarget = unref(target)
+
+      /**
+       * If it's a component instance, use the instance's root element (`$el`), otherwise use the element itself
+       * If no target is specified, use the document body
+       */
+      mountTarget.value = _mountTarget
+        ? '$el' in _mountTarget
+          ? (_mountTarget.$el as HTMLElement)
+          : _mountTarget
+        : document.body
+
+      /** if specified, append vnode to mount target instead of document.body */
+      mountTarget.value.appendChild(domNode)
+
+      // if it's a vnode, just render it, otherwise wrap in `h` to create a vnode
       const vNode = isVNode(componentOrVNode) ? componentOrVNode : h(componentOrVNode, reactiveProps)
 
-      vNode.appContext = useNuxtApp().vueApp._context
+      vNode.appContext = { ...useNuxtApp().vueApp._context, ...context }
 
       vNodeRef.value = vNode
 
-      render(vNode, domNode)
+      // wrap in suspense to resolve potential promises
+      render(h(Suspense, vNode), domNode)
 
       if (!isMounted) mountedHook.trigger()
     },
@@ -90,7 +107,7 @@ export function useDialog(
 
       setTimeout(() => {
         try {
-          ;(_mountTarget as HTMLElement)?.removeChild(domNode)
+          ;(mountTarget.value as HTMLElement)?.removeChild(domNode)
         } catch (e) {}
       }, 100)
 

From bcff62b83446f61a6a20a7fab860577e88dcecdc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 01:38:18 +0200
Subject: [PATCH 053/117] feat(nc-gui): open a separate form for each
 composable caller

---
 .../smartsheet/expanded-form/Detached.vue     | 26 +++----
 .../components/ListChildItems.vue             | 26 ++++---
 .../useExpandedFormDetached/index.ts          | 67 +++++++------------
 3 files changed, 53 insertions(+), 66 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
index cdc4311005..9db5aba830 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { useExpandedFormDetached } from '#imports'
 
-const { isOpen, state, row, rowId, loadRow: shouldLoadRow, meta, useMetaFields, view, close } = useExpandedFormDetached()
+const { states } = useExpandedFormDetached()
 </script>
 
 <template>
-  <LazySmartsheetExpandedForm
-    v-if="!!row && !!meta"
-    v-model="isOpen"
-    :row="row"
-    :load-row="shouldLoadRow"
-    :meta="meta"
-    :row-id="rowId"
-    :state="state"
-    :use-meta-fields="useMetaFields"
-    :view="view"
-    @cancel="close"
-  />
+  <template v-for="(state, i) of states" :key="`expanded-form-${i}`">
+    <LazySmartsheetExpandedForm
+      v-model="state.isOpen"
+      :row="state.row"
+      :load-row="state.loadRow"
+      :meta="state.meta"
+      :row-id="state.rowId"
+      :state="state.state"
+      :use-meta-fields="state.useMetaFields"
+      :view="state.view"
+    />
+  </template>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 507dd9ca3e..7cb43d0b45 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -11,6 +11,7 @@ import {
   h,
   inject,
   ref,
+  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
@@ -31,6 +32,8 @@ const column = inject(ColumnInj)
 
 const readonly = inject(ReadonlyInj, false)
 
+const { open } = useExpandedFormDetached()
+
 const {
   childrenList,
   deleteRelatedRow,
@@ -88,6 +91,18 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
+
+function openExpandedForm() {
+  if (expandedFormRow.value) {
+    open({
+      isOpen: true,
+      row: { row: expandedFormRow.value, oldRow: expandedFormRow.value },
+      meta: relatedTableMeta.value,
+      loadRow: true,
+      useMetaFields: true,
+    })
+  }
+}
 </script>
 
 <template>
@@ -176,17 +191,6 @@ watch(
         :image-style="isForm ? { height: '20px' } : {}"
       />
     </div>
-
-    <Suspense>
-      <LazySmartsheetExpandedForm
-        v-if="expandedFormRow && expandedFormDlg"
-        v-model="expandedFormDlg"
-        :row="{ row: expandedFormRow }"
-        :meta="relatedTableMeta"
-        load-row
-        use-meta-fields
-      />
-    </Suspense>
   </component>
 </template>
 
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
index 43cc0d04e4..c2bda1c78d 100644
--- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -1,58 +1,41 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
-import { reactive, toRefs, useInjectionState } from '#imports'
+import { ref, useInjectionState } from '#imports'
 import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
-  isOpen?: boolean
-  row: Row | null
-  state?: Record<string, any> | null
-  meta: TableType
-  loadRow?: boolean
-  useMetaFields?: boolean
-  rowId?: string
-  view?: ViewType
+  'isOpen'?: boolean
+  'row': Row | null
+  'state'?: Record<string, any> | null
+  'meta': TableType
+  'loadRow'?: boolean
+  'useMetaFields'?: boolean
+  'rowId'?: string
+  'view'?: ViewType
+  'onCancel'?: Function
+  'onUpdate:modelValue'?: Function
 }
 
 const [setup, use] = useInjectionState(() => {
-  const state = reactive<UseExpandedFormDetachedProps>({
-    isOpen: false,
-    state: null,
-    loadRow: false,
-    useMetaFields: false,
-    row: null,
-    meta: null as any,
-  })
+  return ref<UseExpandedFormDetachedProps[]>([])
+})
 
-  const open = (props: UseExpandedFormDetachedProps) => {
-    state.state = props.state
-    state.loadRow = props.loadRow
-    state.useMetaFields = props.useMetaFields
-    state.rowId = props.rowId
-    state.row = props.row
-    state.loadRow = props.loadRow
-    state.meta = props.meta
-    state.isOpen = props.isOpen
-
-    state.isOpen = true
-  }
+export function useExpandedFormDetached() {
+  let states = use()!
 
-  const close = () => {
-    state.isOpen = false
+  if (!states) {
+    states = setup()
   }
 
-  return {
-    ...toRefs(state),
-    open,
-    close,
-  }
-})
+  const index = ref(-1)
 
-export function useExpandedFormDetached() {
-  const state = use()
+  const open = (props: UseExpandedFormDetachedProps) => {
+    states.value.push(props)
+    index.value = states.value.length - 1
+  }
 
-  if (!state) {
-    return setup()
+  const close = () => {
+    states.value.splice(index.value, 1)
   }
 
-  return state
+  return { states, open, close }
 }

From 4a73bae95592a9a03fc3598207b70747c4311523 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 02:02:12 +0200
Subject: [PATCH 054/117] chore(nc-gui): properly close expanded form

---
 .../smartsheet/expanded-form/Detached.vue     |  8 +++-
 .../components/ListChildItems.vue             | 33 ++++++---------
 .../virtual-cell/components/ListItems.vue     | 40 ++++++++++---------
 .../useExpandedFormDetached/index.ts          | 11 +++--
 4 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
index 9db5aba830..def9be7748 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { useExpandedFormDetached } from '#imports'
 
-const { states } = useExpandedFormDetached()
+const { states, close } = useExpandedFormDetached()
+
+const shouldClose = (isVisible: boolean, i: number) => {
+  if (!isVisible) close(i)
+}
 </script>
 
 <template>
@@ -15,6 +19,8 @@ const { states } = useExpandedFormDetached()
       :state="state.state"
       :use-meta-fields="state.useMetaFields"
       :view="state.view"
+      @update:model-value="shouldClose($event, i)"
+      @cancel="close(i)"
     />
   </template>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 7cb43d0b45..eec01a1cdd 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -17,6 +17,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import type { Row } from '~/lib'
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
@@ -80,10 +81,6 @@ const container = computed(() =>
     : Modal,
 )
 
-const expandedFormDlg = ref(false)
-
-const expandedFormRow = ref()
-
 /** reload children list whenever cell value changes and list is visible */
 watch(
   () => props.cellValue,
@@ -92,16 +89,16 @@ watch(
   },
 )
 
-function openExpandedForm() {
-  if (expandedFormRow.value) {
-    open({
-      isOpen: true,
-      row: { row: expandedFormRow.value, oldRow: expandedFormRow.value },
-      meta: relatedTableMeta.value,
-      loadRow: true,
-      useMetaFields: true,
-    })
-  }
+function openExpandedForm(row: Row) {
+  if (readonly) return
+
+  open({
+    isOpen: true,
+    row: { row, oldRow: row, rowMeta: {} },
+    meta: relatedTableMeta.value,
+    loadRow: true,
+    useMetaFields: true,
+  })
 }
 </script>
 
@@ -141,13 +138,7 @@ function openExpandedForm() {
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="
-              () => {
-                if (readonly) return
-                expandedFormRow = row
-                expandedFormDlg = true
-              }
-            "
+            @click="openExpandedForm(row)"
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index df6700cd02..af7f606bae 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -7,6 +7,7 @@ import {
   computed,
   inject,
   ref,
+  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
@@ -22,6 +23,8 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
 
+const { open, close } = useExpandedFormDetached()
+
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -57,8 +60,6 @@ watch(vModel, (nextVal, prevVal) => {
   }
 })
 
-const expandedFormDlg = ref(false)
-
 /** populate initial state for a new row which is parent/child of current record */
 const newRowState = computed(() => {
   if (isNew.value) return {}
@@ -93,11 +94,23 @@ const newRowState = computed(() => {
   }
 })
 
-// if it's an existing record close the list
-// after new record creation since it's already linking while creating
-watch(expandedFormDlg, (nexVal) => {
-  if (!nexVal && !isNew.value) vModel.value = false
-})
+function openExpandedForm() {
+  // if it's an existing record close the list
+  // after new record creation since it's already linking while creating
+  if (!isNew.value) {
+    vModel.value = false
+    return close()
+  }
+
+  open({
+    isOpen: true,
+    row: { row: {}, oldRow: {}, rowMeta: { new: true } },
+    meta: relatedTableMeta.value,
+    loadRow: false,
+    useMetaFields: true,
+    state: newRowState.value,
+  })
+}
 </script>
 
 <template>
@@ -122,7 +135,7 @@ watch(expandedFormDlg, (nexVal) => {
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
 
         <!--        Add new record -->
-        <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">
+        <a-button v-if="!isPublic" type="primary" size="small" @click="openExpandedForm">
           {{ $t('activity.addNewRecord') }}
         </a-button>
       </div>
@@ -156,17 +169,6 @@ watch(expandedFormDlg, (nexVal) => {
       </template>
 
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-
-      <Suspense>
-        <LazySmartsheetExpandedForm
-          v-if="expandedFormDlg"
-          v-model="expandedFormDlg"
-          :meta="relatedTableMeta"
-          :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
-          :state="newRowState"
-          use-meta-fields
-        />
-      </Suspense>
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
index c2bda1c78d..2aef11da08 100644
--- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -1,5 +1,5 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
-import { ref, useInjectionState } from '#imports'
+import { createEventHook, ref, useInjectionState } from '#imports'
 import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
@@ -26,6 +26,8 @@ export function useExpandedFormDetached() {
     states = setup()
   }
 
+  const closeHook = createEventHook<void>()
+
   const index = ref(-1)
 
   const open = (props: UseExpandedFormDetachedProps) => {
@@ -33,9 +35,10 @@ export function useExpandedFormDetached() {
     index.value = states.value.length - 1
   }
 
-  const close = () => {
-    states.value.splice(index.value, 1)
+  const close = (i?: number) => {
+    states.value.splice(i || index.value, 1)
+    if (index.value === i || !i) closeHook.trigger()
   }
 
-  return { states, open, close }
+  return { states, open, close, onClose: closeHook.on }
 }

From 952a32c327e902576c28cf3209bedbf91d6035d0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 11:59:39 +0800
Subject: [PATCH 055/117] feat(nc-gui): skip empty lines when parsing

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 723583f05e..fc42bc2b4c 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -205,6 +205,7 @@ export default class CSVTemplateAdapter {
       let steppers = 0
       const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
       parse(file.originFileObj as File, {
+        worker: true,
         skipEmptyLines: 'greedy',
         step(row) {
           steppers += 1
@@ -256,6 +257,7 @@ export default class CSVTemplateAdapter {
       if (this.config.importData) {
         parse(file.originFileObj as File, {
           worker: true,
+          skipEmptyLines: 'greedy',
           step(row) {
             steppers += 1
             if (row && steppers >= +that.config.firstRowAsHeaders + 1) {

From 5e412f15a5cc498b14a0808a926b23d3dffbe6c1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 13:54:57 +0800
Subject: [PATCH 056/117] feat(nc-gui): validate each table after pre-import

---
 .../nc-gui/components/template/Editor.vue     | 97 +++++++++----------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index f59b758dd6..3b5dafcb54 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -290,8 +290,6 @@ function fieldsValidation(record: Record<string, any>) {
     return true
   }
 
-  const tableName = meta.value?.title || ''
-
   if (!record.destCn) {
     message.error(`${t('msg.error.columnDescriptionNotFound')} ${record.srcCn}`)
     return false
@@ -304,63 +302,62 @@ function fieldsValidation(record: Record<string, any>) {
 
   const v = columns.value.find((c) => c.title === record.destCn) as Record<string, any>
 
-  // check if the input contains null value for a required column
-  if (v.pk ? !v.ai && !v.cdf : !v.cdf && v.rqd) {
-    if (
-      importData[tableName]
-        .slice(0, maxRowsToParse)
-        .some((r: Record<string, any>) => r[record.srcCn] === null || r[record.srcCn] === undefined || r[record.srcCn] === '')
-    ) {
-      message.error(t('msg.error.nullValueViolatesNotNull'))
-    }
-  }
-
-  switch (v.uidt) {
-    case UITypes.Number:
+  for (const tableName of Object.keys(importData)) {
+    // check if the input contains null value for a required column
+    if (v.pk ? !v.ai && !v.cdf : !v.cdf && v.rqd) {
       if (
         importData[tableName]
           .slice(0, maxRowsToParse)
-          .some(
-            (r: Record<string, any>) => r[record.sourceCn] !== null && r[record.srcCn] !== undefined && isNaN(+r[record.srcCn]),
-          )
+          .some((r: Record<string, any>) => r[record.srcCn] === null || r[record.srcCn] === undefined || r[record.srcCn] === '')
       ) {
-        message.error(t('msg.error.sourceHasInvalidNumbers'))
-        return false
+        message.error(t('msg.error.nullValueViolatesNotNull'))
       }
+    }
 
-      break
-    case UITypes.Checkbox:
-      if (
-        importData[tableName].slice(0, maxRowsToParse).some((r: Record<string, any>) => {
-          if (r[record.srcCn] !== null && r[record.srcCn] !== undefined) {
-            let input = r[record.srcCn]
-            if (typeof input === 'string') {
-              input = input.replace(/["']/g, '').toLowerCase().trim()
-              return !(
-                input === 'false' ||
-                input === 'no' ||
-                input === 'n' ||
-                input === '0' ||
-                input === 'true' ||
-                input === 'yes' ||
-                input === 'y' ||
-                input === '1'
-              )
-            }
+    switch (v.uidt) {
+      case UITypes.Number:
+        if (
+          importData[tableName]
+            .slice(0, maxRowsToParse)
+            .some(
+              (r: Record<string, any>) => r[record.sourceCn] !== null && r[record.srcCn] !== undefined && isNaN(+r[record.srcCn]),
+            )
+        ) {
+          message.error(t('msg.error.sourceHasInvalidNumbers'))
+          return false
+        }
 
-            return input !== 1 && input !== 0 && input !== true && input !== false
-          }
+        break
+      case UITypes.Checkbox:
+        if (
+          importData[tableName].slice(0, maxRowsToParse).some((r: Record<string, any>) => {
+            if (r[record.srcCn] !== null && r[record.srcCn] !== undefined) {
+              let input = r[record.srcCn]
+              if (typeof input === 'string') {
+                input = input.replace(/["']/g, '').toLowerCase().trim()
+                return !(
+                  input === 'false' ||
+                  input === 'no' ||
+                  input === 'n' ||
+                  input === '0' ||
+                  input === 'true' ||
+                  input === 'yes' ||
+                  input === 'y' ||
+                  input === '1'
+                )
+              }
 
+              return input !== 1 && input !== 0 && input !== true && input !== false
+            }
+            return false
+          })
+        ) {
+          message.error(t('msg.error.sourceHasInvalidBoolean'))
           return false
-        })
-      ) {
-        message.error(t('msg.error.sourceHasInvalidBoolean'))
-
-        return false
-      }
-      break
+        }
+        break
+    }
   }
-
   return true
 }
 
@@ -541,7 +538,7 @@ function mapDefaultColumns() {
   for (const col of importColumns[0]) {
     const o = { srcCn: col.column_name, destCn: '', enabled: true }
     if (columns.value) {
-      const tableColumn = columns.value.find((c: Record<string, any>) => c.title === col.column_name)
+      const tableColumn = columns.value.find((c) => c.column_name === col.column_name)
       if (tableColumn) {
         o.destCn = tableColumn.title as string
       } else {

From c513997014ee07beecde7ac21eb55bfacb7a3839 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 13:55:47 +0800
Subject: [PATCH 057/117] fix(nc-gui): import to existing table issue

---
 .../nc-gui/components/dlg/QuickImport.vue     |  5 +-
 .../utils/parsers/CSVTemplateAdapter.ts       | 80 ++++++++++---------
 2 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 624d4e5342..b1d5ed31e4 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -169,9 +169,7 @@ async function handleImport() {
       message.error(t('msg.error.templateGeneratorNotFound'))
       return
     }
-
     importLoading.value = true
-    importData.value = templateGenerator.getData()
     await templateEditorRef.value.importTemplate()
   } catch (e: any) {
     return message.error(await extractSdkResponseErrorMsg(e))
@@ -200,7 +198,8 @@ async function parseAndExtractStreamData(val: UploadFile[]) {
       templateData.value = templateGenerator!.getTemplate()
       // TODO(import): remove
       // templateData.value.tables[0].table_name = populateUniqueTableName()
-      // if (importOnly) importColumns.value = templateGenerator.getColumns()
+      if (importOnly) importColumns.value = templateGenerator!.getColumns()
+      importData.value = templateGenerator!.getData()
       templateEditorModal.value = true
       isParsingData.value = false
       preImportLoading.value = false
diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index fc42bc2b4c..c2756e7b25 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -204,6 +204,9 @@ export default class CSVTemplateAdapter {
     for (const [tableIdx, file] of this.files.entries()) {
       let steppers = 0
       const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
+      this.data[tn] = []
+
+      // parse column meta
       parse(file.originFileObj as File, {
         worker: true,
         skipEmptyLines: 'greedy',
@@ -238,53 +241,54 @@ export default class CSVTemplateAdapter {
           console.log('complete')
           console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
-          callback()
+
+          // parse table data
+          if (that.config.importData) {
+            steppers = 0
+            parse(file.originFileObj as File, {
+              worker: true,
+              skipEmptyLines: 'greedy',
+              step(row) {
+                steppers += 1
+                if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
+                  const rowData: Record<string, any> = {}
+                  for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
+                    const column = that.project.tables[tableIdx].columns[columnIdx]
+                    const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
+                    if (column.uidt === UITypes.Checkbox) {
+                      rowData[column.column_name] = getCheckboxValue(data)
+                      rowData[column.column_name] = data
+                    } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
+                      rowData[column.column_name] = (data || '').toString().trim() || null
+                    } else {
+                      // TODO(import): do parsing if necessary based on type
+                      rowData[column.column_name] = data
+                    }
+                  }
+                  that.data[tn].push(rowData)
+                }
+              },
+              complete() {
+                console.log('getData(): complete')
+                console.log(`getData(): steppers: ${steppers}`)
+                callback()
+              },
+              // TODO(import): add error
+            })
+          } else {
+            callback()
+          }
         },
       })
     }
   }
 
   getColumns() {
-    // return this.columns
+    console.log(this.project.tables.map((t: Record<string, any>) => t.columns))
+    return this.project.tables.map((t: Record<string, any>) => t.columns)
   }
 
   getData() {
-    const that = this
-    for (const [tableIdx, file] of this.files.entries()) {
-      let steppers = 0
-      const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
-      this.data[tn] = []
-      if (this.config.importData) {
-        parse(file.originFileObj as File, {
-          worker: true,
-          skipEmptyLines: 'greedy',
-          step(row) {
-            steppers += 1
-            if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
-              const rowData: Record<string, any> = {}
-              for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
-                const column = that.project.tables[tableIdx].columns[columnIdx]
-                const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
-                if (column.uidt === UITypes.Checkbox) {
-                  rowData[column.column_name] = getCheckboxValue(data)
-                  rowData[column.column_name] = data
-                } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
-                  rowData[column.column_name] = (data || '').toString().trim() || null
-                } else {
-                  // TODO(import): do parsing if necessary based on type
-                  rowData[column.column_name] = data
-                }
-              }
-              that.data[tn].push(rowData)
-            }
-          },
-          complete() {
-            console.log('getData(): complete')
-            console.log(`getData(): steppers: ${steppers}`)
-          },
-        })
-      }
-    }
     return this.data
   }
 

From 2e3f843ee9a90286607faf50e3a9fa8423819dba Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 13:58:46 +0800
Subject: [PATCH 058/117] chore(nc-gui): remove console log

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index c2756e7b25..70e85eab80 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -284,7 +284,6 @@ export default class CSVTemplateAdapter {
   }
 
   getColumns() {
-    console.log(this.project.tables.map((t: Record<string, any>) => t.columns))
     return this.project.tables.map((t: Record<string, any>) => t.columns)
   }
 

From 7f9f60b1c542aabbd720d40f51ae44d17e83b35d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 13:59:02 +0800
Subject: [PATCH 059/117] refactor(nc-gui): merge parseAndExtractStreamData to
 parseAndExtractData

---
 .../nc-gui/components/dlg/QuickImport.vue     | 37 +++----------------
 1 file changed, 5 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index b1d5ed31e4..2b0b869c4e 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -147,7 +147,7 @@ async function handlePreImport() {
 
   if (activeKey.value === 'uploadTab') {
     if (isImportTypeCsv.value) {
-      await parseAndExtractStreamData(importState.fileList as streamImportFileList)
+      await parseAndExtractData(importState.fileList as streamImportFileList)
     } else {
       await parseAndExtractData((importState.fileList as importFileList)[0].data)
     }
@@ -179,37 +179,10 @@ async function handleImport() {
   dialogShow.value = false
 }
 
-async function parseAndExtractStreamData(val: UploadFile[]) {
-  try {
-    templateData.value = null
-    importData.value = null
-    importColumns.value = []
-
-    templateGenerator = getAdapter(val)
-
-    if (!templateGenerator) {
-      message.error(t('msg.error.templateGeneratorNotFound'))
-      return
-    }
-
-    await templateGenerator.init()
-
-    templateGenerator.parse(() => {
-      templateData.value = templateGenerator!.getTemplate()
-      // TODO(import): remove
-      // templateData.value.tables[0].table_name = populateUniqueTableName()
-      if (importOnly) importColumns.value = templateGenerator!.getColumns()
-      importData.value = templateGenerator!.getData()
-      templateEditorModal.value = true
-      isParsingData.value = false
-      preImportLoading.value = false
-    })
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-async function parseAndExtractData(val: string | ArrayBuffer) {
+// UploadFile[] for csv import (streaming)
+// ArrayBuffer for excel import
+// string for json import
+async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
   try {
     templateData.value = null
     importData.value = null

From 1a29bd016640ff12f4ddae932cf18b6dac969ad3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 15:56:40 +0800
Subject: [PATCH 060/117] refactor(nc-gui): rename variables & props

---
 packages/nc-gui/components/dlg/QuickImport.vue       | 12 ++++++------
 .../components/smartsheet/toolbar/MoreActions.vue    |  2 +-
 .../components/smartsheet/toolbar/ViewActions.vue    |  2 +-
 packages/nc-gui/components/template/Editor.vue       | 12 ++++++------
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts  |  2 +-
 .../nc-gui/utils/parsers/ExcelTemplateAdapter.ts     |  2 +-
 packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts |  2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 2b0b869c4e..f18ed5df6a 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -27,10 +27,10 @@ import type { importFileList, streamImportFileList } from '~/lib'
 interface Props {
   modelValue: boolean
   importType: 'csv' | 'json' | 'excel'
-  importOnly?: boolean
+  importDataOnly?: boolean
 }
 
-const { importType, importOnly = false, ...rest } = defineProps<Props>()
+const { importType, importDataOnly = false, ...rest } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -69,7 +69,7 @@ const importState = reactive({
     normalizeNested: true,
     autoSelectFieldTypes: true,
     firstRowAsHeaders: true,
-    importData: true,
+    shouldImportData: true,
   },
 })
 
@@ -199,7 +199,7 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
 
     templateGenerator.parse(() => {
       templateData.value = templateGenerator!.getTemplate()
-      if (importOnly) importColumns.value = templateGenerator!.getColumns()
+      if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
       importData.value = templateGenerator!.getData()
       templateEditorModal.value = true
       isParsingData.value = false
@@ -342,7 +342,7 @@ const beforeUpload = (file: UploadFile) => {
             :project-template="templateData"
             :import-data="importData"
             :import-columns="importColumns"
-            :import-only="importOnly"
+            :import-data-only="importDataOnly"
             :quick-import-type="importType"
             :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
             class="nc-quick-import-template-editor"
@@ -448,7 +448,7 @@ const beforeUpload = (file: UploadFile) => {
 
             <!-- Import Data -->
             <a-form-item class="!my-2">
-              <a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox>
+              <a-checkbox v-model:checked="importState.parserConfig.shouldImportData">{{ $t('labels.importData') }}</a-checkbox>
             </a-form-item>
           </div>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
index 6ef6335d71..8a6e9eb7c0 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
@@ -166,7 +166,7 @@ const exportFile = async (exportType: ExportTypes) => {
       </template>
     </a-dropdown>
 
-    <LazyDlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+    <LazyDlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-data-only="true" />
 
     <LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index c926a5c3d7..daa2c857f3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -228,7 +228,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
       </template>
     </a-dropdown>
 
-    <LazyDlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+    <LazyDlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-data-only="true" />
 
     <LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 3b5dafcb54..de802d00c2 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -28,7 +28,7 @@ import {
 } from '#imports'
 import { TabType } from '~/lib'
 
-const { quickImportType, projectTemplate, importData, importColumns, importOnly, maxRowsToParse } = defineProps<Props>()
+const { quickImportType, projectTemplate, importData, importColumns, importDataOnly, maxRowsToParse } = defineProps<Props>()
 
 const emit = defineEmits(['import'])
 
@@ -41,7 +41,7 @@ interface Props {
   projectTemplate: Record<string, any>
   importData: Record<string, any>
   importColumns: any[]
-  importOnly: boolean
+  importDataOnly: boolean
   maxRowsToParse: number
 }
 
@@ -123,7 +123,7 @@ const validators = computed(() =>
 const { validate, validateInfos } = useForm(data, validators)
 
 const isValid = computed(() => {
-  if (importOnly) {
+  if (importDataOnly) {
     for (const record of srcDestMapping.value) {
       if (!fieldsValidation(record)) {
         return false
@@ -362,7 +362,7 @@ function fieldsValidation(record: Record<string, any>) {
 }
 
 async function importTemplate() {
-  if (importOnly) {
+  if (importDataOnly) {
     // validate required columns
     if (!missingRequiredColumnsValidation()) return
 
@@ -555,7 +555,7 @@ defineExpose({
 })
 
 onMounted(() => {
-  if (importOnly) {
+  if (importDataOnly) {
     mapDefaultColumns()
   }
 })
@@ -579,7 +579,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 
 <template>
   <a-spin :spinning="isImporting" :tip="importingTip" size="large">
-    <a-card v-if="importOnly">
+    <a-card v-if="importDataOnly">
       <a-form :model="data" name="import-only">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 70e85eab80..68877002d2 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -243,7 +243,7 @@ export default class CSVTemplateAdapter {
           that.updateTemplate(tableIdx)
 
           // parse table data
-          if (that.config.importData) {
+          if (that.config.shouldImportData) {
             steppers = 0
             parse(file.originFileObj as File, {
               worker: true,
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index ac3f2f17a3..8c47c58e03 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -205,7 +205,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             this.project.tables.push(table)
 
             this.data[tn] = []
-            if (this.config.importData) {
+            if (this.config.shouldImportData) {
               let rowIndex = 0
               for (const row of rows.slice(1)) {
                 const rowData: Record<string, any> = {}
diff --git a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
index a3ea20a1e0..6a228a7488 100644
--- a/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONTemplateAdapter.ts
@@ -64,7 +64,7 @@ export default class JSONTemplateAdapter extends TemplateGenerator {
       table.columns.push(...columns)
     }
 
-    if (this.config.importData) {
+    if (this.config.shouldImportData) {
       this._parseTableData(table)
     }
 

From 4d79f69f8da52d3fe5f8d0c62fa080e939cb5670 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 15:59:13 +0800
Subject: [PATCH 061/117] feat(nc-gui): disable advanced setting options when
 importDataOnly is true

---
 packages/nc-gui/components/dlg/QuickImport.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index f18ed5df6a..159d3e4ab4 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -427,13 +427,13 @@ const beforeUpload = (file: UploadFile) => {
               <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
             </a-form-item>
 
-            <a-form-item class="!my-2">
+            <a-form-item v-if="!importDataOnly" class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.autoSelectFieldTypes">
                 <span class="caption">Auto-Select Field Types</span>
               </a-checkbox>
             </a-form-item>
 
-            <a-form-item v-if="isImportTypeCsv" class="!my-2">
+            <a-form-item v-if="isImportTypeCsv && !importDataOnly" class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.firstRowAsHeaders">
                 <span class="caption">Use First Row as Headers</span>
               </a-checkbox>
@@ -447,7 +447,7 @@ const beforeUpload = (file: UploadFile) => {
             </a-form-item>
 
             <!-- Import Data -->
-            <a-form-item class="!my-2">
+            <a-form-item v-if="!importDataOnly" class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.shouldImportData">{{ $t('labels.importData') }}</a-checkbox>
             </a-form-item>
           </div>

From b6f81de2b37c17c9f050057cbd670d77a48876b1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 16:17:35 +0800
Subject: [PATCH 062/117] refactor(nc-gui): move the parse string date logic to
 dateTimeUtil

---
 packages/nc-gui/components/template/Editor.vue | 10 ++++------
 packages/nc-gui/utils/dateTimeUtils.ts         | 10 ++++++++++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index de802d00c2..5e31eb7490 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -19,6 +19,7 @@ import {
   message,
   nextTick,
   onMounted,
+  parseStringDate,
   reactive,
   ref,
   useI18n,
@@ -244,12 +245,7 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
           dateFormat = getDateFormat(d)
           dateFormatMap[col.key] = dateFormat
         }
-        const dayjsObj = dayjs(d)
-        if (dayjsObj.isValid()) {
-          d = dayjsObj.format('YYYY-MM-DD')
-        } else {
-          d = dayjs(d, dateFormat).format('YYYY-MM-DD')
-        }
+        d = parseStringDate(d, dateFormat)
       } else if (col.uidt === UITypes.DateTime && d) {
         d = dayjs(data[key]).utc().format('YYYY-MM-DD HH:mm')
       }
@@ -406,6 +402,8 @@ async function importTemplate() {
                 if (input === '') {
                   input = null
                 }
+              } else if (v.uidt === UITypes.Date) {
+                input = parseStringDate(input, v.meta.date_format)
               }
               res[col.destCn] = input
             }
diff --git a/packages/nc-gui/utils/dateTimeUtils.ts b/packages/nc-gui/utils/dateTimeUtils.ts
index a1f55a62ca..a83ec9c364 100644
--- a/packages/nc-gui/utils/dateTimeUtils.ts
+++ b/packages/nc-gui/utils/dateTimeUtils.ts
@@ -51,3 +51,13 @@ export function getDateFormat(v: string) {
   }
   return 'YYYY/MM/DD'
 }
+
+export function parseStringDate(v: string, dateFormat: string) {
+  const dayjsObj = dayjs(v)
+  if (dayjsObj.isValid()) {
+    v = dayjsObj.format('YYYY-MM-DD')
+  } else {
+    v = dayjs(v, dateFormat).format('YYYY-MM-DD')
+  }
+  return v
+}

From 3d18d991e24a5420172ba974cc0353e4e7312ceb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 16:36:31 +0800
Subject: [PATCH 063/117] fix(nc-gui): fallback to row[i] if cellObj.w s not
 found

---
 packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 8c47c58e03..c74db91162 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -217,7 +217,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                       r: rowIndex + columnNameRowExist,
                     })
                     const cellObj = ws[cellId]
-                    rowData[table.columns[i].column_name] = cellObj.w
+                    rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
                   } else {
                     if (table.columns[i].uidt === UITypes.Checkbox) {
                       rowData[table.columns[i].column_name] = getCheckboxValue(row[i])

From e884a7d1d42d43844c57b8153c910d14559b64bc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 10:58:42 +0200
Subject: [PATCH 064/117] refactor(nc-gui): move readonly injection to
 smartsheet

---
 .../nc-gui/components/smartsheet/Gallery.vue   |  1 -
 packages/nc-gui/components/smartsheet/Grid.vue |  2 --
 .../nc-gui/components/smartsheet/Kanban.vue    |  2 --
 packages/nc-gui/components/tabs/Smartsheet.vue |  5 ++++-
 .../pages/[projectType]/view/[viewId].vue      | 18 +-----------------
 5 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 0d6f47974c..807a02bea7 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -58,7 +58,6 @@ provide(IsGalleryInj, ref(true))
 provide(IsGridInj, ref(false))
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index b0a882ade4..5e2b201105 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -141,8 +141,6 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
-provide(ReadonlyInj, !hasEditPermission)
-
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 4a805a9441..fa9a931619 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -85,8 +85,6 @@ provide(IsGridInj, ref(false))
 
 provide(IsKanbanInj, ref(true))
 
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
-
 const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 38d473de5c..d33a7990e9 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -19,6 +19,7 @@ import {
   useMetas,
   useProvideKanbanViewStore,
   useProvideSmartsheetStore,
+  useUIPermission,
 } from '#imports'
 import type { TabItem } from '~/lib'
 
@@ -26,6 +27,8 @@ const props = defineProps<{
   activeTab: TabItem
 }>()
 
+const { isUIAllowed } = useUIPermission()
+
 const { metas } = useMetas()
 
 const activeTab = toRef(props, 'activeTab')
@@ -56,7 +59,7 @@ provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
-provide(ReadonlyInj, false)
+provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 </script>
 
 <template>
diff --git a/packages/nc-gui/pages/[projectType]/view/[viewId].vue b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
index 987eb4bec7..0801ea6c89 100644
--- a/packages/nc-gui/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
@@ -1,16 +1,5 @@
 <script setup lang="ts">
-import {
-  ReadonlyInj,
-  ReloadViewDataHookInj,
-  createEventHook,
-  definePageMeta,
-  extractSdkResponseErrorMsg,
-  message,
-  provide,
-  ref,
-  useRoute,
-  useSharedView,
-} from '#imports'
+import { definePageMeta, extractSdkResponseErrorMsg, message, ref, useRoute, useSharedView } from '#imports'
 
 definePageMeta({
   public: true,
@@ -20,11 +9,6 @@ definePageMeta({
 
 const route = useRoute()
 
-const reloadEventHook = createEventHook()
-
-provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, true)
-
 const { loadSharedView } = useSharedView()
 
 const showPassword = ref(false)

From c3ce9406766ea59664b1f1923b95d919c5e95ec3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 12:04:43 +0200
Subject: [PATCH 065/117] chore(nc-gui): suspend form

---
 .../smartsheet/expanded-form/index.vue        | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 01c4505cc1..a3acbd571b 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -12,7 +12,6 @@ import {
   createEventHook,
   inject,
   message,
-  onBeforeMount,
   provide,
   ref,
   toRef,
@@ -60,23 +59,21 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
-onBeforeMount(async () => {
-  if (props.loadRow) {
-    await loadRow()
-  }
+if (props.loadRow) {
+  await loadRow()
+}
 
-  if (props.rowId) {
-    try {
-      await loadRow(props.rowId)
-    } catch (e: any) {
-      if (e.response?.status === 404) {
-        // todo: i18n
-        message.error('Record not found')
-        router.replace({ query: {} })
-      } else throw e
-    }
+if (props.rowId) {
+  try {
+    await loadRow(props.rowId)
+  } catch (e: any) {
+    if (e.response?.status === 404) {
+      // todo: i18n
+      message.error('Record not found')
+      router.replace({ query: {} })
+    } else throw e
   }
-})
+}
 
 useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)
 
@@ -139,7 +136,6 @@ export default {
     width="min(90vw,1000px)"
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
-    destroy-on-close
     class="nc-drawer-expanded-form"
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />

From 7068fbcdd9cca45298464595b023ba7b2c7d9336 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 18:08:51 +0800
Subject: [PATCH 066/117] feat(nc-gui): import url logic

---
 .../nc-gui/components/dlg/QuickImport.vue     |  27 ++--
 .../utils/parsers/CSVTemplateAdapter.ts       | 119 +++++++++++-------
 .../utils/parsers/ExcelTemplateAdapter.ts     |   4 +-
 3 files changed, 89 insertions(+), 61 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 159d3e4ab4..4326db70e5 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -197,14 +197,14 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
 
     await templateGenerator.init()
 
-    templateGenerator.parse(() => {
-      templateData.value = templateGenerator!.getTemplate()
-      if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
-      importData.value = templateGenerator!.getData()
-      templateEditorModal.value = true
-      isParsingData.value = false
-      preImportLoading.value = false
-    })
+    await templateGenerator.parse()
+
+    templateData.value = templateGenerator!.getTemplate()
+    if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
+    importData.value = templateGenerator!.getData()
+    templateEditorModal.value = true
+    isParsingData.value = false
+    preImportLoading.value = false
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -273,10 +273,15 @@ function getAdapter(val: any) {
   if (isImportTypeCsv.value) {
     switch (activeKey.value) {
       case 'uploadTab':
-        return new CSVTemplateAdapter(val, importState.parserConfig)
+        return new CSVTemplateAdapter(val, {
+          ...importState.parserConfig,
+          importFromURL: false,
+        })
       case 'urlTab':
-        // TODO(import): implement one for CSV
-        return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
+        return new CSVTemplateAdapter(val, {
+          ...importState.parserConfig,
+          importFromURL: true,
+        })
     }
   } else if (IsImportTypeExcel.value) {
     switch (activeKey.value) {
diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 68877002d2..89e71cf368 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -15,7 +15,7 @@ import {
 
 export default class CSVTemplateAdapter {
   config: Record<string, any>
-  files: UploadFile[]
+  source: UploadFile[] | string
   detectedColumnTypes: Record<number, Record<string, number>>
   distinctValues: Record<number, Set<string>>
   headers: Record<number, string[]>
@@ -26,9 +26,9 @@ export default class CSVTemplateAdapter {
   data: Record<string, any> = {}
   columnValues: Record<number, []>
 
-  constructor(files: UploadFile[], parserConfig = {}) {
+  constructor(source: UploadFile[] | string, parserConfig = {}) {
     this.config = parserConfig
-    this.files = files
+    this.source = source
     this.project = {
       tables: [],
     }
@@ -199,15 +199,59 @@ export default class CSVTemplateAdapter {
     }
   }
 
-  parse(callback: Function) {
-    const that = this
-    for (const [tableIdx, file] of this.files.entries()) {
+  async _parseTableData(tableIdx: number, source: UploadFile | string, tn: string) {
+    return new Promise((resolve) => {
+      const that = this
       let steppers = 0
-      const tn = file.name.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
-      this.data[tn] = []
+      if (that.config.shouldImportData) {
+        steppers = 0
+        const parseSource = (this.config.importFromURL ? (source as string) : (source as UploadFile).originFileObj)!
+        parse(parseSource, {
+          download: that.config.importFromURL,
+          worker: true,
+          skipEmptyLines: 'greedy',
+          step(row) {
+            steppers += 1
+            if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
+              const rowData: Record<string, any> = {}
+              for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
+                const column = that.project.tables[tableIdx].columns[columnIdx]
+                const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
+                if (column.uidt === UITypes.Checkbox) {
+                  rowData[column.column_name] = getCheckboxValue(data)
+                  rowData[column.column_name] = data
+                } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
+                  rowData[column.column_name] = (data || '').toString().trim() || null
+                } else {
+                  // TODO(import): do parsing if necessary based on type
+                  rowData[column.column_name] = data
+                }
+              }
+              that.data[tn].push(rowData)
+            }
+          },
+          complete() {
+            console.log('getData(): complete')
+            console.log(`getData(): steppers: ${steppers}`)
+            resolve(true)
+          },
+          // TODO(import): add error
+        })
+      }
+    })
+  }
 
-      // parse column meta
-      parse(file.originFileObj as File, {
+  async _parseTableMeta(tableIdx: number, source: UploadFile | string) {
+    return new Promise((resolve) => {
+      const that = this
+      let steppers = 0
+      const tn = ((this.config.importFromURL ? (source as string).split('/').pop() : (source as UploadFile).name) as string)
+        .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
+        .trim()!
+      this.data[tn] = []
+      const parseSource = (this.config.importFromURL ? (source as string) : (source as UploadFile).originFileObj)!
+      parse(parseSource, {
+        download: that.config.importFromURL,
         worker: true,
         skipEmptyLines: 'greedy',
         step(row) {
@@ -237,49 +281,28 @@ export default class CSVTemplateAdapter {
             }
           }
         },
-        complete() {
+        async complete() {
           console.log('complete')
           console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
-
-          // parse table data
-          if (that.config.shouldImportData) {
-            steppers = 0
-            parse(file.originFileObj as File, {
-              worker: true,
-              skipEmptyLines: 'greedy',
-              step(row) {
-                steppers += 1
-                if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
-                  const rowData: Record<string, any> = {}
-                  for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
-                    const column = that.project.tables[tableIdx].columns[columnIdx]
-                    const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
-                    if (column.uidt === UITypes.Checkbox) {
-                      rowData[column.column_name] = getCheckboxValue(data)
-                      rowData[column.column_name] = data
-                    } else if (column.uidt === UITypes.SingleSelect || column.uidt === UITypes.MultiSelect) {
-                      rowData[column.column_name] = (data || '').toString().trim() || null
-                    } else {
-                      // TODO(import): do parsing if necessary based on type
-                      rowData[column.column_name] = data
-                    }
-                  }
-                  that.data[tn].push(rowData)
-                }
-              },
-              complete() {
-                console.log('getData(): complete')
-                console.log(`getData(): steppers: ${steppers}`)
-                callback()
-              },
-              // TODO(import): add error
-            })
-          } else {
-            callback()
-          }
+          await that._parseTableData(tableIdx, source, tn)
+          resolve(true)
         },
       })
+    })
+  }
+
+  async parse() {
+    if (this.config.importFromURL) {
+      await this._parseTableMeta(0, this.source as string)
+    } else {
+      await Promise.all(
+        (this.source as UploadFile[]).map((file: UploadFile, tableIdx: number) =>
+          (async (f, idx) => {
+            await this._parseTableMeta(idx, f)
+          })(file, tableIdx),
+        ),
+      )
     }
   }
 
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index c74db91162..ff4650d851 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -56,7 +56,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
     })
   }
 
-  parse(callback: Function) {
+  async parse() {
     const tableNamePrefixRef: Record<string, any> = {}
     this.wb.SheetNames.reduce((acc: any, sheet: any) => {
       return acc.then(
@@ -253,7 +253,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             resolve(true)
           }),
       )
-    }, Promise.resolve()).then(callback)
+    }, Promise.resolve())
   }
 
   getTemplate() {

From ade79ecd508da2f59355c50bdb95b626d8de9408 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 18:10:08 +0800
Subject: [PATCH 067/117] feat(nc-gui): allow Use First Row as Headers when
 importing to existing table

---
 packages/nc-gui/components/dlg/QuickImport.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 4326db70e5..c6abf64ec1 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -438,7 +438,7 @@ const beforeUpload = (file: UploadFile) => {
               </a-checkbox>
             </a-form-item>
 
-            <a-form-item v-if="isImportTypeCsv && !importDataOnly" class="!my-2">
+            <a-form-item v-if="isImportTypeCsv" class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.firstRowAsHeaders">
                 <span class="caption">Use First Row as Headers</span>
               </a-checkbox>

From 030bab3c9b8e14e485213b5fedeefdce0d2daf1a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 12:25:16 +0200
Subject: [PATCH 068/117] revert(nc-gui): list items to use regular expanded
 form

---
 .../nc-gui/components/smartsheet/Grid.vue     |  1 +
 .../components/ListChildItems.vue             | 43 +++++++++++--------
 .../virtual-cell/components/ListItems.vue     | 40 ++++++++---------
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5e2b201105..e2cac568b6 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -18,6 +18,7 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
+  enumColor,
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index eec01a1cdd..8e9f1c875d 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -11,13 +11,11 @@ import {
   h,
   inject,
   ref,
-  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
   watch,
 } from '#imports'
-import type { Row } from '~/lib'
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
@@ -33,8 +31,6 @@ const column = inject(ColumnInj)
 
 const readonly = inject(ReadonlyInj, false)
 
-const { open } = useExpandedFormDetached()
-
 const {
   childrenList,
   deleteRelatedRow,
@@ -76,11 +72,15 @@ const unlinkIfNewRow = async (row: Record<string, any>) => {
 const container = computed(() =>
   isForm.value
     ? h('div', {
-        class: 'w-full p-2',
-      })
+      class: 'w-full p-2',
+    })
     : Modal,
 )
 
+const expandedFormDlg = ref(false)
+
+const expandedFormRow = ref()
+
 /** reload children list whenever cell value changes and list is visible */
 watch(
   () => props.cellValue,
@@ -88,18 +88,6 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
-
-function openExpandedForm(row: Row) {
-  if (readonly) return
-
-  open({
-    isOpen: true,
-    row: { row, oldRow: row, rowMeta: {} },
-    meta: relatedTableMeta.value,
-    loadRow: true,
-    useMetaFields: true,
-  })
-}
 </script>
 
 <template>
@@ -138,7 +126,13 @@ function openExpandedForm(row: Row) {
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="openExpandedForm(row)"
+            @click="
+              () => {
+                if (readonly) return
+                expandedFormRow = row
+                expandedFormDlg = true
+              }
+            "
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
@@ -182,6 +176,17 @@ function openExpandedForm(row: Row) {
         :image-style="isForm ? { height: '20px' } : {}"
       />
     </div>
+
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormRow && expandedFormDlg"
+        v-model="expandedFormDlg"
+        :row="{ row: expandedFormRow, oldRow: expandedFormRow, rowMeta: {} }"
+        :meta="relatedTableMeta"
+        load-row
+        use-meta-fields
+      />
+    </Suspense>
   </component>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index af7f606bae..df6700cd02 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -7,7 +7,6 @@ import {
   computed,
   inject,
   ref,
-  useExpandedFormDetached,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
@@ -23,8 +22,6 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
 
-const { open, close } = useExpandedFormDetached()
-
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -60,6 +57,8 @@ watch(vModel, (nextVal, prevVal) => {
   }
 })
 
+const expandedFormDlg = ref(false)
+
 /** populate initial state for a new row which is parent/child of current record */
 const newRowState = computed(() => {
   if (isNew.value) return {}
@@ -94,23 +93,11 @@ const newRowState = computed(() => {
   }
 })
 
-function openExpandedForm() {
-  // if it's an existing record close the list
-  // after new record creation since it's already linking while creating
-  if (!isNew.value) {
-    vModel.value = false
-    return close()
-  }
-
-  open({
-    isOpen: true,
-    row: { row: {}, oldRow: {}, rowMeta: { new: true } },
-    meta: relatedTableMeta.value,
-    loadRow: false,
-    useMetaFields: true,
-    state: newRowState.value,
-  })
-}
+// if it's an existing record close the list
+// after new record creation since it's already linking while creating
+watch(expandedFormDlg, (nexVal) => {
+  if (!nexVal && !isNew.value) vModel.value = false
+})
 </script>
 
 <template>
@@ -135,7 +122,7 @@ function openExpandedForm() {
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
 
         <!--        Add new record -->
-        <a-button v-if="!isPublic" type="primary" size="small" @click="openExpandedForm">
+        <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">
           {{ $t('activity.addNewRecord') }}
         </a-button>
       </div>
@@ -169,6 +156,17 @@ function openExpandedForm() {
       </template>
 
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+
+      <Suspense>
+        <LazySmartsheetExpandedForm
+          v-if="expandedFormDlg"
+          v-model="expandedFormDlg"
+          :meta="relatedTableMeta"
+          :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
+          :state="newRowState"
+          use-meta-fields
+        />
+      </Suspense>
     </div>
   </a-modal>
 </template>

From 72e6ef626d024632ebc3d71bbdf2723fde0b4d98 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 18:41:35 +0800
Subject: [PATCH 069/117] fix(nc-gui): pass empty object instead of name in
 JSONUrlTemplateAdapter

---
 packages/nc-gui/utils/parsers/JSONUrlTemplateAdapter.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/JSONUrlTemplateAdapter.ts b/packages/nc-gui/utils/parsers/JSONUrlTemplateAdapter.ts
index 8c83bf9d53..1dabb06378 100644
--- a/packages/nc-gui/utils/parsers/JSONUrlTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/JSONUrlTemplateAdapter.ts
@@ -7,8 +7,7 @@ export default class JSONUrlTemplateAdapter extends JSONTemplateAdapter {
 
   constructor(url: string, parserConfig: Record<string, any>) {
     const { $api } = useNuxtApp()
-    const name = url.split('/').pop()
-    super(name, parserConfig)
+    super({}, parserConfig)
     this.url = url
     this.$api = $api
   }

From e72bc313523d024dc90bd7b6411f16f151f849e4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 19:05:14 +0800
Subject: [PATCH 070/117] fix(nc-gui): pass empty object instead of name in
 ExcelUrlTemplateAdapter

---
 packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts
index e628498340..8bab9e0d97 100644
--- a/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts
@@ -9,7 +9,7 @@ export default class ExcelUrlTemplateAdapter extends ExcelTemplateAdapter {
   constructor(url: string, parserConfig: Record<string, any>) {
     const { $api } = useNuxtApp()
     const name = url?.split('/').pop()
-    super(name, parserConfig)
+    super({}, parserConfig)
     this.url = url
     this.excelData = null
     this.$api = $api

From 5ef9b64b60ed608be17011e6ad0153124761940b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 19:06:52 +0800
Subject: [PATCH 071/117] fix(nc-gui): apply promise.all on excel parse
 function

---
 .../nc-gui/utils/parsers/ExcelTemplateAdapter.ts  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index ff4650d851..00e2341600 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -58,10 +58,10 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
 
   async parse() {
     const tableNamePrefixRef: Record<string, any> = {}
-    this.wb.SheetNames.reduce((acc: any, sheet: any) => {
-      return acc.then(
-        () =>
-          new Promise((resolve) => {
+    await Promise.all(
+      this.wb.SheetNames.map((sheetName: string) =>
+        (async (sheet) => {
+          await new Promise((resolve) => {
             const columnNamePrefixRef: Record<string, any> = { id: 0 }
             let tn: string = (sheet || 'table').replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()
 
@@ -251,9 +251,10 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             }
 
             resolve(true)
-          }),
-      )
-    }, Promise.resolve())
+          })
+        })(sheetName),
+      ),
+    )
   }
 
   getTemplate() {

From 8df7d8423c7ae1f568294c88c168161c21377282 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 13:29:19 +0200
Subject: [PATCH 072/117] tests: reduce test flakiness

---
 .../integration/common/1a_table_operations.js | 58 ++++++++++---------
 .../common/1b_table_column_operations.js      | 15 +----
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/scripts/cypress/integration/common/1a_table_operations.js b/scripts/cypress/integration/common/1a_table_operations.js
index 962e206eec..3891da4841 100644
--- a/scripts/cypress/integration/common/1a_table_operations.js
+++ b/scripts/cypress/integration/common/1a_table_operations.js
@@ -43,33 +43,37 @@ export const genTest = (apiType, dbType) => {
       return cy.get("tbody > tr").eq(row).find("td.ant-table-cell").eq(col);
     };
 
-    it("Open Audit tab", () => {
-      // http://localhost:8080/api/v1/db/meta/projects/p_bxp57hmks0n5o2/audits?offset=0&limit=25
-      cy.intercept("/**/audits?offset=*&limit=*").as("waitForPageLoad");
-
-      // mainPage.navigationDraw(mainPage.AUDIT).click();
-      settingsPage.openMenu(settingsPage.AUDIT);
-      // wait for column headers to appear
-      //
-      cy.get("thead > tr > th.ant-table-cell").should("have.length", 5);
-
-      cy.wait("@waitForPageLoad");
-
-      // Audit table entries
-      //  [Header] Operation Type, Operation Sub Type, Description, User, Created
-      //  [0] TABLE, DELETED, delete table table-x, user@nocodb.com, ...
-      //  [1] TABLE, Created, created table table-x, user@nocodb.com, ...
-
-      getAuditCell(0, 0).contains("TABLE").should("exist");
-      getAuditCell(0, 1).contains("DELETED").should("exist");
-      getAuditCell(0, 3).contains("user@nocodb.com").should("exist");
-
-      getAuditCell(1, 0).contains("TABLE").should("exist");
-      getAuditCell(1, 1).contains("CREATED").should("exist");
-      getAuditCell(1, 3).contains("user@nocodb.com").should("exist");
-
-      settingsPage.closeMenu();
-    });
+    describe("Check Audit Tab Cells", () => {
+      it("Open Audit tab", () => {
+        // http://localhost:8080/api/v1/db/meta/projects/p_bxp57hmks0n5o2/audits?offset=0&limit=25
+        cy.intercept("/**/audits?offset=*&limit=*").as("waitForPageLoad");
+
+        // mainPage.navigationDraw(mainPage.AUDIT).click();
+        settingsPage.openMenu(settingsPage.AUDIT);
+        // wait for column headers to appear
+        //
+        cy.get("thead > tr > th.ant-table-cell").should("have.length", 5);
+
+        cy.wait("@waitForPageLoad");
+
+        // Audit table entries
+        //  [Header] Operation Type, Operation Sub Type, Description, User, Created
+        //  [0] TABLE, DELETED, delete table table-x, user@nocodb.com, ...
+        //  [1] TABLE, Created, created table table-x, user@nocodb.com, ...
+
+        getAuditCell(0, 0).contains("TABLE").should("exist");
+        getAuditCell(0, 1).contains("DELETED").should("exist");
+        getAuditCell(0, 3).contains("user@nocodb.com").should("exist");
+
+        getAuditCell(1, 0).contains("TABLE").should("exist");
+        getAuditCell(1, 1).contains("CREATED").should("exist");
+        getAuditCell(1, 3).contains("user@nocodb.com").should("exist");
+      });
+
+      after(() => {
+        settingsPage.closeMenu();
+      })
+    })
 
     it("Table Rename operation", () => {
       cy.get(".nc-project-tree-tbl-City").should("exist").click();
diff --git a/scripts/cypress/integration/common/1b_table_column_operations.js b/scripts/cypress/integration/common/1b_table_column_operations.js
index 5c0bab0826..0e6bdc78f6 100644
--- a/scripts/cypress/integration/common/1b_table_column_operations.js
+++ b/scripts/cypress/integration/common/1b_table_column_operations.js
@@ -36,11 +36,6 @@ export const genTest = (apiType, dbType) => {
     const randVal = "Test@1234.com";
     const updatedRandVal = "Updated@1234.com";
 
-    // before(() => {
-    //     cy.restoreLocalStorage();
-    //     cy.createTable(name);
-    // })
-
     beforeEach(() => {
       cy.restoreLocalStorage();
     });
@@ -49,11 +44,6 @@ export const genTest = (apiType, dbType) => {
       cy.saveLocalStorage();
     });
 
-    // // delete table
-    // after(() => {
-    //     cy.deleteTable(name, dbType);
-    // });
-
     it("Create Table Column", () => {
       cy.createTable(name);
       mainPage.addColumn(colName, name);
@@ -138,8 +128,9 @@ export const genTest = (apiType, dbType) => {
         .find(".nc-row-no")
         .should("exist")
         .eq(0)
-        .trigger("mouseover", { force: true });
-      cy.get(".nc-row-expand").click({ force: true });
+        .trigger("mouseover", { force: true })
+        .get(".nc-row-expand")
+        .click({ force: true });
 
       // wait for page render to complete
       cy.get('button:contains("Save row"):visible').should("exist");

From bed98a7ba413a034c09c7f90547a751f94f38717 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 19:39:04 +0800
Subject: [PATCH 073/117] feat(nc-gui): allow excel import to check use first
 row as headers

---
 packages/nc-gui/components/dlg/QuickImport.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index c6abf64ec1..aa5a21cf2f 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -438,7 +438,7 @@ const beforeUpload = (file: UploadFile) => {
               </a-checkbox>
             </a-form-item>
 
-            <a-form-item v-if="isImportTypeCsv" class="!my-2">
+            <a-form-item v-if="isImportTypeCsv || IsImportTypeExcel" class="!my-2">
               <a-checkbox v-model:checked="importState.parserConfig.firstRowAsHeaders">
                 <span class="caption">Use First Row as Headers</span>
               </a-checkbox>

From f4b611b5dc0eef434c4c653e645ec7b40fc1e121 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 19:42:29 +0800
Subject: [PATCH 074/117] chore(nc-gui): remove unused name in
 ExcelUrlTemplateAdapter

---
 packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts
index 8bab9e0d97..392945e449 100644
--- a/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelUrlTemplateAdapter.ts
@@ -8,7 +8,6 @@ export default class ExcelUrlTemplateAdapter extends ExcelTemplateAdapter {
 
   constructor(url: string, parserConfig: Record<string, any>) {
     const { $api } = useNuxtApp()
-    const name = url?.split('/').pop()
     super({}, parserConfig)
     this.url = url
     this.excelData = null

From 1863a18efc745ef448c48ff9359d6a8f7a86f24b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 21 Oct 2022 19:42:45 +0800
Subject: [PATCH 075/117] feat(nc-gui): support header option in Excel Import

---
 .../utils/parsers/ExcelTemplateAdapter.ts     | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 00e2341600..edc6d8aaa2 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -73,7 +73,13 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
             const table = { table_name: tn, ref_table_name: tn, columns: [] as any[] }
             const ws: any = this.wb.Sheets[sheet]
             const range = this.xlsx.utils.decode_range(ws['!ref'])
-            let rows: any = this.xlsx.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null })
+            let rows: any = this.xlsx.utils.sheet_to_json(ws, {
+              // header has to be 1 disregarding this.config.firstRowAsHeaders
+              // so that it generates an array of arrays
+              header: 1,
+              blankrows: false,
+              defval: null,
+            })
 
             // fix precision bug & timezone offset issues introduced by xlsx
             const basedate = new Date(1899, 11, 30, 0, 0, 0)
@@ -96,11 +102,9 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
               }),
             )
 
-            const columnNameRowExist = +rows[0].every((v: any) => v === null || typeof v === 'string')
-
             for (let col = 0; col < rows[0].length; col++) {
               let cn: string = (
-                (columnNameRowExist && rows[0] && rows[0][col] && rows[0][col].toString().trim()) ||
+                (this.config.firstRowAsHeaders && rows[0] && rows[0][col] && rows[0][col].toString().trim()) ||
                 `field_${col + 1}`
               )
                 .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
@@ -121,9 +125,10 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
               if (this.config.autoSelectFieldTypes) {
                 const cellId = this.xlsx.utils.encode_cell({
                   c: range.s.c + col,
-                  r: columnNameRowExist,
+                  r: +this.config.firstRowAsHeaders,
                 })
                 const cellProps = ws[cellId] || {}
+                console.log(cn, cellProps)
                 column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
 
                 if (column.uidt === UITypes.SingleLineText) {
@@ -140,7 +145,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     column.uidt = UITypes.URL
                   } else {
                     const vals = rows
-                      .slice(columnNameRowExist ? 1 : 0)
+                      .slice(+this.config.firstRowAsHeaders)
                       .map((r: any) => r[col])
                       .filter((v: any) => v !== null && v !== undefined && v.toString().trim() !== '')
 
@@ -164,7 +169,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
                       const cellId = this.xlsx.utils.encode_cell({
                         c: range.s.c + col,
-                        r: i + columnNameRowExist,
+                        r: i + +this.config.firstRowAsHeaders,
                       })
 
                       const cellObj = ws[cellId]
@@ -182,7 +187,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     rows.slice(1, this.config.maxRowsToParse).every((v: any, i: any) => {
                       const cellId = this.xlsx.utils.encode_cell({
                         c: range.s.c + col,
-                        r: i + columnNameRowExist,
+                        r: i + +this.config.firstRowAsHeaders,
                       })
 
                       const cellObj = ws[cellId]
@@ -214,7 +219,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     // take raw data instead of data parsed by xlsx
                     const cellId = this.xlsx.utils.encode_cell({
                       c: range.s.c + i,
-                      r: rowIndex + columnNameRowExist,
+                      r: rowIndex + +this.config.firstRowAsHeaders,
                     })
                     const cellObj = ws[cellId]
                     rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]
@@ -224,7 +229,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     } else if (table.columns[i].uidt === UITypes.Currency) {
                       const cellId = this.xlsx.utils.encode_cell({
                         c: range.s.c + i,
-                        r: rowIndex + columnNameRowExist,
+                        r: rowIndex + +this.config.firstRowAsHeaders,
                       })
 
                       const cellObj = ws[cellId]
@@ -235,7 +240,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     } else if (table.columns[i].uidt === UITypes.Date) {
                       const cellId = this.xlsx.utils.encode_cell({
                         c: range.s.c + i,
-                        r: rowIndex + columnNameRowExist,
+                        r: rowIndex + +this.config.firstRowAsHeaders,
                       })
                       const cellObj = ws[cellId]
                       rowData[table.columns[i].column_name] = (cellObj && cellObj.w) || row[i]

From eb76e7b22df9e83136afc80698b828e0c69917c1 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 15:18:57 +0200
Subject: [PATCH 076/117] tests: close modal in 2b tests

---
 .../common/2b_table_with_m2m_column.js        | 28 +++----------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/scripts/cypress/integration/common/2b_table_with_m2m_column.js b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
index bfc7735b92..ab56c2e96a 100644
--- a/scripts/cypress/integration/common/2b_table_with_m2m_column.js
+++ b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
@@ -49,8 +49,7 @@ export const genTest = (apiType, dbType) => {
         .getCell("Film List", 1)
         .should("exist")
         .trigger("mouseover")
-        .click();
-      cy.get(".nc-action-icon").eq(0).should("exist").click({ force: true });
+        .get(".nc-action-icon").eq(0).should("exist").click({ force: true });
 
       // GUI-v2 Kludge:
       // validations
@@ -70,26 +69,8 @@ export const genTest = (apiType, dbType) => {
       cy.getActiveModal(".nc-modal-child-list")
         .find("button:contains(Link to 'Film')")
         .click()
-        .then(() => {
-          // Link record form validation
-          cy.getActiveModal(".nc-modal-link-record")
-            .contains("Link record")
-            .should("exist");
-          cy.getActiveModal(".nc-modal-link-record")
-            .find(".nc-reload")
-            .should("exist");
-          cy.getActiveModal(".nc-modal-link-record")
-            .find('button:contains("Add new record")')
-            .should("exist");
-          cy.getActiveModal(".nc-modal-link-record")
-            .find(".ant-card")
-            .eq(0)
-            .contains("ACE GOLDFINGER")
-            .should("exist");
-          cy.getActiveModal(".nc-modal-link-record")
-            .find("button.ant-modal-close")
-            .click();
-        });
+
+        cy.getActiveModal('.nc-modal-link-record').find('.ant-modal-close').click()
     });
 
     it("Expand first linked card, validate", () => {
@@ -98,8 +79,7 @@ export const genTest = (apiType, dbType) => {
         .getCell("Film List", 1)
         .should("exist")
         .trigger("mouseover")
-        .click();
-      cy.get(".nc-action-icon").eq(0).should("exist").click({ force: true });
+        .get(".nc-action-icon").eq(0).should("exist").click({ force: true });
 
       cy.getActiveModal(".nc-modal-child-list")
         .find(".ant-card")

From 4478c23b97c381b96b9019396c037dbefb8c978c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 17:00:10 +0200
Subject: [PATCH 077/117] fix(nc-gui): hide floating language btn in shared
 grid view

---
 packages/nc-gui/layouts/base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index 90104d00e4..cdd6ada9c3 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -127,7 +127,7 @@ hooks.hook('page:finish', () => {
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
 
-        <LazyGeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
+        <LazyGeneralLanguage v-if="!signedIn && !route.params.projectId" class="nc-lang-btn" />
       </a-tooltip>
 
       <div class="w-full h-full overflow-hidden">

From 8b255f3096240a8fd81830b7afd3844e05ca5ad3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 17:00:27 +0200
Subject: [PATCH 078/117] refactor(nc-gui): use ref for readonly injection

---
 packages/nc-gui/components/cell/DatePicker.vue              | 2 +-
 packages/nc-gui/components/cell/DateTimePicker.vue          | 2 +-
 packages/nc-gui/components/cell/TimePicker.vue              | 2 +-
 packages/nc-gui/components/cell/YearPicker.vue              | 2 +-
 packages/nc-gui/components/cell/attachment/utils.ts         | 2 +-
 packages/nc-gui/components/shared-view/Gallery.vue          | 2 +-
 packages/nc-gui/components/shared-view/Grid.vue             | 2 +-
 packages/nc-gui/components/shared-view/Kanban.vue           | 2 +-
 packages/nc-gui/components/smartsheet/Cell.vue              | 3 ++-
 packages/nc-gui/components/smartsheet/Grid.vue              | 2 +-
 packages/nc-gui/components/tabs/Smartsheet.vue              | 5 ++++-
 packages/nc-gui/components/virtual-cell/BelongsTo.vue       | 2 +-
 packages/nc-gui/components/virtual-cell/HasMany.vue         | 2 +-
 packages/nc-gui/components/virtual-cell/Lookup.vue          | 2 +-
 packages/nc-gui/components/virtual-cell/ManyToMany.vue      | 2 +-
 .../nc-gui/components/virtual-cell/components/ItemChip.vue  | 2 +-
 .../components/virtual-cell/components/ListChildItems.vue   | 6 +++---
 packages/nc-gui/context/index.ts                            | 2 +-
 18 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 644dab08c0..f69152fd1a 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const columnMeta = inject(ColumnInj, null)!
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isDateInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index fb192cfc8c..d444494c8c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isDateInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index ea39b148f8..0844c73065 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isTimeInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 284abb6be7..d22386a538 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -10,7 +10,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 let isYearInvalid = $ref(false)
 
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index b96f2fba7d..b041945553 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -33,7 +33,7 @@ interface AttachmentProps extends File {
 
 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
   (updateModelValue: (data: string | Record<string, any>[]) => void) => {
-    const isReadonly = inject(ReadonlyInj, false)
+    const isReadonly = inject(ReadonlyInj, ref(false))
 
     const isPublic = inject(IsPublicInj, ref(false))
 
diff --git a/packages/nc-gui/components/shared-view/Gallery.vue b/packages/nc-gui/components/shared-view/Gallery.vue
index 7d7bbb5e2c..363001839e 100644
--- a/packages/nc-gui/components/shared-view/Gallery.vue
+++ b/packages/nc-gui/components/shared-view/Gallery.vue
@@ -7,7 +7,7 @@ const reloadEventHook = createEventHook()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 
 provide(MetaInj, meta)
 
diff --git a/packages/nc-gui/components/shared-view/Grid.vue b/packages/nc-gui/components/shared-view/Grid.vue
index 2d51c958a8..03d7068f51 100644
--- a/packages/nc-gui/components/shared-view/Grid.vue
+++ b/packages/nc-gui/components/shared-view/Grid.vue
@@ -28,7 +28,7 @@ useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
 const reloadEventHook = createEventHook()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
 provide(FieldsInj, ref(meta.value?.columns || []))
diff --git a/packages/nc-gui/components/shared-view/Kanban.vue b/packages/nc-gui/components/shared-view/Kanban.vue
index 8dd6b4e96a..f595c85b32 100644
--- a/packages/nc-gui/components/shared-view/Kanban.vue
+++ b/packages/nc-gui/components/shared-view/Kanban.vue
@@ -15,7 +15,7 @@ const reloadEventHook = createEventHook()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 
 provide(MetaInj, meta)
 
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 2e65709be5..e5a818545f 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -8,6 +8,7 @@ import {
   IsFormInj,
   IsLockedInj,
   IsPublicInj,
+  ReadonlyInj,
   computed,
   inject,
   provide,
@@ -47,7 +48,7 @@ provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 provide(ActiveCellInj, active)
 
 if (readOnly?.value) {
-  provide(ReadonlyInj, readOnly.value)
+  provide(ReadonlyInj, readOnly)
 }
 
 const isForm = inject(IsFormInj, ref(false))
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index e2cac568b6..43d150605b 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -51,7 +51,7 @@ const view = inject(ActiveViewInj, ref())
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 const isLocked = inject(IsLockedInj, ref(false))
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index d33a7990e9..392fa50c43 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -59,7 +59,10 @@ provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
+provide(
+  ReadonlyInj,
+  computed(() => !isUIAllowed('xcDatatableEditable')),
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index e7f14fd3d4..8a2eaed14f 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -31,7 +31,7 @@ const row = inject(RowInj)!
 
 const active = inject(ActiveCellInj)!
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index c4f063ea03..82d7cbbb06 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -27,7 +27,7 @@ const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
 const isForm = inject(IsFormInj)
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isLocked = inject(IsLockedInj)
 
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 5f2530d9f2..789ff99187 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -17,7 +17,7 @@ import {
 
 const { metas, getMeta } = useMetas()
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
 
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index 30fdbe9f7f..3464471789 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -28,7 +28,7 @@ const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
 const isForm = inject(IsFormInj)
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isLocked = inject(IsLockedInj)
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
index 61d15603e1..6665dd9187 100644
--- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
@@ -24,7 +24,7 @@ const { relatedTableMeta } = useLTARStoreOrThrow()!
 
 const { isUIAllowed } = useUIPermission()
 
-const readOnly = inject(ReadonlyInj, false)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 8e9f1c875d..2d7ef011a5 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -29,7 +29,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const column = inject(ColumnInj)
 
-const readonly = inject(ReadonlyInj, false)
+const readonly = inject(ReadonlyInj, ref(false))
 
 const {
   childrenList,
@@ -72,8 +72,8 @@ const unlinkIfNewRow = async (row: Record<string, any>) => {
 const container = computed(() =>
   isForm.value
     ? h('div', {
-      class: 'w-full p-2',
-    })
+        class: 'w-full p-2',
+      })
     : Modal,
 )
 
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index e56434931f..21278b9876 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -20,7 +20,7 @@ export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injecti
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
-export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
+export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')

From 97cdb832e44e1ed8db52911b9c7966d08124dcbf Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 18:36:38 +0200
Subject: [PATCH 079/117] fix(nc-gui): show expand icon regardless of readonly
 state

---
 packages/nc-gui/components/smartsheet/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 43d150605b..357bb39204 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -477,7 +477,7 @@ watch(
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <a-spin v-if="row.rowMeta.saving" class="!flex items-center" />
                         <template v-else>
                           <span
@@ -541,7 +541,7 @@ watch(
                         "
                         :row-index="rowIndex"
                         :active="selected.col === colIndex && selected.row === rowIndex"
-                        @update:edit-enabled="editEnabled = false"
+                        @update:edit-enabled="editEnabled = $event"
                         @save="updateOrSaveRow(row, columnObj.title, state)"
                         @navigate="onNavigate"
                         @cancel="editEnabled = false"

From ad5e9a3532bf7c740b439aaffda07b2b26dad310 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 18:36:46 +0200
Subject: [PATCH 080/117] fix(nc-gui): disable text field if readonly

---
 packages/nc-gui/components/cell/Text.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 832ddb7ff4..53e7aa02b1 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, inject, useVModel } from '#imports'
+import { EditModeInj, ReadonlyInj, inject, ref, useVModel } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -12,6 +12,8 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
+const readonly = inject(ReadonlyInj, ref(false))
+
 const vModel = useVModel(props, 'modelValue', emits)
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
@@ -19,7 +21,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readonly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none bg-transparent"

From 94065a92c0c7c7690a485ea0cda11ccde0829dcf Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 17 Oct 2022 19:10:24 +0200
Subject: [PATCH 081/117] fix(nc-gui): use `TableDataCell` component to set
 cell refs

---
 .../nc-gui/components/smartsheet/Grid.vue     | 12 ++++++----
 packages/nc-gui/components/smartsheet/Row.vue |  4 +++-
 .../components/smartsheet/TableDataCell.vue   | 24 +++++++++++++++++++
 .../nc-gui/composables/useSmartsheetStore.ts  | 14 +++++------
 4 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/TableDataCell.vue

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5e67310196..0099866538 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -18,6 +18,7 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
+  enumColor,
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
@@ -67,7 +68,7 @@ const isView = false
 
 let editEnabled = $ref(false)
 
-const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail, isSqlView } = useSmartsheetStoreOrThrow()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -273,7 +274,9 @@ watch(contextMenu, () => {
 
 const rowRefs = $ref<any[]>()
 
-async function clearCell(ctx: { row: number; col: number }) {
+async function clearCell(ctx: { row: number; col: number } | null) {
+  if (!ctx) return
+
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
 
@@ -586,9 +589,8 @@ watch(
                       </div>
                     </div>
                   </td>
-                  <td
+                  <SmartsheetTableDataCell
                     v-for="(columnObj, colIndex) of fields"
-                    :ref="cellRefs.set"
                     :key="columnObj.id"
                     class="cell relative cursor-pointer nc-grid-cell"
                     :class="{
@@ -631,7 +633,7 @@ watch(
                         @cancel="editEnabled = false"
                       />
                     </div>
-                  </td>
+                  </SmartsheetTableDataCell>
                 </tr>
               </template>
             </LazySmartsheetRow>
diff --git a/packages/nc-gui/components/smartsheet/Row.vue b/packages/nc-gui/components/smartsheet/Row.vue
index 9f2b3f8cd9..f476fb0391 100644
--- a/packages/nc-gui/components/smartsheet/Row.vue
+++ b/packages/nc-gui/components/smartsheet/Row.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk'
 import type { Row } from '~/lib'
 import {
   ReloadRowDataHookInj,
@@ -20,7 +22,7 @@ const currentRow = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
 
-const { isNew, state, syncLTARRefs, clearLTARCell } = useProvideSmartsheetRowStore(meta, currentRow)
+const { isNew, state, syncLTARRefs, clearLTARCell } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
 
 // on changing isNew(new record insert) status sync LTAR cell values
 watch(isNew, async (nextVal, prevVal) => {
diff --git a/packages/nc-gui/components/smartsheet/TableDataCell.vue b/packages/nc-gui/components/smartsheet/TableDataCell.vue
new file mode 100644
index 0000000000..91bb00a1b1
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/TableDataCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
+
+const { cellRefs } = useSmartsheetStoreOrThrow()
+
+const el = ref<HTMLTableDataCellElement>()
+
+onMounted(() => {
+  cellRefs.value.push(el.value!)
+})
+
+onBeforeUnmount(() => {
+  const index = cellRefs.value.indexOf(el.value!)
+  if (index > -1) {
+    cellRefs.value.splice(index, 1)
+  }
+})
+</script>
+
+<template>
+  <td ref="el">
+    <slot />
+  </td>
+</template>
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 335982791e..76d203d176 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -1,21 +1,21 @@
 import { ViewTypes } from 'nocodb-sdk'
 import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { computed, reactive, ref, unref, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
+import { computed, reactive, ref, unref, useInjectionState, useNuxtApp, useProject } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
     view: Ref<ViewType | undefined>,
     meta: Ref<TableType | KanbanType | undefined>,
     shared = false,
-    initalSorts?: Ref<SortType[]>,
+    initialSorts?: Ref<SortType[]>,
     initialFilters?: Ref<FilterType[]>,
   ) => {
     const { $api } = useNuxtApp()
 
     const { sqlUi } = useProject()
 
-    const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+    const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
     // state
     // todo: move to grid view store
@@ -50,7 +50,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 
     const isSqlView = computed(() => (meta.value as TableType)?.type === 'view')
 
-    const sorts = ref<SortType[]>(unref(initalSorts) ?? [])
+    const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
     return {
@@ -78,9 +78,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 export { useProvideSmartsheetStore }
 
 export function useSmartsheetStoreOrThrow() {
-  const smartsheetStore = useSmartsheetStore()
+  const state = useSmartsheetStore()
 
-  if (smartsheetStore == null) throw new Error('Please call `useSmartsheetStore` on the appropriate parent component')
+  if (!state) throw new Error('Please call `useProvideSmartsheetStore` on the appropriate parent component')
 
-  return smartsheetStore
+  return state
 }

From 1eac103651b426bbc2aaf6c30e14626e6634b942 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 18:55:46 +0200
Subject: [PATCH 082/117] revert: 2b test

---
 .../common/2b_table_with_m2m_column.js        | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/scripts/cypress/integration/common/2b_table_with_m2m_column.js b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
index ab56c2e96a..55cd26636a 100644
--- a/scripts/cypress/integration/common/2b_table_with_m2m_column.js
+++ b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
@@ -69,8 +69,26 @@ export const genTest = (apiType, dbType) => {
       cy.getActiveModal(".nc-modal-child-list")
         .find("button:contains(Link to 'Film')")
         .click()
-
-        cy.getActiveModal('.nc-modal-link-record').find('.ant-modal-close').click()
+        .then(() => {
+          // Link record form validation
+          cy.getActiveModal(".nc-modal-link-record")
+              .contains("Link record")
+              .should("exist");
+          cy.getActiveModal(".nc-modal-link-record")
+              .find(".nc-reload")
+              .should("exist");
+          cy.getActiveModal(".nc-modal-link-record")
+              .find('button:contains("Add new record")')
+              .should("exist");
+          cy.getActiveModal(".nc-modal-link-record")
+              .find(".ant-card")
+              .eq(0)
+              .contains("ACE GOLDFINGER")
+              .should("exist");
+          cy.getActiveModal(".nc-modal-link-record")
+              .find("button.ant-modal-close")
+              .click();
+        });
     });
 
     it("Expand first linked card, validate", () => {

From e0045de65bb496ff5f4361bece8312fc6f32c442 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 12:10:37 +0800
Subject: [PATCH 083/117] refactor(nc-gui): align the default column names

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 89e71cf368..70d6f4b835 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -266,7 +266,7 @@ export default class CSVTemplateAdapter {
                 that.initTemplate(
                   tableIdx,
                   tn,
-                  [...Array((row.data as []).length)].map((_, i) => `column${i + 1}`),
+                  [...Array((row.data as []).length)].map((_, i) => `field_${i + 1}`),
                 )
                 if (that.config.autoSelectFieldTypes) {
                   // row.data is data

From fd262e86600c96548a2f8fdc4d3400f195b45d86 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 13:42:29 +0800
Subject: [PATCH 084/117] feat(nc-gui): fallback to SingleLineText if there is
 some data not numeric

---
 packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index edc6d8aaa2..ee4e7dc510 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -159,7 +159,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                   }
                 } else if (column.uidt === UITypes.Number) {
                   if (
-                    rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
+                    rows.slice(1, this.config.maxRowsToParse).every((v: any) => {
                       return v && v[col] && parseInt(v[col]) !== +v[col]
                     })
                   ) {
@@ -179,6 +179,14 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                   ) {
                     column.uidt = UITypes.Currency
                   }
+                  if (
+                    rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
+                      return !(!isNaN(Number(v)) && !isNaN(parseFloat(v)))
+                    })
+                  ) {
+                    // fallback to SingleLineText
+                    column.uidt = UITypes.SingleLineText
+                  }
                 } else if (column.uidt === UITypes.DateTime) {
                   // TODO(import): centralise
                   // hold the possible date format found in the date

From 56a6da5b6345cbb821fdf22b6e6ac3bac4f6e33a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 13:42:51 +0800
Subject: [PATCH 085/117] feat(nc-gui): support max 5 files upload

---
 packages/nc-gui/components/dlg/QuickImport.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index aa5a21cf2f..9011bd2aab 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -370,7 +370,7 @@ const beforeUpload = (file: UploadFile) => {
                   name="file"
                   class="nc-input-import !scrollbar-thin-dull"
                   :accept="importMeta.acceptTypes"
-                  :max-count="1"
+                  :max-count="5"
                   list-type="picture"
                   :custom-request="customReqCbk"
                   :before-upload="beforeUpload"
@@ -379,7 +379,7 @@ const beforeUpload = (file: UploadFile) => {
                 >
                   <MdiFilePlusOutline size="large" />
 
-                  <!--                Click or drag file to this area to upload -->
+                  <!-- Click or drag file to this area to upload -->
                   <p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p>
 
                   <p class="ant-upload-hint">

From 99925bc4ba896d08b2e5882dd21cbbe3d83b7957 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 13:43:35 +0800
Subject: [PATCH 086/117] feat(nc-gui): support multiple files with
 importingTips

---
 .../nc-gui/components/template/Editor.vue     | 111 ++++++++++--------
 1 file changed, 60 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 5e31eb7490..38a49c2123 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -3,6 +3,7 @@ import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { UploadFile } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import {
   Empty,
@@ -75,7 +76,7 @@ const inputRefs = ref<HTMLInputElement[]>([])
 
 const isImporting = ref(false)
 
-const importingTip = ref('Importing')
+const importingTips = ref<Record<string, string>>({})
 
 const uiTypeOptions = ref<Option[]>(
   (Object.keys(UITypes) as (keyof typeof UITypes)[])
@@ -357,6 +358,12 @@ function fieldsValidation(record: Record<string, any>) {
   return true
 }
 
+function updateImportTips(projectName: string, tableName: string, progress: number, total: number) {
+  importingTips.value[
+    `${projectName}-${tableName}`
+  ] = `Importing data to ${projectName} - ${tableName}: ${progress}/${total} records`
+}
+
 async function importTemplate() {
   if (importDataOnly) {
     // validate required columns
@@ -369,54 +376,51 @@ async function importTemplate() {
       isImporting.value = true
 
       const tableName = meta.value?.title
-
-      // only one file is allowed currently
-      const data = importData[Object.keys(importData)[0]]
-
       const projectName = project.value.title!
 
-      const total = data.length
-
-      for (let i = 0, progress = 0; i < total; i += maxRowsToParse) {
-        const batchData = data.slice(i, i + maxRowsToParse).map((row: Record<string, any>) =>
-          srcDestMapping.value.reduce((res: Record<string, any>, col: Record<string, any>) => {
-            if (col.enabled && col.destCn) {
-              const v = columns.value.find((c: Record<string, any>) => c.title === col.destCn) as Record<string, any>
-
-              let input = row[col.srcCn]
-
-              // parse potential boolean values
-              if (v.uidt === UITypes.Checkbox) {
-                input = input.replace(/["']/g, '').toLowerCase().trim()
-
-                if (input === 'false' || input === 'no' || input === 'n') {
-                  input = '0'
-                } else if (input === 'true' || input === 'yes' || input === 'y') {
-                  input = '1'
-                }
-              } else if (v.uidt === UITypes.Number) {
-                if (input === '') {
-                  input = null
-                }
-              } else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
-                if (input === '') {
-                  input = null
-                }
-              } else if (v.uidt === UITypes.Date) {
-                input = parseStringDate(input, v.meta.date_format)
-              }
-              res[col.destCn] = input
+      await Promise.all(
+        Object.keys(importData).map((key: string) =>
+          (async (k) => {
+            const data = importData[k]
+            const total = data.length
+
+            for (let i = 0, progress = 0; i < total; i += maxRowsToParse) {
+              const batchData = data.slice(i, i + maxRowsToParse).map((row: Record<string, any>) =>
+                srcDestMapping.value.reduce((res: Record<string, any>, col: Record<string, any>) => {
+                  if (col.enabled && col.destCn) {
+                    const v = columns.value.find((c: Record<string, any>) => c.title === col.destCn) as Record<string, any>
+                    let input = row[col.srcCn]
+                    // parse potential boolean values
+                    if (v.uidt === UITypes.Checkbox) {
+                      input = input.replace(/["']/g, '').toLowerCase().trim()
+                      if (input === 'false' || input === 'no' || input === 'n') {
+                        input = '0'
+                      } else if (input === 'true' || input === 'yes' || input === 'y') {
+                        input = '1'
+                      }
+                    } else if (v.uidt === UITypes.Number) {
+                      if (input === '') {
+                        input = null
+                      }
+                    } else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
+                      if (input === '') {
+                        input = null
+                      }
+                    } else if (v.uidt === UITypes.Date) {
+                      input = parseStringDate(input, v.meta.date_format)
+                    }
+                    res[col.destCn] = input
+                  }
+                  return res
+                }, {}),
+              )
+              await $api.dbTableRow.bulkCreate('noco', projectName, tableName!, batchData)
+              updateImportTips(projectName, tableName!, progress, total)
+              progress += batchData.length
             }
-            return res
-          }, {}),
-        )
-
-        await $api.dbTableRow.bulkCreate('noco', projectName, tableName!, batchData)
-
-        importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
-
-        progress += batchData.length
-      }
+          })(key),
+        ),
+      )
 
       // reload table
       reloadHook.trigger()
@@ -493,24 +497,25 @@ async function importTemplate() {
       }
       // bulk insert data
       if (importData) {
-        let total = 0
-        let progress = 0
         const offset = maxRowsToParse
         const projectName = project.value.title as string
         await Promise.all(
           data.tables.map((table: Record<string, any>) =>
             (async (tableMeta) => {
+              let progress = 0
+              let total = 0
               // use ref_table_name here instead of table_name
               // since importData[talbeMeta.table_name] would be empty after renaming
               const data = importData[tableMeta.ref_table_name]
               if (data) {
                 total += data.length
                 for (let i = 0; i < data.length; i += offset) {
-                  importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
+                  updateImportTips(projectName, tableMeta.title, progress, total)
                   const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns)
                   await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.title, batchData)
                   progress += batchData.length
                 }
+                updateImportTips(projectName, tableMeta.title, total, total)
               }
             })(table),
           ),
@@ -576,7 +581,12 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 </script>
 
 <template>
-  <a-spin :spinning="isImporting" :tip="importingTip" size="large">
+  <a-spin :spinning="isImporting" size="large">
+    <template #tip>
+      <p v-for="importingTip of importingTips" class="mt-[10px]">
+        {{ importingTip }}
+      </p>
+    </template>
     <a-card v-if="importDataOnly">
       <a-form :model="data" name="import-only">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
@@ -590,7 +600,6 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
               <mdi-table class="text-primary" />
-
               {{ table.table_name }}
             </span>
           </template>

From 38054ecafe725a1c7c36c79ad2890eb2aa92ad9c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 15:54:03 +0800
Subject: [PATCH 087/117] feat(nc-gui): allow multiple drop

---
 packages/nc-gui/components/dlg/QuickImport.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 9011bd2aab..a510c629d2 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -369,9 +369,10 @@ const beforeUpload = (file: UploadFile) => {
                   v-model:fileList="importState.fileList"
                   name="file"
                   class="nc-input-import !scrollbar-thin-dull"
+                  list-type="picture"
                   :accept="importMeta.acceptTypes"
                   :max-count="5"
-                  list-type="picture"
+                  :multiple="true"
                   :custom-request="customReqCbk"
                   :before-upload="beforeUpload"
                   @change="handleChange"

From eea4ef0211b22284d0aa1032254f1148163beaca Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 22 Oct 2022 09:55:24 +0200
Subject: [PATCH 088/117] refactor(nc-gui): show expand icon depending on role
 and readonly state

---
 packages/nc-gui/components/smartsheet/Grid.vue | 9 ++++++++-
 packages/nc-gui/composables/useRoles/index.ts  | 8 ++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 357bb39204..c0c6aaf6ee 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -33,6 +33,7 @@ import {
   useI18n,
   useMetas,
   useMultiSelect,
+  useRoles,
   useRoute,
   useSmartsheetStoreOrThrow,
   useUIPermission,
@@ -57,6 +58,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
+const { hasRole } = useRoles()
 const { isUIAllowed } = useUIPermission()
 const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
 
@@ -477,7 +479,12 @@ watch(
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div v-if="!isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+
+                      <div
+                        v-if="(!readOnly || hasRole('commenter', true) || hasRole('viewer', true)) && !isLocked"
+                        class="nc-expand"
+                        :class="{ 'nc-comment': row.rowMeta?.commentCount }"
+                      >
                         <a-spin v-if="row.rowMeta.saving" class="!flex items-center" />
                         <template v-else>
                           <span
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index bfa8fd4e1f..b05ad71a82 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -12,7 +12,7 @@ import type { ProjectRole, Role, Roles } from '~/lib'
  * * `loadProjectRoles` - a function to load the project roles for a specific project (by id)
  */
 export const useRoles = createSharedComposable(() => {
-  const { user } = useGlobal()
+  const { user, previewAs } = useGlobal()
 
   const { api } = useApi()
 
@@ -57,7 +57,11 @@ export const useRoles = createSharedComposable(() => {
     }
   }
 
-  function hasRole(role: Role | ProjectRole | string) {
+  function hasRole(role: Role | ProjectRole | string, includePreviewRoles = false) {
+    if (includePreviewRoles) {
+      return previewAs.value === role
+    }
+
     return allRoles.value[role]
   }
 

From eed31087c83ba1fc2d38ac169d3e312835e25a40 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 22 Oct 2022 10:50:11 +0200
Subject: [PATCH 089/117] fix(nc-gui): useRoles to check if previewAs is
 enabled

---
 packages/nc-gui/composables/useRoles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index b05ad71a82..5ff33adf23 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -58,7 +58,7 @@ export const useRoles = createSharedComposable(() => {
   }
 
   function hasRole(role: Role | ProjectRole | string, includePreviewRoles = false) {
-    if (includePreviewRoles) {
+    if (previewAs.value && includePreviewRoles) {
       return previewAs.value === role
     }
 

From 1dfc069b0169258b765be4799b2f0459ab3e1ee0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 17:30:37 +0800
Subject: [PATCH 090/117] feat(nc-gui): avoid undefined column during async
 import

---
 .../utils/parsers/CSVTemplateAdapter.ts       | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 70d6f4b835..91fac2ad77 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -19,6 +19,7 @@ export default class CSVTemplateAdapter {
   detectedColumnTypes: Record<number, Record<string, number>>
   distinctValues: Record<number, Set<string>>
   headers: Record<number, string[]>
+  tables: Record<number, any>
   project: {
     tables: Record<string, any>[]
   }
@@ -36,6 +37,7 @@ export default class CSVTemplateAdapter {
     this.distinctValues = {}
     this.headers = {}
     this.columnValues = {}
+    this.tables = {}
   }
 
   async init() {}
@@ -44,13 +46,14 @@ export default class CSVTemplateAdapter {
     const columnNameRowExist = +columnNames.every((v: any) => v === null || typeof v === 'string')
     const columnNamePrefixRef: Record<string, any> = { id: 0 }
 
-    this.project.tables.push({
+    const tableObj: Record<string, any> = {
       table_name: tn,
       ref_table_name: tn,
       columns: [],
-    })
+    }
 
     this.headers[tableIdx] = []
+    this.tables[tableIdx] = []
 
     for (const [columnIdx, columnName] of columnNames.entries()) {
       let cn: string = ((columnNameRowExist && columnName.toString().trim()) || `field_${columnIdx + 1}`)
@@ -64,8 +67,7 @@ export default class CSVTemplateAdapter {
       this.detectedColumnTypes[columnIdx] = {}
       this.distinctValues[columnIdx] = new Set<string>()
       this.columnValues[columnIdx] = []
-
-      this.project.tables[tableIdx].columns.push({
+      tableObj.columns.push({
         column_name: cn,
         ref_column_name: cn,
         meta: {},
@@ -74,6 +76,7 @@ export default class CSVTemplateAdapter {
       })
 
       this.headers[tableIdx].push(cn)
+      this.tables[tableIdx] = tableObj
     }
   }
 
@@ -175,26 +178,23 @@ export default class CSVTemplateAdapter {
               return isDate
             })
           ) {
-            this.project.tables[tableIdx].columns[columnIdx].uidt = UITypes.Date
+            this.tables[tableIdx].columns[columnIdx].uidt = UITypes.Date
             // take the date format with the max occurrence
-            this.project.tables[tableIdx].columns[columnIdx].meta.date_format =
+            this.tables[tableIdx].columns[columnIdx].meta.date_format =
               Object.keys(dateFormat).reduce((x, y) => (dateFormat[x] > dateFormat[y] ? x : y)) || 'YYYY/MM/DD'
           } else {
             // Datetime
-            this.project.tables[tableIdx].columns[columnIdx].uidt = uidt
+            this.tables[tableIdx].columns[columnIdx].uidt = uidt
           }
         } else if (uidt === UITypes.SingleSelect || uidt === UITypes.MultiSelect) {
           // assume it is a SingleLineText first
-          this.project.tables[tableIdx].columns[columnIdx].uidt = UITypes.SingleLineText
+          this.tables[tableIdx].columns[columnIdx].uidt = UITypes.SingleLineText
           // override with UITypes.SingleSelect or UITypes.MultiSelect if applicable
-          Object.assign(
-            this.project.tables[tableIdx].columns[columnIdx],
-            extractMultiOrSingleSelectProps(this.columnValues[columnIdx]),
-          )
+          Object.assign(this.tables[tableIdx].columns[columnIdx], extractMultiOrSingleSelectProps(this.columnValues[columnIdx]))
         }
         delete this.columnValues[columnIdx]
       } else {
-        this.project.tables[tableIdx].columns[columnIdx].uidt = uidt
+        this.tables[tableIdx].columns[columnIdx].uidt = uidt
       }
     }
   }
@@ -215,7 +215,7 @@ export default class CSVTemplateAdapter {
             if (row && steppers >= +that.config.firstRowAsHeaders + 1) {
               const rowData: Record<string, any> = {}
               for (let columnIdx = 0; columnIdx < that.headers[tableIdx].length; columnIdx++) {
-                const column = that.project.tables[tableIdx].columns[columnIdx]
+                const column = that.tables[tableIdx].columns[columnIdx]
                 const data = (row.data as [])[columnIdx] === '' ? null : (row.data as [])[columnIdx]
                 if (column.uidt === UITypes.Checkbox) {
                   rowData[column.column_name] = getCheckboxValue(data)
@@ -285,6 +285,7 @@ export default class CSVTemplateAdapter {
           console.log('complete')
           console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
+          that.project.tables.push(that.tables[tableIdx])
           await that._parseTableData(tableIdx, source, tn)
           resolve(true)
         },

From 52a880d471f3c9ce8609c1329bf8a4c409b446a2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 17:36:26 +0800
Subject: [PATCH 091/117] feat(nc-gui): add error blocks for parse

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 91fac2ad77..c43dedf126 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -235,7 +235,9 @@ export default class CSVTemplateAdapter {
             console.log(`getData(): steppers: ${steppers}`)
             resolve(true)
           },
-          // TODO(import): add error
+          error(error: Error) {
+            message.error(error.message)
+          },
         })
       }
     })
@@ -289,6 +291,9 @@ export default class CSVTemplateAdapter {
           await that._parseTableData(tableIdx, source, tn)
           resolve(true)
         },
+        error(error: Error) {
+          message.error(error.message)
+        },
       })
     })
   }

From e596bf7ac1367eec4c66d7becb0878cde4bda451 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 19:57:46 +0800
Subject: [PATCH 092/117] feat(nc-gui): support multiple tn in srcDestMapping

---
 .../nc-gui/components/template/Editor.vue     | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 38a49c2123..95c2bc196a 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -93,7 +93,7 @@ const uiTypeOptions = ref<Option[]>(
     })),
 )
 
-const srcDestMapping = ref<Record<string, any>[]>([])
+const srcDestMapping = ref<Record<string, Record<string, any>[]>>({})
 
 const data = reactive<{
   title: string | null
@@ -124,12 +124,18 @@ const validators = computed(() =>
 
 const { validate, validateInfos } = useForm(data, validators)
 
+// TODO(import): show error message once
 const isValid = computed(() => {
   if (importDataOnly) {
-    for (const record of srcDestMapping.value) {
-      if (!fieldsValidation(record)) {
+    for (const tn of Object.keys(srcDestMapping.value)) {
+      if (!atLeastOneEnabledValidation(tn)) {
         return false
       }
+      for (const record of srcDestMapping.value[tn]) {
+        if (!fieldsValidation(record, tn)) {
+          return false
+        }
+      }
     }
   } else {
     for (const [_, o] of Object.entries(validateInfos)) {
@@ -258,10 +264,11 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
   )
 }
 
-function missingRequiredColumnsValidation() {
+function missingRequiredColumnsValidation(tn: string) {
   const missingRequiredColumns = columns.value.filter(
     (c: Record<string, any>) =>
-      (c.pk ? !c.ai && !c.cdf : !c.cdf && c.rqd) && !srcDestMapping.value.some((r) => r.destCn === c.title),
+      (c.pk ? !c.ai && !c.cdf : !c.cdf && c.rqd) &&
+      !srcDestMapping.value[tn].some((r: Record<string, any>) => r.destCn === c.title),
   )
 
   if (missingRequiredColumns.length) {
@@ -272,16 +279,15 @@ function missingRequiredColumnsValidation() {
   return true
 }
 
-function atLeastOneEnabledValidation() {
-  if (srcDestMapping.value.filter((v) => v.enabled === true).length === 0) {
+function atLeastOneEnabledValidation(tn: string) {
+  if (srcDestMapping.value[tn].filter((v: Record<string, any>) => v.enabled === true).length === 0) {
     message.error(t('msg.error.selectAtleastOneColumn'))
     return false
   }
-
   return true
 }
 
-function fieldsValidation(record: Record<string, any>) {
+function fieldsValidation(record: Record<string, any>, tn: string) {
   // if it is not selected, then pass validation
   if (!record.enabled) {
     return true
@@ -292,7 +298,7 @@ function fieldsValidation(record: Record<string, any>) {
     return false
   }
 
-  if (srcDestMapping.value.filter((v) => v.destCn === record.destCn).length > 1) {
+  if (srcDestMapping.value[tn].filter((v: Record<string, any>) => v.destCn === record.destCn).length > 1) {
     message.error(t('msg.error.duplicateMappingFound'))
     return false
   }
@@ -366,11 +372,13 @@ function updateImportTips(projectName: string, tableName: string, progress: numb
 
 async function importTemplate() {
   if (importDataOnly) {
-    // validate required columns
-    if (!missingRequiredColumnsValidation()) return
+    for (const table of data.tables) {
+      // validate required columns
+      if (!missingRequiredColumnsValidation(table.table_name)) return
 
-    // validate at least one column needs to be selected
-    if (!atLeastOneEnabledValidation()) return
+      // validate at least one column needs to be selected
+      if (!atLeastOneEnabledValidation(table.table_name)) return
+    }
 
     try {
       isImporting.value = true
@@ -386,7 +394,7 @@ async function importTemplate() {
 
             for (let i = 0, progress = 0; i < total; i += maxRowsToParse) {
               const batchData = data.slice(i, i + maxRowsToParse).map((row: Record<string, any>) =>
-                srcDestMapping.value.reduce((res: Record<string, any>, col: Record<string, any>) => {
+                srcDestMapping.value[k].reduce((res: Record<string, any>, col: Record<string, any>) => {
                   if (col.enabled && col.destCn) {
                     const v = columns.value.find((c: Record<string, any>) => c.title === col.destCn) as Record<string, any>
                     let input = row[col.srcCn]
@@ -537,18 +545,23 @@ async function importTemplate() {
 }
 
 function mapDefaultColumns() {
-  srcDestMapping.value = []
-  for (const col of importColumns[0]) {
-    const o = { srcCn: col.column_name, destCn: '', enabled: true }
-    if (columns.value) {
-      const tableColumn = columns.value.find((c) => c.column_name === col.column_name)
-      if (tableColumn) {
-        o.destCn = tableColumn.title as string
-      } else {
-        o.enabled = false
+  srcDestMapping.value = {}
+  for (let i = 0; i < data.tables.length; i++) {
+    for (const col of importColumns[i]) {
+      const o = { srcCn: col.column_name, destCn: '', enabled: true }
+      if (columns.value) {
+        const tableColumn = columns.value.find((c) => c.column_name === col.column_name)
+        if (tableColumn) {
+          o.destCn = tableColumn.title as string
+        } else {
+          o.enabled = false
+        }
+      }
+      if (!(data.tables[i].table_name in srcDestMapping.value)) {
+        srcDestMapping.value[data.tables[i].table_name] = []
       }
+      srcDestMapping.value[data.tables[i].table_name].push(o)
     }
-    srcDestMapping.value.push(o)
   }
 }
 
@@ -608,7 +621,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
             v-if="srcDestMapping"
             class="template-form"
             row-class-name="template-form-row"
-            :data-source="srcDestMapping"
+            :data-source="srcDestMapping[table.table_name]"
             :columns="srcDestMappingColumns"
             :pagination="false"
           >

From bf72ff1687347ac5de83e8e971c66dc30b794698 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 22 Oct 2022 20:21:43 +0800
Subject: [PATCH 093/117] feat(nc-gui): populateUniqueTableName

---
 .../nc-gui/components/dlg/QuickImport.vue     | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index a510c629d2..1dd6f98137 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -200,6 +200,10 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
     await templateGenerator.parse()
 
     templateData.value = templateGenerator!.getTemplate()
+    templateData.value.tables = templateData.value.tables.map((table: Record<string, any>) => ({
+      ...table,
+      table_name: populateUniqueTableName(table.table_name),
+    }))
     if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
     importData.value = templateGenerator!.getData()
     templateEditorModal.value = true
@@ -259,14 +263,19 @@ function formatJson() {
   jsonEditorRef.value?.format()
 }
 
-function populateUniqueTableName() {
+function populateUniqueTableName(tn: string) {
   let c = 1
-
-  while (tables.value.some((t: TableType) => t.title === `Sheet${c}`)) {
-    c++
+  while (
+    tables.value.some((t: TableType) => {
+      const s = t.table_name.split('___')
+      let target = t.table_name
+      if (s.length > 1) target = s[1]
+      return target === `${tn}`
+    })
+  ) {
+    tn = `${tn}_${c++}`
   }
-
-  return `Sheet${c}`
+  return tn
 }
 
 function getAdapter(val: any) {

From 9267e95fbbdb5a009c03e653cbd62424039b4c31 Mon Sep 17 00:00:00 2001
From: Wonkeun No <zakk23v@hotmail.com>
Date: Sun, 23 Oct 2022 23:11:17 -0400
Subject: [PATCH 094/117] feat(formulaUtils):allow decimal for round This
 allows ROUND func to have an optional parameter to show decimal number to the
 position that the integer parameter specifies This will address issue-3441

---
 packages/nc-gui/utils/formulaUtils.ts         |  9 ++++---
 .../integration/common/3b_formula_column.js   | 25 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/utils/formulaUtils.ts b/packages/nc-gui/utils/formulaUtils.ts
index 9b084ce6b0..ca35cac3ac 100644
--- a/packages/nc-gui/utils/formulaUtils.ts
+++ b/packages/nc-gui/utils/formulaUtils.ts
@@ -176,12 +176,13 @@ const formulas: Record<string, any> = {
     type: formulaTypes.NUMERIC,
     validation: {
       args: {
-        rqd: 2,
+        min: 1,
+        max: 2,
       },
     },
-    description: 'Rounded number to a specified number of decimal places',
-    syntax: 'ROUND(value, decimals)',
-    examples: ['ROUND(3.1415,2) => 3.14', 'ROUND({column1}, 3)'],
+    description: 'Rounded number to a specified number of decimal places or the nearest integer if not specified',
+    syntax: 'ROUND(value, length), ROUND(value)',
+    examples: ['ROUND(3.1415,2) => 3.14', 'ROUND(3.1415) => 3', 'ROUND({column1}, 3)'],
   },
   MOD: {
     type: formulaTypes.NUMERIC,
diff --git a/scripts/cypress/integration/common/3b_formula_column.js b/scripts/cypress/integration/common/3b_formula_column.js
index dbe38a890d..baceff2f0d 100644
--- a/scripts/cypress/integration/common/3b_formula_column.js
+++ b/scripts/cypress/integration/common/3b_formula_column.js
@@ -146,9 +146,10 @@ export const genTest = (apiType, dbType) => {
     let RESULT_MATH_0 = [];
     let RESULT_MATH_1 = [];
     let RESULT_MATH_2 = [];
+    let RESULT_MATH_3 = [];
     let RESULT_WEEKDAY_0 = [];
     let RESULT_WEEKDAY_1 = [];
-
+    
     for (let i = 0; i < 10; i++) {
       // CONCAT, LOWER, UPPER, TRIM
       RESULT_STRING[i] = `${city[i].toUpperCase()}${city[
@@ -171,9 +172,12 @@ export const genTest = (apiType, dbType) => {
         Math.min(cityId[i], countryId[i]) +
         Math.max(cityId[i], countryId[i]);
 
+      RESULT_MATH_2[i] =
+        1.23 + Math.min(2.34, 3.45) + Math.max(2.34, 3.45);
+
       // LOG, EXP, POWER, SQRT
       // only integer verification being computed, hence trunc
-      RESULT_MATH_2[i] = Math.trunc(
+      RESULT_MATH_3[i] = Math.trunc(
         Math.log(cityId[i]) +
           Math.exp(cityId[i]) +
           Math.pow(cityId[i], 3) +
@@ -227,23 +231,32 @@ export const genTest = (apiType, dbType) => {
       rowValidation("NC_MATH_1", RESULT_MATH_1);
     });
 
+    it("Formula: ROUND with decimals, MIN, MAX", () => {
+      editColumnByName(
+        "NC_MATH_1",
+        "NC_MATH_2",
+        `ROUND(1.2345, 2) + MIN(2.34, 3.45) + MAX(2.34, 3.45)`
+      );
+      rowValidation("NC_MATH_2", RESULT_MATH_2)
+    })
+
     it("Formula: LOG, EXP, POWER, SQRT", () => {
       // if (!isXcdb()) {
       if (dbType === "mysql") {
         // SQLITE doesnt support LOG, EXP, POWER SQRT construct
         editColumnByName(
-          "NC_MATH_1",
           "NC_MATH_2",
+          "NC_MATH_3",
           `LOG({CityId}) + EXP({CityId}) + POWER({CityId}, 3) + SQRT({CountryId})`
         );
-        rowValidation("NC_MATH_2", RESULT_MATH_2);
+        rowValidation("NC_MATH_3", RESULT_MATH_3);
       }
     });
 
     it("Formula: NOW, EDIT & Delete column", () => {
       // if (!isXcdb()) editColumnByName("NC_MATH_2", "NC_NOW", `NOW()`);
-      if (dbType === "mysql") editColumnByName("NC_MATH_2", "NC_NOW", `NOW()`);
-      else editColumnByName("NC_MATH_1", "NC_NOW", `NOW()`);
+      if (dbType === "mysql") editColumnByName("NC_MATH_3", "NC_NOW", `NOW()`);
+      else editColumnByName("NC_MATH_2", "NC_NOW", `NOW()`);
       deleteColumnByName("NC_NOW");
 
       cy.closeTableTab("City");

From fb053489fdf9bc0dfd64fb2c5f42df4e0b9d63a4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 12:43:07 +0800
Subject: [PATCH 095/117] fix(nc-gui): populate unique table name in non
 importDataOnly case only

---
 packages/nc-gui/components/dlg/QuickImport.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 1dd6f98137..ce56cd3006 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -200,11 +200,14 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
     await templateGenerator.parse()
 
     templateData.value = templateGenerator!.getTemplate()
-    templateData.value.tables = templateData.value.tables.map((table: Record<string, any>) => ({
-      ...table,
-      table_name: populateUniqueTableName(table.table_name),
-    }))
     if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
+    else {
+      // ensure the target table name not exist in current table list
+      templateData.value.tables = templateData.value.tables.map((table: Record<string, any>) => ({
+        ...table,
+        table_name: populateUniqueTableName(table.table_name),
+      }))
+    }
     importData.value = templateGenerator!.getData()
     templateEditorModal.value = true
     isParsingData.value = false

From f21c564b4d3ad27ebfa18f01825a5758c94a6bd4 Mon Sep 17 00:00:00 2001
From: Wonkeun No <zakk23v@hotmail.com>
Date: Mon, 24 Oct 2022 00:53:28 -0400
Subject: [PATCH 096/117] feat(formulaUtils):allow decimal for round This
 commit improves ROUND func description for the user and updates documentation

---
 packages/nc-gui/utils/formulaUtils.ts                      | 4 ++--
 packages/noco-docs/content/en/setup-and-usages/formulas.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/formulaUtils.ts b/packages/nc-gui/utils/formulaUtils.ts
index ca35cac3ac..db8f7148d3 100644
--- a/packages/nc-gui/utils/formulaUtils.ts
+++ b/packages/nc-gui/utils/formulaUtils.ts
@@ -181,8 +181,8 @@ const formulas: Record<string, any> = {
       },
     },
     description: 'Rounded number to a specified number of decimal places or the nearest integer if not specified',
-    syntax: 'ROUND(value, length), ROUND(value)',
-    examples: ['ROUND(3.1415,2) => 3.14', 'ROUND(3.1415) => 3', 'ROUND({column1}, 3)'],
+    syntax: 'ROUND(value, precision), ROUND(value)',
+    examples: ['ROUND(3.1415) => 3', 'ROUND(3.1415,2) => 3.14', 'ROUND({column1}, 3)'],
   },
   MOD: {
     type: formulaTypes.NUMERIC,
diff --git a/packages/noco-docs/content/en/setup-and-usages/formulas.md b/packages/noco-docs/content/en/setup-and-usages/formulas.md
index 9d6a351bba..6d39cb250d 100644
--- a/packages/noco-docs/content/en/setup-and-usages/formulas.md
+++ b/packages/noco-docs/content/en/setup-and-usages/formulas.md
@@ -49,7 +49,7 @@ Unlike other column types, formula cells cannot be modified by double-clicking s
 | **MIN**     | `MIN(value1,[value2,...])` | `MIN({Column1}, {Column2}, {Column3})` | Minimum value amongst input parameters                           |
 | **MOD**     | `MOD(value1, value2)`      | `MOD({Column}, 2)`                 | Remainder after integer division of input parameters             |
 | **POWER**   | `POWER(base, exponent)`    | `POWER({Column}, 3)`               | `base` to the `exponent` power, as in `base ^ exponent`            |
-| **ROUND**   | `ROUND(value)`             | `ROUND({Column})`                  | Nearest integer to the input parameter                           |
+| **ROUND**   | `ROUND(value, precision)`  | `ROUND({Column}, 3)`                  | Round input `value` to decimal place specified by `precision` (Nearest integer if `precision` not provided) |
 | **SQRT**    | `SQRT(value)`              | `SQRT({Column})`                   | Square root of the input parameter                               |
 
 

From 2ec7d24ac222b991b1b85bebf2eeb307d4f1cd27 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 13:08:32 +0800
Subject: [PATCH 097/117] feat(nc-gui): error handling for import

---
 packages/nc-gui/components/dlg/QuickImport.vue      |  5 +++--
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index ce56cd3006..d92957aaa3 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -210,10 +210,11 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
     }
     importData.value = templateGenerator!.getData()
     templateEditorModal.value = true
-    isParsingData.value = false
-    preImportLoading.value = false
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isParsingData.value = false
+    preImportLoading.value = false
   }
 }
 
diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index c43dedf126..410772457f 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -200,7 +200,7 @@ export default class CSVTemplateAdapter {
   }
 
   async _parseTableData(tableIdx: number, source: UploadFile | string, tn: string) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       const that = this
       let steppers = 0
       if (that.config.shouldImportData) {
@@ -235,8 +235,8 @@ export default class CSVTemplateAdapter {
             console.log(`getData(): steppers: ${steppers}`)
             resolve(true)
           },
-          error(error: Error) {
-            message.error(error.message)
+          error(e: Error) {
+            reject(e)
           },
         })
       }
@@ -244,7 +244,7 @@ export default class CSVTemplateAdapter {
   }
 
   async _parseTableMeta(tableIdx: number, source: UploadFile | string) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       const that = this
       let steppers = 0
       const tn = ((this.config.importFromURL ? (source as string).split('/').pop() : (source as UploadFile).name) as string)
@@ -291,8 +291,8 @@ export default class CSVTemplateAdapter {
           await that._parseTableData(tableIdx, source, tn)
           resolve(true)
         },
-        error(error: Error) {
-          message.error(error.message)
+        error(e: Error) {
+          reject(e)
         },
       })
     })

From 1cb9767d6e0fa7aed002ddb360578f86367db03f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 13:11:26 +0800
Subject: [PATCH 098/117] feat(nc-gui): add @typescript-eslint/no-this-alias

---
 packages/nc-gui/.eslintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/.eslintrc.js b/packages/nc-gui/.eslintrc.js
index 8780df770e..084e429adc 100644
--- a/packages/nc-gui/.eslintrc.js
+++ b/packages/nc-gui/.eslintrc.js
@@ -3,6 +3,7 @@ const baseRules = {
   'no-console': 0,
   'antfu/if-newline': 0,
   'no-unused-vars': 0,
+  '@typescript-eslint/no-this-alias': 0,
   '@typescript-eslint/no-unused-vars': [
     'error',
     { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },

From 65a5eeaa3724818e62c21e467d2730c243dfe373 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 13:11:43 +0800
Subject: [PATCH 099/117] chore(nc-gui): fix lint issues

---
 packages/nc-gui/components/template/Editor.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 95c2bc196a..3ebed993f7 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -3,7 +3,6 @@ import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import { UploadFile } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import {
   Empty,
@@ -596,7 +595,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 <template>
   <a-spin :spinning="isImporting" size="large">
     <template #tip>
-      <p v-for="importingTip of importingTips" class="mt-[10px]">
+      <p v-for="(importingTip, idx) of importingTips" :key="idx" class="mt-[10px]">
         {{ importingTip }}
       </p>
     </template>

From 83d06cb71dc3cba981a306e24b50e14d8240f899 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 13:16:12 +0800
Subject: [PATCH 100/117] chore(nc-gui): remove console.log

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts   | 4 ----
 packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts | 1 -
 2 files changed, 5 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index 410772457f..d2f8de3d00 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -231,8 +231,6 @@ export default class CSVTemplateAdapter {
             }
           },
           complete() {
-            console.log('getData(): complete')
-            console.log(`getData(): steppers: ${steppers}`)
             resolve(true)
           },
           error(e: Error) {
@@ -284,8 +282,6 @@ export default class CSVTemplateAdapter {
           }
         },
         async complete() {
-          console.log('complete')
-          console.log(`steppers: ${steppers}`)
           that.updateTemplate(tableIdx)
           that.project.tables.push(that.tables[tableIdx])
           await that._parseTableData(tableIdx, source, tn)
diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index ee4e7dc510..462c48cbf6 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -128,7 +128,6 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                   r: +this.config.firstRowAsHeaders,
                 })
                 const cellProps = ws[cellId] || {}
-                console.log(cn, cellProps)
                 column.uidt = excelTypeToUidt[cellProps.t] || UITypes.SingleLineText
 
                 if (column.uidt === UITypes.SingleLineText) {

From 7a8a58d020d55fc99858aff63bce45e8e35889a8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 13:20:06 +0800
Subject: [PATCH 101/117] fix(nc-gui): at most 5 files for csv import only

---
 packages/nc-gui/components/dlg/QuickImport.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index d92957aaa3..c62058240e 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -384,7 +384,7 @@ const beforeUpload = (file: UploadFile) => {
                   class="nc-input-import !scrollbar-thin-dull"
                   list-type="picture"
                   :accept="importMeta.acceptTypes"
-                  :max-count="5"
+                  :max-count="isImportTypeCsv ? 5 : 1"
                   :multiple="true"
                   :custom-request="customReqCbk"
                   :before-upload="beforeUpload"

From cc3ca2c71a26e0ffe124e5a0062a414345693c01 Mon Sep 17 00:00:00 2001
From: Wonkeun No <zakk23v@hotmail.com>
Date: Mon, 24 Oct 2022 01:24:02 -0400
Subject: [PATCH 102/117] feat(formulaUtils):allow decimal for round Add a
 proper spacing in function description

---
 packages/nc-gui/utils/formulaUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/formulaUtils.ts b/packages/nc-gui/utils/formulaUtils.ts
index db8f7148d3..e49655338f 100644
--- a/packages/nc-gui/utils/formulaUtils.ts
+++ b/packages/nc-gui/utils/formulaUtils.ts
@@ -182,7 +182,7 @@ const formulas: Record<string, any> = {
     },
     description: 'Rounded number to a specified number of decimal places or the nearest integer if not specified',
     syntax: 'ROUND(value, precision), ROUND(value)',
-    examples: ['ROUND(3.1415) => 3', 'ROUND(3.1415,2) => 3.14', 'ROUND({column1}, 3)'],
+    examples: ['ROUND(3.1415) => 3', 'ROUND(3.1415, 2) => 3.14', 'ROUND({column1}, 3)'],
   },
   MOD: {
     type: formulaTypes.NUMERIC,

From 0153f5230419de4b8ac71c458fb0a5b5cbaac0f3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 13:55:38 +0800
Subject: [PATCH 103/117] docs: update import screenshots

---
 .../en/setup-and-usages/table-operations.md   | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/noco-docs/content/en/setup-and-usages/table-operations.md b/packages/noco-docs/content/en/setup-and-usages/table-operations.md
index 54ad649ff4..4ef86ea55b 100644
--- a/packages/noco-docs/content/en/setup-and-usages/table-operations.md
+++ b/packages/noco-docs/content/en/setup-and-usages/table-operations.md
@@ -140,27 +140,31 @@ You can use Quick Import when you have data from external sources such as Airtab
 
 <img width="1505" alt="image" src="https://user-images.githubusercontent.com/35857179/194795025-afd81191-4743-435b-b802-88367d2663f9.png">
 
-### Import Airtable into an existing project
+### Import Airtable into an Existing Project
 
 - See <a href="./import-airtable-to-sql-database-within-a-minute-for-free">here</a>
 
-### Import CSV data into an existing project
+### Import CSV data into an Existing Project
 
 - Hover `Add new table` button in table menu, click three dots, and click `CSV file`
-- Drag & drop or select file to upload or specify CSV file URL
-  <img width="987" alt="image" src="https://user-images.githubusercontent.com/35857179/194795517-ee272b97-e2f6-4f3c-8558-810e1c0b7955.png">
-- Click `Import`
-  <img width="975" alt="image" src="https://user-images.githubusercontent.com/35857179/194795574-cc95a6e0-053f-496f-8b6d-e1bc2a73c890.png">
+- Drag & drop or select files (at most 5 files) to upload or specify CSV file URL, and Click Import
+  - **Auto-Select Field Types**: If it is checked, column types will be detected. Otherwise, it will default to `SingleLineText`.
+  - **Use First Row as Headers**: If it is checked, the first row will be treated as header row.
+  - **Import Data**: If it is checked, all data will be imported. Otherwise, only table will be created.
+  ![image](https://user-images.githubusercontent.com/35857179/197454479-1ed18dce-1d0b-4ee3-88b3-9b6a132dea2a.png)
 - You can revise the table name by double clicking it, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
-  <img width="984" alt="image" src="https://user-images.githubusercontent.com/35857179/194795594-25373144-436e-4b67-9e51-ad15d70f66fd.png">
+  ![image](https://user-images.githubusercontent.com/35857179/197454633-5b30323e-2b13-4c55-843a-948c093d373e.png)
 - Click `Import` to start importing process. The table will be created and the data will be imported.
-  <img width="1507" alt="image" src="https://user-images.githubusercontent.com/35857179/194795642-44f8b2a4-6ba7-474d-bdb6-99ee4c2b4fd1.png">
+  ![image](https://user-images.githubusercontent.com/35857179/197455547-2d93df5e-a7f0-4c88-af53-990067625967.png)
 
-### Import Excel data into an existing project
+### Import Excel data into an Existing Project
 
 - Hover `Add new table` button in table menu, click three dots, and click `Microsoft Excel`
-- Drag & drop or select file to upload or specify Excel file URL
-  <img width="973" alt="image" src="https://user-images.githubusercontent.com/35857179/194795741-a2eb59ad-c95c-4c8c-9127-ab2072240439.png">
+- Drag & drop or select file (at most 1 file) to upload or specify Excel file URL and Click Import.
+  - **Auto-Select Field Types**: If it is checked, column types will be detected. Otherwise, it will default to `SingleLineText`.
+  - **Use First Row as Headers**: If it is checked, the first row will be treated as header row.
+  - **Import Data**: If it is checked, all data will be imported. Otherwise, only table will be created.
+  ![image](https://user-images.githubusercontent.com/35857179/197455788-8dd8a7d1-38f3-48c3-a05e-6ab0cf25045c.png)
 - You can revise the table name, column name and column type. By default, the first column will be chosen as <a href="./primary-value" target="_blank">Primary Value</a> and cannot be deleted.
   <alert>
   Note: If your Excel file contains multiple sheets, each sheet will be stored in a separate table.

From 4f731a888793a4494f130b2daff21b35eb361770 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 15:11:42 +0800
Subject: [PATCH 104/117] fix(nc-gui): infinite import validation errors

---
 .../nc-gui/components/template/Editor.vue     | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 3ebed993f7..5714c9caa7 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -123,30 +123,36 @@ const validators = computed(() =>
 
 const { validate, validateInfos } = useForm(data, validators)
 
-// TODO(import): show error message once
-const isValid = computed(() => {
-  if (importDataOnly) {
-    for (const tn of Object.keys(srcDestMapping.value)) {
-      if (!atLeastOneEnabledValidation(tn)) {
-        return false
-      }
-      for (const record of srcDestMapping.value[tn]) {
-        if (!fieldsValidation(record, tn)) {
-          return false
+const isValid = ref(false)
+
+watch(
+  () => srcDestMapping.value,
+  () => {
+    let res = true
+    if (importDataOnly) {
+      for (const tn of Object.keys(srcDestMapping.value)) {
+        if (!atLeastOneEnabledValidation(tn)) {
+          res = false
+        }
+        for (const record of srcDestMapping.value[tn]) {
+          if (!fieldsValidation(record, tn)) {
+            return false
+          }
         }
       }
-    }
-  } else {
-    for (const [_, o] of Object.entries(validateInfos)) {
-      if (o?.validateStatus) {
-        if (o.validateStatus === 'error') {
-          return false
+    } else {
+      for (const [_, o] of Object.entries(validateInfos)) {
+        if (o?.validateStatus) {
+          if (o.validateStatus === 'error') {
+            res = false
+          }
         }
       }
     }
-  }
-  return true
-})
+    isValid.value = res
+  },
+  { deep: true },
+)
 
 const prevEditableTn = ref<string[]>([])
 
@@ -158,6 +164,10 @@ onMounted(() => {
   // and updating the key in importData
   prevEditableTn.value = data.tables.map((t) => t.table_name)
 
+  if (importDataOnly) {
+    mapDefaultColumns()
+  }
+
   nextTick(() => {
     inputRefs.value[0]?.focus()
   })
@@ -569,12 +579,6 @@ defineExpose({
   isValid,
 })
 
-onMounted(() => {
-  if (importDataOnly) {
-    mapDefaultColumns()
-  }
-})
-
 function handleEditableTnChange(idx: number) {
   const oldValue = prevEditableTn.value[idx]
   const newValue = data.tables[idx].table_name

From eddd58a00668eb5e24ba2d594a6e14b5ee4b2725 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 19:22:12 +0800
Subject: [PATCH 105/117] fix(nc-gui): datetime parsing logic & disable import
 button init value

---
 packages/nc-gui/components/template/Editor.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 5714c9caa7..66ecc7a5f8 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -14,6 +14,7 @@ import {
   extractSdkResponseErrorMsg,
   fieldRequiredValidator,
   getDateFormat,
+  getDateTimeFormat,
   getUIDTIcon,
   inject,
   message,
@@ -123,7 +124,7 @@ const validators = computed(() =>
 
 const { validate, validateInfos } = useForm(data, validators)
 
-const isValid = ref(false)
+const isValid = ref(!importDataOnly)
 
 watch(
   () => srcDestMapping.value,
@@ -263,7 +264,8 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
         }
         d = parseStringDate(d, dateFormat)
       } else if (col.uidt === UITypes.DateTime && d) {
-        d = dayjs(data[key]).utc().format('YYYY-MM-DD HH:mm')
+        const dateTimeFormat = getDateTimeFormat(data[key])
+        d = dayjs(data[key], dateTimeFormat).format('YYYY-MM-DD HH:mm')
       }
       return {
         ...aggObj,

From 538524f4bd5cc01d9459dae2eaa6cfab88efcf6e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 19:22:42 +0800
Subject: [PATCH 106/117] feat(nc-gui): add customParseFormat & revise datetime
 util functions

---
 packages/nc-gui/utils/dateTimeUtils.ts | 27 +++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/dateTimeUtils.ts b/packages/nc-gui/utils/dateTimeUtils.ts
index a83ec9c364..6339fa0776 100644
--- a/packages/nc-gui/utils/dateTimeUtils.ts
+++ b/packages/nc-gui/utils/dateTimeUtils.ts
@@ -1,4 +1,7 @@
 import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()
@@ -36,11 +39,17 @@ export function validateDateFormat(v: string) {
 }
 
 export function validateDateWithUnknownFormat(v: string) {
-  let res = 0
   for (const format of dateFormats) {
-    res |= dayjs(v, format, true).isValid() as any
+    if (dayjs(v, format, true).isValid() as any) {
+      return true
+    }
+    for (const timeFormat of ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']) {
+      if (dayjs(v, `${format} ${timeFormat}`, true).isValid() as any) {
+        return true
+      }
+    }
   }
-  return res
+  return false
 }
 
 export function getDateFormat(v: string) {
@@ -52,6 +61,18 @@ export function getDateFormat(v: string) {
   return 'YYYY/MM/DD'
 }
 
+export function getDateTimeFormat(v: string) {
+  for (const format of dateFormats) {
+    for (const timeFormat of ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']) {
+      const dateTimeFormat = `${format} ${timeFormat}`
+      if (dayjs(v, dateTimeFormat, true).isValid() as any) {
+        return dateTimeFormat
+      }
+    }
+  }
+  return 'YYYY/MM/DD'
+}
+
 export function parseStringDate(v: string, dateFormat: string) {
   const dayjsObj = dayjs(v)
   if (dayjsObj.isValid()) {

From 9dee6e8a977f33ea8016f6a1616b20487cf98436 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 19:23:26 +0800
Subject: [PATCH 107/117] feat(nc-gui): improve column types detection

---
 packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
index d2f8de3d00..01390ecb4e 100644
--- a/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/CSVTemplateAdapter.ts
@@ -94,10 +94,9 @@ export default class CSVTemplateAdapter {
       const colData: any = [data[columnIdx]]
       const colProps = { uidt: this.detectInitialUidt(data[columnIdx]) }
       // TODO(import): centralise
-      if (colProps.uidt === UITypes.SingleLineText) {
-        if (isMultiLineTextType(colData)) {
-          colProps.uidt = UITypes.LongText
-        }
+      if (isMultiLineTextType(colData)) {
+        colProps.uidt = UITypes.LongText
+      } else if (colProps.uidt === UITypes.SingleLineText) {
         if (isEmailType(colData)) {
           colProps.uidt = UITypes.Email
         }
@@ -191,6 +190,8 @@ export default class CSVTemplateAdapter {
           this.tables[tableIdx].columns[columnIdx].uidt = UITypes.SingleLineText
           // override with UITypes.SingleSelect or UITypes.MultiSelect if applicable
           Object.assign(this.tables[tableIdx].columns[columnIdx], extractMultiOrSingleSelectProps(this.columnValues[columnIdx]))
+        } else {
+          this.tables[tableIdx].columns[columnIdx].uidt = uidt
         }
         delete this.columnValues[columnIdx]
       } else {

From e400c6f5139f85a5f98c171239cec2bdff8c1cc8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 20:02:36 +0800
Subject: [PATCH 108/117] feat(nc-gui): support single quote in select options
 during import

---
 packages/nc-gui/utils/parsers/parserHelpers.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index 4653c0365f..1107a3bff0 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -78,7 +78,7 @@ export const extractMultiOrSingleSelectProps = (colData: []) => {
       }
       // set dtxp here so that users can have the options even they switch the type from other types to MultiSelect
       // once it's set, dtxp needs to be reset if the final column type is not MultiSelect
-      colProps.dtxp = `'${uniqueVals.join("','")}'`
+      colProps.dtxp = `${uniqueVals.map((v) => `'${v.replace(/'/gi, "''")}'`).join(',')}`
     }
   } else {
     const uniqueVals = [...new Set(colData.map((v: any) => v.toString().trim().toLowerCase()))]
@@ -96,7 +96,7 @@ export const extractMultiOrSingleSelectProps = (colData: []) => {
       }
       // set dtxp here so that users can have the options even they switch the type from other types to SingleSelect
       // once it's set, dtxp needs to be reset if the final column type is not SingleSelect
-      colProps.dtxp = `'${uniqueVals.join("','")}'`
+      colProps.dtxp = `${uniqueVals.map((v) => `'${v.replace(/'/gi, "''")}'`).join(',')}`
     }
     return colProps
   }

From f6c57be4e4472ff53a203b46894bdb82d3fac0e1 Mon Sep 17 00:00:00 2001
From: navi <oof1lab@gmail.com>
Date: Mon, 24 Oct 2022 22:55:30 +0100
Subject: [PATCH 109/117] New translations en.json (French)

---
 packages/nc-gui/lang/fr.json | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/lang/fr.json b/packages/nc-gui/lang/fr.json
index 69428a1c29..4f377564c3 100644
--- a/packages/nc-gui/lang/fr.json
+++ b/packages/nc-gui/lang/fr.json
@@ -106,7 +106,7 @@
       "commenter": "Commentateur",
       "viewer": "Lecture seule"
     },
-    "sqlVIew": "SQL View"
+    "sqlVIew": "Vue SQL"
   },
   "datatype": {
     "ID": "Identifiant",
@@ -160,7 +160,7 @@
     "isNotNull": "est non null"
   },
   "title": {
-    "erdView": "ERD View",
+    "erdView": "Vue ERD",
     "newProj": "Nouveau projet",
     "myProject": "Mes projets",
     "formTitle": "Intitulé du formulaire",
@@ -188,10 +188,10 @@
     "headLogin": "Connexion | Nocodb",
     "resetPassword": "Réinitialiser le mot de passe",
     "teamAndSettings": "Équipe & paramètres",
-    "apiDocs": "API Docs",
+    "apiDocs": "Docs API",
     "importFromAirtable": "Importer depuis Airtable",
     "generateToken": "Generate Token",
-    "APIsAndSupport": "APIs & Support",
+    "APIsAndSupport": "Les API et la prise en charge",
     "helpCenter": "Help center",
     "swaggerDocumentation": "Swagger Documentation",
     "quickImportFrom": "Quick Import From",
@@ -271,10 +271,10 @@
     "accentColor": "Accent Color",
     "customTheme": "Custom Theme",
     "requestDataSource": "Request a data source you need?",
-    "apiKey": "API Key",
+    "apiKey": "Clé d'API",
     "sharedBase": "Shared Base",
     "importData": "Import Data",
-    "importSecondaryViews": "Import Secondary Views",
+    "importSecondaryViews": "Importer des vues secondaires",
     "importRollupColumns": "Import Rollup Columns",
     "importLookupColumns": "Import Lookup Columns",
     "importAttachmentColumns": "Import Attachment Columns",
@@ -324,7 +324,7 @@
     "translate": "Aider à la traduction",
     "account": {
       "authToken": "Copier le jeton d'authentification",
-      "swagger": "Swagger: REST APIs",
+      "swagger": "Swagger : les API REST",
       "projInfo": "Copier les informations du projet",
       "themes": "Thèmes"
     },
@@ -406,7 +406,7 @@
     "sponsorUs": "Nous Parrainer",
     "sendEmail": "ENVOYER UN EMAIL",
     "addUserToProject": "Add user to project",
-    "getApiSnippet": "Get API Snippet",
+    "getApiSnippet": "Récupérer le Snippet API",
     "clearCell": "Clear cell",
     "addFilterGroup": "Add Filter Group",
     "linkRecord": "Link record",
@@ -418,7 +418,7 @@
     "erd": {
       "showColumns": "Show Columns",
       "showPkAndFk": "Show Primary and Foreign Keys",
-      "showSqlViews": "Show SQL Views",
+      "showSqlViews": "Afficher les vues SQL",
       "showMMTables": "Show Many to Many tables",
       "showJunctionTableNames": "Show Junction Table Names"
     },
@@ -434,8 +434,8 @@
     "saveChanges": "Sauvegarder les modifications",
     "xcDB": "Créer un nouveau projet",
     "extDB": "Base de données supportées MySQL, PostgreSQL, SQL Server & SQLite",
-    "apiRest": "Accessible via l'API REST",
-    "apiGQL": "Accessible via l'API GraphQL",
+    "apiRest": "Accessible via les API REST",
+    "apiGQL": "Accessible via les API GraphQL",
     "theme": {
       "dark": "Nuit (^⇧B)",
       "light": "Jour (^⇧B)"
@@ -582,7 +582,7 @@
       "requriedFieldsCantBeMoved": "Required field can't be moved",
       "updateNotAllowedWithoutPK": "Update not allowed for table which doesn't have primary key",
       "autoIncFieldNotEditable": "Auto increment field is not editable",
-      "editingPKnotSupported": "Editing primary key not supported",
+      "editingPKnotSupported": "Modification de la clé primaire non prise en charge",
       "deletedCache": "Deleted cache successfully",
       "cacheEmpty": "Cache is empty",
       "exportedCache": "Exported Cache Successfully",
@@ -590,7 +590,7 @@
       "noColumnsToUpdate": "No columns to update",
       "tableDeleted": "Deleted table successfully",
       "generatePublicShareableReadonlyBase": "Generate publicly shareable readonly base",
-      "deleteViewConfirmation": "Are you sure you want to delete this view?",
+      "deleteViewConfirmation": "Êtes-vous sûr de vouloir effacer cette vue ?",
       "deleteTableConfirmation": "Do you want to delete the table",
       "showM2mTables": "Show M2M Tables",
       "deleteKanbanStackConfirmation": "Deleting this stack will also remove the select option `{stackToBeDeleted}` from the `{groupingField}`. The records will move to the uncategorized stack."
@@ -639,7 +639,7 @@
       "rowUpdateFailed": "Row update failed",
       "deleteRowFailed": "Failed to delete row",
       "setFormDataFailed": "Failed to set form data",
-      "formViewUpdateFailed": "Failed to update form view",
+      "formViewUpdateFailed": "Échec de la mise à jour de la vue du formulaire",
       "tableNameRequired": "Table name is required",
       "nameShouldStartWithAnAlphabetOr_": "Name should start with an alphabet or _",
       "followingCharactersAreNotAllowed": "Following characters are not allowed",
@@ -678,12 +678,12 @@
       "pluginSettingsSaved": "Plugin settings saved successfully",
       "pluginTested": "Successfully tested plugin settings",
       "tableRenamed": "Table renamed successfully",
-      "viewDeleted": "View deleted successfully",
+      "viewDeleted": "Vue effacée avec succès",
       "primaryColumnUpdated": "Successfully updated as primary column",
       "tableDataExported": "Successfully exported all table data",
       "updated": "Successfully updated",
-      "sharedViewDeleted": "Deleted shared view successfully",
-      "viewRenamed": "View renamed successfully",
+      "sharedViewDeleted": "Vue partagée effacée avec succès",
+      "viewRenamed": "Vue renommée avec succès",
       "tokenGenerated": "Token generated successfully",
       "tokenDeleted": "Token deleted successfully",
       "userAddedToProject": "Successfully added user to project",

From 1104e1b99459c96ae165c0ffe8a334c5a5868dad Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 11:55:24 +0800
Subject: [PATCH 110/117] chore(nocodb-sdk): reformat API.ts

---
 packages/nocodb-sdk/src/lib/Api.ts | 787 +++++++++++++++++++++--------
 1 file changed, 582 insertions(+), 205 deletions(-)

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index ee3a10e1db..da6597d0ff 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -14,22 +14,17 @@ export interface UserType {
   id: string;
   firstname: string;
   lastname: string;
-
   /** @format email */
   email: string;
-
   /** @format email */
   roles?: string;
-
   /**
    * @format date
    * @example 1997-10-31
    */
   date_of_birth?: string;
-
   /** Set to true if the user's email has been verified. */
   email_verified: boolean;
-
   /**
    * The date that the user was created.
    * @format date
@@ -44,7 +39,10 @@ export interface PageReqQueryParamsType {
 }
 
 export interface UserListType {
-  users: { list: UserType; pageInfo: PaginatedType };
+  users: {
+    list: UserType;
+    pageInfo: PaginatedType;
+  };
 }
 
 export interface ProjectReqType {
@@ -101,7 +99,10 @@ export interface BaseReqType {
 }
 
 export interface BaseListType {
-  bases: { list: BaseType[]; pageInfo: PaginatedType };
+  bases: {
+    list: BaseType[];
+    pageInfo: PaginatedType;
+  };
 }
 
 export interface TableType {
@@ -187,7 +188,7 @@ export interface FilterType {
   fk_column_id?: string;
   logical_op?: string;
   comparison_op?: string;
-  value?: string | number | number | boolean | null;
+  value?: string | number | boolean | null;
   is_group?: boolean;
   children?: FilterType[];
   project_id?: string;
@@ -198,7 +199,9 @@ export interface FilterType {
 }
 
 export interface FilterListType {
-  filters: { list: FilterType[] };
+  filters: {
+    list: FilterType[];
+  };
 }
 
 export interface SortType {
@@ -212,7 +215,9 @@ export interface SortType {
 }
 
 export interface SortListType {
-  sorts: { list: SharedViewType[] };
+  sorts: {
+    list: SharedViewType[];
+  };
 }
 
 export interface ColumnType {
@@ -256,7 +261,9 @@ export interface ColumnType {
 }
 
 export interface ColumnListType {
-  columns: { list: ColumnType[] };
+  columns: {
+    list: ColumnType[];
+  };
 }
 
 export interface LinkToAnotherRecordType {
@@ -641,7 +648,12 @@ export type ColumnReqType =
       fk_relation_column_id?: string;
       fk_lookup_column_id?: string;
     }
-  | { uidt?: string; formula_raw?: string; formula?: string; title?: string };
+  | {
+      uidt?: string;
+      formula_raw?: string;
+      formula?: string;
+      title?: string;
+    };
 
 export interface UserInfoType {
   id?: string;
@@ -820,22 +832,38 @@ export class Api<
 > extends HttpClient<SecurityDataType> {
   auth = {
     /**
-     * @description Create a new user with provided email and password and first user is marked as super admin.
-     *
-     * @tags Auth
-     * @name Signup
-     * @summary Signup
-     * @request POST:/api/v1/auth/user/signup
-     * @response `200` `{ token?: string }` OK
-     * @response `400` `{ msg?: string }` Bad Request
-     * @response `401` `void` Unauthorized
-     * @response `403` `void` Forbidden
-     */
+ * @description Create a new user with provided email and password and first user is marked as super admin. 
+ * 
+ * @tags Auth
+ * @name Signup
+ * @summary Signup
+ * @request POST:/api/v1/auth/user/signup
+ * @response `200` `{
+  token?: string,
+
+}` OK
+ * @response `400` `{
+  msg?: string,
+
+}` Bad Request
+ * @response `401` `void` Unauthorized
+ * @response `403` `void` Forbidden
+ */
     signup: (
-      data: { email?: string; password?: string },
+      data: {
+        email?: string;
+        password?: string;
+      },
       params: RequestParams = {}
     ) =>
-      this.request<{ token?: string }, { msg?: string } | void>({
+      this.request<
+        {
+          token?: string;
+        },
+        {
+          msg?: string;
+        } | void
+      >({
         path: `/api/v1/auth/user/signup`,
         method: 'POST',
         body: data,
@@ -844,20 +872,36 @@ export class Api<
       }),
 
     /**
-     * @description Authenticate existing user with their email and password. Successful login will return a JWT access-token.
-     *
-     * @tags Auth
-     * @name Signin
-     * @summary Signin
-     * @request POST:/api/v1/auth/user/signin
-     * @response `200` `{ token?: string }` OK
-     * @response `400` `{ msg?: string }` Bad Request
-     */
+ * @description Authenticate existing user with their email and password. Successful login will return a JWT access-token. 
+ * 
+ * @tags Auth
+ * @name Signin
+ * @summary Signin
+ * @request POST:/api/v1/auth/user/signin
+ * @response `200` `{
+  token?: string,
+
+}` OK
+ * @response `400` `{
+  msg?: string,
+
+}` Bad Request
+ */
     signin: (
-      data: { email: string; password: string },
+      data: {
+        email: string;
+        password: string;
+      },
       params: RequestParams = {}
     ) =>
-      this.request<{ token?: string }, { msg?: string }>({
+      this.request<
+        {
+          token?: string;
+        },
+        {
+          msg?: string;
+        }
+      >({
         path: `/api/v1/auth/user/signin`,
         method: 'POST',
         body: data,
@@ -875,7 +919,13 @@ export class Api<
      * @request GET:/api/v1/auth/user/me
      * @response `200` `UserInfoType` OK
      */
-    me: (query?: { project_id?: string }, params: RequestParams = {}) =>
+    me: (
+      query?: {
+        /** Pass project id to get project specific roles along with user info */
+        project_id?: string;
+      },
+      params: RequestParams = {}
+    ) =>
       this.request<UserInfoType, any>({
         path: `/api/v1/auth/user/me`,
         method: 'GET',
@@ -894,7 +944,12 @@ export class Api<
      * @response `200` `void` OK
      * @response `401` `void` Unauthorized
      */
-    passwordForgot: (data: { email?: string }, params: RequestParams = {}) =>
+    passwordForgot: (
+      data: {
+        email?: string;
+      },
+      params: RequestParams = {}
+    ) =>
       this.request<void, void>({
         path: `/api/v1/auth/password/forgot`,
         method: 'POST',
@@ -904,20 +959,36 @@ export class Api<
       }),
 
     /**
-     * @description Change password of authenticated user with a new one.
-     *
-     * @tags Auth
-     * @name PasswordChange
-     * @summary Password change
-     * @request POST:/api/v1/auth/password/change
-     * @response `200` `{ msg?: string }` OK
-     * @response `400` `{ msg?: string }` Bad request
-     */
+ * @description Change password of authenticated user with a new one.
+ * 
+ * @tags Auth
+ * @name PasswordChange
+ * @summary Password change
+ * @request POST:/api/v1/auth/password/change
+ * @response `200` `{
+  msg?: string,
+
+}` OK
+ * @response `400` `{
+  msg?: string,
+
+}` Bad request
+ */
     passwordChange: (
-      data: { currentPassword?: string; newPassword?: string },
+      data: {
+        currentPassword?: string;
+        newPassword?: string;
+      },
       params: RequestParams = {}
     ) =>
-      this.request<{ msg?: string }, { msg?: string }>({
+      this.request<
+        {
+          msg?: string;
+        },
+        {
+          msg?: string;
+        }
+      >({
         path: `/api/v1/auth/password/change`,
         method: 'POST',
         body: data,
@@ -969,7 +1040,9 @@ export class Api<
      */
     passwordReset: (
       token: string,
-      data: { new_password?: string },
+      data: {
+        new_password?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -997,17 +1070,29 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Auth
-     * @name ProjectUserList
-     * @summary Project users
-     * @request GET:/api/v1/db/meta/projects/{projectId}/users
-     * @response `200` `{ users?: { list: (UserType)[], pageInfo: PaginatedType } }` OK
-     */
+ * No description
+ * 
+ * @tags Auth
+ * @name ProjectUserList
+ * @summary Project users
+ * @request GET:/api/v1/db/meta/projects/{projectId}/users
+ * @response `200` `{
+  users?: {
+  list: (UserType)[],
+  pageInfo: PaginatedType,
+
+},
+
+}` OK
+ */
     projectUserList: (projectId: string, params: RequestParams = {}) =>
       this.request<
-        { users?: { list: UserType[]; pageInfo: PaginatedType } },
+        {
+          users?: {
+            list: UserType[];
+            pageInfo: PaginatedType;
+          };
+        },
         any
       >({
         path: `/api/v1/db/meta/projects/${projectId}/users`,
@@ -1106,14 +1191,24 @@ export class Api<
   };
   project = {
     /**
-     * No description
-     *
-     * @tags Project
-     * @name MetaGet
-     * @summary Project info
-     * @request GET:/api/v1/db/meta/projects/{projectId}/info
-     * @response `200` `{ Node?: string, Arch?: string, Platform?: string, Docker?: boolean, Database?: string, ProjectOnRootDB?: string, RootDB?: string, PackageVersion?: string }` OK
-     */
+ * No description
+ * 
+ * @tags Project
+ * @name MetaGet
+ * @summary Project info
+ * @request GET:/api/v1/db/meta/projects/{projectId}/info
+ * @response `200` `{
+  Node?: string,
+  Arch?: string,
+  Platform?: string,
+  Docker?: boolean,
+  Database?: string,
+  ProjectOnRootDB?: string,
+  RootDB?: string,
+  PackageVersion?: string,
+
+}` OK
+ */
     metaGet: (projectId: string, params: RequestParams = {}, query: object) =>
       this.request<
         {
@@ -1146,7 +1241,9 @@ export class Api<
      */
     modelVisibilityList: (
       projectId: string,
-      query?: { includeM2M?: boolean },
+      query?: {
+        includeM2M?: boolean;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any[], any>({
@@ -1189,7 +1286,11 @@ export class Api<
      * @response `201` `ProjectListType`
      */
     list: (
-      query?: { page?: number; pageSize?: number; sort?: string },
+      query?: {
+        page?: number;
+        pageSize?: number;
+        sort?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<ProjectListType, any>({
@@ -1209,7 +1310,9 @@ export class Api<
      * @response `200` `ProjectType` OK
      */
     create: (
-      data: ProjectType & { external?: boolean },
+      data: ProjectType & {
+        external?: boolean;
+      },
       params: RequestParams = {}
     ) =>
       this.request<ProjectType, any>({
@@ -1273,15 +1376,27 @@ export class Api<
       }),
 
     /**
-     * @description Read project details
-     *
-     * @tags Project
-     * @name SharedBaseGet
-     * @request GET:/api/v1/db/meta/projects/{projectId}/shared
-     * @response `200` `{ uuid?: string, url?: string, roles?: string }` OK
-     */
+ * @description Read project details
+ * 
+ * @tags Project
+ * @name SharedBaseGet
+ * @request GET:/api/v1/db/meta/projects/{projectId}/shared
+ * @response `200` `{
+  uuid?: string,
+  url?: string,
+  roles?: string,
+
+}` OK
+ */
     sharedBaseGet: (projectId: string, params: RequestParams = {}) =>
-      this.request<{ uuid?: string; url?: string; roles?: string }, any>({
+      this.request<
+        {
+          uuid?: string;
+          url?: string;
+          roles?: string;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/projects/${projectId}/shared`,
         method: 'GET',
         format: 'json',
@@ -1304,19 +1419,34 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Project
-     * @name SharedBaseCreate
-     * @request POST:/api/v1/db/meta/projects/{projectId}/shared
-     * @response `200` `{ uuid?: string, url?: string, roles?: string }` OK
-     */
+ * No description
+ * 
+ * @tags Project
+ * @name SharedBaseCreate
+ * @request POST:/api/v1/db/meta/projects/{projectId}/shared
+ * @response `200` `{
+  uuid?: string,
+  url?: string,
+  roles?: string,
+
+}` OK
+ */
     sharedBaseCreate: (
       projectId: string,
-      data: { roles?: string; password?: string },
+      data: {
+        roles?: string;
+        password?: string;
+      },
       params: RequestParams = {}
     ) =>
-      this.request<{ uuid?: string; url?: string; roles?: string }, any>({
+      this.request<
+        {
+          uuid?: string;
+          url?: string;
+          roles?: string;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/projects/${projectId}/shared`,
         method: 'POST',
         body: data,
@@ -1326,19 +1456,34 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Project
-     * @name SharedBaseUpdate
-     * @request PATCH:/api/v1/db/meta/projects/{projectId}/shared
-     * @response `200` `{ uuid?: string, url?: string, roles?: string }` OK
-     */
+ * No description
+ * 
+ * @tags Project
+ * @name SharedBaseUpdate
+ * @request PATCH:/api/v1/db/meta/projects/{projectId}/shared
+ * @response `200` `{
+  uuid?: string,
+  url?: string,
+  roles?: string,
+
+}` OK
+ */
     sharedBaseUpdate: (
       projectId: string,
-      data: { roles?: string; password?: string },
+      data: {
+        roles?: string;
+        password?: string;
+      },
       params: RequestParams = {}
     ) =>
-      this.request<{ uuid?: string; url?: string; roles?: string }, any>({
+      this.request<
+        {
+          uuid?: string;
+          url?: string;
+          roles?: string;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/projects/${projectId}/shared`,
         method: 'PATCH',
         body: data,
@@ -1397,19 +1542,32 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Project
-     * @name AuditList
-     * @request GET:/api/v1/db/meta/projects/{projectId}/audits
-     * @response `200` `{ list: (AuditType)[], pageInfo: PaginatedType }` OK
-     */
+ * No description
+ * 
+ * @tags Project
+ * @name AuditList
+ * @request GET:/api/v1/db/meta/projects/{projectId}/audits
+ * @response `200` `{
+  list: (AuditType)[],
+  pageInfo: PaginatedType,
+
+}` OK
+ */
     auditList: (
       projectId: string,
-      query?: { offset?: string; limit?: string },
+      query?: {
+        offset?: string;
+        limit?: string;
+      },
       params: RequestParams = {}
     ) =>
-      this.request<{ list: AuditType[]; pageInfo: PaginatedType }, any>({
+      this.request<
+        {
+          list: AuditType[];
+          pageInfo: PaginatedType;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/projects/${projectId}/audits`,
         method: 'GET',
         query: query,
@@ -1491,7 +1649,10 @@ export class Api<
      */
     update: (
       tableId: string,
-      data: { table_name?: string; project_id?: string },
+      data: {
+        table_name?: string;
+        project_id?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -1528,7 +1689,9 @@ export class Api<
      */
     reorder: (
       tableId: string,
-      data: { order?: number },
+      data: {
+        order?: number;
+      },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -1682,7 +1845,9 @@ export class Api<
      */
     showAllColumn: (
       viewId: string,
-      query?: { ignoreIds?: any[] },
+      query?: {
+        ignoreIds?: any[];
+      },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -1702,7 +1867,9 @@ export class Api<
      */
     hideAllColumn: (
       viewId: string,
-      query?: { ignoreIds?: any[] },
+      query?: {
+        ignoreIds?: any[];
+      },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -1978,15 +2145,23 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags DB view share
-     * @name Create
-     * @request POST:/api/v1/db/meta/views/{viewId}/share
-     * @response `200` `{ uuid?: string }` OK
-     */
+ * No description
+ * 
+ * @tags DB view share
+ * @name Create
+ * @request POST:/api/v1/db/meta/views/{viewId}/share
+ * @response `200` `{
+  uuid?: string,
+
+}` OK
+ */
     create: (viewId: string, params: RequestParams = {}) =>
-      this.request<{ uuid?: string }, any>({
+      this.request<
+        {
+          uuid?: string;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/views/${viewId}/share`,
         method: 'POST',
         format: 'json',
@@ -2003,7 +2178,10 @@ export class Api<
      */
     update: (
       viewId: string,
-      data: { password?: string; meta?: any },
+      data: {
+        password?: string;
+        meta?: any;
+      },
       params: RequestParams = {}
     ) =>
       this.request<SharedViewType, any>({
@@ -2086,15 +2264,28 @@ export class Api<
   };
   dbTableSort = {
     /**
-     * No description
-     *
-     * @tags DB table sort
-     * @name List
-     * @request GET:/api/v1/db/meta/views/{viewId}/sorts
-     * @response `200` `{ sorts?: { list?: (SortType)[] } }` OK
-     */
+ * No description
+ * 
+ * @tags DB table sort
+ * @name List
+ * @request GET:/api/v1/db/meta/views/{viewId}/sorts
+ * @response `200` `{
+  sorts?: {
+  list?: (SortType)[],
+
+},
+
+}` OK
+ */
     list: (viewId: string, params: RequestParams = {}) =>
-      this.request<{ sorts?: { list?: SortType[] } }, any>({
+      this.request<
+        {
+          sorts?: {
+            list?: SortType[];
+          };
+        },
+        any
+      >({
         path: `/api/v1/db/meta/views/${viewId}/sorts`,
         method: 'GET',
         format: 'json',
@@ -2367,7 +2558,11 @@ export class Api<
       orgs: string,
       projectName: string,
       tableName: string,
-      query?: { fields?: any[]; sort?: any[]; where?: string },
+      query?: {
+        fields?: any[];
+        sort?: any[];
+        where?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2392,6 +2587,7 @@ export class Api<
       projectName: string,
       tableName: string,
       query?: {
+        /** Column name of the column you want to group by, eg. `column_name=column1` */
         column_name?: string;
         sort?: any[];
         where?: string;
@@ -2422,7 +2618,13 @@ export class Api<
       projectName: string,
       tableName: string,
       columnId: string,
-      query?: { fields?: any[]; sort?: any[]; where?: string; nested?: any },
+      query?: {
+        fields?: any[];
+        sort?: any[];
+        where?: string;
+        /** Query params for nested data */
+        nested?: any;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2617,7 +2819,9 @@ export class Api<
       projectName: string,
       tableName: string,
       data: any,
-      query?: { where?: string },
+      query?: {
+        where?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2644,7 +2848,9 @@ export class Api<
       projectName: string,
       tableName: string,
       data: any,
-      query?: { where?: string },
+      query?: {
+        where?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2728,7 +2934,10 @@ export class Api<
       relationType: 'mm' | 'hm' | 'bt',
       columnName: string,
       refRowId: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string;
+        offset?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2812,7 +3021,13 @@ export class Api<
       tableName: string,
       viewName: string,
       columnId: string,
-      query?: { fields?: any[]; sort?: any[]; where?: string; nested?: any },
+      query?: {
+        fields?: any[];
+        sort?: any[];
+        where?: string;
+        /** Query params for nested data */
+        nested?: any;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2837,7 +3052,13 @@ export class Api<
       projectName: string,
       tableName: string,
       viewName: string,
-      query?: { fields?: any[]; sort?: any[]; where?: string; nested?: any },
+      query?: {
+        fields?: any[];
+        sort?: any[];
+        where?: string;
+        /** Query params for nested data */
+        nested?: any;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2888,7 +3109,13 @@ export class Api<
       projectName: string,
       tableName: string,
       viewName: string,
-      query?: { fields?: any[]; sort?: any[]; where?: string; nested?: any },
+      query?: {
+        fields?: any[];
+        sort?: any[];
+        where?: string;
+        /** Query params for nested data */
+        nested?: any;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2914,6 +3141,7 @@ export class Api<
       tableName: string,
       viewName: string,
       query?: {
+        /** Column name of the column you want to group by, eg. `column_name=column1` */
         column_name?: string;
         sort?: any[];
         where?: string;
@@ -2944,7 +3172,11 @@ export class Api<
       projectName: string,
       tableName: string,
       viewName: string,
-      query?: { where?: string; nested?: any },
+      query?: {
+        where?: string;
+        /** Query params for nested data */
+        nested?: any;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3089,7 +3321,10 @@ export class Api<
     groupedDataList: (
       sharedViewUuid: string,
       columnId: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string;
+        offset?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3110,7 +3345,10 @@ export class Api<
      */
     dataList: (
       sharedViewUuid: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string;
+        offset?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3156,7 +3394,10 @@ export class Api<
       rowId: string,
       relationType: 'mm' | 'hm' | 'bt',
       columnName: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string;
+        offset?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3198,7 +3439,10 @@ export class Api<
     dataRelationList: (
       sharedViewUuid: string,
       columnName: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string;
+        offset?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3210,15 +3454,23 @@ export class Api<
       }),
 
     /**
-     * @description Read project details
-     *
-     * @tags Public
-     * @name SharedBaseGet
-     * @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
-     * @response `200` `{ project_id?: string }` OK
-     */
+ * @description Read project details
+ * 
+ * @tags Public
+ * @name SharedBaseGet
+ * @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
+ * @response `200` `{
+  project_id?: string,
+
+}` OK
+ */
     sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
-      this.request<{ project_id?: string }, any>({
+      this.request<
+        {
+          project_id?: string;
+        },
+        any
+      >({
         path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
         method: 'GET',
         format: 'json',
@@ -3226,13 +3478,22 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Public
-     * @name SharedViewMetaGet
-     * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
-     * @response `200` `(ViewType & { relatedMetas?: any, client?: string, columns?: ((GridColumnType | FormColumnType | GalleryColumnType) & ColumnType), model?: TableType } & { view?: (FormType | GridType | GalleryType) })` OK
-     */
+ * No description
+ * 
+ * @tags Public
+ * @name SharedViewMetaGet
+ * @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
+ * @response `200` `(ViewType & {
+  relatedMetas?: any,
+  client?: string,
+  columns?: ((GridColumnType | FormColumnType | GalleryColumnType) & ColumnType),
+  model?: TableType,
+
+} & {
+  view?: (FormType | GridType | GalleryType),
+
+})` OK
+ */
     sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
       this.request<
         ViewType & {
@@ -3241,7 +3502,9 @@ export class Api<
           columns?: (GridColumnType | FormColumnType | GalleryColumnType) &
             ColumnType;
           model?: TableType;
-        } & { view?: FormType | GridType | GalleryType },
+        } & {
+          view?: FormType | GridType | GalleryType;
+        },
         any
       >({
         path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
@@ -3260,7 +3523,11 @@ export class Api<
      * @response `201` `any` Created
      */
     commentList: (
-      query: { row_id: string; fk_model_id: string; comments_only?: boolean },
+      query: {
+        row_id: string;
+        fk_model_id: string;
+        comments_only?: boolean;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3280,7 +3547,11 @@ export class Api<
      * @response `200` `void` OK
      */
     commentRow: (
-      data: { row_id: string; fk_model_id: string; description?: string },
+      data: {
+        row_id: string;
+        fk_model_id: string;
+        description?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -3300,7 +3571,10 @@ export class Api<
      * @response `201` `any` Created
      */
     commentCount: (
-      query: { ids: any[]; fk_model_id: string },
+      query: {
+        ids: any[];
+        fk_model_id: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3339,15 +3613,25 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Utils
-     * @name TestConnection
-     * @request POST:/api/v1/db/meta/connection/test
-     * @response `200` `{ code?: number, message?: string }` OK
-     */
+ * No description
+ * 
+ * @tags Utils
+ * @name TestConnection
+ * @request POST:/api/v1/db/meta/connection/test
+ * @response `200` `{
+  code?: number,
+  message?: string,
+
+}` OK
+ */
     testConnection: (data: any, params: RequestParams = {}) =>
-      this.request<{ code?: number; message?: string }, any>({
+      this.request<
+        {
+          code?: number;
+          message?: string;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/connection/test`,
         method: 'POST',
         body: data,
@@ -3439,19 +3723,58 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags Utils
-     * @name AggregatedMetaInfo
-     * @request GET:/api/v1/aggregated-meta-info
-     * @response `200` `{ projectCount?: number, projects?: ({ tableCount?: { table?: number, view?: number }, external?: boolean, viewCount?: { formCount?: number, gridCount?: number, galleryCount?: number, kanbanCount?: number, total?: number, sharedFormCount?: number, sharedGridCount?: number, sharedGalleryCount?: number, sharedKanbanCount?: number, sharedTotal?: number, sharedLockedCount?: number }, webhookCount?: number, filterCount?: number, sortCount?: number, rowCount?: ({ TotalRecords?: string })[], userCount?: number })[], userCount?: number, sharedBaseCount?: number }` OK
-     */
+ * No description
+ * 
+ * @tags Utils
+ * @name AggregatedMetaInfo
+ * @request GET:/api/v1/aggregated-meta-info
+ * @response `200` `{
+  projectCount?: number,
+  projects?: ({
+  tableCount?: {
+  table?: number,
+  view?: number,
+
+},
+  external?: boolean,
+  viewCount?: {
+  formCount?: number,
+  gridCount?: number,
+  galleryCount?: number,
+  kanbanCount?: number,
+  total?: number,
+  sharedFormCount?: number,
+  sharedGridCount?: number,
+  sharedGalleryCount?: number,
+  sharedKanbanCount?: number,
+  sharedTotal?: number,
+  sharedLockedCount?: number,
+
+},
+  webhookCount?: number,
+  filterCount?: number,
+  sortCount?: number,
+  rowCount?: ({
+  TotalRecords?: string,
+
+})[],
+  userCount?: number,
+
+})[],
+  userCount?: number,
+  sharedBaseCount?: number,
+
+}` OK
+ */
     aggregatedMetaInfo: (params: RequestParams = {}) =>
       this.request<
         {
           projectCount?: number;
           projects?: {
-            tableCount?: { table?: number; view?: number };
+            tableCount?: {
+              table?: number;
+              view?: number;
+            };
             external?: boolean;
             viewCount?: {
               formCount?: number;
@@ -3469,7 +3792,9 @@ export class Api<
             webhookCount?: number;
             filterCount?: number;
             sortCount?: number;
-            rowCount?: { TotalRecords?: string }[];
+            rowCount?: {
+              TotalRecords?: string;
+            }[];
             userCount?: number;
           }[];
           userCount?: number;
@@ -3515,15 +3840,25 @@ export class Api<
   };
   dbTableWebhook = {
     /**
-     * No description
-     *
-     * @tags DB table webhook
-     * @name List
-     * @request GET:/api/v1/db/meta/tables/{tableId}/hooks
-     * @response `200` `{ list: (HookType)[], pageInfo: PaginatedType }` OK
-     */
+ * No description
+ * 
+ * @tags DB table webhook
+ * @name List
+ * @request GET:/api/v1/db/meta/tables/{tableId}/hooks
+ * @response `200` `{
+  list: (HookType)[],
+  pageInfo: PaginatedType,
+
+}` OK
+ */
     list: (tableId: string, params: RequestParams = {}) =>
-      this.request<{ list: HookType[]; pageInfo: PaginatedType }, any>({
+      this.request<
+        {
+          list: HookType[];
+          pageInfo: PaginatedType;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/tables/${tableId}/hooks`,
         method: 'GET',
         format: 'json',
@@ -3558,7 +3893,13 @@ export class Api<
      */
     test: (
       tableId: string,
-      data: { payload?: { data?: any; user?: any }; hook?: HookType },
+      data: {
+        payload?: {
+          data?: any;
+          user?: any;
+        };
+        hook?: HookType;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3571,20 +3912,32 @@ export class Api<
       }),
 
     /**
-     * No description
-     *
-     * @tags DB table webhook
-     * @name SamplePayloadGet
-     * @request GET:/api/v1/db/meta/tables/{tableId}/hooks/samplePayload/{operation}
-     * @response `200` `{ plugins?: { list: (PluginType)[], pageInfo: PaginatedType } }` OK
-     */
+ * No description
+ * 
+ * @tags DB table webhook
+ * @name SamplePayloadGet
+ * @request GET:/api/v1/db/meta/tables/{tableId}/hooks/samplePayload/{operation}
+ * @response `200` `{
+  plugins?: {
+  list: (PluginType)[],
+  pageInfo: PaginatedType,
+
+},
+
+}` OK
+ */
     samplePayloadGet: (
       tableId: string,
       operation: 'update' | 'delete' | 'insert',
       params: RequestParams = {}
     ) =>
       this.request<
-        { plugins?: { list: PluginType[]; pageInfo: PaginatedType } },
+        {
+          plugins?: {
+            list: PluginType[];
+            pageInfo: PaginatedType;
+          };
+        },
         any
       >({
         path: `/api/v1/db/meta/tables/${tableId}/hooks/samplePayload/${operation}`,
@@ -3628,15 +3981,25 @@ export class Api<
   };
   plugin = {
     /**
-     * No description
-     *
-     * @tags Plugin
-     * @name List
-     * @request GET:/api/v1/db/meta/plugins
-     * @response `200` `{ list?: (PluginType)[], pageInfo?: PaginatedType }` OK
-     */
+ * No description
+ * 
+ * @tags Plugin
+ * @name List
+ * @request GET:/api/v1/db/meta/plugins
+ * @response `200` `{
+  list?: (PluginType)[],
+  pageInfo?: PaginatedType,
+
+}` OK
+ */
     list: (params: RequestParams = {}) =>
-      this.request<{ list?: PluginType[]; pageInfo?: PaginatedType }, any>({
+      this.request<
+        {
+          list?: PluginType[];
+          pageInfo?: PaginatedType;
+        },
+        any
+      >({
         path: `/api/v1/db/meta/plugins`,
         method: 'GET',
         format: 'json',
@@ -3670,7 +4033,12 @@ export class Api<
      * @response `401` `void` Unauthorized
      */
     test: (
-      data: { id?: string; title?: string; input?: any; category?: string },
+      data: {
+        id?: string;
+        title?: string;
+        input?: any;
+        category?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, void>({
@@ -3745,7 +4113,9 @@ export class Api<
      */
     create: (
       projectId: string,
-      data: { description?: string },
+      data: {
+        description?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -3781,8 +4151,13 @@ export class Api<
      * @request POST:/api/v1/db/storage/upload
      */
     upload: (
-      query: { path: string },
-      data: { files?: any; json?: string },
+      query: {
+        path: string;
+      },
+      data: {
+        files?: any;
+        json?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -3803,7 +4178,9 @@ export class Api<
      * @request POST:/api/v1/db/storage/upload-by-url
      */
     uploadByUrl: (
-      query: { path: string },
+      query: {
+        path: string;
+      },
       data: {
         url?: string;
         fileName?: string;

From b4745db031543d2ca7956615a6e819f677b82976 Mon Sep 17 00:00:00 2001
From: redhoyasa <redhoyasa@gmail.com>
Date: Tue, 25 Oct 2022 14:02:17 +0700
Subject: [PATCH 111/117] fix(nc-gui): make dateformat in date picker reactive

---
 packages/nc-gui/components/cell/DatePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 644dab08c0..d543d592c7 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -16,7 +16,7 @@ const readOnly = inject(ReadonlyInj, false)
 
 let isDateInvalid = $ref(false)
 
-const dateFormat = columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD'
+const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
 
 const localState = $computed({
   get() {

From 38941c31ee7fc9ff476d1d52c0a737165b40953a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 16:09:38 +0800
Subject: [PATCH 112/117] fix(nc-gui): formula values unexpectedly wrapped by
 double quotes

---
 packages/nc-gui/components/virtual-cell/Formula.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index e6192c2ec3..7200dba82f 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -20,7 +20,7 @@ const showEditFormulaWarningMessage = () => {
   }, 3000)
 }
 
-const result = computed(() => (isPg.value ? handleTZ(value) : value))
+const result = computed(() => (isPg.value ? handleTZ(value?.value) : value?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 </script>

From 135c73898b16795c46ace439785f264af488d02f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 16:30:03 +0800
Subject: [PATCH 113/117] refactor(nc-gui): rename value to cellValue

---
 packages/nc-gui/components/virtual-cell/Formula.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index 7200dba82f..f91a8a8cab 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -6,7 +6,7 @@ import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWi
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
 
-const value = inject(CellValueInj)
+const cellValue = inject(CellValueInj)
 
 const { isPg } = useProject()
 
@@ -20,7 +20,7 @@ const showEditFormulaWarningMessage = () => {
   }, 3000)
 }
 
-const result = computed(() => (isPg.value ? handleTZ(value?.value) : value?.value))
+const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 </script>

From a8bb648dbf8fa6d40f4d80640d7e56de762847bd Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 25 Oct 2022 14:18:19 +0530
Subject: [PATCH 114/117] test: fix for handling new record at end

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../integration/common/3f_link_to_another_record.js       | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/scripts/cypress/integration/common/3f_link_to_another_record.js b/scripts/cypress/integration/common/3f_link_to_another_record.js
index efada58e54..5801365a05 100644
--- a/scripts/cypress/integration/common/3f_link_to_another_record.js
+++ b/scripts/cypress/integration/common/3f_link_to_another_record.js
@@ -285,6 +285,14 @@ export const genTest = (apiType, dbType) => {
       cy.intercept("GET", `/api/v1/db/data/noco/**`).as("waitForCardLoad");
 
       addRow(3, "2c");
+      // kludge; remove empty record in the end
+      mainPage.getCell("Title", 3).click();
+      mainPage.getCell("Title", 4).rightclick();
+      // delete row
+      cy.getActiveMenu(".nc-dropdown-grid-context-menu")
+        .find('.ant-dropdown-menu-item:contains("Delete Row")')
+        .first()
+        .click();
 
       cy.get(".nc-row-expand").eq(2).click({ force: true });
 

From 0ac7f4fe95660332a22edd23c622f2ebf733bdaa Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 17:11:38 +0800
Subject: [PATCH 115/117] fix(nc-gui): excel import column type detection logic

---
 packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
index 462c48cbf6..c9048cb724 100644
--- a/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/utils/parsers/ExcelTemplateAdapter.ts
@@ -179,8 +179,14 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
                     column.uidt = UITypes.Currency
                   }
                   if (
-                    rows.slice(1, this.config.maxRowsToParse).some((v: any) => {
-                      return !(!isNaN(Number(v)) && !isNaN(parseFloat(v)))
+                    rows.slice(1, this.config.maxRowsToParse).some((v: any, i: any) => {
+                      const cellId = this.xlsx.utils.encode_cell({
+                        c: range.s.c + col,
+                        r: i + +this.config.firstRowAsHeaders,
+                      })
+
+                      const cellObj = ws[cellId]
+                      return !cellObj || (cellObj.w && !(!isNaN(Number(cellObj.w)) && !isNaN(parseFloat(cellObj.w))))
                     })
                   ) {
                     // fallback to SingleLineText

From 67daab76caf5d69aa8a0c50de9422128e1728a2f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 23:20:19 +0800
Subject: [PATCH 116/117] chore(nc-gui): remove uncessary argument

---
 packages/nc-gui/utils/parsers/TemplateGenerator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/parsers/TemplateGenerator.ts b/packages/nc-gui/utils/parsers/TemplateGenerator.ts
index 829fdad127..ad6ec3e317 100644
--- a/packages/nc-gui/utils/parsers/TemplateGenerator.ts
+++ b/packages/nc-gui/utils/parsers/TemplateGenerator.ts
@@ -1,5 +1,5 @@
 export default class TemplateGenerator {
-  parse(_: Function) {
+  parse() {
     throw new Error("'parse' method is not implemented")
   }
 

From 797eaa05e0a11ed8211c41d03a8d99fbbbd1bfbe Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 23:23:08 +0800
Subject: [PATCH 117/117] chore(nc-gui): remove customParseFormat as it is
 defined in plugins/a.dayjs.ts

---
 packages/nc-gui/utils/dateTimeUtils.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/nc-gui/utils/dateTimeUtils.ts b/packages/nc-gui/utils/dateTimeUtils.ts
index 6339fa0776..8736221840 100644
--- a/packages/nc-gui/utils/dateTimeUtils.ts
+++ b/packages/nc-gui/utils/dateTimeUtils.ts
@@ -1,7 +1,4 @@
 import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-
-dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()