fix: show different message when single filter

dhis2 · Dec 16, 2024 · c5eb94a · c5eb94a
1 parent 2dce45e
commit c5eb94a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/pages/view/SlideshowFiltersInfo.js b/src/pages/view/SlideshowFiltersInfo.js
@@ -46,20 +46,35 @@ export const SlideshowFiltersInfo = () => {
         return null
     }
 
+    let filterMessage = ''
+    let multipleFilters = true
+    if (filters.length === 1 && filters[0].values.length === 1) {
+        multipleFilters = false
+        filterMessage = i18n.t('{{name}} filter applied: {{filter}}', {
+            name: filters[0].name,
+            filter: filters[0].values[0].name,
+            namespaceSeparator: '>',
+        })
+    }
+
     return (
         <>
-            <button
-                ref={ref}
-                className={styles.filterButton}
-                onClick={() => setIsOpen(true)}
-            >
-                {i18n.t('{{count}} filters active', {
-                    count: totalFilterCount,
-                    defaultValue: '{{count}} filter active',
-                    defaultValue_plural: '{{count}} filters active',
-                })}
-            </button>
-            {isOpen && (
+            {!multipleFilters ? (
+                <span className={styles.singleFilterText}>{filterMessage}</span>
+            ) : (
+                <button
+                    ref={ref}
+                    className={styles.filterButton}
+                    onClick={() => setIsOpen(true)}
+                >
+                    {i18n.t('{{count}} filters active', {
+                        count: totalFilterCount,
+                        defaultValue: '{{count}} filter active',
+                        defaultValue_plural: '{{count}} filters active',
+                    })}
+                </button>
+            )}
+            {isOpen && multipleFilters && (
                 <Layer disablePortal onClick={() => setIsOpen(false)}>
                     <Popper
                         className={styles.popover}

diff --git a/src/pages/view/styles/SlideshowFiltersInfo.module.css b/src/pages/view/styles/SlideshowFiltersInfo.module.css
@@ -6,6 +6,13 @@
     background-color: #f4f6f8;
 }
 
+.singleFilterText {
+    padding: 4px;
+    inline-size: auto;
+    border-radius: 3px;
+    color: black;
+    background-color: #f4f6f8;
+}
 .popover {
     border: 1px solid var(--colors-grey400);
     border-radius: 4px;