feat(small): show the number of active filters on Filter button

Author: dziraf

src/frontend/components/app/action-header/action-header.tsx

@@ -41,7 +41,7 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
   const location = useLocation()
   const actionResponseHandler = useActionResponseHandler(actionPerformed)
   const modalFunctions = useModal()
-  const { toggleFilter } = useFilterDrawer()
+  const { toggleFilter, filtersCount } = useFilterDrawer()
 
   if (action.hideActionHeader) {
     return null
@@ -74,8 +74,10 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
   })
 
   if (typeof isFilterButtonVisible === 'function' || isFilterButtonVisible) {
+    const filterTranslationKey = filtersCount > 0 ? 'filterActive' : 'filter'
+
     actionButtons.push({
-      label: translateButton('filter', resource.id),
+      label: translateButton(filterTranslationKey, resource.id, { count: filtersCount }),
       onClick: toggleFilter,
       icon: 'Filter',
       'data-css': getResourceElementCss(resource.id, 'filter-button'),

src/frontend/hooks/use-filter-drawer.tsx

@@ -6,7 +6,7 @@ import { useQueryParams } from './use-query-params.js'
 
 export const useFilterDrawer = () => {
   const [filtersCount, setFiltersCount] = useState(0)
-  const dispach = useDispatch()
+  const dispatch = useDispatch()
   const isVisible = useSelector((state: ReduxState) => state.filterDrawer.isVisible)
 
   const { showFilters, filters = {} } = useQueryParams()
@@ -17,20 +17,20 @@ export const useFilterDrawer = () => {
 
   useEffect(() => {
     if (showFilters) {
-      dispach(showFilterDrawer())
+      dispatch(showFilterDrawer())
     }
   }, [showFilters])
 
   const toggleFilter = () => {
-    dispach(isVisible ? hideFilterDrawer() : showFilterDrawer())
+    dispatch(isVisible ? hideFilterDrawer() : showFilterDrawer())
   }
 
   const open = () => {
-    dispach(showFilterDrawer())
+    dispatch(showFilterDrawer())
   }
 
   const close = () => {
-    dispach(hideFilterDrawer())
+    dispatch(hideFilterDrawer())
   }
 
   return {

src/locale/de/translation.json

@@ -11,6 +11,7 @@
     "save": "Speichern",
     "addNewItem": "Neuen Eintrag hinzufügen",
     "filter": "Filter",
+    "filterActive": "Filter ({{count}})",
     "applyChanges": "Änderungen übernehmen",
     "resetFilter": "Zurücksetzen",
     "confirmRemovalMany": "Bestätigen Sie das Löschen des Eintrag",

src/locale/en/translation.json

@@ -11,6 +11,7 @@
     "save": "Save",
     "addNewItem": "Add new item",
     "filter": "Filter",
+    "filterActive": "Filter ({{count}})",
     "applyChanges": "Apply changes",
     "resetFilter": "Reset",
     "confirmRemovalMany": "Confirm the removal of {{count}} record",
@@ -118,7 +119,6 @@
     "initialKey": "Key-{{number}}",
     "keyInUse": "Object keys must be unique",
     "keyValuePropertyDefaultDescription": "All values are stored as text. Keys must be unique, duplicate keys will not be saved.",
-
     "pageNotFound_title": "Page not found",
     "pageNotFound_subtitle": "Page <strong>\"{{pageName}}\"</strong> does not exist",
     "componentNotFound_title": "No component specified",

src/locale/es/translation.json

@@ -11,6 +11,7 @@
     "save": "Guardar",
     "addNewItem": "Agregar nuevo elemento",
     "filter": "Filtrar",
+    "filterActive": "Filtrar ({{count}})",
     "applyChanges": "Aplicar cambios",
     "resetFilter": "Reiniciar",
     "confirmRemovalMany": "Confirmar la eliminación de {{count}} registro",

src/locale/it/translation.json

@@ -11,6 +11,7 @@
     "save": "Salva",
     "addNewItem": "Aggiungi nuovo elemento",
     "filter": "Filtro",
+    "filterActive": "Filtro ({{count}})",
     "applyChanges": "Applica modifiche",
     "resetFilter": "Resetta filtro",
     "confirmRemovalMany": "Conferma la rimozione di  {{count}} elementi",

src/locale/ja/translation.json

@@ -11,6 +11,7 @@
     "save": "保存",
     "addNewItem": "新しいアイテムを追加",
     "filter": "フィルタ",
+    "filterActive": "フィルタ ({{count}})",
     "applyChanges": "変更を適用",
     "resetFilter": "リセット",
     "confirmRemovalMany": "{{count}} 件のレコードを削除しますか",

src/locale/pl/translation.json

@@ -10,7 +10,8 @@
   "buttons": {
     "save": "Zapisz",
     "addNewItem": "Nowy",
-    "filter": "Filtr",
+    "filter": "Filtry",
+    "filterActive": "Filtry ({{count}})",
     "applyChanges": "Zastosuj zmiany",
     "resetFilter": "Wyczyść",
     "confirmRemovalMany": "Potwierdź usunięcie {{count}} pozycji",

src/locale/pt-BR/translation.json

@@ -11,6 +11,7 @@
     "save": "Salvar",
     "addNewItem": "Adicionar Novo Item",
     "filter": "Filtrar",
+    "filterActive": "Filtrar ({{count}})",
     "applyChanges": "Aplicar mudanças",
     "resetFilter": "Redefinir",
     "confirmRemovalMany": "Confirma a remoção de {{count}} registro",

src/locale/ua/translation.json

@@ -11,6 +11,7 @@
     "save": "Зберегти",
     "addNewItem": "Додати новий елемент",
     "filter": "Фільтр",
+    "filterActive": "Фільтр ({{count}})",
     "applyChanges": "Застосувати зміни",
     "resetFilter": "Очистити фільтри",
     "confirmRemovalMany": "Підтвердити видалення {{count}} запису",