feat: show count in badge for filter, sort and fields button

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

packages/nc-gui/assets/style.scss

@@ -86,6 +86,11 @@ a {
   @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
 }
 
+// badge with count
+.nc-count-badge {
+  @apply absolute flex items-center top-[-6px] right-[-6px] px-1 min-w-[14px] h-[14px] rounded-full bg-primary bg-opacity-100 text-white !text-[9px] !z-21;
+}
+
 // for highlighting toolbar menu item
 .nc-active-btn > .ant-btn {
   @apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20);

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -71,13 +71,15 @@ useMenuCloseOnEsc(open)
 
 <template>
   <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
-    <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
+    <div :class="{ 'nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
           <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />
+
+          <span class="nc-count-badge" v-if="filtersLength">{{ filtersLength }}</span>
         </div>
       </a-button>
     </div>

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

@@ -66,7 +66,7 @@ watch(
   { immediate: true },
 )
 
-const isAnyFieldHidden = computed(() => filteredFieldList.value?.some((field) => !field.show))
+const numberOfHiddenFields = computed(() => filteredFieldList.value?.filter((field) => !field.show)?.length)
 
 const onMove = (_event: { moved: { newIndex: number } }) => {
   // todo : sync with server
@@ -138,7 +138,7 @@ useMenuCloseOnEsc(open)
 
 <template>
   <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
-    <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
+    <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <MdiEyeOffOutline />
@@ -147,6 +147,8 @@ useMenuCloseOnEsc(open)
           <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
+
+          <span class="nc-count-badge" v-if="numberOfHiddenFields">{{ numberOfHiddenFields }}</span>
         </div>
       </a-button>
     </div>
@@ -238,4 +240,5 @@ useMenuCloseOnEsc(open)
 :deep(.ant-checkbox) {
   @apply top-auto;
 }
+
 </style>

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -63,6 +63,9 @@ useMenuCloseOnEsc(open)
           <!-- Sort -->
           <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
           <MdiMenuDown class="text-grey" />
+
+
+          <span class="nc-count-badge" v-if="sorts?.length">{{ sorts.length }}</span>
         </div>
       </a-button>
     </div>