+
Process Groups
-
+
);
- } else {
- return (<>)
}
}
diff --git a/src/routes/ProcessInstanceList.js b/src/routes/ProcessInstanceList.js
index 12018e2..3f79ceb 100644
--- a/src/routes/ProcessInstanceList.js
+++ b/src/routes/ProcessInstanceList.js
@@ -1,16 +1,28 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+ Link,
+ useNavigate,
+ useParams,
+ useSearchParams,
+} from 'react-router-dom';
-import { BACKEND_BASE_URL, PROCESS_STATUSES, DATE_FORMAT } from '../config';
-import { HOT_AUTH_TOKEN } from '../config';
+import { Button, Table, Stack, Dropdown } from 'react-bootstrap';
+import DatePicker from 'react-datepicker';
+import { format } from 'date-fns';
+import {
+ BACKEND_BASE_URL,
+ PROCESS_STATUSES,
+ DATE_FORMAT,
+ HOT_AUTH_TOKEN,
+} from '../config';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-import { Button, Table, Stack, Dropdown } from 'react-bootstrap';
-import DatePicker from "react-datepicker";
-import { convertDateToSeconds } from "../helpers";
+import { convertDateToSeconds } from '../helpers';
-import PaginationForTable, { DEFAULT_PER_PAGE, DEFAULT_PAGE } from '../components/PaginationForTable'
-import "react-datepicker/dist/react-datepicker.css";
-import { format } from "date-fns";
+import PaginationForTable, {
+ DEFAULT_PER_PAGE,
+ DEFAULT_PAGE,
+} from '../components/PaginationForTable';
+import 'react-datepicker/dist/react-datepicker.css';
export default function ProcessInstanceList() {
const params = useParams();
@@ -22,56 +34,71 @@ export default function ProcessInstanceList() {
const oneHourInSeconds = 3600;
const oneMonthInSeconds = oneHourInSeconds * 24 * 30;
- const [startFrom, setStartFrom] = useState(convertDateToSeconds(new Date()) - oneMonthInSeconds);
- const [startTill, setStartTill] = useState(convertDateToSeconds(new Date()) + oneHourInSeconds);
- const [endFrom, setEndFrom] = useState(convertDateToSeconds(new Date()) - oneMonthInSeconds);
- const [endTill, setEndTill] = useState(convertDateToSeconds(new Date()) + oneHourInSeconds);
+ const [startFrom, setStartFrom] = useState(
+ convertDateToSeconds(new Date()) - oneMonthInSeconds
+ );
+ const [startTill, setStartTill] = useState(
+ convertDateToSeconds(new Date()) + oneHourInSeconds
+ );
+ const [endFrom, setEndFrom] = useState(
+ convertDateToSeconds(new Date()) - oneMonthInSeconds
+ );
+ const [endTill, setEndTill] = useState(
+ convertDateToSeconds(new Date()) + oneHourInSeconds
+ );
const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
const parametersToAlwaysFilterBy = useMemo(() => {
return {
- 'start_from': setStartFrom,
- 'start_till': setStartTill,
- 'end_from': setEndFrom,
- 'end_till': setEndTill,
- }
+ start_from: setStartFrom,
+ start_till: setStartTill,
+ end_from: setEndFrom,
+ end_till: setEndTill,
+ };
}, [setStartFrom, setStartTill, setEndFrom, setEndTill]);
useEffect(() => {
- getProcessInstances();
-
function getProcessInstances() {
const page = searchParams.get('page') || DEFAULT_PAGE;
- const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
+ const perPage = parseInt(
+ searchParams.get('per_page') || DEFAULT_PER_PAGE,
+ 10
+ );
let queryParamString = `per_page=${perPage}&page=${page}`;
- for (const paramName in parametersToAlwaysFilterBy) {
- const functionToCall = parametersToAlwaysFilterBy[paramName]
+ Object.keys(parametersToAlwaysFilterBy).forEach((paramName) => {
+ const functionToCall = parametersToAlwaysFilterBy[paramName];
let defaultValue = null;
- if (paramName.endsWith("_from")) {
+ if (paramName.endsWith('_from')) {
defaultValue = convertDateToSeconds(new Date()) - oneMonthInSeconds;
- } else if (paramName.endsWith("_till")) {
+ } else if (paramName.endsWith('_till')) {
defaultValue = convertDateToSeconds(new Date()) + oneHourInSeconds;
}
- let searchParamValue = searchParams.get(paramName);
+ const searchParamValue = searchParams.get(paramName);
if (searchParamValue) {
queryParamString += `&${paramName}=${searchParamValue}`;
functionToCall(searchParamValue);
} else if (defaultValue) {
queryParamString += `&${paramName}=${defaultValue}`;
}
- }
+ });
+
if (searchParams.get('process_status')) {
- queryParamString += `&process_status=${searchParams.get('process_status')}`;
+ queryParamString += `&process_status=${searchParams.get(
+ 'process_status'
+ )}`;
setProcessStatus(searchParams.get('process_status'));
}
- fetch(`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- })
- })
- .then(res => res.json())
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ }
+ )
+ .then((res) => res.json())
.then(
(result) => {
const processInstancesFromApi = result.results;
@@ -81,14 +108,25 @@ export default function ProcessInstanceList() {
(error) => {
console.log(error);
}
- )
+ );
}
- }, [searchParams, params, oneMonthInSeconds, oneHourInSeconds, parametersToAlwaysFilterBy]);
- const handleFilter = ((event) => {
+ getProcessInstances();
+ }, [
+ searchParams,
+ params,
+ oneMonthInSeconds,
+ oneHourInSeconds,
+ parametersToAlwaysFilterBy,
+ ]);
+
+ const handleFilter = (event) => {
event.preventDefault();
const page = searchParams.get('page') || DEFAULT_PAGE;
- const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
+ const perPage = parseInt(
+ searchParams.get('per_page') || DEFAULT_PER_PAGE,
+ 10
+ );
let queryParamString = `per_page=${perPage}&page=${page}`;
if (startFrom) {
@@ -103,14 +141,16 @@ export default function ProcessInstanceList() {
if (endTill) {
queryParamString += `&end_till=${endTill}`;
}
- if (processStatus && processStatus !== "all") {
+ if (processStatus && processStatus !== 'all') {
queryParamString += `&process_status=${processStatus}`;
}
- navigate(`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`)
- });
+ navigate(
+ `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`
+ );
+ };
- const dateComponent = ((labelString, name, initialDate, onChangeFunction) => {
+ const dateComponent = (labelString, name, initialDate, onChangeFunction) => {
return (
@@ -122,27 +162,37 @@ export default function ProcessInstanceList() {
dateFormat={DATE_FORMAT}
/>
- )
- });
+ );
+ };
- const getSearchParamsAsQueryString = (() => {
- let queryParamString = "";
- for (const paramName in parametersToAlwaysFilterBy) {
- let searchParamValue = searchParams.get(paramName);
+ const getSearchParamsAsQueryString = () => {
+ let queryParamString = '';
+ Object.keys(parametersToAlwaysFilterBy).forEach((paramName) => {
+ const searchParamValue = searchParams.get(paramName);
if (searchParamValue) {
queryParamString += `&${paramName}=${searchParamValue}`;
}
- }
+ });
return queryParamString;
- });
+ };
- const filterOptions = (() => {
- const processStatusesRows = PROCESS_STATUSES.map(processStatusOption => {
+ const filterOptions = () => {
+ const processStatusesRows = PROCESS_STATUSES.map((processStatusOption) => {
if (processStatusOption === processStatus) {
- return {processStatusOption}
- } else {
- return setProcessStatus(processStatusOption)}>{processStatusOption}
+ return (
+
+ {processStatusOption}
+
+ );
}
+ return (
+ setProcessStatus(processStatusOption)}
+ >
+ {processStatusOption}
+
+ );
});
return (
@@ -151,17 +201,25 @@ export default function ProcessInstanceList() {
-
-
+
- )
- });
+ );
+ };
- const buildTable = (() => {
- const rows = processInstances.map((row,i) => {
- let start_date = 'N/A'
- if (row.start_in_seconds) {
- start_date = new Date(row.start_in_seconds * 1000);
- }
- let end_date = 'N/A'
- if (row.end_in_seconds) {
- end_date = new Date(row.end_in_seconds * 1000);
- }
- return (
-
+ const buildTable = () => {
+ const rows = processInstances.map((row) => {
+ let startDate = 'N/A';
+ if (row.start_in_seconds) {
+ startDate = new Date(row.start_in_seconds * 1000);
+ }
+ let endDate = 'N/A';
+ if (row.end_in_seconds) {
+ endDate = new Date(row.end_in_seconds * 1000);
+ }
+ return (
+
|
- {row.id}
+
+ {row.id}
+
|
{row.process_model_identifier} |
{row.process_group_id} |
- {format(start_date, DATE_FORMAT)} |
- {format(end_date, DATE_FORMAT)} |
+ {format(startDate, DATE_FORMAT)} |
+ {format(endDate, DATE_FORMAT)} |
{row.status} |
-
- )
- })
- return(
-
+
+ );
+ });
+ return (
+
| Process Instance Id |
@@ -216,36 +280,35 @@ export default function ProcessInstanceList() {
Status |
-
- {rows}
-
+ {rows}
- )
- });
+ );
+ };
if (pagination) {
- const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
- const page = parseInt(searchParams.get('page') || DEFAULT_PAGE);
- return(
+ const perPage = parseInt(
+ searchParams.get('per_page') || DEFAULT_PER_PAGE,
+ 10
+ );
+ const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
+ return (
-
- Process Instances for {params.process_model_id}
- {filterOptions()}
-
-
- )
- } else {
- return(<>)
+
+ Process Instances for {params.process_model_id}
+ {filterOptions()}
+
+
+ );
}
}
diff --git a/src/routes/ProcessInstanceReport.js b/src/routes/ProcessInstanceReport.js
index fccaafa..de4c0ba 100644
--- a/src/routes/ProcessInstanceReport.js
+++ b/src/routes/ProcessInstanceReport.js
@@ -1,64 +1,72 @@
-import React, { useEffect, useState } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
+import React, { useEffect, useState } from 'react';
+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 } from 'react-bootstrap'
+import { Table } from 'react-bootstrap';
+import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-import PaginationForTable, { DEFAULT_PER_PAGE, DEFAULT_PAGE } from '../components/PaginationForTable'
+import PaginationForTable, {
+ DEFAULT_PER_PAGE,
+ DEFAULT_PAGE,
+} from '../components/PaginationForTable';
export default function ProcessInstanceReport() {
- let params = useParams();
- let [searchParams] = useSearchParams();
+ const params = useParams();
+ const [searchParams] = useSearchParams();
const [processInstances, setProcessInstances] = useState([]);
const [pagination, setPagination] = useState(null);
const [processGroupId, setProcessGroupId] = useState(null);
useEffect(() => {
- getProcessInstances();
-
function getProcessInstances() {
const page = searchParams.get('page') || DEFAULT_PAGE;
- const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
- fetch(`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report?per_page=${perPage}&page=${page}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- })
- })
- .then(res => res.json())
+ const perPage = parseInt(
+ searchParams.get('per_page') || DEFAULT_PER_PAGE,
+ 10
+ );
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report?per_page=${perPage}&page=${page}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ }
+ )
+ .then((res) => res.json())
.then(
(result) => {
const processInstancesFromApi = result.results;
setProcessInstances(processInstancesFromApi);
setPagination(result.pagination);
if (processInstancesFromApi[0]) {
- setProcessGroupId(processInstancesFromApi[0].process_group_id)
+ setProcessGroupId(processInstancesFromApi[0].process_group_id);
}
},
(error) => {
console.log(error);
}
- )
+ );
}
+
+ getProcessInstances();
}, [searchParams, params]);
- const buildTable = (() => {
- const rows = processInstances.map((row,i) => {
- return (
-
- | {row.id} |
- {row.data.month} |
- {row.data.milestone} |
- {row.data.req_id} |
- {row.data.feature} |
- {row.data.priority} |
-
- )
- })
- return(
-
+ const buildTable = () => {
+ const rows = processInstances.map((row) => {
+ return (
+
+ | {row.id} |
+ {row.data.month} |
+ {row.data.milestone} |
+ {row.data.req_id} |
+ {row.data.feature} |
+ {row.data.priority} |
+
+ );
+ });
+ return (
+
| db id |
@@ -69,34 +77,33 @@ export default function ProcessInstanceReport() {
priority |
-
- {rows}
-
+ {rows}
- )
- });
+ );
+ };
if (pagination) {
- const perPage = parseInt(searchParams.get('per_page') || DEFAULT_PER_PAGE);
- const page = parseInt(searchParams.get('page') || DEFAULT_PAGE);
- return(
+ const perPage = parseInt(
+ searchParams.get('per_page') || DEFAULT_PER_PAGE,
+ 10
+ );
+ const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
+ return (
-
- Process Instances for {params.process_model_id}
-
-
- )
- } else {
- return(<>)
+
+ Process Instances for {params.process_model_id}
+
+
+ );
}
}
diff --git a/src/routes/ProcessInstanceShow.js b/src/routes/ProcessInstanceShow.js
index d4b2087..fc5f68c 100644
--- a/src/routes/ProcessInstanceShow.js
+++ b/src/routes/ProcessInstanceShow.js
@@ -1,42 +1,46 @@
-import React, { useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import React, { useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button } from 'react-bootstrap';
import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
-import { Button } from 'react-bootstrap'
-import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-export default function ProcessInstanceShow(props) {
+export default function ProcessInstanceShow() {
const navigate = useNavigate();
const params = useParams();
- useEffect(() => {
- }, []);
+ useEffect(() => {}, []);
- const deleteProcessInstance = (() => {
- fetch(`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- }),
- method: 'DELETE',
- })
- .then(res => res.json())
- .then(
- (result) => {
- navigate(`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`);
- },
- (error) => {
- console.log(error);
- }
- )
- });
+ const deleteProcessInstance = () => {
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ method: 'DELETE',
+ }
+ ).then(
+ () => {
+ navigate(
+ `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`
+ );
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ };
return (
-
+
-
+
- )
+ );
}
diff --git a/src/routes/ProcessModelEdit.js b/src/routes/ProcessModelEdit.js
index ffa5fb0..5e803e8 100644
--- a/src/routes/ProcessModelEdit.js
+++ b/src/routes/ProcessModelEdit.js
@@ -1,21 +1,20 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN, STANDARD_HEADERS } from '../config';
-import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
-import { Button, Stack } from 'react-bootstrap'
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button, Stack } from 'react-bootstrap';
+import { BACKEND_BASE_URL, HOT_AUTH_TOKEN, STANDARD_HEADERS } from '../config';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
export default function ProcessModelEdit() {
- const [displayName, setDisplayName] = useState("");
+ const [displayName, setDisplayName] = useState('');
const params = useParams();
const navigate = useNavigate();
const [processModel, setProcessModel] = useState(null);
- const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`
+ const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`;
useEffect(() => {
fetch(`${BACKEND_BASE_URL}/${processModelPath}`, STANDARD_HEADERS)
- .then(res => res.json())
+ .then((res) => res.json())
.then(
(result) => {
setProcessModel(result);
@@ -24,16 +23,16 @@ export default function ProcessModelEdit() {
(error) => {
console.log(error);
}
- )
+ );
}, [processModelPath]);
- const updateProcessModel = ((event) => {
- event.preventDefault()
+ const updateProcessModel = (event) => {
+ event.preventDefault();
fetch(`${BACKEND_BASE_URL}/${processModelPath}`, {
headers: new Headers({
'Content-Type': 'application/json',
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
method: 'PUT',
body: JSON.stringify({
@@ -45,69 +44,68 @@ export default function ProcessModelEdit() {
standalone: processModel.standalone,
library: processModel.library,
}),
- })
- .then(res => res.json())
- .then(
- (result) => {
- navigate(`/${processModelPath}`)
- },
- // 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.
- (newError) => {
- console.log(newError);
- }
- )
+ }).then(
+ () => {
+ navigate(`/${processModelPath}`);
+ },
+ // 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.
+ (newError) => {
+ console.log(newError);
+ }
+ );
+ };
- });
+ const deleteProcessModel = () => {
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ method: 'DELETE',
+ }
+ ).then(
+ () => {
+ navigate(`/process-groups/${params.process_group_id}`);
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ };
- const deleteProcessModel = (() => {
- fetch(`${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- }),
- method: 'DELETE',
- })
- .then(res => res.json())
- .then(
- (result) => {
- navigate(`/process-groups/${params.process_group_id}`);
- },
- (error) => {
- console.log(error);
- }
- )
- });
-
- const onDisplayNameChanged = ((newDisplayName) => {
+ const onDisplayNameChanged = (newDisplayName) => {
setDisplayName(newDisplayName);
- });
+ };
if (processModel) {
return (
-
+
Edit Process Group: {processModel.id}
);
- } else {
- return (<>)
}
}
-
diff --git a/src/routes/ProcessModelEditDiagram.js b/src/routes/ProcessModelEditDiagram.js
index afd6d47..0e1b4a7 100644
--- a/src/routes/ProcessModelEditDiagram.js
+++ b/src/routes/ProcessModelEditDiagram.js
@@ -1,20 +1,17 @@
-import React, { useEffect, useState } from "react";
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN } from '../config';
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-
-import ReactDiagramEditor from "../react_diagram_editor"
-import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
-
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button, Modal } from 'react-bootstrap';
+import Editor from '@monaco-editor/react';
+import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
-import Editor from "@monaco-editor/react";
+import ReactDiagramEditor from '../react_diagram_editor';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
export default function ProcessModelEditDiagram() {
const [showFileNameEditor, setShowFileNameEditor] = useState(false);
const handleShowFileNameEditor = () => setShowFileNameEditor(true);
- const [scriptText, setScriptText] = useState("");
+ const [scriptText, setScriptText] = useState('');
const [scriptModeling, setScriptModeling] = useState(null);
const [scriptElement, setScriptElement] = useState(null);
const [showScriptEditor, setShowScriptEditor] = useState(false);
@@ -25,17 +22,21 @@ export default function ProcessModelEditDiagram() {
const [searchParams] = useSearchParams();
const [processModelFile, setProcessModelFile] = useState(null);
- const [newFileName, setNewFileName] = useState("");
- const [bpmnXmlForDiagramRendering, setBpmnXmlForDiagramRendering] = useState(null);
+ const [newFileName, setNewFileName] = useState('');
+ const [bpmnXmlForDiagramRendering, setBpmnXmlForDiagramRendering] =
+ useState(null);
useEffect(() => {
if (params.file_name) {
- fetch(`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/file/${params.file_name}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- })
- })
- .then(res => res.json())
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/file/${params.file_name}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ }
+ )
+ .then((res) => res.json())
.then(
(result) => {
setProcessModelFile(result);
@@ -44,26 +45,16 @@ export default function ProcessModelEditDiagram() {
(error) => {
console.log(error);
}
- )
+ );
}
}, [params]);
- function onError(err) {
- console.log('ERROR:', err);
- }
-
- const handleFileNameCancel = (() => {
+ const handleFileNameCancel = () => {
setShowFileNameEditor(false);
- setNewFileName("");
- });
+ setNewFileName('');
+ };
- const handleFileNameSave = ((event) => {
- event.preventDefault();
- setShowFileNameEditor(false);
- saveDiagram(bpmnXmlForDiagramRendering);
- });
-
- const saveDiagram = ((bpmnXML, fileName = params.file_name) => {
+ const saveDiagram = (bpmnXML, fileName = params.file_name) => {
setBpmnXmlForDiagramRendering(bpmnXML);
let url = `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/file`;
@@ -72,7 +63,7 @@ export default function ProcessModelEditDiagram() {
if (newFileName) {
fileNameWithExtension = `${newFileName}.${searchParams.get('file_type')}`;
- httpMethod = 'POST'
+ httpMethod = 'POST';
} else {
url += `/${fileNameWithExtension}`;
}
@@ -81,32 +72,38 @@ export default function ProcessModelEditDiagram() {
return;
}
- let bpmnFile = new File([bpmnXML], fileNameWithExtension);
+ const bpmnFile = new File([bpmnXML], fileNameWithExtension);
const formData = new FormData();
formData.append('file', bpmnFile);
formData.append('fileName', bpmnFile.name);
fetch(url, {
headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`,
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
method: httpMethod,
body: formData,
- })
- .then(res => res.json())
- .then(
- (result) => {
- if (!params.file_name) {
- navigate(`/process-models/${params.process_group_id}/${params.process_model_id}/file/${fileNameWithExtension}`);
- }
- },
- (error) => {
- console.log(error);
+ }).then(
+ () => {
+ if (!params.file_name) {
+ navigate(
+ `/process-models/${params.process_group_id}/${params.process_model_id}/file/${fileNameWithExtension}`
+ );
}
- )
- });
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ };
- const newFileNameBox = (() => {
- let fileExtension = `.${searchParams.get('file_type')}`;
+ const handleFileNameSave = (event) => {
+ event.preventDefault();
+ setShowFileNameEditor(false);
+ saveDiagram(bpmnXmlForDiagramRendering);
+ };
+
+ const newFileNameBox = () => {
+ const fileExtension = `.${searchParams.get('file_type')}`;
return (
@@ -116,11 +113,11 @@ export default function ProcessModelEditDiagram() {
setNewFileName(e.target.value)}
- autoFocus={true}
+ onChange={(e) => setNewFileName(e.target.value)}
+ autoFocus
/>
{fileExtension}
@@ -134,29 +131,29 @@ export default function ProcessModelEditDiagram() {
- )
- });
+ );
+ };
- const onLaunchScriptEditor = ((element, modeling) => {
- setScriptText((element.businessObject.script || ''));
+ const onLaunchScriptEditor = (element, modeling) => {
+ setScriptText(element.businessObject.script || '');
setScriptModeling(modeling);
setScriptElement(element);
handleShowScriptEditor();
- });
- const handleScriptEditorClose = (() => {
+ };
+ const handleScriptEditorClose = () => {
setShowScriptEditor(false);
- });
- const handleEditorChange = ((value, event) => {
+ };
+ const handleEditorChange = (value) => {
setScriptText(value);
scriptModeling.updateProperties(scriptElement, {
- scriptFormat: "python",
- script: value
+ scriptFormat: 'python',
+ script: value,
});
- });
- const scriptEditor = (() => {
- let scriptName = "";
+ };
+ const scriptEditor = () => {
+ let scriptName = '';
if (scriptElement) {
- scriptName = scriptElement.di.bpmnElement.name
+ scriptName = scriptElement.di.bpmnElement.name;
}
return (
@@ -177,62 +174,61 @@ export default function ProcessModelEditDiagram() {
);
- });
+ };
- const isDmn = (() => {
- const file_name = params.file_name || "";
- if (searchParams.get('file_type') === "dmn" || file_name.endsWith(".dmn") ) {
+ const isDmn = () => {
+ const fileName = params.file_name || '';
+ if (searchParams.get('file_type') === 'dmn' || fileName.endsWith('.dmn')) {
return true;
}
return false;
- });
+ };
- const appropriateEditor = (() => {
+ const appropriateEditor = () => {
if (isDmn()) {
return (
- )
+ );
}
return (
- )
- });
+ );
+ };
// if a file name is not given then this is a new model and the ReactDiagramEditor component will handle it
if (bpmnXmlForDiagramRendering || !params.file_name) {
return (
-
+
- Process Model File{processModelFile ? `: ${processModelFile.name}` : ""}
+
+ Process Model File
+ {processModelFile ? `: ${processModelFile.name}` : ''}
+
{appropriateEditor()}
{newFileNameBox()}
{scriptEditor()}
-
+
);
- } else {
- return (<>)
}
}
diff --git a/src/routes/ProcessModelNew.js b/src/routes/ProcessModelNew.js
index 2e42e72..7d5fe38 100644
--- a/src/routes/ProcessModelNew.js
+++ b/src/routes/ProcessModelNew.js
@@ -1,25 +1,24 @@
-import React, { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN } from '../config';
-import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
-import { slugifyString } from '../helpers'
+import React, { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import { slugifyString } from '../helpers';
-export default function ProcessModelNew(props) {
- let params = useParams();
+export default function ProcessModelNew() {
+ const params = useParams();
- const [identifier, setIdentifier] = useState("");
+ const [identifier, setIdentifier] = useState('');
const [idHasBeenUpdatedByUser, setIdHasBeenUpdatedByUser] = useState(false);
- const [displayName, setDisplayName] = useState("");
+ const [displayName, setDisplayName] = useState('');
const navigate = useNavigate();
- const addProcessModel = ((event) => {
- event.preventDefault()
+ const addProcessModel = (event) => {
+ event.preventDefault();
fetch(`${BACKEND_BASE_URL}/process-models`, {
headers: new Headers({
'Content-Type': 'application/json',
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
method: 'POST',
body: JSON.stringify({
@@ -31,49 +30,55 @@ export default function ProcessModelNew(props) {
standalone: false,
library: false,
}),
- })
- .then(res => res.json())
- .then(
- (result) => {
- navigate(`/process-models/${params.process_group_id}/${identifier}`);
- },
- // 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.
- (newError) => {
- console.log(newError);
- }
- )
+ }).then(
+ () => {
+ navigate(`/process-models/${params.process_group_id}/${identifier}`);
+ },
+ // 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.
+ (newError) => {
+ console.log(newError);
+ }
+ );
+ };
- });
-
- const onDisplayNameChanged = ((newDisplayName) => {
+ const onDisplayNameChanged = (newDisplayName) => {
setDisplayName(newDisplayName);
if (!idHasBeenUpdatedByUser) {
setIdentifier(slugifyString(newDisplayName));
}
- });
+ };
return (
-
+
Add Process Model
diff --git a/src/routes/ProcessModelShow.js b/src/routes/ProcessModelShow.js
index 10d72b1..a24d35d 100644
--- a/src/routes/ProcessModelShow.js
+++ b/src/routes/ProcessModelShow.js
@@ -1,25 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN } from '../config';
-import { useParams } from "react-router-dom";
-import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
-import FileInput from '../components/FileInput'
-import { Button, Stack } from 'react-bootstrap'
+import React, { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Button, Stack } from 'react-bootstrap';
+import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import FileInput from '../components/FileInput';
export default function ProcessModelShow() {
- let params = useParams();
+ const params = useParams();
const [processModel, setProcessModel] = useState(null);
const [processInstanceResult, setProcessInstanceResult] = useState(null);
useEffect(() => {
- fetch(`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- })
- })
- .then(res => res.json())
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ }
+ )
+ .then((res) => res.json())
.then(
(result) => {
setProcessModel(result);
@@ -27,35 +28,20 @@ export default function ProcessModelShow() {
(error) => {
console.log(error);
}
- )
+ );
}, [params]);
- const processInstanceCreateAndRun = ((event) => {
- fetch(`${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- }),
- method: 'POST',
- })
- .then(res => res.json())
- .then(
- (result) => {
- processModelRun(result);
- },
- (error) => {
- console.log(error);
- }
- )
- });
-
- const processModelRun = ((processInstance) => {
- fetch(`${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/${processInstance.id}/run`, {
- headers: new Headers({
- 'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
- }),
- method: 'POST',
- })
- .then(res => res.json())
+ const processModelRun = (processInstance) => {
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/${processInstance.id}/run`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ method: 'POST',
+ }
+ )
+ .then((res) => res.json())
.then(
(result) => {
setProcessInstanceResult(result);
@@ -63,59 +49,114 @@ export default function ProcessModelShow() {
(error) => {
console.log(error);
}
- )
- });
+ );
+ };
- let processInstanceResultTag = ""
+ const processInstanceCreateAndRun = () => {
+ fetch(
+ `${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`,
+ {
+ headers: new Headers({
+ Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
+ }),
+ method: 'POST',
+ }
+ )
+ .then((res) => res.json())
+ .then(
+ (result) => {
+ processModelRun(result);
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ };
+
+ let processInstanceResultTag = '';
if (processInstanceResult) {
- processInstanceResultTag = {processInstanceResult.status}: {JSON.stringify(processInstanceResult.data)}
+ processInstanceResultTag = (
+
+ {processInstanceResult.status}:{' '}
+ {JSON.stringify(processInstanceResult.data)}
+
+ );
}
if (processModel) {
- let processModelFilesTag = "";
- processModelFilesTag = processModel.files.map(file_bpmn => {
- if (file_bpmn.name === processModel.primary_file_name) {
+ let processModelFilesTag = '';
+ processModelFilesTag = processModel.files.map((fileBpmn) => {
+ if (fileBpmn.name === processModel.primary_file_name) {
return (
-
- {file_bpmn.name} - Primary File
+
+
+ {fileBpmn.name}
+ {' '}
+ - Primary File
- )
- } else {
- return (
-
- {file_bpmn.name}
-
- )
+ );
}
- })
+ return (
+
+
+ {fileBpmn.name}
+
+
+ );
+ });
return (
-
-
- Process Model: {processModel.id}
- {processInstanceResultTag}
-
-
-
-
-
-
-
-
-
-
- Process Instances
-
-
- Files
-
+
+
+ Process Model: {processModel.id}
+ {processInstanceResultTag}
+
+
+
+
+
+
+
+
+
+
+
+ Process Instances
+
+
+
+ Files
+
);
- } else {
- return (<>)
}
}
-
diff --git a/src/routes/expenses.jsx b/src/routes/expenses.jsx
index 785ba0b..d30204e 100644
--- a/src/routes/expenses.jsx
+++ b/src/routes/expenses.jsx
@@ -1,6 +1,6 @@
export default function Expenses() {
return (
-
+
Expenses
);