From 044717b44331c12b7fdaa79fd16cc1e4d6bab7bd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 29 Nov 2022 16:31:59 +0530
Subject: [PATCH] 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                          | 5 +++++
 .../components/smartsheet/toolbar/ColumnFilterMenu.vue     | 4 +++-
 .../nc-gui/components/smartsheet/toolbar/FieldsMenu.vue    | 7 +++++--
 .../nc-gui/components/smartsheet/toolbar/SortListMenu.vue  | 3 +++
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 1a65ac5e13..87c00840fe 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/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);
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 18c0d42120..293037748e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 2dc8f30662..686b0dd448 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index fab766f455..a269c2860f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/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>