From 37d1008ac255299d64076b233802902401c1c10c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 22 Jul 2022 16:54:39 +0800
Subject: [PATCH] feat(gui-v2): import from airtable ui

---
 .../components/dlg/AirtableImport.vue         | 91 ++++++++++++++++---
 1 file changed, 78 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 6510cbb162..13b510c614 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-import type { UploadChangeParam } from 'ant-design-vue'
+import { Form } from 'ant-design-vue'
+import { useToast } from 'vue-toastification'
+import { fieldRequiredValidator } from '~/utils/validation'
 
-const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
+interface Props {
+  modelValue: boolean
+}
 
+const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
+const toast = useToast()
+const loading = ref(false)
+const syncSource = ref({
+  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 useForm = Form.useForm
+
+const validators = computed(() => {
+  return {
+    apiKey: [fieldRequiredValidator],
+    sharedBaseIdOrUrl: [fieldRequiredValidator],
+  }
+})
+
+const { resetFields, validate, validateInfos } = useForm(syncSource, validators)
+
 const dialogShow = computed({
   get() {
     return modelValue
@@ -16,17 +53,45 @@ const dialogShow = computed({
 </script>
 
 <template>
-  <v-dialog
-    v-model="dialogShow"
-    persistent
-    max-width="550"
-    @keydown.esc="dialogShow = false"
-    @keydown.enter="$emit('create', table)"
-  >
-    <v-card class="elevation-1 backgroundColor">
-      <!-- TODO  -->
-    </v-card>
-  </v-dialog>
+  <a-modal v-model:visible="dialogShow" width="max(90vw, 600px)" @keydown.esc="dialogShow = false">
+    <div class="pl-10 pr-10 pb-10 pt-5">
+      <h1 class="font-bold self-center my-4">{{ $t('title.importFromAirtable') }}</h1>
+      <a-divider />
+      <a-form ref="formValidator" layout="vertical" :model="form">
+        <a-form-item ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="m-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.sharedBaseIdOrUrl">
+            <a-input v-model:value="syncSource.details.shareId" placeholder="Shared Base ID / URL" size="large" />
+          </a-form-item>
+        </a-form-item>
+        <h1 class="font-bold self-center my-4">More Options</h1>
+        <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>
+    </div>
+  </a-modal>
 </template>
 
 <style scoped lang="scss"></style>