Nc fix: rename id column if exist in import table (#8984)

* fix(nc-gui): rename id column if exist in import table * fix(nc-gui): record already exist issue * fix(nc-gui): import issue * fix(nc-gui): duplicate table name issue * Update QuickImport.vue * fix(nc-gui): import data mapping issue * fix(nc-gui): prevent user from using id as column name while importing csv * fix(nc-gui): pr review changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
6 months ago · 2bd3b71648
5 changed files with 69 additions and 10 deletions
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@ -258,7 +258,7 @@ function populateUniqueTableName(tn: string, draftTn: string[] = []) {
      const s = t.table_name.split('___')
      let target = t.table_name
      if (s.length > 1) target = s[1]
-      return target === `${tn}`
+      return target === `${tn}` || t.table_name === `${tn}`
    })
  ) {
    tn = `${tn}_${c++}`
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@ -145,7 +145,11 @@ const validators = computed(() =>
    hasSelectColumn.value[tableIdx] = false

    table.columns?.forEach((column, columnIdx) => {
-      acc[`tables.${tableIdx}.columns.${columnIdx}.title`] = [fieldRequiredValidator(), fieldLengthValidator()]
+      acc[`tables.${tableIdx}.columns.${columnIdx}.title`] = [
+        fieldRequiredValidator(),
+        fieldLengthValidator(),
+        reservedFieldNameValidator(),
+      ]
      acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator()]
      if (isSelect(column)) {
        hasSelectColumn.value[tableIdx] = true
@ -237,6 +241,10 @@ function parseTemplate({ tables = [], ...rest }: Props['baseTemplate']) {
      ...rest,
      columns: [
        ...columns.map((c: any, idx: number) => {
+          if (!importDataOnly && c.column_name?.toLowerCase() === 'id') {
+            const cn = populateUniqueColumnName('id', [], columns)
+            c.column_name = cn
+          }
          c.key = idx
          return c
        }),
@ -282,6 +290,9 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
  const dateFormatMap: Record<number, string> = {}
  return batchData.map((data) =>
    (columns || []).reduce((aggObj, col: Record<string, any>) => {
+      // we renaming existing id column and using our own auto increment id
+      if (col.uidt === UITypes.ID) return aggObj
+
      // 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
@ -570,6 +581,7 @@ async function importTemplate() {
          await $api.dbTableColumn.primaryColumnSet(createdTable.columns[0].id as string)
        }
      }
+
      // bulk insert data
      if (importData) {
        const offset = maxRowsToParse
@ -623,7 +635,7 @@ function mapDefaultColumns() {
  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 }
+      const o = { srcCn: col.column_name, srcTitle: col.title, destCn: '', enabled: true }
      if (columns.value) {
        const tableColumn = columns.value.find((c) => c.column_name === col.column_name)
        if (tableColumn) {
@ -712,6 +724,20 @@ const setErrorState = (errorsFields: any[]) => {
  formError.value = errorMap
 }

+function populateUniqueColumnName(cn: string, draftCn: string[] = [], columns: ColumnType[]) {
+  let c = 2
+  let columnName = `${cn}${1}`
+  while (
+    draftCn.includes(columnName) ||
+    columns?.some((c) => {
+      return c.column_name === columnName || c.title === columnName
+    })
+  ) {
+    columnName = `${cn}${c++}`
+  }
+  return columnName
+}
+
 watch(formRef, () => {
  setTimeout(async () => {
    try {
@ -801,8 +827,8 @@ watch(modelRef, async () => {
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'source_column'">
                <NcTooltip class="truncate inline-block">
-                  <template #title>{{ record.srcCn }}</template>
-                  {{ record.srcCn }}
+                  <template #title>{{ record.srcTitle }}</template>
+                  {{ record.srcTitle }}
                </NcTooltip>
              </template>

@ -917,17 +943,29 @@ watch(modelRef, async () => {

              <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-form-item
+                    v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.title`]"
+                    class="nc-table-field-name"
+                  >
                    <a-input
                      :ref="(el: HTMLInputElement) => (inputRefs[record.key] = el)"
                      v-model:value="record.title"
                      class="!rounded-md"
-                    />
+                    >
+                      <template #suffix>
+                        <NcTooltip v-if="formError?.[`tables.${tableIdx}.columns.${record.key}.title`]" class="flex">
+                          <template #title
+                            >{{ formError?.[`tables.${tableIdx}.columns.${record.key}.title`].join('\n') }}
+                          </template>
+                          <GeneralIcon icon="info" class="h-4 w-4 text-red-500 flex-none" />
+                        </NcTooltip>
+                      </template>
+                    </a-input>
                  </a-form-item>
                </template>

                <template v-else-if="column.key === 'uidt'">
-                  <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
+                  <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.uidt`]">
                    <NcTooltip :disabled="importDataOnly">
                      <template #title>
                        {{ $t('tooltip.useFieldEditMenuToConfigFieldType') }}
@ -1014,4 +1052,9 @@ watch(modelRef, async () => {
    @apply flex;
  }
 }
+.nc-table-field-name {
+  :deep(.ant-form-item-explain) {
+    @apply hidden;
+  }
+}
 </style>
--- a/packages/nc-gui/helpers/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/CSVTemplateAdapter.ts
@ -45,7 +45,7 @@ export default class CSVTemplateAdapter {

  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 columnNamePrefixRef: Record<string, any> = { id: 0, Id: 0 }

    const tableObj: Record<string, any> = {
      table_name: tn,
@ -61,9 +61,11 @@ export default class CSVTemplateAdapter {
      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] = {}
--- a/packages/nc-gui/helpers/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/ExcelTemplateAdapter.ts
@ -65,7 +65,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
          this.progress(`Parsing sheet ${sheetName}`)

          await new Promise((resolve) => {
-            const columnNamePrefixRef: Record<string, any> = { id: 0 }
+            const columnNamePrefixRef: Record<string, any> = { id: 0, Id: 0 }
            let tn: string = (sheet || 'table').replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_').trim()

            while (tn in tableNamePrefixRef) {
--- a/packages/nc-gui/utils/validation.ts
+++ b/packages/nc-gui/utils/validation.ts
@ -123,6 +123,20 @@ export const fieldLengthValidator = () => {
    },
  }
 }
+export const reservedFieldNameValidator = () => {
+  return {
+    validator: (rule: any, value: any) => {
+      const { t } = getI18n().global
+
+      return new Promise((resolve, reject) => {
+        if (value?.toLowerCase() === 'id') {
+          reject(new Error(t('msg.error.duplicateSystemColumnName')))
+        }
+        resolve(true)
+      })
+    },
+  }
+}

 export const importUrlValidator = {
  validator: (rule: any, value: any) => {