fix: update periodError handling

dhis2 · Dec 12, 2024 · 051a9bd · 051a9bd
1 parent 2d74cb0
commit 051a9bd
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 34 deletions.
diff --git a/src/components/edit/event/EventDialog.js b/src/components/edit/event/EventDialog.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { NoticeBox } from '@dhis2/ui'
+import { NoticeBox, IconErrorFilled24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
@@ -18,8 +18,6 @@ import {
     setOrgUnits,
 } from '../../../actions/layerEdit.js'
 import {
-    DEFAULT_START_DATE,
-    DEFAULT_END_DATE,
     EVENT_COLOR,
     EVENT_RADIUS,
     EVENT_BUFFER,
@@ -117,29 +115,25 @@ class EventDialog extends Component {
             endDate,
             orgUnits,
             setPeriod,
-            setStartDate,
-            setEndDate,
             setOrgUnits,
         } = this.props
 
         const period = getPeriodFromFilters(filters)
         const { keyAnalysisRelativePeriod: defaultPeriod, hiddenPeriods } =
             systemSettings
 
+        const hasDate = startDate !== undefined && endDate !== undefined
+
         // Set default period from system settings
         if (
             !period &&
-            !startDate &&
-            !endDate &&
+            !hasDate &&
             defaultPeriod &&
             isPeriodAvailable(defaultPeriod, hiddenPeriods)
         ) {
             setPeriod({
                 id: defaultPeriod,
             })
-        } else if (!startDate && !endDate) {
-            setStartDate(DEFAULT_START_DATE)
-            setEndDate(DEFAULT_END_DATE)
         }
 
         // Set org unit tree roots as default
@@ -152,18 +146,38 @@ class EventDialog extends Component {
     }
 
     componentDidUpdate(prev) {
-        const { validateLayer, onLayerValidation } = this.props
+        const {
+            validateLayer,
+            onLayerValidation,
+            filters,
+            startDate,
+            endDate,
+            setStartDate,
+            setEndDate,
+        } = this.props
+        const { periodError } = this.state
 
         if (validateLayer && validateLayer !== prev.validateLayer) {
             onLayerValidation(this.validate())
         }
+
+        const hasDate = startDate !== undefined || endDate !== undefined
+        if (hasDate && getPeriodFromFilters(filters) !== undefined) {
+            setStartDate()
+            setEndDate()
+            this.setErrorState('periodError', null, 'period')
+        } else if (
+            periodError &&
+            (startDate !== prev.startDate || endDate !== prev.endDate)
+        ) {
+            this.setErrorState('periodError', null, 'period')
+        }
     }
 
     render() {
         const {
             // layer options
             columns = [],
-            endDate,
             eventClustering,
             eventStatus,
             eventCoordinateField,
@@ -174,6 +188,7 @@ class EventDialog extends Component {
             program,
             programStage,
             startDate,
+            endDate,
             legendSet,
             periodsSettings,
         } = this.props
@@ -277,12 +292,17 @@ class EventDialog extends Component {
                                 <StartEndDate
                                     startDate={startDate}
                                     endDate={endDate}
-                                    errorText={periodError}
                                     setStartDate={setStartDate}
                                     setEndDate={setEndDate}
                                     periodsSettings={periodsSettings}
                                 />
                             )}
+                            {periodError && (
+                                <div key="error" className={styles.error}>
+                                    <IconErrorFilled24 />
+                                    {periodError}
+                                </div>
+                            )}
                         </div>
                     )}
                     {tab === 'orgunits' && (

diff --git a/src/components/edit/thematic/ThematicDialog.js b/src/components/edit/thematic/ThematicDialog.js
@@ -131,7 +131,6 @@ class ThematicDialog extends Component {
 
         const dataItem = getDataItemFromColumns(columns)
         const periods = getPeriodsFromFilters(filters)
-
         const { keyAnalysisRelativePeriod: defaultPeriod, hiddenPeriods } =
             systemSettings
 
@@ -151,11 +150,7 @@ class ThematicDialog extends Component {
             }
         }
 
-        const hasDate =
-            startDate !== undefined &&
-            startDate !== '' &&
-            endDate !== undefined &&
-            endDate !== ''
+        const hasDate = startDate !== undefined && endDate !== undefined
 
         if (hasDate) {
             const keepPeriod = false
@@ -209,7 +204,11 @@ class ThematicDialog extends Component {
             setRenderingStrategy,
             validateLayer,
             onLayerValidation,
+            startDate,
+            endDate,
+            filters,
         } = this.props
+        const { periodError } = this.state
 
         // Set rendering strategy to single if not relative period
         if (
@@ -241,19 +240,22 @@ class ThematicDialog extends Component {
         if (periodType !== prev.periodType) {
             switch (periodType) {
                 case PREDEFINED_PERIODS:
-                    // !TODO Backup Start-End dates
-                    // Remove Start-End dates
-                    // !TODO Restore Predefined periods backup
-                    setStartDate('')
-                    setEndDate('')
+                    setStartDate()
+                    setEndDate()
                     break
                 case START_END_DATES:
-                    // !TODO Backup Predefined periods
-                    // Remove Predefined periods
-                    // !TODO Restore Start-End dates backup
                     setPeriods([])
                     break
             }
+            this.setErrorState('periodError', null, 'period')
+        } else if (
+            periodError &&
+            (startDate !== prev.startDate ||
+                endDate !== prev.endDate ||
+                getPeriodsFromFilters(filters) !==
+                    getPeriodsFromFilters(prev.filters))
+        ) {
+            this.setErrorState('periodError', null, 'period')
         }
     }
 

diff --git a/src/components/edit/trackedEntity/TrackedEntityDialog.js b/src/components/edit/trackedEntity/TrackedEntityDialog.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { NoticeBox } from '@dhis2/ui'
+import { NoticeBox, IconErrorFilled24 } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component, Fragment } from 'react'
@@ -106,8 +106,10 @@ class TrackedEntityDialog extends Component {
             setOrgUnits,
         } = this.props
 
+        const hasDate = startDate !== undefined && endDate !== undefined
+
         // Set default period (last year)
-        if (!startDate && !endDate) {
+        if (!hasDate) {
             setStartDate(DEFAULT_START_DATE)
             setEndDate(DEFAULT_END_DATE)
         }
@@ -128,11 +130,20 @@ class TrackedEntityDialog extends Component {
     }
 
     componentDidUpdate(prev) {
-        const { validateLayer, onLayerValidation } = this.props
+        const { validateLayer, onLayerValidation, startDate, endDate } =
+            this.props
+        const { periodError } = this.state
 
         if (validateLayer && validateLayer !== prev.validateLayer) {
             onLayerValidation(this.validate())
         }
+
+        if (
+            periodError &&
+            (startDate !== prev.startDate || endDate !== prev.endDate)
+        ) {
+            this.setErrorState('periodError', null, 'period')
+        }
     }
 
     render() {
@@ -279,11 +290,16 @@ class TrackedEntityDialog extends Component {
                             <StartEndDate
                                 startDate={startDate}
                                 endDate={endDate}
-                                errorText={periodError}
                                 setStartDate={setStartDate}
                                 setEndDate={setEndDate}
                                 periodsSettings={periodsSettings}
                             />
+                            {periodError && (
+                                <div key="error" className={styles.error}>
+                                    <IconErrorFilled24 />
+                                    {periodError}
+                                </div>
+                            )}
                         </div>
                     )}
                     {tab === 'orgunits' && (

diff --git a/src/components/periods/StartEndDate.js b/src/components/periods/StartEndDate.js
@@ -7,8 +7,14 @@ import { setStartDate, setEndDate } from '../../actions/layerEdit.js'
 import styles from './styles/StartEndDate.module.css'
 
 const StartEndDate = (props) => {
-    const { startDate, endDate, setStartDate, setEndDate, periodsSettings } =
-        props
+    const {
+        startDate = '',
+        endDate = '',
+        setStartDate,
+        setEndDate,
+        errorText,
+        periodsSettings,
+    } = props
 
     const [start, setStart] = useState(startDate.slice(0, 10))
     const [end, setEnd] = useState(endDate.slice(0, 10))
@@ -52,13 +58,19 @@ const StartEndDate = (props) => {
                     dataTest="end-date-input"
                 />
             </div>
+            {errorText && (
+                <div key="error" className={styles.error}>
+                    {errorText}
+                </div>
+            )}
         </Field>
     ) : null
 }
 StartEndDate.propTypes = {
     setEndDate: PropTypes.func.isRequired,
     setStartDate: PropTypes.func.isRequired,
     endDate: PropTypes.string,
+    errorText: PropTypes.string,
     periodsSettings: PropTypes.object,
     startDate: PropTypes.string,
 }

diff --git a/src/util/time.js b/src/util/time.js
@@ -27,7 +27,7 @@ const shortDateRegexp = /^\d{4}-\d{2}-\d{2}$/
  * @returns {String}
  */
 const isValidDateFormat = (dateString) =>
-    shortDateRegexp.test(dateString.substr(0, 10))
+    dateString && shortDateRegexp.test(dateString.substr(0, 10))
 
 /**
  * Formats a date string, timestamp or date array into format used by DHIS2 and <input> date