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

<script setup lang="ts">
import { useToast } from 'vue-toastification'
import type { ColumnType } from 'nocodb-sdk'
import { isVirtualCol, UITypes } from 'nocodb-sdk'
import type { SizeType } from 'ant-design-vue/es/config-provider'
import type { FormInstance } from 'ant-design-vue'
import { Form } from 'ant-design-vue'
import { computed, onMounted } from '#imports'
import MdiTableIcon from '~icons/mdi/table'
import MdiStringIcon from '~icons/mdi/alpha-a'
import MdiLongTextIcon from '~icons/mdi/text'
import MdiNumericIcon from '~icons/mdi/numeric'
import MdiPlusIcon from '~icons/mdi/plus'
import MdiKeyStarIcon from '~icons/mdi/key-star'
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'

interface Props {
  quickImportType: 'csv' | 'excel' | 'json'
  projectTemplate: object
  importData: any[]
}

interface Option {
  value: string
}
const useForm = Form.useForm
const { quickImportType, projectTemplate, importData } = defineProps<Props>()
const { $api } = useNuxtApp()
const expansionPanel = ref(<number[]>[])
const editableTn = ref(<boolean[]>{})
const inputRefs = ref(<HTMLInputElement[]>[])
const { addTab } = useTabs()
const { sqlUi, project, loadTables } = useProject()
const loading = ref(false)
const buttonSize = ref<SizeType>('middle')
const toast = useToast()
const templateForm = reactive<{ tables: object[] }>({
  tables: [],
})

const uiTypeOptions = ref<Option[]>(
  (Object.keys(UITypes) as Array<keyof typeof UITypes>)
    .filter(
      (x: any) =>
        !isVirtualCol(x) &&
        ![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
          x,
        ),
    )
    .map((x: string) => ({
      value: x,
    })),
)

const filterOption = (input: string, option: Option) => {
  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
}

const tableColumns = [
  {
    name: 'Column Name',
    dataIndex: 'column_name',
    key: 'column_name',
    width: 250,
  },
  {
    name: 'Column Type',
    dataIndex: 'column_type',
    key: 'uidt',
    width: 250,
  },
  {
    name: 'Select Option',
    key: 'dtxp',
  },
  {
    name: 'Action',
    key: 'action',
  },
]

const data = reactive(<any>{
  name: 'Project Name',
  tables: [],
})

const validators = computed(() => {
  // TODO: centralise
  const tnValidator = [{ required: true, message: 'Please fill in table name', trigger: 'change' }]
  const cnValidator = [{ required: true, message: 'Please fill in column name', trigger: 'change' }]
  const uidtValidator = [{ required: true, message: 'Please fill in column type', trigger: 'change' }]
  // TODO: check existing validation logic
  const dtxpValidator = [{}]
  let res: any = {}
  for (let i = 0; i < data.tables.length; i++) {
    res[`tables.${i}.table_name`] = tnValidator
    for (let j = 0; j < data.tables[i].columns.length; j++) {
      res[`tables.${i}.columns.${j}.column_name`] = cnValidator
      res[`tables.${i}.columns.${j}.uidt`] = uidtValidator
      if (isSelect(data.tables[i].columns)) {
        res[`tables.${i}.columns.${j}.dtxp`] = dtxpValidator
      }
    }
  }
  return res
})

const { resetFields, validate, validateInfos } = useForm(data, validators)

const editorTitle = computed(() => {
  return `${quickImportType.toUpperCase()} Import`
})

onMounted(() => {
  parseAndLoadTemplate()
})

const parseAndLoadTemplate = () => {
  if (projectTemplate) {
    parseTemplate(projectTemplate)
    expansionPanel.value = Array.from({ length: data.tables.length || 0 }, (_, i) => i)
  }
}

const parseTemplate = ({ tables = [], ...rest }: Record<string, any>) => {
  const parsedTemplate = {
    ...rest,
    tables: tables.map(({ v = [], columns = [], ...rest }: Record<string, any>) => ({
      ...rest,
      columns: [
        ...columns.map((c: any, idx: number) => {
          c.key = idx
          return c
        }),
        ...v.map((v: any) => {
          const res: any = {
            column_name: v.title,
            ref_table_name: {
              ...v,
            },
          }
          return res
        }),
      ],
    })),
  }
  Object.assign(data, parsedTemplate)
}

const deleteTable = (tableIdx: number) => {
  const deleteTable = data.tables[tableIdx]
  for (const table of data.tables) {
    if (table === deleteTable) {
      continue
    }
    table.columns = table.columns.filter((c: Record<string, any>) => c.ref_table_name !== deleteTable.table_name)
  }
  data.tables.splice(tableIdx, 1)
}

const isSelect = (col: ColumnType) => {
  return col.uidt === 'MultiSelect' || col.uidt === 'SingleSelect'
}

const deleteTableColumn = (i: number, j: number, col: Record<string, any>, table: Record<string, any>) => {
  const deleteTable = data.tables[i]
  const deleteColumn = deleteTable.columns[j]
  for (const table of data.tables) {
    if (table === deleteTable) {
      continue
    }
    table.columns = table.columns.filter(
      (c: Record<string, any>) => c.ref_table_name !== deleteTable.table_name || c.ref_column_name !== deleteColumn.column_name,
    )
  }
  deleteTable.columns.splice(j, 1)
}

const addNewColumnRow = (table: Record<string, any>, uidt?: string) => {
  table.columns.push({
    key: table.columns.length,
    column_name: `title${table.columns.length + 1}`,
    uidt,
  })
  nextTick(() => {
    const input = inputRefs.value[table.columns.length - 1]
    input.focus()
    input.select()
  })
}

const setEditableTn = (idx: number, val: boolean) => {
  editableTn.value[idx] = val
}

const remapColNames = (batchData: any[], columns: ColumnType[]) => {
  return batchData.map((data) =>
    (columns || []).reduce(
      (aggObj, col: Record<string, any>) => ({
        ...aggObj,
        [col.column_name]: data[col.ref_column_name || col.column_name],
      }),
      {},
    ),
  )
}

const importTemplate = async () => {
  // check if form is valid
  try {
    const values = await validate()
    console.log('Success:', values)
  } catch (errorInfo) {
    // TODO: handle error message
    console.log('Failed:', errorInfo)
    return
  }

  let firstTable = null
  try {
    loading.value = true
    for (const t of data.tables) {
      // enrich system fields if not provided
      // e.g. id, created_at, updated_at
      const systemColumns = sqlUi?.value.getNewTableColumns().filter((c: ColumnType) => c.column_name !== 'title')
      for (const systemColumn of systemColumns) {
        if (!t.columns.some((c: Record<string, any>) => c.column_name.toLowerCase() === systemColumn.column_name.toLowerCase())) {
          t.columns.push(systemColumn)
        }
      }

      // set pk & rqd if ID is provided
      for (const column of t.columns) {
        if (column.column_name.toLowerCase() === 'id' && !('pk' in column)) {
          column.pk = true
          column.rqd = true
          break
        }
      }

      // create table
      const table: TableType = await $api.dbTable.create(project?.value?.id as string, {
        table_name: t.table_name,
        title: '',
        columns: t.columns,
      })
      // TODO: should catch error msg throw from sdk
      if (!table) {
        throw {
          message: 'Failed to create table',
        }
      }
      t.table_title = table.title

      // open the first table after import
      if (firstTable === null) {
        firstTable = table
      }

      // set primary value
      await $api.dbTableColumn.primaryColumnSet(table.columns[0].id as string)
    }
  } catch (e: any) {
    // TODO: retrieve error msg from sdk
    console.log(e)
    toast.error(e.message)
    return
  }

  if (importData) {
    try {
      let total = 0
      let progress = 0
      const projectName = project.value.title as string
      await Promise.all(
        data.tables.map((v: Record<string, any>) =>
          (async (tableMeta) => {
            const tableName = tableMeta.table_title
            const data = importData[tableMeta.ref_table_name]
            total += data.length
            for (let i = 0; i < data.length; i += 500) {
              const batchData = remapColNames(data.slice(i, i + 500), tableMeta.columns)
              await $api.dbTableRow.bulkCreate('noco', projectName, tableName, batchData)
              progress += batchData.length
            }
          })(v),
        ),
      )
    } catch (e: any) {
      // TODO: retrieve error msg from sdk
      toast.error(e.message)
      return
    }
  }

  // reload table list
  await loadTables()
  addTab({
    id: firstTable?.id as string,
    title: firstTable?.title as string,
    type: 'table',
  })
  loading.value = false
}
</script>

<template>
  <a-card :title="editorTitle">
    <template #extra>
      <a-button type="primary" :loading="loading" @click="importTemplate">
        {{ $t('activity.import') }}
      </a-button>
    </template>
    <a-form :model="data" name="template-editor-form">
      <p v-if="data.tables && quickImportType === 'excel'" class="caption grey--text mt-4">
        {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
        available for import
      </p>
      <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel">
        <a-collapse-panel v-for="(table, i) in data.tables" :key="i">
          <template #header>
            <a-form-item v-if="editableTn[i]" v-bind="validateInfos[`tables.${i}.table_name`]" noStyle>
              <a-input
                v-model:value="table.table_name"
                style="max-width: 300px"
                hide-details
                @click="(e) => e.stopPropagation()"
                @blur="setEditableTn(i, false)"
                @keydown.enter="setEditableTn(i, false)"
              />
            </a-form-item>

            <span v-else class="font-weight-bold" @click="(e) => (e.stopPropagation(), setEditableTn(i, true))">
              <MdiTableIcon />
              {{ table.table_name }}
            </span>
          </template>
          <template #extra>
            <a-tooltip bottom>
              <template #title>
                <!-- TODO: i18n -->
                <span>Delete Table</span>
              </template>
              <MdiDeleteOutlineIcon v-if="data.tables.length > 1" @click.stop="deleteTable(i)" />
            </a-tooltip>
          </template>
          <a-table v-if="table.columns.length" :dataSource="table.columns" :columns="tableColumns" :pagination="false">
            <template #headerCell="{ column }">
              <template v-if="column.key === 'column_name'">
                <span>
                  {{ $t('labels.columnName') }}
                </span>
              </template>
              <template v-else-if="column.key === 'column_type'">
                <span>
                  {{ $t('labels.columnType') }}
                </span>
              </template>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'column_name'">
                <a-form-item v-bind="validateInfos[`tables.${i}.columns.${record.key}.${column.key}`]">
                  <a-input
                    v-model:value="record.column_name"
                    :ref="
                      (el) => {
                        inputRefs[record.key] = el
                      }
                    "
                  />
                </a-form-item>
              </template>
              <template v-else-if="column.key === 'uidt'">
                <a-form-item v-bind="validateInfos[`tables.${i}.columns.${record.key}.${column.key}`]">
                  <a-auto-complete
                    v-model:value="record.uidt"
                    :options="uiTypeOptions"
                    :filter-option="filterOption"
                    style="width: 200px"
                  />
                </a-form-item>
              </template>

              <template v-else-if="column.key === 'dtxp'">
                <a-form-item v-if="isSelect(record)" v-bind="validateInfos[`tables.${i}.columns.${record.key}.${column.key}`]">
                  <a-input v-model:value="record.dtxp" />
                </a-form-item>
              </template>

              <template v-if="column.key === 'action'">
                <a-tooltip v-if="record.key == 0" bottom>
                  <template #title>
                    <!-- TODO: i18n -->
                    <span>Primary Value</span>
                  </template>
                  <MdiKeyStarIcon />
                </a-tooltip>
                <a-tooltip v-else bottom>
                  <template #title>
                    <!-- TODO: i18n -->
                    <span>Delete Column</span>
                  </template>
                  <a-button type="link" @click="deleteTableColumn(i, record.key, record, table)" :size="buttonSize">
                    <template #icon>
                      <MdiDeleteOutlineIcon />
                    </template>
                  </a-button>
                </a-tooltip>
              </template>
            </template>
          </a-table>

          <div class="text-center">
            <a-tooltip bottom>
              <template #title>
                <!-- TODO: i18n -->
                <span>Add Number Column</span>
              </template>
              <a-button @click="addNewColumnRow(table, 'Number')" :size="buttonSize">
                <template #icon>
                  <MdiNumericIcon />
                </template>
              </a-button>
            </a-tooltip>

            <a-tooltip bottom>
              <template #title>
                <!-- TODO: i18n -->
                <span>Add SingleLineText Column</span>
              </template>
              <a-button @click="addNewColumnRow(table, 'SingleLineText')" :size="buttonSize">
                <template #icon>
                  <MdiStringIcon />
                </template>
              </a-button>
            </a-tooltip>

            <a-tooltip bottom>
              <template #title>
                <!-- TODO: i18n -->
                <span>Add LongText Column</span>
              </template>
              <a-button @click="addNewColumnRow(table, 'LongText')" :size="buttonSize">
                <template #icon>
                  <MdiLongTextIcon />
                </template>
              </a-button>
            </a-tooltip>

            <a-tooltip bottom>
              <template #title>
                <!-- TODO: i18n -->
                <span>Add Other Column</span>
              </template>
              <a-button @click="addNewColumnRow(table)" :size="buttonSize">
                <template #icon>
                  <MdiPlusIcon />
                </template>
                Column
              </a-button>
            </a-tooltip>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-form>
  </a-card>
</template>