feat: use PeriodDimension in ThematicDialog

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-12-05T11:28:26.227Z\n"
-"PO-Revision-Date: 2024-12-05T11:28:26.227Z\n"
+"POT-Creation-Date: 2024-12-09T14:15:43.944Z\n"
+"PO-Revision-Date: 2024-12-09T14:15:43.944Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -927,23 +927,17 @@ msgstr "Period type"
 msgid "Start/end dates"
 msgstr "Start/end dates"
 
-msgid "Select "
-msgstr "Select "
-
-msgid " or more periods to enable timeline or split map views."
-msgstr " or more periods to enable timeline or split map views."
+msgid "Select {{number}} or more periods to enable timeline or split map views."
+msgstr "Select {{number}} or more periods to enable timeline or split map views."
 
 msgid "Only one timeline is allowed."
 msgstr "Only one timeline is allowed."
 
 msgid "Remove other layers to enable split map views."
 msgstr "Remove other layers to enable split map views."
 
-msgid "Only up to "
-msgstr "Only up to "
-
-msgid " periods can be selected to enable timeline or split map views."
-msgstr " periods can be selected to enable timeline or split map views."
+msgid "Only up to {{number}} periods can be selected to enable split map views."
+msgstr "Only up to {{number}} periods can be selected to enable split map views."
 
 msgid "Period display mode"
 msgstr "Period display mode"

src/components/core/RadioGroup.js

@@ -56,11 +56,11 @@ const RadioGroup = ({
 
 RadioGroup.propTypes = {
     onChange: PropTypes.func.isRequired,
+    boldLabel: PropTypes.bool,
     children: PropTypes.arrayOf(PropTypes.node),
+    compact: PropTypes.bool,
     dataTest: PropTypes.string,
     display: PropTypes.string,
-    boldLabel: PropTypes.bool,
-    compact: PropTypes.bool,
     helpText: PropTypes.string,
     label: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

src/components/download/DownloadSettings.js

@@ -2,8 +2,8 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, ButtonStrip } from '@dhis2/ui'
 import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import useKeyDown from '../../hooks/useKeyDown.js'
 import { setDownloadConfig } from '../../actions/download.js'
+import useKeyDown from '../../hooks/useKeyDown.js'
 import { standardizeFilename } from '../../util/dataDownload.js'
 import { downloadMapImage, downloadSupport } from '../../util/export-image.js'
 import { getSplitViewLayer } from '../../util/helpers.js'

src/components/edit/LayerEdit.js

@@ -9,12 +9,12 @@ import {
     ButtonStrip,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { addLayer, updateLayer, cancelLayer } from '../../actions/layers.js'
 import { EARTH_ENGINE_LAYER } from '../../constants/layers.js'
-import { useOrgUnits } from '../OrgUnitsProvider.js'
 import useKeyDown from '../../hooks/useKeyDown.js'
+import { useOrgUnits } from '../OrgUnitsProvider.js'
 import EarthEngineDialog from './earthEngine/EarthEngineDialog.js'
 import EventDialog from './event/EventDialog.js'
 import FacilityDialog from './FacilityDialog.js'

src/components/edit/event/EventDialog.js

@@ -47,7 +47,7 @@ import FilterGroup from '../../dataItem/filter/FilterGroup.js'
 import StyleByDataItem from '../../dataItem/StyleByDataItem.js'
 import OrgUnitSelect from '../../orgunits/OrgUnitSelect.js'
 import RelativePeriodSelect from '../../periods/RelativePeriodSelect.js'
-import StartEndDates from '../../periods/StartEndDates.js'
+import StartEndDate from '../../periods/StartEndDate.js'
 import ProgramSelect from '../../program/ProgramSelect.js'
 import ProgramStageSelect from '../../program/ProgramStageSelect.js'
 import BufferRadius from '../shared/BufferRadius.js'
@@ -82,6 +82,7 @@ class EventDialog extends Component {
         legendSet: PropTypes.object,
         method: PropTypes.number,
         orgUnits: PropTypes.object,
+        periodsSettings: PropTypes.object,
         program: PropTypes.shape({
             id: PropTypes.string.isRequired,
             trackedEntityType: PropTypes.object,
@@ -174,6 +175,7 @@ class EventDialog extends Component {
             programStage,
             startDate,
             legendSet,
+            periodsSettings,
         } = this.props
 
         const {
@@ -272,10 +274,13 @@ class EventDialog extends Component {
                                 className={styles.select}
                             />
                             {period && period.id === START_END_DATES && (
-                                <StartEndDates
+                                <StartEndDate
                                     startDate={startDate}
                                     endDate={endDate}
-                                    errorText={periodError}
+                                    //errorText={periodError}
+                                    setStartDate={setStartDate}
+                                    setEndDate={setEndDate}
+                                    periodsSettings={periodsSettings}
                                 />
                             )}
                         </div>

src/components/edit/thematic/ThematicDialog.js

@@ -29,7 +29,6 @@ import {
     RENDERING_STRATEGY_SINGLE,
 } from '../../../constants/layers.js'
 import {
-    RELATIVE_PERIODS,
     PREDEFINED_PERIODS,
     START_END_DATES,
 } from '../../../constants/periods.js'
@@ -55,6 +54,7 @@ import IndicatorGroupSelect from '../../indicator/IndicatorGroupSelect.js'
 import IndicatorSelect from '../../indicator/IndicatorSelect.js'
 import OrgUnitSelect from '../../orgunits/OrgUnitSelect.js'
 import RenderingStrategy from '../../periods/RenderingStrategy.js'
+import StartEndDate from '../../periods/StartEndDate.js'
 import ProgramIndicatorSelect from '../../program/ProgramIndicatorSelect.js'
 import ProgramSelect from '../../program/ProgramSelect.js'
 import Labels from '../shared/Labels.js'
@@ -65,13 +65,13 @@ import NoDataColor from './NoDataColor.js'
 import RadiusSelect, { isValidRadius } from './RadiusSelect.js'
 import ThematicMapTypeSelect from './ThematicMapTypeSelect.js'
 import ValueTypeSelect from './ValueTypeSelect.js'
-import StartEndDate from '../../periods/StartEndDate.js'
 
 class ThematicDialog extends Component {
     static propTypes = {
         setClassification: PropTypes.func.isRequired,
         setDataElementGroup: PropTypes.func.isRequired,
         setDataItem: PropTypes.func.isRequired,
+        setEndDate: PropTypes.func.isRequired,
         setIndicatorGroup: PropTypes.func.isRequired,
         setLegendSet: PropTypes.func.isRequired,
         setNoDataColor: PropTypes.func.isRequired,
@@ -81,6 +81,7 @@ class ThematicDialog extends Component {
         setPeriods: PropTypes.func.isRequired,
         setProgram: PropTypes.func.isRequired,
         setRenderingStrategy: PropTypes.func.isRequired,
+        setStartDate: PropTypes.func.isRequired,
         setValueType: PropTypes.func.isRequired,
         validateLayer: PropTypes.bool.isRequired,
         onLayerValidation: PropTypes.func.isRequired,
@@ -128,20 +129,8 @@ class ThematicDialog extends Component {
             setOrgUnits,
         } = this.props
 
-        console.log(
-            '🚀 ~ componentDidMount ~ periodType:',
-            this.props.periodType
-        )
-        console.log('🚀 ~ componentDidMount ~ filters:', this.props.filters)
-        console.log('🚀 ~ componentDidMount ~ startDate:', startDate)
-        console.log('🚀 ~ componentDidMount ~ endDate:', endDate)
-
         const dataItem = getDataItemFromColumns(columns)
         const periods = getPeriodsFromFilters(filters)
-        console.log(
-            '🚀 ~ ThematicDialog ~ componentDidMount ~ periods:',
-            periods
-        )
 
         const { keyAnalysisRelativePeriod: defaultPeriod, hiddenPeriods } =
             systemSettings
@@ -167,21 +156,11 @@ class ThematicDialog extends Component {
             startDate !== '' &&
             endDate !== undefined &&
             endDate !== ''
-        console.log(
-            '🚀 ~ ThematicDialog ~ componentDidMount ~ hasDate:',
-            hasDate
-        )
 
         if (hasDate) {
-            console.log(
-                '🚀 ~ componentDidMount ~ setPeriodType HERE (START_END_DATES)'
-            )
             const keepPeriod = false
             setPeriodType({ value: START_END_DATES }, keepPeriod)
         } else {
-            console.log(
-                '🚀 ~ componentDidMount ~ setPeriodType HERE (PREDEFINED_PERIODS)'
-            )
             const keepPeriod = true
             setPeriodType({ value: PREDEFINED_PERIODS }, keepPeriod)
         }
@@ -193,8 +172,6 @@ class ThematicDialog extends Component {
             defaultPeriod &&
             isPeriodAvailable(defaultPeriod, hiddenPeriods)
         ) {
-            console.log('🚀 ~ componentDidMount ~ setPeriods HERE')
-            console.log('getRelativePeriodsName()', getRelativePeriodsName())
             const defaultPeriods = [
                 {
                     id: defaultPeriod,
@@ -267,19 +244,13 @@ class ThematicDialog extends Component {
                     // !TODO Backup Start-End dates
                     // Remove Start-End dates
                     // !TODO Restore Predefined periods backup
-                    console.log(
-                        '🚀 ~ ThematicDialog ~ componentDidUpdate ~ case PREDEFINED_PERIODS'
-                    )
                     setStartDate('')
                     setEndDate('')
                     break
                 case START_END_DATES:
                     // !TODO Backup Predefined periods
                     // Remove Predefined periods
                     // !TODO Restore Start-End dates backup
-                    console.log(
-                        '🚀 ~ ThematicDialog ~ componentDidUpdate ~ case START_END_DATES'
-                    )
                     setPeriods([])
                     break
             }
@@ -338,11 +309,6 @@ class ThematicDialog extends Component {
             legendSetError,
         } = this.state
 
-        console.log('🚀 ~ render ~ periodType:', periodType)
-        console.log('🚀 ~ render ~ filters:', filters)
-        console.log('🚀 ~ render ~ startDate:', startDate)
-        console.log('🚀 ~ render ~ endDate:', endDate)
-
         const periods = getPeriodsFromFilters(filters)
 
         const dataItem = getDataItemFromColumns(columns)
@@ -726,18 +692,7 @@ class ThematicDialog extends Component {
                 'period'
             )
         } else if (periodType === START_END_DATES) {
-            console.log(
-                '🚀 ~ ThematicDialog ~ validate ~ periodType:',
-                periodType
-            )
             const error = getStartEndDateError(startDate, endDate)
-            console.log(
-                '🚀 ~ ThematicDialog ~ validate ~ startDate:',
-                startDate
-            )
-            console.log('🚀 ~ ThematicDialog ~ validate ~ endDate:', endDate)
-            console.log('🚀 ~ ThematicDialog ~ validate ~ error:', error)
-
             if (error) {
                 return this.setErrorState('periodError', error, 'period')
             }

src/components/edit/trackedEntity/PeriodTypeSelect.js

@@ -19,7 +19,7 @@ const PeriodTypeSelect = ({
         <RadioGroup
             name="type"
             value={periodType}
-            onChange={(type) => setPeriodType({ id: type })}
+            onChange={(type) => setPeriodType({ value: type })}
         >
             <Radio value="lastUpdated" label={label} />
             <Radio

src/components/edit/trackedEntity/TrackedEntityDialog.js

@@ -43,7 +43,7 @@ import {
     ColorPicker,
 } from '../../core/index.js'
 import OrgUnitSelect from '../../orgunits/OrgUnitSelect.js'
-import StartEndDates from '../../periods/StartEndDates.js'
+import StartEndDate from '../../periods/StartEndDate.js'
 import ProgramSelect from '../../program/ProgramSelect.js'
 import TrackedEntityTypeSelect from '../../trackedEntity/TrackedEntityTypeSelect.js'
 import BufferRadius from '../shared/BufferRadius.js'
@@ -74,6 +74,7 @@ class TrackedEntityDialog extends Component {
         eventPointRadius: PropTypes.number,
         followUp: PropTypes.bool,
         orgUnits: PropTypes.object,
+        periodsSettings: PropTypes.object,
         program: PropTypes.object,
         programStatus: PropTypes.string,
         relatedPointColor: PropTypes.string,
@@ -148,6 +149,7 @@ class TrackedEntityDialog extends Component {
             relatedPointColor,
             relatedPointRadius,
             relationshipLineColor,
+            periodsSettings,
         } = this.props
 
         const {
@@ -274,10 +276,13 @@ class TrackedEntityDialog extends Component {
                     {tab === 'period' && (
                         <div className={styles.flexRowFlow}>
                             <PeriodTypeSelect />
-                            <StartEndDates
+                            <StartEndDate
                                 startDate={startDate}
                                 endDate={endDate}
                                 errorText={periodError}
+                                setStartDate={setStartDate}
+                                setEndDate={setEndDate}
+                                periodsSettings={periodsSettings}
                             />
                         </div>
                     )}

src/components/layerSources/ManageLayerSourcesModal.js

@@ -10,8 +10,8 @@ import {
 import PropTypes from 'prop-types'
 import React from 'react'
 import earthEngineLayers from '../../constants/earthEngineLayers/index.js'
-import useManagedLayerSourcesStore from '../../hooks/useManagedLayerSourcesStore.js'
 import useKeyDown from '../../hooks/useKeyDown.js'
+import useManagedLayerSourcesStore from '../../hooks/useManagedLayerSourcesStore.js'
 import LayerSource from './LayerSource.js'
 import styles from './styles/ManageLayerSourcesModal.module.css'
 

src/components/layers/overlays/AddLayerPopover.js

@@ -6,8 +6,8 @@ import { useSelector, useDispatch } from 'react-redux'
 import { addLayer, editLayer } from '../../../actions/layers.js'
 import earthEngineLayers from '../../../constants/earthEngineLayers/index.js'
 import { EXTERNAL_LAYER } from '../../../constants/layers.js'
-import useManagedLayerSourcesStore from '../../../hooks/useManagedLayerSourcesStore.js'
 import useKeyDown from '../../../hooks/useKeyDown.js'
+import useManagedLayerSourcesStore from '../../../hooks/useManagedLayerSourcesStore.js'
 import { isSplitViewMap } from '../../../util/helpers.js'
 import ManageLayerSourcesButton from '../../layerSources/ManageLayerSourcesButton.js'
 import LayerList from './LayerList.js'

src/components/map/Map.js

@@ -121,7 +121,6 @@ class Map extends Component {
 
     componentDidUpdate(prevProps) {
         const { resizeCount, isFullscreen, isPlugin } = this.props
-        console.log('🚀 ~ Map ~ componentDidUpdate ~ resizeCount:', resizeCount)
 
         if (resizeCount !== prevProps.resizeCount) {
             this.map.resize()

src/components/map/layers/EventPopup.js

@@ -9,7 +9,6 @@ import Popup from '../Popup.js'
 
 // Returns true if value is not undefined or null;
 const hasValue = (value) => value !== undefined && value !== null
-
 const EVENTS_QUERY = {
     events: {
         resource: 'tracker/events',
@@ -40,10 +39,10 @@ const getDataRows = ({ displayElements, dataValues, styleDataItem, value }) => {
 
         if (valueType === 'COORDINATE' && value) {
             formattedValue = formatCoordinate(value)
-        } else if (options) {
-            formattedValue = options[value]
         } else if (!hasValue(value)) {
             formattedValue = i18n.t('Not set')
+        } else if (options) {
+            formattedValue = options[value]
         }
 
         dataRows.push(

src/components/map/layers/ThematicLayer.js

@@ -140,8 +140,6 @@ class ThematicLayer extends Layer {
             periods,
             renderingStrategy = RENDERING_STRATEGY_SINGLE,
         } = this.props
-        console.log('🚀 ~ ThematicLayer ~ setPeriod ~ periods:', periods)
-        console.log('🚀 ~ ThematicLayer ~ setPeriod ~ period:', period)
 
         if (!period && !periods) {
             return

src/components/map/layers/TrackedEntityPopup.js

@@ -30,10 +30,10 @@ const getDataRows = ({ displayAttributes, attributes }) => {
 
         if (valueType === 'COORDINATE' && value) {
             formattedValue = formatCoordinate(value)
-        } else if (options) {
-            formattedValue = options[value]
         } else if (!hasValue(value)) {
             formattedValue = i18n.t('Not set')
+        } else if (options) {
+            formattedValue = options[value]
         }
 
         dataRows.push(

src/components/periods/PeriodTypeSelect.js

@@ -31,11 +31,6 @@ const PeriodTypeSelect = ({
             )
 
             if (!period || isRelativePeriod) {
-                console.log(
-                    '🚀 ~ useEffect ~ isRelativePeriod:',
-                    isRelativePeriod
-                )
-                console.log('🚀 ~ useEffect ~ periodTypes[0]:', periodTypes[0])
                 // default to first period type
                 onChange(periodTypes[0], isRelativePeriod)
             }