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, {
ReactComponentElement,
useContext,
useEffect,
useState,
} from 'react';
import { useContext, useEffect, useState } from 'react';
import Editor from '@monaco-editor/react';
import {
useParams,
@ -49,7 +44,6 @@ import {
PermissionsToCheck,
ProcessData,
ProcessInstance,
ProcessInstanceMetadata,
ProcessInstanceTask,
} from '../interfaces';
import { usePermissionFetcher } from '../hooks/PermissionService';
@ -167,11 +161,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
variant,
]);
// useEffect(() => {
// setTimeout(() => setDisplayDetails(!displayDetails), 1 * 2000);
// // setTimeout(() => setDisplayDetails(false), 1 * 6000);
// }, [displayDetails]);
const deleteProcessInstance = () => {
HttpService.makeCallToBackend({
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 = () => {
if (!processInstance) {
return null;
@ -374,15 +331,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
{processInstance.bpmn_version_control_type})
</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>
</>
);
}
@ -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 = () => {
if (!processInstance) {
return null;
@ -496,11 +382,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
statusIcon = <Warning />;
}
const details = detailedViewElement();
return (
<>
{/*
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Started By:{' '}
@ -520,7 +403,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
</Column>
</Grid>
{currentEndDateTag}
*/}
<Grid condensed fullWidth>
<Column sm={1} md={1} lg={2} className="grid-list-title">
Status:{' '}
@ -531,11 +413,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
</Tag>
</Column>
</Grid>
{/* detailedViewElement() */}
{deets}
{/*
{detailedViewElement()}
<br />
*/}
<Grid condensed fullWidth>
<Column sm={2} md={2} lg={2}>
<ButtonSet>
@ -1123,7 +1002,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
[`Process Instance Id: ${processInstance.id}`],
]}
/>
{/*
<Stack orientation="horizontal" gap={1}>
<h1 className="with-icons">
Process Instance Id: {processInstance.id}
@ -1152,8 +1030,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
/>
</Column>
</Grid>
*/}
{getInfoTag()}
<br />
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
{stepsElement()}
<br />
<ReactDiagramEditor
processModelId={processModelId || ''}
diagramXML={processInstance.bpmn_xml_file_contents || ''}
@ -1163,12 +1045,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
diagramType="readonly"
onElementClick={handleClickedDiagramTask}
/>
{/* <br /> */}
{/* {stepsElement()} */}
{/* <br /> */}
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
<div id="diagram-container" />
</>
);