Browse Source

Merge pull request #3342 from nocodb/fix/forced-meta-loading-when-tab-changed

vue3: Forced meta loading when tab changes
pull/3367/head
Pranav C 2 years ago committed by GitHub
parent
commit
09ab5a3fbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 14
      packages/nc-gui-v2/components/tabs/Smartsheet.vue
  3. 12
      packages/nc-gui-v2/composables/useViewData.ts
  4. 1
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
  5. 17
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

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 visibleColLength = $computed(() => fields.value?.length)
const { const {
isLoading,
loadData, loadData,
paginationData, paginationData,
formattedData: data, formattedData: data,
@ -311,7 +312,10 @@ const onNavigate = (dir: NavigateDir) => {
<template> <template>
<div class="flex flex-col h-full min-h-0 w-full"> <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="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">
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']"> <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
<table <table
ref="smartTable" ref="smartTable"

14
packages/nc-gui-v2/components/tabs/Smartsheet.vue

@ -10,7 +10,6 @@ import {
MetaInj, MetaInj,
OpenNewRecordFormHookInj, OpenNewRecordFormHookInj,
ReloadViewDataHookInj, ReloadViewDataHookInj,
TabMetaInj,
computed, computed,
inject, inject,
provide, provide,
@ -18,12 +17,11 @@ import {
useMetas, useMetas,
useProvideSmartsheetStore, useProvideSmartsheetStore,
watch, watch,
watchEffect,
} from '#imports' } from '#imports'
import type { TabItem } from '~/composables' import type { TabItem } from '~/composables'
const { getMeta, metas } = useMetas() const { metas } = useMetas()
const activeView = ref() const activeView = ref()
@ -35,13 +33,8 @@ const tabMeta = inject(
TabMetaInj, TabMetaInj,
computed(() => ({} as TabItem)), computed(() => ({} as TabItem)),
) )
const meta = computed<TableType>(() => metas.value?.[tabMeta?.value?.id as string]) 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 reloadEventHook = createEventHook<void>()
const openNewRecordFormHook = createEventHook<void>() const openNewRecordFormHook = createEventHook<void>()
@ -52,7 +45,6 @@ provideSidebar({ storageKey: 'nc-right-sidebar' })
// todo: move to store // todo: move to store
provide(MetaInj, meta) provide(MetaInj, meta)
provide(TabMetaInj, tabMeta)
provide(ActiveViewInj, activeView) provide(ActiveViewInj, activeView)
provide(IsLockedInj, isLocked) provide(IsLockedInj, isLocked)
provide(ReloadViewDataHookInj, reloadEventHook) provide(ReloadViewDataHookInj, reloadEventHook)
@ -62,10 +54,6 @@ provide(IsFormInj, isForm)
const treeViewIsLockedInj = inject('TreeViewIsLockedInj', ref(false)) 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 }) watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immediate: true })
</script> </script>

12
packages/nc-gui-v2/composables/useViewData.ts

@ -10,6 +10,7 @@ import {
getHTMLEncodedText, getHTMLEncodedText,
useProject, useProject,
useUIPermission, useUIPermission,
useApi
} from '#imports' } from '#imports'
const formatData = (list: Record<string, any>[]) => const formatData = (list: Record<string, any>[]) =>
@ -38,6 +39,7 @@ export function useViewData(
throw new Error('Table meta is not available') throw new Error('Table meta is not available')
} }
const { api, isLoading, error } = useApi()
const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 }) const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
const aggCommentCount = ref<{ row_id: string; count: number }[]>([]) const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
const galleryData = ref<GalleryType>() const galleryData = ref<GalleryType>()
@ -114,9 +116,8 @@ export function useViewData(
const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => { const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
const response = !isPublic.value const response = !isPublic.value
? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, { ? await api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
...params, ...params,
...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }), ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }), ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
@ -192,7 +193,8 @@ export function useViewData(
value: getHTMLEncodedText(toUpdate.row[property]), value: getHTMLEncodedText(toUpdate.row[property]),
prev_value: getHTMLEncodedText(toUpdate.oldRow[property]), prev_value: getHTMLEncodedText(toUpdate.oldRow[property]),
}) })
.then(() => {}) .then(() => {
})
/** update row data(to sync formula and other related columns) */ /** update row data(to sync formula and other related columns) */
Object.assign(toUpdate.row, updatedRowData) Object.assign(toUpdate.row, updatedRowData)
@ -234,7 +236,7 @@ export function useViewData(
const deleteRowById = async (id: string) => { const deleteRowById = async (id: string) => {
if (!id) { 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( const res: any = await $api.dbViewRow.delete(
@ -351,6 +353,8 @@ export function useViewData(
} }
return { return {
error,
isLoading,
loadData, loadData,
paginationData, paginationData,
queryParams, queryParams,

1
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@ -92,6 +92,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
.ant-tabs-nav-add { .ant-tabs-nav-add {
@apply !hidden; @apply !hidden;
} }
.ant-tabs-nav-more { .ant-tabs-nav-more {
@apply text-white; @apply text-white;
} }

17
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@ -1,11 +1,18 @@
<script> <script setup lang="ts">
export default { const { getMeta } = useMetas()
name: 'Index', const route = useRoute()
} const loading = ref(true)
getMeta(route.params.title as string, true).finally(() => {
loading.value = false
})
</script> </script>
<template> <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> </template>
<style scoped></style> <style scoped></style>

Loading…
Cancel
Save