From 8cb38bada3d0725c7d87c89d18cabcd2ccc614d8 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Wed, 12 Apr 2023 15:49:54 -0400
Subject: [PATCH] display the date in a react json schema form like the config
 but change it to y-m-d for processing w/ burnettk

---
 spiffworkflow-frontend/src/helpers.tsx        | 22 ++++++++++++++++++-
 .../src/routes/TaskShow.tsx                   |  5 ++++-
 .../BaseInputTemplate/BaseInputTemplate.tsx   | 10 ++++++++-
 .../themes/carbon/DateWidget/DateWidget.tsx   |  7 +++++-
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx
index 273e12ae..6599acc3 100644
--- a/spiffworkflow-frontend/src/helpers.tsx
+++ b/spiffworkflow-frontend/src/helpers.tsx
@@ -59,12 +59,27 @@ export const convertDateObjectToFormattedString = (dateObject: Date) => {
   return null;
 };
 
+export const dateStringToYMDFormat = (dateString: string) => {
+  if (dateString.length < 10) {
+    return dateString;
+  }
+  if (DATE_FORMAT.startsWith('dd')) {
+    const d = dateString.split('-');
+    return `${d[2]}-${d[1]}-${d[0]}`;
+  }
+  if (DATE_FORMAT.startsWith('MM')) {
+    const d = dateString.split('-');
+    return `${d[2]}-${d[0]}-${d[1]}`;
+  }
+  return dateString;
+};
+
 export const convertDateAndTimeStringsToDate = (
   dateString: string,
   timeString: string
 ) => {
   if (dateString && timeString) {
-    return new Date(`${dateString}T${timeString}`);
+    return new Date(`${dateStringToYMDFormat(dateString)}T${timeString}`);
   }
   return null;
 };
@@ -84,6 +99,11 @@ export const convertStringToDate = (dateString: string) => {
   return convertDateAndTimeStringsToSeconds(dateString, '00:10:00');
 };
 
+export const ymdDateStringToConfiguredFormat = (dateString: string) => {
+  const dateObject = convertStringToDate(dateString);
+  return convertDateObjectToFormattedString(dateObject);
+};
+
 export const convertSecondsToDateObject = (seconds: number) => {
   if (seconds) {
     return new Date(seconds * 1000);
diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx
index 863ee5f3..5b92d64a 100644
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@@ -19,7 +19,10 @@ import MDEditor from '@uiw/react-md-editor';
 import Form from '../themes/carbon';
 import HttpService from '../services/HttpService';
 import useAPIError from '../hooks/UseApiError';
-import { modifyProcessIdentifierForPathParam } from '../helpers';
+import {
+  dateStringToYMDFormat,
+  modifyProcessIdentifierForPathParam,
+} from '../helpers';
 import { ProcessInstanceTask } from '../interfaces';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 
diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
index da4412cc..1dbda4ce 100644
--- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
@@ -10,6 +10,7 @@ import {
 
 import { useCallback } from 'react';
 import { DATE_FORMAT, DATE_FORMAT_CARBON } from '../../../config';
+import { ymdDateStringToConfiguredFormat } from '../../../helpers';
 
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
@@ -104,6 +105,13 @@ export default function BaseInputTemplate<
 
   let component = null;
   if (type === 'date') {
+    // display the date in a date input box as the config wants.
+    // it should in be y-m-d when it gets here.
+    let dateValue: string | null = '';
+    if (value || value === 0) {
+      dateValue = ymdDateStringToConfiguredFormat(value);
+    }
+
     component = (
       <DatePicker
         dateFormat={DATE_FORMAT_CARBON}
@@ -116,10 +124,10 @@ export default function BaseInputTemplate<
           helperText={helperText}
           type="text"
           size="md"
+          value={dateValue}
           autocomplete="off"
           allowInput={false}
           onChange={_onChange}
-          value={value || value === 0 ? value : ''}
           invalid={invalid}
           invalidText={errorMessageForField}
           autoFocus={autofocus}
diff --git a/spiffworkflow-frontend/src/themes/carbon/DateWidget/DateWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/DateWidget/DateWidget.tsx
index 91846dfc..7a821641 100644
--- a/spiffworkflow-frontend/src/themes/carbon/DateWidget/DateWidget.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/DateWidget/DateWidget.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { getTemplate, WidgetProps } from '@rjsf/utils';
+import { dateStringToYMDFormat } from '../../../helpers';
 
 function DateWidget(props: WidgetProps) {
   const { onChange, options, registry } = props;
@@ -9,7 +10,11 @@ function DateWidget(props: WidgetProps) {
     options
   );
   const handleChange = useCallback(
-    (value: any) => onChange(value || undefined),
+    (value: any) => {
+      // react json schema forces y-m-d format for dates
+      const newValue = dateStringToYMDFormat(value);
+      onChange(newValue || undefined);
+    },
     [onChange]
   );