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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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/134] 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 663ba5d1e3ac99cf0f6a7379cb662cc540a8a519 Mon Sep 17 00:00:00 2001
From: navi <oof1lab@gmail.com>
Date: Tue, 18 Oct 2022 06:51:34 +0100
Subject: [PATCH 018/134] New translations en.json (Polish)

---
 packages/nc-gui/lang/pl.json | 372 +++++++++++++++++------------------
 1 file changed, 186 insertions(+), 186 deletions(-)

diff --git a/packages/nc-gui/lang/pl.json b/packages/nc-gui/lang/pl.json
index c17a60e9b7..e6567cd94e 100644
--- a/packages/nc-gui/lang/pl.json
+++ b/packages/nc-gui/lang/pl.json
@@ -16,7 +16,7 @@
     "cancel": "Anuluj",
     "submit": "Składać",
     "create": "Utwórz",
-    "duplicate": "Duplicate",
+    "duplicate": "Duplikuj",
     "insert": "Wstawić",
     "delete": "Kasować",
     "update": "Aktualizacja",
@@ -56,20 +56,20 @@
     "notification": "Powiadomienie",
     "reference": "Sprawdzenie",
     "function": "Funkcjonować",
-    "confirm": "Confirm",
-    "generate": "Generate",
-    "copy": "Copy",
-    "misc": "Miscellaneous",
-    "lock": "Lock",
-    "unlock": "Unlock",
-    "credentials": "Credentials",
-    "help": "Help",
-    "questions": "Questions",
-    "reachOut": "Reach out here",
-    "betaNote": "This feature is currently in beta.",
-    "moreInfo": "More information can be found here",
-    "logs": "Logs",
-    "groupingField": "Grouping Field"
+    "confirm": "Zatwierdź",
+    "generate": "Wygeneruj",
+    "copy": "Kopiuj",
+    "misc": "Pozostałe",
+    "lock": "Zablokuj",
+    "unlock": "Odblokuj",
+    "credentials": "Dane uwierzytelniające",
+    "help": "Pomoc",
+    "questions": "Pytania",
+    "reachOut": "Skontaktuj się tutaj",
+    "betaNote": "Ta funkcja jest nadal w fazie beta.",
+    "moreInfo": "Więcej informacji można znaleźć tutaj",
+    "logs": "Logi",
+    "groupingField": "Grupowanie pola"
   },
   "objects": {
     "project": "Projekt",
@@ -106,10 +106,10 @@
       "commenter": "Komentator",
       "viewer": "Widz"
     },
-    "sqlVIew": "SQL View"
+    "sqlVIew": "Widok SQL"
   },
   "datatype": {
-    "ID": "ID",
+    "ID": "Identyfikator",
     "ForeignKey": "Klucz obcy",
     "SingleLineText": "Tekst pojedynczy linii",
     "LongText": "Długi tekst",
@@ -160,7 +160,7 @@
     "isNotNull": "nie jest null."
   },
   "title": {
-    "erdView": "ERD View",
+    "erdView": "Widok ERD",
     "newProj": "Nowy projekt",
     "myProject": "Moje projekty",
     "formTitle": "Tytuł formy",
@@ -187,17 +187,17 @@
     "headCreateProject": "Utwórz projekt |. NOCODB.",
     "headLogin": "Zaloguj się | NOCODB.",
     "resetPassword": "Zresetuj swoje hasło",
-    "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs",
-    "importFromAirtable": "Import From Airtable",
-    "generateToken": "Generate Token",
-    "APIsAndSupport": "APIs & Support",
-    "helpCenter": "Help center",
-    "swaggerDocumentation": "Swagger Documentation",
-    "quickImportFrom": "Quick Import From",
-    "quickImport": "Quick Import",
-    "advancedSettings": "Advanced Settings",
-    "codeSnippet": "Code Snippet"
+    "teamAndSettings": "Ustawienia zespołu",
+    "apiDocs": "Dokumentacja API",
+    "importFromAirtable": "Importuj z Airtable",
+    "generateToken": "Wygeneruj token",
+    "APIsAndSupport": "API i Wsparcie",
+    "helpCenter": "Centrum pomocy",
+    "swaggerDocumentation": "Dokumentacja Swagger",
+    "quickImportFrom": "Szybki import z",
+    "quickImport": "Szybki import",
+    "advancedSettings": "Ustawienia zaawansowane",
+    "codeSnippet": "Snippet"
   },
   "labels": {
     "notifyVia": "Powiadomić VIA.",
@@ -217,7 +217,7 @@
     "port": "Numer portu",
     "username": "Nazwa użytkownika",
     "password": "Hasło",
-    "schemaName": "Schema name",
+    "schemaName": "Nazwa schematu",
     "database": "Baza danych",
     "action": "Akcja",
     "actions": "działania",
@@ -255,7 +255,7 @@
       "bookDemo": "Zarezerwuj darmowe demo",
       "getAnswered": "Odpowiedzi na pytania",
       "joinDiscord": "Dołącz do Discord.",
-      "joinCommunity": "Join NocoDB Community",
+      "joinCommunity": "Dołącz do społeczności NocoDB",
       "joinReddit": "Dołącz /r/NocoDB",
       "followNocodb": "Śledź NocoDB"
     },
@@ -265,38 +265,38 @@
     "childColumn": "Kolumna dla dzieci",
     "onUpdate": "Na aktualizacji",
     "onDelete": "Na delete.",
-    "account": "Account",
-    "language": "Language",
-    "primaryColor": "Primary Color",
-    "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
-    "requestDataSource": "Request a data source you need?",
-    "apiKey": "API Key",
-    "sharedBase": "Shared Base",
-    "importData": "Import Data",
-    "importSecondaryViews": "Import Secondary Views",
-    "importRollupColumns": "Import Rollup Columns",
-    "importLookupColumns": "Import Lookup Columns",
-    "importAttachmentColumns": "Import Attachment Columns",
-    "importFormulaColumns": "Import Formula Columns",
-    "noData": "No Data",
-    "goToDashboard": "Go to Dashboard",
-    "importing": "Importing",
-    "flattenNested": "Flatten Nested",
-    "downloadAllowed": "Download allowed",
-    "weAreHiring": "We are Hiring!",
-    "primaryKey": "Primary key",
-    "hasMany": "has many",
-    "belongsTo": "belongs to",
-    "manyToMany": "have many to many relation",
-    "extraConnectionParameters": "Extra connection parameters",
-    "commentsOnly": "Comments only",
-    "documentation": "Documentation",
-    "subscribeNewsletter": "Subscribe to our weekly newsletter",
-    "signUpWithGoogle": "Sign up with Google",
-    "signInWithGoogle": "Sign in with Google",
-    "agreeToTos": "By signing up, you agree to the Terms of Service",
-    "welcomeToNc": "Welcome to NocoDB!"
+    "account": "Konto",
+    "language": "Język",
+    "primaryColor": "Kolor podstawowy",
+    "accentColor": "Kolor akcentu",
+    "customTheme": "Motyw Niestandardowy",
+    "requestDataSource": "Poproś o źródło danych, którego potrzebujesz.",
+    "apiKey": "Klucz API",
+    "sharedBase": "Udostępniona baza",
+    "importData": "Import Danych",
+    "importSecondaryViews": "Importuj Drugorzędne Widoki",
+    "importRollupColumns": "Importuj kolumny Rollup",
+    "importLookupColumns": "Importuj kolumny wyszukiwania",
+    "importAttachmentColumns": "Importuj kolumny załączników",
+    "importFormulaColumns": "Importuj kolumny formuły",
+    "noData": "Brak danych",
+    "goToDashboard": "Przejdź do pulpitu",
+    "importing": "Importowanie",
+    "flattenNested": "Spłaszcz zagnieżdżone",
+    "downloadAllowed": "Pobieranie dozwolone",
+    "weAreHiring": "Zatrudniamy!",
+    "primaryKey": "Klucz główny",
+    "hasMany": "ma wiele",
+    "belongsTo": "należy do",
+    "manyToMany": "ma wiele relacji do wielu",
+    "extraConnectionParameters": "Dodatkowe parametry połączenia",
+    "commentsOnly": "Tylko komentarze",
+    "documentation": "Dokumentacja",
+    "subscribeNewsletter": "Zapisz się do naszego cotygodniowego newslettera",
+    "signUpWithGoogle": "Zarejestruj się przez Google",
+    "signInWithGoogle": "Zaloguj się przez Google",
+    "agreeToTos": "Rejestrując się, akceptujesz warunki korzystania z usługi",
+    "welcomeToNc": "Witaj w NocoDB!"
   },
   "activity": {
     "createProject": "Utwórz projekt",
@@ -309,7 +309,7 @@
     "deleteProject": "Usuń Projekt.",
     "refreshProject": "Odśwież projekty",
     "saveProject": "Zapisz Projekt",
-    "deleteKanbanStack": "Delete stack?",
+    "deleteKanbanStack": "Usunąć stos?",
     "createProjectExtended": {
       "extDB": "Utwórz przez podłączenie <br> do zewnętrznej bazy danych",
       "excel": "Utwórz projekt z Excel",
@@ -324,7 +324,7 @@
     "translate": "Pomóż przetłumaczyć",
     "account": {
       "authToken": "Skopiuj auth token.",
-      "swagger": "Swagger: REST APIs",
+      "swagger": "Swagger: REST API",
       "projInfo": "Skopiuj informacje o projekcie.",
       "themes": "Tematy"
     },
@@ -366,11 +366,11 @@
     "deleteRow": "Usuń rząd",
     "deleteSelectedRow": "Usuń wybrane wiersze",
     "importExcel": "Importuj Excel.",
-    "importCSV": "Import CSV",
+    "importCSV": "Importuj z CSV",
     "downloadCSV": "Pobierz jako CSV.",
     "downloadExcel": "Pobierz jako XLSX",
     "uploadCSV": "Prześlij CSV.",
-    "import": "Import",
+    "import": "Importuj",
     "importMetadata": "Importuj metadane",
     "exportMetadata": "Eksportuj metadane",
     "clearMetadata": "Wyczyść metadane",
@@ -405,29 +405,29 @@
     "editConnJson": "Edytuj połączenie JSON.",
     "sponsorUs": "Sponsor",
     "sendEmail": "WYSŁAĆ EMAIL",
-    "addUserToProject": "Add user to project",
-    "getApiSnippet": "Get API Snippet",
-    "clearCell": "Clear cell",
-    "addFilterGroup": "Add Filter Group",
-    "linkRecord": "Link record",
-    "addNewRecord": "Add new record",
-    "useConnectionUrl": "Use Connection URL",
-    "toggleCommentsDraw": "Toggle comments draw",
-    "expandRecord": "Expand Record",
-    "deleteRecord": "Delete Record",
+    "addUserToProject": "Dodaj użytkownika do projektu",
+    "getApiSnippet": "Pobierz Snippet API",
+    "clearCell": "Wyczyść komórkę",
+    "addFilterGroup": "Dodaj grupę filtrów",
+    "linkRecord": "Połącz rekord",
+    "addNewRecord": "Dodaj nowy rekord",
+    "useConnectionUrl": "Użyj adresu URL połączenia",
+    "toggleCommentsDraw": "Przełącz rysowanie komentarzy",
+    "expandRecord": "Rozwiń Rekord",
+    "deleteRecord": "Usuń rekord",
     "erd": {
-      "showColumns": "Show Columns",
-      "showPkAndFk": "Show Primary and Foreign Keys",
-      "showSqlViews": "Show SQL Views",
-      "showMMTables": "Show Many to Many tables",
-      "showJunctionTableNames": "Show Junction Table Names"
+      "showColumns": "Pokaż kolumny",
+      "showPkAndFk": "Pokaż klucze podstawowe i obce",
+      "showSqlViews": "Pokaż widoki SQL",
+      "showMMTables": "Pokaż wiele do wielu tabele",
+      "showJunctionTableNames": "Pokaż nazwy tabel połączeń"
     },
     "kanban": {
-      "collapseStack": "Collapse Stack",
-      "deleteStack": "Delete Stack",
-      "stackedBy": "Stacked By",
-      "chooseGroupingField": "Choose a Grouping Field",
-      "addOrEditStack": "Add / Edit Stack"
+      "collapseStack": "Zwiń stos",
+      "deleteStack": "Usuń stos",
+      "stackedBy": "Ułożone według",
+      "chooseGroupingField": "Wybierz pole grupowania",
+      "addOrEditStack": "Dodaj / Edytuj stos"
     }
   },
   "tooltip": {
@@ -475,8 +475,8 @@
     "noItemsFound": "Nie znaleziono przedmiotów",
     "defaultValue": "Domyślna wartość",
     "filterByEmail": "Filtruj e-mailem",
-    "filterQuery": "Filter query",
-    "selectField": "Select field"
+    "filterQuery": "Filtruj zapytanie",
+    "selectField": "Wybierz pole"
   },
   "msg": {
     "info": {
@@ -570,30 +570,30 @@
       "addDefaultColumns": "Dodaj domyślne kolumny",
       "tableNameInDb": "Nazwa tabeli została zapisana w bazie danych",
       "airtable": {
-        "credentials": "Where to find this?"
+        "credentials": "Gdzie to znaleźć?"
       },
       "import": {
-        "clickOrDrag": "Click or drag file to this area to upload"
+        "clickOrDrag": "Kliknij lub przeciągnij plik do tego obszaru, aby przesłać"
       },
-      "metaDataRecreated": "Table metadata recreated successfully",
-      "invalidCredentials": "Invalid credentials",
-      "downloadingMoreFiles": "Downloading more files",
-      "copiedToClipboard": "Copied to clipboard",
-      "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",
-      "deletedCache": "Deleted cache successfully",
-      "cacheEmpty": "Cache is empty",
-      "exportedCache": "Exported Cache Successfully",
-      "valueAlreadyInList": "This value is already in the list",
-      "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?",
-      "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."
+      "metaDataRecreated": "Pomyślnie przywrócono metadane tabeli",
+      "invalidCredentials": "Nieprawidłowe dane logowania",
+      "downloadingMoreFiles": "Pobieranie większej liczby plików",
+      "copiedToClipboard": "Skopiowano do schowka",
+      "requriedFieldsCantBeMoved": "Wymagane pole nie może być przeniesione",
+      "updateNotAllowedWithoutPK": "Aktualizacja niedozwolona dla tabeli, która nie ma klucza podstawowego",
+      "autoIncFieldNotEditable": "Pole automatycznego przyrostu nie jest edytowalne",
+      "editingPKnotSupported": "Edycja klucza głównego nie jest obsługiwana",
+      "deletedCache": "Usunięto pamięć podręczną",
+      "cacheEmpty": "Pamięć podręczna jest pusta",
+      "exportedCache": "Wyeksportowano pamięć podręczną",
+      "valueAlreadyInList": "Ta wartość jest już na liście",
+      "noColumnsToUpdate": "Brak kolumn do aktualizacji",
+      "tableDeleted": "Tabela usunięta pomyślnie",
+      "generatePublicShareableReadonlyBase": "Generuj publicznie udostępnioną bazę tylko do odczytu",
+      "deleteViewConfirmation": "Czy na pewno chcesz usunąć ten widok?",
+      "deleteTableConfirmation": "Czy chcesz usunąć tabelę",
+      "showM2mTables": "Pokaż tabele M2M",
+      "deleteKanbanStackConfirmation": "Usunięcie tego stosu spowoduje również usunięcie wybranej opcji `{stackToBeDeleted}` z `{groupingField}`. Rekordy przeniosą się do nieskategoryzowanego stosu."
     },
     "error": {
       "searchProject": "Twoje wyszukiwanie dla {search}, nie znaleziono żadnych wyników",
@@ -609,51 +609,51 @@
         "passwdRequired": "Wymagane jest hasło",
         "passwdLength": "Użytkownik musi być co najmniej 8 znaków",
         "passwdMismatch": "Hasła nie pasują do siebie",
-        "completeRuleSet": "At least 8 characters with one Uppercase, one number and one special character",
-        "atLeast8Char": "At least 8 characters",
-        "atLeastOneUppercase": "One Uppercase letter",
-        "atLeastOneNumber": "One Number",
-        "atLeastOneSpecialChar": "One special character",
-        "allowedSpecialCharList": "Allowed special character list"
+        "completeRuleSet": "Co najmniej 8 znaków z jedną wielką literą, jedną cyfrą i jednym znakiem specjalnym",
+        "atLeast8Char": "Co najmniej 8 znaków",
+        "atLeastOneUppercase": "Jedna wielka litera",
+        "atLeastOneNumber": "Jedna cyfra",
+        "atLeastOneSpecialChar": "Jeden znak specjalny",
+        "allowedSpecialCharList": "Dozwolona lista znaków specjalnych"
       },
-      "invalidURL": "Invalid URL",
-      "internalError": "Some internal error occurred",
-      "templateGeneratorNotFound": "Template Generator cannot be found!",
-      "fileUploadFailed": "Failed to upload file",
-      "primaryColumnUpdateFailed": "Failed to update primary column",
-      "formDescriptionTooLong": "Data too long for Form Description",
-      "columnsRequired": "Following columns are required",
-      "selectAtleastOneColumn": "At least one column has to be selected",
-      "columnDescriptionNotFound": "Cannot find the destination column for",
-      "duplicateMappingFound": "Duplicate mapping found, please remove one of the mapping",
-      "nullValueViolatesNotNull": "Null value violates not-null constraint",
-      "sourceHasInvalidNumbers": "Source data contains some invalid numbers",
-      "sourceHasInvalidBoolean": "Source data contains some invalid boolean values",
-      "invalidForm": "Invalid Form",
-      "formValidationFailed": "Form validation failed",
-      "youHaveBeenSignedOut": "You have been signed out",
-      "failedToLoadList": "Failed to load list",
-      "failedToLoadChildrenList": "Failed to load children list",
-      "deleteFailed": "Delete failed",
-      "unlinkFailed": "Unlink failed",
-      "rowUpdateFailed": "Row update failed",
-      "deleteRowFailed": "Failed to delete row",
-      "setFormDataFailed": "Failed to set form data",
-      "formViewUpdateFailed": "Failed to update form view",
-      "tableNameRequired": "Table name is required",
-      "nameShouldStartWithAnAlphabetOr_": "Name should start with an alphabet or _",
-      "followingCharactersAreNotAllowed": "Following characters are not allowed",
-      "columnNameRequired": "Column name is required",
-      "projectNameExceeds50Characters": "Project name exceeds 50 characters",
-      "projectNameCannotStartWithSpace": "Project name cannot start with space",
-      "requiredField": "Required field",
-      "ipNotAllowed": "IP not allowed",
-      "targetFileIsNotAnAcceptedFileType": "Target file is not an accepted file type",
-      "theAcceptedFileTypeIsCsv": "The accepted file type is .csv",
-      "theAcceptedFileTypesAreXlsXlsxXlsmOdsOts": "The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots",
-      "parameterKeyCannotBeEmpty": "Parameter key cannot be empty",
-      "duplicateParameterKeysAreNotAllowed": "Duplicate parameter keys are not allowed",
-      "fieldRequired": "{value} cannot be empty."
+      "invalidURL": "Nieprawidłowy adres URL",
+      "internalError": "Wystąpił błąd wewnętrzny",
+      "templateGeneratorNotFound": "Nie można znaleźć generatora szablonów!",
+      "fileUploadFailed": "Nie udało się przesłać pliku",
+      "primaryColumnUpdateFailed": "Nie udało się zaktualizować kolumny głównej",
+      "formDescriptionTooLong": "Zbyt długi opis formularza",
+      "columnsRequired": "Następujące kolumny są wymagane",
+      "selectAtleastOneColumn": "Co najmniej jedna kolumna musi być wybrana",
+      "columnDescriptionNotFound": "Nie można znaleźć kolumny docelowej dla",
+      "duplicateMappingFound": "Znaleziono zduplikowane mapowanie, usuń jedno z mapowań",
+      "nullValueViolatesNotNull": "Wartość pusta narusza ograniczenie nie puste",
+      "sourceHasInvalidNumbers": "Dane źródłowe zawierają nieprawidłowe numery",
+      "sourceHasInvalidBoolean": "Dane źródłowe zawierają nieprawidłowe wartości logiczne",
+      "invalidForm": "Nieprawidłowy formularz",
+      "formValidationFailed": "Weryfikacja formularza nie powiodła się",
+      "youHaveBeenSignedOut": "Wylogowano",
+      "failedToLoadList": "Nie udało się załadować listy",
+      "failedToLoadChildrenList": "Nie udało się załadować listy podrzędnej",
+      "deleteFailed": "Usunięcie nie powiodło się",
+      "unlinkFailed": "Nie udało się odłączyć",
+      "rowUpdateFailed": "Aktualizacja wiersza nie powiodła się",
+      "deleteRowFailed": "Nie udało się usunąć wiersza",
+      "setFormDataFailed": "Nie udało się ustawić danych formularza",
+      "formViewUpdateFailed": "Nie udało się zaktualizować widoku formularza",
+      "tableNameRequired": "Nazwa tabeli jest wymagana",
+      "nameShouldStartWithAnAlphabetOr_": "Nazwa powinna zaczynać się od alfabetu lub od _",
+      "followingCharactersAreNotAllowed": "Następujące znaki są niedozwolone",
+      "columnNameRequired": "Nazwa kolumny jest wymagana",
+      "projectNameExceeds50Characters": "Nazwa projektu przekracza 50 znaków",
+      "projectNameCannotStartWithSpace": "Nazwa projektu nie może zaczynać się od spacji",
+      "requiredField": "Pole wymagane",
+      "ipNotAllowed": "Adres IP niedozwolony",
+      "targetFileIsNotAnAcceptedFileType": "Plik docelowy nie jest akceptowanym typem pliku",
+      "theAcceptedFileTypeIsCsv": "Akceptowany typ pliku to .csv",
+      "theAcceptedFileTypesAreXlsXlsxXlsmOdsOts": "Akceptowane typy plików to: .xls, .xlsx, .xlsm, .ods, .ots",
+      "parameterKeyCannotBeEmpty": "Klucz parametru nie może być pusty",
+      "duplicateParameterKeysAreNotAllowed": "Zduplikowane klucze parametrów są niedozwolone",
+      "fieldRequired": "{value} nie może być puste."
     },
     "toast": {
       "exportMetadata": "Pomyślnie wyeksportowano metadane projektu",
@@ -663,43 +663,43 @@
       "startProject": "Projekt rozpoczął się pomyślnie",
       "restartProject": "Projekt zrestartowany pomyślnie",
       "deleteProject": "Projekt usunięto pomyślnie",
-      "authToken": "Token autoryzny skopiowany do schowka",
+      "authToken": "Token został skopiowany do schowka",
       "projInfo": "Skopiowane informacje do schowka",
-      "inviteUrlCopy": "Skopiowany Zaproś URL do schowka",
+      "inviteUrlCopy": "Skopiowano do schowka",
       "createView": "Widok utworzony pomyślnie",
-      "formEmailSMTP": "Aktywuj wtyczkę SMTP w App Store, aby umożliwić powiadomienie e-mail",
-      "collabView": "Pomyślnie przełączony na widok współpracy",
-      "lockedView": "Pomyślnie przełączony na zablokowany widok",
+      "formEmailSMTP": "Aktywuj wtyczkę SMTP w App Store, aby umożliwić powiadomienia e-mail",
+      "collabView": "Pomyślnie przełączono na widok współpracy",
+      "lockedView": "Pomyślnie przełączono na zablokowany widok",
       "futureRelease": "Wkrótce!"
     },
     "success": {
-      "updatedUIACL": "Updated UI ACL for tables successfully",
-      "pluginUninstalled": "Plugin uninstalled successfully",
-      "pluginSettingsSaved": "Plugin settings saved successfully",
-      "pluginTested": "Successfully tested plugin settings",
-      "tableRenamed": "Table renamed successfully",
-      "viewDeleted": "View deleted successfully",
-      "primaryColumnUpdated": "Successfully updated as primary column",
-      "tableDataExported": "Successfully exported all table data",
-      "updated": "Successfully updated",
-      "sharedViewDeleted": "Deleted shared view successfully",
-      "viewRenamed": "View renamed successfully",
-      "tokenGenerated": "Token generated successfully",
-      "tokenDeleted": "Token deleted successfully",
-      "userAddedToProject": "Successfully added user to project",
-      "userDeletedFromProject": "Successfully deleted user from project",
-      "inviteEmailSent": "Invite Email sent successfully",
-      "inviteURLCopied": "Invite URL copied to clipboard",
-      "shareableURLCopied": "Copied shareable base URL to clipboard!",
-      "embeddableHTMLCodeCopied": "Copied embeddable HTML code!",
-      "userDetailsUpdated": "Successfully updated the user details",
-      "tableDataImported": "Successfully imported table data",
-      "webhookUpdated": "Webhook details updated successfully",
-      "webhookDeleted": "Hook deleted successfully",
-      "webhookTested": "Webhook tested successfully",
-      "columnUpdated": "Column updated",
-      "columnCreated": "Column created",
-      "passwordChanged": "Password changed successfully. Please login again."
+      "updatedUIACL": "Pomyślnie zaktualizowano UI ACL dla tabel",
+      "pluginUninstalled": "Wtyczka odinstalowana pomyślnie",
+      "pluginSettingsSaved": "Ustawienia wtyczki zapisane pomyślnie",
+      "pluginTested": "Pomyślnie przetestowano ustawienia wtyczki",
+      "tableRenamed": "Zmieniono nazwę tabeli",
+      "viewDeleted": "Widok usunięty pomyślnie",
+      "primaryColumnUpdated": "Pomyślnie zaktualizowano jako kolumnę główną",
+      "tableDataExported": "Pomyślnie wyeksportowano wszystkie dane tabeli",
+      "updated": "Zaktualizowano pomyślnie",
+      "sharedViewDeleted": "Usunięto udostępniony widok",
+      "viewRenamed": "Zmieniono nazwę widoku",
+      "tokenGenerated": "Token został wygenerowany pomyślnie",
+      "tokenDeleted": "Token usunięty pomyślnie",
+      "userAddedToProject": "Pomyślnie dodano użytkownika do projektu",
+      "userDeletedFromProject": "Użytkownik usunięty z projektu",
+      "inviteEmailSent": "E-mail z zaproszeniem wysłany pomyślnie",
+      "inviteURLCopied": "Adres URL zaproszenia skopiowany do schowka",
+      "shareableURLCopied": "Skopiowano adres URL do schowka!",
+      "embeddableHTMLCodeCopied": "Skopiowany kod HTML do osadzenia!",
+      "userDetailsUpdated": "Pomyślnie zaktualizowano dane użytkownika",
+      "tableDataImported": "Pomyślnie zaimportowano dane tabeli",
+      "webhookUpdated": "Szczegóły webhooka zostały zaktualizowane",
+      "webhookDeleted": "Webhook usunięty pomyślnie",
+      "webhookTested": "Webhook przetestowany pomyślnie",
+      "columnUpdated": "Kolumna zaktualizowana",
+      "columnCreated": "Kolumna utworzona",
+      "passwordChanged": "Hasło zostało zmienione. Zaloguj się ponownie."
     }
   }
 }

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 019/134] 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 020/134] 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 021/134] 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 022/134] 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 023/134] 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 024/134] 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 025/134] 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 026/134] 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 027/134] 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 028/134] 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 029/134] 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 030/134] 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 031/134] 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 032/134] 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 033/134] 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 034/134] 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 035/134] 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 036/134] 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 037/134] 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 038/134] 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 039/134] 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 040/134] 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 041/134] 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 042/134] 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 043/134] 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 044/134] 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 045/134] 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 046/134] 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 047/134] 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 66811b1da096f8057e0a2ab5d293a099c0ebbf03 Mon Sep 17 00:00:00 2001
From: navi <oof1lab@gmail.com>
Date: Thu, 20 Oct 2022 09:05:14 +0100
Subject: [PATCH 048/134] New translations en.json (Chinese Simplified)

---
 packages/nc-gui/lang/zh-Hans.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/lang/zh-Hans.json b/packages/nc-gui/lang/zh-Hans.json
index 8389e4b88a..d625c40a00 100644
--- a/packages/nc-gui/lang/zh-Hans.json
+++ b/packages/nc-gui/lang/zh-Hans.json
@@ -160,7 +160,7 @@
     "isNotNull": "不是空虚"
   },
   "title": {
-    "erdView": "ERD View",
+    "erdView": "实体关系图",
     "newProj": "创建新项目",
     "myProject": "我的项目",
     "formTitle": "表格标题",
@@ -265,11 +265,11 @@
     "childColumn": "子列",
     "onUpdate": "更新",
     "onDelete": "删除",
-    "account": "Account",
-    "language": "Language",
-    "primaryColor": "Primary Color",
-    "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
+    "account": "帐户",
+    "language": "语言",
+    "primaryColor": "主色调",
+    "accentColor": "强调色",
+    "customTheme": "定制样式",
     "requestDataSource": "Request a data source you need?",
     "apiKey": "API Key",
     "sharedBase": "Shared Base",
@@ -406,7 +406,7 @@
     "sponsorUs": "赞助我们",
     "sendEmail": "发送邮件",
     "addUserToProject": "Add user to project",
-    "getApiSnippet": "Get API Snippet",
+    "getApiSnippet": "生成代码",
     "clearCell": "Clear cell",
     "addFilterGroup": "Add Filter Group",
     "linkRecord": "Link record",

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 049/134] 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 050/134] 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 051/134] 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 052/134] 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 053/134] 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 054/134] 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 055/134] 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 056/134] 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 057/134] 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 058/134] 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 059/134] 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 060/134] 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 061/134] 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 062/134] 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 063/134] 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 064/134] 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 065/134] 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 066/134] 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 067/134] 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 068/134] 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 069/134] 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 070/134] 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 071/134] 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 072/134] 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 073/134] 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 074/134] 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 075/134] 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 076/134] 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 077/134] 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 078/134] 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 079/134] 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 080/134] 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 081/134] 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 082/134] 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 083/134] 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 084/134] 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 085/134] 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 086/134] 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 087/134] 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 088/134] 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 089/134] 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 090/134] 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 091/134] 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 092/134] 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 093/134] 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 094/134] 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 095/134] 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 23c3c62ae888d9d0438888c8c1d7e5433f40556b Mon Sep 17 00:00:00 2001
From: navi <oof1lab@gmail.com>
Date: Sun, 23 Oct 2022 00:54:30 +0100
Subject: [PATCH 096/134] New translations en.json (Italian)

---
 packages/nc-gui/lang/it.json | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/lang/it.json b/packages/nc-gui/lang/it.json
index 0b96c4e5e8..726898818d 100644
--- a/packages/nc-gui/lang/it.json
+++ b/packages/nc-gui/lang/it.json
@@ -1,6 +1,6 @@
 {
   "general": {
-    "home": "Home",
+    "home": "Pagina iniziale",
     "load": "Carica",
     "open": "Apri",
     "close": "Chiudi",
@@ -56,15 +56,15 @@
     "notification": "Notifica",
     "reference": "Riferimento",
     "function": "Funzione",
-    "confirm": "Confirm",
-    "generate": "Generate",
-    "copy": "Copy",
+    "confirm": "Conferma",
+    "generate": "Genera",
+    "copy": "Copia",
     "misc": "Miscellaneous",
-    "lock": "Lock",
-    "unlock": "Unlock",
-    "credentials": "Credentials",
-    "help": "Help",
-    "questions": "Questions",
+    "lock": "Blocca",
+    "unlock": "Sblocca",
+    "credentials": "Credenziali",
+    "help": "Aiuto",
+    "questions": "Domande",
     "reachOut": "Reach out here",
     "betaNote": "This feature is currently in beta.",
     "moreInfo": "More information can be found here",
@@ -109,7 +109,7 @@
     "sqlVIew": "SQL View"
   },
   "datatype": {
-    "ID": "ID",
+    "ID": "Numero",
     "ForeignKey": "Chiave straniera",
     "SingleLineText": "Testo a riga singola",
     "LongText": "Testo lungo",
@@ -196,7 +196,7 @@
     "swaggerDocumentation": "Swagger Documentation",
     "quickImportFrom": "Quick Import From",
     "quickImport": "Quick Import",
-    "advancedSettings": "Advanced Settings",
+    "advancedSettings": "Impostazioni Avanzate",
     "codeSnippet": "Code Snippet"
   },
   "labels": {
@@ -266,10 +266,10 @@
     "onUpdate": "All'aggiornamento",
     "onDelete": "All'eliminazione",
     "account": "Account",
-    "language": "Language",
+    "language": "Lingua",
     "primaryColor": "Primary Color",
     "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
+    "customTheme": "Tema Personalizzato",
     "requestDataSource": "Request a data source you need?",
     "apiKey": "API Key",
     "sharedBase": "Shared Base",

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 097/134] 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 098/134] 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 099/134] 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 100/134] 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 101/134] 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 102/134] 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 103/134] 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 104/134] 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 105/134] 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 106/134] 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 107/134] 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 108/134] 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 109/134] 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 110/134] 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 111/134] 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 112/134] 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 113/134] 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 114/134] 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 115/134] 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 116/134] 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 117/134] 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 118/134] 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 bcbd809cc78f60d621f14d3b3e049d17f407575a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 18:04:11 +0800
Subject: [PATCH 119/134] refactor(workflows): replace set-output with github
 env

---
 .github/workflows/release-docker.yml      | 14 ++++-----
 .github/workflows/release-draft.yml       |  4 +--
 .github/workflows/release-executables.yml |  4 +--
 .github/workflows/release-nightly-dev.yml | 29 ++++++++----------
 .github/workflows/release-nocodb.yml      | 24 ++++++---------
 .github/workflows/release-pr.yml          | 36 ++++++++++-------------
 6 files changed, 48 insertions(+), 63 deletions(-)

diff --git a/.github/workflows/release-docker.yml b/.github/workflows/release-docker.yml
index fe4e692238..7075387bf5 100644
--- a/.github/workflows/release-docker.yml
+++ b/.github/workflows/release-docker.yml
@@ -60,10 +60,10 @@ jobs:
               DOCKER_REPOSITORY=${DOCKER_REPOSITORY}-timely
             fi
           fi
-          echo "::set-output name=DOCKER_REPOSITORY::${DOCKER_REPOSITORY}"
-          echo "::set-output name=DOCKER_BUILD_TAG::${DOCKER_BUILD_TAG}"
-          echo ${DOCKER_REPOSITORY}
-          echo ${DOCKER_BUILD_TAG}
+          echo "DOCKER_REPOSITORY=${DOCKER_REPOSITORY}" >> $GITHUB_OUTPUT
+          echo "DOCKER_BUILD_TAG=${DOCKER_BUILD_TAG}" >> $GITHUB_OUTPUT
+          echo DOCKER_REPOSITORY: ${DOCKER_REPOSITORY}
+          echo DOCKER_BUILD_TAG: ${DOCKER_BUILD_TAG}
 
       - name: Checkout
         uses: actions/checkout@v3
@@ -127,14 +127,14 @@ jobs:
         uses: docker/build-push-action@v2
         with:
           context: ${{ env.working-directory }}
-          build-args: NC_VERSION=${{ steps.get-docker-repository.outputs.DOCKER_BUILD_TAG }}
+          build-args: NC_VERSION=${{ env.DOCKER_BUILD_TAG }}
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new
           push: true
           tags: |
-            nocodb/${{ steps.get-docker-repository.outputs.DOCKER_REPOSITORY }}:${{ steps.get-docker-repository.outputs.DOCKER_BUILD_TAG }}
-            nocodb/${{ steps.get-docker-repository.outputs.DOCKER_REPOSITORY }}:latest
+            nocodb/${{ env.DOCKER_REPOSITORY }}:${{ env.DOCKER_BUILD_TAG }}
+            nocodb/${{ env.DOCKER_REPOSITORY }}:latest
 
         # Temp fix
         # https://github.com/docker/build-push-action/issues/252
diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml
index 0d8f5eaae3..da31d8e612 100644
--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@@ -53,7 +53,7 @@ jobs:
           if [[ ${{ github.event.inputs.tagHeadSHA || inputs.tagHeadSHA }} == "Y" ]]; then
             TARGET_SHA=$(git rev-list -n 1 HEAD | tail -1)
           fi
-          echo "::set-output name=TARGET_SHA::${TARGET_SHA}"
+          echo "TARGET_SHA=${TARGET_SHA}" >> $GITHUB_OUTPUT
           echo "Setting TARGET_SHA: ${TARGET_SHA}"
       - name: Create tag
         uses: actions/github-script@v3
@@ -66,7 +66,7 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               ref: "refs/tags/${{ github.event.inputs.tag || inputs.tag }}",
-              sha: "${{steps.get-sha.outputs.TARGET_SHA}}"
+              sha: "${{ env.TARGET_SHA }}"
             })
       - uses: actions/setup-node@v3
         with:
diff --git a/.github/workflows/release-executables.yml b/.github/workflows/release-executables.yml
index 1defd80b19..cbcb5071a3 100644
--- a/.github/workflows/release-executables.yml
+++ b/.github/workflows/release-executables.yml
@@ -194,7 +194,7 @@ jobs:
           cp ./mac-dist/Noco-macos-x64 ./mac-dist/nocodb
           tar -czf ./mac-dist/nocodb.tar.gz ./mac-dist/nocodb
           rm ./mac-dist/nocodb
-          echo "::set-output name=CHECKSUM::$(shasum -a 256 ./mac-dist/nocodb.tar.gz | awk '{print $1}')"
+          echo "CHECKSUM=$(shasum -a 256 ./mac-dist/nocodb.tar.gz | awk '{print $1}')" >> $GITHUB_OUTPUT
         id: compress
 
 
@@ -240,7 +240,7 @@ jobs:
             desc "NocoDB : Opensource smart spreadsheet"
             homepage "https://github.com/nocodb/nocodb"
             url "https://github.com/nocodb/nocodb/releases/download/${{ github.event.inputs.tag || inputs.tag }}/nocodb.tar.gz"
-            sha256 "${{ steps.compress.outputs.CHECKSUM }}"
+            sha256 "${{ env.CHECKSUM }}"
             license "MIT"
             version "${{ github.event.inputs.tag || inputs.tag }}"
 
diff --git a/.github/workflows/release-nightly-dev.yml b/.github/workflows/release-nightly-dev.yml
index 79b651cf8d..b2667a7b07 100644
--- a/.github/workflows/release-nightly-dev.yml
+++ b/.github/workflows/release-nightly-dev.yml
@@ -26,24 +26,19 @@ jobs:
           if [[ ${{ github.event_name }} == 'workflow_dispatch' ]]; then
             IS_DAILY='N'
           fi
-          echo "::set-output name=NIGHTLY_BUILD_TAG::${TAG_NAME}"
-          echo "::set-output name=IS_DAILY::${IS_DAILY}"
-          echo "::set-output name=CURRENT_VERSION::${CURRENT_VERSION}"
-      - name: verify-tag
-        run: |
-          echo ${{ steps.tag-step.outputs.NIGHTLY_BUILD_TAG }}
-          echo ${{ steps.tag-step.outputs.IS_DAILY }}
-          echo ${{ steps.tag-step.outputs.CURRENT_VERSION }}
-    outputs:
-      nightly_build_tag: ${{ steps.tag-step.outputs.NIGHTLY_BUILD_TAG }}
-      is_daily: ${{ steps.tag-step.outputs.IS_DAILY }}
-      current_version: ${{ steps.tag-step.outputs.CURRENT_VERSION }}
+          echo "NIGHTLY_BUILD_TAG=${TAG_NAME}" >> $GITHUB_OUTPUT
+          echo "IS_DAILY=${IS_DAILY}" >> $GITHUB_OUTPUT
+          echo "CURRENT_VERSION=${CURRENT_VERSION}" >> $GITHUB_OUTPUT
+          # verify
+          echo NIGHTLY_BUILD_TAG: ${{ env.NIGHTLY_BUILD_TAG }}
+          echo IS_DAILY: ${{ env.IS_DAILY }}
+          echo CURRENT_VERSION: ${{ env.CURRENT_VERSION }}
   # Build frontend and backend and publish to npm
   release-npm:
     needs: set-tag
     uses: ./.github/workflows/release-npm.yml
     with:
-      tag: ${{ needs.set-tag.outputs.nightly_build_tag }}
+      tag: ${{ env.NIGHTLY_BUILD_TAG }}
       targetEnv: 'DEV'
     secrets:
       NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
@@ -53,7 +48,7 @@ jobs:
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-timely-executables.yml
     with:
-      tag: ${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.nightly_build_tag }}
+      tag: ${{ env.CURRENT_VERSION }}-${{ env.NIGHTLY_BUILD_TAG }}
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
 
@@ -62,10 +57,10 @@ jobs:
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-docker.yml
     with:
-      currentVersion: ${{ needs.set-tag.outputs.current_version }}
-      tag: ${{ needs.set-tag.outputs.nightly_build_tag }}
+      currentVersion: ${{ env.CURRENT_VERSION }}
+      tag: ${{ env.NIGHTLY_BUILD_TAG }}
       targetEnv: 'DEV'
-      isDaily: ${{ needs.set-tag.outputs.is_daily }}
+      isDaily: ${{ env.IS_DAILY }}
     secrets:
       DOCKERHUB_USERNAME: "${{ secrets.DOCKERHUB_USERNAME }}"
       DOCKERHUB_TOKEN: "${{ secrets.DOCKERHUB_TOKEN }}"
diff --git a/.github/workflows/release-nocodb.yml b/.github/workflows/release-nocodb.yml
index 767841f613..02126b2e52 100644
--- a/.github/workflows/release-nocodb.yml
+++ b/.github/workflows/release-nocodb.yml
@@ -25,9 +25,6 @@ jobs:
   process-input:
     runs-on: ubuntu-latest
     needs: validate-branch
-    outputs:
-      target_tag: ${{ steps.process-input.outputs.target_tag }}
-      prev_tag: ${{ steps.process-input.outputs.prev_tag }}
     steps:
       - id: process-input
         name: process-input
@@ -47,18 +44,15 @@ jobs:
 
           echo target version: ${TARGET_TAG}
           echo previous version: ${PREV_TAG}
-          echo "::set-output name=target_tag::${TARGET_TAG}"
-          echo "::set-output name=prev_tag::${PREV_TAG}"
-      - name: Verify
-        run : |
-          echo ${{ steps.process-input.outputs.target_tag }}
+          echo "TARGET_TAG=${TARGET_TAG}" >> $GITHUB_OUTPUT
+          echo "PREV_TAG=${PREV_TAG}" >> $GITHUB_OUTPUT
 
   # Merge develop to master
   pr-to-master:
     needs: process-input
     uses: ./.github/workflows/pr-to-master.yml
     with:
-      tag: ${{ needs.process-input.outputs.target_tag }}
+      tag: ${{ env.TARGET_TAG }}
       targetEnv: ${{ github.event.inputs.targetEnv || 'PROD' }}
 
   # Build, install, publish frontend and backend to npm
@@ -66,7 +60,7 @@ jobs:
     needs: [pr-to-master, process-input]
     uses: ./.github/workflows/release-npm.yml
     with:
-      tag: ${{ needs.process-input.outputs.target_tag }}
+      tag: ${{ env.TARGET_TAG }}
       targetEnv: ${{ github.event.inputs.targetEnv || 'PROD' }}
     secrets:
       NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
@@ -76,8 +70,8 @@ jobs:
     needs: [release-npm, process-input]
     uses: ./.github/workflows/release-draft.yml
     with:
-      tag: ${{ needs.process-input.outputs.target_tag }}
-      prev_tag: ${{ needs.process-input.outputs.prev_tag }}
+      tag: ${{ env.TARGET_TAG }}
+      prev_tag: ${{ env.PREV_TAG }}
       tagHeadSHA: 'N'
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
@@ -88,7 +82,7 @@ jobs:
     uses: ./.github/workflows/release-docker.yml
     with:
       currentVersion: 'N/A'
-      tag: ${{ needs.process-input.outputs.target_tag }}
+      tag: ${{ env.TARGET_TAG }}
       targetEnv: ${{ github.event.inputs.targetEnv || 'PROD' }}
     secrets:
       DOCKERHUB_USERNAME: "${{ secrets.DOCKERHUB_USERNAME }}"
@@ -99,7 +93,7 @@ jobs:
     needs: [release-draft-note, process-input]
     uses: ./.github/workflows/release-executables.yml
     with:
-      tag: ${{ needs.process-input.outputs.target_tag }}
+      tag: ${{ env.TARGET_TAG }}
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
 
@@ -109,7 +103,7 @@ jobs:
     uses: ./.github/workflows/release-close-issue.yml
     with:
       issue_label: '🚀 Status: Ready for Next Release'
-      version: ${{ needs.process-input.outputs.target_tag }}
+      version: ${{ env.TARGET_TAG }}
 
   # Publish Docs
   publish-docs:
diff --git a/.github/workflows/release-pr.yml b/.github/workflows/release-pr.yml
index f0e77db917..2c820caaf8 100644
--- a/.github/workflows/release-pr.yml
+++ b/.github/workflows/release-pr.yml
@@ -35,15 +35,11 @@ jobs:
           CURRENT_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_url} https://github.com/nocodb/nocodb/releases/latest))
           # Construct tag name
           TAG_NAME=pr-${PR_NUMBER}-${CURRENT_DATE}-${CURRENT_TIME}
-          echo "::set-output name=TARGET_TAG::${TAG_NAME}"
-          echo "::set-output name=CURRENT_VERSION::${CURRENT_VERSION}"
-      - name: verify-tag
-        run: |
-          echo ${{ steps.tag-step.outputs.TARGET_TAG }}
-          echo ${{ steps.tag-step.outputs.CURRENT_VERSION }}
-    outputs:
-      target_tag: ${{ steps.tag-step.outputs.TARGET_TAG }}
-      current_version: ${{ steps.tag-step.outputs.CURRENT_VERSION }}
+          echo "TAG_NAME=${TAG_NAME}" >> $GITHUB_OUTPUT
+          echo "CURRENT_VERSION=${CURRENT_VERSION}" >> $GITHUB_OUTPUT
+          # Verify
+          echo env.TARGET_TAG: ${{ env.TARGET_TAG }}
+          echo env.CURRENT_VERSION: ${{ env.CURRENT_VERSION }}
 
   # Build, install, publish frontend and backend to npm
   release-npm:
@@ -51,7 +47,7 @@ jobs:
     needs: [set-tag]
     uses: ./.github/workflows/release-npm.yml
     with:
-      tag: ${{ needs.set-tag.outputs.target_tag }}
+      tag: ${{ env.TARGET_TAG }}
       targetEnv: 'DEV'
     secrets:
       NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
@@ -62,8 +58,8 @@ jobs:
     needs: [release-npm, set-tag]
     uses: ./.github/workflows/release-docker.yml
     with:
-      currentVersion: ${{ needs.set-tag.outputs.current_version }}
-      tag: ${{ needs.set-tag.outputs.target_tag }}
+      currentVersion: ${{ env.CURRENT_VERSION }}
+      tag: ${{ env.TARGET_TAG }}
       targetEnv: 'DEV'
       isDaily: 'N'
     secrets:
@@ -76,7 +72,7 @@ jobs:
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-timely-executables.yml
     with:
-      tag: ${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}
+      tag: ${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
 
@@ -91,7 +87,7 @@ jobs:
           body: |
             The PR changes have been deployed. Please run the following command to verify:
             ```
-            docker run -d -p 8888:8080 nocodb/nocodb-timely:${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}
+            docker run -d -p 8888:8080 nocodb/nocodb-timely:${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}
             ```
 
   # Add a comment for PR executable build
@@ -108,24 +104,24 @@ jobs:
             #### MacOS
 
             ```bash
-            mkdir -p ./${{ needs.set-tag.outputs.current_version }}/${{ needs.set-tag.outputs.target_tag }} && cd "$_" \
-                && curl http://dl.nocodb.com/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}/Noco-macos-arm64 -o noco -L \
+            mkdir -p ./${{ env.CURRENT_VERSION }}/${{ env.TARGET_TAG }} && cd "$_" \
+                && curl http://dl.nocodb.com/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}/Noco-macos-arm64 -o noco -L \
                 && chmod +x noco \
                 && ./noco
             ```
             #### Linux
 
             ```bash
-            mkdir -p ./${{ needs.set-tag.outputs.current_version }}/${{ needs.set-tag.outputs.target_tag }} && cd "$_" \
-               && curl http://dl.nocodb.com/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}/Noco-linux-x64 -o noco -L \
+            mkdir -p ./${{ env.CURRENT_VERSION }}/${{ env.TARGET_TAG }} && cd "$_" \
+               && curl http://dl.nocodb.com/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}/Noco-linux-x64 -o noco -L \
                && chmod +x noco \
                && ./noco
             ```
             #### Windows
 
             ```bash
-            iwr http://dl.nocodb.com/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}/Noco-win-arm64.exe
+            iwr http://dl.nocodb.com/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}/Noco-win-arm64.exe
             .\Noco-win-arm64.exe
             ```
 
-            For executables visit [here](https://github.com/nocodb/nocodb-timely/releases/tag/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }})
+            For executables visit [here](https://github.com/nocodb/nocodb-timely/releases/tag/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }})

From b25e8a11fe5e20cc0cb2c97c5fa9c9dd42fa4f14 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 25 Oct 2022 18:32:01 +0800
Subject: [PATCH 120/134] fix(nc-gui): set output if env is shared between jobs

---
 .github/workflows/release-docker.yml      |  6 ++---
 .github/workflows/release-draft.yml       |  2 +-
 .github/workflows/release-executables.yml |  2 +-
 .github/workflows/release-nightly-dev.yml | 23 +++++++++-------
 .github/workflows/release-nocodb.yml      | 23 +++++++++-------
 .github/workflows/release-pr.yml          | 32 +++++++++++++----------
 6 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/.github/workflows/release-docker.yml b/.github/workflows/release-docker.yml
index 7075387bf5..3ad56e29f9 100644
--- a/.github/workflows/release-docker.yml
+++ b/.github/workflows/release-docker.yml
@@ -127,14 +127,14 @@ jobs:
         uses: docker/build-push-action@v2
         with:
           context: ${{ env.working-directory }}
-          build-args: NC_VERSION=${{ env.DOCKER_BUILD_TAG }}
+          build-args: NC_VERSION=${{ steps.get-docker-repository.outputs.DOCKER_BUILD_TAG }}
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new
           push: true
           tags: |
-            nocodb/${{ env.DOCKER_REPOSITORY }}:${{ env.DOCKER_BUILD_TAG }}
-            nocodb/${{ env.DOCKER_REPOSITORY }}:latest
+            nocodb/${{ steps.get-docker-repository.outputs.DOCKER_REPOSITORY }}:${{ steps.get-docker-repository.outputs.DOCKER_BUILD_TAG }}
+            nocodb/${{ steps.get-docker-repository.outputs.DOCKER_REPOSITORY }}:latest
 
         # Temp fix
         # https://github.com/docker/build-push-action/issues/252
diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml
index da31d8e612..1fe4fb3d09 100644
--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@@ -66,7 +66,7 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               ref: "refs/tags/${{ github.event.inputs.tag || inputs.tag }}",
-              sha: "${{ env.TARGET_SHA }}"
+              sha: "${{ steps.get-sha.outputs.TARGET_SHA }}"
             })
       - uses: actions/setup-node@v3
         with:
diff --git a/.github/workflows/release-executables.yml b/.github/workflows/release-executables.yml
index cbcb5071a3..f5b3bf90bb 100644
--- a/.github/workflows/release-executables.yml
+++ b/.github/workflows/release-executables.yml
@@ -240,7 +240,7 @@ jobs:
             desc "NocoDB : Opensource smart spreadsheet"
             homepage "https://github.com/nocodb/nocodb"
             url "https://github.com/nocodb/nocodb/releases/download/${{ github.event.inputs.tag || inputs.tag }}/nocodb.tar.gz"
-            sha256 "${{ env.CHECKSUM }}"
+            sha256 "${{ steps.compress.outputs.CHECKSUM }}"
             license "MIT"
             version "${{ github.event.inputs.tag || inputs.tag }}"
 
diff --git a/.github/workflows/release-nightly-dev.yml b/.github/workflows/release-nightly-dev.yml
index b2667a7b07..55a711c3f2 100644
--- a/.github/workflows/release-nightly-dev.yml
+++ b/.github/workflows/release-nightly-dev.yml
@@ -29,16 +29,21 @@ jobs:
           echo "NIGHTLY_BUILD_TAG=${TAG_NAME}" >> $GITHUB_OUTPUT
           echo "IS_DAILY=${IS_DAILY}" >> $GITHUB_OUTPUT
           echo "CURRENT_VERSION=${CURRENT_VERSION}" >> $GITHUB_OUTPUT
-          # verify
-          echo NIGHTLY_BUILD_TAG: ${{ env.NIGHTLY_BUILD_TAG }}
-          echo IS_DAILY: ${{ env.IS_DAILY }}
-          echo CURRENT_VERSION: ${{ env.CURRENT_VERSION }}
+      - name: verify-tag
+        run: |
+          echo ${{ steps.tag-step.outputs.NIGHTLY_BUILD_TAG }}
+          echo ${{ steps.tag-step.outputs.IS_DAILY }}
+          echo ${{ steps.tag-step.outputs.CURRENT_VERSION }}
+    outputs:
+      nightly_build_tag: ${{ steps.tag-step.outputs.NIGHTLY_BUILD_TAG }}
+      is_daily: ${{ steps.tag-step.outputs.IS_DAILY }}
+      current_version: ${{ steps.tag-step.outputs.CURRENT_VERSION }}
   # Build frontend and backend and publish to npm
   release-npm:
     needs: set-tag
     uses: ./.github/workflows/release-npm.yml
     with:
-      tag: ${{ env.NIGHTLY_BUILD_TAG }}
+      tag: ${{ needs.set-tag.outputs.nightly_build_tag }}
       targetEnv: 'DEV'
     secrets:
       NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
@@ -48,7 +53,7 @@ jobs:
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-timely-executables.yml
     with:
-      tag: ${{ env.CURRENT_VERSION }}-${{ env.NIGHTLY_BUILD_TAG }}
+      tag: ${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.nightly_build_tag }}
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
 
@@ -57,10 +62,10 @@ jobs:
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-docker.yml
     with:
-      currentVersion: ${{ env.CURRENT_VERSION }}
-      tag: ${{ env.NIGHTLY_BUILD_TAG }}
+      currentVersion: ${{ needs.set-tag.outputs.current_version }}
+      tag: ${{ needs.set-tag.outputs.nightly_build_tag }}
       targetEnv: 'DEV'
-      isDaily: ${{ env.IS_DAILY }}
+      isDaily: ${{ needs.set-tag.outputs.is_daily }}
     secrets:
       DOCKERHUB_USERNAME: "${{ secrets.DOCKERHUB_USERNAME }}"
       DOCKERHUB_TOKEN: "${{ secrets.DOCKERHUB_TOKEN }}"
diff --git a/.github/workflows/release-nocodb.yml b/.github/workflows/release-nocodb.yml
index 02126b2e52..3ef265b424 100644
--- a/.github/workflows/release-nocodb.yml
+++ b/.github/workflows/release-nocodb.yml
@@ -25,6 +25,9 @@ jobs:
   process-input:
     runs-on: ubuntu-latest
     needs: validate-branch
+    outputs:
+      target_tag: ${{ steps.process-input.outputs.target_tag }}
+      prev_tag: ${{ steps.process-input.outputs.prev_tag }}
     steps:
       - id: process-input
         name: process-input
@@ -42,17 +45,19 @@ jobs:
             TARGET_TAG=$(echo ${PREV_TAG} | awk -F. -v OFS=. '{$NF += 1 ; print}')
           fi
 
-          echo target version: ${TARGET_TAG}
-          echo previous version: ${PREV_TAG}
           echo "TARGET_TAG=${TARGET_TAG}" >> $GITHUB_OUTPUT
           echo "PREV_TAG=${PREV_TAG}" >> $GITHUB_OUTPUT
+      - name: Verify
+        run : |
+          echo TARGET_TAG: ${{ steps.process-input.outputs.target_tag }}
+          echo PREV_TAG: ${{ steps.process-input.outputs.prev_tag }}
 
   # Merge develop to master
   pr-to-master:
     needs: process-input
     uses: ./.github/workflows/pr-to-master.yml
     with:
-      tag: ${{ env.TARGET_TAG }}
+      tag: ${{ needs.process-input.outputs.target_tag }}
       targetEnv: ${{ github.event.inputs.targetEnv || 'PROD' }}
 
   # Build, install, publish frontend and backend to npm
@@ -60,7 +65,7 @@ jobs:
     needs: [pr-to-master, process-input]
     uses: ./.github/workflows/release-npm.yml
     with:
-      tag: ${{ env.TARGET_TAG }}
+      tag: ${{ needs.process-input.outputs.target_tag }}
       targetEnv: ${{ github.event.inputs.targetEnv || 'PROD' }}
     secrets:
       NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
@@ -70,8 +75,8 @@ jobs:
     needs: [release-npm, process-input]
     uses: ./.github/workflows/release-draft.yml
     with:
-      tag: ${{ env.TARGET_TAG }}
-      prev_tag: ${{ env.PREV_TAG }}
+      tag: ${{ needs.process-input.outputs.target_tag }}
+      prev_tag: ${{ needs.process-input.outputs.prev_tag }}
       tagHeadSHA: 'N'
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
@@ -82,7 +87,7 @@ jobs:
     uses: ./.github/workflows/release-docker.yml
     with:
       currentVersion: 'N/A'
-      tag: ${{ env.TARGET_TAG }}
+      tag: ${{ needs.process-input.outputs.target_tag }}
       targetEnv: ${{ github.event.inputs.targetEnv || 'PROD' }}
     secrets:
       DOCKERHUB_USERNAME: "${{ secrets.DOCKERHUB_USERNAME }}"
@@ -93,7 +98,7 @@ jobs:
     needs: [release-draft-note, process-input]
     uses: ./.github/workflows/release-executables.yml
     with:
-      tag: ${{ env.TARGET_TAG }}
+      tag: ${{ needs.process-input.outputs.target_tag }}
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
 
@@ -103,7 +108,7 @@ jobs:
     uses: ./.github/workflows/release-close-issue.yml
     with:
       issue_label: '🚀 Status: Ready for Next Release'
-      version: ${{ env.TARGET_TAG }}
+      version: ${{ needs.process-input.outputs.target_tag }}
 
   # Publish Docs
   publish-docs:
diff --git a/.github/workflows/release-pr.yml b/.github/workflows/release-pr.yml
index 2c820caaf8..e3103f346b 100644
--- a/.github/workflows/release-pr.yml
+++ b/.github/workflows/release-pr.yml
@@ -37,9 +37,13 @@ jobs:
           TAG_NAME=pr-${PR_NUMBER}-${CURRENT_DATE}-${CURRENT_TIME}
           echo "TAG_NAME=${TAG_NAME}" >> $GITHUB_OUTPUT
           echo "CURRENT_VERSION=${CURRENT_VERSION}" >> $GITHUB_OUTPUT
-          # Verify
-          echo env.TARGET_TAG: ${{ env.TARGET_TAG }}
-          echo env.CURRENT_VERSION: ${{ env.CURRENT_VERSION }}
+      - name: verify-tag
+        run: |
+          echo ${{ steps.tag-step.outputs.TARGET_TAG }}
+          echo ${{ steps.tag-step.outputs.CURRENT_VERSION }}
+    outputs:
+      target_tag: ${{ steps.tag-step.outputs.TARGET_TAG }}
+      current_version: ${{ steps.tag-step.outputs.CURRENT_VERSION }}
 
   # Build, install, publish frontend and backend to npm
   release-npm:
@@ -47,7 +51,7 @@ jobs:
     needs: [set-tag]
     uses: ./.github/workflows/release-npm.yml
     with:
-      tag: ${{ env.TARGET_TAG }}
+      tag: ${{ needs.set-tag.outputs.target_tag }}
       targetEnv: 'DEV'
     secrets:
       NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
@@ -58,8 +62,8 @@ jobs:
     needs: [release-npm, set-tag]
     uses: ./.github/workflows/release-docker.yml
     with:
-      currentVersion: ${{ env.CURRENT_VERSION }}
-      tag: ${{ env.TARGET_TAG }}
+      currentVersion: ${{ needs.set-tag.outputs.current_version }}
+      tag: ${{ needs.set-tag.outputs.target_tag }}
       targetEnv: 'DEV'
       isDaily: 'N'
     secrets:
@@ -72,7 +76,7 @@ jobs:
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-timely-executables.yml
     with:
-      tag: ${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}
+      tag: ${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}
     secrets:
       NC_GITHUB_TOKEN: "${{ secrets.NC_GITHUB_TOKEN }}"
 
@@ -87,7 +91,7 @@ jobs:
           body: |
             The PR changes have been deployed. Please run the following command to verify:
             ```
-            docker run -d -p 8888:8080 nocodb/nocodb-timely:${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}
+            docker run -d -p 8888:8080 nocodb/nocodb-timely:${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}
             ```
 
   # Add a comment for PR executable build
@@ -104,24 +108,24 @@ jobs:
             #### MacOS
 
             ```bash
-            mkdir -p ./${{ env.CURRENT_VERSION }}/${{ env.TARGET_TAG }} && cd "$_" \
-                && curl http://dl.nocodb.com/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}/Noco-macos-arm64 -o noco -L \
+            mkdir -p ./${{ needs.set-tag.outputs.current_version }}/${{ needs.set-tag.outputs.target_tag }} && cd "$_" \
+                && curl http://dl.nocodb.com/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}/Noco-macos-arm64 -o noco -L \
                 && chmod +x noco \
                 && ./noco
             ```
             #### Linux
 
             ```bash
-            mkdir -p ./${{ env.CURRENT_VERSION }}/${{ env.TARGET_TAG }} && cd "$_" \
-               && curl http://dl.nocodb.com/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}/Noco-linux-x64 -o noco -L \
+            mkdir -p ./${{ needs.set-tag.outputs.current_version }}/${{ needs.set-tag.outputs.target_tag }} && cd "$_" \
+               && curl http://dl.nocodb.com/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}/Noco-linux-x64 -o noco -L \
                && chmod +x noco \
                && ./noco
             ```
             #### Windows
 
             ```bash
-            iwr http://dl.nocodb.com/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }}/Noco-win-arm64.exe
+            iwr http://dl.nocodb.com/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}/Noco-win-arm64.exe
             .\Noco-win-arm64.exe
             ```
 
-            For executables visit [here](https://github.com/nocodb/nocodb-timely/releases/tag/${{ env.CURRENT_VERSION }}-${{ env.TARGET_TAG }})
+            For executables visit [here](https://github.com/nocodb/nocodb-timely/releases/tag/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }})

From d10f87810ed7f6ba549ffb6012bbc7b178995f40 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 14 Oct 2022 23:58:18 +0200
Subject: [PATCH 121/134] fix(nc-gui): dark mode styles for longtext field in
 form view

---
 .../[projectType]/form/[viewId]/index.vue     | 53 ++++++++++++-------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index a9acad9f97..05dfc72bfa 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow, useTheme, watch } from "#imports";
 
-const { sharedViewMeta } = useSharedFormStoreOrThrow()
+const { sharedViewMeta } = useSharedFormStoreOrThrow();
 
-const isDark = useDark()
+const isDark = useDark();
 
-const { setTheme } = useTheme()
+const { setTheme } = useTheme();
 
-const route = useRoute()
+const route = useRoute();
 
-const router = useRouter()
+const router = useRouter();
 
 watch(
   () => sharedViewMeta.value.withTheme,
   (hasTheme) => {
-    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme)
+    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme);
   },
-  { immediate: true },
-)
+  { immediate: true }
+);
 
 const onClick = () => {
-  isDark.value = !isDark.value
-}
+  isDark.value = !isDark.value;
+};
 
 const shouldRedirect = (to: string) => {
   if (sharedViewMeta.value.surveyMode) {
-    if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`)
+    if (!to.includes("survey")) navigateTo(`/nc/form/${route.params.viewId}/survey`);
   } else {
-    if (to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}`)
+    if (to.includes("survey")) navigateTo(`/nc/form/${route.params.viewId}`);
   }
-}
+};
 
-shouldRedirect(route.name as string)
+shouldRedirect(route.name as string);
 
-router.afterEach((to) => shouldRedirect(to.name as string))
+router.afterEach((to) => shouldRedirect(to.name as string));
 </script>
 
 <template>
@@ -69,6 +69,8 @@ p {
 
 .nc-form-view {
   .nc-cell {
+    @apply bg-white dark:bg-slate-500;
+
     &.nc-cell-checkbox {
       @apply color-transition !border-0;
 
@@ -92,6 +94,7 @@ p {
         @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-gray-300 dark:border-slate-200;
 
         input,
+        textarea,
         &.nc-virtual-cell,
         > div {
           @apply bg-white dark:(bg-slate-500 text-white);
@@ -104,12 +107,24 @@ p {
             @apply dark:(bg-slate-700 text-white);
           }
         }
-      }
 
-      .nc-attachment-cell > div {
-        @apply dark:(bg-slate-100);
+        &.nc-cell-longtext {
+          @apply !p-0 pb-2px pr-2px;
+        }
+
+        textarea {
+          @apply px-4 py-2 rounded;
+
+          &:focus {
+            box-shadow: none !important;
+          }
+        }
       }
     }
+
+    .nc-attachment-cell > div {
+      @apply dark:(bg-slate-100);
+    }
   }
 }
 

From 7744db0edcaa0e83f04431d867dec28a372a644b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 17 Oct 2022 18:55:41 +0200
Subject: [PATCH 122/134] chore(nc-gui): lint

---
 .../composables/useMultiSelect/index.ts       |  2 +-
 packages/nc-gui/composables/useViewData.ts    |  3 +-
 .../[projectType]/form/[viewId]/index.vue     | 32 +++++++++----------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 91652a6cd0..23f634af3a 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -14,7 +14,7 @@ export function useMultiSelect(
   fields: MaybeRef<any[]>,
   data: MaybeRef<any[]>,
   editEnabled: MaybeRef<boolean>,
-  isPkAvail: MaybeRef<boolean>,
+  isPkAvail: MaybeRef<boolean | undefined>,
   clearCell: Function,
   makeEditable: Function,
   scrollToActiveCell?: (row?: number | null, col?: number | null) => void,
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index ae6508e1b5..98c60ef416 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -202,7 +202,6 @@ export function useViewData(
 
   async function insertRow(
     currentRow: Row,
-    _rowIndex = formattedData.value?.length,
     ltarState: Record<string, any> = {},
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
@@ -301,7 +300,7 @@ export function useViewData(
     await until(() => !(row.rowMeta?.new && row.rowMeta?.saving)).toMatch((v) => v)
 
     if (row.rowMeta.new) {
-      return await insertRow(row, formattedData.value.indexOf(row), ltarState, args)
+      return await insertRow(row, ltarState, args)
     } else {
       await updateRowProperty(row, property!, args)
     }
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 05dfc72bfa..caf84a628e 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow, useTheme, watch } from "#imports";
+import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
-const { sharedViewMeta } = useSharedFormStoreOrThrow();
+const { sharedViewMeta } = useSharedFormStoreOrThrow()
 
-const isDark = useDark();
+const isDark = useDark()
 
-const { setTheme } = useTheme();
+const { setTheme } = useTheme()
 
-const route = useRoute();
+const route = useRoute()
 
-const router = useRouter();
+const router = useRouter()
 
 watch(
   () => sharedViewMeta.value.withTheme,
   (hasTheme) => {
-    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme);
+    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme)
   },
-  { immediate: true }
-);
+  { immediate: true },
+)
 
 const onClick = () => {
-  isDark.value = !isDark.value;
-};
+  isDark.value = !isDark.value
+}
 
 const shouldRedirect = (to: string) => {
   if (sharedViewMeta.value.surveyMode) {
-    if (!to.includes("survey")) navigateTo(`/nc/form/${route.params.viewId}/survey`);
+    if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`)
   } else {
-    if (to.includes("survey")) navigateTo(`/nc/form/${route.params.viewId}`);
+    if (to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}`)
   }
-};
+}
 
-shouldRedirect(route.name as string);
+shouldRedirect(route.name as string)
 
-router.afterEach((to) => shouldRedirect(to.name as string));
+router.afterEach((to) => shouldRedirect(to.name as string))
 </script>
 
 <template>

From d11cbde7f2b4d7afdc6707cd09faf14376369855 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 25 Oct 2022 14:14:34 +0200
Subject: [PATCH 123/134] fix(nc-gui): disable submit if form was submitted

---
 .../pages/[projectType]/form/[viewId]/index/survey.vue    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index a2fd83afd4..474f645859 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -159,6 +159,12 @@ function resetForm() {
   goTo(steps.value[0])
 }
 
+function submit() {
+  if (submitted.value) return
+
+  submitForm()
+}
+
 onReset(resetForm)
 
 onKeyStroke(['ArrowLeft', 'ArrowDown'], () => {
@@ -289,7 +295,7 @@ onMounted(() => {
                   type="submit"
                   class="uppercase scaling-btn prose-sm"
                   data-cy="nc-survey-form__btn-submit"
-                  @click="submitForm"
+                  @click="submit"
                 >
                   {{ $t('general.submit') }}
                 </button>

From 17c30da02af9056f5953ab63bcb57723ff3f1098 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 25 Oct 2022 14:25:47 +0200
Subject: [PATCH 124/134] fix(nc-gui): expand cell width for duration cells in
 form view

---
 .../nc-gui/pages/[projectType]/form/[viewId]/index.vue    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index caf84a628e..94b30028a7 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -93,6 +93,14 @@ p {
       &.nc-input {
         @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-gray-300 dark:border-slate-200;
 
+        .duration-cell-wrapper {
+          @apply w-full;
+
+          input {
+            @apply !outline-none;
+          }
+        }
+
         input,
         textarea,
         &.nc-virtual-cell,

From 4f5a4a6102a3586bd7f6ac5181cef8b986aae4fb Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 25 Oct 2022 14:28:31 +0200
Subject: [PATCH 125/134] chore(nc-gui): placeholder text color

---
 packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 94b30028a7..22ff34cebc 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -98,6 +98,10 @@ p {
 
           input {
             @apply !outline-none;
+
+            &::placeholder {
+              @apply text-gray-400 dark:text-slate-300;
+            }
           }
         }
 

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 126/134] 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 127/134] 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()

From aef93008009bdccc1503bab7b48eeb3ab4fda2df Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 26 Oct 2022 08:43:46 +0200
Subject: [PATCH 128/134] fix(nc-gui): limit transition duration to 5s

---
 packages/nc-gui/components/smartsheet/toolbar/ShareView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index fd0878f974..3fd4cf1ee8 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -43,7 +43,7 @@ const shared = ref<SharedView>({ id: '', meta: {}, password: undefined })
 const transitionDuration = computed({
   get: () => shared.value.meta.transitionDuration || 250,
   set: (duration) => {
-    shared.value.meta = { ...shared.value.meta, transitionDuration: duration }
+    shared.value.meta = { ...shared.value.meta, transitionDuration: duration > 5000 ? 5000 : duration }
   },
 })
 

From c0a9645d94cfdc347f3c71882b24194b1d9037a5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 26 Oct 2022 08:57:48 +0200
Subject: [PATCH 129/134] fix(nc-gui): replace submit

---
 .../nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 474f645859..441cfd1ca9 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -175,7 +175,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp'], () => {
 })
 onKeyStroke(['Enter', 'Space'], () => {
   if (isLast.value) {
-    submitForm()
+    submit()
   } else {
     goNext(AnimationTarget.OkButton)
   }

From 840fcba0d3e753ec65b40a73d38c54270a510a80 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 26 Oct 2022 09:01:18 +0200
Subject: [PATCH 130/134] fix(nc-gui): correctly access readonly

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

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 28c4618429..04c5d73521 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -38,7 +38,7 @@ const checkboxMeta = $computed(() => {
 })
 
 function onClick() {
-  if (!readOnly) {
+  if (!readOnly?.value) {
     vModel = !vModel
   }
 }

From f48faa7771d8b51ef17a9484edfd8f6fe53c6344 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 26 Oct 2022 17:08:41 +0800
Subject: [PATCH 131/134] fix(nc-gui): incorrect index to splice in
 deleteTableColumn

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

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 66ecc7a5f8..0d36628253 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -219,7 +219,8 @@ function deleteTable(tableIdx: number) {
   data.tables.splice(tableIdx, 1)
 }
 
-function deleteTableColumn(tableIdx: number, columnIdx: number) {
+function deleteTableColumn(tableIdx: number, columnKey: number) {
+  const columnIdx = data.tables[tableIdx].columns.findIndex((c: ColumnType & { key: number }) => c.key === columnKey)
   data.tables[tableIdx].columns?.splice(columnIdx, 1)
 }
 

From e7af4e99ee35efec9413052dda19cd676745221a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 26 Oct 2022 17:11:46 +0800
Subject: [PATCH 132/134] chore(nc-gui): remove optional chaining on columns

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

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 0d36628253..ca5943a4fb 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -221,7 +221,7 @@ function deleteTable(tableIdx: number) {
 
 function deleteTableColumn(tableIdx: number, columnKey: number) {
   const columnIdx = data.tables[tableIdx].columns.findIndex((c: ColumnType & { key: number }) => c.key === columnKey)
-  data.tables[tableIdx].columns?.splice(columnIdx, 1)
+  data.tables[tableIdx].columns.splice(columnIdx, 1)
 }
 
 function addNewColumnRow(tableIdx: number, uidt: string) {

From 49a94eeec0ae1ad0166608ff45d0678486a5fccf Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 26 Oct 2022 17:17:55 +0800
Subject: [PATCH 133/134] chore(nc-gui): remove unused import / variables

---
 packages/nc-gui/components/smartsheet/Cell.vue    | 1 -
 packages/nc-gui/components/smartsheet/Gallery.vue | 3 ---
 packages/nc-gui/components/smartsheet/Kanban.vue  | 1 -
 3 files changed, 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index bf562f6e6c..ac4d5d017d 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 1ce19714f2..d82e6776f6 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -10,7 +10,6 @@ import {
   MetaInj,
   OpenNewRecordFormHookInj,
   PaginationDataInj,
-  ReadonlyInj,
   ReloadRowDataHookInj,
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
@@ -51,8 +50,6 @@ const {
   addEmptyRow,
 } = useViewData(meta, view)
 
-const { isUIAllowed } = useUIPermission()
-
 provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(true))
 provide(IsGridInj, ref(false))
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index fa9a931619..33cbf360e9 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -12,7 +12,6 @@ import {
   IsPublicInj,
   MetaInj,
   OpenNewRecordFormHookInj,
-  ReadonlyInj,
   inject,
   onBeforeMount,
   onBeforeUnmount,

From 2d59eff5e9911ad6f4246778fd73adac504b36de Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 26 Oct 2022 17:18:20 +0800
Subject: [PATCH 134/134] chore(nocodb): fix:prettier

---
 packages/nocodb/src/lib/meta/api/columnApis.ts  |  3 +--
 packages/nocodb/src/lib/meta/api/projectApis.ts | 17 ++++++++++-------
 .../nocodb/src/lib/meta/api/sync/helpers/job.ts |  9 +++++++--
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 883ed17cc3..66f5b65220 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -970,7 +970,6 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
                   ]
                 );
               }
-              
             } else if (driverType === 'pg') {
               await dbDriver.raw(
                 `UPDATE ?? SET ??  = array_to_string(array_remove(string_to_array(??, ','), ?), ',')`,
@@ -1150,7 +1149,7 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
                     newOp.title,
                   ]
                 );
-              } 
+              }
             } else if (driverType === 'pg') {
               await dbDriver.raw(
                 `UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`,
diff --git a/packages/nocodb/src/lib/meta/api/projectApis.ts b/packages/nocodb/src/lib/meta/api/projectApis.ts
index 9d96f189bb..44b688aa43 100644
--- a/packages/nocodb/src/lib/meta/api/projectApis.ts
+++ b/packages/nocodb/src/lib/meta/api/projectApis.ts
@@ -113,20 +113,23 @@ async function projectCreate(req: Request<any, any>, res) {
       // each file will be named as nc_<random_id>.db
       const fs = require('fs');
       const toolDir = NcConfigFactory.getToolDir();
-      const nanoidv2 = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 14);
+      const nanoidv2 = customAlphabet(
+        '1234567890abcdefghijklmnopqrstuvwxyz',
+        14
+      );
       if (!fs.existsSync(`${toolDir}/nc_minimal_dbs`)) {
-          fs.mkdirSync(`${toolDir}/nc_minimal_dbs`);
+        fs.mkdirSync(`${toolDir}/nc_minimal_dbs`);
       }
       const dbId = nanoidv2();
       const projectTitle = DOMPurify.sanitize(projectBody.title);
       projectBody.prefix = '';
       projectBody.bases = [
         {
-          type: "sqlite3",
+          type: 'sqlite3',
           config: {
-            client: "sqlite3",
+            client: 'sqlite3',
             connection: {
-              client: "sqlite3",
+              client: 'sqlite3',
               database: projectTitle,
               connection: {
                 filename: `${toolDir}/nc_minimal_dbs/${projectTitle}_${dbId}.db`,
@@ -134,8 +137,8 @@ async function projectCreate(req: Request<any, any>, res) {
               useNullAsDefault: true,
             },
           },
-          inflection_column: "camelize",
-          inflection_table: "camelize",
+          inflection_column: 'camelize',
+          inflection_table: 'camelize',
         },
       ];
     } else {
diff --git a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
index 39202e609b..22dcee8380 100644
--- a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
@@ -446,7 +446,12 @@ export default async (
           // TODO fix record mapping (this causes every record to map first option, we can't handle them using data api as they don't provide option id within data we might instead get the correct mapping from schema file )
           let dupNo = 1;
           const defaultName = (value as any).name;
-          while (options.find((el) => el.title.toLowerCase() === (value as any).name.toLowerCase())) {
+          while (
+            options.find(
+              (el) =>
+                el.title.toLowerCase() === (value as any).name.toLowerCase()
+            )
+          ) {
             (value as any).name = `${defaultName}_${dupNo++}`;
           }
           options.push({
@@ -585,7 +590,7 @@ export default async (
                   .map((el) => `'${el.title.replace(/'/gi, "''")}'`)
                   .join(',') || "''";
             }
-            
+
             break;
           case undefined:
             break;