diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue index 47b2356963..37bca9be79 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue @@ -41,10 +41,12 @@ const { filters, loadFilters } = useViewFilters( const filtersLength = ref(0) watch( - () => activeView?.value, - async () => { - await loadFilters() - filtersLength.value = filters.value.length || 0 + () => activeView?.value?.id, + async (viewId) => { + if (viewId) { + await loadFilters() + filtersLength.value = filters.value.length || 0 + } }, { immediate: true }, ) diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue index f03944b4d1..d7492bc50e 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue @@ -39,7 +39,6 @@ const { showSystemFields, sortedAndFilteredFields, fields, - loadViewColumns, filteredFieldList, filterQuery, showAll, @@ -48,16 +47,6 @@ const { metaColumnById, } = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) -watch( - () => activeView.value?.id, - async (newVal, oldVal) => { - if (newVal !== oldVal && meta.value) { - await loadViewColumns() - } - }, - { immediate: true }, -) - watch( sortedAndFilteredFields, (v) => { diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue index 1a35292606..041b80ff8c 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue @@ -32,8 +32,8 @@ const columnByID = computed(() => watch( () => view.value?.id, - () => { - loadSorts() + (viewId) => { + if (viewId) loadSorts() }, { immediate: true }, ) diff --git a/packages/nc-gui/composables/useGridViewColumnWidth.ts b/packages/nc-gui/composables/useGridViewColumnWidth.ts index b73f58bf12..27f3855298 100644 --- a/packages/nc-gui/composables/useGridViewColumnWidth.ts +++ b/packages/nc-gui/composables/useGridViewColumnWidth.ts @@ -50,8 +50,9 @@ export function useGridViewColumnWidth(view: Ref) { loadCss() } - /** when columns changes(create/delete) reload grid columns */ - watch(columns, loadGridViewColumns) + /** when columns changes(create/delete) reload grid columns + * or when view changes reload columns width */ + watch([() => columns.value?.length, () => view?.value?.id], loadGridViewColumns) const updateWidth = async (id: string, width: string) => { if (gridViewCols?.value?.[id]) { diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts index 27e9e1641d..0922527003 100644 --- a/packages/nc-gui/composables/useViewColumns.ts +++ b/packages/nc-gui/composables/useViewColumns.ts @@ -205,12 +205,18 @@ export function useViewColumns( ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[] }) - // reload view columns when table meta changes - watch(meta, async (newVal, oldVal) => { - if (newVal !== oldVal && meta.value) { - await loadViewColumns() - } - }) + // reload view columns when active view changes + // or when columns count changes(delete/add) + watch( + [() => view?.value?.id, () => meta.value?.columns?.length], + async ([newViewId]) => { + // reload only if view belongs to current table + if (newViewId && view.value?.fk_model_id === meta.value?.id) { + await loadViewColumns() + } + }, + { immediate: true }, + ) return { fields, diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts index 06098fdecb..8df90d85e8 100644 --- a/packages/nc-gui/composables/useViewFilters.ts +++ b/packages/nc-gui/composables/useViewFilters.ts @@ -218,7 +218,7 @@ export function useViewFilters( return metas?.value?.[view?.value?.fk_model_id as string]?.columns?.length || 0 }, async (nextColsLength, oldColsLength) => { - if (nextColsLength < oldColsLength) await loadFilters() + if (nextColsLength && nextColsLength < oldColsLength) await loadFilters() }, )