From 21b2c1c3c4229f6613b6cb82da011a04cc3d39d7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 14 Sep 2022 23:02:47 +0530
Subject: [PATCH] fix(gui): on airtable import scroll to the end on progress

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dlg/AirtableImport.vue  | 35 ++++++++++---------
 .../composables/useGridViewColumnWidth.ts     |  3 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 73f427e77e..f612c372bd 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -208,9 +208,10 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
-    // FIXME: this doesn't work
     await nextTick(() => {
-      ;(logRef.value?.$el as HTMLDivElement).scrollTo()
+      const container: HTMLDivElement = logRef.value?.$el?.firstElementChild
+      if (!container) return
+      container.scrollTop = container.scrollHeight
     })
 
     if (d.status === 'COMPLETED') {
@@ -286,30 +287,30 @@ onBeforeUnmount(() => {
 
           <!--          Import Secondary Views -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncViews">{{
-              $t('labels.importSecondaryViews')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncViews"
+              >{{ $t('labels.importSecondaryViews') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Rollup Columns -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncRollup">{{
-              $t('labels.importRollupColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncRollup"
+              >{{ $t('labels.importRollupColumns') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Lookup Columns -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncLookup">{{
-              $t('labels.importLookupColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncLookup"
+              >{{ $t('labels.importLookupColumns') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Attachment Columns -->
           <div class="my-2">
-            <a-checkbox v-model:checked="syncSource.details.options.syncAttachment">{{
-              $t('labels.importAttachmentColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncAttachment"
+              >{{ $t('labels.importAttachmentColumns') }}
+            </a-checkbox>
           </div>
 
           <!--          Import Formula Columns -->
@@ -317,9 +318,9 @@ onBeforeUnmount(() => {
             <template #title>
               <span>Coming Soon!</span>
             </template>
-            <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled>{{
-              $t('labels.importFormulaColumns')
-            }}</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled
+              >{{ $t('labels.importFormulaColumns') }}
+            </a-checkbox>
           </a-tooltip>
         </a-form>
 
diff --git a/packages/nc-gui/composables/useGridViewColumnWidth.ts b/packages/nc-gui/composables/useGridViewColumnWidth.ts
index a85e7b036f..1d67613cfa 100644
--- a/packages/nc-gui/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui/composables/useGridViewColumnWidth.ts
@@ -39,8 +39,7 @@ export function useGridViewColumnWidth(view: Ref<GridType | undefined>) {
   const loadGridViewColumns = async () => {
     if (!view.value?.id && !isPublic.value) return
 
-    const colsData: GridColumnType[] = (isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value!.id!)
-) ?? []
+    const colsData: GridColumnType[] = (isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value!.id!)) ?? []
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,