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
Unified 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 { useToast } from 'vue-toastification'
import { fieldRequiredValidator } from '~/utils/validation' import { fieldRequiredValidator } from '~/utils/validation'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' 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 { interface Props {
modelValue: boolean modelValue: boolean
@ -12,11 +15,13 @@ interface Props {
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const { $state } = useNuxtApp()
const toast = useToast() const toast = useToast()
const { sqlUi, project, loadTables } = useProject() const { sqlUi, project, loadTables } = useProject()
const loading = ref(false) const loading = ref(false)
const step = ref(1) const step = ref(1)
const progress = ref([]) const progress = ref([])
const socket = ref()
const syncSourceUrlOrId = ref('') const syncSourceUrlOrId = ref('')
const syncSource = ref({ const syncSource = ref({
type: 'Airtable', type: 'Airtable',
@ -135,108 +140,139 @@ const migrateSync = (src: any) => {
// TODO: watch syncSourceUrlOrId // TODO: watch syncSourceUrlOrId
onMounted(() => { onMounted(() => {
// socket.value = io(new URL(this.$axios.defaults.baseURL, window.location.href.split(/[?#]/)[0]).href, { // TODO: handle base url
// extraHeaders: { 'xc-auth': this.$store.state.users.token }, const baseURL = 'http://localhost:8080' // this.$axios.defaults.baseURL
// }); socket.value = io(new URL(baseURL, window.location.href.split(/[?#]/)[0]).href, {
// socket.value.on('connect_error', () => { extraHeaders: { 'xc-auth': $state.token.value as string },
// socket.value.disconnect(); })
// socket.value = null; 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); socket.value.on('connect', function (data: any) {
// console.log('socket connected', data); console.log(socket.value.id)
// }); console.log('socket connected', data)
// })
// socket.on('progress', (d: any) => {
// progress.value.push(d); socket.value.on('progress', (d: Record<string, any>) => {
// progress.value.push(d)
// nextTick(() => {
// if ($refs.log) { // nextTick(() => {
// const el = $refs.log.$el; // if ($refs.log) {
// el.scrollTop = el.scrollHeight; // const el = $refs.log.$el;
// } // el.scrollTop = el.scrollHeight;
// }); // }
// // });
// if (d.status === 'COMPLETED') {
// $store if (d.status === 'COMPLETED') {
// .dispatch('project/_loadTables', { // $store
// dbKey: '0.projectJson.envs._noco.db.0', // .dispatch('project/_loadTables', {
// key: '0.projectJson.envs._noco.db.0.tables', // dbKey: '0.projectJson.envs._noco.db.0',
// _nodes: { // key: '0.projectJson.envs._noco.db.0.tables',
// dbAlias: 'db', // _nodes: {
// env: '_noco', // dbAlias: 'db',
// type: 'tableDir', // env: '_noco',
// }, // type: 'tableDir',
// }) // },
// .then(() => this.$store.dispatch('tabs/loadFirstTableTab')); // })
// } // .then(() => this.$store.dispatch('tabs/loadFirstTableTab'));
// }); }
// loadSyncSrc() })
loadSyncSrc()
}) })
</script> </script>
<template> <template>
<a-modal v-model:visible="dialogShow" width="max(90vw, 600px)" @keydown.esc="dialogShow = false"> <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> <template #footer>
<a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button> <div v-if="step === 1">
<a-button v-t="['c:sync-airtable:save-and-sync']" key="submit" type="primary" @click="saveAndSync">Import</a-button> <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> </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"> <div class="ml-4 pr-10">
<a-divider /> <a-divider />
<div class="mb-4"> <div v-if="step === 1">
<span class="prose-xl font-bold mr-3">Credentials</span> <div class="mb-4">
<a <span class="prose-xl font-bold mr-3">Credentials</span>
href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials" <a
class="prose-sm underline text-grey" href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials"
target="_blank" class="prose-sm underline text-grey"
>Where to find this? target="_blank"
</a> >Where to find this?
</div> </a>
<a-form ref="formValidator" layout="vertical" :model="form"> </div>
<a-form-item ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0"> <a-form ref="formValidator" layout="vertical" :model="form">
<a-form-item v-bind="validateInfos.apiKey"> <a-form-item ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
<a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" /> <a-form-item v-bind="validateInfos.apiKey">
</a-form-item> <a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" />
<a-form-item v-bind="validateInfos.syncSourceUrlOrId"> </a-form-item>
<a-input v-model:value="syncSource.details.syncSourceUrlOrId" placeholder="Shared Base ID / URL" size="large" /> <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>
</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 /> <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> <div>
This feature is currently in beta and more information can be found <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions / Help - Reach out here</a>
<a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">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> </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> </div>
</a-modal> </a-modal>
</template> </template>

Write Preview
Loading…
Cancel
Save