Add Duration filter in dashboard map

EyeSeeTea · Sep 12, 2024 · 4ad7e83 · 4ad7e83
1 parent 2768fce
commit 4ad7e83
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 53 deletions.
diff --git 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<DateRangePickerProps> = React.memo(
-    ({ value, placeholder = "", onChange }) => {
+    ({ label = "", value, placeholder = "", onChange }) => {
         const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
         const [startDate, setStartDate] = useState<Date | null>(
             moment(value[0]).startOf("month").toDate()
@@ -72,6 +73,7 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = React.memo(
                 <TextInput
                     id="date-range-picker"
                     value={`${value.length ? formatDuration(startDate, endDate) : placeholder}`}
+                    label={label}
                     onChange={() => {}}
                     onClick={handleOpen}
                     inputProps={{

diff --git 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(() => {
                             />
                         )
                     )}
+                    <DateRangePicker
+                        value={multiSelectFilters.duration || []}
+                        onChange={(dates: string[]) =>
+                            setMultiSelectFilters({ ...multiSelectFilters, duration: dates })
+                        }
+                        placeholder={i18n.t("Select duration")}
+                        label={i18n.t("Duration")}
+                    />
                 </Container>
                 <GridWrapper>
                     {diseasesTotal &&

diff --git a/src/webapp/pages/dashboard/map/useMap.ts b/src/webapp/pages/dashboard/map/useMap.ts
@@ -67,79 +67,77 @@ 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") {
                         return {
                             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
@@ -23,6 +23,7 @@ export function useAlertsActiveVerifiedFilters() {
     });
     const [multiSelectFilters, setMultiSelectFilters] = useState<Record<string, string[]>>({
         province: [],
+        duration: [],
     });
     const [provincesOptions, setProvincesOptions] = useState<Option[]>([]);
     const [filtersConfig, setFiltersConfig] = useState<FiltersConfig[]>([]);