times on instance list table are working now w/ burnettk

This commit is contained in:
jasquat 2022-11-17 16:05:54 -05:00
parent 7c910e4ae4
commit 927f81ea07
3 changed files with 165 additions and 84 deletions

View File

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

View File

@ -18,5 +18,6 @@ export const PROCESS_STATUSES = [
// with time: yyyy-MM-dd HH:mm:ss // with time: yyyy-MM-dd HH:mm:ss
export const DATE_TIME_FORMAT = '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 = 'yyyy-MM-dd';
export const DATE_FORMAT_CARBON = 'Y-m-d'; export const DATE_FORMAT_CARBON = 'Y-m-d';

View File

@ -1,5 +1,9 @@
import { format } from 'date-fns'; 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 { import {
DEFAULT_PER_PAGE, DEFAULT_PER_PAGE,
DEFAULT_PAGE, DEFAULT_PAGE,
@ -49,15 +53,31 @@ export const convertDateObjectToFormattedString = (dateObject: Date) => {
return null; 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; 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) => { export const convertSecondsToDateObject = (seconds: number) => {
if (seconds) { if (seconds) {
return new Date(seconds * 1000); return new Date(seconds * 1000);
@ -73,6 +93,21 @@ export const convertSecondsToFormattedDateTime = (seconds: number) => {
return null; 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) => { export const convertSecondsToFormattedDateString = (seconds: number) => {
const dateObject = convertSecondsToDateObject(seconds); const dateObject = convertSecondsToDateObject(seconds);
if (dateObject) { if (dateObject) {