From 3020c87c986c3e0da8f9a995358377a495df28ae Mon Sep 17 00:00:00 2001 From: jasquat Date: Mon, 7 Nov 2022 17:32:29 -0500 Subject: [PATCH] updated process modal show page to use accordion component w/ burnettk --- spiffworkflow-frontend/src/index.css | 4 + spiffworkflow-frontend/src/index.scss | 51 ++- .../src/routes/ProcessModelShow.tsx | 296 ++++++++++-------- 3 files changed, 216 insertions(+), 135 deletions(-) diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 988fae27..c9ddd249 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -40,6 +40,10 @@ span.bjs-crumb { opacity: .4; } +.accordion-item-label { + vertical-align: middle; +} + .diagram-editor-canvas { border:1px solid #000000; height:70vh; diff --git a/spiffworkflow-frontend/src/index.scss b/spiffworkflow-frontend/src/index.scss index 96dbf3db..e4a9227d 100644 --- a/spiffworkflow-frontend/src/index.scss +++ b/spiffworkflow-frontend/src/index.scss @@ -1,12 +1,12 @@ // @use '@carbon/react/scss/themes'; // @use '@carbon/react/scss/theme' with ($theme: themes.$g100); -@use '@carbon/react/scss/theme' with - ( - $theme: ( - cds-link-text-color: #525252 - ) - ); +// @use '@carbon/react/scss/theme' with +// ( +// $theme: ( +// cds-link-primary: #525252 +// ) +// ); @use '@carbon/react'; @use '@carbon/styles'; @@ -39,3 +39,42 @@ color: #525252; } +.cds--btn--ghost { + color: black; +} +.cds--btn--ghost:visited { + color: black; +} +.cds--btn--ghost:hover { + color: black; +} +.cds--btn--ghost:visited:hover { + color: black; +} + +$slightly-lighter-gray: #474747; + +.cds--btn--primary { + background-color: #393939; +} +.cds--btn--primary:hover { + background-color: $slightly-lighter-gray; +} +// .cds--btn--ghost:visited { +// color: black; +// } +// .cds--btn--ghost:hover { +// color: black; +// } +// .cds--btn--ghost:visited:hover { +// color: black; +// } + + +// :root { +// --cds-link-primary: #525252; +// } +// .card { +// background: var(--orange); +// --orange: hsl(255, 72%, var(--lightness)); +// } diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx index 4d55593d..8f91f7cf 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx @@ -1,12 +1,25 @@ import { useContext, useEffect, useState } from 'react'; -import { Link, useParams } from 'react-router-dom'; +import { Link, useNavigate, useParams } from 'react-router-dom'; // @ts-ignore -import { Grid, Column, Dropdown, Button, Stack } from '@carbon/react'; +import { Add, Upload } from '@carbon/icons-react'; +import { + Accordion, + AccordionItem, + Grid, + Column, + Dropdown, + Button, + Stack, + ButtonSet, + Modal, + FileUploader, + // @ts-ignore +} from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import FileInput from '../components/FileInput'; import HttpService from '../services/HttpService'; import ErrorContext from '../contexts/ErrorContext'; -import { RecentProcessModel } from '../interfaces'; +import { ProcessModel, RecentProcessModel } from '../interfaces'; const storeRecentProcessModelInLocalStorage = ( processModelForStorage: any, @@ -66,12 +79,16 @@ export default function ProcessModelShow() { const params = useParams(); const setErrorMessage = (useContext as any)(ErrorContext)[1]; - const [processModel, setProcessModel] = useState({}); + const [processModel, setProcessModel] = useState(null); const [processInstanceResult, setProcessInstanceResult] = useState(null); - const [reloadModel, setReloadModel] = useState(false); + const [reloadModel, setReloadModel] = useState(false); + const [filesToUpload, setFilesToUpload] = useState(null); + const [showFileUploadModal, setShowFileUploadModal] = + useState(false); + const navigate = useNavigate(); useEffect(() => { - const processResult = (result: object) => { + const processResult = (result: ProcessModel) => { setProcessModel(result); setReloadModel(false); storeRecentProcessModelInLocalStorage(result, params); @@ -100,40 +117,42 @@ export default function ProcessModelShow() { }); }; - let processInstanceResultTag = null; - if (processInstanceResult) { - let takeMeToMyTaskBlurb = null; - // FIXME: ensure that the task is actually for the current user as well - const processInstanceId = (processInstanceResult as any).id; - const nextTask = (processInstanceResult as any).next_task; - if (nextTask && nextTask.state === 'READY') { - takeMeToMyTaskBlurb = ( - - You have a task to complete. Go to{' '} - my task - . - + const processInstanceResultTag = () => { + if (processModel && processInstanceResult) { + let takeMeToMyTaskBlurb = null; + // FIXME: ensure that the task is actually for the current user as well + const processInstanceId = (processInstanceResult as any).id; + const nextTask = (processInstanceResult as any).next_task; + if (nextTask && nextTask.state === 'READY') { + takeMeToMyTaskBlurb = ( + + You have a task to complete. Go to{' '} + + my task + + . + + ); + } + return ( +
+

+ Process Instance {processInstanceId} kicked off ( + + view + + ). {takeMeToMyTaskBlurb} +

+
); } - processInstanceResultTag = ( -
-

- Process Instance {processInstanceId} kicked off ( - - view - - ). {takeMeToMyTaskBlurb} -

-
- ); - } + return null; + }; const onUploadedCallback = () => { setReloadModel(true); @@ -209,112 +228,131 @@ export default function ProcessModelShow() { ); }; - const processModelButtons = () => { - // - // - // - const items = [ - { - key1: ( - - - - - - - - - ), - }, - ]; + const handleFileUploadCancel = () => { + setShowFileUploadModal(false); + }; + + const handleFileUpload = (event: any) => { + event.preventDefault(); + const url = `/process-models/${(processModel as any).process_group_id}/${ + (processModel as any).id + }/files`; + const formData = new FormData(); + formData.append('file', filesToUpload[0]); + formData.append('fileName', filesToUpload[0].name); + HttpService.makeCallToBackend({ + path: url, + successCallback: onUploadedCallback, + httpMethod: 'POST', + postBody: formData, + }); + setShowFileUploadModal(false); + }; + + const fileUploadModal = () => { return ( - - - - - (item ? item.key1 : '')} - onChange={(e: any) => console.log('e', e)} + + setFilesToUpload(event.target.files)} /> - + ); }; - if (Object.keys(processModel).length > 1) { + const processModelButtons = () => { + return ( + + + + + + + } + > + + + + + + +
+ {processModelFileList()} + + + ); + }; + + if (processModel) { return ( <> - {processInstanceResultTag} - + {fileUploadModal()} + {processInstanceResultTag()}
{processModelButtons()}

Process Instances

{processInstancesUl()} -
-
-

Files

- {processModelFileList()} ); }