Browse Source

refactor(nc-gui): hide loading spinner when reloading from view filters

pull/3646/head
braks 2 years ago
parent
commit
5320a313bc
  1. 4
      packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
  2. 24
      packages/nc-gui/components/smartsheet/Grid.vue
  3. 12
      packages/nc-gui/composables/useViewFilters.ts
  4. 4
      packages/nc-gui/context/index.ts

4
packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue

@ -46,9 +46,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
activeView, activeView,
parentId, parentId,
computed(() => autoSave), computed(() => autoSave),
() => { reloadDataHook.trigger,
reloadDataHook.trigger()
},
modelValue || nestedFilters.value, modelValue || nestedFilters.value,
!modelValue, !modelValue,
) )

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

@ -23,6 +23,7 @@ import {
provide, provide,
reactive, reactive,
ref, ref,
useClipboard,
useEventListener, useEventListener,
useGridViewColumnWidth, useGridViewColumnWidth,
useI18n, useI18n,
@ -96,6 +97,8 @@ const {
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view) const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
const { copy } = useClipboard()
onMounted(loadGridViewColumns) onMounted(loadGridViewColumns)
provide(IsFormInj, ref(false)) provide(IsFormInj, ref(false))
@ -113,8 +116,15 @@ provide(ReadonlyInj, !hasEditPermission)
const disableUrlOverlay = ref(false) const disableUrlOverlay = ref(false)
provide(CellUrlDisableOverlayInj, disableUrlOverlay) provide(CellUrlDisableOverlayInj, disableUrlOverlay)
reloadViewDataHook?.on(async () => { const showLoading = ref(true)
reloadViewDataHook?.on(async (shouldShowLoading) => {
// set value if spinner should be hidden
showLoading.value = !!shouldShowLoading
await loadData() await loadData()
// reset to default (showing spinner on load)
showLoading.value = true
}) })
const skipRowRemovalOnCancel = ref(false) const skipRowRemovalOnCancel = ref(false)
@ -179,8 +189,6 @@ const clearCell = async (ctx: { row: number; col: number }) => {
await updateOrSaveRow(rowObj, columnObj.title) await updateOrSaveRow(rowObj, columnObj.title)
} }
const { copy } = useClipboard()
const makeEditable = (row: Row, col: ColumnType) => { const makeEditable = (row: Row, col: ColumnType) => {
if (!hasEditPermission || editEnabled || isView) { if (!hasEditPermission || editEnabled || isView) {
return return
@ -373,10 +381,12 @@ onBeforeUnmount(async () => {
<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 v-if="isLoading" class="flex items-center justify-center h-full w-full"> <general-overlay :model-value="isLoading" inline transition>
<a-spin size="large" /> <div class="flex items-center justify-center h-full w-full">
</div> <a-spin size="large" />
<div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull"> </div>
</general-overlay>
<div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
<a-dropdown <a-dropdown
v-model:visible="contextMenu" v-model:visible="contextMenu"
:trigger="isSqlView ? [] : ['contextmenu']" :trigger="isSqlView ? [] : ['contextmenu']"

12
packages/nc-gui/composables/useViewFilters.ts

@ -19,7 +19,7 @@ export function useViewFilters(
view: Ref<ViewType | undefined>, view: Ref<ViewType | undefined>,
parentId?: string, parentId?: string,
autoApply?: ComputedRef<boolean>, autoApply?: ComputedRef<boolean>,
reloadData?: () => void, reloadData?: (showLoading?: boolean) => void,
currentFilters?: Filter[], currentFilters?: Filter[],
isNestedRoot?: boolean, isNestedRoot?: boolean,
) { ) {
@ -110,7 +110,7 @@ export function useViewFilters(
} }
} }
reloadData?.() reloadData?.(false)
} catch (e: any) { } catch (e: any) {
console.log(e) console.log(e)
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
@ -122,7 +122,7 @@ export function useViewFilters(
if (nestedMode.value) { if (nestedMode.value) {
filters.value.splice(i, 1) filters.value.splice(i, 1)
filters.value = [...filters.value] filters.value = [...filters.value]
reloadData?.() reloadData?.(false)
} else { } else {
if (filter.id) { if (filter.id) {
// if auto-apply disabled mark it as disabled // if auto-apply disabled mark it as disabled
@ -133,7 +133,7 @@ export function useViewFilters(
try { try {
await $api.dbTableFilter.delete(filter.id) await $api.dbTableFilter.delete(filter.id)
reloadData?.() reloadData?.(false)
filters.value.splice(i, 1) filters.value.splice(i, 1)
} catch (e: any) { } catch (e: any) {
@ -150,7 +150,7 @@ export function useViewFilters(
} }
const saveOrUpdate = async (filter: Filter, i: number, force = false) => { const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
if (!view?.value) return if (!view.value) return
try { try {
if (nestedMode.value) { if (nestedMode.value) {
@ -179,7 +179,7 @@ export function useViewFilters(
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} }
reloadData?.() reloadData?.(false)
} }
const addFilter = () => { const addFilter = () => {

4
packages/nc-gui/context/index.ts

@ -21,7 +21,9 @@ export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injecti
export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection') export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection') export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection') export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
/** when bool is passed, it indicates if a loading spinner should be visible while reloading */
export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection') export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection') export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection') export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')

Loading…
Cancel
Save