diff --git a/forms-flow-web/src/components/PrivateRoute.jsx b/forms-flow-web/src/components/PrivateRoute.jsx
index 636f093efb..0af9d122e4 100644
--- a/forms-flow-web/src/components/PrivateRoute.jsx
+++ b/forms-flow-web/src/components/PrivateRoute.jsx
@@ -1,6 +1,6 @@
-import React, { Component } from "react";
+import React, {useEffect}from "react";
import { Route, Redirect } from "react-router-dom";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
import UserService from "../services/UserService";
import Form from "./Form";
@@ -12,17 +12,16 @@ import DashboardPage from "./Dashboard";
import InsightsPage from "./Insights";
import Application from "./Application";
-class PrivateRoute extends Component {
- UNSAFE_componentWillMount() {
- UserService.initKeycloak(this.props.store, (err, res) => {
- this.props.setUserAuth(res.authenticated);
- });
- }
- ReviewerRoute = ({ component: Component, ...rest }) => (
+const PrivateRoute = (props) => {
+ const dispatch = useDispatch();
+ const isAuth = useSelector((state) => state.user.isAuthenticated);
+ const userRoles=useSelector((state) => state.user.roles || []);
+
+ const ReviewerRoute = ({ component: Component, ...rest }) => (
- this.props.userRoles.includes(STAFF_REVIEWER) ? (
+ userRoles.includes(STAFF_REVIEWER) ? (
- this.props.userRoles.includes(STAFF_REVIEWER) || this.props.userRoles.includes(CLIENT) ? (
+ userRoles.includes(STAFF_REVIEWER) || userRoles.includes(CLIENT) ? (
-
- {(props) => (
-
- ) : (
-
-
-
- -
-
- );
- };
- return (
- appHistory.length > 0 ? (
- - -
-
-
-
- )}
-
- 
-
-
- - Application History -
--
-
- getNoDataIndicationContent()}
- />
-
-
-
-
-
- Tasks
+
-
- Tasks
+
+
+ Tasks
({tasks.length})
diff --git a/forms-flow-web/src/components/Task/Task.scss b/forms-flow-web/src/components/Task/Task.scss
index 7105e648ba..9931ba7598 100644
--- a/forms-flow-web/src/components/Task/Task.scss
+++ b/forms-flow-web/src/components/Task/Task.scss
@@ -160,8 +160,8 @@
margin-left: 0px !important;
display: flex;
margin-top: 10px;
- margin-bottom: 30px;
- height: 35px;
+ margin-bottom: 25px;
+ height: 30px;
}
.table{
@@ -177,7 +177,7 @@
background-color: transparent;
cursor: pointer;
}
-}
+}
.filter-label
{
display: flex !important;
diff --git a/forms-flow-web/src/components/Task/ViewTask.js b/forms-flow-web/src/components/Task/ViewTask.js
index 78c8c82d0e..d4f6d30939 100644
--- a/forms-flow-web/src/components/Task/ViewTask.js
+++ b/forms-flow-web/src/components/Task/ViewTask.js
@@ -10,23 +10,29 @@ import {setLoader} from "../../actions/taskActions";
import View from "../Form/Item/Submission/Item/View";
import {getProcessStatusList} from "../../apiManager/services/processServices";
import {getApplicationById, getApplicationFormDataByAppId} from "../../apiManager/services/applicationServices";
-import History from './History';
-import ProcessDiagram from "../BPMN/ProcessDiagram";
+import History from '../Application/ApplicationHistory';
+// import ProcessDiagram from "../BPMN/ProcessDiagram";
+import ProcessDiagram from "../BPMN/ProcessDiagramHook";
+import {getProcessActivities} from "../../apiManager/services/processServices";
const ViewTask = (props) => {
const {taskId} = useParams();
const taskDetail = useSelector(state => state.tasks.taskDetail);
const applicationProcess = useSelector(state => state.applications.applicationProcess);
-
+ const applicationId = taskDetail.applicationId;
const isLoading = useSelector(state => state.tasks.isLoading);
const dispatch = useDispatch();
const {getTask} = props;
+ // const processActivityList = useSelector(state => state.process.processActivityList);
useEffect(()=>{
if(taskDetail && taskDetail.id === taskId){
dispatch(setLoader(false));
}else{
getTask(taskId);
}
+ taskDetail.processInstanceId && dispatch(
+ getProcessActivities(taskDetail.processInstanceId)
+ );
},[taskId, dispatch, taskDetail, getTask])
if (isLoading) {
@@ -38,11 +44,13 @@ const ViewTask = (props) => {
-
-
-
-
- Tasks /{" "}
+{/*
+
+
+
+ */}
+
+ Tasks /{" "}
{`${taskDetail.name}`}
@@ -55,11 +63,12 @@ const ViewTask = (props) => {
-
diff --git a/forms-flow-web/src/components/Task/historyTable.js b/forms-flow-web/src/components/Task/historyTable.js
deleted file mode 100644
index f5a9432d50..0000000000
--- a/forms-flow-web/src/components/Task/historyTable.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import {getLocalDateTime} from "../../apiManager/services/formatterService";
-
-
-export const defaultSortedBy = [
- {
- dataField: "name",
- order: "asc", // or desc
- },
-];
-
-const linkSubmision = (cell) => {
- return (
- window.open(cell, "_blank")}>
- View Submission
-
- );
-}
-
-function timeFormatter(cell) {
- const localDate = getLocalDateTime(cell);
- return ;
-}
-
-// History table columns
-export const columns_history = [
- {
- dataField: "applicationStatus",
- text: "Status",
- sort: true,
- },
- {
- dataField: "created",
- text: "Created",
- sort: true,
- formatter: timeFormatter,
- },
- {
- dataField: "formUrl",
- text: "Submissions",
- formatter: linkSubmision,
- },
-];
-const customTotal = (from, to, size) => (
-
- Showing {from} to {to} of {size} Results
-
-);
-
-export const getoptions = (count) => {
- return {
- expandRowBgColor: "rgb(173,216,230)",
- pageStartIndex: 1,
- alwaysShowAllBtns: true, // Always show next and previous button
- withFirstAndLast: false, // Hide the going to First and Last page button
- hideSizePerPage: true, // Hide the sizePerPage dropdown always
- // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
- paginationSize: 7, // the pagination bar size.
- prePageText: "<<",
- nextPageText: ">>",
- showTotal: true,
- Total: count,
- paginationTotalRenderer: customTotal,
- disablePageTitle: true,
- sizePerPage: 5,
- };
- }
-;
diff --git a/forms-flow-web/src/components/Toast/Toast.js b/forms-flow-web/src/components/Toast/Toast.js
new file mode 100644
index 0000000000..4a5ca664e7
--- /dev/null
+++ b/forms-flow-web/src/components/Toast/Toast.js
@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+// import { makeStyles } from '@material-ui/core/styles';
+
+
+function Alert(props) {
+ return
+
+ {this.props.message}
+
+
+
+ );
+ }
+};
+
+export default connect(null, null)(Toast);
diff --git a/forms-flow-web/src/containers/NavBar.jsx b/forms-flow-web/src/containers/NavBar.jsx
index d631eb2ccf..d1dbf5c3ff 100644
--- a/forms-flow-web/src/containers/NavBar.jsx
+++ b/forms-flow-web/src/containers/NavBar.jsx
@@ -1,28 +1,40 @@
import React from "react";
-import { Nav, Navbar, NavDropdown} from "react-bootstrap";
+import {Navbar, Dropdown, Container, Nav} from "react-bootstrap";
import {Link} from "react-router-dom";
-import {useSelector} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
import { selectRoot } from "react-formio";
import UserService from "../services/UserService";
import { getUserRoleName } from "../helper/user";
+import {toggleMenu} from "../actions/menuActions";
import "./styles.scss";
const NavBar = () => {
const isAuthenticated = useSelector((state) => state.user.isAuthenticated);
+ const dispatch = useDispatch();
const user = useSelector((state) => {
return selectRoot("user", state).userDetail;
});
- const userRoles = useSelector((state) => {
+ const userRoles = useSelector((state) => {
return selectRoot("user", state).roles;
- });
- const logout = () => {
+ });
+ const isMenuOpen = useSelector(state=>state.menu.isMenuOpen);
+
+ const logout = () => {
UserService.userLogout();
- }
+ }
+ const menuToggle = ()=>{
+ dispatch(toggleMenu(!isMenuOpen))
+ };
return (
-
-
+
+
+
![]()
{
alt="Logo"
/>
+ formsflow.ai
-
- formsflow.ai
-
-
![]()
{
alt="profile"
/>
-
-
-
+
+
+
+ 
+
+
+ {user.name || user.preferred_username || ""}
+
+
+
+ {user.name || user.preferred_username}
+
+ {getUserRoleName(userRoles)}
+ Logout
+
+ ):
+ null}
+
);
diff --git a/forms-flow-web/src/containers/SideBar.jsx b/forms-flow-web/src/containers/SideBar.jsx
index 1f82cfedf4..0a905c51ba 100644
--- a/forms-flow-web/src/containers/SideBar.jsx
+++ b/forms-flow-web/src/containers/SideBar.jsx
@@ -1,7 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
import { selectRoot } from "react-formio";
import { useLocation } from "react-router-dom";
@@ -9,33 +9,42 @@ import {CLIENT, STAFF_REVIEWER } from "../constants/constants";
import { getUserRolePermission } from "../helper/user";
import "./styles.scss";
+import {toggleMenu} from "../actions/menuActions";
const SideBar = () => {
const location = useLocation();
const { pathname } = location;
+ const dispatch = useDispatch();
const userRoles = useSelector((state) => {
return selectRoot("user", state).roles;
});
+ const isMenuOpen = useSelector((state) => state.menu.isMenuOpen);
+
+ const menuToggle = ()=>{
+ dispatch(toggleMenu(false))
+ };
return (
-
-
({tasks.length})
-
-
-
-
- Tasks /{" "}
+{/*
+
+
+
+ */}
+
+ Tasks /{" "}
{`${taskDetail.name}`}
formsflow.ai
formsflow.ai
-
+
+
+ {user.name || user.preferred_username || ""}
+
+ + + {getUserRoleName(userRoles)}