feat: merge view columns and grid view columns state

packages/nc-gui/components/shared-view/Grid.vue

@@ -39,8 +39,6 @@ provide(IsLockedInj, isLocked)
 
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)
 
-const { loadGridViewColumns } = useProvideGridViewColumn(sharedView, true)
-
 if (signedIn.value) {
   try {
     await loadProject()
@@ -57,10 +55,6 @@ watch(
     immediate: true,
   },
 )
-
-onMounted(async () => {
-  await loadGridViewColumns()
-})
 </script>
 
 <template>

packages/nc-gui/components/smartsheet/Form.vue

@@ -58,16 +58,14 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view)
 
-const reloadEventHook = createEventHook<boolean | void>()
+const reloadEventHook = inject(ReloadViewDataHookInj, createEventHook<boolean | void>())
-
-provide(ReloadViewDataHookInj, reloadEventHook)
 
 reloadEventHook.on(async () => {
   await loadFormView()
   setFormData()
 })
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumnsOrThrow(view, meta)
+const { showAll, hideAll, saveOrUpdate } = useViewColumnsOrThrow()
 
 const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
   meta,

packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue

@@ -10,11 +10,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
-const meta = inject(MetaInj, ref())
+const { fields, metaColumnById } = useViewColumnsOrThrow()
-
-const activeView = inject(ActiveViewInj, ref())
-
-const { fields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
 
 const vModel = useVModel(props, 'modelValue', emit)
 
@@ -57,11 +53,12 @@ onMounted(() => {
     ...vModel.value.meta,
   }
   vModel.value.fk_barcode_value_column_id =
-    (column?.value?.colOptions as Record<string, any>)?.fk_barcode_value_column_id || columnsAllowedAsBarcodeValue.value?.[0]
+    (column?.value?.colOptions as Record<string, any>)?.fk_barcode_value_column_id ||
+    columnsAllowedAsBarcodeValue.value?.[0]?.value
 })
 
 watch(columnsAllowedAsBarcodeValue, (newColumnsAllowedAsBarcodeValue) => {
-  if (vModel.value.fk_barcode_value_column_id == null) {
+  if (vModel.value.fk_barcode_value_column_id === null) {
     vModel.value.fk_barcode_value_column_id = newColumnsAllowedAsBarcodeValue?.[0]?.value
   }
 })

packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue

@@ -10,13 +10,9 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
-const meta = inject(MetaInj, ref())
-
-const activeView = inject(ActiveViewInj, ref())
-
 const { t } = useI18n()
 
-const { fields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
+const { fields, metaColumnById } = useViewColumnsOrThrow()
 
 const vModel = useVModel(props, 'modelValue', emit)
 
@@ -38,7 +34,8 @@ const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
 
 onMounted(() => {
   // set default value
-  vModel.value.fk_qr_value_column_id = (column?.value?.colOptions as Record<string, any>)?.fk_qr_value_column_id || ''
+  vModel.value.fk_qr_value_column_id =
+    (column?.value?.colOptions as Record<string, any>)?.fk_qr_value_column_id || columnsAllowedAsQrValue.value?.[0]?.value
 })
 
 setAdditionalValidations({

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

@@ -45,12 +45,7 @@ const visibilityOps = ref<fieldsVisibilityOps[]>([])
 
 const fieldsListWrapperDomRef = ref<HTMLElement>()
 
-const {
+const { fields: viewFields, toggleFieldVisibility, loadViewColumns, isViewColumnsLoading } = useViewColumnsOrThrow()
-  fields: viewFields,
-  toggleFieldVisibility,
-  loadViewColumns,
-  isViewColumnsLoading,
-} = useViewColumnsOrThrow(view, meta as Ref<TableType | undefined>)
 
 const loading = ref(false)
 

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -28,7 +28,6 @@ import {
   provide,
   ref,
   useEventListener,
-  useGridViewColumnOrThrow,
   useI18n,
   useMultiSelect,
   useNuxtApp,
@@ -36,6 +35,7 @@ import {
   useRoute,
   useSmartsheetStoreOrThrow,
   useUndoRedo,
+  useViewColumnsOrThrow,
   useViewsStore,
   watch,
 } from '#imports'
@@ -123,8 +123,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
-const { isViewColumnsLoading } = useViewColumnsOrThrow(view, meta)
-
 const { isMobileMode } = useGlobal()
 
 const scrollParent = inject(ScrollParentInj, ref<undefined>())
@@ -141,6 +139,8 @@ const { getMeta } = useMetas()
 
 const { addUndo, clone, defineViewScope } = useUndoRedo()
 
+const { isViewColumnsLoading, updateGridViewColumn, gridViewCols, resizingColOldWith } = useViewColumnsOrThrow()
+
 const {
   predictingNextColumn,
   predictedNextColumn,
@@ -894,8 +894,6 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
 }
 
 // #Grid Resize
-const { updateGridViewColumn, gridViewCols, resizingColOldWith } = useGridViewColumnOrThrow()
-
 const onresize = (colID: string | undefined, event: any) => {
   if (!colID) return
   updateGridViewColumn(colID, { width: event.detail })

packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue

@@ -24,7 +24,7 @@ const localValue = computed({
 
 const activeView = inject(ActiveViewInj, ref())
 
-const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
+const { showSystemFields, metaColumnById } = useViewColumnsOrThrow()
 
 const options = computed<SelectProps['options']>(() =>
   (

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -25,12 +25,8 @@ import {
   watch,
 } from '#imports'
 
-const meta = inject(MetaInj, ref())
-
 const activeView = inject(ActiveViewInj, ref())
 
-const reloadDataHook = inject(ReloadViewDataHookInj)!
-
 const reloadViewMetaHook = inject(ReloadViewMetaHookInj, undefined)!
 
 const rootFields = inject(FieldsInj)
@@ -55,7 +51,7 @@ const {
   metaColumnById,
   loadViewColumns,
   toggleFieldVisibility,
-} = useViewColumnsOrThrow(activeView, meta)
+} = useViewColumnsOrThrow()
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 

packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue

@@ -14,6 +14,7 @@ import {
   useMetas,
   useNuxtApp,
   useSmartsheetStoreOrThrow,
+  useViewColumnsOrThrow,
 } from '#imports'
 
 const groupingUidt = [
@@ -33,7 +34,7 @@ const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
 
-const { gridViewCols, updateGridViewColumn } = useGridViewColumnOrThrow()
+const { gridViewCols, updateGridViewColumn } = useViewColumnsOrThrow()
 
 const { $e } = useNuxtApp()
 

packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue

@@ -22,13 +22,11 @@ const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
-const reloadDataHook = inject(ReloadViewDataHookInj)!
-
 const isLocked = inject(IsLockedInj, ref(false))
 
 const IsPublic = inject(IsPublicInj, ref(false))
 
-const { fields, loadViewColumns, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
+const { fields, loadViewColumns, metaColumnById } = useViewColumnsOrThrow()
 
 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 } = useViewColumnsOrThrow(view, meta)
+const { showSystemFields, metaColumnById } = useViewColumnsOrThrow()
 
 const showCreateSort = ref(false)
 

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -63,7 +63,6 @@ const openNewRecordFormHook = createEventHook<void>()
 
 useProvideKanbanViewStore(meta, activeView)
 useProvideMapViewStore(meta, activeView)
-useProvideGridViewColumn(activeView)
 
 // todo: move to store
 provide(MetaInj, meta)

packages/nc-gui/composables/useGridViewColumn.ts

@@ -1,99 +0,0 @@
-import type { ColumnType, GridColumnReqType, GridColumnType, ViewType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
-import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports'
-
-const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
-  (view: Ref<(ViewType & { columns?: GridColumnType[] }) | undefined>, statePublic = false) => {
-    const { isUIAllowed } = useRoles()
-
-    const { $api } = useNuxtApp()
-
-    const { metas } = useMetas()
-
-    const { addUndo, defineViewScope } = useUndoRedo()
-
-    const gridViewCols = ref<Record<string, GridColumnType>>({})
-    const resizingColOldWith = ref('200px')
-    const isPublic = inject(IsPublicInj, ref(statePublic))
-
-    const columns = computed<ColumnType[]>(() => metas.value?.[view.value?.fk_model_id as string]?.columns || [])
-
-    const loadGridViewColumns = async () => {
-      if (!view.value?.id && !isPublic.value) return
-
-      const colsData: GridColumnType[] =
-        (isPublic.value ? view.value?.columns : await $api.dbView.gridColumnsList(view.value!.id!)) ?? []
-
-      gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
-        (o, col) => ({
-          ...o,
-          [col.fk_column_id as string]: col,
-        }),
-        {},
-      )
-    }
-
-    /** when columns changes(create/delete) reload grid columns
-     * or when view changes reload columns width  */
-    watch(
-      [() => columns.value?.length, () => view.value?.id],
-      async (n) => {
-        if (n[0] && n[1]) await loadGridViewColumns()
-      },
-      {
-        immediate: true,
-      },
-    )
-
-    const updateGridViewColumn = async (id: string, props: Partial<GridColumnReqType>, undo = false) => {
-      if (!undo) {
-        const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => {
-          if (gridViewCols.value[id][k as keyof GridColumnType]) {
-            if (k === 'width') o[k] = `${resizingColOldWith.value}px`
-            else o[k] = gridViewCols.value[id][k as keyof GridColumnType]
-          }
-          return o
-        }, {})
-        addUndo({
-          redo: {
-            fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true),
-            args: [props],
-          },
-          undo: {
-            fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true),
-            args: [oldProps],
-          },
-          scope: defineViewScope({ view: view.value }),
-        })
-      }
-
-      // sync with server if allowed
-      if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) {
-        await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
-          ...props,
-        })
-      }
-
-      if (gridViewCols.value?.[id]) {
-        Object.assign(gridViewCols.value[id], {
-          ...gridViewCols.value[id],
-          ...props,
-        })
-      } else {
-        // fallback to reload
-        await loadGridViewColumns()
-      }
-    }
-
-    return { loadGridViewColumns, updateGridViewColumn, gridViewCols, resizingColOldWith }
-  },
-  'useGridViewColumn',
-)
-
-export { useProvideGridViewColumn }
-
-export function useGridViewColumnOrThrow() {
-  const gridViewColumn = useGridViewColumn()
-  if (gridViewColumn == null) throw new Error('Please call `useProvideGridViewColumn` on the appropriate parent component')
-  return gridViewColumn
-}

packages/nc-gui/composables/useViewColumns.ts

@@ -1,5 +1,5 @@
 import { ViewTypes, isSystemColumn } from 'nocodb-sdk'
-import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, GridColumnReqType, GridColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref, storeToRefs, useBase, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports'
 import type { Field } from '#imports'
@@ -50,6 +50,8 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
       ) as Record<string, ColumnType>
     })
 
+    const gridViewCols = ref<Record<string, GridColumnType>>({})
+
     const loadViewColumns = async () => {
       if (!meta || !view) return
 
@@ -92,6 +94,16 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
             }
           }
         }
+
+        const colsData: GridColumnType[] = (isPublic.value ? view.value?.columns : fields.value) ?? []
+
+        gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
+          (o, col) => ({
+            ...o,
+            [col.fk_column_id as string]: col,
+          }),
+          {},
+        )
       }
     }
 
@@ -279,6 +291,48 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
       { immediate: true },
     )
 
+    const resizingColOldWith = ref('200px')
+
+    const updateGridViewColumn = async (id: string, props: Partial<GridColumnReqType>, undo = false) => {
+      if (!undo) {
+        const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => {
+          if (gridViewCols.value[id][k as keyof GridColumnType]) {
+            if (k === 'width') o[k] = `${resizingColOldWith.value}px`
+            else o[k] = gridViewCols.value[id][k as keyof GridColumnType]
+          }
+          return o
+        }, {})
+        addUndo({
+          redo: {
+            fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true),
+            args: [props],
+          },
+          undo: {
+            fn: (w: Partial<GridColumnReqType>) => updateGridViewColumn(id, w, true),
+            args: [oldProps],
+          },
+          scope: defineViewScope({ view: view.value }),
+        })
+      }
+
+      // sync with server if allowed
+      if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) {
+        await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
+          ...props,
+        })
+      }
+
+      if (gridViewCols.value?.[id]) {
+        Object.assign(gridViewCols.value[id], {
+          ...gridViewCols.value[id],
+          ...props,
+        })
+      } else {
+        // fallback to reload
+        await loadViewColumns()
+      }
+    }
+
     return {
       fields,
       loadViewColumns,
@@ -292,6 +346,9 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
       metaColumnById,
       toggleFieldVisibility,
       isViewColumnsLoading,
+      updateGridViewColumn,
+      gridViewCols,
+      resizingColOldWith,
     }
   },
   'useViewColumnsOrThrow',

packages/nc-gui/composables/useViewFilters.ts

@@ -81,7 +81,7 @@ export function useViewFilters(
 
   const activeView = inject(ActiveViewInj, ref())
 
-  const { showSystemFields, metaColumnById } = useViewColumnsOrThrow(activeView, meta)
+  const { showSystemFields, metaColumnById } = useViewColumnsOrThrow()
 
   const options = computed<SelectProps['options']>(() =>
     meta.value?.columns?.filter((c: ColumnType) => {

packages/nc-gui/composables/useViewGroupBy.ts

@@ -1,6 +1,6 @@
 import { type ColumnType, type SelectOptionsType, UITypes, type ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { GROUP_BY_VARS, ref, storeToRefs, useApi, useBase } from '#imports'
+import { GROUP_BY_VARS, ref, storeToRefs, useApi, useBase, useViewColumnsOrThrow } from '#imports'
 import type { Group, GroupNestedIn, Row } from '#imports'
 
 export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: ComputedRef<string | undefined>) => {
@@ -12,7 +12,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
 
   const meta = inject(MetaInj)
 
-  const { gridViewCols } = useGridViewColumnOrThrow()
+  const { gridViewCols } = useViewColumnsOrThrow()
 
   const groupBy = computed<{ column: ColumnType; sort: string; order?: number }[]>(() => {
     const tempGroupBy: { column: ColumnType; sort: string; order?: number }[] = []