The function that the menu can be configured in the Web UI has been implemented
YangZhang-GitHub
parent
4e11c36877
commit
cfd8b68257
|
|
@ -1,42 +1,65 @@
|
|||
import React, { useContext } from 'react';
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import NavbarDropdown from './NavbarDropdown';
|
||||
import NavbarDropdownComponents from './NavbarDropdownComponents';
|
||||
import {
|
||||
// authenticationRoutes,
|
||||
// chatRoutes,
|
||||
// componentRoutes,
|
||||
// ECommerceRoutes,
|
||||
// emailRoutes,
|
||||
// homeRoutes,
|
||||
// pageRoutes,
|
||||
// pluginRoutes,
|
||||
// utilityRoutes,
|
||||
// widgetsRoutes,
|
||||
// kanbanRoutes,
|
||||
dashboardRoutes,
|
||||
spaceRoutes,
|
||||
equipmentRoutes,
|
||||
meterRoutes,
|
||||
tenantRoutes,
|
||||
storeRoutes,
|
||||
shopfloorRoutes,
|
||||
combinedEquipmentRoutes,
|
||||
auxiliarySystemRoutes,
|
||||
fddRoutes,
|
||||
monitoringRoutes,
|
||||
advancedReportingRoutes,
|
||||
knowledgeBaseRoutes
|
||||
} from '../../routes';
|
||||
// import {
|
||||
// // authenticationRoutes,
|
||||
// // chatRoutes,
|
||||
// // componentRoutes,
|
||||
// // ECommerceRoutes,
|
||||
// // emailRoutes,
|
||||
// // homeRoutes,
|
||||
// // pageRoutes,
|
||||
// // pluginRoutes,
|
||||
// // utilityRoutes,
|
||||
// // widgetsRoutes,
|
||||
// // kanbanRoutes,
|
||||
// dashboardRoutes,
|
||||
// spaceRoutes,
|
||||
// equipmentRoutes,
|
||||
// meterRoutes,
|
||||
// tenantRoutes,
|
||||
// storeRoutes,
|
||||
// shopfloorRoutes,
|
||||
// combinedEquipmentRoutes,
|
||||
// auxiliarySystemRoutes,
|
||||
// fddRoutes,
|
||||
// monitoringRoutes,
|
||||
// advancedReportingRoutes,
|
||||
// knowledgeBaseRoutes
|
||||
// } from '../../routes';
|
||||
import routes from '../../routes';
|
||||
import { NavItem } from 'reactstrap';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { breakpoints, getPageName } from '../../helpers/utils';
|
||||
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
||||
import {breakpoints, createCookie, getCookieValue, getPageName} from '../../helpers/utils';
|
||||
import {APIBaseURL, navbarBreakPoint, topNavbarBreakpoint} from '../../config';
|
||||
import AppContext from '../../context/Context';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import withRedirect from "../../hoc/withRedirect";
|
||||
import {toast} from "react-toastify";
|
||||
|
||||
|
||||
const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) => {
|
||||
const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapsed, setShowBurgerMenu, t }) => {
|
||||
|
||||
useEffect(() => {
|
||||
let is_logged_in = getCookieValue('is_logged_in');
|
||||
let user_name = getCookieValue('user_name');
|
||||
let user_display_name = getCookieValue('user_display_name');
|
||||
let user_uuid = getCookieValue('user_uuid');
|
||||
let token = getCookieValue('token');
|
||||
if (is_logged_in === null || !is_logged_in) {
|
||||
setRedirectUrl(`/authentication/basic/login`);
|
||||
setRedirect(true);
|
||||
} else {
|
||||
//update expires time of cookies
|
||||
createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
|
||||
createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
|
||||
createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
|
||||
createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
|
||||
createCookie('token', token, 1000 * 60 * 60 * 8);
|
||||
}
|
||||
});
|
||||
|
||||
const { isCombo, isTopNav } = useContext(AppContext);
|
||||
// const components = [componentRoutes, pluginRoutes, utilityRoutes];
|
||||
// const pages = [pageRoutes, kanbanRoutes, widgetsRoutes, chatRoutes, emailRoutes, ECommerceRoutes];
|
||||
|
|
@ -46,8 +69,80 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
|
|||
isCombo && windowWidth < breakpoints[navbarBreakPoint] && setShowBurgerMenu(false);
|
||||
};
|
||||
const isLanding = getPageName('landing');
|
||||
const [ viewComponentArr, setViewComponentArr] = useState([routes[0]]);
|
||||
|
||||
useEffect(() => {
|
||||
let isResponseOK = false;
|
||||
fetch(APIBaseURL + '/menus/web', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
"User-UUID": getCookieValue('user_uuid'),
|
||||
"Token": getCookieValue('token')
|
||||
},
|
||||
body: null,
|
||||
|
||||
}).then(response => {
|
||||
//console.log(response);
|
||||
if (response.ok) {
|
||||
isResponseOK = true;
|
||||
}
|
||||
return response.json();
|
||||
}).then(json => {
|
||||
//console.log(json);
|
||||
if (isResponseOK) {
|
||||
const selectJson = {...json}
|
||||
let newViewComponentArr = [routes[0]];
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
const route = routes[i];
|
||||
let tempComponent = {... route};
|
||||
if(route.to in selectJson && 'children' in route) {
|
||||
let tempChild = [];
|
||||
for (let j = 0; j < route.children.length; j++) {
|
||||
const child = route.children[j];
|
||||
if(selectJson[route.to].indexOf(child.to) !== -1) {
|
||||
tempChild.push(child);
|
||||
}
|
||||
}
|
||||
tempComponent.children = tempChild;
|
||||
|
||||
newViewComponentArr.push(tempComponent)
|
||||
}else if(route.to in selectJson) {
|
||||
newViewComponentArr.push(tempComponent)
|
||||
}
|
||||
}
|
||||
setViewComponentArr(newViewComponentArr);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{viewComponentArr.length !== 0 && viewComponentArr.map(arr =>
|
||||
{
|
||||
if ('children' in arr) {
|
||||
return(
|
||||
<NavbarDropdownComponents
|
||||
title={t(arr.name)}
|
||||
items={[arr]}
|
||||
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
|
||||
/>
|
||||
)
|
||||
}else {
|
||||
return (
|
||||
<NavItem onClick={handleSetNavbarCollapsed}>
|
||||
<NavLink className="nav-link" to={arr.to}>
|
||||
{t(arr.name)}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
)
|
||||
}
|
||||
}
|
||||
)}
|
||||
{/*<NavbarDropdown
|
||||
title={homeRoutes.name}
|
||||
items={homeRoutes.children}
|
||||
|
|
@ -70,7 +165,7 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
|
|||
Documentation
|
||||
</NavLink>
|
||||
</NavItem> */}
|
||||
<NavItem onClick={handleSetNavbarCollapsed}>
|
||||
{/*<NavItem onClick={handleSetNavbarCollapsed}>
|
||||
<NavLink className="nav-link" to={dashboardRoutes.to}>
|
||||
{t(dashboardRoutes.name)}
|
||||
</NavLink>
|
||||
|
|
@ -134,11 +229,11 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
|
|||
<NavLink className="nav-link" to={knowledgeBaseRoutes.to}>
|
||||
{t(knowledgeBaseRoutes.name)}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</NavItem>*/}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
NavbarTopDropDownMenus.propTypes = { setNavbarCollapsed: PropTypes.func.isRequired };
|
||||
|
||||
export default withTranslation()(NavbarTopDropDownMenus);
|
||||
export default withTranslation()(withRedirect(NavbarTopDropDownMenus));
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import classNames from 'classnames';
|
||||
import is from 'is_js';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { useContext, useEffect, useRef } from 'react';
|
||||
import { Button, Collapse, Nav, Navbar } from 'reactstrap';
|
||||
import React, {useContext, useEffect, useRef, useState} from 'react';
|
||||
import {Button, Collapse, Nav, Navbar, NavItem} from 'reactstrap';
|
||||
import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
|
||||
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
||||
import {APIBaseURL, navbarBreakPoint, topNavbarBreakpoint} from '../../config';
|
||||
import AppContext from '../../context/Context';
|
||||
import routes from '../../routes';
|
||||
import Flex from '../common/Flex';
|
||||
|
|
@ -13,8 +13,31 @@ import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
|
|||
import NavbarVerticalMenu from './NavbarVerticalMenu';
|
||||
import ToggleButton from './ToggleButton';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import {createCookie, getCookieValue} from "../../helpers/utils";
|
||||
import {toast} from "react-toastify";
|
||||
import withRedirect from "../../hoc/withRedirect";
|
||||
|
||||
const NavbarVertical = ({ setRedirectUrl, setRedirect, navbarStyle, t }) => {
|
||||
|
||||
useEffect(() => {
|
||||
let is_logged_in = getCookieValue('is_logged_in');
|
||||
let user_name = getCookieValue('user_name');
|
||||
let user_display_name = getCookieValue('user_display_name');
|
||||
let user_uuid = getCookieValue('user_uuid');
|
||||
let token = getCookieValue('token');
|
||||
if (is_logged_in === null || !is_logged_in) {
|
||||
setRedirectUrl(`/authentication/basic/login`);
|
||||
setRedirect(true);
|
||||
} else {
|
||||
//update expires time of cookies
|
||||
createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
|
||||
createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
|
||||
createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
|
||||
createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
|
||||
createCookie('token', token, 1000 * 60 * 60 * 8);
|
||||
}
|
||||
});
|
||||
|
||||
const NavbarVertical = ({ navbarStyle, t }) => {
|
||||
const navBarRef = useRef(null);
|
||||
|
||||
const {
|
||||
|
|
@ -32,6 +55,8 @@ const NavbarVertical = ({ navbarStyle, t }) => {
|
|||
HTMLClassList.add('navbar-vertical-collapsed');
|
||||
}
|
||||
|
||||
const [ viewComponentArr, setViewComponentArr] = useState([routes[0]]);
|
||||
|
||||
useEffect(() => {
|
||||
if (is.windows()) {
|
||||
HTMLClassList.add('windows');
|
||||
|
|
@ -56,6 +81,58 @@ const NavbarVertical = ({ navbarStyle, t }) => {
|
|||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let isResponseOK = false;
|
||||
fetch(APIBaseURL + '/menus/web', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
"User-UUID": getCookieValue('user_uuid'),
|
||||
"Token": getCookieValue('token')
|
||||
},
|
||||
body: null,
|
||||
|
||||
}).then(response => {
|
||||
//console.log(response);
|
||||
if (response.ok) {
|
||||
isResponseOK = true;
|
||||
}
|
||||
return response.json();
|
||||
}).then(json => {
|
||||
//console.log(json);
|
||||
if (isResponseOK) {
|
||||
const selectJson = {...json}
|
||||
let newViewComponentArr = [routes[0]];
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
const route = routes[i];
|
||||
let tempComponent = {... route};
|
||||
if(route.to in selectJson && 'children' in route) {
|
||||
let tempChild = [];
|
||||
for (let j = 0; j < route.children.length; j++) {
|
||||
const child = route.children[j];
|
||||
if(selectJson[route.to].indexOf(child.to) !== -1) {
|
||||
tempChild.push(child);
|
||||
}
|
||||
}
|
||||
tempComponent.children = tempChild;
|
||||
|
||||
newViewComponentArr.push(tempComponent)
|
||||
|
||||
}else if(route.to in selectJson) {
|
||||
newViewComponentArr.push(tempComponent)
|
||||
}
|
||||
}
|
||||
|
||||
setViewComponentArr(newViewComponentArr);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}, [ ]);
|
||||
|
||||
return (
|
||||
<Navbar
|
||||
expand={navbarBreakPoint}
|
||||
|
|
@ -89,7 +166,7 @@ const NavbarVertical = ({ navbarStyle, t }) => {
|
|||
}
|
||||
>
|
||||
<Nav navbar vertical>
|
||||
<NavbarVerticalMenu routes={routes} />
|
||||
<NavbarVerticalMenu routes={viewComponentArr} />
|
||||
</Nav>
|
||||
<div className="settings px-3 px-xl-0">
|
||||
{isCombo && (
|
||||
|
|
@ -130,4 +207,4 @@ NavbarVertical.defaultProps = {
|
|||
navbarStyle: 'transparent'
|
||||
};
|
||||
|
||||
export default withTranslation()(NavbarVertical);
|
||||
export default withTranslation()(withRedirect(NavbarVertical));
|
||||
|
|
|
|||
Loading…
Reference in New Issue