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

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

@@ -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,31 +140,32 @@ 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);
-  //
+  // 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') {
+
+    if (d.status === 'COMPLETED') {
       // $store
       //     .dispatch('project/_loadTables', {
       //       dbKey: '0.projectJson.envs._noco.db.0',
@@ -171,21 +177,24 @@ onMounted(() => {
       //       },
       //     })
       //     .then(() => this.$store.dispatch('tabs/loadFirstTableTab'));
-  //   }
-  // });
-  // loadSyncSrc()
+    }
+  })
+  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>
+      <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 v-if="step === 1">
         <div class="mb-4">
           <span class="prose-xl font-bold mr-3">Credentials</span>
           <a
@@ -238,6 +247,33 @@ onMounted(() => {
           </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>