mirror of
https://github.com/sartography/spiffworkflow-frontend.git
synced 2025-02-24 12:18:17 +00:00
added App.js and added global error tag w/ burnettk
This commit is contained in:
jasquat
parent
90679fff9e
commit
492677a73c
@ -27,5 +27,6 @@ module.exports = {
|
||||
'no-console': 'off',
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'no-unused-vars': ['error', { destructuredArrayIgnorePattern: '^_' }],
|
||||
},
|
||||
};
|
||||
|
||||
98
src/App.js
Normal file
98
src/App.js
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Container } from 'react-bootstrap';
|
||||
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import ErrorContext from './contexts/ErrorContext';
|
||||
|
||||
import ProcessGroups from './routes/ProcessGroups';
|
||||
import ProcessGroupShow from './routes/ProcessGroupShow';
|
||||
import ProcessGroupNew from './routes/ProcessGroupNew';
|
||||
import ProcessGroupEdit from './routes/ProcessGroupEdit';
|
||||
import ProcessModelShow from './routes/ProcessModelShow';
|
||||
import ProcessModelEditDiagram from './routes/ProcessModelEditDiagram';
|
||||
import ProcessInstanceList from './routes/ProcessInstanceList';
|
||||
import ProcessInstanceReport from './routes/ProcessInstanceReport';
|
||||
import ProcessModelNew from './routes/ProcessModelNew';
|
||||
import ProcessModelEdit from './routes/ProcessModelEdit';
|
||||
import ProcessInstanceShow from './routes/ProcessInstanceShow';
|
||||
import ErrorBoundary from './components/ErrorBoundary';
|
||||
|
||||
import logo from './logo.svg';
|
||||
|
||||
export default function App() {
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
const errorContextValueArray = useMemo(
|
||||
() => [errorMessage, setErrorMessage],
|
||||
[errorMessage]
|
||||
);
|
||||
|
||||
let errorTag = '';
|
||||
if (errorMessage !== '') {
|
||||
errorTag = (
|
||||
<div id="filter-errors" className="mt-4 alert alert-danger" role="alert">
|
||||
{errorMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorContext.Provider value={errorContextValueArray}>
|
||||
<Container>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
{errorTag}
|
||||
<ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<ProcessGroups />} />
|
||||
|
||||
<Route path="process-groups" element={<ProcessGroups />} />
|
||||
<Route
|
||||
path="process-groups/:process_group_id"
|
||||
element={<ProcessGroupShow />}
|
||||
/>
|
||||
<Route path="process-groups/new" element={<ProcessGroupNew />} />
|
||||
<Route
|
||||
path="process-groups/:process_group_id/edit"
|
||||
element={<ProcessGroupEdit />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="process-models/:process_group_id/new"
|
||||
element={<ProcessModelNew />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id"
|
||||
element={<ProcessModelShow />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/file"
|
||||
element={<ProcessModelEditDiagram />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/file/:file_name"
|
||||
element={<ProcessModelEditDiagram />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances"
|
||||
element={<ProcessInstanceList />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/report"
|
||||
element={<ProcessInstanceReport />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/edit"
|
||||
element={<ProcessModelEdit />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
|
||||
element={<ProcessInstanceShow />}
|
||||
/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
</ErrorContext.Provider>
|
||||
);
|
||||
}
|
||||
4
src/contexts/ErrorContext.js
Normal file
4
src/contexts/ErrorContext.js
Normal file
@ -0,0 +1,4 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
const ErrorContext = createContext();
|
||||
export default ErrorContext;
|
||||
73
src/index.js
73
src/index.js
@ -1,85 +1,16 @@
|
||||
import React from 'react';
|
||||
import * as ReactDOMClient from 'react-dom/client';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import App from './App';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import './index.css';
|
||||
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
import ProcessGroups from './routes/ProcessGroups';
|
||||
import ProcessGroupShow from './routes/ProcessGroupShow';
|
||||
import ProcessGroupNew from './routes/ProcessGroupNew';
|
||||
import ProcessGroupEdit from './routes/ProcessGroupEdit';
|
||||
import ProcessModelShow from './routes/ProcessModelShow';
|
||||
import ProcessModelEditDiagram from './routes/ProcessModelEditDiagram';
|
||||
import ProcessInstanceList from './routes/ProcessInstanceList';
|
||||
import ProcessInstanceReport from './routes/ProcessInstanceReport';
|
||||
import ProcessModelNew from './routes/ProcessModelNew';
|
||||
import ProcessModelEdit from './routes/ProcessModelEdit';
|
||||
import ProcessInstanceShow from './routes/ProcessInstanceShow';
|
||||
import ErrorBoundary from './components/ErrorBoundary';
|
||||
|
||||
import logo from './logo.svg';
|
||||
|
||||
const root = ReactDOMClient.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Container>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<ProcessGroups />} />
|
||||
|
||||
<Route path="process-groups" element={<ProcessGroups />} />
|
||||
<Route
|
||||
path="process-groups/:process_group_id"
|
||||
element={<ProcessGroupShow />}
|
||||
/>
|
||||
<Route path="process-groups/new" element={<ProcessGroupNew />} />
|
||||
<Route
|
||||
path="process-groups/:process_group_id/edit"
|
||||
element={<ProcessGroupEdit />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="process-models/:process_group_id/new"
|
||||
element={<ProcessModelNew />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id"
|
||||
element={<ProcessModelShow />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/file"
|
||||
element={<ProcessModelEditDiagram />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/file/:file_name"
|
||||
element={<ProcessModelEditDiagram />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances"
|
||||
element={<ProcessInstanceList />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/report"
|
||||
element={<ProcessInstanceReport />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/edit"
|
||||
element={<ProcessModelEdit />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
|
||||
element={<ProcessInstanceShow />}
|
||||
/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useContext, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Link,
|
||||
useNavigate,
|
||||
@ -24,6 +24,8 @@ import PaginationForTable, {
|
||||
} from '../components/PaginationForTable';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
|
||||
export default function ProcessInstanceList() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
@ -38,7 +40,9 @@ export default function ProcessInstanceList() {
|
||||
const [startTill, setStartTill] = useState(null);
|
||||
const [endFrom, setEndFrom] = useState(null);
|
||||
const [endTill, setEndTill] = useState(null);
|
||||
const [filterErrorMessage, setFilterErrorMessage] = useState('');
|
||||
|
||||
const [_errorMessage, setErrorMessage] = useContext(ErrorContext);
|
||||
// const [filterErrorMessage, setFilterErrorMessage] = useState('');
|
||||
|
||||
const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
|
||||
const parametersToAlwaysFilterBy = useMemo(() => {
|
||||
@ -115,19 +119,19 @@ export default function ProcessInstanceList() {
|
||||
let queryParamString = `per_page=${perPage}&page=${page}`;
|
||||
|
||||
if (startFrom && startTill && startFrom > startTill) {
|
||||
setFilterErrorMessage('startFrom cannot be after startTill');
|
||||
setErrorMessage('startFrom cannot be after startTill');
|
||||
return;
|
||||
}
|
||||
if (endFrom && endTill && endFrom > endTill) {
|
||||
setFilterErrorMessage('endFrom cannot be after endTill');
|
||||
setErrorMessage('endFrom cannot be after endTill');
|
||||
return;
|
||||
}
|
||||
if (startFrom && endFrom && startFrom > endFrom) {
|
||||
setFilterErrorMessage('startFrom cannot be after endFrom');
|
||||
setErrorMessage('startFrom cannot be after endFrom');
|
||||
return;
|
||||
}
|
||||
if (startTill && endTill && startTill > endTill) {
|
||||
setFilterErrorMessage('startTill cannot be after endTill');
|
||||
setErrorMessage('startTill cannot be after endTill');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -147,7 +151,7 @@ export default function ProcessInstanceList() {
|
||||
queryParamString += `&process_status=${processStatus}`;
|
||||
}
|
||||
|
||||
setFilterErrorMessage('');
|
||||
setErrorMessage('');
|
||||
navigate(
|
||||
`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`
|
||||
);
|
||||
@ -202,18 +206,8 @@ export default function ProcessInstanceList() {
|
||||
);
|
||||
});
|
||||
|
||||
let errorTag = '';
|
||||
if (filterErrorMessage !== '') {
|
||||
errorTag = (
|
||||
<div id="filter-errors" className="alert alert-danger" role="alert">
|
||||
{filterErrorMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
{errorTag}
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<form onSubmit={handleFilter}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user