Fix #10754 add option for not using UTC for date formats in FeatureEd…

…itor (#10760)

* Fix #10754 add option for not using UTC for date formats in FeatureEditor

* tentative for fixing test

* fix lint

* removing test

* fix test

web/client/components/data/featuregrid/editors/DateTimeEditor.jsx

@@ -3,7 +3,8 @@ import AttributeEditor from "./AttributeEditor";
 import React from "react";
 import DateTimePicker from "../../../misc/datetimepicker";
 import utcDateWrapper from "../../../misc/enhancers/utcDateWrapper";
-import {dateFormats} from "../../../../utils/FeatureGridUtils";
+
+import {getDateTimeFormat} from "../formatters";
 
 /**
  * Date time picker enhanced with UTC and timezone offset
@@ -27,6 +28,7 @@ class DateTimeEditor extends AttributeEditor {
     static propTypes = {
         value: PropTypes.string,
         inputProps: PropTypes.object,
+        rowData: PropTypes.object,
         dataType: PropTypes.string,
         minValue: PropTypes.number,
         maxValue: PropTypes.number,
@@ -75,13 +77,13 @@ class DateTimeEditor extends AttributeEditor {
     };
 
     render() {
-        const {dataType, calendar, time} = this.props;
-        const { value } = this.props;
+        const {dataType, calendar, time, value, rowData} = this.props;
         return (<UTCDateTimePicker
             {...this.props}
             type={dataType}
             defaultValue={value}
             value={value}
+            useUTCOffset={rowData?.useUTCOffset}
             onChange={this.onChange}
             calendar={calendar}
             time={time}
@@ -94,7 +96,7 @@ class DateTimeEditor extends AttributeEditor {
             options={{
                 shouldCalendarSetHours: false
             }}
-            format={dateFormats[dataType]}
+            format={getDateTimeFormat(rowData?.dateFormats, dataType)}
         />);
     }
     // when we are using the popover we are using a portal

web/client/components/data/featuregrid/enhancers/editor.js

@@ -114,7 +114,8 @@ const featuresToGrid = compose(
                         get: key => {
                             return (key === "geometry" || key === "_new") ? result[key] : result.properties && result.properties[key];
                         },
-                        dateFormats: props.dateFormats
+                        dateFormats: props.dateFormats,
+                        useUTCOffset: props.useUTCOffset
                     }))
         })
     ),

web/client/components/data/featuregrid/formatters/index.js

@@ -23,10 +23,10 @@ export const StringFormatter = ({value} = {}) => !isNil(value) ? reactStringRepl
 export const NumberFormatter = ({value} = {}) => !isNil(value) ? <NumberFormat value={value} numberParams={{maximumFractionDigits: 17}}/> : null;
 const DEFAULT_DATE_PART = "1970-01-01";
 const DATE_INPUT_FORMAT = "YYYY-MM-DD[Z]";
-export const DateTimeFormatter = ({value, format, type}) => {
+export const DateTimeFormatter = ({value, format, type, useUTCOffset = true}) => {
     return !isNil(value)
         ? moment.utc(value).isValid() // geoserver sometimes returns UTC for time.
-            ? moment.utc(value).format(format)
+            ? useUTCOffset ? moment.utc(value).format(format) : moment(value).format(format)
             : type === 'time'
                 ? moment(`${DEFAULT_DATE_PART}T${value}`).utc().format(format) // time format append default date part
                 : type === "date" && value?.toLowerCase()?.endsWith("z")        // in case: date format and value ends with z
@@ -39,13 +39,14 @@ const EnhancedStringFormatter = handleLongTextEnhancer(StringFormatter);
 const EnhancedNumberFormatter = handleLongTextEnhancer(NumberFormatter);
 const enhancedDateTimeFormatter = handleLongTextEnhancer(DateTimeFormatter);
 
-const getDateTimeFormat = (dateFormats, localType) => get(dateFormats, localType) ?? defaultDateFormats[localType];
+export const getDateTimeFormat = (dateFormats, localType) => get(dateFormats, localType) ?? defaultDateFormats[localType];
 
 const createEnhancedDateTimeFormatterComponent = (type) => (props) => {
-    const { dateFormats } = props?.row || {};
+    const { dateFormats, useUTCOffset } = props?.row || {};
     const format = getDateTimeFormat(dateFormats, type);
     return enhancedDateTimeFormatter({
         ...props,
+        useUTCOffset,
         format,
         type
     });
@@ -98,7 +99,7 @@ export const getFormatter = (desc, {featureGridFormatter} = {}) => {
             return Formatter;
         }
         return (props) => {
-            return <Formatter {...props} config={usedFormatter} />;
+            return <Formatter {...props}  config={usedFormatter} />;
         };
     }
     // we should avoid to create component in formatters

web/client/components/misc/enhancers/utcDateWrapper.js

@@ -32,7 +32,11 @@ const DEFAULT_TIME_PART = "00:00:00";
  * actual timezone
 */
 
-export default ({dateTypeProp = "type", dateProp = 'date', setDateProp = 'onSetDate'} = {}) => compose(
+export default ({
+    dateTypeProp = "type",
+    dateProp = 'date',
+    setDateProp = 'onSetDate'
+} = {}) => compose(
     withPropsOnChange([dateProp], ({ [dateProp]: date, [dateTypeProp]: type, useUTCOffset = true }) => {
         let dateToParse = date;
         let datePart = DEFAULT_DATE_PART;

web/client/plugins/FeatureEditor.jsx

@@ -77,6 +77,7 @@ import {isViewportFilterActive} from "../selectors/featuregrid";
   * @prop {array} cfg.snapConfig.additionalLayers Array of additional layers to include into snapping layers list. Provides a way to include layers from "state.additionallayers".
   * @prop {array} cfg.filterByViewport Activate filter by viewport tool by default.
   * @prop {array} cfg.showFilterByViewportTool Show button to toggle filter by viewport in toolbar.
+  * @prop {boolean} cfg.useUTCOffset avoid using UTC dates in attribute table and datetime editor, should be kept consistent with dateFormats
   * @prop {object} cfg.dateFormats Allows to specify custom date formats ( in [ISO_8601](https://en.wikipedia.org/wiki/ISO_8601)  format) to use to display dates in the table. `date` `date-time` and `time` are the supported entries for the date format. Example:
   * @prop {boolean} cfg.showPopoverSync default false. Hide the popup of map sync if false, shows the popup of map sync if true
   * ```

web/client/plugins/featuregrid/FeatureEditor.jsx

@@ -95,6 +95,7 @@ const Dock = connect(createSelector(
   * @prop {number} cfg.snapConfig.maxFeatures defines features limit for request that loads vector data of WMS layer.
   * @prop {array} cfg.snapConfig.additionalLayers Array of additional layers to include into snapping layers list. Provides a way to include layers from "state.additionallayers"
   * @prop {object} cfg.dateFormats object containing custom formats for one of the date/time attribute types. Following keys are supported: "date-time", "date", "time"
+  * @prop {boolean} cfg.useUTCOffset avoid using UTC dates in attribute table and datetime editor, should be kept consistent with dateFormats, default is true
   * @prop {boolean} cfg.showPopoverSync default false. Hide the popup of map sync if false, shows the popup of map sync if true
   *
   * @classdesc
@@ -138,7 +139,8 @@ const Dock = connect(createSelector(
   *       "date-time": "YYYY-MM-DDTHH:mm:ss[Z]",
   *       "date": "YYYY-MM-DD[Z]",
   *       "time": "HH:mm:ss[Z]"
-  *     }
+  *     },
+  *     "useUTCOffset": true
   *   }
   * }
   * ```
@@ -245,6 +247,7 @@ const FeatureDock = (props = {
                                     size={props.size}
                                     actionOpts={{maxZoom}}
                                     dateFormats={props.dateFormats}
+                                    useUTCOffset={props.useUTCOffset}
                                 />
                             </BorderLayout> }