Browse Source

refactor(nc-gui): use lazy components

pull/3801/head
braks 2 years ago
parent
commit
ee444604d9
  1. 5
      packages/nc-gui/components/shared-view/Grid.vue
  2. 13
      packages/nc-gui/components/smartsheet/Grid.vue
  3. 32
      packages/nc-gui/components/tabs/Smartsheet.vue
  4. 18
      packages/nc-gui/nuxt.config.ts
  5. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  6. 6
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
  7. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
  8. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue

5
packages/nc-gui/components/shared-view/Grid.vue

@ -29,8 +29,9 @@ if (signedIn.value) {
<template>
<div class="nc-container flex flex-col h-full mt-1.5 px-12">
<SmartsheetToolbar />
<SmartsheetGrid />
<LazySmartsheetToolbar />
<LazySmartsheetGrid />
</div>
</template>

13
packages/nc-gui/components/smartsheet/Grid.vue

@ -417,12 +417,13 @@ reloadViewDataHook.trigger()
</script>
<template>
<div class="flex flex-col h-full min-h-0 w-full">
<div class="relative flex flex-col h-full min-h-0 w-full">
<general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
<div class="flex items-center justify-center h-full w-full">
<div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
<a-spin size="large" />
</div>
</general-overlay>
<div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
<a-dropdown
v-model:visible="contextMenu"
@ -642,18 +643,14 @@ reloadViewDataHook.trigger()
<SmartsheetPagination />
<SmartsheetExpandedForm
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
:view="view"
@update:model-value="
() => {
if (!skipRowRemovalOnCancel) removeRowIfNew(expandedFormRow)
}
"
@update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
/>
<SmartsheetExpandedForm

32
packages/nc-gui/components/tabs/Smartsheet.vue

@ -1,6 +1,5 @@
<script setup lang="ts">
import type { ColumnType, TableType } from 'nocodb-sdk'
import SmartsheetGrid from '../smartsheet/Grid.vue'
import {
ActiveViewInj,
FieldsInj,
@ -10,10 +9,12 @@ import {
OpenNewRecordFormHookInj,
ReloadViewDataHookInj,
ReloadViewMetaHookInj,
TabMetaInj,
computed,
createEventHook,
inject,
provide,
ref,
useMetas,
useProvideSmartsheetStore,
watch,
@ -28,7 +29,7 @@ const { metas } = useMetas()
const activeView = ref()
const el = ref<typeof SmartsheetGrid>()
const el = ref()
const fields = ref<ColumnType[]>([])
@ -36,8 +37,8 @@ provide(TabMetaInj, ref(activeTab))
const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
const reloadEventHook = createEventHook()
const reloadViewMetaEventHook = createEventHook<void>()
const openNewRecordFormHook = createEventHook<void>()
const reloadViewMetaEventHook = createEventHook()
const openNewRecordFormHook = createEventHook()
const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
@ -62,21 +63,24 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
<template>
<div class="nc-container flex h-full">
<div class="flex flex-col h-full flex-1 min-w-0">
<SmartsheetToolbar />
<LazySmartsheetToolbar />
<template v-if="meta">
<div class="flex flex-1 min-h-0">
<div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
<SmartsheetGrid v-if="isGrid" :ref="el" />
<Transition name="layout" mode="out-in">
<template v-if="meta">
<div class="flex flex-1 min-h-0">
<div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
<LazySmartsheetGrid v-if="isGrid" :ref="el" />
<SmartsheetGallery v-else-if="isGallery" />
<LazySmartsheetGallery v-else-if="isGallery" />
<SmartsheetForm v-else-if="isForm && !$route.query.reload" />
<LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />
</div>
</div>
</div>
</template>
</template>
</Transition>
</div>
<SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
<LazySmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
</div>
</template>

18
packages/nc-gui/nuxt.config.ts

@ -62,7 +62,7 @@ export default defineNuxtConfig({
runtimeOnly: false,
}),
Icons({
autoInstall: true,
autoInstall: false,
compiler: 'vue3',
defaultClass: 'nc-icon',
}),
@ -74,6 +74,22 @@ export default defineNuxtConfig({
}),
IconsResolver({
prefix: false,
enabledCollections: [
'ant-design',
'bi',
'cil',
'clarity',
'eva',
'ic',
'logos',
'lucide',
'material-symbols',
'mdi',
'mi',
'ph',
'ri',
'system-uicons',
],
}),
],
}),

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

@ -477,7 +477,7 @@ onBeforeUnmount(reset)
</template>
<div :key="$route.fullPath.split('?')[0]">
<dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
<LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" />
<NuxtPage />

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

@ -81,13 +81,9 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
</div>
<div class="w-full min-h-[300px] flex-auto">
<div v-show="!isLoadingProject" class="w-full h-full">
<div class="w-full h-full">
<NuxtPage />
</div>
<div v-show="isLoadingProject" class="w-full h-full flex justify-center items-center">
<a-spin size="large" />
</div>
</div>
</div>
</div>

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

@ -27,5 +27,5 @@ until(tables)
<div v-if="loading" class="flex items-center justify-center h-full w-full">
<a-spin size="large" />
</div>
<TabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
<LazyTabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
</template>

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

@ -152,6 +152,7 @@ function onDropZoneClick(e: MouseEvent) {
<div class="text-3xl">Welcome to NocoDB!</div>
<div class="prose-lg leading-8">To get started, click on a table in the left pane</div>
</div>
<div v-else ref="dropZone">
<general-overlay
:model-value="true"
@ -172,6 +173,7 @@ function onDropZoneClick(e: MouseEvent) {
<span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
<span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel file here or</span>
</div>
<a-button type="primary" ghost class="create-table-btn">
<span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
</a-button>

Loading…
Cancel
Save