From 943e88c64e6cf4e40c6964d744634fb6f3b92e87 Mon Sep 17 00:00:00 2001 From: jasquat Date: Fri, 10 Jun 2022 14:37:09 -0400 Subject: [PATCH] wip editing bpmn diagrams w/ burnettk --- public/new_bpmn_diagram.bpmn | 13 +++ src/index.js | 1 + src/react_bpmn_editor.js | 15 +++- src/routes/ProcessModelEditDiagram.js | 120 +++++++++++++++++++++++--- src/routes/ProcessModelShow.js | 1 + 5 files changed, 138 insertions(+), 12 deletions(-) create mode 100644 public/new_bpmn_diagram.bpmn diff --git a/public/new_bpmn_diagram.bpmn b/public/new_bpmn_diagram.bpmn new file mode 100644 index 0000000..81f6715 --- /dev/null +++ b/public/new_bpmn_diagram.bpmn @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/index.js b/src/index.js index 772a3a9..30223b6 100644 --- a/src/index.js +++ b/src/index.js @@ -33,6 +33,7 @@ root.render( } /> } /> + } /> } /> } /> diff --git a/src/react_bpmn_editor.js b/src/react_bpmn_editor.js index 2b7780d..c077e94 100644 --- a/src/react_bpmn_editor.js +++ b/src/react_bpmn_editor.js @@ -7,6 +7,8 @@ import React, { useEffect, useState } from "react"; import { BACKEND_BASE_URL } from './config'; import { HOT_AUTH_TOKEN } from './config'; +import Button from 'react-bootstrap/Button'; + import "bpmn-js/dist/assets/diagram-js.css"; import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"; import "bpmn-js-properties-panel/dist/assets/properties-panel.css" @@ -74,8 +76,10 @@ export default function ReactBpmnEditor(props) { if (!diagramXML) { if (props.url) { return fetchDiagramFromURL(props.url); - } else { + } else if (props.file_name) { return fetchDiagramFromJsonAPI(props.process_model_id, props.file_name); + } else { + return fetchDiagramFromURL(process.env.PUBLIC_URL + '/new_bpmn_diagram.bpmn'); } } @@ -113,7 +117,14 @@ export default function ReactBpmnEditor(props) { } }, [props, diagramXML, bpmnViewerState]); + function handleSave() { + bpmnViewerState.saveXML({ format: true }) + .then(xml => props.saveDiagram(xml)) + } + return ( -
+
+ +
); } diff --git a/src/routes/ProcessModelEditDiagram.js b/src/routes/ProcessModelEditDiagram.js index 0a135d3..1835570 100644 --- a/src/routes/ProcessModelEditDiagram.js +++ b/src/routes/ProcessModelEditDiagram.js @@ -6,21 +6,84 @@ import { useParams } from "react-router-dom"; import ReactBpmnEditor from "../react_bpmn_editor" import ProcessBreadcrumb from '../components/ProcessBreadcrumb' +import { Button, Modal } from 'react-bootstrap'; + export default function ProcessModelEditDiagram() { + const [show, setShow] = useState(false); + const handleShow = () => setShow(true); + let params = useParams(); const [processModelFile, setProcessModelFile] = useState(null); + const [newFileName, setNewFileName] = useState(""); + const [newBpmnXml, setNewBpmnXml] = useState(null); useEffect(() => { - fetch(`${BACKEND_BASE_URL}/process-models/${params.process_model_id}/file/${params.file_name}`, { - headers: new Headers({ - 'Authorization': `Bearer ${HOT_AUTH_TOKEN}` + if (params.file_name) { + fetch(`${BACKEND_BASE_URL}/process-models/${params.process_model_id}/file/${params.file_name}`, { + headers: new Headers({ + 'Authorization': `Bearer ${HOT_AUTH_TOKEN}` + }) }) + .then(res => res.json()) + .then( + (result) => { + setProcessModelFile(result); + }, + // Note: it's important to handle errors here + // instead of a catch() block so that we don't swallow + // exceptions from actual bugs in components. + (error) => { + console.log(error); + } + ) + } + }, [params]); + + function onError(err) { + console.log('ERROR:', err); + } + + const handleFileNameCancel = () => setShow(false); + + const handleFileNameSave = (() => { + setShow(false); + saveDiagram(newBpmnXml); + }); + + const saveDiagram = ((bpmnXML, fileName = params.file_name) => { + setNewBpmnXml(bpmnXML); + + let url = `${BACKEND_BASE_URL}/process-models/${params.process_model_id}/file`; + let httpMethod = 'PUT' + + if (newFileName) { + fileName = newFileName; + httpMethod = 'POST' + } else { + url += `/${fileName}`; + } + if (!fileName) { + handleShow(); + return; + } + + + let bpmnFile = new File([bpmnXML.xml], fileName); + const formData = new FormData(); + formData.append('file', bpmnFile); + formData.append('fileName', bpmnFile.name); + fetch(url, { + headers: new Headers({ + 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`, + }), + method: httpMethod, + body: formData, }) .then(res => res.json()) .then( (result) => { - setProcessModelFile(result); + console.log(result); }, // Note: it's important to handle errors here // instead of a catch() block so that we don't swallow @@ -29,11 +92,7 @@ export default function ProcessModelEditDiagram() { console.log(error); } ) - }, [params]); - - function onError(err) { - console.log('ERROR:', err); - } + }); if (processModelFile) { return ( @@ -44,13 +103,54 @@ export default function ProcessModelEditDiagram() { linkProcessModel="true" />

Process Model File: {processModelFile.name}

-
+
+ + ); + } else if (!params.file_name) { + return ( +
+ +

Process Model File

+ + + + + Process Model File Name + + + setNewFileName(e.target.value)} + /> + + + + + + + +
); } else { diff --git a/src/routes/ProcessModelShow.js b/src/routes/ProcessModelShow.js index 2e3a5ce..fe8a587 100644 --- a/src/routes/ProcessModelShow.js +++ b/src/routes/ProcessModelShow.js @@ -107,6 +107,7 @@ export default function ProcessModelShow() { +