wip added some test code to added properties to bpmn xml w/ burnettk

This commit is contained in:
jasquat 2022-06-13 17:35:35 -04:00
parent 1f242f3a60
commit 0bf3336cbe
3 changed files with 179 additions and 90 deletions

View File

@ -0,0 +1,90 @@
import React from "react";
import { Link } from "react-router-dom";
import { Dropdown, Stack } from 'react-bootstrap'
export const DEFAULT_PER_PAGE = 50;
export const DEFAULT_PAGE = 1;
export default function PaginationForTable(props) {
const PER_PAGE_OPTIONS = [2, 10, 50, 100];
const buildPerPageDropdown = (() => {
const perPageDropdownRows = PER_PAGE_OPTIONS.map(per_page_option => {
if (per_page_option === props.perPage) {
return <Dropdown.Item key={per_page_option} href={`${props.path}?page=1&per_page=${per_page_option}`} active>{per_page_option}</Dropdown.Item>
} else {
return <Dropdown.Item key={per_page_option} href={`${props.path}?page=1&per_page=${per_page_option}`}>{per_page_option}</Dropdown.Item>
}
});
return (
<Stack direction="horizontal" gap={3}>
<Dropdown className="ms-auto">
<Dropdown.Toggle id="process-instances-per-page" variant="light border">
Process Instances to Show: {props.perPage}
</Dropdown.Toggle>
<Dropdown.Menu variant="light">
{perPageDropdownRows}
</Dropdown.Menu>
</Dropdown>
</Stack>
)
});
const buildPaginationNav = (() => {
let previousPageTag = "";
if (props.page === 1) {
previousPageTag = (
<li className="page-item disabled" key="previous"><span style={{fontSize:"1.5em"}} className="page-link">&laquo;</span></li>
)
} else {
previousPageTag = (
<li className="page-item" key="previous">
<Link className="page-link" style={{fontSize:"1.5em"}} to={`${props.path}?page=${props.page - 1}&per_page=${props.perPage}`}>&laquo;</Link>
</li>
)
}
let nextPageTag = "";
if (props.page === props.pagination.pages) {
nextPageTag = (
<li className="page-item disabled" key="next"><span style={{fontSize:"1.5em"}} className="page-link">&raquo;</span></li>
)
} else {
nextPageTag = (
<li className="page-item" key="next">
<Link className="page-link" style={{fontSize:"1.5em"}} to={`${props.path}?page=${props.page + 1}&per_page=${props.perPage}`}>&raquo;</Link>
</li>
)
}
let startingNumber = ((props.page - 1) * props.perPage) + 1
let endingNumber = ((props.page) * props.perPage)
if (endingNumber > props.pagination.total) {
endingNumber = props.pagination.total
}
return (
<Stack direction="horizontal" gap={3}>
<p className="ms-auto">{startingNumber}-{endingNumber} of {props.pagination.total}</p>
<nav aria-label="Page navigation">
<div>
<ul className="pagination">
{previousPageTag}
{nextPageTag}
</ul>
</div>
</nav>
</Stack>
)
});
return(
<main>
{buildPaginationNav()}
{props.tableToDisplay}
{buildPerPageDropdown()}
</main>
)
}

View File

@ -59,7 +59,6 @@ export default function ReactDiagramEditor(props) {
let diagramModeler = null;
if (props.diagramType === "bpmn") {
diagramModeler = new BpmnModeler({
container: "#canvas",
@ -92,9 +91,46 @@ export default function ReactDiagramEditor(props) {
}
});
}
setDiagramModelerState(diagramModeler)
setDiagramModelerState(diagramModeler);
console.log("WE LADED");
diagramModeler.on('selection.changed', (event) => {
const {
error,
} = event;
// if (error) {
// return handleError(error);
// }
// console.log("WE DO GET EENT");
// console.log("event", event)
console.log("event.newSelection", event.newSelection)
// let element = diagramModelerState.get('selection').get()[0];
// if (element) {
});
// modeler.get('modeling').updateProperties(modeler.get('elementRegistry').find(function (el) { return el.id === "Activity_0pxf6g1" }), {"name": "bye"})
// diagramModeler.get('modeling').updateProperties(selectedElement,{"camunda:decisionRef": value});
// window.modeler = diagramModeler;
// diagramModeler.get('modeling').updateProperties(diagramModeler.get('elementRegistry').find(function (el) { return el.id === "Activity_0pxf6g1" }), {"name": "bye"})
// diagramModeler.saveXML({ format: true })
}, [props, diagramModelerState])
// function changeNameID() {
// const elementRegistry = bpmnJS.get('elementRegistry'),
// modeling = bpmnJS.get('modeling');
//
// const process = elementRegistry.get('Process_0sckl64');
//
// modeling.updateProperties(process, {
// id: 'myProcessId',
// name: 'whatAGreatProcess'
// });
//
// }
useEffect(() => {
if (!diagramModelerState) {
return;
@ -117,8 +153,32 @@ export default function ReactDiagramEditor(props) {
modeler.get('canvas').zoom('fit-viewport');
});
diagramModelerState.on('import.done', (event) => {
const {
error,
} = event;
if (error) {
return handleError(error);
}
let modeler = diagramModelerState;
if (props.diagramType === "dmn" ) {
modeler = diagramModelerState.getActiveViewer();
}
modeler.get('canvas').zoom('fit-viewport');
});
var diagramXMLToUse = props.diagramXML || diagramXML
if (diagramXMLToUse) {
// let element = diagramModelerState.get('elementRegistry').get("ActScript");
// if (element) {
// console.log("WE DO STUFF")
// console.log("element", element)
// // diagramModelerState.get('modeling').updateProperties(element, {scriptFormat: "python", script: "x=1", name: "bye"})
// diagramModelerState.get('modeling').updateProperties(element, {name: "HELLO_ID"})
// }
return displayDiagram(diagramModelerState, diagramXMLToUse);
}
@ -171,15 +231,29 @@ export default function ReactDiagramEditor(props) {
}, [props, diagramXML, diagramModelerState]);
function handleSave() {
console.log("WE SAVE XML");
diagramModelerState.saveXML({ format: true })
.then(xmlObject => {
console.log("xmlObject.xml", xmlObject.xml)
props.saveDiagram(xmlObject.xml);
})
}
function handleTest() {
// let element = diagramModelerState.get('elementRegistry').get("ActScript");
let element = diagramModelerState.get('selection').get()[0];
if (element) {
console.log("WE DO STUFF")
console.log("element", element)
// diagramModelerState.get('modeling').updateProperties(element, {scriptFormat: "python", script: "x=1", name: "bye"})
diagramModelerState.get('modeling').updateProperties(element, {name: "HELLO_ID2"})
}
}
return (
<div>
<Button onClick={handleSave} variant="danger">Save</Button>
<Button onClick={handleTest} variant="danger">Test</Button>
</div>
);
}

View File

@ -1,19 +1,17 @@
import React, { useEffect, useState } from "react";
import { Link, useParams, useSearchParams } from "react-router-dom";
import { useParams, useSearchParams } from "react-router-dom";
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN } from '../config';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
import { Table, Dropdown, Stack } from 'react-bootstrap'
import { Table } from 'react-bootstrap'
import PaginationForTable, { DEFAULT_PER_PAGE, DEFAULT_PAGE } from '../components/PaginationForTable'
export default function ProcessInstanceList() {
let params = useParams();
let [searchParams] = useSearchParams();
const DEFAULT_PER_PAGE = 50;
const DEFAULT_PAGE = 1;
const PER_PAGE_OPTIONS = [2, 10, 50, 100];
const [processInstances, setProcessInstances] = useState(null);
const [pagination, setPagination] = useState(null);
const [processGroupId, setProcessGroupId] = useState(null);
@ -46,10 +44,6 @@ export default function ProcessInstanceList() {
}
}, [searchParams, params]);
const getPerPage = (() => {
return parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
});
const buildTable = (() => {
const rows = processInstances.map((row,i) => {
let start_date = 'N/A'
@ -90,82 +84,9 @@ export default function ProcessInstanceList() {
)
});
const getCurrentPage = (() => {
return parseInt(searchParams.get('page') || DEFAULT_PAGE);
});
const buildPerPageDropdown = (() => {
const perPageDropdownRows = PER_PAGE_OPTIONS.map(per_page_option => {
if (per_page_option === getPerPage()) {
return <Dropdown.Item key={per_page_option} href={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?page=1&per_page=${per_page_option}`} active>{per_page_option}</Dropdown.Item>
} else {
return <Dropdown.Item key={per_page_option} href={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?page=1&per_page=${per_page_option}`}>{per_page_option}</Dropdown.Item>
}
});
return (
<Stack direction="horizontal" gap={3}>
<Dropdown className="ms-auto">
<Dropdown.Toggle id="process-instances-per-page" variant="light border">
Process Instances to Show: {getPerPage()}
</Dropdown.Toggle>
<Dropdown.Menu variant="light">
{perPageDropdownRows}
</Dropdown.Menu>
</Dropdown>
</Stack>
)
});
const buildPaginationNav = (() => {
let previousPageTag = "";
if (getCurrentPage() === 1) {
previousPageTag = (
<li className="page-item disabled" key="previous"><span style={{fontSize:"1.5em"}} className="page-link">&laquo;</span></li>
)
} else {
previousPageTag = (
<li className="page-item" key="previous">
<Link className="page-link" style={{fontSize:"1.5em"}} to={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?page=${getCurrentPage() - 1}&per_page=${getPerPage()}`}>&laquo;</Link>
</li>
)
}
let nextPageTag = "";
if (getCurrentPage() === pagination.pages) {
nextPageTag = (
<li className="page-item disabled" key="next"><span style={{fontSize:"1.5em"}} className="page-link">&raquo;</span></li>
)
} else {
nextPageTag = (
<li className="page-item" key="next">
<Link className="page-link" style={{fontSize:"1.5em"}} to={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?page=${getCurrentPage() + 1}&per_page=${getPerPage()}`}>&raquo;</Link>
</li>
)
}
let startingNumber = ((getCurrentPage() - 1) * getPerPage()) + 1
let endingNumber = ((getCurrentPage()) * getPerPage())
if (endingNumber > pagination.total) {
endingNumber = pagination.total
}
return (
<Stack direction="horizontal" gap={3}>
<p className="ms-auto">{startingNumber}-{endingNumber} of {pagination.total}</p>
<nav aria-label="Page navigation">
<div>
<ul className="pagination">
{previousPageTag}
{nextPageTag}
</ul>
</div>
</nav>
</Stack>
)
});
if (processInstances) {
const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE);
return(
<main>
<ProcessBreadcrumb
@ -174,9 +95,13 @@ export default function ProcessInstanceList() {
linkProcessModel="true"
/>
<h2>Process Instances for {params.process_model_id}</h2>
{buildPaginationNav()}
{buildTable()}
{buildPerPageDropdown()}
<PaginationForTable
page={page}
perPage={perPage}
pagination={pagination}
tableToDisplay={buildTable()}
path={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}
/>
</main>
)
} else {