times on instance list table are working now w/ burnettk

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -21,18 +21,15 @@ import {
   TableHead,
   TableRow,
   TimePicker,
-  TimePickerSelect,
-  SelectItem,
   // @ts-ignore
 } from '@carbon/react';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
 import {
-  convertDateObjectToFormattedString,
+  convertDateAndTimeStringsToSeconds,
-  convertDateStringToSeconds,
+  convertDateObjectToFormattedHoursMinutes,
-  convertDateToSeconds,
-  convertSecondsToDateObject,
   convertSecondsToFormattedDateString,
   convertSecondsToFormattedDateTime,
+  convertSecondsToFormattedTimeHoursMinutes,
   getPageInfoFromSearchParams,
   getProcessModelFullIdentifierFromSearchParams,
   modifyProcessModelPath,
@@ -56,6 +53,10 @@ type OwnProps = {
   perPageOptions?: number[];
 };
 
+interface dateParameters {
+  [key: string]: ((..._args: any[]) => any)[];
+}
+
 export default function ProcessInstanceListTable({
   filtersEnabled = true,
   processModelFullIdentifier,
@@ -73,14 +74,20 @@ export default function ProcessInstanceListTable({
 
   const oneHourInSeconds = 3600;
   const oneMonthInSeconds = oneHourInSeconds * 24 * 30;
-  const [startFrom, setStartFrom] = useState<Date | null | undefined | string>(
+  const [startFromDate, setStartFromDate] = useState<string>('');
-    null
+  const [startToDate, setStartToDate] = useState<string>('');
-  );
+  const [endFromDate, setEndFromDate] = useState<string>('');
-  const [startTo, setStartTo] = useState<Date | null>(null);
+  const [endToDate, setEndToDate] = useState<string>('');
-  const [startFromString, setStartFromString] = useState<string>('');
+  const [startFromTime, setStartFromTime] = useState<string>('');
-  const [endFrom, setEndFrom] = useState<Date | null>(null);
+  const [startToTime, setStartToTime] = useState<string>('');
-  const [endTo, setEndTo] = useState<Date | null>(null);
+  const [endFromTime, setEndFromTime] = useState<string>('');
+  const [endToTime, setEndToTime] = useState<string>('');
   const [showFilterOptions, setShowFilterOptions] = useState<boolean>(false);
+  const [startFromTimeInvalid, setStartFromTimeInvalid] =
+    useState<boolean>(false);
+  const [startToTimeInvalid, setStartToTimeInvalid] = useState<boolean>(false);
+  const [endFromTimeInvalid, setEndFromTimeInvalid] = useState<boolean>(false);
+  const [endToTimeInvalid, setEndToTimeInvalid] = useState<boolean>(false);
 
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
@@ -96,14 +103,23 @@ export default function ProcessInstanceListTable({
   const [processModelSelection, setProcessModelSelection] =
     useState<ProcessModel | null>(null);
 
-  const parametersToAlwaysFilterBy = useMemo(() => {
+  const dateParametersToAlwaysFilterBy: dateParameters = useMemo(() => {
     return {
-      start_from: setStartFrom,
+      start_from: [setStartFromDate, setStartFromTime],
-      start_to: setStartTo,
+      start_to: [setStartToDate, setStartToTime],
-      end_from: setEndFrom,
+      end_from: [setEndFromDate, setEndFromTime],
-      end_to: setEndTo,
+      end_to: [setEndToDate, setEndToTime],
     };
-  }, [setStartFrom, setStartTo, setEndFrom, setEndTo]);
+  }, [
+    setStartFromDate,
+    setStartFromTime,
+    setStartToDate,
+    setStartToTime,
+    setEndFromDate,
+    setEndFromTime,
+    setEndToDate,
+    setEndToTime,
+  ]);
 
   const parametersToGetFromSearchParams = useMemo(() => {
     return {
@@ -140,20 +156,27 @@ export default function ProcessInstanceListTable({
         queryParamString += `&user_filter=${userAppliedFilter}`;
       }
 
-      Object.keys(parametersToAlwaysFilterBy).forEach((paramName: string) => {
+      Object.keys(dateParametersToAlwaysFilterBy).forEach(
-        // @ts-expect-error TS(7053) FIXME:
+        (paramName: string) => {
-        const functionToCall = parametersToAlwaysFilterBy[paramName];
+          const dateFunctionToCall =
+            dateParametersToAlwaysFilterBy[paramName][0];
+          const timeFunctionToCall =
+            dateParametersToAlwaysFilterBy[paramName][1];
           const searchParamValue = searchParams.get(paramName);
           if (searchParamValue) {
             queryParamString += `&${paramName}=${searchParamValue}`;
-          const dateObject = convertSecondsToDateObject(
+            const dateString = convertSecondsToFormattedDateString(
               searchParamValue as any
             );
-          console.log('dateObject1', dateObject);
+            dateFunctionToCall(dateString);
-          functionToCall(dateObject);
+            const timeString = convertSecondsToFormattedTimeHoursMinutes(
+              searchParamValue as any
+            );
+            timeFunctionToCall(timeString);
             setShowFilterOptions(true);
           }
-      });
+        }
+      );
 
       Object.keys(parametersToGetFromSearchParams).forEach(
         (paramName: string) => {
@@ -167,10 +190,6 @@ export default function ProcessInstanceListTable({
             const functionToCall = parametersToGetFromSearchParams[paramName];
             queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
             if (functionToCall !== null) {
-              console.log(
-                'searchParams.get(paramName)',
-                searchParams.get(paramName)
-              );
               functionToCall(searchParams.get(paramName) || '');
             }
             setShowFilterOptions(true);
@@ -226,7 +245,7 @@ export default function ProcessInstanceListTable({
     params,
     oneMonthInSeconds,
     oneHourInSeconds,
-    parametersToAlwaysFilterBy,
+    dateParametersToAlwaysFilterBy,
     parametersToGetFromSearchParams,
     filtersEnabled,
     paginationQueryParamPrefix,
@@ -261,10 +280,22 @@ export default function ProcessInstanceListTable({
     );
     let queryParamString = `per_page=${perPage}&page=${page}&user_filter=true`;
 
-    const startFromSeconds = convertDateToSeconds(startFrom);
+    const startFromSeconds = convertDateAndTimeStringsToSeconds(
-    const endFromSeconds = convertDateToSeconds(endFrom);
+      startFromDate,
-    const startToSeconds = convertDateToSeconds(startTo);
+      startFromTime
-    const endToSeconds = convertDateToSeconds(endTo);
+    );
+    const startToSeconds = convertDateAndTimeStringsToSeconds(
+      startToDate,
+      startToTime
+    );
+    const endFromSeconds = convertDateAndTimeStringsToSeconds(
+      endFromDate,
+      endFromTime
+    );
+    const endToSeconds = convertDateAndTimeStringsToSeconds(
+      endToDate,
+      endToTime
+    );
     if (isTrueComparison(startFromSeconds, '>', startToSeconds)) {
       setErrorMessage({
         message: '"Start date from" cannot be after "start date to"',
@@ -318,10 +349,12 @@ export default function ProcessInstanceListTable({
     labelString: any,
     name: any,
     initialDate: any,
-    initialDateString: string,
+    initialTime: string,
-    onChangeFunction: any
+    onChangeDateFunction: any,
+    onChangeTimeFunction: any,
+    timeInvalid: boolean,
+    setTimeInvalid: any
   ) => {
-    // value={convertDateObjectToFormattedString(initialDate)}
     return (
       <>
         <DatePicker dateFormat={DATE_FORMAT_CARBON} datePickerType="single">
@@ -334,29 +367,29 @@ export default function ProcessInstanceListTable({
             autocomplete="off"
             allowInput={false}
             onChange={(dateChangeEvent: any) => {
-              let dateTime = new Date();
+              if (!initialDate && !initialTime) {
-              if (initialDate) {
+                onChangeTimeFunction(
-                dateTime = new Date(initialDate.getTime());
+                  convertDateObjectToFormattedHoursMinutes(new Date())
+                );
               }
-
+              onChangeDateFunction(dateChangeEvent.srcElement.value);
-              const [year, month, day] =
-                dateChangeEvent.srcElement.value.split('-');
-              dateTime.setDate(day);
-              dateTime.setMonth(month - 1);
-              // @ts-ignore setYear does exist on Date
-              dateTime.setYear(year);
-              onChangeFunction(dateTime);
             }}
-            value={initialDateString}
+            value={initialDate}
           />
         </DatePicker>
         <TimePicker
-          invalid
+          invalid={timeInvalid}
           id="time-picker"
           labelText="Select a time"
           pattern="^([01]\d|2[0-3]):?([0-5]\d)$"
+          value={initialTime}
           onChange={(event: any) => {
-            console.log('event', event);
+            if (event.srcElement.validity.valid) {
+              setTimeInvalid(false);
+            } else {
+              setTimeInvalid(true);
+            }
+            onChangeTimeFunction(event.srcElement.value);
           }}
         />
       </>
@@ -386,17 +419,20 @@ export default function ProcessInstanceListTable({
   const clearFilters = () => {
     setProcessModelSelection(null);
     setProcessStatusSelection([]);
-    setStartFrom(null);
+    setStartFromDate('');
-    setStartTo(null);
+    setStartFromTime('');
-    setEndFrom(null);
+    setStartToDate('');
-    setEndTo(null);
+    setStartToTime('');
+    setEndFromDate('');
+    setEndFromTime('');
+    setEndToDate('');
+    setEndToTime('');
   };
 
   const filterOptions = () => {
     if (!showFilterOptions) {
       return null;
     }
-    console.log('startFrom', startFrom);
     return (
       <>
         <Grid fullWidth className="with-bottom-margin">
@@ -416,36 +452,48 @@ export default function ProcessInstanceListTable({
             {dateComponent(
               'Start date from',
               'start-from',
-              startFrom,
+              startFromDate,
-              startFromString,
+              startFromTime,
-              setStartFrom
+              setStartFromDate,
+              setStartFromTime,
+              startFromTimeInvalid,
+              setStartFromTimeInvalid
             )}
           </Column>
           <Column md={4}>
             {dateComponent(
               'Start date to',
               'start-to',
-              startTo,
+              startToDate,
-              startFromString,
+              startToTime,
-              setStartTo
+              setStartToDate,
+              setStartToTime,
+              startToTimeInvalid,
+              setStartToTimeInvalid
             )}
           </Column>
           <Column md={4}>
             {dateComponent(
               'End date from',
               'end-from',
-              endFrom,
+              endFromDate,
-              startFromString,
+              endFromTime,
-              setEndFrom
+              setEndFromDate,
+              setEndFromTime,
+              endFromTimeInvalid,
+              setEndFromTimeInvalid
             )}
           </Column>
           <Column md={4}>
             {dateComponent(
               'End date to',
               'end-to',
-              endTo,
+              endToDate,
-              startFromString,
+              endToTime,
-              setEndTo
+              setEndToDate,
+              setEndToTime,
+              endToTimeInvalid,
+              setEndToTimeInvalid
             )}
           </Column>
         </Grid>
@@ -592,9 +640,6 @@ export default function ProcessInstanceListTable({
   };
 
   if (pagination) {
-    setStartFromString(
-      convertDateObjectToFormattedString(startFrom as any) || ''
-    );
     // eslint-disable-next-line prefer-const
     let { page, perPage } = getPageInfoFromSearchParams(
       searchParams,

spiffworkflow-frontend/src/config.tsx

@@ -18,5 +18,6 @@ export const PROCESS_STATUSES = [
 
 // with time: yyyy-MM-dd HH:mm:ss
 export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+export const TIME_FORMAT_HOURS_MINUTES = 'HH:mm';
 export const DATE_FORMAT = 'yyyy-MM-dd';
 export const DATE_FORMAT_CARBON = 'Y-m-d';

spiffworkflow-frontend/src/helpers.tsx

@@ -1,5 +1,9 @@
 import { format } from 'date-fns';
-import { DATE_TIME_FORMAT, DATE_FORMAT } from './config';
+import {
+  DATE_TIME_FORMAT,
+  DATE_FORMAT,
+  TIME_FORMAT_HOURS_MINUTES,
+} from './config';
 import {
   DEFAULT_PER_PAGE,
   DEFAULT_PAGE,
@@ -49,15 +53,31 @@ export const convertDateObjectToFormattedString = (dateObject: Date) => {
   return null;
 };
 
-export const convertStringToDate = (dateString: string) => {
+export const convertDateAndTimeStringsToDate = (
-  if (dateString) {
+  dateString: string,
-    // add midnight time to the date so it c uses the correct date
+  timeString: string
-    // after converting to timezone
+) => {
-    return new Date(`${dateString}T00:10:00`);
+  if (dateString && timeString) {
+    return new Date(`${dateString}T${timeString}`);
   }
   return null;
 };
 
+export const convertDateAndTimeStringsToSeconds = (
+  dateString: string,
+  timeString: string
+) => {
+  const dateObject = convertDateAndTimeStringsToDate(dateString, timeString);
+  if (dateObject) {
+    return convertDateToSeconds(dateObject);
+  }
+  return null;
+};
+
+export const convertStringToDate = (dateString: string) => {
+  return convertDateAndTimeStringsToSeconds(dateString, '00:10:00');
+};
+
 export const convertSecondsToDateObject = (seconds: number) => {
   if (seconds) {
     return new Date(seconds * 1000);
@@ -73,6 +93,21 @@ export const convertSecondsToFormattedDateTime = (seconds: number) => {
   return null;
 };
 
+export const convertDateObjectToFormattedHoursMinutes = (dateObject: Date) => {
+  if (dateObject) {
+    return format(dateObject, TIME_FORMAT_HOURS_MINUTES);
+  }
+  return null;
+};
+
+export const convertSecondsToFormattedTimeHoursMinutes = (seconds: number) => {
+  const dateObject = convertSecondsToDateObject(seconds);
+  if (dateObject) {
+    return convertDateObjectToFormattedHoursMinutes(dateObject);
+  }
+  return null;
+};
+
 export const convertSecondsToFormattedDateString = (seconds: number) => {
   const dateObject = convertSecondsToDateObject(seconds);
   if (dateObject) {