Browse Source

fix(gui): avoid view flickering on linking/unlinking LTAR

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3776/head
Pranav C 2 years ago
parent
commit
6a3a54798e
  1. 7
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 4
      packages/nc-gui/components/smartsheet/Row.vue
  3. 2
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  4. 8
      packages/nc-gui/composables/useLTARStore.ts
  5. 2
      packages/nc-gui/context/index.ts

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

@ -430,7 +430,12 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
</thead>
<!-- this prevent select text from field if not in edit mode -->
<tbody ref="tbodyEl" @selectstart.prevent>
<LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
<LazySmartsheetRow
v-for="(row, rowIndex) of data"
ref="rowRefs"
:key="extractPkFromRow(row.row, meta.columns) ?? rowIndex"
:row="row"
>
<template #default="{ state }">
<tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1">

4
packages/nc-gui/components/smartsheet/Row.vue

@ -37,9 +37,9 @@ const reloadViewDataTrigger = inject(ReloadViewDataHookInj)!
// override reload trigger and use it to reload row
const reloadHook = createEventHook()
reloadHook.on(() => {
reloadHook.on((shouldShowLoading: boolean) => {
if (isNew.value) return
reloadViewDataTrigger?.trigger()
reloadViewDataTrigger?.trigger(shouldShowLoading)
})
provide(ReloadRowDataHookInj, reloadHook)

2
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -104,7 +104,7 @@ const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
const reloadHook = createEventHook()
reloadHook.on(() => {
reloadParentRowHook?.trigger()
reloadParentRowHook?.trigger(false)
if (isNew.value) return
loadRow()
})

8
packages/nc-gui/composables/useLTARStore.ts

@ -28,7 +28,7 @@ interface DataApiResponse {
/** Store for managing Link to another cells */
const [useProvideLTARStore, useLTARStore] = useInjectionState(
(column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
(column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = (showProgress?:boolean) => {}) => {
// state
const { metas, getMeta } = useMetas()
@ -221,7 +221,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
return false
}
reloadData?.()
reloadData?.(false)
/** reload child list if not a new row */
if (!isNewRow?.value) {
@ -264,7 +264,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
message.error(`${t('msg.error.unlinkFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
}
reloadData?.()
reloadData?.(false)
}
const link = async (row: Record<string, any>) => {
@ -296,7 +296,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
message.error(`Linking failed: ${await extractSdkResponseErrorMsg(e)}`)
}
reloadData?.()
reloadData?.(false)
}
// watchers

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

@ -24,7 +24,7 @@ export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-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 ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')
export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
export const ReloadRowDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-row-data-injection')
export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')

Loading…
Cancel
Save