github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): airtable import step 2 layout

pull/2795/head
Wing-Kam Wong 2 years ago
parent
0cc3907b82
commit
3d9d98f5ec
1 changed files with 124 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 212
      packages/nc-gui-v2/components/dlg/AirtableImport.vue

212
packages/nc-gui-v2/components/dlg/AirtableImport.vue
Unescape View File

@ -4,6 +4,9 @@ import { Form } from 'ant-design-vue'
import { useToast } from 'vue-toastification'
import { fieldRequiredValidator } from '~/utils/validation'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import MdiCloseCircleOutlineIcon from '~icons/mdi/close-circle-outline'
import MdiCurrencyUsdIcon from '~icons/mdi/currency-usd'
import MdiLoadingIcon from '~icons/mdi/loading'
interface Props {
modelValue: boolean
@ -12,11 +15,13 @@ interface Props {
const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const { $state } = useNuxtApp()
const toast = useToast()
const { sqlUi, project, loadTables } = useProject()
const loading = ref(false)
const step = ref(1)
const progress = ref([])
const socket = ref()
const syncSourceUrlOrId = ref('')
const syncSource = ref({
type: 'Airtable',
@ -135,108 +140,139 @@ const migrateSync = (src: any) => {
// TODO: watch syncSourceUrlOrId
onMounted(() => {
// socket.value = io(new URL(this.$axios.defaults.baseURL, window.location.href.split(/[?#]/)[0]).href, {
// extraHeaders: { 'xc-auth': this.$store.state.users.token },
// });
// socket.value.on('connect_error', () => {
// socket.value.disconnect();
// socket.value = null;
// });
//
// const socket = socket.value;
// socket.on('connect', function (data: any) {
// console.log(socket.id);
// console.log('socket connected', data);
// });
//
// socket.on('progress', (d: any) => {
// progress.value.push(d);
//
// nextTick(() => {
// if ($refs.log) {
// const el = $refs.log.$el;
// el.scrollTop = el.scrollHeight;
// }
// });
//
// if (d.status === 'COMPLETED') {
// $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'));
// }
// });
// loadSyncSrc()
// TODO: handle base url
const baseURL = 'http://localhost:8080' // this.$axios.defaults.baseURL
socket.value = io(new URL(baseURL, window.location.href.split(/[?#]/)[0]).href, {
extraHeaders: { 'xc-auth': $state.token.value as string },
})
socket.value.on('connect_error', () => {
socket.value.disconnect()
socket.value = null
})
socket.value.on('connect', function (data: any) {
console.log(socket.value.id)
console.log('socket connected', data)
})
socket.value.on('progress', (d: Record<string, any>) => {
progress.value.push(d)
// nextTick(() => {
// if ($refs.log) {
// const el = $refs.log.$el;
// el.scrollTop = el.scrollHeight;
// }
// });
if (d.status === 'COMPLETED') {
// $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'));
}
})
loadSyncSrc()
})
</script>
<template>
<a-modal v-model:visible="dialogShow" width="max(90vw, 600px)" @keydown.esc="dialogShow = false">
<a-typography-title class="ml-4 mb-4 select-none" type="secondary" :level="5">QUICK IMPORT - AIRTABLE</a-typography-title>
<template #footer>
<a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
<a-button v-t="['c:sync-airtable:save-and-sync']" key="submit" type="primary" @click="saveAndSync">Import</a-button>
<div v-if="step === 1">
<a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
<a-button v-t="['c:sync-airtable:save-and-sync']" key="submit" type="primary" @click="saveAndSync">Import</a-button>
</div>
</template>
<a-typography-title class="ml-4 mb-4 select-none" type="secondary" :level="5">QUICK IMPORT - AIRTABLE</a-typography-title>
<div class="ml-4 pr-10">
<a-divider />
<div class="mb-4">
<span class="prose-xl font-bold mr-3">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="prose-sm underline text-grey"
target="_blank"
>Where to find this?
</a>
</div>
<a-form ref="formValidator" layout="vertical" :model="form">
<a-form-item ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
<a-form-item v-bind="validateInfos.apiKey">
<a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" />
</a-form-item>
<a-form-item v-bind="validateInfos.syncSourceUrlOrId">
<a-input v-model:value="syncSource.details.syncSourceUrlOrId" placeholder="Shared Base ID / URL" size="large" />
<div v-if="step === 1">
<div class="mb-4">
<span class="prose-xl font-bold mr-3">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="prose-sm underline text-grey"
target="_blank"
>Where to find this?
</a>
</div>
<a-form ref="formValidator" layout="vertical" :model="form">
<a-form-item ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
<a-form-item v-bind="validateInfos.apiKey">
<a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" />
</a-form-item>
<a-form-item v-bind="validateInfos.syncSourceUrlOrId">
<a-input v-model:value="syncSource.details.syncSourceUrlOrId" placeholder="Shared Base ID / URL" size="large" />
</a-form-item>
</a-form-item>
</a-form-item>
<span class="prose-xl font-bold self-center my-4">More Options</span>
<span class="prose-xl font-bold self-center my-4">More Options</span>
<a-divider />
<div class="mt-0 my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncData">Import Data</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncViews">Import Secondary Views</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncRollup">Import Rollup Columns</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncLookup">Import Lookup Columns</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncAttachment">Import Attachment Columns</a-checkbox>
</div>
<a-tooltip placement="top">
<template #title>
<span>Coming Soon!</span>
</template>
<a-checkbox disabled v-model:checked="syncSource.details.options.syncFormula">Import Formula Columns</a-checkbox>
</a-tooltip>
</a-form>
<a-divider />
<div class="mt-0 my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncData">Import Data</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncViews">Import Secondary Views</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncRollup">Import Rollup Columns</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncLookup">Import Lookup Columns</a-checkbox>
</div>
<div class="my-2">
<a-checkbox v-model:checked="syncSource.details.options.syncAttachment">Import Attachment Columns</a-checkbox>
</div>
<a-tooltip placement="top">
<template #title>
<span>Coming Soon!</span>
</template>
<a-checkbox disabled v-model:checked="syncSource.details.options.syncFormula">Import Formula Columns</a-checkbox>
</a-tooltip>
</a-form>
<a-divider />
<div>
<a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions / Help - Reach out here</a>
<br />
<div>
This feature is currently in beta and more information can be found
<a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">here</a>.
<a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions / Help - Reach out here</a>
<br />
<div>
This feature is currently in beta and more information can be found
<a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">here</a>.
</div>
</div>
</div>
<div v-if="step === 2">
<div class="mb-4 prose-xl font-bold">Logs</div>
<a-card bodyStyle="background-color: #000000; height:400px; overflow: auto;">
<div v-for="({ msg, status }, i) in progress" :key="i">
<div v-if="status === 'FAILED'" class="flex items-center">
<MdiCloseCircleOutlineIcon class="text-red-500" />
<span class="text-red-500 ml-2">{{ msg }}</span>
</div>
<div v-else class="flex items-center">
<MdiCurrencyUsdIcon class="text-green-500" />
<span class="text-green-500 ml-2">{{ msg }}</span>
</div>
</div>
<div
class="flex items-center"
v-if="
!progress ||
!progress.length ||
(progress[progress.length - 1].status !== 'COMPLETED' && progress[progress.length - 1].status !== 'FAILED')
"
>
<MdiLoadingIcon class="text-green-500 animate-spin" />
<span class="text-green-500 ml-2"> Importing</span>
</div>
</a-card>
</div>
</div>
</a-modal>
</template>

Write Preview
Loading…
Cancel
Save