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

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

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { TableType } from 'nocodb-sdk'
-import type { ComputedRef } from 'vue'
 import { computed, inject } from 'vue'
 import Draggable from 'vuedraggable'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
@@ -39,8 +37,8 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-  sortedFields,
-} = useViewColumns(activeView, meta as ComputedRef<TableType>, false, () => reloadDataHook?.trigger())
+  // sortedFields,
+} = useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
 
 watch(
   () => (activeView?.value as any)?.id,
@@ -61,17 +59,20 @@ watch(
 
 const onMove = (event: unknown) => {
   // todo : sync with server
-  // if (!sortedFields?.value) return
-  // if (sortedFields?.value.length - 1 === event.moved.newIndex) {
-  //   sortedFields.value[event.moved.newIndex].order = sortedFields.value[event.moved.newIndex - 1].order + 1
-  // } else if (event.moved.newIndex === 0) {
-  //   sortedFields.value[event.moved.newIndex].order = sortedFields.value[1].order / 2
-  // } else {
-  //   sortedFields.value[event.moved.newIndex].order =
-  //     (sortedFields?.value[event.moved.newIndex - 1].order + sortedFields?.value[event.moved.newIndex + 1].order) / 2
-  //   // );
-  // }
-  // saveOrUpdate(sortedFields[event.moved.newIndex], event.moved.newIndex);
+  if (!fields?.value) return
+
+  if (fields.value.length < 2) return
+
+  if (fields?.value.length - 1 === event.moved.newIndex) {
+    fields.value[event.moved.newIndex].order = (fields.value[event.moved.newIndex - 1].order || 1) + 1
+  } else if (event.moved.newIndex === 0) {
+    fields.value[event.moved.newIndex].order = (fields?.value[1].order || 1) / 2
+  } else {
+    fields.value[event.moved.newIndex].order =
+      ((fields?.value[event.moved.newIndex - 1].order || 1) + (fields?.value[event.moved.newIndex + 1].order || 1)) / 2
+    // );
+  }
+  saveOrUpdate(fields.value[event.moved.newIndex], event.moved.newIndex)
   $e('a:fields:reorder')
 }
 </script>
@@ -93,9 +94,9 @@ const onMove = (event: unknown) => {
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
         <div class="nc-fields-list py-1">
-          <Draggable :list="sortedFields" @change="onMove($event)">
+          <Draggable :list="fields" @change="onMove($event)">
             <template #item="{ element: field }">
-              <div :key="field.id" class="px-2 py-1 flex" @click.stop>
+              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
                   <span class="text-xs">{{ field.title }}</span>
                 </a-checkbox>

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

@@ -42,6 +42,7 @@ export function useViewColumns(
           fk_column_id: c.id,
           ...(fieldById[c.id as string] ? fieldById[c.id as string] : {}),
           order: (fieldById[c.id as string] && fieldById[c.id as string].order) || order++,
+          system: isSystemColumn(fieldById[c.fk_model_id as string]?.type as ColumnType),
         }))
         .sort((a, b) => a.order - b.order)
     } else if (isPublic) {
@@ -125,10 +126,6 @@ export function useViewColumns(
       ?.sort((c1, c2) => c1.order - c2.order)
       ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
   })
-  const sortedFields = computed<ColumnType[]>(() => {
-    return (fields?.value?.sort((c1, c2) => c1.order - c2.order)?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) ||
-      []) as ColumnType[]
-  })
 
   // reload view columns when table meta changes
   watch(meta, () => loadViewColumns())
@@ -143,6 +140,5 @@ export function useViewColumns(
     saveOrUpdate,
     sortedAndFilteredFields,
     showSystemFields,
-    sortedFields,
   }
 }