diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx index 407ac307..84c3fd62 100644 --- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx +++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx @@ -27,8 +27,11 @@ import { } from '@carbon/react'; import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config'; import { + convertDateObjectToFormattedString, convertDateStringToSeconds, - convertSecondsToFormattedDate, + convertDateToSeconds, + convertSecondsToDateObject, + convertSecondsToFormattedDateString, convertSecondsToFormattedDateTime, getPageInfoFromSearchParams, getProcessModelFullIdentifierFromSearchParams, @@ -70,10 +73,13 @@ export default function ProcessInstanceListTable({ const oneHourInSeconds = 3600; const oneMonthInSeconds = oneHourInSeconds * 24 * 30; - const [startFrom, setStartFrom] = useState(''); - const [startTo, setStartTo] = useState(''); - const [endFrom, setEndFrom] = useState(''); - const [endTo, setEndTo] = useState(''); + const [startFrom, setStartFrom] = useState( + null + ); + const [startTo, setStartTo] = useState(null); + const [startFromString, setStartFromString] = useState(''); + const [endFrom, setEndFrom] = useState(null); + const [endTo, setEndTo] = useState(null); const [showFilterOptions, setShowFilterOptions] = useState(false); const setErrorMessage = (useContext as any)(ErrorContext)[1]; @@ -140,10 +146,11 @@ export default function ProcessInstanceListTable({ const searchParamValue = searchParams.get(paramName); if (searchParamValue) { queryParamString += `&${paramName}=${searchParamValue}`; - const dateString = convertSecondsToFormattedDate( + const dateObject = convertSecondsToDateObject( searchParamValue as any ); - functionToCall(dateString); + console.log('dateObject1', dateObject); + functionToCall(dateObject); setShowFilterOptions(true); } }); @@ -160,6 +167,10 @@ 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); @@ -223,45 +234,6 @@ export default function ProcessInstanceListTable({ perPageOptions, ]); - useEffect(() => { - const filters = processInstanceFilters as any; - Object.keys(parametersToAlwaysFilterBy).forEach((paramName: string) => { - // @ts-expect-error TS(7053) FIXME: - const functionToCall = parametersToAlwaysFilterBy[paramName]; - const paramValue = filters[paramName]; - functionToCall(''); - if (paramValue) { - const dateString = convertSecondsToFormattedDate(paramValue as any); - functionToCall(dateString); - setShowFilterOptions(true); - } - }); - - setProcessModelSelection(null); - processModelAvailableItems.forEach((item: any) => { - if (item.id === filters.process_model_identifier) { - setProcessModelSelection(item); - } - }); - - const processStatusSelectedArray: string[] = []; - if (filters.process_status) { - PROCESS_STATUSES.forEach((processStatusOption: any) => { - const regex = new RegExp(`\\b${processStatusOption}\\b`); - if (filters.process_status.match(regex)) { - processStatusSelectedArray.push(processStatusOption); - } - }); - setShowFilterOptions(true); - } - setProcessStatusSelection(processStatusSelectedArray); - }, [ - processInstanceFilters, - parametersToAlwaysFilterBy, - parametersToGetFromSearchParams, - processModelAvailableItems, - ]); - // does the comparison, but also returns false if either argument // is not truthy and therefore not comparable. const isTrueComparison = (param1: any, operation: any, param2: any) => { @@ -289,10 +261,10 @@ export default function ProcessInstanceListTable({ ); let queryParamString = `per_page=${perPage}&page=${page}&user_filter=true`; - const startFromSeconds = convertDateStringToSeconds(startFrom); - const endFromSeconds = convertDateStringToSeconds(endFrom); - const startToSeconds = convertDateStringToSeconds(startTo); - const endToSeconds = convertDateStringToSeconds(endTo); + const startFromSeconds = convertDateToSeconds(startFrom); + const endFromSeconds = convertDateToSeconds(endFrom); + const startToSeconds = convertDateToSeconds(startTo); + const endToSeconds = convertDateToSeconds(endTo); if (isTrueComparison(startFromSeconds, '>', startToSeconds)) { setErrorMessage({ message: '"Start date from" cannot be after "start date to"', @@ -346,8 +318,10 @@ export default function ProcessInstanceListTable({ labelString: any, name: any, initialDate: any, + initialDateString: string, onChangeFunction: any ) => { + // value={convertDateObjectToFormattedString(initialDate)} return ( <> @@ -360,9 +334,20 @@ export default function ProcessInstanceListTable({ autocomplete="off" allowInput={false} onChange={(dateChangeEvent: any) => { - onChangeFunction(dateChangeEvent.srcElement.value); + let dateTime = new Date(); + if (initialDate) { + dateTime = new Date(initialDate.getTime()); + } + + 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={initialDate} + value={initialDateString} /> { setProcessModelSelection(null); setProcessStatusSelection([]); - setStartFrom(''); - setStartTo(''); - setEndFrom(''); - setEndTo(''); + setStartFrom(null); + setStartTo(null); + setEndFrom(null); + setEndTo(null); }; const filterOptions = () => { if (!showFilterOptions) { return null; } + console.log('startFrom', startFrom); return ( <> @@ -431,17 +417,36 @@ export default function ProcessInstanceListTable({ 'Start date from', 'start-from', startFrom, + startFromString, setStartFrom )} - {dateComponent('Start date to', 'start-to', startTo, setStartTo)} + {dateComponent( + 'Start date to', + 'start-to', + startTo, + startFromString, + setStartTo + )} - {dateComponent('End date from', 'end-from', endFrom, setEndFrom)} + {dateComponent( + 'End date from', + 'end-from', + endFrom, + startFromString, + setEndFrom + )} - {dateComponent('End date to', 'end-to', endTo, setEndTo)} + {dateComponent( + 'End date to', + 'end-to', + endTo, + startFromString, + setEndTo + )} @@ -587,6 +592,9 @@ export default function ProcessInstanceListTable({ }; if (pagination) { + setStartFromString( + convertDateObjectToFormattedString(startFrom as any) || '' + ); // eslint-disable-next-line prefer-const let { page, perPage } = getPageInfoFromSearchParams( searchParams, diff --git a/spiffworkflow-frontend/src/helpers.test.tsx b/spiffworkflow-frontend/src/helpers.test.tsx index 1031fc46..5a0352b8 100644 --- a/spiffworkflow-frontend/src/helpers.test.tsx +++ b/spiffworkflow-frontend/src/helpers.test.tsx @@ -1,4 +1,4 @@ -import { convertSecondsToFormattedDate, slugifyString } from './helpers'; +import { convertSecondsToFormattedDateString, slugifyString } from './helpers'; test('it can slugify a string', () => { expect(slugifyString('hello---world_ and then Some such-')).toEqual( @@ -7,6 +7,6 @@ test('it can slugify a string', () => { }); test('it can keep the correct date when converting seconds to date', () => { - const dateString = convertSecondsToFormattedDate(1666325400); + const dateString = convertSecondsToFormattedDateString(1666325400); expect(dateString).toEqual('2022-10-21'); }); diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx index 37286c83..d163c00a 100644 --- a/spiffworkflow-frontend/src/helpers.tsx +++ b/spiffworkflow-frontend/src/helpers.tsx @@ -42,6 +42,13 @@ export const convertDateToSeconds = ( return null; }; +export const convertDateObjectToFormattedString = (dateObject: Date) => { + if (dateObject) { + return format(dateObject, DATE_FORMAT); + } + return null; +}; + export const convertStringToDate = (dateString: string) => { if (dateString) { // add midnight time to the date so it c uses the correct date @@ -51,18 +58,25 @@ export const convertStringToDate = (dateString: string) => { return null; }; -export const convertSecondsToFormattedDateTime = (seconds: number) => { +export const convertSecondsToDateObject = (seconds: number) => { if (seconds) { - const dateObject = new Date(seconds * 1000); + return new Date(seconds * 1000); + } + return null; +}; + +export const convertSecondsToFormattedDateTime = (seconds: number) => { + const dateObject = convertSecondsToDateObject(seconds); + if (dateObject) { return format(dateObject, DATE_TIME_FORMAT); } return null; }; -export const convertSecondsToFormattedDate = (seconds: number) => { - if (seconds) { - const dateObject = new Date(seconds * 1000); - return format(dateObject, DATE_FORMAT); +export const convertSecondsToFormattedDateString = (seconds: number) => { + const dateObject = convertSecondsToDateObject(seconds); + if (dateObject) { + return convertDateObjectToFormattedString(dateObject); } return null; }; diff --git a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx index 09d28316..3ead5462 100644 --- a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx @@ -5,7 +5,7 @@ import { Link, useParams, useSearchParams } from 'react-router-dom'; import PaginationForTable from '../components/PaginationForTable'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import { - convertSecondsToFormattedDate, + convertSecondsToFormattedDateString, getPageInfoFromSearchParams, modifyProcessModelPath, unModifyProcessModelPath, @@ -68,7 +68,9 @@ export default function MessageInstanceList() { {rowToUse.failure_cause || '-'} {rowToUse.status} - {convertSecondsToFormattedDate(rowToUse.created_at_in_seconds)} + {convertSecondsToFormattedDateString( + rowToUse.created_at_in_seconds + )} ); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx index 9f2d65b3..bb4468b4 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx @@ -6,7 +6,7 @@ import PaginationForTable from '../components/PaginationForTable'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import { getPageInfoFromSearchParams, - convertSecondsToFormattedDate, + convertSecondsToFormattedDateString, modifyProcessModelPath, unModifyProcessModelPath, } from '../helpers'; @@ -49,7 +49,7 @@ export default function ProcessInstanceLogList() { data-qa="process-instance-show-link" to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${rowToUse.process_instance_id}/${rowToUse.spiff_step}`} > - {convertSecondsToFormattedDate(rowToUse.timestamp)} + {convertSecondsToFormattedDateString(rowToUse.timestamp)}