From 7e298cce9f44d85c246ce858ecddf5474ce8e939 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 25 Aug 2022 15:15:40 +0530
Subject: [PATCH 1/5] fix/Forced meta loading when tab changes

---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue  | 14 +-------------
 .../[projectType]/[projectId]/index/index.vue      |  9 +++++++++
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index ca045fc415..06b8314a9d 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -10,7 +10,6 @@ import {
   MetaInj,
   OpenNewRecordFormHookInj,
   ReloadViewDataHookInj,
-  TabMetaInj,
   computed,
   inject,
   provide,
@@ -18,12 +17,11 @@ import {
   useMetas,
   useProvideSmartsheetStore,
   watch,
-  watchEffect,
 } from '#imports'
 
 import type { TabItem } from '~/composables'
 
-const { getMeta, metas } = useMetas()
+const { metas } = useMetas()
 
 const activeView = ref()
 
@@ -35,13 +33,8 @@ const tabMeta = inject(
   TabMetaInj,
   computed(() => ({} as TabItem)),
 )
-
 const meta = computed<TableType>(() => metas.value?.[tabMeta?.value?.id as string])
 
-watchEffect(async () => {
-  await getMeta(tabMeta?.value?.id as string)
-})
-
 const reloadEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
@@ -52,7 +45,6 @@ provideSidebar({ storageKey: 'nc-right-sidebar' })
 
 // todo: move to store
 provide(MetaInj, meta)
-provide(TabMetaInj, tabMeta)
 provide(ActiveViewInj, activeView)
 provide(IsLockedInj, isLocked)
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -62,10 +54,6 @@ provide(IsFormInj, isForm)
 
 const treeViewIsLockedInj = inject('TreeViewIsLockedInj', ref(false))
 
-watch(tabMeta, async (newTabMeta, oldTabMeta) => {
-  if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)
-})
-
 watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immediate: true })
 </script>
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 8471d52a37..68df7a0e3e 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -7,11 +7,20 @@ import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
+const { getMeta } = useMetas()
 
 const { isLoading } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
+watch(
+  () => activeTab?.value?.id,
+  async () => {
+    await getMeta(activeTab?.value?.id as string, true)
+  },
+  { immediate: true },
+)
+
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:

From 096ea7289b8b519a47dc83e43701d89d1b12e017 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 26 Aug 2022 01:19:32 +0530
Subject: [PATCH 2/5] fix: avoid multiple meta api request

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/[projectType]/[projectId]/index/index.vue      | 9 +--------
 .../index/index/[type]/[title]/[[viewTitle]].vue         | 9 +++++----
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 68df7a0e3e..8df091dd61 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -7,19 +7,11 @@ import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
-const { getMeta } = useMetas()
 
 const { isLoading } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
-watch(
-  () => activeTab?.value?.id,
-  async () => {
-    await getMeta(activeTab?.value?.id as string, true)
-  },
-  { immediate: true },
-)
 
 const icon = (tab: TabItem) => {
   switch (tab.type) {
@@ -101,6 +93,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
     .ant-tabs-nav-add {
       @apply !hidden;
     }
+
     .ant-tabs-nav-more {
       @apply text-white;
     }
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index ec671406ea..d5f4f4375b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -1,7 +1,8 @@
-<script>
-export default {
-  name: 'Index',
-}
+<script setup lang="ts">
+const { getMeta } = useMetas()
+const route = useRoute()
+
+await getMeta(route.params.title as string, true)
 </script>
 
 <template>

From 9f5d14592a2cdaee95b29507c79a0c09429d0910 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 26 Aug 2022 01:28:35 +0530
Subject: [PATCH 3/5] enhancement: show loader while loading meta

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../index/index/[type]/[title]/[[viewTitle]].vue       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index d5f4f4375b..8aac5c92b7 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
 const { getMeta } = useMetas()
 const route = useRoute()
+const loading = ref(true)
 
-await getMeta(route.params.title as string, true)
+getMeta(route.params.title as string, true).finally(() => {
+  loading.value = false
+})
 </script>
 
 <template>
-  <TabsSmartsheet />
+  <div v-if="loading" class="flex items-center justify-center h-full w-full">
+    <a-spin size="large" />
+  </div>
+  <TabsSmartsheet v-else />
 </template>
 
 <style scoped></style>

From 89cdf6a96fa8a9d130dc3e6c760d92c42a5478e6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 26 Aug 2022 23:15:08 +0530
Subject: [PATCH 4/5] enhancement(gui-v2): show spinner while loading grid data

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  6 ++-
 packages/nc-gui-v2/composables/useViewData.ts | 39 ++++++++++++-------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 9b17581440..31d538431c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -79,6 +79,7 @@ const expandedFormRowState = ref<Record<string, any>>()
 const visibleColLength = $computed(() => fields.value?.length)
 
 const {
+  loading,
   loadData,
   paginationData,
   formattedData: data,
@@ -311,7 +312,10 @@ const onNavigate = (dir: NavigateDir) => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
+    <div v-if="loading" class="flex items-center justify-center h-full w-full">
+      <a-spin size="large" />
+    </div>
+    <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table
           ref="smartTable"
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 4a47678068..7e33bc0622 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -38,6 +38,8 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
+  const loading = ref(false)
+  const error = ref<any>()
   const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -113,20 +115,27 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
-
-    const response = !isPublic.value
-      ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
-          ...params,
-          ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-          where: where?.value,
-        })
-      : await fetchSharedViewData()
-    formattedData.value = formatData(response.list)
-    paginationData.value = response.pageInfo
-
-    await loadAggCommentsCount()
+    try {
+      if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
+      loading.value = true
+      error.value = null
+      const response = !isPublic.value
+        ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
+            ...params,
+            ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+            ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+            where: where?.value,
+          })
+        : await fetchSharedViewData()
+      formattedData.value = formatData(response.list)
+      paginationData.value = response.pageInfo
+
+      await loadAggCommentsCount()
+    } catch (e: any) {
+      error.value = e
+    } finally {
+      loading.value = false
+    }
   }
 
   const loadGalleryData = async () => {
@@ -351,6 +360,8 @@ export function useViewData(
   }
 
   return {
+    error,
+    loading,
     loadData,
     paginationData,
     queryParams,

From 17c59791f2693e45a67b53074c2752920f295e9e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 26 Aug 2022 23:56:50 +0530
Subject: [PATCH 5/5] refactor(gui-v2): use useApi

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  4 +-
 packages/nc-gui-v2/composables/useViewData.ts | 45 ++++++++-----------
 .../[projectType]/[projectId]/index/index.vue |  1 -
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 31d538431c..16f7d75cc7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -79,7 +79,7 @@ const expandedFormRowState = ref<Record<string, any>>()
 const visibleColLength = $computed(() => fields.value?.length)
 
 const {
-  loading,
+  isLoading,
   loadData,
   paginationData,
   formattedData: data,
@@ -312,7 +312,7 @@ const onNavigate = (dir: NavigateDir) => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <div v-if="loading" class="flex items-center justify-center h-full w-full">
+    <div v-if="isLoading" class="flex items-center justify-center h-full w-full">
       <a-spin size="large" />
     </div>
     <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 7e33bc0622..6d6025e6cf 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -10,6 +10,7 @@ import {
   getHTMLEncodedText,
   useProject,
   useUIPermission,
+  useApi
 } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
@@ -38,8 +39,7 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const loading = ref(false)
-  const error = ref<any>()
+  const { api, isLoading, error } = useApi()
   const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -115,27 +115,19 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    try {
-      if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
-      loading.value = true
-      error.value = null
-      const response = !isPublic.value
-        ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
-            ...params,
-            ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-            ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-            where: where?.value,
-          })
-        : await fetchSharedViewData()
-      formattedData.value = formatData(response.list)
-      paginationData.value = response.pageInfo
-
-      await loadAggCommentsCount()
-    } catch (e: any) {
-      error.value = e
-    } finally {
-      loading.value = false
-    }
+    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
+    const response = !isPublic.value
+      ? await api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
+        ...params,
+        ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+        ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+        where: where?.value,
+      })
+      : await fetchSharedViewData()
+    formattedData.value = formatData(response.list)
+    paginationData.value = response.pageInfo
+
+    await loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -201,7 +193,8 @@ export function useViewData(
           value: getHTMLEncodedText(toUpdate.row[property]),
           prev_value: getHTMLEncodedText(toUpdate.oldRow[property]),
         })
-        .then(() => {})
+        .then(() => {
+        })
 
       /** update row data(to sync formula and other related columns) */
       Object.assign(toUpdate.row, updatedRowData)
@@ -243,7 +236,7 @@ export function useViewData(
 
   const deleteRowById = async (id: string) => {
     if (!id) {
-      throw new Error("Delete not allowed for table which doesn't have primary Key")
+      throw new Error('Delete not allowed for table which doesn\'t have primary Key')
     }
 
     const res: any = await $api.dbViewRow.delete(
@@ -361,7 +354,7 @@ export function useViewData(
 
   return {
     error,
-    loading,
+    isLoading,
     loadData,
     paginationData,
     queryParams,
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 8df091dd61..1ed6f56e88 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -12,7 +12,6 @@ const { isLoading } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
-
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE: