added customized menus in Web UI

Merge branch 'PR58' into develop
2021-08-02 16:36:34 +08:00 · 2021-08-02 16:36:34 +08:00 · 35181a0dca
parent b5e05ad629 3e813c666b
commit 35181a0dca
2 changed files with 193 additions and 102 deletions
--- a/web/src/components/navbar/NavbarTopDropDownMenus.js
+++ b/web/src/components/navbar/NavbarTopDropDownMenus.js
@ -1,42 +1,52 @@
-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,
+// } 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 +56,79 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
    isCombo && windowWidth < breakpoints[navbarBreakPoint] && setShowBurgerMenu(false);
  };
  const isLanding = getPageName('landing');
+  const [ showRoutes, setShowRoutes] = 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) {
+        let showRoutes = [routes[0]];
+        for (let i = 0; i < routes.length; i++) {
+          let route = routes[i];
+          if(route.to in json && 'children' in route) {
+            let showChildren = [];
+            for (let j = 0; j < route.children.length; j++) {
+              const child = route.children[j];
+              if(json[route.to].indexOf(child.to) !== -1) {
+                showChildren.push(child);
+              }
+            }
+            route.children = showChildren;
+
+            showRoutes.push(route)
+          }else if(route.to in json) {
+            showRoutes.push(route)
+          }
+        }
+        setShowRoutes(showRoutes);
+      } else {
+        toast.error(json.description);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  }, []);
+
  return (
    <>
+      {showRoutes.map(route =>
+        {
+          if ('children' in route) {
+            return(
+                <NavbarDropdownComponents
+                  key={route.name}
+                  title={t(route.name)}
+                  items={[route]}
+                  handleSetNavbarCollapsed={handleSetNavbarCollapsed}
+                />
+            )
+          } else {
+            return (
+              <NavItem onClick={handleSetNavbarCollapsed} key={route.name}>
+                <NavLink className="nav-link" to={route.to}>
+                  {t(route.name)}
+                </NavLink>
+              </NavItem>
+            )
+          }
+        }
+      )}
      {/*<NavbarDropdown
        title={homeRoutes.name}
        items={homeRoutes.children}
@ -70,75 +151,10 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
          Documentation
        </NavLink>
      </NavItem> */}
-      <NavItem onClick={handleSetNavbarCollapsed}>
-        <NavLink className="nav-link" to={dashboardRoutes.to}>
-          {t(dashboardRoutes.name)}
-        </NavLink>
-      </NavItem>
-      <NavbarDropdownComponents
-        title={t(spaceRoutes.name)}
-        items={[spaceRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(equipmentRoutes.name)}
-        items={[equipmentRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(meterRoutes.name)}
-        items={[meterRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(tenantRoutes.name)}
-        items={[tenantRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(storeRoutes.name)}
-        items={[storeRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(shopfloorRoutes.name)}
-        items={[shopfloorRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(combinedEquipmentRoutes.name)}
-        items={[combinedEquipmentRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(auxiliarySystemRoutes.name)}
-        items={[auxiliarySystemRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(fddRoutes.name)}
-        items={[fddRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(monitoringRoutes.name)}
-        items={[monitoringRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavItem onClick={handleSetNavbarCollapsed}>
-        <NavLink className="nav-link" to={advancedReportingRoutes.to}>
-          {t(advancedReportingRoutes.name)}
-        </NavLink>
-      </NavItem>
-      <NavItem onClick={handleSetNavbarCollapsed}>
-        <NavLink className="nav-link" to={knowledgeBaseRoutes.to}>
-          {t(knowledgeBaseRoutes.name)}
-        </NavLink>
-      </NavItem>
    </>
  );
 };

 NavbarTopDropDownMenus.propTypes = { setNavbarCollapsed: PropTypes.func.isRequired };

-export default withTranslation()(NavbarTopDropDownMenus);
+export default withTranslation()(withRedirect(NavbarTopDropDownMenus));
--- a/web/src/components/navbar/NavbarVertical.js
+++ b/web/src/components/navbar/NavbarVertical.js
@ -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 [ showRoutes, setShowRoutes] = useState([routes[0]]);
+
  useEffect(() => {
    if (is.windows()) {
      HTMLClassList.add('windows');
@ -56,6 +81,56 @@ 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) {
+        let showRoutes = [routes[0]];
+        for (let i = 0; i < routes.length; i++) {
+          let route = routes[i];
+          if(route.to in json && 'children' in route) {
+            let showChildren = [];
+            for (let j = 0; j < route.children.length; j++) {
+              const child = route.children[j];
+              if(json[route.to].indexOf(child.to) !== -1) {
+                showChildren.push(child);
+              }
+            }
+            route.children = showChildren;
+
+            showRoutes.push(route)
+
+          }else if(route.to in json) {
+            showRoutes.push(route)
+          }
+        }
+
+        setShowRoutes(showRoutes);
+      } else {
+        toast.error(json.description);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  }, [ ]);
+
  return (
    <Navbar
      expand={navbarBreakPoint}
@ -89,7 +164,7 @@ const NavbarVertical = ({ navbarStyle, t }) => {
        }
      >
        <Nav navbar vertical>
-          <NavbarVerticalMenu routes={routes} />
+          <NavbarVerticalMenu routes={showRoutes} />
        </Nav>
        <div className="settings px-3 px-xl-0">
          {isCombo && (
@ -130,4 +205,4 @@ NavbarVertical.defaultProps = {
  navbarStyle: 'transparent'
 };

-export default withTranslation()(NavbarVertical);
+export default withTranslation()(withRedirect(NavbarVertical));