feat(gui-v2): hide/show system fields

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

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

@@ -5,8 +5,7 @@ import useViewColumns from '~/composables/useViewColumns'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiEyeIcon from '~icons/mdi/eye-off-outline'
 
-const { showSystemFields, fieldsOrder, coverImageField, modelValue } = defineProps<{
-  showSystemFields?: boolean
+const { fieldsOrder, coverImageField, modelValue } = defineProps<{
   coverImageField?: string
   fieldsOrder?: string[]
   modelValue?: Record<string, boolean>
@@ -24,8 +23,17 @@ const isAnyFieldHidden = computed(() => {
   // return meta?.fields?.some(field => field.hidden)
 })
 
-const { sortedAndFilteredFields, fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, saveOrUpdate } =
-  useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
+const {
+  showSystemFields,
+  sortedAndFilteredFields,
+  fields,
+  loadViewColumns,
+  filteredFieldList,
+  filterQuery,
+  showAll,
+  hideAll,
+  saveOrUpdate,
+} = useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
 
 watch(
   () => activeView?.value?.id,
@@ -356,16 +364,20 @@ export default {
       </div>
       <v-divider class="my-2" />
 
-      <!--      <v-list-item v-if="!isPublic" dense>
-        <v-checkbox v-model="showSystemFieldsLoc" class="mt-0 pt-0" dense hide-details @click.stop>
+            <v-list-item v-if="!isPublic" dense>
+<!--
+show_system_fields
+<v-checkbox v-model="showSystemFields" class="mt-0 pt-0" dense hide-details @click.stop>
           <template #label>
-            <span class="caption">
+            <span class="caption text-sm">
               &lt;!&ndash; Show System Fields &ndash;&gt;
               {{ $t('activity.showSystemFields') }}
             </span>
           </template>
-        </v-checkbox>
-      </v-list-item> -->
+        </v-checkbox>-->
+              <input type="checkbox" v-model="showSystemFields" :id="`${activeView?.id}-show-system-fields`"/>
+              <label :for="`${activeView.id}-show-system-fields`" class="caption text-sm ml-2">{{ $t('activity.showSystemFields') }}</label>
+      </v-list-item>
       <v-list-item dense class="mt-2 list-btn mb-3">
         <v-btn small class="elevation-0 grey--text text-sm text-capitalize" @click.stop="showAll">
           <!-- Show All -->

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

@@ -1,3 +1,4 @@
+import { isSystemColumn } from "nocodb-sdk";
 import type { ColumnType, FormType, GalleryType, GridType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
@@ -18,11 +19,7 @@ export default function (
   >()
 
   const filterQuery = ref('')
-  const filteredFieldList = computed(() => {
-    return fields.value?.filter((field) => {
-      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value)
-    })
-  })
+
 
   const { $api } = useNuxtApp()
 
@@ -81,13 +78,52 @@ export default function (
     }, {})
   })
 
+  const showSystemFields = computed({
+    get() {
+      // todo: update swagger
+      return (view?.value as any)?.show_system_fields || false
+    },
+    set(v) {
+      if (view?.value) {
+        $api.dbView.update(
+          view?.value?.id as string,
+          {
+            // todo: update swagger
+            show_system_fields: v,
+          } as any,
+        )
+        ;(view.value as any).show_system_fields = v
+      }
+    },
+  })
+
+  const filteredFieldList = computed(() => {
+    return fields.value?.filter((field) => {
+
+      // hide system columns if not enabled
+      if(!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id as string])) {
+        return false
+      }
+
+      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value)
+    })
+  })
+
+
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
     return (fields?.value
-      ?.filter((c) => c.show)
+      ?.filter((c) => {
+        // hide system columns if not enabled
+        if(!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string])) {
+          return false
+        }
+        return c.show
+      })
       ?.sort((c1, c2) => c1.order - c2.order)
       ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
   })
 
+
   return {
     fields,
     loadViewColumns,
@@ -97,5 +133,6 @@ export default function (
     hideAll,
     saveOrUpdate,
     sortedAndFilteredFields,
+    showSystemFields,
   }
 }