fix: provide fields from composable instead of fields menu (#8519)

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -11,8 +11,6 @@ provide(MetaInj, meta)
 
 provide(ActiveViewInj, sharedView)
 
-provide(FieldsInj, ref(meta.value?.columns || []))
-
 provide(IsPublicInj, ref(true))
 
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)

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

@@ -11,8 +11,6 @@ provide(MetaInj, meta)
 
 provide(ActiveViewInj, sharedView)
 
-provide(FieldsInj, ref(meta.value?.columns || []))
-
 provide(IsPublicInj, ref(true))
 
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)

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

@@ -18,7 +18,6 @@ provide(ReloadViewDataHookInj, reloadEventHook)
 provide(ReadonlyInj, ref(true))
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 provide(IsLockedInj, isLocked)
 

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

@@ -11,8 +11,6 @@ provide(MetaInj, meta)
 
 provide(ActiveViewInj, sharedView)
 
-provide(FieldsInj, ref(meta.value?.columns || []))
-
 provide(IsPublicInj, ref(true))
 
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)

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

@@ -11,8 +11,6 @@ provide(MetaInj, meta)
 
 provide(ActiveViewInj, sharedView)
 
-provide(FieldsInj, ref(meta.value?.columns || []))
-
 provide(IsPublicInj, ref(true))
 
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)

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

@@ -1136,6 +1136,9 @@ const calculateSlices = () => {
       start: 0,
       end: 0,
     }
+
+    // try again until the grid is rendered
+    setTimeout(calculateSlices, 100)
     return
   }
 

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

@@ -11,8 +11,6 @@ const reloadViewMetaHook = inject(ReloadViewMetaHookInj, undefined)!
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj, undefined)!
 
-const rootFields = inject(FieldsInj)
-
 const { isMobileMode } = useGlobal()
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -23,7 +21,6 @@ const { $api, $e } = useNuxtApp()
 
 const {
   showSystemFields,
-  sortedAndFilteredFields,
   fields,
   filteredFieldList,
   filterQuery,
@@ -48,14 +45,6 @@ eventBus.on((event) => {
   }
 })
 
-watch(
-  sortedAndFilteredFields,
-  (v) => {
-    if (rootFields) rootFields.value = v || []
-  },
-  { immediate: true },
-)
-
 const numberOfHiddenFields = computed(() => filteredFieldList.value?.filter((field) => !field.show)?.length)
 
 const gridDisplayValueField = computed(() => {

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

@@ -16,8 +16,6 @@ useSidebar('nc-right-sidebar')
 
 const activeTab = toRef(props, 'activeTab')
 
-const fields = ref<ColumnType[]>([])
-
 const route = useRoute()
 
 const meta = computed<TableType | undefined>(() => {
@@ -50,7 +48,6 @@ provide(IsLockedInj, isLocked)
 provide(ReloadViewDataHookInj, reloadViewDataEventHook)
 provide(ReloadViewMetaHookInj, reloadViewMetaEventHook)
 provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
-provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
 provide(
@@ -60,6 +57,7 @@ provide(
 useExpandedFormDetachedProvider()
 
 useProvideViewColumns(activeView, meta, () => reloadViewDataEventHook?.trigger())
+
 useProvideViewGroupBy(activeView, meta, xWhere)
 
 useProvideSmartsheetLtarHelpers(meta)

packages/nc-gui/composables/useViewColumns.ts

@@ -6,9 +6,11 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
   (
     view: Ref<ViewType | undefined>,
     meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
-    reloadData?: () => void,
+    reloadData?: (params?: { shouldShowLoading?: boolean }) => void,
     isPublic = false,
   ) => {
+    const rootFields = ref<ColumnType[]>([])
+
     const fields = ref<Field[]>()
 
     const filterQuery = ref('')
@@ -356,6 +358,16 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
       }
     }
 
+    watch(
+      sortedAndFilteredFields,
+      (v) => {
+        if (rootFields) rootFields.value = v || []
+      },
+      { immediate: true },
+    )
+
+    provide(FieldsInj, rootFields)
+
     return {
       fields,
       loadViewColumns,