feat(gui-v2): add fields show/hide option

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

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

@@ -13,3 +13,4 @@ export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const ValueInj: InjectionKey<any> = Symbol('value-injection')
 export const ActiveViewInj: InjectionKey<any> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
+export const ReloadViewDataInj: InjectionKey<any> = Symbol('reload-view-data-injection')

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { MetaInj } from '~/components'
+import { ActiveViewInj, MetaInj } from '~/components'
+import useViewColumns from '~/composables/useViewColumns'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiEyeIcon from '~icons/mdi/eye-off-outline'
 
@@ -12,7 +13,9 @@ const { showSystemFields, fieldsOrder, coverImageField, modelValue } = definePro
 }>()
 
 const meta = inject(MetaInj)
-const isLocked = false // inject(IsLockedInj)
+const isLocked = false
+
+const activeView = inject(ActiveViewInj)
 
 const isAnyFieldHidden = computed(() => {
   return false
@@ -20,6 +23,18 @@ const isAnyFieldHidden = computed(() => {
   // return meta?.fields?.some(field => field.hidden)
 })
 
+const { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, sync } = useViewColumns()
+
+watch(
+  () => activeView?.value?.id,
+  async (newVal, oldVal) => {
+    if (newVal !== oldVal && meta?.value) {
+      await loadViewColumns(meta, newVal)
+    }
+  },
+  { immediate: true },
+)
+
 /* import draggable from 'vuedraggable'
 import { getSystemColumnsIds } from 'nocodb-sdk'
 import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
@@ -281,8 +296,8 @@ export default {
 
 <template>
   <v-menu>
-    <template #activator="{ on }">
-      <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-on="on">
+    <template #activator="{ props }">
+      <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props">
         <v-btn
           v-t="['c:fields']"
           class="nc-fields-menu-btn px-2 nc-remove-border "
@@ -291,18 +306,70 @@ export default {
           small
           text
           :class="{
-            'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': isAnyFieldHidden,
+            'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
           }"
           v-on="on"
         >
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="mr-1 text-grey"></MdiEyeIcon>
           <!-- Fields -->
-          {{ $t('objects.fields') }}
+          <span class="text-sm text-capitalize">{{ $t('objects.fields') }}</span>
           <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
         </v-btn>
       </v-badge>
     </template>
+
+    <v-list density="compact" class="pt-0" min-width="280" @click.stop>
+      <div class="nc-fields-list py-1">
+        <!--        <Draggable v-model="fields" @start="drag = true" @end="drag = false" @change="onMove($event)"> -->
+        <v-list-item v-for="(field, i) in filteredFieldList" :key="field.id" dense>
+          <input
+            :id="`show-field-${field.id}`"
+            v-model="field.show"
+            type="checkbox"
+            class="mt-0 pt-0"
+            @click.stop
+            @change="sync(field, i)"
+          />
+          <!--                        @change="saveOrUpdate(field, i)"> -->
+          <!--            <template #label>
+                        &lt;!&ndash;                <v-icon small class="mr-1">
+                          {{ field.icon }}
+                        </v-icon> &ndash;&gt;
+                        <span class="caption">{{ field.title }}</span>
+                      </template> -->
+          <!--          </input> -->
+          <label :for="`show-field-${field.id}`" class="ml-2 text-sm">{{ field.title }}</label>
+          <v-spacer />
+
+          <!--          <v-icon small color="grey" :class="`align-self-center drag-icon nc-child-draggable-icon-${field}`"> mdi-drag </v-icon> -->
+        </v-list-item>
+        <!--        </Draggable> -->
+      </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>
+          <template #label>
+            <span class="caption">
+              &lt;!&ndash; Show System Fields &ndash;&gt;
+              {{ $t('activity.showSystemFields') }}
+            </span>
+          </template>
+        </v-checkbox>
+      </v-list-item> -->
+      <v-list-item dense class="mt-2 list-btn mb-3">
+        <v-btn small class="elevation-0 grey--text" @click.stop="showAll">
+          <!-- Show All -->
+          {{ $t('general.showAll') }}
+        </v-btn>
+        <v-btn small class="elevation-0 grey--text" @click.stop="hideAll">
+          <!-- Hide All -->
+          {{ $t('general.hideAll') }}
+        </v-btn>
+      </v-list-item>
+    </v-list>
+
     <!--
     <v-list dense class="pt-0" min-width="280" @click.stop>
       <template v-if="isGallery && _isUIAllowed('updateCoverImage')">

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

@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
-import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj } from '~/components'
+import {
+  ActiveViewInj,
+  ChangePageInj,
+  IsFormInj,
+  IsGridInj,
+  MetaInj,
+  PaginationDataInj,
+  ReloadViewDataInj
+} from "~/components";
 import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import useViewData from '~/composables/useViewData'
 
@@ -20,6 +28,7 @@ provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
+provide(ReloadViewDataInj, loadData)
 
 const selectCell = (row: number, col: number) => {
   selected.row = row
@@ -33,8 +42,8 @@ onKeyStroke(['Enter'], (e) => {
 })
 
 watch(
-  [meta, view],
-  async () => {
+  [() => meta?.value?.id, () => view?.value?.id],
+  async (n: any, o: any) => {
     if (meta?.value && view?.value) {
       await loadData()
     }

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

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-toolbar dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1" style="z-index: 7">
+  <v-toolbar dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
   </v-toolbar>
 </template>

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

@@ -0,0 +1,62 @@
+import type { TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useNuxtApp } from '#app'
+
+export default function () {
+  const fields = ref<
+    {
+      order?: number
+      show?: number
+      title: string
+      fk_column_id?: string
+    }[]
+  >()
+  let viewId: string
+
+  const filterQuery = ref('')
+  const filteredFieldList = computed(() => {
+    return fields.value?.filter((field) => {
+      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value)
+    })
+  })
+
+  const { $api } = useNuxtApp()
+
+  const loadViewColumns = async (meta: Ref<TableType>, _viewId: string, isPublic = false) => {
+    viewId = _viewId
+    let order = 1
+    if (viewId) {
+      const data = await $api.dbViewColumn.list(viewId)
+      const fieldById: Record<string, any> = data.reduce((o: Record<string, any>, f: any) => {
+        f.show = !!f.show
+        return {
+          ...o,
+          [f.fk_column_id as string]: f,
+        }
+      }, {})
+      fields.value = meta.value?.columns
+        ?.map((c) => ({
+          title: c.title,
+          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++,
+        }))
+        .sort((a, b) => a.order - b.order)
+    } else if (isPublic) {
+      fields.value = meta.value.columns as any
+    }
+  }
+
+  const showAll = () => {}
+  const hideAll = () => {}
+
+  const sync = async (field: any, index: number) => {
+    if (field.id) {
+      await $api.dbViewColumn.update(viewId, field.id, field)
+    } else {
+      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(viewId, field)) as any
+    }
+  }
+
+  return { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, sync }
+}