sartography/spiffworkflow-frontend
1
0
Fork 0
mirror of https://github.com/sartography/spiffworkflow-frontend.git synced 2025-02-24 20:28:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated remaining get calls to the backend to use the new common method

Browse Source
This commit is contained in:
jasquat 2022-07-15 15:45:06 -04:00
parent 5e9ba76c77
commit abf7786844
7 changed files with 69 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/ProcessGroupShow.tsx
View File

@ -1,13 +1,12 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Link, useSearchParams, useParams } from 'react-router-dom';
import { Button, Table, Stack } from 'react-bootstrap';
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN } from '../services/UserService';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import PaginationForTable, {
DEFAULT_PER_PAGE,
DEFAULT_PAGE,
} from '../components/PaginationForTable';
import HttpService from '../services/HttpService';
export default function ProcessGroupShow() {
const params = useParams();
@ -18,6 +17,17 @@ export default function ProcessGroupShow() {
const [pagination, setPagination] = useState(null);
useEffect(() => {
const setProcessModelFromResult = (result: any) => {
setProcessModels(result.results);
setPagination(result.pagination);
};
const processResult = (result: any) => {
setProcessGroup(result);
HttpService.makeCallToBackend({
path: `/process-groups/${params.process_group_id}/process-models?per_page=${perPage}&page=${page}`,
successCallback: setProcessModelFromResult,
});
};
// @ts-expect-error TS(2345) FIXME: Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
const perPage = parseInt(
@ -25,38 +35,10 @@ export default function ProcessGroupShow() {
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
fetch(`${BACKEND_BASE_URL}/process-groups/${params.process_group_id}`, {
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
})
.then((res) => res.json())
.then(
(processGroupResult) => {
setProcessGroup(processGroupResult);
fetch(
`${BACKEND_BASE_URL}/process-groups/${params.process_group_id}/process-models?per_page=${perPage}&page=${page}`,
{
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
}
)
.then((res) => res.json())
.then(
(processModelResult) => {
setProcessModels(processModelResult.results);
setPagination(processModelResult.pagination);
},
(error) => {
console.log(error);
}
);
},
(error) => {
console.log(error);
}
);
HttpService.makeCallToBackend({
path: `/process-groups/${params.process_group_id}`,
successCallback: processResult,
});
}, [params, searchParams]);
const buildTable = () => {

26
src/routes/ProcessInstanceReportList.tsx
View File

@ -1,32 +1,18 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Button, Table } from 'react-bootstrap';
import { useParams, Link } from 'react-router-dom';
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN } from '../services/UserService';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
export default function ProcessInstanceReportList() {
const params = useParams();
const [processInstanceReports, setProcessInstanceReports] = useState([]);
useEffect(() => {
fetch(
`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`,
{
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
}
)
.then((res) => res.json())
.then(
(result) => {
setProcessInstanceReports(result);
},
(error) => {
console.log(error);
}
);
HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`,
successCallback: setProcessInstanceReports,
});
}, [params]);
const buildTable = () => {

36
src/routes/ProcessInstanceReportShow.tsx
View File

@ -1,14 +1,13 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { Button, Table } from 'react-bootstrap';
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN } from '../services/UserService';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import PaginationForTable, {
DEFAULT_PAGE,
} from '../components/PaginationForTable';
import HttpService from '../services/HttpService';
const PER_PAGE_FOR_PROCESS_INSTANCE_REPORT = 500;
@ -21,6 +20,13 @@ export default function ProcessInstanceReport() {
const [pagination, setPagination] = useState(null);
useEffect(() => {
const processResult = (result: any) => {
const processInstancesFromApi = result.results;
setProcessInstances(processInstancesFromApi);
setReportMetadata(result.report_metadata);
setPagination(result.pagination);
};
function getProcessInstances() {
const page = searchParams.get('page') || DEFAULT_PAGE;
const perPage = parseInt(
@ -34,26 +40,10 @@ export default function ProcessInstanceReport() {
query += `&${key}=${value}`;
}
});
fetch(
`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}?${query}`,
{
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
}
)
.then((res) => res.json())
.then(
(result) => {
const processInstancesFromApi = result.results;
setProcessInstances(processInstancesFromApi);
setReportMetadata(result.report_metadata);
setPagination(result.pagination);
},
(error) => {
console.log(error);
}
);
HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}?${query}`,
successCallback: processResult,
});
}
getProcessInstances();

24
src/routes/ProcessInstanceShow.tsx
View File

@ -1,9 +1,10 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from 'react-bootstrap';
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN } from '../services/UserService';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
export default function ProcessInstanceShow() {
const navigate = useNavigate();
@ -12,23 +13,10 @@ export default function ProcessInstanceShow() {
const [processInstance, setProcessInstance] = useState(null);
useEffect(() => {
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}`,
}),
}
)
.then((res) => res.json())
.then(
(result) => {
setProcessInstance(result);
},
(error) => {
console.log(error);
}
);
HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
successCallback: setProcessInstance,
});
}, [params]);
const deleteProcessInstance = () => {

22
src/routes/ProcessModelEdit.tsx
View File

@ -1,9 +1,10 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button, Stack } from 'react-bootstrap';
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN, STANDARD_HEADERS } from '../services/UserService';
import { HOT_AUTH_TOKEN } from '../services/UserService';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
export default function ProcessModelEdit() {
const [displayName, setDisplayName] = useState('');
@ -14,19 +15,14 @@ export default function ProcessModelEdit() {
const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`;
useEffect(() => {
fetch(`${BACKEND_BASE_URL}/${processModelPath}`, {
headers: new Headers(STANDARD_HEADERS),
})
.then((res) => res.json())
.then(
(result) => {
const processResult = (result: any) => {
setProcessModel(result);
setDisplayName(result.display_name);
},
(error) => {
console.log(error);
}
);
};
HttpService.makeCallToBackend({
path: `/${processModelPath}`,
successCallback: processResult,
});
}, [processModelPath]);
const updateProcessModel = (event: any) => {

27
src/routes/ProcessModelEditDiagram.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button, Modal } from 'react-bootstrap';
import Editor from '@monaco-editor/react';
@ -7,6 +7,7 @@ import { HOT_AUTH_TOKEN } from '../services/UserService';
import ReactDiagramEditor from '../components/ReactDiagramEditor';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
export default function ProcessModelEditDiagram() {
const [showFileNameEditor, setShowFileNameEditor] = useState(false);
@ -28,26 +29,14 @@ export default function ProcessModelEditDiagram() {
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())
.then(
(result) => {
const processResult = (result: any) => {
setProcessModelFile(result);
setBpmnXmlForDiagramRendering(result.file_contents);
},
(error) => {
console.log(error);
}
);
}
};
HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/file/${params.file_name}`,
successCallback: processResult,
});
}, [params]);
const handleFileNameCancel = () => {

21
src/routes/TaskShow.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import Form from '@rjsf/core';
import { Button } from 'react-bootstrap';
import { BACKEND_BASE_URL } from '../config';
import { HOT_AUTH_TOKEN } from '../services/UserService';
import HttpService from '../services/HttpService';
export default function TaskShow() {
const [task, setTask] = useState(null);
@ -14,20 +15,10 @@ export default function TaskShow() {
useEffect(() => {
// @ts-expect-error TS(2345) FIXME: Argument of type 'string | undefined' is not assig... Remove this comment to see the full error message
const taskId = parseInt(params.task_id, 10);
fetch(`${BACKEND_BASE_URL}/tasks/${taskId}`, {
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
}),
})
.then((res) => res.json())
.then(
(result) => {
setTask(result);
},
(newError) => {
console.log(newError);
}
);
HttpService.makeCallToBackend({
path: `/tasks/${taskId}`,
successCallback: setTask,
});
}, [params.task_id]);
const handleFormSubmit = (event: any) => {