Browse Source

wip(gui-v2): quick import - airtable

pull/2795/head
Wing-Kam Wong 2 years ago
parent
commit
4571c0cae6
  1. 135
      packages/nc-gui-v2/components/dlg/AirtableImport.vue

135
packages/nc-gui-v2/components/dlg/AirtableImport.vue

@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import io from 'socket.io-client'
import { Form } from 'ant-design-vue' 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'
interface Props { interface Props {
modelValue: boolean modelValue: boolean
@ -11,7 +13,11 @@ const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const toast = useToast() const toast = useToast()
const { sqlUi, project, loadTables } = useProject()
const loading = ref(false) const loading = ref(false)
const step = ref(1)
const progress = ref([])
const syncSourceUrlOrId = ref('')
const syncSource = ref({ const syncSource = ref({
type: 'Airtable', type: 'Airtable',
details: { details: {
@ -36,7 +42,7 @@ const useForm = Form.useForm
const validators = computed(() => { const validators = computed(() => {
return { return {
apiKey: [fieldRequiredValidator], apiKey: [fieldRequiredValidator],
sharedBaseIdOrUrl: [fieldRequiredValidator], syncSourceUrlOrId: [fieldRequiredValidator],
} }
}) })
@ -50,10 +56,133 @@ const dialogShow = computed({
emit('update:modelValue', v) emit('update:modelValue', v)
}, },
}) })
const saveAndSync = async () => {
await createOrUpdate()
sync()
}
const createOrUpdate = async () => {
// TODO: check $axios implementation
// try {
// const { id, ...payload } = syncSource.value;
// if (id) {
// await $axios.patch(`/api/v1/db/meta/syncs/${id}`, payload);
// } else {
// syncSource.value = (await $axios.post(`/api/v1/db/meta/projects/${project.value.id}/syncs`, payload)).data;
// }
// } catch (e: any) {
// toast.error(await extractSdkResponseErrorMsg(e))
// }
}
const sync = () => {
step.value = 2
// TODO: check $axios implementation
// $axios.post(`/api/v1/db/meta/syncs/${syncSource.value.id}/trigger`, payload, {
// params: {
// id: this.socket.id,
// },
// });
}
const loadSyncSrc = async () => {
// const {
// data: { list: srcs },
// } = await $axios.get(`/api/v1/db/meta/projects/${project.id}/syncs`)
// if (srcs && srcs[0]) {
// srcs[0].details = srcs[0].details || {}
// syncSource.value = this.migrateSync(srcs[0])
// syncSourceUrlOrId.value = srcs[0].details.shareId
// } else {
// syncSource.value = {
// 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,
// },
// },
// }
// }
}
const 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
}
// 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()
})
</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">
<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>
</template>
<div class="pl-10 pr-10 pt-5"> <div class="pl-10 pr-10 pt-5">
<span class="prose-2xl font-bold self-center">{{ $t('title.importFromAirtable') }}</span> <span class="prose-2xl font-bold self-center">{{ $t('title.importFromAirtable') }}</span>
<a-divider /> <a-divider />
@ -71,8 +200,8 @@ const dialogShow = computed({
<a-form-item v-bind="validateInfos.apiKey"> <a-form-item v-bind="validateInfos.apiKey">
<a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" /> <a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" />
</a-form-item> </a-form-item>
<a-form-item v-bind="validateInfos.sharedBaseIdOrUrl"> <a-form-item v-bind="validateInfos.syncSourceUrlOrId">
<a-input v-model:value="syncSource.details.shareId" placeholder="Shared Base ID / URL" size="large" /> <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>

Loading…
Cancel
Save