From e8d226f9b13a93abee91e2c0f30a09bb81e88c9c Mon Sep 17 00:00:00 2001 From: alaa-yahia Date: Sun, 22 Dec 2024 23:51:24 +0200 Subject: [PATCH] fix: keep local calendar date in state in working list filters --- .../Date/DateFilter.component.js | 82 +++++++------------ .../Date/DateFilterManager.component.js | 7 +- .../Date/dateFilterDataGetter.js | 6 +- .../date/stringToMomentDateFormat.js | 4 +- 4 files changed, 36 insertions(+), 63 deletions(-) diff --git a/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilter.component.js b/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilter.component.js index 80b002c049..1e03d9167e 100644 --- a/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilter.component.js +++ b/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilter.component.js @@ -1,9 +1,9 @@ // @flow import React, { Component } from 'react'; import classNames from 'classnames'; -import moment from 'moment'; import { withStyles } from '@material-ui/core/styles'; import i18n from '@dhis2/d2-i18n'; +import { Temporal } from '@js-temporal/polyfill'; import { isValidZeroOrPositiveInteger } from 'capture-core-utils/validators/form'; import { SelectBoxes, orientations } from '../../FormFields/Options/SelectBoxes'; import { OptionSet } from '../../../metaData/OptionSet/OptionSet'; @@ -17,8 +17,7 @@ import './calendarFilterStyles.css'; import { mainOptionKeys, mainOptionTranslatedTexts } from './options'; import { getDateFilterData } from './dateFilterDataGetter'; import { RangeFilter } from './RangeFilter.component'; -import { parseDate, convertLocalToIsoCalendar, convertIsoToLocalCalendar } from '../../../utils/converters/date'; -import { systemSettingsStore } from '../../../metaDataMemoryStores'; +import { convertStringToDateFormat } from '../../../utils/converters/date'; const getStyles = (theme: Theme) => ({ fromToContainer: { @@ -119,24 +118,27 @@ const getRelativeRangeErrors = (startValue, endValue, submitAttempted) => { return errors; }; +// eslint-disable-next-line complexity const isAbsoluteRangeFilterValid = (from, to) => { - if (!from?.value && !to?.value) { - return false; - } const fromValue = from?.value; const toValue = to?.value; - const parseResultFrom = fromValue ? parseDate(fromValue) : { isValid: true, moment: null }; - const parseResultTo = toValue ? parseDate(toValue) : { isValid: true, moment: null }; - if (!(parseResultFrom.isValid && parseResultTo.isValid)) { + if (!fromValue && !toValue) { + return false; + } + + const isFromValueValid = from ? from.isValid : true; + const isToValueValid = to ? to.isValid : true; + + if (!isFromValueValid || !isToValueValid) { return false; } - const isValidMomentDate = () => - parseResultFrom.momentDate && - parseResultTo.momentDate && - parseResultFrom.momentDate.isAfter(parseResultTo.momentDate); - return !isValidMomentDate(); + if ((!fromValue && toValue) || (fromValue && !toValue)) { + return true; + } + + return !DateFilter.isFromAfterTo(fromValue, toValue); }; const isRelativeRangeFilterValid = (startValue, endValue) => { @@ -188,11 +190,9 @@ class DateFilterPlain extends Component implements UpdatableFilter } static isFromAfterTo(valueFrom: string, valueTo: string) { - const momentFrom = parseDate(valueFrom).momentDate; - const momentTo = parseDate(valueTo).momentDate; - // $FlowFixMe[incompatible-use] automated comment - // $FlowFixMe[incompatible-call] automated comment - return momentFrom.isAfter(momentTo); + const formattedFrom = convertStringToDateFormat(valueFrom, 'YYYY-MM-DD'); + const fromattedTo = convertStringToDateFormat(valueTo, 'YYYY-MM-DD'); + return Temporal.PlainDate.compare(formattedFrom, fromattedTo) > 0; } toD2DateTextFieldInstance: any; @@ -267,25 +267,12 @@ class DateFilterPlain extends Component implements UpdatableFilter return !values || DateFilter.isFilterValid(values.main, values.from, values.to, values.start, values.end); } - getUpdatedValue(valuePart: Object) { + getUpdatedValue(valuePart: { [key: string]: string }) { + // $FlowFixMe[cannot-spread-indexer] automated comment const valueObject = { ...this.props.value, ...valuePart, }; - const dateFormat = systemSettingsStore.get().dateFormat; - - ['from', 'to'].forEach((key) => { - if (valuePart[key] && valueObject[key]?.value) { - const isValidDate = valuePart[key]?.isValid; - valueObject[key] = { - ...valueObject[key], - value: isValidDate ? - moment(convertLocalToIsoCalendar(valueObject[key].value)).format(dateFormat) : - valueObject[key].value, - }; - } - }); - const isRelativeRangeValue = () => valueObject?.start || valuePart?.start || valuePart?.end; const isAbsoluteRangevalue = () => valueObject?.from || valuePart?.from || valuePart?.to; @@ -358,23 +345,10 @@ class DateFilterPlain extends Component implements UpdatableFilter render() { const { value, classes, onFocusUpdateButton } = this.props; + const fromValue = value?.from; + const toValue = value?.to; const { startValueError, endValueError, dateLogicError, bufferLogicError } = - this.getErrors(); - - const dateFormat = systemSettingsStore.get().dateFormat; - - const formatDate = (dateValue) => { - if (!dateValue) return ''; - const momentValue = moment(dateValue, dateFormat); - if (!momentValue.isValid()) return dateValue; - const isoDate = momentValue.format('YYYY-MM-DD'); - return convertIsoToLocalCalendar(isoDate); - }; - - const from = value?.from; - const to = value?.to; - const fromDate = formatDate(from?.value); - const toDate = formatDate(to?.value); + this.getErrors(); return (
@@ -394,11 +368,11 @@ class DateFilterPlain extends Component implements UpdatableFilter {/* $FlowSuppress: Flow not working 100% with HOCs */} {/* $FlowFixMe[prop-missing] automated comment */}
@@ -407,11 +381,11 @@ class DateFilterPlain extends Component implements UpdatableFilter {/* $FlowSuppress: Flow not working 100% with HOCs */} {/* $FlowFixMe[prop-missing] automated comment */} diff --git a/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilterManager.component.js b/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilterManager.component.js index 928d9fd754..c0464eb8a6 100644 --- a/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilterManager.component.js +++ b/src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilterManager.component.js @@ -1,8 +1,7 @@ // @flow import * as React from 'react'; -import moment from 'moment'; import log from 'loglevel'; -import { convertMomentToDateFormatString } from '../../../utils/converters/date'; +import { convertIsoToLocalCalendar } from '../../../utils/converters/date'; import { DateFilter } from './DateFilter.component'; import { mainOptionKeys } from './options'; import { dateFilterTypes } from './constants'; @@ -22,8 +21,8 @@ type State = { export class DateFilterManager extends React.Component { static convertDateForEdit(rawValue: string) { - const momentInstance = moment(rawValue); - return convertMomentToDateFormatString(momentInstance); + const localDate = convertIsoToLocalCalendar(rawValue); + return localDate; } static calculateAbsoluteRangeValueState(filter: DateFilterData) { return { diff --git a/src/core_modules/capture-core/components/FiltersForTypes/Date/dateFilterDataGetter.js b/src/core_modules/capture-core/components/FiltersForTypes/Date/dateFilterDataGetter.js index f7758cd1b1..6be16601ed 100644 --- a/src/core_modules/capture-core/components/FiltersForTypes/Date/dateFilterDataGetter.js +++ b/src/core_modules/capture-core/components/FiltersForTypes/Date/dateFilterDataGetter.js @@ -2,7 +2,7 @@ import { parseNumber } from 'capture-core-utils/parsers'; import { mainOptionKeys } from './options'; import { dateFilterTypes } from './constants'; -import { parseDate } from '../../../utils/converters/date'; +import { convertLocalToIsoCalendar } from '../../../utils/converters/date'; import { type AbsoluteDateFilterData, type RelativeDateFilterData, type DateValue } from './types'; type Value = { @@ -20,13 +20,13 @@ function convertAbsoluteDate(fromValue: ?string, toValue: ?string) { if (fromValue) { // $FlowFixMe[incompatible-type] automated comment - const fromClientValue: string = parseDate(fromValue).momentDate; + const fromClientValue: string = convertLocalToIsoCalendar(fromValue); rangeData.ge = fromClientValue; } if (toValue) { // $FlowFixMe[incompatible-type] automated comment - const toClientValue: string = parseDate(toValue).momentDate; + const toClientValue: string = convertLocalToIsoCalendar(toValue); rangeData.le = toClientValue; } diff --git a/src/core_modules/capture-core/utils/converters/date/stringToMomentDateFormat.js b/src/core_modules/capture-core/utils/converters/date/stringToMomentDateFormat.js index eed1df7957..1e718a5119 100644 --- a/src/core_modules/capture-core/utils/converters/date/stringToMomentDateFormat.js +++ b/src/core_modules/capture-core/utils/converters/date/stringToMomentDateFormat.js @@ -8,9 +8,9 @@ import { systemSettingsStore } from '../../../metaDataMemoryStores'; * @param {*} string - the string instance * @returns {string} */ -export function convertStringToDateFormat(date: string) { +export function convertStringToDateFormat(date: string, format) { if (!date || !date.length) { return ''; } - const dateFormat = systemSettingsStore.get().dateFormat; + const dateFormat = format || systemSettingsStore.get().dateFormat; const formattedDateString = moment(date, dateFormat).format(dateFormat); return formattedDateString; }