The payload sends the exact format received from the component which …

…differs to what the backend is expecting #1468 Datefield formatting (DD-MM-YYYY) data doesn't match endpoint data/what has been selected #1166
shesha-io · May 20, 2024 · 66395bd · 66395bd
1 parent cbd5011
commit 66395bd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/shesha-reactjs/src/components/debugPanel/dataTree.tsx b/shesha-reactjs/src/components/debugPanel/dataTree.tsx
@@ -84,7 +84,7 @@ export const DebugDataTree: FC<IDebugDataTreeProps> = ({editAll, name, data, las
             pm = pl?.find(x => toCamelCase(x.path) === item);
 
             if (typeof p[item] === 'object') {
-                const n: DataNode = {title: <DebugDataTreeProp name={item} metadata={pm} value={undefined}/>, key, isLeaf: false };
+                const n: DataNode = {title: <DebugDataTreeProp name={item} metadata={pm} value={JSON.stringify(p[item])}/>, key, isLeaf: false };
                 res.push(n);
             } else {
                 const readonly = !editAll && (!pm || isDataPropertyMetadata(pm) && pm?.readonly);

diff --git a/shesha-reactjs/src/components/debugPanel/debugDataTreeProp.tsx b/shesha-reactjs/src/components/debugPanel/debugDataTreeProp.tsx
@@ -40,7 +40,7 @@ export const DebugDataTreeProp: FC<IDebugDataTreeItemProps> = (props) => {
                                 props.onChange(e.target.value);
                         }}
                     />
-            : null
+            : props.value?.toString()
             }
         </Col>
     </Row>;

diff --git a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx
@@ -11,7 +11,6 @@ import {
     DATE_TIME_FORMATS,
     disabledDate,
     getDatePickerValue,
-    getDefaultFormat,
     getFormat,
     getRangePickerValues,
 } from './utils';
@@ -44,26 +43,37 @@ export const DatePickerWrapper: FC<IDateFieldProps> = (props) => {
         readOnly,
         style,
         defaultToMidnight,
+        resolveToUTC,
         ...rest
     } = props;
 
     const dateFormat = props?.dateFormat || getDataProperty(properties, name) || DATE_TIME_FORMATS.date;
     const timeFormat = props?.timeFormat || DATE_TIME_FORMATS.time;
 
-    const defaultFormat = getDefaultFormat(props);
-
     const { formData } = useForm();
 
     const pickerFormat = getFormat(props, properties);
-    const formattedValue = getMoment(value, pickerFormat);
+
+    const convertValue = (localValue: any) => {
+      const newValue = isMoment(localValue) ? localValue : getMoment(localValue, pickerFormat);
+      const val = picker === 'week'
+        ? newValue.startOf('week')
+        : picker === 'month'
+          ? newValue.startOf('month')
+          : picker === 'quarter'
+            ? newValue.startOf('quarter')
+            : picker === 'year'
+              ? newValue.startOf('year')
+              : newValue;
+      return !resolveToUTC ? val.utc(true) : val.local(true);
+    };
 
     const handleDatePickerChange = (localValue: any | null, dateString: string) => {
         if (!dateString?.trim()) {
             (onChange as TimePickerChangeEvent)(null, '');
             return;
         }
-
-        const newValue = isMoment(localValue) ? localValue.format(pickerFormat) : localValue;
+        const newValue = convertValue(localValue);
 
         (onChange as TimePickerChangeEvent)(newValue, dateString);
     };
@@ -73,30 +83,11 @@ export const DatePickerWrapper: FC<IDateFieldProps> = (props) => {
             (onChange as RangePickerChangeEvent)(null, null);
             return;
         }
-        const dates = (values as []).map((val: any) => {
-            if (isMoment(val)) return val.format(defaultFormat);
-
-            return val;
-        });
+        const dates = (values as []).map((val: any) => convertValue(val));
 
         (onChange as RangePickerChangeEvent)(dates, formatString);
     };
 
-    if (readOnly) {
-        const format = showTime
-            ? `${dateFormat} ${timeFormat}`
-            : dateFormat;
-
-        return (
-            <ReadOnlyDisplayFormItem
-                value={formattedValue?.toISOString()}
-                type="datetime"
-                dateFormat={format}
-                timeFormat={timeFormat}
-            />
-        );
-    }
-
     const evaluatedStyle = { width: '100%', ...getStyle(style, formData, globalState) };
 
     if (range) {
@@ -120,6 +111,23 @@ export const DatePickerWrapper: FC<IDateFieldProps> = (props) => {
         );
     }
 
+    const momentValue = getMoment(value, pickerFormat);
+
+    if (readOnly) {
+      const format = showTime
+        ? `${dateFormat} ${timeFormat}`
+        : dateFormat;
+
+      return (
+        <ReadOnlyDisplayFormItem
+          value={momentValue?.toISOString()}
+          type="datetime"
+          dateFormat={format}
+          timeFormat={timeFormat}
+        />
+      );
+    }
+
     return (
         <DatePicker
             className="sha-date-picker"
@@ -135,6 +143,7 @@ export const DatePickerWrapper: FC<IDateFieldProps> = (props) => {
             format={pickerFormat}
             style={evaluatedStyle}
             {...rest}
+            value={momentValue}
             {...getDatePickerValue(props, pickerFormat)}
             allowClear
         />