|
|
|
@ -1,7 +1,9 @@
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import io from 'socket.io-client' |
|
|
|
|
import { Form } from 'ant-design-vue' |
|
|
|
|
import { useToast } from 'vue-toastification' |
|
|
|
|
import { fieldRequiredValidator } from '~/utils/validation' |
|
|
|
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
|
modelValue: boolean |
|
|
|
@ -11,7 +13,11 @@ const { modelValue } = defineProps<Props>()
|
|
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
|
|
|
|
|
|
const toast = useToast() |
|
|
|
|
const { sqlUi, project, loadTables } = useProject() |
|
|
|
|
const loading = ref(false) |
|
|
|
|
const step = ref(1) |
|
|
|
|
const progress = ref([]) |
|
|
|
|
const syncSourceUrlOrId = ref('') |
|
|
|
|
const syncSource = ref({ |
|
|
|
|
type: 'Airtable', |
|
|
|
|
details: { |
|
|
|
@ -36,7 +42,7 @@ const useForm = Form.useForm
|
|
|
|
|
const validators = computed(() => { |
|
|
|
|
return { |
|
|
|
|
apiKey: [fieldRequiredValidator], |
|
|
|
|
sharedBaseIdOrUrl: [fieldRequiredValidator], |
|
|
|
|
syncSourceUrlOrId: [fieldRequiredValidator], |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
@ -50,10 +56,133 @@ const dialogShow = computed({
|
|
|
|
|
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> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<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"> |
|
|
|
|
<span class="prose-2xl font-bold self-center">{{ $t('title.importFromAirtable') }}</span> |
|
|
|
|
<a-divider /> |
|
|
|
@ -71,8 +200,8 @@ const dialogShow = computed({
|
|
|
|
|
<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.sharedBaseIdOrUrl"> |
|
|
|
|
<a-input v-model:value="syncSource.details.shareId" 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> |
|
|
|
|
<span class="prose-xl font-bold self-center my-4">More Options</span> |
|
|
|
|