diff --git a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx index 3a6c9013..03c0d5e5 100644 --- 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 index 36ffb628..1fcc3704 100644 --- 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 index d0900d08..562a8740 100644 --- 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( { if (selected === selectedOption?.value) { diff --git a/src/components/sectionList/filters/CategoryComboFilter.tsx b/src/components/sectionList/filters/CategoryComboFilter.tsx new file mode 100644 index 00000000..11f797c1 --- /dev/null +++ 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 ( +
+ setFilter(selected)} + /> +
+ ) +} diff --git a/src/components/sectionList/filters/Filters.module.css b/src/components/sectionList/filters/Filters.module.css index 6363b729..30c8f7f8 100644 --- 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 index f2aa78e2..226c6246 100644 --- 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 = () => { + } error={error}