feat(gui-v2): Show fields based on selected fields in fields menu

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/index.ts

@@ -17,3 +17,4 @@ export const ActiveViewInj: InjectionKey<Ref<(GridType | GalleryType | FormType
   Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
+export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
 import useViewColumns from '~/composables/useViewColumns'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiEyeIcon from '~icons/mdi/eye-off-outline'
@@ -16,6 +16,7 @@ const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
 const isLocked = inject(IsLockedInj)
+const rootFields = inject(FieldsInj)
 
 const isAnyFieldHidden = computed(() => {
   return false
@@ -23,12 +24,8 @@ const isAnyFieldHidden = computed(() => {
   // return meta?.fields?.some(field => field.hidden)
 })
 
-const { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, saveOrUpdate } = useViewColumns(
-  activeView,
-  meta,
-  false,
-  () => reloadDataHook?.trigger(),
-)
+const { sortedAndFilteredFields, fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, saveOrUpdate } =
+  useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
 
 watch(
   () => activeView?.value?.id,
@@ -39,6 +36,13 @@ watch(
   },
   { immediate: true },
 )
+watch(
+  () => sortedAndFilteredFields.value,
+  (v) => {
+    if (rootFields) rootFields.value = v || []
+  },
+  { immediate: true },
+)
 
 /* import draggable from 'vuedraggable'
 import { getSystemColumnsIds } from 'nocodb-sdk'

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -1,21 +1,24 @@
 <script lang="ts" setup>
 import { computed } from '@vue/reactivity'
-import { isVirtualCol } from 'nocodb-sdk'
+import { ColumnType, isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
 import {
   ActiveViewInj,
   ChangePageInj,
+  FieldsInj,
   IsFormInj,
   IsGridInj,
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
 } from '~/components'
-import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import useViewData from '~/composables/useViewData'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
+// keep a root fields variable and will get modified from
+// fields menu and get used in grid and gallery
+const fields = inject(FieldsInj)
 
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
@@ -67,7 +70,7 @@ defineExpose({
       <thead>
         <tr>
           <th>#</th>
-          <th v-for="col in meta.columns" :key="col.title">
+          <th v-for="col in fields" :key="col.title">
             <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
             <SmartsheetHeaderCell v-else :column="col" />
           </th>
@@ -81,7 +84,7 @@ defineExpose({
             </div>
           </td>
           <td
-            v-for="(columnObj, colIndex) in meta.columns"
+            v-for="(columnObj, colIndex) in fields"
             :key="rowIndex + columnObj.title"
             class="cell pointer nc-grid-cell"
             :class="{

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useEventBus } from '@vueuse/core'
-import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
+import type { ColumnType, FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed, onMounted, provide, watch } from '#imports'
-import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components'
 import useMetas from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({
@@ -14,6 +14,8 @@ const { getMeta, metas } = useMetas()
 
 const activeView = ref<GridType | FormType | KanbanType | GalleryType>()
 const el = ref<any>()
+const fields = ref<ColumnType[]>([])
+
 const meta = computed(() => metas.value?.[tabMeta?.id])
 
 onMounted(async () => {
@@ -27,6 +29,7 @@ provide(TabMetaInj, tabMeta)
 provide(ActiveViewInj, activeView)
 provide(IsLockedInj, false)
 provide(ReloadViewDataHookInj, reloadEventHook)
+provide(FieldsInj, fields)
 
 watch(
   () => tabMeta && tabMeta?.id,

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -1,4 +1,4 @@
-import type { FormType, GalleryType, GridType, TableType } from 'nocodb-sdk'
+import type { ColumnType, FormType, GalleryType, GridType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
 
@@ -10,8 +10,8 @@ export default function (
 ) {
   const fields = ref<
     {
-      order?: number
-      show?: number
+      order: number
+      show: number | boolean
       title: string
       fk_column_id?: string
     }[]
@@ -72,5 +72,30 @@ export default function (
     reloadData?.()
   }
 
-  return { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, saveOrUpdate }
+  const metaColumnById = computed(() => {
+    return meta?.value?.columns?.reduce<Record<string, ColumnType>>((o: Record<string, any>, c: any) => {
+      return {
+        ...o,
+        [c.id]: c,
+      }
+    }, {})
+  })
+
+  const sortedAndFilteredFields = computed<ColumnType[]>(() => {
+    return (fields?.value
+      ?.filter((c) => c.show)
+      ?.sort((c1, c2) => c1.order - c2.order)
+      ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
+  })
+
+  return {
+    fields,
+    loadViewColumns,
+    filteredFieldList,
+    filterQuery,
+    showAll,
+    hideAll,
+    saveOrUpdate,
+    sortedAndFilteredFields,
+  }
 }