nocodb/packages/nc-gui/components/import/ImportFromAirtable.vue

<template>
  <v-dialog v-model="airtableModal" max-width="min(600px, 90%)" persistent>
    <v-card class="nc-import-card h-100">
      <v-toolbar class="elevation-0 align-center" height="68">
        <h3 class="mt-2">
          {{ $t('title.importFromAirtable') }}
        </h3>
        <div
          v-t="['c:airtable-import:turbo-mode']"
          class="ml-2 mt-3 title pointer nc-btn-enable-turbo"
          @click="enableTurbo"
        >
          🚀
        </div>
        <v-spacer />

        <v-icon color="warning" class="" @click="airtableModal = false">
          mdi-close
        </v-icon>
      </v-toolbar>

      <v-divider />
      <div class="h-100" style="width: 100%">
        <div>
          <v-card
            :class="{'pb-4 mt-4' : step === 2, 'py-6': step === 1}"
            class=" elevation-0"
            min-height="500"
          >
            <template v-if="step === 1">
              <div class="d-flex flex-column justify-center align-center pt-2 pb-6">
                <span
                  class="subtitle-1 font-weight-medium"
                  @dblclick="$set(syncSource.details.options,'syncViews',true)"
                >
                  Credentials
                </span>

                <a
                  href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials"
                  class="caption grey--text"
                  target="_blank"
                >Where to find this?</a>
              </div>

              <v-form v-model="valid">
                <div v-if="syncSource" class="px-10 mt-1 mx-auto" style="max-width: 400px">
                  <v-text-field
                    v-model="syncSource.details.apiKey"
                    outlined
                    dense
                    label="Api Key"
                    class="caption nc-input-api-key"
                    :type="isPasswordVisible ? 'text':'password'"
                    autocomplete="off"
                    :rules="[v=> !!v || 'Api Key is required']"
                  >
                    <template #append="">
                      <v-icon class="mt-1" small @click="isPasswordVisible = !isPasswordVisible">
                        {{ isPasswordVisible ? 'visibility_off' : 'visibility' }}
                      </v-icon>
                    </template>
                  </v-text-field>
                  <v-text-field
                    v-model="syncSourceUrlOrId"
                    outlined
                    dense
                    label="Shared Base ID / URL"
                    class="caption nc-input-shared-base"
                    :rules="[(v) => !!v || 'Shared Base ID / URL is required']"
                  />
                </div>
                <v-expansion-panels v-model="advanceOptionsPanel" class="mx-auto" style="width: 50%;" flat>
                  <v-expansion-panel>
                    <v-expansion-panel-header hide-actions>
                      <v-spacer />
                      <span class="grey--text caption">More Options <v-icon color="grey" small>
                        mdi-chevron-{{ advanceOptionsPanel === 0 ? 'up' : 'down' }}
                      </v-icon></span>
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                      <v-checkbox
                        v-model="syncSource.details.options.syncData"
                        class="caption mt-n4"
                        label="Import Data"
                        hide-details
                        dense
                      />
                      <v-checkbox
                        v-model="syncSource.details.options.syncViews"
                        class="caption"
                        label="Import Secondary Views"
                        hide-details
                        dense
                      />
                      <v-checkbox
                        v-model="syncSource.details.options.syncRollup"
                        class="caption"
                        label="Import Rollup Columns"
                        hide-details
                        dense
                      />
                      <v-checkbox
                        v-model="syncSource.details.options.syncLookup"
                        class="caption"
                        label="Import Lookup Columns"
                        hide-details
                        dense
                      />
                      <v-checkbox
                        v-model="syncSource.details.options.syncAttachment"
                        class="caption"
                        label="Import Attachment Columns"
                        hide-details
                        dense
                      />
                      <v-tooltip bottom>
                        <template #activator="{ on }">
                          <div v-on="on">
                            <v-checkbox
                              v-model="syncSource.details.options.syncFormula"
                              class="caption"
                              label="Import Formula Columns"
                              hide-details
                              dense
                              disabled
                            />
                          </div>
                        </template>
                        <span>Coming Soon!</span>
                      </v-tooltip>
                    </v-expansion-panel-content>
                  </v-expansion-panel>
                </v-expansion-panels>
              </v-form>
              <v-card-actions class="justify-center pb-6 pt-6">
                <v-btn
                  v-t="['c:sync-airtable:save-and-sync']"
                  class="nc-btn-airtable-import"
                  :disabled="!valid"
                  large
                  color="primary"
                  @click="saveAndSync"
                >
                  Import
                </v-btn>
              </v-card-actions>
            </template>
            <template
              v-else-if="step === 2"
            >
              <v-card-title class=" justify-center">
                <span class="subtitle-1 font-weight-medium">Logs</span>
              </v-card-title>

              <v-card
                ref="log"
                dark
                class="mt-2 mx-4 pa-4 elevation-0 green--text"
                height="500"
                style="overflow-y: auto"
              >
                <div v-for="({msg , status}, i) in progress" :key="i">
                  <v-icon v-if="status==='FAILED'" color="red" size="15">
                    mdi-close-circle-outline
                  </v-icon>
                  <v-icon v-else color="green" size="15">
                    mdi-currency-usd
                  </v-icon>
                  <span class="caption nc-text">{{ msg }}</span>
                </div>
                <div
                  v-if="!progress || !progress.length || progress[progress.length-1].status !== 'COMPLETED' && progress[progress.length-1].status !== 'FAILED'"
                  class=""
                >
                  <v-icon color="green" size="15">
                    mdi-loading mdi-spin
                  </v-icon>
                  <span class="caption nc-text">Importing
                  </span>
                  <!--                  <div class="nc-progress" />-->
                </div>
              </v-card>

              <div
                v-if="progress && progress.length && progress[progress.length-1].status === 'COMPLETED'"
                class="pa-4 pt-8 text-center"
              >
                <v-btn large color="primary" class="nc-btn-go-dashboard" @click="airtableModal=false">
                  Go to dashboard
                </v-btn>
              </div>
            </template>
            <div class="text-center pa-4 pb-0">
              <a class="caption grey--text" href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions
                / Help - reach out here</a>
              <br>
              <span class="caption grey--text"> This feature is currently in beta and more information can be found <a
                href="https://github.com/nocodb/nocodb/discussions/2122"
                class="caption grey--text"
                target="_blank"
              >here</a>.</span>
            </div>
          </v-card>
        </div>
      </div>
    </v-card>
  </v-dialog>
</template>

<script>
import io from 'socket.io-client'

export default {
  name: 'ImportFromAirtable',
  props: {
    value: Boolean
  },
  data: () => ({
    advanceOptionsPanel: false,
    isPasswordVisible: false,
    valid: false,
    socket: null,
    step: 1,
    progress: [],
    syncSource: {
      type: 'Airtable',
      details: {
        syncInterval: '15mins',
        syncDirection: 'Airtable to NocoDB',
        syncRetryCount: 1,
        apiKey: '',
        shareId: '',
        options: {
          syncViews: true,
          syncData: true,
          syncRollup: false,
          syncLookup: true,
          syncFormula: false,
          syncAttachment: true
        }
      }
    },
    syncSourceUrlOrId: ''
  }),
  computed: {
    airtableModal: {
      set(v) {
        this.$emit('input', v)
      },
      get() {
        return this.value
      }
    }
  },
  watch: {
    syncSourceUrlOrId(v) {
      if (this.syncSource && this.syncSource.details) {
        const m = v && v.match(/(exp|shr).{14}/g)
        this.syncSource.details.shareId = m ? m[0] : null
      }
    }
  },
  created() {
    this.socket = io(new URL(this.$axios.defaults.baseURL, window.location.href.split(/[?#]/)[0]).href, {
      extraHeaders: { 'xc-auth': this.$store.state.users.token }
    })
    this.socket.on('connect_error', () => {
      this.socket.disconnect()
      this.socket = null
    })

    const socket = this.socket
    socket.on('connect', function(data) {
      console.log(socket.id)
      console.log('socket connected', data)
    })

    socket.on('progress', (d) => {
      this.progress.push(d)

      this.$nextTick(() => {
        if (this.$refs.log) {
          const el = this.$refs.log.$el
          el.scrollTop = el.scrollHeight
        }
      })

      if (d.status === 'COMPLETED') {
        this.$store.dispatch('project/_loadTables', {
          dbKey: '0.projectJson.envs._noco.db.0',
          key: '0.projectJson.envs._noco.db.0.tables',
          _nodes: {
            dbAlias: 'db',
            env: '_noco',
            type: 'tableDir'
          }
        }).then(() => this.$store.dispatch('tabs/loadFirstTableTab'))
      }
    })
    this.loadSyncSrc()
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.disconnect()
    }
  },
  methods: {
    async saveAndSync() {
      await this.createOrUpdate()
      this.sync()
    },
    sync() {
      this.step = 2
      this.$axios.post(`/api/v1/db/meta/syncs/${this.syncSource.id}/trigger`, this.payload, {
        params: {
          id: this.socket.id
        }
      })
    },
    async loadSyncSrc() {
      const { data: { list: srcs } } = await this.$axios.get(`/api/v1/db/meta/projects/${this.projectId}/syncs`)
      if (srcs && srcs[0]) {
        srcs[0].details = srcs[0].details || {}
        this.syncSource = this.migrateSync(srcs[0])
        this.syncSourceUrlOrId = srcs[0].details.shareId
      } else {
        this.syncSource = {
          type: 'Airtable',
          details: {
            syncInterval: '15mins',
            syncDirection: 'Airtable to NocoDB',
            syncRetryCount: 1,
            apiKey: '',
            shareId: '',
            options: {
              syncViews: true,
              syncData: true,
              syncRollup: false,
              syncLookup: true,
              syncFormula: false,
              syncAttachment: true
            }
          }
        }
      }
    },
    async createOrUpdate() {
      try {
        const { id, ...payload } = this.syncSource
        if (id) {
          await this.$axios.patch(`/api/v1/db/meta/syncs/${id}`, payload)
        } else {
          this.syncSource = (await this.$axios.post(`/api/v1/db/meta/projects/${this.projectId}/syncs`, payload)).data
        }
      } catch (e) {
        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
      }
    },
    enableTurbo() {
      this.$set(this.syncSource.details.options, 'syncViews', true)
      this.$toast.success('🚀🚀 Ludicrous mode activated! Let\'s go! 🚀🚀').goAway(3000)
    },
    migrateSync(src) {
      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
    }
  }
}
</script>

<style scoped>

.nc-progress {
  margin-left: 12px;
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite linear alternate;
  animation-delay: .5s;
}

.nc-progress::before, .nc-progress::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.nc-progress::before {
  left: -7.5px;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 0s;
}

.nc-progress::after {
  left: 7.5px;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: var(--v-primary-base);
  color: var(--v-primary-base);
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dotFlashing {
  0% {
    background-color: var(--v-primary-base);
  }
  50%,
  100% {
    background-color: var(--v-backgroundColor-base);
  }
}

</style>