feat: use injection state for use view columns

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,

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)
 

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)
 

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -50,7 +50,7 @@ const {
   toggleFieldVisibility,
   loadViewColumns,
   isViewColumnsLoading,
-} = useViewColumns(view, meta as Ref<TableType | undefined>)
+} = useViewColumnsOrThrow(view, meta as Ref<TableType | undefined>)
 
 const loading = ref(false)
 

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()
 

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)
 

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<SelectProps['options']>(() =>
   (

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()
 

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()
 

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)
 

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()

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) => {

packages/nc-gui/composables/useViewColumns.ts

@@ -4,11 +4,12 @@ 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(
+const [useProvideViewColumns, useViewColumns] = useInjectionState(
+  (
     view: Ref<ViewType | undefined>,
     meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
     reloadData?: () => void,
-) {
+  ) => {
     const isPublic = inject(IsPublicInj, ref(false))
 
     const fields = ref<Field[]>()
@@ -293,4 +294,14 @@ export function useViewColumns(
       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
 }

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<SelectProps['options']>(() =>
     meta.value?.columns?.filter((c: ColumnType) => {