date-range-fix (sartography#1673)

* add debounce to date input fields in date range picker to properly format dates w/ burnettk * use descriptive ruff ids for pre-commit w/ burnettk --------- Co-authored-by: jasquat <[email protected]>
sumesh-aot · Jun 4, 2024 · fe2a8da · fe2a8da
1 parent 5cc86a8
commit fe2a8da
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -25,7 +25,7 @@ repos:
         language: system
         types: [text]
         stages: [commit, push, manual]
-      - id: ruff
+      - id: ruff-check
         args: [check, --fix]
         files: ^spiffworkflow-backend/
         name: ruff
@@ -36,7 +36,7 @@ repos:
         # this is also specified in spiffworkflow-backend/pyproject.toml but we run pre-commit
         # with all-files which ignores that
         exclude: "/migrations/"
-      - id: ruff
+      - id: ruff-format
         args: [format]
         files: ^spiffworkflow-backend/
         name: ruff

diff --git a/spiffworkflow-frontend/src/config.tsx b/spiffworkflow-frontend/src/config.tsx
@@ -98,7 +98,7 @@ const supportedDateFormatTypes = {
   dd: '01',
 };
 const unsupportedFormatTypes = splitDateFormat.filter(
-  (x) => !Object.keys(supportedDateFormatTypes).includes(x)
+  (x) => !Object.keys(supportedDateFormatTypes).includes(x),
 );
 const formattedSupportedDateTypes: string[] = [];
 Object.entries(supportedDateFormatTypes).forEach(([key, value]) => {
@@ -107,8 +107,8 @@ Object.entries(supportedDateFormatTypes).forEach(([key, value]) => {
 if (unsupportedFormatTypes.length > 0) {
   throw new Error(
     `Given SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_DATE_FORMAT is not supported. Given: ${generalDateFormat} with invalid options: ${unsupportedFormatTypes.join(
-      ', '
-    )}. Valid options are: ${formattedSupportedDateTypes.join(', ')}`
+      ', ',
+    )}. Valid options are: ${formattedSupportedDateTypes.join(', ')}`,
   );
 }
 const carbonDateFormat = generalDateFormat

diff --git a/spiffworkflow-frontend/src/rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget.tsx b/spiffworkflow-frontend/src/rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget.tsx
@@ -7,6 +7,7 @@ import {
 } from '../../../config';
 import { getCommonAttributes } from '../../helpers';
 import DateAndTimeService from '../../../services/DateAndTimeService';
+import { useDebouncedCallback } from 'use-debounce';
 
 interface widgetArgs {
   id: string;
@@ -42,20 +43,20 @@ export default function DateRangePickerWidget({
     label,
     schema,
     uiSchema,
-    rawErrors
+    rawErrors,
   );
 
   const onChangeLocal = useCallback(
     (dateRange: Date[]) => {
       let dateRangeString;
       const startDate = DateAndTimeService.convertDateObjectToFormattedString(
-        dateRange[0]
+        dateRange[0],
       );
       if (startDate) {
         const startDateYMD =
           DateAndTimeService.dateStringToYMDFormat(startDate);
         const endDate = DateAndTimeService.convertDateObjectToFormattedString(
-          dateRange[1]
+          dateRange[1],
         );
         dateRangeString = startDateYMD;
         if (endDate) {
@@ -65,7 +66,7 @@ export default function DateRangePickerWidget({
       }
       onChange(dateRangeString);
     },
-    [onChange]
+    [onChange],
   );
 
   let dateValue: (Date | null)[] | null = value;
@@ -85,6 +86,17 @@ export default function DateRangePickerWidget({
     dateValue = [startDate, endDate];
   }
 
+  const addDebouncedOnChangeDate = useDebouncedCallback(
+    (fullObject: React.ChangeEvent<HTMLInputElement>) => {
+      fullObject.target.value =
+        DateAndTimeService.attemptToConvertUnknownDateStringFormatToKnownFormat(
+          fullObject.target.value,
+        );
+    },
+    // delay in ms
+    100,
+  );
+
   return (
     <DatePicker
       className="date-input"
@@ -97,6 +109,7 @@ export default function DateRangePickerWidget({
         id={`${id}-start`}
         placeholder={DATE_FORMAT_FOR_DISPLAY}
         helperText={commonAttributes.helperText}
+        labelText=""
         type="text"
         size="md"
         autocomplete="off"
@@ -105,17 +118,20 @@ export default function DateRangePickerWidget({
         invalidText={commonAttributes.errorMessageForField}
         autoFocus={autofocus}
         pattern={null}
+        onChange={addDebouncedOnChangeDate}
       />
       <DatePickerInput
         id={`${id}-end`}
         placeholder={DATE_FORMAT_FOR_DISPLAY}
+        labelText=""
         type="text"
         size="md"
         autocomplete="off"
         disabled={disabled || readonly}
         invalid={commonAttributes.invalid}
         autoFocus={autofocus}
         pattern={null}
+        onChange={addDebouncedOnChangeDate}
       />
     </DatePicker>
   );