From 936c7a6192a00b7c0c31d32379f8c31467608be1 Mon Sep 17 00:00:00 2001 From: mertmit Date: Wed, 11 Oct 2023 00:44:57 +0000 Subject: [PATCH] feat: use injection state for use view columns --- .../nc-gui/components/smartsheet/Form.vue | 4 +- .../smartsheet/column/BarcodeOptions.vue | 2 +- .../smartsheet/column/QrCodeOptions.vue | 2 +- .../components/smartsheet/details/Fields.vue | 2 +- .../components/smartsheet/grid/Table.vue | 2 +- .../smartsheet/toolbar/CreateSort.vue | 2 +- .../toolbar/FieldListAutoCompleteDropdown.vue | 4 +- .../smartsheet/toolbar/FieldsMenu.vue | 4 +- .../smartsheet/toolbar/MappedBy.vue | 4 +- .../smartsheet/toolbar/SortListMenu.vue | 2 +- .../smartsheet/toolbar/StackedBy.vue | 4 +- .../nc-gui/components/tabs/Smartsheet.vue | 2 + packages/nc-gui/composables/useViewColumns.ts | 499 +++++++++--------- packages/nc-gui/composables/useViewFilters.ts | 2 +- 14 files changed, 274 insertions(+), 261 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue index a2a788533f..98a2fcfe6a 100644 --- a/packages/nc-gui/components/smartsheet/Form.vue +++ b/packages/nc-gui/components/smartsheet/Form.vue @@ -23,7 +23,7 @@ import { useI18n, useNuxtApp, useRoles, - useViewColumns, + useViewColumnsOrThrow, useViewData, watch, } from '#imports' @@ -67,7 +67,7 @@ reloadEventHook.on(async () => { setFormData() }) -const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta, async () => reloadEventHook.trigger()) +const { showAll, hideAll, saveOrUpdate } = useViewColumnsOrThrow(view, meta) const { syncLTARRefs, row } = useProvideSmartsheetRowStore( meta, diff --git a/packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue b/packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue index 6eff937686..942087cb61 100644 --- a/packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue +++ b/packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue @@ -16,7 +16,7 @@ const activeView = inject(ActiveViewInj, ref()) const reloadDataHook = inject(ReloadViewDataHookInj)! -const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) +const { fields, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const vModel = useVModel(props, 'modelValue', emit) diff --git a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue index cb240878fd..a74aaf654c 100644 --- a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue +++ b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue @@ -18,7 +18,7 @@ const { t } = useI18n() const reloadDataHook = inject(ReloadViewDataHookInj)! -const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) +const { fields, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const vModel = useVModel(props, 'modelValue', emit) diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue index 86de101314..87601e5a62 100644 --- a/packages/nc-gui/components/smartsheet/details/Fields.vue +++ b/packages/nc-gui/components/smartsheet/details/Fields.vue @@ -50,7 +50,7 @@ const { toggleFieldVisibility, loadViewColumns, isViewColumnsLoading, -} = useViewColumns(view, meta as Ref) +} = useViewColumnsOrThrow(view, meta as Ref) const loading = ref(false) diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue index bf0ae2608c..0a7004d0c7 100644 --- a/packages/nc-gui/components/smartsheet/grid/Table.vue +++ b/packages/nc-gui/components/smartsheet/grid/Table.vue @@ -123,7 +123,7 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook()) const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()) -const { isViewColumnsLoading } = useViewColumns(view, meta, () => reloadViewDataHook.trigger()) +const { isViewColumnsLoading } = useViewColumnsOrThrow(view, meta) const { isMobileMode } = useGlobal() diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue index 77bf6e782e..e68fbe9b6d 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue @@ -21,7 +21,7 @@ const activeView = inject(ActiveViewInj, ref()) const meta = inject(MetaInj, ref()) -const { showSystemFields, metaColumnById } = useViewColumns(activeView, meta) +const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const { sorts } = useViewSorts(activeView) diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue index f02dc35103..c71c16f856 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue @@ -2,7 +2,7 @@ import type { SelectProps } from 'ant-design-vue' import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk' import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk' -import { ActiveViewInj, MetaInj, computed, inject, ref, resolveComponent, useViewColumns } from '#imports' +import { ActiveViewInj, MetaInj, computed, inject, ref, resolveComponent, useViewColumnsOrThrow } from '#imports' const { modelValue, isSort, allowEmpty, ...restProps } = defineProps<{ modelValue?: string @@ -24,7 +24,7 @@ const localValue = computed({ const activeView = inject(ActiveViewInj, ref()) -const { showSystemFields, metaColumnById } = useViewColumns(activeView, meta) +const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const options = computed(() => ( diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue index d85decd9b2..22ab8db945 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue @@ -21,7 +21,7 @@ import { useNuxtApp, useSmartsheetStoreOrThrow, useUndoRedo, - useViewColumns, + useViewColumnsOrThrow, watch, } from '#imports' @@ -55,7 +55,7 @@ const { metaColumnById, loadViewColumns, toggleFieldVisibility, -} = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) +} = useViewColumnsOrThrow(activeView, meta) const { eventBus } = useSmartsheetStoreOrThrow() diff --git a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue index ffe21ffeb9..232d02d4f0 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue @@ -12,7 +12,7 @@ import { iconMap, inject, ref, - useViewColumns, + useViewColumnsOrThrow, watch, } from '#imports' @@ -28,7 +28,7 @@ const isLocked = inject(IsLockedInj, ref(false)) const IsPublic = inject(IsPublicInj, ref(false)) -const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) +const { fields, loadViewColumns, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const { loadMapData, loadMapMeta, updateMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow() diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue index c70f2831b9..e8f8518d76 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue @@ -28,7 +28,7 @@ const { eventBus } = useSmartsheetStoreOrThrow() const { sorts, saveOrUpdate, loadSorts, addSort: _addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger()) -const { showSystemFields, metaColumnById } = useViewColumns(view, meta) +const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(view, meta) const showCreateSort = ref(false) diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue index accd1ba214..b5bea2e0a0 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue @@ -14,7 +14,7 @@ import { useKanbanViewStoreOrThrow, useMenuCloseOnEsc, useUndoRedo, - useViewColumns, + useViewColumnsOrThrow, watch, } from '#imports' @@ -30,7 +30,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)! const isLocked = inject(IsLockedInj, ref(false)) -const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) +const { fields, loadViewColumns, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const { kanbanMetaData, loadKanbanMeta, loadKanbanData, updateKanbanMeta, groupingField, groupingFieldColumn } = useKanbanViewStoreOrThrow() diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue index a1a717b82e..94a446b279 100644 --- a/packages/nc-gui/components/tabs/Smartsheet.vue +++ b/packages/nc-gui/components/tabs/Smartsheet.vue @@ -80,6 +80,8 @@ provide( computed(() => !isUIAllowed('dataEdit')), ) +useProvideViewColumns(activeView, meta, () => reloadEventHook?.trigger()) + const grid = ref() const onDrop = async (event: DragEvent) => { diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts index eafd3a5ee3..34dca96b69 100644 --- a/packages/nc-gui/composables/useViewColumns.ts +++ b/packages/nc-gui/composables/useViewColumns.ts @@ -4,293 +4,304 @@ import type { ComputedRef, Ref } from 'vue' import { IsPublicInj, computed, inject, ref, storeToRefs, useBase, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports' import type { Field } from '#imports' -export function useViewColumns( - view: Ref, - meta: Ref | ComputedRef, - reloadData?: () => void, -) { - const isPublic = inject(IsPublicInj, ref(false)) +const [useProvideViewColumns, useViewColumns] = useInjectionState( + ( + view: Ref, + meta: Ref | ComputedRef, + reloadData?: () => void, + ) => { + const isPublic = inject(IsPublicInj, ref(false)) - const fields = ref() + const fields = ref() - const filterQuery = ref('') + const filterQuery = ref('') - const { $api, $e } = useNuxtApp() + const { $api, $e } = useNuxtApp() - const { isUIAllowed } = useRoles() + const { isUIAllowed } = useRoles() - const { isSharedBase } = storeToRefs(useBase()) + const { isSharedBase } = storeToRefs(useBase()) - const isViewColumnsLoading = ref(false) + const isViewColumnsLoading = ref(false) - const { addUndo, defineViewScope } = useUndoRedo() + const { addUndo, defineViewScope } = useUndoRedo() - const isLocalMode = computed( - () => isPublic.value || !isUIAllowed('viewFieldEdit') || !isUIAllowed('viewFieldEdit') || isSharedBase.value, - ) - - const localChanges = ref([]) - - const isColumnViewEssential = (column: ColumnType) => { - // TODO: consider at some point ti delegate this via a cleaner design pattern to view specific check logic - // which could be inside of a view specific helper class (and generalized via an interface) - // (on the other hand, the logic complexity is still very low atm - might be overkill) - return view.value?.type === ViewTypes.MAP && (view.value?.view as MapType)?.fk_geo_data_col_id === column.id - } + const isLocalMode = computed( + () => isPublic.value || !isUIAllowed('viewFieldEdit') || !isUIAllowed('viewFieldEdit') || isSharedBase.value, + ) - const metaColumnById = computed>(() => { - if (!meta.value?.columns) return {} + const localChanges = ref([]) - return (meta.value.columns as ColumnType[]).reduce( - (acc, curr) => ({ - ...acc, - [curr.id!]: curr, - }), - {}, - ) as Record - }) + const isColumnViewEssential = (column: ColumnType) => { + // TODO: consider at some point ti delegate this via a cleaner design pattern to view specific check logic + // which could be inside of a view specific helper class (and generalized via an interface) + // (on the other hand, the logic complexity is still very low atm - might be overkill) + return view.value?.type === ViewTypes.MAP && (view.value?.view as MapType)?.fk_geo_data_col_id === column.id + } - const loadViewColumns = async () => { - if (!meta || !view) return + const metaColumnById = computed>(() => { + if (!meta.value?.columns) return {} - let order = 1 + return (meta.value.columns as ColumnType[]).reduce( + (acc, curr) => ({ + ...acc, + [curr.id!]: curr, + }), + {}, + ) as Record + }) - if (view.value?.id) { - const data = (isPublic.value ? meta.value?.columns : (await $api.dbViewColumn.list(view.value.id)).list) as any[] + const loadViewColumns = async () => { + if (!meta || !view) return - const fieldById = data.reduce>((acc, curr) => { - curr.show = !!curr.show + let order = 1 - return { - ...acc, - [curr.fk_column_id]: curr, - } - }, {}) + if (view.value?.id) { + const data = (isPublic.value ? meta.value?.columns : (await $api.dbViewColumn.list(view.value.id)).list) as any[] - fields.value = meta.value?.columns - ?.map((column: ColumnType) => { - const currentColumnField = fieldById[column.id!] || {} + const fieldById = data.reduce>((acc, curr) => { + curr.show = !!curr.show return { - title: column.title, - fk_column_id: column.id, - ...currentColumnField, - show: currentColumnField.show || isColumnViewEssential(currentColumnField), - order: currentColumnField.order || order++, - system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]), - isViewEssentialField: isColumnViewEssential(column), + ...acc, + [curr.fk_column_id]: curr, } - }) - .sort((a: Field, b: Field) => a.order - b.order) - - if (isLocalMode.value && fields.value) { - for (const field of localChanges.value) { - const fieldIndex = fields.value.findIndex((f) => f.fk_column_id === field.fk_column_id) - if (fieldIndex !== undefined && fieldIndex > -1) { - fields.value[fieldIndex] = field - fields.value = fields.value.sort((a: Field, b: Field) => a.order - b.order) + }, {}) + + fields.value = meta.value?.columns + ?.map((column: ColumnType) => { + const currentColumnField = fieldById[column.id!] || {} + + return { + title: column.title, + fk_column_id: column.id, + ...currentColumnField, + show: currentColumnField.show || isColumnViewEssential(currentColumnField), + order: currentColumnField.order || order++, + system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]), + isViewEssentialField: isColumnViewEssential(column), + } + }) + .sort((a: Field, b: Field) => a.order - b.order) + + if (isLocalMode.value && fields.value) { + for (const field of localChanges.value) { + const fieldIndex = fields.value.findIndex((f) => f.fk_column_id === field.fk_column_id) + if (fieldIndex !== undefined && fieldIndex > -1) { + fields.value[fieldIndex] = field + fields.value = fields.value.sort((a: Field, b: Field) => a.order - b.order) + } } } } } - } - - const showAll = async (ignoreIds?: any) => { - if (isLocalMode.value) { - fields.value = fields.value?.map((field: Field) => ({ - ...field, - show: true, - })) - reloadData?.() - return - } - if (view?.value?.id) { - if (ignoreIds) { - await $api.dbView.showAllColumn(view.value.id, { - ignoreIds, - }) - } else { - await $api.dbView.showAllColumn(view.value.id) + const showAll = async (ignoreIds?: any) => { + if (isLocalMode.value) { + fields.value = fields.value?.map((field: Field) => ({ + ...field, + show: true, + })) + reloadData?.() + return + } + + if (view?.value?.id) { + if (ignoreIds) { + await $api.dbView.showAllColumn(view.value.id, { + ignoreIds, + }) + } else { + await $api.dbView.showAllColumn(view.value.id) + } } + + await loadViewColumns() + reloadData?.() + $e('a:fields:show-all') } + const hideAll = async (ignoreIds?: any) => { + if (isLocalMode.value) { + fields.value = fields.value?.map((field: Field) => ({ + ...field, + show: !!field.isViewEssentialField, + })) + reloadData?.() + return + } + if (view?.value?.id) { + if (ignoreIds) { + await $api.dbView.hideAllColumn(view.value.id, { + ignoreIds, + }) + } else { + await $api.dbView.hideAllColumn(view.value.id) + } + } - await loadViewColumns() - reloadData?.() - $e('a:fields:show-all') - } - const hideAll = async (ignoreIds?: any) => { - if (isLocalMode.value) { - fields.value = fields.value?.map((field: Field) => ({ - ...field, - show: !!field.isViewEssentialField, - })) + await loadViewColumns() reloadData?.() - return + $e('a:fields:show-all') } - if (view?.value?.id) { - if (ignoreIds) { - await $api.dbView.hideAllColumn(view.value.id, { - ignoreIds, + + const saveOrUpdate = async (field: any, index: number) => { + if (isLocalMode.value && fields.value) { + fields.value[index] = field + meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => { + if (column.id === field.fk_column_id) { + return { + ...column, + ...field, + id: field.fk_column_id, + } + } + return column }) - } else { - await $api.dbView.hideAllColumn(view.value.id) + + localChanges.value.push(field) } - } - await loadViewColumns() - reloadData?.() - $e('a:fields:show-all') - } + if (isUIAllowed('viewFieldEdit')) { + if (field.id && view?.value?.id) { + await $api.dbViewColumn.update(view.value.id, field.id, field) + } else if (view.value?.id) { + const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any - const saveOrUpdate = async (field: any, index: number) => { - if (isLocalMode.value && fields.value) { - fields.value[index] = field - meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => { - if (column.id === field.fk_column_id) { - return { - ...column, - ...field, - id: field.fk_column_id, - } + /** update the field in fields if defined */ + if (fields.value) fields.value[index] = insertedField + + return insertedField } - return column - }) + } - localChanges.value.push(field) + await loadViewColumns() + reloadData?.() } - if (isUIAllowed('viewFieldEdit')) { - if (field.id && view?.value?.id) { - await $api.dbViewColumn.update(view.value.id, field.id, field) - } else if (view.value?.id) { - const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any + const showSystemFields = computed({ + get() { + return (view.value?.show_system_fields as boolean) || false + }, + set(v: boolean) { + if (view?.value?.id) { + if (!isLocalMode.value) { + $api.dbView + .update(view.value.id, { + show_system_fields: v, + }) + .finally(() => { + loadViewColumns() + reloadData?.() + }) + } + view.value.show_system_fields = v + } + $e('a:fields:system-fields') + }, + }) - /** update the field in fields if defined */ - if (fields.value) fields.value[index] = insertedField + const filteredFieldList = computed(() => { + return ( + fields.value?.filter((field: Field) => { + if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true - return insertedField - } - } + // hide system columns if not enabled + if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) { + return false + } - await loadViewColumns() - reloadData?.() - } + if (filterQuery.value === '') { + return true + } else { + return field.title.toLowerCase().includes(filterQuery.value.toLowerCase()) + } + }) || [] + ) + }) - const showSystemFields = computed({ - get() { - return (view.value?.show_system_fields as boolean) || false - }, - set(v: boolean) { - if (view?.value?.id) { - if (!isLocalMode.value) { - $api.dbView - .update(view.value.id, { - show_system_fields: v, - }) - .finally(() => { - loadViewColumns() - reloadData?.() - }) - } - view.value.show_system_fields = v - } - $e('a:fields:system-fields') - }, - }) - - const filteredFieldList = computed(() => { - return ( - fields.value?.filter((field: Field) => { - if (metaColumnById?.value?.[field.fk_column_id!]?.pv) return true - - // hide system columns if not enabled - if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) { - return false - } + const sortedAndFilteredFields = computed(() => { + return (fields?.value + ?.filter((field: Field) => { + // hide system columns if not enabled + if ( + !showSystemFields.value && + metaColumnById.value && + metaColumnById?.value?.[field.fk_column_id!] && + isSystemColumn(metaColumnById.value?.[field.fk_column_id!]) && + !metaColumnById.value?.[field.fk_column_id!]?.pv + ) { + return false + } + return field.show && metaColumnById?.value?.[field.fk_column_id!] + }) + ?.sort((a: Field, b: Field) => a.order - b.order) + ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[] + }) - if (filterQuery.value === '') { - return true - } else { - return field.title.toLowerCase().includes(filterQuery.value.toLowerCase()) - } - }) || [] - ) - }) - - const sortedAndFilteredFields = computed(() => { - return (fields?.value - ?.filter((field: Field) => { - // hide system columns if not enabled - if ( - !showSystemFields.value && - metaColumnById.value && - metaColumnById?.value?.[field.fk_column_id!] && - isSystemColumn(metaColumnById.value?.[field.fk_column_id!]) && - !metaColumnById.value?.[field.fk_column_id!]?.pv - ) { - return false - } - return field.show && metaColumnById?.value?.[field.fk_column_id!] - }) - ?.sort((a: Field, b: Field) => a.order - b.order) - ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[] - }) - - const toggleFieldVisibility = (checked: boolean, field: any) => { - const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id) - if (!fieldIndex && fieldIndex !== 0) return - addUndo({ - undo: { - fn: (v: boolean) => { - field.show = !v - saveOrUpdate(field, fieldIndex) + const toggleFieldVisibility = (checked: boolean, field: any) => { + const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id) + if (!fieldIndex && fieldIndex !== 0) return + addUndo({ + undo: { + fn: (v: boolean) => { + field.show = !v + saveOrUpdate(field, fieldIndex) + }, + args: [checked], }, - args: [checked], - }, - redo: { - fn: (v: boolean) => { - field.show = v - saveOrUpdate(field, fieldIndex) + redo: { + fn: (v: boolean) => { + field.show = v + saveOrUpdate(field, fieldIndex) + }, + args: [checked], }, - args: [checked], - }, - scope: defineViewScope({ view: view.value }), - }) - saveOrUpdate(field, fieldIndex) - } - - // 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) { - isViewColumnsLoading.value = true - try { - await loadViewColumns() - } catch (e) { - console.error(e) + scope: defineViewScope({ view: view.value }), + }) + saveOrUpdate(field, fieldIndex) + } + + // 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) { + isViewColumnsLoading.value = true + try { + await loadViewColumns() + } catch (e) { + console.error(e) + } + isViewColumnsLoading.value = false } - isViewColumnsLoading.value = false - } - }, - { immediate: true }, - ) - - return { - fields, - loadViewColumns, - filteredFieldList, - filterQuery, - showAll, - hideAll, - saveOrUpdate, - sortedAndFilteredFields, - showSystemFields, - metaColumnById, - toggleFieldVisibility, - isViewColumnsLoading, - } + }, + { immediate: true }, + ) + + return { + fields, + loadViewColumns, + filteredFieldList, + filterQuery, + showAll, + hideAll, + saveOrUpdate, + sortedAndFilteredFields, + showSystemFields, + metaColumnById, + toggleFieldVisibility, + isViewColumnsLoading, + } + }, + 'useViewColumnsOrThrow', +) + +export { useProvideViewColumns } + +export function useViewColumnsOrThrow() { + const viewColumns = useViewColumns() + if (viewColumns == null) throw new Error('Please call `useProvideViewColumns` on the appropriate parent component') + return viewColumns } diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts index 24f61a6ec0..c1d440af04 100644 --- a/packages/nc-gui/composables/useViewFilters.ts +++ b/packages/nc-gui/composables/useViewFilters.ts @@ -81,7 +81,7 @@ export function useViewFilters( const activeView = inject(ActiveViewInj, ref()) - const { showSystemFields, metaColumnById } = useViewColumns(activeView, meta) + const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta) const options = computed(() => meta.value?.columns?.filter((c: ColumnType) => {