nocodb/packages/nc-gui/components/dlg/AirtableImport.vue

<script setup lang="ts">
import type { Card as AntCard } from 'ant-design-vue'
import { JobStatus } from '#imports'

const { modelValue, baseId, sourceId } = defineProps<{
  modelValue: boolean
  baseId: string
  sourceId: string
}>()

const emit = defineEmits(['update:modelValue'])

const { $api } = useNuxtApp()

const baseURL = $api.instance.defaults.baseURL

const { $state, $poller } = useNuxtApp()

const baseStore = useBase()

const { refreshCommandPalette } = useCommandPalette()

const { loadTables } = baseStore

const { getJobsForBase, loadJobsForBase } = useJobs()

const showGoToDashboardButton = ref(false)

const step = ref(1)

const progress = ref<Record<string, any>[]>([])

const logRef = ref<typeof AntCard>()

const enableAbort = ref(false)

const goBack = ref(false)

const listeningForUpdates = ref(false)

const syncSource = ref({
  id: '',
  type: 'Airtable',
  details: {
    syncInterval: '15mins',
    syncDirection: 'Airtable to NocoDB',
    syncRetryCount: 1,
    apiKey: '',
    appId: '',
    shareId: '',
    syncSourceUrlOrId: '',
    options: {
      syncViews: true,
      syncData: true,
      syncRollup: false,
      syncLookup: true,
      syncFormula: false,
      syncAttachment: true,
      syncUsers: false,
    },
  },
})

const pushProgress = async (message: string, status: JobStatus | 'progress') => {
  progress.value.push({ msg: message, status })

  await nextTick(() => {
    const container: HTMLDivElement = logRef.value?.$el?.firstElementChild
    if (!container) return
    container.scrollTop = container.scrollHeight
  })
}

const onStatus = async (status: JobStatus, data?: any) => {
  if (status === JobStatus.COMPLETED) {
    showGoToDashboardButton.value = true
    await loadTables()
    pushProgress('Done!', status)
    refreshCommandPalette()
    // TODO: add tab of the first table
  } else if (status === JobStatus.FAILED) {
    await loadTables()
    goBack.value = true
    pushProgress(data.error.message, status)
    refreshCommandPalette()
  }
}

const onLog = (data: { message: string }) => {
  pushProgress(data.message, 'progress')
}

const validators = computed(() => ({
  'details.apiKey': [fieldRequiredValidator()],
  'details.syncSourceUrlOrId': [fieldRequiredValidator()],
}))

const dialogShow = computed({
  get: () => modelValue,
  set: (v) => emit('update:modelValue', v),
})

const useForm = Form.useForm

const { validateInfos } = useForm(syncSource, validators)

const disableImportButton = computed(() => !syncSource.value.details.apiKey || !syncSource.value.details.syncSourceUrlOrId)

const isLoading = ref(false)

async function saveAndSync() {
  isLoading.value = true
  await createOrUpdate()
  await sync()
}

async function createOrUpdate() {
  try {
    const { id, ...payload } = syncSource.value

    if (id !== '') {
      await $fetch(`/api/v1/db/meta/syncs/${id}`, {
        baseURL,
        method: 'PATCH',
        headers: { 'xc-auth': $state.token.value as string },
        body: payload,
      })
    } else {
      syncSource.value = await $fetch(`/api/v1/db/meta/projects/${baseId}/syncs/${sourceId}`, {
        baseURL,
        method: 'POST',
        headers: { 'xc-auth': $state.token.value as string },
        body: payload,
      })
    }
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

async function listenForUpdates(id?: string) {
  if (listeningForUpdates.value) return

  listeningForUpdates.value = true

  await loadJobsForBase(baseId)

  const jobs = await getJobsForBase(baseId)

  const job = id
    ? { id }
    : jobs
        // sort by created_at desc (latest first)
        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
        .find((j) => j.base_id === baseId && j.status !== JobStatus.COMPLETED && j.status !== JobStatus.FAILED)

  if (!job) {
    listeningForUpdates.value = false
    return
  }

  $poller.subscribe(
    { id: job.id },
    (data: {
      id: string
      status?: string
      data?: {
        error?: {
          message: string
        }
        message?: string
        result?: any
      }
    }) => {
      if (data.status !== 'close') {
        step.value = 2
        if (data.status) {
          onStatus(data.status as JobStatus, data.data)
        } else {
          onLog(data.data as any)
        }
      } else {
        listeningForUpdates.value = false
        isLoading.value = false
      }
    },
  )
}

async function loadSyncSrc() {
  const data: any = await $fetch(`/api/v1/db/meta/projects/${baseId}/syncs/${sourceId}`, {
    baseURL,
    method: 'GET',
    headers: { 'xc-auth': $state.token.value as string },
  })

  const { list: srcs } = data

  if (srcs && srcs[0]) {
    srcs[0].details = srcs[0].details || {}
    syncSource.value = migrateSync(srcs[0])
    syncSource.value.details.syncSourceUrlOrId =
      srcs[0].details.appId && srcs[0].details.appId.length > 0 ? srcs[0].details.syncSourceUrlOrId : srcs[0].details.shareId
    listenForUpdates()
  } else {
    syncSource.value = {
      id: '',
      type: 'Airtable',
      details: {
        syncInterval: '15mins',
        syncDirection: 'Airtable to NocoDB',
        syncRetryCount: 1,
        apiKey: '',
        appId: '',
        shareId: '',
        syncSourceUrlOrId: '',
        options: {
          syncViews: true,
          syncData: true,
          syncRollup: false,
          syncLookup: true,
          syncFormula: false,
          syncAttachment: true,
          syncUsers: false,
        },
      },
    }
  }
}

async function sync() {
  try {
    const jobData: any = await $fetch(`/api/v1/db/meta/syncs/${syncSource.value.id}/trigger`, {
      baseURL,
      method: 'POST',
      headers: { 'xc-auth': $state.token.value as string },
    })
    listeningForUpdates.value = false
    listenForUpdates(jobData.id)
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

async function abort() {
  Modal.confirm({
    title: 'Are you sure you want to abort this job?',
    type: 'warn',
    content:
      "This is a highly experimental feature and only marks job as not started, please don't abort the job unless you are sure job is stuck.",
    onOk: async () => {
      try {
        await $fetch(`/api/v1/db/meta/syncs/${syncSource.value.id}/abort`, {
          baseURL,
          method: 'POST',
          headers: { 'xc-auth': $state.token.value as string },
        })
        step.value = 1
        progress.value = []
        goBack.value = false
        enableAbort.value = false
      } catch (e: any) {
        message.error(await extractSdkResponseErrorMsg(e))
      }
    },
  })
}

function cancel() {
  step.value = 1
  progress.value = []
  goBack.value = false
  enableAbort.value = false
}

function migrateSync(src: any) {
  if (!src.details?.options) {
    src.details.options = {
      syncViews: false,
      syncData: true,
      syncRollup: false,
      syncLookup: true,
      syncFormula: false,
      syncAttachment: true,
    }
    src.details.options.syncViews = src.syncViews
    delete src.syncViews
  }

  return src
}

watch(
  () => syncSource.value.details.syncSourceUrlOrId,
  (v) => {
    if (syncSource.value.details) {
      const m = v && v.match(/(exp|shr).{14}/g)
      syncSource.value.details.shareId = m ? m[0] : ''
      const m2 = v && v.match(/(app).{14}/g)
      syncSource.value.details.appId = m2 ? m2[0] : ''
    }
  },
)

onMounted(async () => {
  if (syncSource.value.id) {
    listenForUpdates()
  }
  await loadSyncSrc()
})

function downloadLogs(filename: string) {
  let text = ''
  for (const o of document.querySelectorAll('.nc-modal-airtable-import .log-message')) {
    text += `${o.textContent}\n`
  }
  const element = document.createElement('a')
  element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`)
  element.setAttribute('download', filename)

  element.style.display = 'none'
  document.body.appendChild(element)

  element.click()

  document.body.removeChild(element)
}
</script>

<template>
  <a-modal
    v-model:visible="dialogShow"
    :class="{ active: dialogShow }"
    :closable="step !== 2"
    :keyboard="step !== 2"
    :mask-closable="step !== 2"
    width="max(30vw, 600px)"
    class="p-2"
    wrap-class-name="nc-modal-airtable-import"
    @keydown.esc="dialogShow = false"
  >
    <div class="px-5">
      <!--      Quick Import -->
      <div class="mt-5 prose-xl font-weight-bold" @dblclick="enableAbort = true">{{ $t('title.quickImportAirtable') }}</div>

      <div v-if="step === 1">
        <div class="mb-4">
          <!--          Credentials -->
          <span class="mr-3 pt-2 text-gray-500 text-xs">{{ $t('general.credentials') }}</span>
          <!--          Where to find this? -->
          <a
            href="https://docs.nocodb.com/bases/import-base-from-airtable#get-airtable-credentials"
            class="prose-sm underline text-grey text-xs"
            target="_blank"
            rel="noopener"
          >
            {{ $t('msg.info.airtable.credentials') }}
          </a>
        </div>

        <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="m-0">
          <a-form-item v-bind="validateInfos['details.apiKey']">
            <a-input-password
              v-model:value="syncSource.details.apiKey"
              class="nc-input-api-key"
              :placeholder="`${$t('labels.apiKey')} / ${$t('labels.personalAccessToken')}`"
              size="large"
            />
          </a-form-item>

          <a-form-item v-bind="validateInfos['details.syncSourceUrlOrId']">
            <a-input
              v-model:value="syncSource.details.syncSourceUrlOrId"
              class="nc-input-shared-base"
              :placeholder="`${$t('labels.sharedBaseUrl')}`"
              size="large"
            />
          </a-form-item>

          <!--          Advanced Settings -->
          <div class="prose-lg self-center my-4 text-gray-500">{{ $t('title.advancedSettings') }}</div>

          <a-divider class="mt-2 mb-5" />

          <!--          Import Data -->
          <div class="mt-0 my-2">
            <a-checkbox v-model:checked="syncSource.details.options.syncData">{{ $t('labels.importData') }}</a-checkbox>
          </div>

          <!--          Import Secondary Views -->
          <div class="my-2">
            <a-checkbox v-model:checked="syncSource.details.options.syncViews">
              {{ $t('labels.importSecondaryViews') }}
            </a-checkbox>
          </div>

          <!--          Import Rollup Columns -->
          <div class="my-2">
            <a-checkbox v-model:checked="syncSource.details.options.syncRollup">
              {{ $t('labels.importRollupColumns') }}
            </a-checkbox>
          </div>

          <!--          Import Lookup Columns -->
          <div class="my-2">
            <a-checkbox v-model:checked="syncSource.details.options.syncLookup">
              {{ $t('labels.importLookupColumns') }}
            </a-checkbox>
          </div>

          <!--          Import Attachment Columns -->
          <div class="my-2">
            <a-checkbox v-model:checked="syncSource.details.options.syncAttachment">
              {{ $t('labels.importAttachmentColumns') }}
            </a-checkbox>
          </div>

          <!--          Import Formula Columns -->
          <div class="my-2">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ $t('title.comingSoon') }}</span>
              </template>
              <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled>
                {{ $t('labels.importFormulaColumns') }}
              </a-checkbox>
            </a-tooltip>
          </div>

          <!--          Invite Users 
          <div class="my-2">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ $t('title.comingSoon') }}</span>
              </template>
              <a-checkbox v-model:checked="syncSource.details.options.syncUsers" disabled>
                {{ $t('labels.importUsers') }}
              </a-checkbox>
            </a-tooltip>
          </div>
          -->
        </a-form>

        <a-divider />

        <!--        Questions / Help - Reach out here -->
        <div>
          <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" rel="noopener noreferrer">
            {{ $t('general.questions') }} / {{ $t('general.help') }} - {{ $t('general.reachOut') }}</a
          >

          <br />
          <!--          This feature is currently in beta and more information can be found here -->
          <div>
            {{ $t('general.betaNote') }}
            <a
              class="prose-sm"
              href="https://github.com/nocodb/nocodb/discussions/2122"
              target="_blank"
              rel="noopener noreferrer"
            >
              {{ $t('general.moreInfo') }}
            </a>
            .
          </div>
        </div>
      </div>

      <div v-if="step === 2">
        <!--        Logs -->
        <div class="mb-4 prose-xl font-bold">{{ $t('general.logs') }}</div>

        <a-card ref="logRef" :body-style="{ backgroundColor: '#000000', height: '400px', overflow: 'auto' }">
          <a-button
            v-if="showGoToDashboardButton || goBack"
            class="!absolute mr-1 mb-1 z-1 right-0 bottom-0 opacity-40 hover:opacity-100"
            size="small"
            @click="downloadLogs('at-import-logs.txt')"
          >
            <component :is="iconMap.download" class="text-green-500" />
          </a-button>
          <div v-for="({ msg, status }, i) in progress" :key="i">
            <div v-if="status === JobStatus.FAILED" class="flex items-center">
              <component :is="iconMap.closeCircle" class="text-red-500" />

              <span class="text-red-500 ml-2 log-message">{{ msg }}</span>
            </div>

            <div v-else class="flex items-center">
              <MdiCurrencyUsd class="text-green-500" />

              <span class="text-green-500 ml-2 log-message">{{ msg }}</span>
            </div>
          </div>

          <div
            v-if="
              !progress ||
              !progress.length ||
              (progress[progress.length - 1].status !== JobStatus.COMPLETED &&
                progress[progress.length - 1].status !== JobStatus.FAILED)
            "
            class="flex items-center"
          >
            <!--            Importing -->
            <component :is="iconMap.loading" class="text-green-500 animate-spin" />
            <span class="text-green-500 ml-2"> {{ $t('labels.importing') }}</span>
          </div>
        </a-card>

        <!--        Go to Dashboard -->
        <div class="flex justify-center items-center">
          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">
            {{ $t('labels.goToDashboard') }}
          </a-button>
          <a-button v-else-if="goBack" class="mt-4 uppercase" size="large" danger @click="cancel()">{{
            $t('general.cancel')
          }}</a-button>
          <a-button v-else-if="enableAbort" class="mt-4 uppercase" size="large" danger @click="abort()">{{
            $t('general.abort')
          }}</a-button>
        </div>
      </div>
    </div>

    <template #footer>
      <div v-if="step === 1">
        <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
        <!--        Import -->
        <a-button
          key="submit"
          v-e="['c:sync-airtable:save-and-sync']"
          type="primary"
          class="nc-btn-airtable-import"
          :loading="isLoading"
          :disabled="disableImportButton"
          @click="saveAndSync"
        >
          {{ $t('activity.import') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>