diff --git a/src/components/PaginationForTable.js b/src/components/PaginationForTable.js new file mode 100644 index 0000000..b8ee9e5 --- /dev/null +++ b/src/components/PaginationForTable.js @@ -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 {per_page_option} + } else { + return {per_page_option} + } + }); + return ( + + + + Process Instances to Show: {props.perPage} + + + + {perPageDropdownRows} + + + + ) + }); + + const buildPaginationNav = (() => { + let previousPageTag = ""; + if (props.page === 1) { + previousPageTag = ( +
  • «
    • + ) + } else { + previousPageTag = ( +
  • + « +
    • + ) + } + + let nextPageTag = ""; + if (props.page === props.pagination.pages) { + nextPageTag = ( +
  • »
    • + ) + } else { + nextPageTag = ( +
  • + » +
    • + ) + } + + let startingNumber = ((props.page - 1) * props.perPage) + 1 + let endingNumber = ((props.page) * props.perPage) + if (endingNumber > props.pagination.total) { + endingNumber = props.pagination.total + } + + return ( + +

    {startingNumber}-{endingNumber} of {props.pagination.total}

    + +     + ) + }); + + return( +
    + {buildPaginationNav()} + {props.tableToDisplay} + {buildPerPageDropdown()} +
    + ) +} diff --git a/src/react_diagram_editor.js b/src/react_diagram_editor.js index 2891d2d..4804606 100644 --- a/src/react_diagram_editor.js +++ b/src/react_diagram_editor.js @@ -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 (
    +
    ); } diff --git a/src/routes/ProcessInstanceList.js b/src/routes/ProcessInstanceList.js index 25e829e..ecb11eb 100644 --- a/src/routes/ProcessInstanceList.js +++ b/src/routes/ProcessInstanceList.js @@ -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 {per_page_option} - } else { - return {per_page_option} - } - }); - return ( - - - - Process Instances to Show: {getPerPage()} - - - - {perPageDropdownRows} - - - - ) - }); - - const buildPaginationNav = (() => { - let previousPageTag = ""; - if (getCurrentPage() === 1) { - previousPageTag = ( -
  • «
    • - ) - } else { - previousPageTag = ( -
  • - « -
    • - ) - } - - let nextPageTag = ""; - if (getCurrentPage() === pagination.pages) { - nextPageTag = ( -
  • »
    • - ) - } else { - nextPageTag = ( -
  • - » -
    • - ) - } - - let startingNumber = ((getCurrentPage() - 1) * getPerPage()) + 1 - let endingNumber = ((getCurrentPage()) * getPerPage()) - if (endingNumber > pagination.total) { - endingNumber = pagination.total - } - - return ( - -

    {startingNumber}-{endingNumber} of {pagination.total}

    - -     - ) - }); - if (processInstances) { + const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE); + const page = parseInt(searchParams.get('page') || DEFAULT_PAGE); return(

    Process Instances for {params.process_model_id}

    - {buildPaginationNav()} - {buildTable()} - {buildPerPageDropdown()} +
    ) } else {