sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

put process instance show page to match main w/ burnettk

This commit is contained in:
jasquat 2023-01-24 16:38:05 -05:00
parent be1d306a2f
commit f156605b0a
1 changed files with 7 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -1,9 +1,4 @@
import React, { import { useContext, useEffect, useState } from 'react';
ReactComponentElement,
useContext,
useEffect,
useState,
} from 'react';
import Editor from '@monaco-editor/react'; import Editor from '@monaco-editor/react';
import { import {
useParams, useParams,
@ -49,7 +44,6 @@ import {
PermissionsToCheck, PermissionsToCheck,
ProcessData, ProcessData,
ProcessInstance, ProcessInstance,
ProcessInstanceMetadata,
ProcessInstanceTask, ProcessInstanceTask,
} from '../interfaces'; } from '../interfaces';
import { usePermissionFetcher } from '../hooks/PermissionService'; import { usePermissionFetcher } from '../hooks/PermissionService';
@ -167,11 +161,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
variant, variant,
]); ]);
// useEffect(() => {
// setTimeout(() => setDisplayDetails(!displayDetails), 1 * 2000);
// // setTimeout(() => setDisplayDetails(false), 1 * 6000);
// }, [displayDetails]);
const deleteProcessInstance = () => { const deleteProcessInstance = () => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: targetUris.processInstanceActionPath, path: targetUris.processInstanceActionPath,
@ -295,38 +284,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
}); });
}; };
const processMetadataDisplayArea = () => {
if (
!processInstance ||
(processInstance.process_metadata &&
processInstance.process_metadata.length < 1)
) {
return null;
}
const metadataComponents: any[] = [];
(processInstance.process_metadata || []).forEach(
(processInstanceMetadata: ProcessInstanceMetadata) => {
metadataComponents.push(
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
{processInstanceMetadata.key}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{processInstanceMetadata.value}
</Column>
</Grid>
);
}
);
return (
<>
<br />
{metadataComponents}
</>
);
// return metadataComponents;
};
const detailedViewElement = () => { const detailedViewElement = () => {
if (!processInstance) { if (!processInstance) {
return null; return null;
@ -374,15 +331,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
{processInstance.bpmn_version_control_type}) {processInstance.bpmn_version_control_type})
</Column> </Column>
</Grid> </Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Process model revision:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
</> </>
); );
} }
@ -400,68 +348,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
); );
}; };
let deets: any = null;
if (processInstance) {
if (displayDetails) {
deets = (
<>
<Grid condensed fullWidth>
<Button
kind="ghost"
className="button-link"
onClick={() => setDisplayDetails(false)}
title="Hide Details"
>
&laquo; Hide Details
</Button>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Updated At:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{convertSecondsToFormattedDateTime(
processInstance.updated_at_in_seconds
)}
</Column>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Created At:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{convertSecondsToFormattedDateTime(
processInstance.created_at_in_seconds
)}
</Column>
</Grid>
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Process model revision:{' '}
</Column>
<Column sm={3} md={3} lg={3} className="grid-date">
{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
</>
);
} else {
deets = (
<Grid condensed fullWidth>
<Button
kind="ghost"
className="button-link"
onClick={() => setDisplayDetails(true)}
title="Show Details"
>
View Details &raquo;
</Button>
</Grid>
);
}
}
const getInfoTag = () => { const getInfoTag = () => {
if (!processInstance) { if (!processInstance) {
return null; return null;
@ -496,11 +382,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
statusIcon = <Warning />; statusIcon = <Warning />;
} }
const details = detailedViewElement();
return ( return (
<> <>
{/*
<Grid condensed fullWidth> <Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title"> <Column sm={1} md={1} lg={2} className="grid-list-title">
Started By:{' '} Started By:{' '}
@ -520,7 +403,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
</Column> </Column>
</Grid> </Grid>
{currentEndDateTag} {currentEndDateTag}
*/}
<Grid condensed fullWidth> <Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title"> <Column sm={1} md={1} lg={2} className="grid-list-title">
Status:{' '} Status:{' '}
@ -531,11 +413,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
</Tag> </Tag>
</Column> </Column>
</Grid> </Grid>
{/* detailedViewElement() */} {detailedViewElement()}
{deets}
{/*
<br /> <br />
*/}
<Grid condensed fullWidth> <Grid condensed fullWidth>
<Column sm={2} md={2} lg={2}> <Column sm={2} md={2} lg={2}>
<ButtonSet> <ButtonSet>
@ -1123,7 +1002,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
[`Process Instance Id: ${processInstance.id}`], [`Process Instance Id: ${processInstance.id}`],
]} ]}
/> />
{/*
<Stack orientation="horizontal" gap={1}> <Stack orientation="horizontal" gap={1}>
<h1 className="with-icons"> <h1 className="with-icons">
Process Instance Id: {processInstance.id} Process Instance Id: {processInstance.id}
@ -1152,8 +1030,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
/> />
</Column> </Column>
</Grid> </Grid>
*/}
{getInfoTag()} {getInfoTag()}
<br />
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
{stepsElement()}
<br />
<ReactDiagramEditor <ReactDiagramEditor
processModelId={processModelId || ''} processModelId={processModelId || ''}
diagramXML={processInstance.bpmn_xml_file_contents || ''} diagramXML={processInstance.bpmn_xml_file_contents || ''}
@ -1163,12 +1045,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
diagramType="readonly" diagramType="readonly"
onElementClick={handleClickedDiagramTask} onElementClick={handleClickedDiagramTask}
/> />
{/* <br /> */}
{/* {stepsElement()} */}
{/* <br /> */}
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
<div id="diagram-container" /> <div id="diagram-container" />
</> </>
); );