From 1768618f2719a6bb99bb586fbe2c201d6dec7ca8 Mon Sep 17 00:00:00 2001 From: jasquat Date: Fri, 14 Apr 2023 15:42:01 -0400 Subject: [PATCH] attempting to move filters from instance table to own component --- .../src/components/Filters.tsx | 995 ++++++++++++++++++ .../components/ProcessInstanceListTable.tsx | 987 +---------------- 2 files changed, 1004 insertions(+), 978 deletions(-) create mode 100644 spiffworkflow-frontend/src/components/Filters.tsx diff --git a/spiffworkflow-frontend/src/components/Filters.tsx b/spiffworkflow-frontend/src/components/Filters.tsx new file mode 100644 index 000000000..926d559b3 --- /dev/null +++ b/spiffworkflow-frontend/src/components/Filters.tsx @@ -0,0 +1,995 @@ +// // @ts-ignore +// import { Filter } from '@carbon/icons-react'; +// import { +// Button, +// Grid, +// Column, +// // @ts-ignore +// } from '@carbon/react'; +// import useAPIError from '../hooks/UseApiError'; +// +// type OwnProps = { +// showFilterOptions: boolean; +// setShowFilterOptions: Function; +// filtersEnabled?: boolean; +// }; +// +// export default function Filters({ +// showFilterOptions, +// setShowFilterOptions, +// filtersEnabled = true, +// }: OwnProps) { +// const { addError, removeError } = useAPIError(); +// +// const toggleShowFilterOptions = () => { +// setShowFilterOptions(!showFilterOptions); +// }; +// const reportFilterBy = () => { +// return (reportMetadata as any).filter_by; +// }; +// const reportColumns = () => { +// return (reportMetadata as any).columns; +// }; +// +// const navigateToNewReport = (queryParamString: string) => { +// removeError(); +// setProcessInstanceReportJustSaved(null); +// setProcessInstanceFilters({}); +// navigate(`${processInstanceListPathPrefix}?${queryParamString}`); +// }; +// +// const applyFilter = (event: any) => { +// event.preventDefault(); +// setProcessInitiatorNotFoundErrorText(''); +// +// const { page, perPage } = getPageInfoFromSearchParams( +// searchParams, +// undefined, +// undefined, +// paginationQueryParamPrefix +// ); +// let queryParamString = `per_page=${perPage}&page=${page}&user_filter=true`; +// const { +// valid, +// startFromSeconds, +// startToSeconds, +// endFromSeconds, +// endToSeconds, +// } = calculateStartAndEndSeconds(); +// +// if (!valid) { +// return; +// } +// +// if (startFromSeconds) { +// queryParamString += `&start_from=${startFromSeconds}`; +// } +// if (startToSeconds) { +// queryParamString += `&start_to=${startToSeconds}`; +// } +// if (endFromSeconds) { +// queryParamString += `&end_from=${endFromSeconds}`; +// } +// if (endToSeconds) { +// queryParamString += `&end_to=${endToSeconds}`; +// } +// if (processStatusSelection.length > 0) { +// queryParamString += `&process_status=${processStatusSelection}`; +// } +// +// if (processModelSelection) { +// queryParamString += `&process_model_identifier=${processModelSelection.id}`; +// } +// +// if (processInstanceReportSelection) { +// queryParamString += `&report_id=${processInstanceReportSelection.id}`; +// } +// +// const reportColumnsBase64 = encodeBase64(JSON.stringify(reportColumns())); +// queryParamString += `&report_columns=${reportColumnsBase64}`; +// const reportFilterByBase64 = encodeBase64(JSON.stringify(reportFilterBy())); +// queryParamString += `&report_filter_by=${reportFilterByBase64}`; +// +// if (processInitiatorSelection) { +// queryParamString += `&process_initiator_username=${processInitiatorSelection.username}`; +// navigateToNewReport(queryParamString); +// } else if (processInitiatorText) { +// HttpService.makeCallToBackend({ +// path: targetUris.userExists, +// httpMethod: 'POST', +// postBody: { username: processInitiatorText }, +// successCallback: (result: any) => { +// if (result.user_found) { +// queryParamString += `&process_initiator_username=${processInitiatorText}`; +// navigateToNewReport(queryParamString); +// } else { +// setProcessInitiatorNotFoundErrorText( +// `The provided username is invalid. Please type the exact username.` +// ); +// } +// }, +// }); +// } else { +// navigateToNewReport(queryParamString); +// } +// }; +// +// const dateComponent = ( +// labelString: any, +// name: any, +// initialDate: any, +// initialTime: string, +// onChangeDateFunction: any, +// onChangeTimeFunction: any, +// timeInvalid: boolean, +// setTimeInvalid: any +// ) => { +// return ( +// <> +// +// { +// if (!initialDate && !initialTime) { +// onChangeTimeFunction( +// convertDateObjectToFormattedHoursMinutes(new Date()) +// ); +// } +// onChangeDateFunction(dateChangeEvent.srcElement.value); +// }} +// value={initialDate} +// /> +// +// { +// if (event.srcElement.validity.valid) { +// setTimeInvalid(false); +// } else { +// setTimeInvalid(true); +// } +// onChangeTimeFunction(event.srcElement.value); +// }} +// /> +// +// ); +// }; +// +// const processStatusSearch = () => { +// return ( +// { +// setProcessStatusSelection(selection.selectedItems); +// setRequiresRefilter(true); +// }} +// itemToString={(item: any) => { +// return item || ''; +// }} +// selectionFeedback="top-after-reopen" +// selectedItems={processStatusSelection} +// /> +// ); +// }; +// +// const clearFilters = () => { +// setProcessModelSelection(null); +// setProcessStatusSelection([]); +// setStartFromDate(''); +// setStartFromTime(''); +// setStartToDate(''); +// setStartToTime(''); +// setEndFromDate(''); +// setEndFromTime(''); +// setEndToDate(''); +// setEndToTime(''); +// setProcessInitiatorSelection(null); +// setProcessInitiatorText(''); +// setRequiresRefilter(true); +// if (reportMetadata) { +// reportMetadata.filter_by = []; +// } +// }; +// +// const processInstanceReportDidChange = (selection: any, mode?: string) => { +// clearFilters(); +// const selectedReport = selection.selectedItem; +// setProcessInstanceReportSelection(selectedReport); +// +// let queryParamString = ''; +// if (selectedReport) { +// queryParamString = `?report_id=${selectedReport.id}`; +// } +// +// removeError(); +// setProcessInstanceReportJustSaved(mode || null); +// navigate(`${processInstanceListPathPrefix}${queryParamString}`); +// }; +// +// const reportColumnAccessors = () => { +// return reportColumns().map((reportColumn: ReportColumn) => { +// return reportColumn.accessor; +// }); +// }; +// +// // TODO onSuccess reload/select the new report in the report search +// const onSaveReportSuccess = (result: any, mode: string) => { +// processInstanceReportDidChange( +// { +// selectedItem: result, +// }, +// mode +// ); +// }; +// +// const saveAsReportComponent = () => { +// const { +// valid, +// startFromSeconds, +// startToSeconds, +// endFromSeconds, +// endToSeconds, +// } = calculateStartAndEndSeconds(false); +// +// if (!valid || !reportMetadata) { +// return null; +// } +// return ( +// +// ); +// }; +// +// const onDeleteReportSuccess = () => { +// processInstanceReportDidChange({ selectedItem: null }); +// }; +// +// const deleteReportComponent = () => { +// return processInstanceReportSelection ? ( +// +// ) : null; +// }; +// +// const removeColumn = (reportColumn: ReportColumn) => { +// if (reportMetadata) { +// const reportMetadataCopy = { ...reportMetadata }; +// const newColumns = reportColumns().filter( +// (rc: ReportColumn) => rc.accessor !== reportColumn.accessor +// ); +// Object.assign(reportMetadataCopy, { columns: newColumns }); +// setReportMetadata(reportMetadataCopy); +// setRequiresRefilter(true); +// } +// }; +// +// const handleColumnFormClose = () => { +// setShowReportColumnForm(false); +// setReportColumnFormMode(''); +// setReportColumnToOperateOn(null); +// }; +// +// const getFilterByFromReportMetadata = (reportColumnAccessor: string) => { +// if (reportMetadata) { +// return reportMetadata.filter_by.find((reportFilter: ReportFilter) => { +// return reportColumnAccessor === reportFilter.field_name; +// }); +// } +// return null; +// }; +// +// const getNewFiltersFromReportForEditing = ( +// reportColumnForEditing: ReportColumnForEditing +// ) => { +// if (!reportMetadata) { +// return null; +// } +// const reportMetadataCopy = { ...reportMetadata }; +// let newReportFilters = reportMetadataCopy.filter_by; +// if (reportColumnForEditing.filterable) { +// const newReportFilter: ReportFilter = { +// field_name: reportColumnForEditing.accessor, +// field_value: reportColumnForEditing.filter_field_value, +// operator: reportColumnForEditing.filter_operator || 'equals', +// }; +// const existingReportFilter = getFilterByFromReportMetadata( +// reportColumnForEditing.accessor +// ); +// if (existingReportFilter) { +// const existingReportFilterIndex = +// reportMetadataCopy.filter_by.indexOf(existingReportFilter); +// if (reportColumnForEditing.filter_field_value) { +// newReportFilters[existingReportFilterIndex] = newReportFilter; +// } else { +// newReportFilters.splice(existingReportFilterIndex, 1); +// } +// } else if (reportColumnForEditing.filter_field_value) { +// newReportFilters = newReportFilters.concat([newReportFilter]); +// } +// } +// return newReportFilters; +// }; +// +// const handleUpdateReportColumn = () => { +// if (reportColumnToOperateOn && reportMetadata) { +// const reportMetadataCopy = { ...reportMetadata }; +// let newReportColumns = null; +// if (reportColumnFormMode === 'new') { +// newReportColumns = reportColumns().concat([reportColumnToOperateOn]); +// } else { +// newReportColumns = reportColumns().map((rc: ReportColumn) => { +// if (rc.accessor === reportColumnToOperateOn.accessor) { +// return reportColumnToOperateOn; +// } +// return rc; +// }); +// } +// Object.assign(reportMetadataCopy, { +// columns: newReportColumns, +// filter_by: getNewFiltersFromReportForEditing(reportColumnToOperateOn), +// }); +// setReportMetadata(reportMetadataCopy); +// setReportColumnToOperateOn(null); +// setShowReportColumnForm(false); +// setRequiresRefilter(true); +// } +// }; +// +// const reportColumnToReportColumnForEditing = (reportColumn: ReportColumn) => { +// const reportColumnForEditing: ReportColumnForEditing = Object.assign( +// reportColumn, +// { filter_field_value: '', filter_operator: '' } +// ); +// const reportFilter = getFilterByFromReportMetadata( +// reportColumnForEditing.accessor +// ); +// if (reportFilter) { +// reportColumnForEditing.filter_field_value = reportFilter.field_value; +// reportColumnForEditing.filter_operator = +// reportFilter.operator || 'equals'; +// } +// return reportColumnForEditing; +// }; +// +// const updateReportColumn = (event: any) => { +// let reportColumnForEditing = null; +// if (event.selectedItem) { +// reportColumnForEditing = reportColumnToReportColumnForEditing( +// event.selectedItem +// ); +// } +// setReportColumnToOperateOn(reportColumnForEditing); +// setRequiresRefilter(true); +// }; +// +// // options includes item and inputValue +// const shouldFilterReportColumn = (options: any) => { +// const reportColumn: ReportColumn = options.item; +// const { inputValue } = options; +// return ( +// !reportColumnAccessors().includes(reportColumn.accessor) && +// (reportColumn.accessor || '') +// .toLowerCase() +// .includes((inputValue || '').toLowerCase()) +// ); +// }; +// +// const setReportColumnConditionValue = (event: any) => { +// if (reportColumnToOperateOn) { +// const reportColumnToOperateOnCopy = { +// ...reportColumnToOperateOn, +// }; +// reportColumnToOperateOnCopy.filter_field_value = event.target.value; +// setReportColumnToOperateOn(reportColumnToOperateOnCopy); +// setRequiresRefilter(true); +// } +// }; +// +// const reportColumnForm = () => { +// if (reportColumnFormMode === '') { +// return null; +// } +// const formElements = []; +// if (reportColumnFormMode === 'new') { +// formElements.push( +// { +// if (reportColumn) { +// return reportColumn.accessor; +// } +// return null; +// }} +// shouldFilterItem={shouldFilterReportColumn} +// placeholder="Choose a column to show" +// titleText="Column" +// selectedItem={reportColumnToOperateOn} +// /> +// ); +// } +// formElements.push([ +// { +// if (reportColumnToOperateOn) { +// setRequiresRefilter(true); +// const reportColumnToOperateOnCopy = { +// ...reportColumnToOperateOn, +// }; +// reportColumnToOperateOnCopy.Header = event.target.value; +// setReportColumnToOperateOn(reportColumnToOperateOnCopy); +// } +// }} +// />, +// ]); +// if (reportColumnToOperateOn && reportColumnToOperateOn.filterable) { +// formElements.push( +// +// ); +// } +// formElements.push( +//
+// ); +// const modalHeading = +// reportColumnFormMode === 'new' +// ? 'Add Column' +// : `Edit ${ +// reportColumnToOperateOn ? reportColumnToOperateOn.accessor : '' +// } column`; +// return ( +// +// {formElements} +// +// ); +// }; +// +// const columnSelections = () => { +// if (reportColumns()) { +// const tags: any = []; +// +// (reportColumns() as any).forEach((reportColumn: ReportColumn) => { +// const reportColumnForEditing = +// reportColumnToReportColumnForEditing(reportColumn); +// +// let tagType = 'cool-gray'; +// let tagTypeClass = ''; +// if (reportColumnForEditing.filterable) { +// tagType = 'green'; +// tagTypeClass = 'tag-type-green'; +// } +// let reportColumnLabel = reportColumnForEditing.Header; +// if (reportColumnForEditing.filter_field_value) { +// reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`; +// } +// tags.push( +// +// +// +// +// +// +// +// {saveAsReportComponent()} +// {deleteReportComponent()} +// +// +// +// ); +// }; +// +// const getWaitingForTableCellComponent = (processInstanceTask: any) => { +// let fullUsernameString = ''; +// let shortUsernameString = ''; +// if (processInstanceTask.potential_owner_usernames) { +// fullUsernameString = processInstanceTask.potential_owner_usernames; +// const usernames = +// processInstanceTask.potential_owner_usernames.split(','); +// const firstTwoUsernames = usernames.slice(0, 2); +// if (usernames.length > 2) { +// firstTwoUsernames.push('...'); +// } +// shortUsernameString = firstTwoUsernames.join(','); +// } +// if (processInstanceTask.assigned_user_group_identifier) { +// fullUsernameString = processInstanceTask.assigned_user_group_identifier; +// shortUsernameString = processInstanceTask.assigned_user_group_identifier; +// } +// return {shortUsernameString}; +// }; +// const formatProcessInstanceId = (row: ProcessInstance, id: number) => { +// return {id}; +// }; +// const formatProcessModelIdentifier = (_row: any, identifier: any) => { +// return {identifier}; +// }; +// const formatProcessModelDisplayName = (_row: any, identifier: any) => { +// return {identifier}; +// }; +// +// const formatSecondsForDisplay = (_row: any, seconds: any) => { +// return convertSecondsToFormattedDateTime(seconds) || '-'; +// }; +// const defaultFormatter = (_row: any, value: any) => { +// return value; +// }; +// +// const formattedColumn = (row: any, column: any) => { +// const reportColumnFormatters: Record = { +// id: formatProcessInstanceId, +// process_model_identifier: formatProcessModelIdentifier, +// process_model_display_name: formatProcessModelDisplayName, +// start_in_seconds: formatSecondsForDisplay, +// end_in_seconds: formatSecondsForDisplay, +// updated_at_in_seconds: formatSecondsForDisplay, +// }; +// const formatter = +// reportColumnFormatters[column.accessor] ?? defaultFormatter; +// const value = row[column.accessor]; +// const modifiedModelId = modifyProcessIdentifierForPathParam( +// row.process_model_identifier +// ); +// const navigateToProcessInstance = () => { +// navigate(`${processInstanceShowPathPrefix}/${modifiedModelId}/${row.id}`); +// }; +// const navigateToProcessModel = () => { +// navigate(`/admin/process-models/${modifiedModelId}`); +// }; +// +// if (column.accessor === 'status') { +// return ( +// // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions +// +// {formatter(row, value)} +// +// ); +// } +// if (column.accessor === 'process_model_display_name') { +// const pmStyle = { background: 'rgba(0, 0, 0, .02)' }; +// return ( +// // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions +// +// {formatter(row, value)} +// +// ); +// } +// if (column.accessor === 'waiting_for') { +// return {getWaitingForTableCellComponent(row)}; +// } +// if (column.accessor === 'updated_at_in_seconds') { +// return ( +// +// ); +// } +// return ( +// // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions +// +// {formatter(row, value)} +// +// ); +// }; +// +// const buildTable = () => { +// const headerLabels: Record = { +// id: 'Id', +// process_model_identifier: 'Process', +// process_model_display_name: 'Process', +// start_in_seconds: 'Start Time', +// end_in_seconds: 'End Time', +// status: 'Status', +// process_initiator_username: 'Started By', +// }; +// const getHeaderLabel = (header: string) => { +// return headerLabels[header] ?? header; +// }; +// const headers = reportColumns().map((column: any) => { +// return getHeaderLabel((column as any).Header); +// }); +// if (showActionsColumn) { +// headers.push('Actions'); +// } +// +// const rows = processInstances.map((row: any) => { +// const currentRow = reportColumns().map((column: any) => { +// return formattedColumn(row, column); +// }); +// if (showActionsColumn) { +// let buttonElement = null; +// if (row.task_id) { +// const taskUrl = `/tasks/${row.id}/${row.task_id}`; +// const regex = new RegExp(`\\b(${preferredUsername}|${userEmail})\\b`); +// let hasAccessToCompleteTask = false; +// if ( +// canCompleteAllTasks || +// (row.potential_owner_usernames || '').match(regex) +// ) { +// hasAccessToCompleteTask = true; +// } +// buttonElement = ( +// +// ); +// } +// +// currentRow.push({buttonElement}); +// } +// +// const rowStyle = { cursor: 'pointer' }; +// +// return ( +// +// {currentRow} +// +// ); +// }); +// +// return ( +// +// +// +// {headers.map((header: any) => ( +// +// {header} +// +// ))} +// +// +// {rows} +//
+// ); +// }; +// +// const reportSearchComponent = () => { +// if (showReports) { +// const columns = [ +// +// +// , +// ]; +// return ( +// +// {columns} +// +// ); +// } +// return null; +// }; +// +// if (filtersEnabled) { +// return ( +// <> +// +// +// {reportSearchComponent()} +// +// +// - - - - - - {saveAsReportComponent()} - {deleteReportComponent()} - - - - ); - }; - - const getWaitingForTableCellComponent = (processInstanceTask: any) => { - let fullUsernameString = ''; - let shortUsernameString = ''; - if (processInstanceTask.potential_owner_usernames) { - fullUsernameString = processInstanceTask.potential_owner_usernames; - const usernames = - processInstanceTask.potential_owner_usernames.split(','); - const firstTwoUsernames = usernames.slice(0, 2); - if (usernames.length > 2) { - firstTwoUsernames.push('...'); - } - shortUsernameString = firstTwoUsernames.join(','); - } - if (processInstanceTask.assigned_user_group_identifier) { - fullUsernameString = processInstanceTask.assigned_user_group_identifier; - shortUsernameString = processInstanceTask.assigned_user_group_identifier; - } - return {shortUsernameString}; - }; - const formatProcessInstanceId = (row: ProcessInstance, id: number) => { - return {id}; - }; - const formatProcessModelIdentifier = (_row: any, identifier: any) => { - return {identifier}; - }; - const formatProcessModelDisplayName = (_row: any, identifier: any) => { - return {identifier}; - }; - - const formatSecondsForDisplay = (_row: any, seconds: any) => { - return convertSecondsToFormattedDateTime(seconds) || '-'; - }; - const defaultFormatter = (_row: any, value: any) => { - return value; - }; - - const formattedColumn = (row: any, column: any) => { - const reportColumnFormatters: Record = { - id: formatProcessInstanceId, - process_model_identifier: formatProcessModelIdentifier, - process_model_display_name: formatProcessModelDisplayName, - start_in_seconds: formatSecondsForDisplay, - end_in_seconds: formatSecondsForDisplay, - updated_at_in_seconds: formatSecondsForDisplay, - }; - const formatter = - reportColumnFormatters[column.accessor] ?? defaultFormatter; - const value = row[column.accessor]; - const modifiedModelId = modifyProcessIdentifierForPathParam( - row.process_model_identifier - ); - const navigateToProcessInstance = () => { - navigate(`${processInstanceShowPathPrefix}/${modifiedModelId}/${row.id}`); - }; - const navigateToProcessModel = () => { - navigate(`/admin/process-models/${modifiedModelId}`); - }; - - if (column.accessor === 'status') { - return ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions - - {formatter(row, value)} - - ); - } - if (column.accessor === 'process_model_display_name') { - const pmStyle = { background: 'rgba(0, 0, 0, .02)' }; - return ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions - - {formatter(row, value)} - - ); - } - if (column.accessor === 'waiting_for') { - return {getWaitingForTableCellComponent(row)}; - } - if (column.accessor === 'updated_at_in_seconds') { - return ( - - ); - } - return ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions - - {formatter(row, value)} - - ); - }; - - const buildTable = () => { - const headerLabels: Record = { - id: 'Id', - process_model_identifier: 'Process', - process_model_display_name: 'Process', - start_in_seconds: 'Start Time', - end_in_seconds: 'End Time', - status: 'Status', - process_initiator_username: 'Started By', - }; - const getHeaderLabel = (header: string) => { - return headerLabels[header] ?? header; - }; - const headers = reportColumns().map((column: any) => { - return getHeaderLabel((column as any).Header); - }); - if (showActionsColumn) { - headers.push('Actions'); - } - - const rows = processInstances.map((row: any) => { - const currentRow = reportColumns().map((column: any) => { - return formattedColumn(row, column); - }); - if (showActionsColumn) { - let buttonElement = null; - if (row.task_id) { - const taskUrl = `/tasks/${row.id}/${row.task_id}`; - const regex = new RegExp(`\\b(${preferredUsername}|${userEmail})\\b`); - let hasAccessToCompleteTask = false; - if ( - canCompleteAllTasks || - (row.potential_owner_usernames || '').match(regex) - ) { - hasAccessToCompleteTask = true; - } - buttonElement = ( - - ); - } - - currentRow.push({buttonElement}); - } - - const rowStyle = { cursor: 'pointer' }; - - return ( - - {currentRow} - - ); - }); - - return ( - - - - {headers.map((header: any) => ( - - {header} - - ))} - - - {rows} -
- ); - }; - - const toggleShowFilterOptions = () => { - setShowFilterOptions(!showFilterOptions); - }; - - const reportSearchComponent = () => { - if (showReports) { - const columns = [ - - - , - ]; - return ( - - {columns} - - ); - } - return null; - }; - - const filterComponent = () => { - if (!filtersEnabled) { - return null; - } - return ( - <> - - - {reportSearchComponent()} - - -