Browse Source

enhancement(gui-v2): show spinner while loading grid data

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3342/head
Pranav C 2 years ago
parent
commit
89cdf6a96f
  1. 6
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 39
      packages/nc-gui-v2/composables/useViewData.ts

6
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"

39
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,

Loading…
Cancel
Save