Fix responsive in Dashboard, fix DateRangePicker component, fix reset…

… dates and reset also map data
EyeSeeTea · Oct 2, 2024 · 66217bb · 66217bb
1 parent 0543d71
commit 66217bb
Show file tree

Hide file tree

Showing 15 changed files with 212 additions and 212 deletions.
diff --git a/src/data/repositories/PerformanceOverviewD2Repository.ts b/src/data/repositories/PerformanceOverviewD2Repository.ts
@@ -5,7 +5,10 @@ import { apiToFuture, FutureData } from "../api-futures";
 import { RTSL_ZEBRA_PROGRAM_ID } from "./consts/DiseaseOutbreakConstants";
 import _ from "../../domain/entities/generic/Collection";
 import { Future } from "../../domain/entities/generic/Future";
-import { evenTrackerCountsIndicatorMap, IndicatorsId } from "./consts/PerformanceOverviewConstants";
+import {
+    eventTrackerCountsIndicatorMap,
+    IndicatorsId,
+} from "./consts/PerformanceOverviewConstants";
 import moment from "moment";
 import {
     DiseaseOutbreakEventBaseAttrs,
@@ -38,25 +41,26 @@ export class PerformanceOverviewD2Repository implements PerformanceOverviewRepos
     getTotalCardCounts(
         allProvincesIds: string[],
         singleSelectFilters?: Record<string, string>,
-        multiSelectFilters?: Record<string, string[]>
+        multiSelectFilters?: Record<string, string[]>,
+        dateRangeFilter?: string[]
     ): FutureData<TotalCardCounts[]> {
         return apiToFuture(
             this.api.analytics.get({
                 dimension: [
-                    `dx:${evenTrackerCountsIndicatorMap.map(({ id }) => id).join(";")}`,
+                    `dx:${eventTrackerCountsIndicatorMap.map(({ id }) => id).join(";")}`,
                     `ou:${
                         multiSelectFilters && multiSelectFilters?.province?.length
                             ? multiSelectFilters.province.join(";")
                             : allProvincesIds.join(";")
                     }`,
                 ],
                 startDate:
-                    multiSelectFilters?.duration?.length && multiSelectFilters?.duration[0]
-                        ? multiSelectFilters?.duration[0]
+                    dateRangeFilter?.length && dateRangeFilter[0]
+                        ? dateRangeFilter[0]
                         : DEFAULT_START_DATE,
                 endDate:
-                    multiSelectFilters?.duration?.length && multiSelectFilters?.duration[1]
-                        ? multiSelectFilters?.duration[1]
+                    dateRangeFilter?.length && dateRangeFilter[1]
+                        ? dateRangeFilter[1]
                         : DEFAULT_END_DATE,
                 includeMetadataDetails: true,
             })
@@ -88,7 +92,7 @@ export class PerformanceOverviewD2Repository implements PerformanceOverviewRepos
     ): TotalCardCounts[] => {
         const counts: TotalCardCounts[] = _(
             rowData.map(([id, _orgUnit, total]) => {
-                const indicator = evenTrackerCountsIndicatorMap.find(d => d.id === id);
+                const indicator = eventTrackerCountsIndicatorMap.find(d => d.id === id);
                 if (!indicator || !total) {
                     return null;
                 }

diff --git a/src/data/repositories/consts/PerformanceOverviewConstants.ts b/src/data/repositories/consts/PerformanceOverviewConstants.ts
@@ -190,7 +190,7 @@ export type EventTrackerCountIndicator =
     | EventTrackerCountDiseaseIndicator
     | EventTrackerCountHazardIndicator;
 
-export const evenTrackerCountsIndicatorMap: EventTrackerCountIndicator[] = [
+export const eventTrackerCountsIndicatorMap: EventTrackerCountIndicator[] = [
     { id: "SGGbbu0AKUv", type: "disease", name: "Acute respiratory", incidentStatus: "Watch" },
     { id: "QnhsQnEsp1p", type: "disease", name: "Acute respiratory", incidentStatus: "Alert" },
     { id: "Rt5KNVqBEO7", type: "disease", name: "Acute respiratory", incidentStatus: "Respond" },

diff --git a/src/domain/repositories/PerformanceOverviewRepository.ts b/src/domain/repositories/PerformanceOverviewRepository.ts
@@ -12,6 +12,7 @@ export interface PerformanceOverviewRepository {
     getTotalCardCounts(
         allProvincesIds: string[],
         singleSelectFilters?: Record<string, string>,
-        multiSelectFilters?: Record<string, string[]>
+        multiSelectFilters?: Record<string, string[]>,
+        dateRangeFilter?: string[]
     ): FutureData<TotalCardCounts[]>;
 }
diff --git a/src/domain/usecases/GetTotalCardCountsUseCase.ts b/src/domain/usecases/GetTotalCardCountsUseCase.ts
@@ -12,14 +12,16 @@ export class GetTotalCardCountsUseCase {
     ) {}
     public execute(
         singleSelectFilters?: Record<string, string>,
-        multiSelectFilters?: Record<string, string[]>
+        multiSelectFilters?: Record<string, string[]>,
+        dateRangeFilter?: string[]
     ): FutureData<TotalCardCounts[]> {
         return this.options.orgUnitRepository.getByLevel(2).flatMap(allProvinces => {
             const allProvincesIds = allProvinces.map(province => province.id);
             return this.options.performanceOverviewRepository.getTotalCardCounts(
                 allProvincesIds,
                 singleSelectFilters,
-                multiSelectFilters
+                multiSelectFilters,
+                dateRangeFilter
             );
         });
     }

diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx
@@ -16,6 +16,8 @@ type DatePickerProps = {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
+    disableFuture?: boolean;
+    maxDate?: Date;
 };
 
 const slots = { openPickerIcon: IconCalendar24 };
@@ -31,6 +33,8 @@ export const DatePicker: React.FC<DatePickerProps> = React.memo(
         errorText = "",
         error = false,
         required = false,
+        disableFuture = false,
+        maxDate,
     }) => {
         const notifyChange = useCallback(
             (date: Date | null) => {
@@ -71,6 +75,8 @@ export const DatePicker: React.FC<DatePickerProps> = React.memo(
                         error={error}
                         disabled={disabled}
                         slotProps={slotProps}
+                        disableFuture={disableFuture}
+                        maxDate={maxDate}
                     />
                 </LocalizationProvider>
             </Container>

diff --git a/src/webapp/components/date-picker/DateRangePicker.tsx b/src/webapp/components/date-picker/DateRangePicker.tsx
@@ -1,5 +1,5 @@
 import i18n from "../../../utils/i18n";
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import { Popover, InputAdornment, TextField, InputLabel } from "@material-ui/core";
 import moment from "moment";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -16,34 +16,29 @@ type DateRangePickerProps = {
     placeholder?: string;
 };
 
+const ID = "date-range-picker";
+
 export const DateRangePicker: React.FC<DateRangePickerProps> = React.memo(
     ({ label = "", value, placeholder = "", onChange }) => {
         const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
         const [startDate, setStartDate] = useState<Date | null>(null);
         const [endDate, setEndDate] = useState<Date | null>(null);
-        const id = "date-range-picker";
-
-        useEffect(() => {
-            if (!value || value.length !== 2) {
-                setStartDate(moment().startOf("month").toDate());
-                setEndDate(moment().toDate());
-            }
-        }, [value]);
 
-        // Adjust startDate if endDate < startDate
-        useEffect(() => {
-            if (endDate && startDate && moment(endDate).isBefore(startDate)) {
-                setStartDate(endDate);
-            }
-        }, [startDate, endDate]);
-
-        const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+        const handleOpen = useCallback((event: React.MouseEvent<HTMLElement>) => {
             setAnchorEl(event.currentTarget);
-        };
+        }, []);
 
-        const handleClose = () => {
+        const onCleanValues = useCallback(() => {
+            setStartDate(null);
+            setEndDate(null);
+        }, []);
+
+        const handleClose = useCallback(() => {
             setAnchorEl(null);
-        };
+            if (!value.length) {
+                onCleanValues();
+            }
+        }, [onCleanValues, value.length]);
 
         const formatDurationValue = useMemo(() => {
             if (!value || value.length !== 2) {
@@ -55,27 +50,28 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = React.memo(
             )}`;
         }, [startDate, endDate, placeholder, value]);
 
-        const onReset = () => {
+        const onReset = useCallback(() => {
             onChange([]);
+            onCleanValues();
             setAnchorEl(null);
-        };
+        }, [onChange, onCleanValues]);
 
-        const onSave = () => {
+        const onSave = useCallback(() => {
             if (startDate && endDate) {
                 setAnchorEl(null);
                 onChange([
                     moment(startDate).format("YYYY-MM-DD"),
                     moment(endDate).format("YYYY-MM-DD"),
                 ]);
             }
-        };
+        }, [endDate, onChange, startDate]);
 
         return (
             <LocalizationProvider dateAdapter={AdapterDateFns}>
                 <TextFieldContainer>
-                    {label && <Label htmlFor={id}>{label}</Label>}
+                    {label && <Label htmlFor={ID}>{label}</Label>}
                     <StyledTextField
-                        id={id}
+                        id={ID}
                         value={formatDurationValue}
                         onClick={handleOpen}
                         variant="outlined"
@@ -109,12 +105,15 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = React.memo(
                                 label="Start Date"
                                 value={startDate}
                                 onChange={date => setStartDate(date)}
+                                maxDate={endDate ?? undefined}
+                                disableFuture
                             />
                             <DatePicker
                                 id="end-date"
                                 label="End Date"
                                 value={endDate}
                                 onChange={date => setEndDate(date)}
+                                disableFuture
                             />
                         </Container>
                         <Container>
@@ -140,6 +139,7 @@ const PopoverContainer = styled.div`
 const Container = styled.div`
     width: 100%;
     display: flex;
+    gap: 5px;
     justify-content: space-between;
 `;
 

diff --git a/src/webapp/components/map/MapSection.tsx b/src/webapp/components/map/MapSection.tsx
@@ -12,13 +12,20 @@ type MapSectionProps = {
     mapKey: MapKey;
     singleSelectFilters?: Record<string, string>;
     multiSelectFilters?: Record<string, string[]>;
+    dateRangeFilter?: string[];
     eventDiseaseCode?: string;
     eventHazardCode?: string;
 };
 
 export const MapSection: React.FC<MapSectionProps> = React.memo(props => {
-    const { mapKey, singleSelectFilters, multiSelectFilters, eventDiseaseCode, eventHazardCode } =
-        props;
+    const {
+        mapKey,
+        singleSelectFilters,
+        multiSelectFilters,
+        dateRangeFilter,
+        eventDiseaseCode,
+        eventHazardCode,
+    } = props;
     const { orgUnits } = useAppContext();
     const snackbar = useSnackbar();
 
@@ -32,6 +39,7 @@ export const MapSection: React.FC<MapSectionProps> = React.memo(props => {
         allOrgUnitsIds: allProvincesIds,
         singleSelectFilters: singleSelectFilters,
         multiSelectFilters: multiSelectFilters,
+        dateRangeFilter: dateRangeFilter,
         eventDiseaseCode: eventDiseaseCode,
         eventHazardCode: eventHazardCode,
     });
@@ -53,9 +61,9 @@ export const MapSection: React.FC<MapSectionProps> = React.memo(props => {
             >
                 {mapConfigState.kind === "loaded" && allProvincesIds.length !== 0 ? (
                     <Map
-                        key={`${JSON.stringify(singleSelectFilters)}_${JSON.stringify(
-                            multiSelectFilters
-                        )}`}
+                        key={`${JSON.stringify(dateRangeFilter)}_${JSON.stringify(
+                            singleSelectFilters
+                        )}_${JSON.stringify(multiSelectFilters)}`}
                         config={mapConfigState.data}
                     />
                 ) : null}

diff --git a/src/webapp/components/map/useMap.ts b/src/webapp/components/map/useMap.ts
@@ -49,6 +49,7 @@ export function useMap(params: {
     allOrgUnitsIds: string[];
     eventDiseaseCode?: string;
     eventHazardCode?: string;
+    dateRangeFilter?: string[];
     singleSelectFilters?: Record<string, string>;
     multiSelectFilters?: Record<string, string[]>;
 }): MapState {
@@ -57,6 +58,7 @@ export function useMap(params: {
         allOrgUnitsIds,
         eventDiseaseCode,
         eventHazardCode,
+        dateRangeFilter,
         singleSelectFilters,
         multiSelectFilters,
     } = params;
@@ -65,23 +67,16 @@ export function useMap(params: {
     const [mapConfigState, setMapConfigState] = useState<MapConfigState>({
         kind: "loading",
     });
+    const [defaultStartDate, setDefaultStartDate] = useState<string>("");
 
     useEffect(() => {
         if (mapConfigState.kind !== "loaded") return;
 
         const newStartDate =
-            multiSelectFilters?.duration?.length &&
-            multiSelectFilters.duration[0] &&
-            multiSelectFilters.duration[0] !== mapConfigState.data.startDate
-                ? multiSelectFilters.duration[0]
-                : null;
+            dateRangeFilter?.length && dateRangeFilter[0] ? dateRangeFilter[0] : defaultStartDate;
 
         const newEndDate =
-            multiSelectFilters?.duration?.length &&
-            multiSelectFilters.duration[1] &&
-            multiSelectFilters.duration[1] !== mapConfigState.data.endDate
-                ? multiSelectFilters.duration[1]
-                : null;
+            dateRangeFilter?.length && dateRangeFilter[1] ? dateRangeFilter[1] : undefined;
 
         const isDashboardMapAndThereAreFilters =
             mapKey === "dashboard" &&
@@ -117,7 +112,12 @@ export function useMap(params: {
                     ? allOrgUnitsIds
                     : null;
 
-            if (!newMapIndicator && !newOrgUnits && !newStartDate && !newEndDate) {
+            if (
+                !newMapIndicator &&
+                !newOrgUnits &&
+                newStartDate === mapConfigState.data.startDate &&
+                newEndDate === mapConfigState.data.endDate
+            ) {
                 return;
             } else {
                 setMapConfigState(prevMapConfigState => {
@@ -135,10 +135,8 @@ export function useMap(params: {
                                 orgUnits: newOrgUnits
                                     ? newOrgUnits
                                     : prevMapConfigState.data.orgUnits,
-                                startDate: newStartDate
-                                    ? newStartDate
-                                    : prevMapConfigState.data.startDate,
-                                endDate: newEndDate ? newEndDate : prevMapConfigState.data.endDate,
+                                startDate: newStartDate,
+                                endDate: newEndDate,
                             },
                         };
                     } else {
@@ -151,18 +149,17 @@ export function useMap(params: {
         if (
             mapKey === "event_tracker" &&
             (eventDiseaseCode || eventHazardCode) &&
-            (newStartDate || newEndDate)
+            (newStartDate !== mapConfigState.data.startDate ||
+                newEndDate !== mapConfigState.data.endDate)
         ) {
             setMapConfigState(prevMapConfigState => {
                 if (prevMapConfigState.kind === "loaded") {
                     return {
                         kind: "loaded",
                         data: {
                             ...prevMapConfigState.data,
-                            startDate: newStartDate
-                                ? newStartDate
-                                : prevMapConfigState.data.startDate,
-                            endDate: newEndDate ? newEndDate : prevMapConfigState.data.endDate,
+                            startDate: newStartDate,
+                            endDate: newEndDate,
                         },
                     };
                 } else {
@@ -179,6 +176,8 @@ export function useMap(params: {
         mapProgramIndicators,
         multiSelectFilters,
         singleSelectFilters,
+        dateRangeFilter,
+        defaultStartDate,
     ]);
 
     useEffect(() => {
@@ -189,6 +188,7 @@ export function useMap(params: {
         compositionRoot.maps.getConfig.execute(mapKey).run(
             config => {
                 setMapProgramIndicators(config.programIndicators);
+                setDefaultStartDate(config.startDate);
 
                 const mapProgramIndicator =
                     mapKey === "dashboard"