From 604f37738e456ef7d17ef0c9a040254891058d25 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 7 Aug 2024 15:28:50 +0200
Subject: [PATCH] fix: add selection count badge

---
 src/components/NeFilter.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/NeFilter.vue b/src/components/NeFilter.vue
index 744183c59..8661b4fec 100644
--- a/src/components/NeFilter.vue
+++ b/src/components/NeFilter.vue
@@ -10,6 +10,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { isEqual } from 'lodash-es'
 import { v4 as uuid } from '@lukeed/uuid'
+import { NeBadge } from '@nethesis/vue-components'
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type FilterKind = 'radio' | 'checkbox'
@@ -33,7 +34,9 @@ export interface Props {
   label: string
   options: FilterOption[]
   kind: FilterKind
+  allLabel: string
   openMenuAriaLabel: string
+  showSelectionCount?: boolean
   alignToRight?: boolean
   size?: ButtonSize
   disabled?: boolean
@@ -41,6 +44,7 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  showSelectionCount: true,
   alignToRight: true,
   size: 'md',
   disabled: false,
@@ -59,6 +63,12 @@ const buttonRef = ref()
 
 const componentId = computed(() => (props.id ? props.id : uuid()))
 
+const badgeText = computed(() =>
+  checkboxModel.value.length == props.options.length
+    ? props.allLabel
+    : checkboxModel.value.length.toString()
+)
+
 watch(
   () => props.alignToRight,
   () => {
@@ -134,6 +144,12 @@ function calculatePosition() {
           <div class="flex items-center justify-center">
             <slot v-if="$slots.label" name="label"></slot>
             <span v-else>{{ label }}</span>
+            <NeBadge
+              v-if="kind === 'checkbox' && showSelectionCount"
+              :text="badgeText"
+              size="xs"
+              class="ml-2"
+            />
             <font-awesome-icon
               :icon="['fas', 'chevron-down']"
               class="ml-2 h-3 w-3"