From 3be094a5584b745e575d23f10c7479dd993d2dd4 Mon Sep 17 00:00:00 2001 From: gnnko Date: Wed, 25 Jan 2023 15:01:16 +0300 Subject: [PATCH] fix(period selector): Improvements - Enabled the selector to open to the category and type of the first selected period --- .../components/CustomAccordion/index.tsx | 2 -- .../components/EarthEngineLegend.tsx | 2 -- .../MapLayer/components/LegendArea/index.tsx | 1 - .../MapLayerProvider/hooks/index.tsx | 5 ---- .../components/MapLayerProvider/index.tsx | 2 -- .../components/OrgUnitTree/index.tsx | 2 -- .../PeriodSelector/PeriodSelector.stories.tsx | 8 +++--- .../CalendarSpecificPeriodDimension/index.tsx | 28 ++++++++++++------- 8 files changed, 22 insertions(+), 28 deletions(-) diff --git a/src/components/DataConfigurationArea/components/CustomAccordion/index.tsx b/src/components/DataConfigurationArea/components/CustomAccordion/index.tsx index 738ac911..6d197bc6 100644 --- a/src/components/DataConfigurationArea/components/CustomAccordion/index.tsx +++ b/src/components/DataConfigurationArea/components/CustomAccordion/index.tsx @@ -41,8 +41,6 @@ export default function CustomAccordion({ const [expand, setExpanded] = useState(defaultExpanded); const [placeholderStyle, setPlaceholderStyle] = useState({}); - console.log(placeholderStyle); - const onExpand = useCallback(() => { setExpanded((prevState) => !prevState); }, []); diff --git a/src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx b/src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx index 6c075160..c687caea 100644 --- a/src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx +++ b/src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx @@ -18,13 +18,11 @@ function getLegendsFromParams(params?: { min: number; max: number; palette: stri if (!params) return []; const { palette, min, max } = params; - console.log(params); const sanitizedPalette = Array.isArray(palette) ? palette : palette.split(","); const classes = sanitizedPalette.length; const difference = max - min; const interval = Math.round(difference / classes); const legends = []; - console.log(10 / 9); for (let i = 0; i < classes; i++) { const min = i * interval; const max = min + interval; diff --git a/src/components/Map/components/MapLayer/components/LegendArea/index.tsx b/src/components/Map/components/MapLayer/components/LegendArea/index.tsx index de9d6bbf..2cabbb04 100644 --- a/src/components/Map/components/MapLayer/components/LegendArea/index.tsx +++ b/src/components/Map/components/MapLayer/components/LegendArea/index.tsx @@ -124,7 +124,6 @@ function Legend({ children, collapsible }: { children: React.ReactElement; colla const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name; const shouldCollapse = collapsed && !inPrintMode; - console.log(inPrintMode); return (
diff --git a/src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx b/src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx index 0fd9466b..79c16bda 100644 --- a/src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx +++ b/src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx @@ -143,11 +143,6 @@ export function useThematicLayers(): any { classesCount: scale, colorClass, }); - console.log({ - scale, - colorClass, - sortedData, - }); legends.push(...autoLegends); } return { diff --git a/src/components/Map/components/MapProvider/components/MapLayerProvider/index.tsx b/src/components/Map/components/MapProvider/components/MapLayerProvider/index.tsx index 845d11c6..461294cf 100644 --- a/src/components/Map/components/MapProvider/components/MapLayerProvider/index.tsx +++ b/src/components/Map/components/MapProvider/components/MapLayerProvider/index.tsx @@ -44,8 +44,6 @@ export function MapLayersProvider({ layers, children }: { layers: MapLayerConfig const sanitizedPointLayer = head(pointLayers ?? []) ? await sanitizePointLayer(head(pointLayers) as CustomPointLayer) : undefined; const sanitizedEarthEngineLayers = await sanitizeEarthEngineLayers([...(earthEngineLayers ?? [])] as unknown as CustomGoogleEngineLayer[]); - console.log(sanitizedThematicLayers); - setUpdatedLayers( compact([...(sanitizedBoundaryLayers ?? []), ...(sanitizedThematicLayers ?? []), sanitizedPointLayer, ...(sanitizedEarthEngineLayers ?? [])]) ); diff --git a/src/components/OrgUnitSelector/components/OrgUnitTree/index.tsx b/src/components/OrgUnitSelector/components/OrgUnitTree/index.tsx index dae1921f..e713268c 100644 --- a/src/components/OrgUnitSelector/components/OrgUnitTree/index.tsx +++ b/src/components/OrgUnitSelector/components/OrgUnitTree/index.tsx @@ -37,8 +37,6 @@ function Tree({ const { searchMode, searchValue, expanded, filtering, filteredOrgUnits, handleExpand } = useFilterOrgUnits(); const selectedOrgUnits = value?.orgUnits ?? []; - console.log(expanded); - const onSelect = (orgUnit: any) => { const orgUnitLevel = orgUnit.level ?? orgUnit.path.split("/").length - 1; const allowSelection = limitSelectionToLevels?.includes(orgUnitLevel) ?? true; diff --git a/src/components/PeriodSelector/PeriodSelector.stories.tsx b/src/components/PeriodSelector/PeriodSelector.stories.tsx index 9e0d18be..45fe68d4 100644 --- a/src/components/PeriodSelector/PeriodSelector.stories.tsx +++ b/src/components/PeriodSelector/PeriodSelector.stories.tsx @@ -92,8 +92,8 @@ SelectedPeriods.args = { enableDateRange: true, selectedPeriods: [ { - id: "2022", - name: "2022", + id: "202209", + name: "September 2022", }, ], excludedPeriodTypes: [], @@ -108,8 +108,8 @@ WithAllowedFuturePeriods.args = { enableDateRange: true, selectedPeriods: [ { - id: "2022", - name: "2022", + id: "202209", + name: "September 2022", }, ], allowFuturePeriods: false, diff --git a/src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/index.tsx b/src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/index.tsx index eb473185..0f2c8186 100644 --- a/src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/index.tsx +++ b/src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/index.tsx @@ -32,17 +32,21 @@ export default function CalendarSpecificPeriodSelector({ singleSelection, allowFuturePeriods, }: CalendarSpecificPeriodSelectorProps) { - const periodInstance = new Period().setCalendar(CalendarTypes.ETHIOPIAN); + const periodInstance = new Period().setCalendar(CalendarTypes.ETHIOPIAN).setPreferences({ allowFuturePeriods: true }); + const selectedPeriod = !isEmpty(selectedPeriods) ? periodInstance.getById(head(selectedPeriods)?.id as unknown as string) : undefined; + const defaultPeriodType = selectedPeriod?.type; - const [year, setYear] = useState(new Date().getFullYear()); + const defaultPeriodTypeIsFixed = typeof selectedPeriod?.id === "string" && /\d{4}/.test(selectedPeriod?.id); + + const [year, setYear] = useState( + defaultPeriodTypeIsFixed ? new Date(selectedPeriod?.startDate as unknown as string).getFullYear() ?? new Date().getFullYear() : new Date().getFullYear() + ); useEffect(() => { periodInstance.setPreferences({ openFuturePeriods: 4, allowFuturePeriods: true }); periodInstance.setCalendar(calendar); if (calendar === CalendarTypes.ETHIOPIAN) { setYear(new Date().getFullYear() - 7); - } else { - setYear(new Date().getFullYear()); } }, [calendar]); const periodType = new PeriodType(); @@ -54,8 +58,12 @@ export default function CalendarSpecificPeriodSelector({ const relativePeriodTypes = filter(filteredPeriodTypes, ({ id }) => id.toLowerCase().match(RegExp("relative".toLowerCase()))); const fixedPeriodTypes = filter(filteredPeriodTypes, ({ id }) => !id.toLowerCase().match(RegExp("relative".toLowerCase()))); - const [selectedRelativePeriodType, setSelectedRelativePeriodType] = useState(head(relativePeriodTypes)?.id); - const [selectedFixedPeriodType, setSelectedFixedPeriodType] = useState(head(fixedPeriodTypes)?.id); + const [selectedRelativePeriodType, setSelectedRelativePeriodType] = useState( + defaultPeriodTypeIsFixed ? head(relativePeriodTypes)?.id : defaultPeriodType ?? head(relativePeriodTypes)?.id + ); + const [selectedFixedPeriodType, setSelectedFixedPeriodType] = useState( + defaultPeriodTypeIsFixed ? defaultPeriodType ?? head(fixedPeriodTypes)?.id : head(fixedPeriodTypes)?.id + ); const tabs = useMemo(() => { const tabs = []; @@ -69,7 +77,9 @@ export default function CalendarSpecificPeriodSelector({ return tabs; }, []); - const [selectedPeriodCategory, setSelectedPeriodCategory] = useState(head(tabs)); + const defaultTab = find(Object.values(PeriodCategories), ["key", defaultPeriodTypeIsFixed ? "fixed" : "relative"]); + + const [selectedPeriodCategory, setSelectedPeriodCategory] = useState(defaultTab); useEffect(() => { if (excludeFixedPeriods && excludeRelativePeriods) { @@ -100,8 +110,6 @@ export default function CalendarSpecificPeriodSelector({ .get() .list(); - console.log(periods); - if (allowFuturePeriods) { return periods; } else { @@ -171,7 +179,7 @@ export default function CalendarSpecificPeriodSelector({ dense label={i18n.t("Year")} type={"number"} - value={year} + value={year.toString()} onChange={({ value }: { value: number }) => setYear(value)} />