feat(list): add categoryCombofilter

dhis2 · Oct 24, 2023 · 80b93ee · 80b93ee
1 parent 4cf95ce
commit 80b93ee
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 0 deletions.
diff --git a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
@@ -55,6 +55,7 @@ interface SearchableSingleSelectPropTypes {
     onRetryClick: () => void
     options: Option[]
     placeholder: string
+    prefix?: string
     showEndLoader: boolean
     loading: boolean
     selected?: string
@@ -70,6 +71,7 @@ export const SearchableSingleSelect = ({
     error,
     loading,
     placeholder,
+    prefix,
     onBlur,
     onChange,
     onEndReached,
@@ -126,6 +128,7 @@ export const SearchableSingleSelect = ({
             error={invalid}
             onChange={onChange}
             placeholder={placeholder}
+            prefix={prefix}
             onBlur={onBlur}
             onFocus={onFocus}
         >

diff --git a/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx b/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx
@@ -15,6 +15,7 @@ export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
         onChange,
         invalid,
         placeholder = i18n.t('Category combo'),
+        prefix,
         required,
         selected,
         showAllOption,
@@ -31,6 +32,7 @@ export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
             useInitialOptionQuery={useInitialOptionQuery}
             useOptionsQuery={useOptionsQuery}
             placeholder={placeholder}
+            prefix={prefix}
             showAllOption={showAllOption}
             onChange={onChange}
             selected={selected}

diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx
@@ -61,6 +61,7 @@ export interface ModelSingleSelectProps {
     required?: boolean
     invalid?: boolean
     placeholder?: string
+    prefix?: string
     selected?: string
     showAllOption?: boolean
     onBlur?: () => void
@@ -74,6 +75,7 @@ export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
         onChange,
         invalid,
         placeholder = '',
+        prefix,
         required,
         selected,
         showAllOption,
@@ -154,6 +156,7 @@ export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
         <SearchableSingleSelect
             invalid={invalid}
             placeholder={placeholder}
+            prefix={prefix}
             showAllOption={showAllOption}
             onChange={({ selected }) => {
                 if (selected === selectedOption?.value) {

diff --git a/src/components/sectionList/filters/CategoryComboFilter.tsx b/src/components/sectionList/filters/CategoryComboFilter.tsx
@@ -0,0 +1,19 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { CategoryComboSelect } from '../../metadataFormControls'
+import css from './Filters.module.css'
+import { useSectionListFilter } from './useSectionListFilter'
+
+export const CategoryComboFilter = () => {
+    const [filter, setFilter] = useSectionListFilter('categoryCombo')
+
+    return (
+        <div className={css.constantSelectionFilter}>
+            <CategoryComboSelect
+                prefix={i18n.t('Category combo')}
+                selected={filter}
+                onChange={({ selected }) => setFilter(selected)}
+            />
+        </div>
+    )
+}
diff --git a/src/components/sectionList/filters/Filters.module.css b/src/components/sectionList/filters/Filters.module.css
@@ -9,6 +9,7 @@
 /* make dense selection fields same height as text field*/
 .constantSelectionFilter [data-test='dhis2-uicore-select-input'] {
     max-height: 32px;
+    min-height: 32px;
 }
 
 .identifiableSelectionFilter {

diff --git a/src/pages/dataElements/List.tsx b/src/pages/dataElements/List.tsx
@@ -6,6 +6,7 @@ import {
     ValueTypeSelectionFilter,
     useQueryParamsForModelGist,
 } from '../../components'
+import { CategoryComboFilter } from '../../components/sectionList/filters/CategoryComboFilter'
 import { DataElementInDataSetFilter } from '../../components/sectionList/filters/DataElementInDataSetFilter'
 import { useModelListView } from '../../components/sectionList/listView'
 import { useSchemaFromHandle } from '../../lib/'
@@ -59,6 +60,9 @@ export const Component = () => {
             if (field === 'dataSetElements') {
                 return `dataSetElements.dataSet.id:eq:${value}`
             }
+            if (field === 'categoryCombo') {
+                return `categoryCombo.id:eq:${value}`
+            }
             return filter
         })
 
@@ -81,6 +85,7 @@ export const Component = () => {
                         <DomainTypeSelectionFilter />
                         <ValueTypeSelectionFilter />
                         <DataElementInDataSetFilter />
+                        <CategoryComboFilter />
                     </>
                 }
                 error={error}