Merge pull request #104 from TransparentPath/feat#103/minor-ui-enhanc…

…ements minor ui enhancements
TransparentPath · Feb 24, 2021 · 5b601ab · 5b601ab
2 parents 676d1a5 + 4e377ba
commit 5b601ab
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 70 deletions.
diff --git a/src/App.js b/src/App.js
@@ -23,7 +23,7 @@ function App() {
         <ThemeProvider theme={theme}>
           <div className="app">
             <CssBaseline />
-            <Route
+            {/* <Route
               exact
               path="/"
               render={() =>
@@ -33,6 +33,17 @@ function App() {
                   <Redirect to={routes.LOGIN} />
                 )
               }
+            /> */}
+            <Route
+              exact
+              path="/"
+              render={() =>
+                oauthService.hasValidAccessToken() ? (
+                  <Redirect to={routes.SHIPMENT} />
+                ) : (
+                  <Redirect to={routes.LOGIN} />
+                )
+              }
             />
             <Route path={routes.LOGIN} component={Login} />
             <Route path={routes.REGISTER} component={Register} />

diff --git a/src/midgard/layout/Container/Container.js b/src/midgard/layout/Container/Container.js
@@ -69,16 +69,20 @@ function ContainerDashboard({ location, history }) {
             setNavHidden={setNavHidden}
             location={location}
             history={history}
-            userData={userData}
           />
         )}
         <Container className={`${classes.content} ${!isMobile() && classes.contentMaxWidth}`}>
-          <Route
+          {/* <Route
             exact
             path={routes.APP}
             render={() => <Redirect to={routes.DASHBOARD} />}
+          /> */}
+          <Route
+            exact
+            path={routes.APP}
+            render={() => <Redirect to={routes.SHIPMENT} />}
           />
-          <Route path={routes.DASHBOARD} component={Dashboard} />
+          {/* <Route path={routes.DASHBOARD} component={Dashboard} /> */}
           {(checkForAdmin(userData) || checkForGlobalAdmin(userData)) && (
             <Route path={routes.USER_MANAGEMENT} component={UserManagement} />
           )}

diff --git a/src/midgard/layout/NavBar/NavBar.js b/src/midgard/layout/NavBar/NavBar.js
@@ -7,9 +7,8 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
-import { NAVIGATION_ITEMS, ADMIN_NAVIGATION_ITEMS } from "./NavBarConstants";
+import { NAVIGATION_ITEMS } from "./NavBarConstants";
 import { isMobile } from "midgard/utils/mediaQuery";
-import { checkForAdmin, checkForGlobalAdmin } from "midgard/utils/utilMethods";
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
@@ -58,26 +57,14 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const getFilteredNavItems = (userData) => {
-  let isAdmin = checkForAdmin(userData) || checkForGlobalAdmin(userData);
-
-  if (isAdmin) {
-    return [...NAVIGATION_ITEMS, ...ADMIN_NAVIGATION_ITEMS];
-  } else {
-    return NAVIGATION_ITEMS;
-  };
-};
-
 /**
  * Component for the side navigation.
  */
-function NavBar({ navHidden, setNavHidden, location, history, userData }) {
+function NavBar({ navHidden, setNavHidden, location, history }) {
   const classes = useStyles();
   const theme = useTheme();
   let isMobileDevice = isMobile();
 
-  let navItems = getFilteredNavItems(userData);
-
   const handleListItemClick = (event, index, item) => {
     if (isMobileDevice) setNavHidden(!navHidden);
   };
@@ -86,7 +73,7 @@ function NavBar({ navHidden, setNavHidden, location, history, userData }) {
     <div>
       <div className={classes.toolbar} />
       <List>
-        {navItems.map((item, index) => (
+        {NAVIGATION_ITEMS.map((item, index) => (
           <React.Fragment key={`navItem${index}${item.id}`}>
             <NavLink
               to={item.link}

diff --git a/src/midgard/layout/NavBar/NavBarConstants.js b/src/midgard/layout/NavBar/NavBarConstants.js
@@ -1,11 +1,11 @@
 import { routes } from "midgard/routes/routesConstants";
 
 export const NAVIGATION_ITEMS = [
-  {
-    id: "dashboard",
-    name: "Dashboard",
-    link: routes.DASHBOARD,
-  },
+  // {
+  //   id: "dashboard",
+  //   name: "Dashboard",
+  //   link: routes.DASHBOARD,
+  // },
   {
     id: "shipment",
     name: "Shipments",
@@ -26,17 +26,4 @@ export const NAVIGATION_ITEMS = [
     name: "Gateway & Sensors",
     link: routes.SENSORS_GATEWAY,
   },
-];
-
-export const ADMIN_NAVIGATION_ITEMS = [
-  {
-    id: "user_management",
-    name: "User Management",
-    link: routes.USER_MANAGEMENT,
-  },
-  {
-    id: "admin_panel",
-    name: "Admin Panel",
-    link: routes.ADMIN_PANEL,
-  },
-];
+];
diff --git a/src/midgard/layout/TopBar/AdminMenu.js b/src/midgard/layout/TopBar/AdminMenu.js
@@ -0,0 +1,69 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Divider from "@material-ui/core/Divider";
+
+const StyledMenu = withStyles({
+  paper: {
+    border: "1px solid #d3d4d5",
+  },
+})((props) => (
+  <Menu
+    elevation={0}
+    getContentAnchorEl={null}
+    anchorOrigin={{
+      vertical: "bottom",
+      horizontal: "right",
+    }}
+    transformOrigin={{
+      vertical: "top",
+      horizontal: "right",
+    }}
+    {...props}
+  />
+));
+
+const StyledMenuItem = withStyles((theme) => ({
+  root: {
+    "&:focus": {
+      "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
+        color: theme.palette.common.white,
+      },
+    },
+    padding: theme.spacing(2),
+    textAlign: "center",
+  },
+}))(MenuItem);
+
+export default function AdminMenu(props) {
+  const {
+    settingEl,
+    setSettingEl,
+    handleUserManagementClick,
+    handleAdminPanelClick,
+  } = props;
+
+  const handleClose = () => {
+    setSettingEl(null);
+  };
+
+  return (
+    <StyledMenu
+      id="customized-admin"
+      anchorEl={settingEl}
+      keepMounted
+      open={Boolean(settingEl)}
+      onClose={handleClose}
+    >
+      <StyledMenuItem onClick={handleAdminPanelClick}>
+        <ListItemText primary="Admin Panel" />
+      </StyledMenuItem>
+      <Divider />
+      <StyledMenuItem onClick={handleUserManagementClick}>
+        <ListItemText primary="User Management" />
+      </StyledMenuItem>
+    </StyledMenu>
+  );
+}
diff --git a/src/midgard/layout/TopBar/TopBar.js b/src/midgard/layout/TopBar/TopBar.js
@@ -8,6 +8,7 @@ import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 import AccountCircle from "@material-ui/icons/AccountCircle";
 import RefreshIcon from "@material-ui/icons/Refresh";
+import SettingsIcon from '@material-ui/icons/Settings';
 import Hidden from "@material-ui/core/Hidden";
 import logo from "assets/tp-logo.png";
 import {
@@ -19,8 +20,10 @@ import {
   GET_ORGANIZATION_OPTIONS_FAILURE,
 } from "../../redux/authuser/actions/authuser.actions";
 import AccountMenu from "./AccountMenu";
+import AdminMenu from "./AdminMenu";
 import { routes } from "../../routes/routesConstants";
 import { httpService } from "../../modules/http/http.service";
+import { checkForAdmin, checkForGlobalAdmin } from "midgard/utils/utilMethods";
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
@@ -59,11 +62,14 @@ function TopBar({
 }) {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
+  const [settingEl, setSettingEl] = React.useState(null);
 
   let user;
+  let isAdmin = false;
 
   if (data && data.data) {
     user = data.data;
+    isAdmin = checkForAdmin(user) || checkForGlobalAdmin(user);
   }
 
   useEffect(() => {
@@ -97,6 +103,10 @@ function TopBar({
     }
   }, []);
 
+  const settingMenu = (event) => {
+    setSettingEl(event.currentTarget);
+  };
+
   const handleMenu = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -115,6 +125,16 @@ function TopBar({
     setAnchorEl(null);
   };
 
+  const handleAdminPanelClick = () => {
+    history.push(routes.ADMIN_PANEL);
+    setSettingEl(null);
+  };
+
+  const handleUserManagementClick = () => {
+    history.push(routes.USER_MANAGEMENT);
+    setSettingEl(null);
+  };
+
   return (
     <AppBar position="fixed" className={classes.appBar}>
       <Toolbar>
@@ -132,7 +152,23 @@ function TopBar({
         <img src={logo} className={classes.logo} />
 
         <div className={classes.menuRight}>
-        <IconButton
+          {isAdmin && 
+          <IconButton
+            aria-label="admin section"
+            aria-controls="menu-appbar"
+            aria-haspopup="true"
+            onClick={settingMenu}
+            color="default"
+          >
+            <SettingsIcon fontSize="large" />
+          </IconButton>}
+          <AdminMenu
+            settingEl={settingEl}
+            setSettingEl={setSettingEl}
+            handleAdminPanelClick={handleAdminPanelClick}
+            handleUserManagementClick={handleUserManagementClick}
+          />
+          <IconButton
             aria-label="refresh-app"
             aria-controls="menu-appbar"
             aria-haspopup="false"

diff --git a/src/midgard/pages/MyAccount/MyAccount.js b/src/midgard/pages/MyAccount/MyAccount.js
@@ -184,14 +184,23 @@ function MyAccount({
           </Grid>
         )}
       </Grid>
-      <Button
+      {/* <Button
         type="button"
         variant="contained"
         color="primary"
         onClick={() => history.push(routes.DASHBOARD)}
         className={classes.backButton}
       >
         Back To Dashboard
+      </Button> */}
+      <Button
+        type="button"
+        variant="contained"
+        color="primary"
+        onClick={() => history.push(routes.SHIPMENT)}
+        className={classes.backButton}
+      >
+        Back To Shipment Page
       </Button>
       {openModal && (
         <Modal

diff --git a/src/midgard/pages/Shipment/Shipment.js b/src/midgard/pages/Shipment/Shipment.js
@@ -362,7 +362,6 @@ function Shipment(props) {
       </Grid>
       <ShipmentSensorTable
         sensorReport={selectedShipment?.sensor_report}
-        shipmentUuid={selectedShipment?.shipment_uuid}
         shipmentName={selectedShipment?.name}
       />
       <Route path={`${routes.SHIPMENT}/add`} component={AddShipment} />

diff --git a/src/midgard/pages/Shipment/ShipmentConstants.js b/src/midgard/pages/Shipment/ShipmentConstants.js
@@ -18,9 +18,9 @@ export const SHIPMENT_SENSOR_REPORT_TOOLTIP =
   "Shipment Sensor Report till current time";
 
 export const SHIPMENT_DATA_TABLE_COLUMNS = [
-  {
-    name: "shipment_uuid",
-    label: "Shipment ID",
+  { 
+    name: "name", 
+    label: "Shipment Name",
     options: {
       sort: true,
       sortThirdClickReset: true,
@@ -39,15 +39,6 @@ export const SHIPMENT_DATA_TABLE_COLUMNS = [
         : value
     },
   },
-  { 
-    name: "name", 
-    label: "Shipment Name",
-    options: {
-      sort: true,
-      sortThirdClickReset: true,
-      filter: true,
-    },
-  },
   { 
     name: "status", 
     label: "Shipment Status",
@@ -146,14 +137,6 @@ export const SHIPMENT_DATA_TABLE_COLUMNS = [
 ];
 
 export const SHIPMENT_SENSOR_COLUMNS = [
-  {
-    name: "shipment_id",
-    label: "Shipment ID",
-    options: {
-      sort: false,
-      filter: false,
-    },
-  },
   {
     name: "alert_status",
     label: "Alert Status",

diff --git a/src/midgard/pages/Shipment/components/ItemInfo.js b/src/midgard/pages/Shipment/components/ItemInfo.js
@@ -144,7 +144,7 @@ function ItemsInfo(props) {
                     (itemData && itemData.sort(compareSort("name"))) || []
                   }
                   getOptionLabel={(option) =>
-                    option && `${option.name}:${option.item_uuid}`
+                    option && option.name
                   }
                   filterSelectedOptions
                   onChange={(event, newValue) => {
@@ -159,7 +159,7 @@ function ItemsInfo(props) {
                         style={{ marginRight: 8 }}
                         checked={selected}
                       />
-                      {`${option.name}:${option.item_uuid}`}
+                      {option.name}
                     </React.Fragment>
                   )}
                   renderInput={(params) => (