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

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 <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>
+  )
+}

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 (
     <div>
       <Button onClick={handleSave} variant="danger">Save</Button>
+      <Button onClick={handleTest} variant="danger">Test</Button>
     </div>
   );
 }

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 <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()}
+      <PaginationForTable
-     	{buildTable()}
+        page={page}
-      {buildPerPageDropdown()}
+        perPage={perPage}
+        pagination={pagination}
+        tableToDisplay={buildTable()}
+        path={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}
+      />
    	  </main>
     )
   } else {