feat: use PeriodDimension in ThematicDialog

dhis2 · Nov 18, 2024 · 0ee3fad · 0ee3fad
1 parent 7f6f777
commit 0ee3fad
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 60 deletions.
diff --git a/src/actions/layerEdit.js b/src/actions/layerEdit.js
@@ -185,6 +185,12 @@ export const setPeriodType = (periodType, keepPeriod) => ({
     keepPeriod,
 })
 
+// Set periods (thematic)
+export const setPeriods = (periods) => ({
+    type: types.LAYER_EDIT_PERIODS_SET,
+    periods,
+})
+
 // Set period (event & thematic)
 export const setPeriod = (period) => ({
     type: types.LAYER_EDIT_PERIOD_SET,

diff --git a/src/components/edit/styles/LayerDialog.module.css b/src/components/edit/styles/LayerDialog.module.css
@@ -109,6 +109,12 @@
     margin: 8px 0 0 -8px;
 }
 
+/* Periods */
+
+.periodDimension {
+    height: 410px
+}
+
 /* Tracked entity */
 
 .teiCheckbox {

diff --git a/src/components/edit/thematic/ThematicDialog.js b/src/components/edit/thematic/ThematicDialog.js
@@ -1,3 +1,5 @@
+import cx from 'classnames'
+import { PeriodDimension } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -11,7 +13,7 @@ import {
     setNoDataColor,
     setOperand,
     setOrgUnits,
-    setPeriod,
+    setPeriods,
     setPeriodType,
     setRenderingStrategy,
     setProgram,
@@ -31,7 +33,7 @@ import {
 import {
     getDataItemFromColumns,
     getOrgUnitsFromRows,
-    getPeriodFromFilters,
+    getPeriodsFromFilters,
     getDimensionsFromFilters,
 } from '../../../util/analytics.js'
 import { isPeriodAvailable } from '../../../util/periods.js'
@@ -75,7 +77,7 @@ class ThematicDialog extends Component {
         setNoDataColor: PropTypes.func.isRequired,
         setOperand: PropTypes.func.isRequired,
         setOrgUnits: PropTypes.func.isRequired,
-        setPeriod: PropTypes.func.isRequired,
+        setPeriods: PropTypes.func.isRequired,
         setPeriodType: PropTypes.func.isRequired,
         setProgram: PropTypes.func.isRequired,
         setRenderingStrategy: PropTypes.func.isRequired,
@@ -121,12 +123,20 @@ class ThematicDialog extends Component {
             startDate,
             systemSettings,
             endDate,
-            setPeriod,
+            setPeriods,
             setOrgUnits,
         } = this.props
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ filters:',
+            filters
+        )
 
         const dataItem = getDataItemFromColumns(columns)
-        const period = getPeriodFromFilters(filters)
+        const periods = getPeriodsFromFilters(filters)
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ periods:',
+            periods
+        )
 
         const { keyAnalysisRelativePeriod: defaultPeriod, hiddenPeriods } =
             systemSettings
@@ -147,17 +157,41 @@ class ThematicDialog extends Component {
             }
         }
 
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ periods?.length == 0:',
+            periods?.length == 0
+        )
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ !startDate:',
+            !startDate
+        )
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ !endDate:',
+            !endDate
+        )
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ defaultPeriod:',
+            defaultPeriod
+        )
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidMount ~ isPeriodAvailable(defaultPeriod, hiddenPeriods):',
+            isPeriodAvailable(defaultPeriod, hiddenPeriods)
+        )
         // Set default period from system settings
         if (
-            !period &&
+            periods?.length == 0 &&
             !startDate &&
             !endDate &&
             defaultPeriod &&
             isPeriodAvailable(defaultPeriod, hiddenPeriods)
         ) {
-            setPeriod({
-                id: defaultPeriod,
-            })
+            const defaultPeriods = [
+                {
+                    id: defaultPeriod,
+                },
+            ]
+            setPeriods(defaultPeriods)
+            //setPeriodType(RELATIVE_PERIODS)
         }
 
         // Set default org unit level
@@ -186,6 +220,10 @@ class ThematicDialog extends Component {
             validateLayer,
             onLayerValidation,
         } = this.props
+        console.log(
+            '🚀 ~ ThematicDialog ~ componentDidUpdate ~ periodType:',
+            periodType
+        )
 
         // Set rendering strategy to single if not relative period
         if (
@@ -235,6 +273,8 @@ class ThematicDialog extends Component {
             systemSettings,
             periodsSettings,
         } = this.props
+        console.log('🚀 ~ ThematicDialog ~ render ~ filters:', filters)
+        console.log('🚀 ~ ThematicDialog ~ render ~ periodType:', periodType)
 
         const {
             // Handlers
@@ -243,7 +283,7 @@ class ThematicDialog extends Component {
             setIndicatorGroup,
             setNoDataColor,
             setOperand,
-            setPeriod,
+            setPeriods,
             setPeriodType,
             setRenderingStrategy,
             setProgram,
@@ -267,10 +307,17 @@ class ThematicDialog extends Component {
             legendSetError,
         } = this.state
 
-        const period = getPeriodFromFilters(filters)
+        const periods = getPeriodsFromFilters(filters)
+        console.log('🚀 ~ ThematicDialog ~ render ~ periods:', periods)
         const dataItem = getDataItemFromColumns(columns)
         const dimensions = getDimensionsFromFilters(filters)
 
+        const setPeriodsFromFilter = (e) => {
+            console.log('🚀 ~ ThematicDialog ~ setPeriodsFromFilter ~ e:', e)
+            setPeriods(e.items)
+            //setPeriodType(RELATIVE_PERIODS)
+        }
+
         return (
             <div className={styles.content} data-test="thematicdialog">
                 <Tabs value={tab} onChange={(tab) => this.setState({ tab })}>
@@ -426,55 +473,19 @@ class ThematicDialog extends Component {
                     )}
                     {tab === 'period' && (
                         <div
-                            className={styles.flexRowFlow}
+                            className={cx(
+                                styles.flexRowFlow,
+                                styles.periodDimension
+                            )}
                             data-test="thematicdialog-periodtab"
                         >
-                            <PeriodTypeSelect
-                                value={periodType}
-                                period={period}
-                                includeRelativePeriods={true}
-                                hiddenPeriods={systemSettings.hiddenPeriods}
-                                onChange={setPeriodType}
-                                className={styles.periodSelect}
-                                errorText={periodTypeError}
+                            <PeriodDimension
+                                selectedPeriods={periods}
+                                onSelect={setPeriodsFromFilter}
+                                excludedPeriodTypes={
+                                    systemSettings.hiddenPeriods
+                                }
                             />
-                            {periodType === RELATIVE_PERIODS && (
-                                <RelativePeriodSelect
-                                    period={period}
-                                    onChange={setPeriod}
-                                    className={styles.periodSelect}
-                                    errorText={periodError}
-                                />
-                            )}
-                            {((periodType &&
-                                periodType !== RELATIVE_PERIODS &&
-                                periodType !== START_END_DATES) ||
-                                (!periodType && id)) && (
-                                <PeriodSelect
-                                    periodType={periodType}
-                                    periodsSettings={periodsSettings}
-                                    period={period}
-                                    onChange={setPeriod}
-                                    className={styles.periodSelect}
-                                    errorText={periodError}
-                                />
-                            )}
-                            {periodType === START_END_DATES && (
-                                <StartEndDates
-                                    startDate={startDate}
-                                    endDate={endDate}
-                                    className={styles.periodSelect}
-                                    errorText={periodError}
-                                />
-                            )}
-                            {periodType === RELATIVE_PERIODS && (
-                                <RenderingStrategy
-                                    value={renderingStrategy}
-                                    period={period}
-                                    layerId={id}
-                                    onChange={setRenderingStrategy}
-                                />
-                            )}
                         </div>
                     )}
                     {tab === 'orgunits' && (
@@ -548,8 +559,10 @@ class ThematicDialog extends Component {
             method,
             legendSet,
         } = this.props
+        console.log('🚀 ~ ThematicDialog ~ validate ~ filters:', filters)
         const dataItem = getDataItemFromColumns(columns)
-        const period = getPeriodFromFilters(filters)
+        const periods = getPeriodsFromFilters(filters)
+        console.log('🚀 ~ ThematicDialog ~ validate ~ periods:', periods)
 
         // Indicators
         if (valueType === dimConf.indicator.objectName) {
@@ -567,6 +580,7 @@ class ThematicDialog extends Component {
                 )
             }
         }
+        console.log('🚀 ~ ThematicDialog ~ validate ~ Indicators: OK')
 
         // Data elements
         if (
@@ -587,6 +601,7 @@ class ThematicDialog extends Component {
                 )
             }
         }
+        console.log('🚀 ~ ThematicDialog ~ validate ~ Data elements: OK')
 
         // Reporting rates
         if (valueType === dimConf.dataSet.objectName && !dataItem) {
@@ -596,6 +611,7 @@ class ThematicDialog extends Component {
                 'data'
             )
         }
+        console.log('🚀 ~ ThematicDialog ~ validate ~ Reporting rates: OK')
 
         // Event data items / Program indicators
         if (
@@ -622,16 +638,27 @@ class ThematicDialog extends Component {
                       )
             }
         }
+        console.log(
+            '🚀 ~ ThematicDialog ~ validate ~ Event data items / Program indicators: OK'
+        )
 
+        // Calculation
         if (valueType === dimConf.calculation.objectName && !dataItem) {
             return this.setErrorState(
                 'calculationError',
                 i18n.t('Calculation is required'),
                 'data'
             )
         }
+        console.log('🚀 ~ ThematicDialog ~ validate ~ Calculation: OK')
 
-        if (!period && periodType !== START_END_DATES) {
+        console.log('🚀 ~ ThematicDialog ~ validate ~ periodType:', periodType)
+        console.log(
+            '🚀 ~ validate ~ periods?.length !== 0:',
+            periods?.length !== 0
+        )
+        if (periods?.length === 0) {
+            //&& periodType !== START_END_DATES) {
             return this.setErrorState(
                 'periodError',
                 i18n.t('Period is required'),
@@ -644,6 +671,7 @@ class ThematicDialog extends Component {
                 return this.setErrorState('periodError', error, 'period')
             }
         }
+        console.log('🚀 ~ ThematicDialog ~ validate ~ periods: OK')
 
         if (!getOrgUnitsFromRows(rows).length) {
             return this.setErrorState(
@@ -681,7 +709,7 @@ export default connect(
         setNoDataColor,
         setOperand,
         setOrgUnits,
-        setPeriod,
+        setPeriods,
         setPeriodType,
         setRenderingStrategy,
         setProgram,

diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js
@@ -57,6 +57,7 @@ export const LAYER_EDIT_PROGRAM_INDICATOR_SET =
     'LAYER_EDIT_PROGRAM_INDICATOR_SET'
 export const LAYER_EDIT_PERIOD_NAME_SET = 'LAYER_EDIT_PERIOD_NAME_SET'
 export const LAYER_EDIT_PERIOD_SET = 'LAYER_EDIT_PERIOD_SET'
+export const LAYER_EDIT_PERIODS_SET = 'LAYER_EDIT_PERIODS_SET'
 export const LAYER_EDIT_START_DATE_SET = 'LAYER_EDIT_START_DATE_SET'
 export const LAYER_EDIT_END_DATE_SET = 'LAYER_EDIT_END_DATE_SET'
 export const LAYER_EDIT_FILTER_ADD = 'LAYER_EDIT_FILTER_ADD'

diff --git a/src/reducers/layerEdit.js b/src/reducers/layerEdit.js
@@ -12,6 +12,7 @@ import {
 import { START_END_DATES } from '../constants/periods.js'
 import {
     setFiltersFromPeriod,
+    setFiltersFromPeriods,
     setDataItemInColumns,
     setOrgUnitPathInRows,
     removePeriodFromFilters,
@@ -121,6 +122,17 @@ const layerEdit = (state = null, action) => {
                         : [],
             }
 
+        case types.LAYER_EDIT_PERIODS_SET:
+            return {
+                ...state,
+                filters: !(
+                    action.periods.length === 1 &&
+                    action.periods[0].id === START_END_DATES
+                )
+                    ? setFiltersFromPeriods(state.filters, action.periods)
+                    : [],
+            }
+
         case types.LAYER_EDIT_RENDERING_STRATEGY_SET:
             return {
                 ...state,

diff --git a/src/util/analytics.js b/src/util/analytics.js
@@ -83,6 +83,9 @@ export const setOrgUnitPathInRows = (rows = [], id, path) => {
 export const getPeriodFromFilters = (filters = []) =>
     getDimensionItems('pe', filters)[0]
 
+export const getPeriodsFromFilters = (filters = []) =>
+    getDimensionItems('pe', filters)
+
 export const removePeriodFromFilters = (filters = []) => [
     ...filters.filter((f) => f.dimension !== 'pe'),
 ]
@@ -94,6 +97,11 @@ export const setFiltersFromPeriod = (filters, period) => [
     createDimension('pe', [{ ...period }]),
 ]
 
+export const setFiltersFromPeriods = (filters, periods) => [
+    ...removePeriodFromFilters(filters),
+    createDimension('pe', periods),
+]
+
 /* DYNAMIC DIMENSION FILTERS */
 
 export const getDimensionsFromFilters = (filters = []) =>