From 5d2d788b060085efbe33d4857c4160ab7d219ac6 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Fri, 17 Jan 2025 15:49:29 +0100 Subject: [PATCH] feat: code cleanup filter --- .../common/Changelog/Changelog.constants.js | 11 ++++++++++ .../ChangelogFilter.types.js | 2 +- .../ChangelogFilterBar/ChangelogFilterBar.js | 21 +++++++++---------- .../ChangelogFilterBar/DropdownFilter.js | 11 +++++----- .../common/hooks/useChangelogData.js | 4 ++-- 5 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.constants.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.constants.js index 54f69c727f..59dbb556d6 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.constants.js +++ b/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.constants.js @@ -22,6 +22,17 @@ export const COLUMN_TO_SORT_BY = Object.freeze({ DATA_ITEM: 'change', }); +export const FIELD_TYPES = Object.freeze({ + OCCURRED_AT: 'occurredAt', + SCHEDULED_AT: 'scheduledAt', + GEOMETRY: 'geometry', +}); + +export const FILTER_FIELD = Object.freeze({ + FIELD: 'field', + DATA_ELEMENT: 'dataElement', +}); + export const DEFAULT_PAGE_SIZE = 10; export const QUERY_KEYS_BY_ENTITY_TYPE = Object.freeze({ diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilter.types.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilter.types.js index a3c3d48fe2..6b829829dc 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilter.types.js +++ b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilter.types.js @@ -1,5 +1,5 @@ // @flow -export type FilterValueType = 'SHOW_ALL' | { id: string, name: string }; +export type FilterValueType = { id: string, name: string } | null; export type DataItemDefinition = { id: string, diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilterBar.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilterBar.js index fa9a8a0a25..c824f12dfb 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilterBar.js +++ b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilterBar.js @@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles'; import { spacers } from '@dhis2/ui'; import type { ChangelogFilterProps, FilterValueType } from './ChangelogFilter.types'; import { DropdownFilter } from './DropdownFilter'; +import { FIELD_TYPES, FILTER_FIELD } from '../Changelog/Changelog.constants'; const styles = { container: { @@ -12,10 +13,9 @@ const styles = { }, }; -const getFilterColumn = (id: string) => - (['occurredAt', 'scheduledAt', 'geometry'].includes(id) - ? 'field' - : 'dataElement'); +const getFilterField = (id: string) => + (Object.values(FIELD_TYPES).includes(id) ? FILTER_FIELD.FIELD : FILTER_FIELD.DATA_ELEMENT); + const ChangelogFilterBarPlain = ({ classes, @@ -25,7 +25,7 @@ const ChangelogFilterBarPlain = ({ setAttributeToFilterBy, dataItemDefinitions, }: ChangelogFilterProps) => { - const [openMenu, setOpenMenu] = useState(null); + const [openMenu, setOpenMenu] = useState (null); const toggleMenu = useCallback((menuName: string) => { setOpenMenu(prev => (prev === menuName ? null : menuName)); @@ -33,14 +33,13 @@ const ChangelogFilterBarPlain = ({ const handleItemSelected = useCallback( (value: FilterValueType) => { - setOpenMenu(null); - if (value === 'SHOW_ALL') { - setFilterValue('SHOW_ALL'); + if (value === null) { + setFilterValue(null); setAttributeToFilterBy(null); } else { - const column = getFilterColumn(value.id); + const filterField = getFilterField(value.id); setFilterValue(value); - setAttributeToFilterBy(column); + setAttributeToFilterBy(filterField); } }, [setFilterValue, setAttributeToFilterBy], @@ -55,7 +54,7 @@ const ChangelogFilterBarPlain = ({ [dataItemDefinitions], ); - const selectedFilterValue = attributeToFilterBy ? filterValue : 'SHOW_ALL'; + const selectedFilterValue = attributeToFilterBy ? filterValue : null; return (
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/DropdownFilter.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/DropdownFilter.js index cbfa0262d6..63d710cab1 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/DropdownFilter.js +++ b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/DropdownFilter.js @@ -40,13 +40,12 @@ const DropdownFilterPlain = ({ const isMenuOpen = openMenuName === filterColumn; const handleShowAll = useCallback(() => { - onItemSelected('SHOW_ALL', filterColumn); + onItemSelected(null, filterColumn); }, [onItemSelected, filterColumn]); - const filterValue = - selectedFilterValue !== 'SHOW_ALL' && typeof selectedFilterValue === 'object' - ? selectedFilterValue.name - : i18n.t('Show all'); + const filterValue = selectedFilterValue + ? selectedFilterValue.name + : i18n.t('Show all'); return ( diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js index 6731a2765e..d74eea9ba2 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js +++ b/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js @@ -21,7 +21,7 @@ export const useChangelogData = ({ entityId, entityType, programId }: Props) => const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.DEFAULT); const [attributeToFilterBy, setAttributeToFilterBy] = useState(null); - const [filterValue, setFilterValue] = useState('SHOW_ALL'); + const [filterValue, setFilterValue] = useState(null); const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE); @@ -32,7 +32,7 @@ export const useChangelogData = ({ entityId, entityType, programId }: Props) => }; const filterParam = - filterValue !== 'SHOW_ALL' && attributeToFilterBy + filterValue === filterValue && attributeToFilterBy ? `${attributeToFilterBy}:eq:${filterValue.id}` : undefined;