diff --git a/src/webapp/components/date-picker/DateRangePicker.tsx b/src/webapp/components/date-picker/DateRangePicker.tsx index 3af78f6d..f5267df7 100644 --- a/src/webapp/components/date-picker/DateRangePicker.tsx +++ b/src/webapp/components/date-picker/DateRangePicker.tsx @@ -11,13 +11,14 @@ import { Button } from "../button/Button"; import styled from "styled-components"; type DateRangePickerProps = { + label?: string; value: string[]; onChange: (dates: string[]) => void; placeholder?: string; }; export const DateRangePicker: React.FC = React.memo( - ({ value, placeholder = "", onChange }) => { + ({ label = "", value, placeholder = "", onChange }) => { const [anchorEl, setAnchorEl] = useState(null); const [startDate, setStartDate] = useState( moment(value[0]).startOf("month").toDate() @@ -72,6 +73,7 @@ export const DateRangePicker: React.FC = React.memo( {}} onClick={handleOpen} inputProps={{ diff --git a/src/webapp/pages/dashboard/DashboardPage.tsx b/src/webapp/pages/dashboard/DashboardPage.tsx index 1e474af3..2eb3ca3e 100644 --- a/src/webapp/pages/dashboard/DashboardPage.tsx +++ b/src/webapp/pages/dashboard/DashboardPage.tsx @@ -15,6 +15,7 @@ import { RouteName, useRoutes } from "../../hooks/useRoutes"; import { useAlertsActiveVerifiedFilters } from "./useAlertsActiveVerifiedFilters"; import { MapSection } from "./map/MapSection"; import { Selector } from "../../components/selector/Selector"; +import { DateRangePicker } from "../../components/date-picker/DateRangePicker"; export const DashboardPage: React.FC = React.memo(() => { const { @@ -104,6 +105,14 @@ export const DashboardPage: React.FC = React.memo(() => { /> ) )} + + setMultiSelectFilters({ ...multiSelectFilters, duration: dates }) + } + placeholder={i18n.t("Select duration")} + label={i18n.t("Duration")} + /> {diseasesTotal && diff --git a/src/webapp/pages/dashboard/map/useMap.ts b/src/webapp/pages/dashboard/map/useMap.ts index 21d1120b..6bd3d1b2 100644 --- a/src/webapp/pages/dashboard/map/useMap.ts +++ b/src/webapp/pages/dashboard/map/useMap.ts @@ -67,66 +67,57 @@ export function useMap(params: { }); useEffect(() => { - if ( + const isDashboardMapAndThereAreFilters = mapKey === "dashboard" && mapConfigState.kind === "loaded" && allOrgUnitsIds.length && - (!!singleSelectFilters || !!multiSelectFilters) - ) { + (!!singleSelectFilters || !!multiSelectFilters); + + if (isDashboardMapAndThereAreFilters) { const mapProgramIndicator = getFilteredActiveVerifiedMapProgramIndicator( mapProgramIndicators, singleSelectFilters ); - if (mapProgramIndicator?.id === mapConfigState.data.programIndicatorId) { - if ( - multiSelectFilters && - multiSelectFilters?.province?.length && - orgUnitsHaveChanged(multiSelectFilters?.province, mapConfigState.data.orgUnits) - ) { - const provinceFilterValues = multiSelectFilters.province; - setMapConfigState(prevMapConfigState => { - if (prevMapConfigState.kind === "loaded") { - return { - kind: "loaded", - data: { - ...prevMapConfigState.data, - orgUnits: provinceFilterValues, - }, - }; - } else { - return prevMapConfigState; - } - }); - return; - } else if ( - !multiSelectFilters?.province?.length && - orgUnitsHaveChanged(allOrgUnitsIds, mapConfigState.data.orgUnits) - ) { - setMapConfigState(prevMapConfigState => { - if (prevMapConfigState.kind === "loaded") { - return { - kind: "loaded", - data: { - ...prevMapConfigState.data, - orgUnits: allOrgUnitsIds, - }, - }; - } else { - return prevMapConfigState; - } - }); - return; - } - return; - } - if (!mapProgramIndicator) { setMapConfigState({ kind: "error", message: i18n.t("The map with these filters could not be found."), }); return; + } + + const newMapIndicator = + mapProgramIndicator?.id !== mapConfigState.data.programIndicatorId + ? mapProgramIndicator + : null; + + const newOrgUnits = + multiSelectFilters && + multiSelectFilters?.province?.length && + orgUnitsHaveChanged(multiSelectFilters?.province, mapConfigState.data.orgUnits) + ? multiSelectFilters.province + : !multiSelectFilters?.province?.length && + orgUnitsHaveChanged(allOrgUnitsIds, mapConfigState.data.orgUnits) + ? allOrgUnitsIds + : null; + + const newStartDate = + multiSelectFilters?.duration?.length && + multiSelectFilters.duration[0] && + multiSelectFilters.duration[0] !== mapConfigState.data.startDate + ? multiSelectFilters.duration[0] + : null; + + const newEndDate = + multiSelectFilters?.duration?.length && + multiSelectFilters.duration[1] && + multiSelectFilters.duration[1] !== mapConfigState.data.endDate + ? multiSelectFilters.duration[1] + : null; + + if (!newMapIndicator && !newOrgUnits && !newStartDate && !newEndDate) { + return; } else { setMapConfigState(prevMapConfigState => { if (prevMapConfigState.kind === "loaded") { @@ -134,12 +125,19 @@ export function useMap(params: { kind: "loaded", data: { ...prevMapConfigState.data, - programIndicatorId: mapProgramIndicator.id, - programIndicatorName: mapProgramIndicator.name, - orgUnits: - multiSelectFilters && multiSelectFilters?.province?.length - ? multiSelectFilters?.province - : allOrgUnitsIds, + programIndicatorId: newMapIndicator + ? newMapIndicator.id + : prevMapConfigState.data.programIndicatorId, + programIndicatorName: newMapIndicator + ? newMapIndicator.name + : prevMapConfigState.data.programIndicatorName, + orgUnits: newOrgUnits + ? newOrgUnits + : prevMapConfigState.data.orgUnits, + startDate: newStartDate + ? newStartDate + : prevMapConfigState.data.startDate, + endDate: newEndDate ? newEndDate : prevMapConfigState.data.endDate, }, }; } else { diff --git a/src/webapp/pages/dashboard/useAlertsActiveVerifiedFilters.ts b/src/webapp/pages/dashboard/useAlertsActiveVerifiedFilters.ts index ce0d112c..36d69483 100644 --- a/src/webapp/pages/dashboard/useAlertsActiveVerifiedFilters.ts +++ b/src/webapp/pages/dashboard/useAlertsActiveVerifiedFilters.ts @@ -23,6 +23,7 @@ export function useAlertsActiveVerifiedFilters() { }); const [multiSelectFilters, setMultiSelectFilters] = useState>({ province: [], + duration: [], }); const [provincesOptions, setProvincesOptions] = useState([]); const [filtersConfig, setFiltersConfig] = useState([]);