feat(gui-v2): show badge if atleast one field hidden

- replace vuetify badge

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

packages/nc-gui-v2/assets/style-v2.scss

@@ -92,3 +92,7 @@ html {
     @apply z-1 text-xl p-1 text-gray-500;
   }
 }
+
+.nc-badge {
+  @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-['']);
+}

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
+import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import { useNuxtApp } from '#app'
 import { inject, useViewFilters } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'

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

@@ -19,12 +19,6 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 const isLocked = inject(IsLockedInj)
 const rootFields = inject(FieldsInj)
 
-const isAnyFieldHidden = computed(() => {
-  return false
-  // todo: implement
-  // return meta?.fields?.some(field => field.hidden)
-})
-
 const { $e } = useNuxtApp()
 
 const {
@@ -57,7 +51,11 @@ watch(
   { immediate: true },
 )
 
-const onMove = (event: unknown) => {
+const isAnyFieldHidden = computed(() => {
+  return fields?.value?.some((f) => !(!showSystemFields && f.system) && !f.show)
+})
+
+const onMove = (event: { moved: { newIndex: number } }) => {
   // todo : sync with server
   if (!fields?.value) return
 
@@ -79,28 +77,26 @@ const onMove = (event: unknown) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
-        <div class="flex align-center gap-1">
-          <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-          <MdiEyeIcon class="text-grey"></MdiEyeIcon>
-          <!-- Fields -->
-          <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
-          <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
-        </div>
-      </a-button>
-    </v-badge>
+    <a-button
+      v-t="['c:fields']"
+      class="nc-fields-menu-btn nc-toolbar-btn text-xs"
+      :class="{ 'nc-badge': isAnyFieldHidden }"
+      :disabled="isLocked"
+      size="small"
+    >
+      <div class="flex align-center gap-1">
+        <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
+        <MdiEyeIcon class="text-grey"></MdiEyeIcon>
+        <!-- Fields -->
+        <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
+        <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
+      </div>
+    </a-button>
 
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
-
-        <div
-          class="p-1"
-          @click.stop>
-        <a-input
-          size="small"
-          v-model:value="filterQuery"
-          :placeholder="$t('placeholder.searchFields')"/>
+        <div class="p-1" @click.stop>
+          <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
         <div class="nc-fields-list py-1">
           <Draggable :list="fields" @change="onMove($event)">
@@ -141,7 +137,7 @@ const onMove = (event: unknown) => {
 :deep(.ant-checkbox-inner) {
   @apply transform scale-60;
 }
-:deep(::placeholder){
-  @apply !text-xs
+:deep(::placeholder) {
+  @apply !text-xs;
 }
 </style>

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

@@ -16,6 +16,7 @@ export function useViewColumns(
       show: number | boolean
       title: string
       fk_column_id?: string
+      system?: boolean
     }[]
   >()
 

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

@@ -109,7 +109,7 @@ export function useViewFilters(
       logical_op: 'and',
     })
     const index = filters.value.length - 1
-   await saveOrUpdate(filters.value[index], index)
+    await saveOrUpdate(filters.value[index], index)
   }
 
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }