Fixes/overall (#64)

* Update: remove autofocus * Update: Breadcrumbs functionality * Update: removed validation for attributes * Update: Field name * Update: warehouse setup breadcrumbs * Update: Inventory setup breadcrumbs Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>
2022-02-27 13:29:38 +05:30
parent 1fae3b7989
commit d9053688bf
11 changed files with 128 additions and 73 deletions
--- a/src/components/Breadcrumbs/index.js
+++ b/src/components/Breadcrumbs/index.js
@@ -16,7 +16,7 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';

 // @mui material components
-import { Breadcrumbs as MuiBreadcrumbs, Grid } from '@mui/material';
+import { Breadcrumbs as MuiBreadcrumbs, Grid, Toolbar } from '@mui/material';
 import ArrowRight from 'assets/images/CarretArrowRightIcon';

 // Material Dashboard 2 PRO React components
@@ -24,14 +24,9 @@ import MDBox from 'components/MDBox';
 import MDTypography from 'components/MDTypography';

 const buildBreadcrumbs = (route, light) => {
-  if (route[0] === 'home') route = [];
-  else if (route.length === 1) route = ['home'];
-  else {
-    route = ['home', ...route];
-    route.pop();
-  }
-  return route.map((el) => (
-    <Link to={`/${el}`} key={el}>
+  return route.map((el) => {
+    return el.path ? (
+      <Link to={el.path} key={el}>
        <MDTypography
          component="span"
          variant="button"
@@ -40,19 +35,31 @@ const buildBreadcrumbs = (route, light) => {
          color={light ? 'white' : 'dark'}
          sx={{ lineHeight: 0 }}
        >
-        {el}
+          {el.name}
        </MDTypography>
      </Link>
-  ));
+    ) : (
+      <MDTypography
+        variant="button"
+        fontWeight="regular"
+        textTransform="capitalize"
+        color={light ? 'white' : 'dark'}
+        sx={{ lineHeight: 0 }}
+      >
+        {el.name}
+      </MDTypography>
+    );
+  });
 };

-function Breadcrumbs({ title, route, light, children }) {
+function Breadcrumbs({ route, light, children }) {
  return (
+    <Toolbar variant="dense">
      <MDBox
        mr={{ xs: 0, xl: 8 }}
        sx={{
-        padding: '12.5px 24px',
-        backgroundColor: '#fff'
+          padding: '12.5px 24px'
+          // backgroundColor: '#fff'
        }}
      >
        <Grid container spacing={2} alignItems="center">
@@ -67,15 +74,6 @@ function Breadcrumbs({ title, route, light, children }) {
              separator={<ArrowRight height={15} width={15} />}
            >
              {buildBreadcrumbs(route, light)}
-            <MDTypography
-              variant="button"
-              fontWeight="regular"
-              textTransform="capitalize"
-              color={light ? 'white' : 'dark'}
-              sx={{ lineHeight: 0 }}
-            >
-              {title.replace('-', ' ')}
-            </MDTypography>
            </MuiBreadcrumbs>
          </Grid>
          <Grid item md={4} whiteSpace="nowrap" position="absolute" right="16px">
@@ -83,6 +81,7 @@ function Breadcrumbs({ title, route, light, children }) {
          </Grid>
        </Grid>
      </MDBox>
+    </Toolbar>
  );
 }

@@ -93,7 +92,6 @@ Breadcrumbs.defaultProps = {

 // Typechecking props for the Breadcrumbs
 Breadcrumbs.propTypes = {
-  title: PropTypes.string.isRequired,
  route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
  light: PropTypes.bool,
  children: PropTypes.node
--- a/src/components/DashboardNavbar/index.js
+++ b/src/components/DashboardNavbar/index.js
@@ -17,7 +17,7 @@ import { useState, useEffect } from 'react';
 // import Grid from '@mui/material/Grid';

 // react-router components
-import { useLocation } from 'react-router-dom';
+// import { useLocation } from 'react-router-dom';

 import { useDispatch } from 'react-redux';
 import AuthActions from 'redux/AuthRedux';
@@ -40,7 +40,7 @@ import MDBox from 'components/MDBox';
 // import MDBadge from 'components/MDBadge';

 // Material Dashboard 2 PRO React example components
-import Breadcrumbs from 'components/Breadcrumbs';
+// import Breadcrumbs from 'components/Breadcrumbs';
 import NotificationItem from 'components/NotificationItem';

 // import InputAdornment from '@mui/material/InputAdornment';
@@ -49,7 +49,7 @@ import NotificationItem from 'components/NotificationItem';
 import {
  // navbar,
  // navbarContainer,
-  navbarRow,
+  // navbarRow,
  navbarIconButton,
  // navbarDesktopMenu,
  navbarMobileMenu
@@ -81,14 +81,14 @@ const useStyles = makeStyles(() => ({
  }
 }));

-function DashboardNavbar({ absolute, light, isMini, children }) {
+function DashboardNavbar({ absolute, light, isMini /*, children*/ }) {
  const [navbarType, setNavbarType] = useState();
  const [controller, dispatch] = useMaterialUIController();
  const { miniSidenav, transparentNavbar, fixedNavbar, /*openConfigurator,*/ darkMode } =
    controller;
  // const [openMenu, setOpenMenu] = useState(false);
  const [openProfileMenu, setOpenProfileMenu] = useState(false);
-  const route = useLocation().pathname.split('/').slice(1);
+  // const route = useLocation().pathname.split('/').slice(1);
  const dispatchLogout = useDispatch();
  const handleLogout = () => dispatchLogout(AuthActions.logout());
  const classes = useStyles();
@@ -270,13 +270,13 @@ function DashboardNavbar({ absolute, light, isMini, children }) {
          )}
        </Toolbar>
      </Box>
-      <Toolbar variant="dense">
+      {/* <Toolbar variant="dense">
        <MDBox color="inherit" mb={{ xs: 2, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light}>
            {children}
          </Breadcrumbs>
        </MDBox>
-      </Toolbar>
+      </Toolbar> */}
    </AppBar>
  );
 }
--- a/src/pages/addNewProduct/index.js
+++ b/src/pages/addNewProduct/index.js
@@ -19,6 +19,7 @@ import { useDispatch } from 'react-redux';
 import ProductActions from 'redux/ProductsRedux';
 import { API } from 'constant';
 import LOGGER from 'services/Logger';
+import Breadcrumbs from 'components/Breadcrumbs';

 const useStyles = makeStyles({
  labelSize: {
@@ -118,6 +119,15 @@ function AddNewProduct() {
    <>
      <DashboardLayout>
        <DashboardNavbar />
+        <Breadcrumbs
+          route={[
+            { name: 'Home', path: '/home' },
+            { name: 'Setup', path: '/setup' },
+            { name: 'Inventory', path: '/setup/inventory' },
+            { name: 'Products' },
+            { name: 'Add New Product' }
+          ]}
+        />
        <Box mx={3} my={3}>
          <form onSubmit={formik.handleSubmit}>
            <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
--- a/src/pages/editWarehouseDetails/index.js
+++ b/src/pages/editWarehouseDetails/index.js
@@ -24,7 +24,6 @@ import MDInput from 'components/MDInput';
 import { useLocation } from 'react-router-dom';
 import WarehouseActions from 'redux/WarehouseRedux';
 import SnackBar from 'components/SnackBar';
-import { useNavigate } from 'react-router-dom';
 import { getChildLocationType } from 'utils/nestedTableTools';
 import { getPropertiesOfLocationType } from 'utils/nestedTableTools';
 import { getInitialvaluesFromParentData } from 'utils/nestedTableTools';
@@ -36,6 +35,7 @@ import { useParams } from 'react-router-dom';
 import { WarehouseLocationsSelectors } from 'redux/WarehouseLocationsRedux';
 import { API } from 'constant';
 import NestedDataTable from 'components/NestedTable';
+import Breadcrumbs from 'components/Breadcrumbs';

 const bottomButtonStyling = {
  width: '100%',
@@ -86,7 +86,6 @@ const AddForm = ({ addFormOpen, setAddFormOpen, selected, warehouseId }) => {
        {fields &&
          fields.map((fieldName) => (
            <TextField
-              autoFocus
              fullWidth
              key={fieldName}
              margin="dense"
@@ -318,7 +317,6 @@ const WarehouseNestedDetails = () => {
 const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];

 function EditWarehouseDetails() {
-  const navigate = useNavigate();
  const location = useLocation();
  const [open, setOpen] = useState(false);
  const ITEM_HEIGHT = 48;
@@ -370,6 +368,14 @@ function EditWarehouseDetails() {
    <>
      <DashboardLayout>
        <DashboardNavbar />
+        <Breadcrumbs
+          route={[
+            { name: 'Home', path: '/home' },
+            { name: 'Setup', path: '/setup' },
+            { name: 'Warehouse', path: '/setup/warehouse' },
+            { name: location.state.name || '' }
+          ]}
+        />
        <Box mx={3} my={3}>
          <form onSubmit={formik.handleSubmit}>
            <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
@@ -442,7 +448,7 @@ function EditWarehouseDetails() {
                        marginBottom: '4px'
                      }}
                    >
-                      Types of inventories hosted
+                      Inventories hosted
                    </Box>
                    <Select
                      multiple
@@ -533,7 +539,7 @@ function EditWarehouseDetails() {
                <MDButton size="large" color="primary" variant="outlined" type="submit">
                  SAVE
                </MDButton>
-                <MDButton
+                {/* <MDButton
                  size="large"
                  color="primary"
                  variant="contained"
@@ -542,7 +548,7 @@ function EditWarehouseDetails() {
                  }}
                >
                  SHOW DETAILS
-                </MDButton>
+                </MDButton> */}
              </Box>
            </Box>
          </form>
--- a/src/pages/homepage/index.js
+++ b/src/pages/homepage/index.js
@@ -5,6 +5,7 @@ import SearchInventoryIcon from 'assets/images/SearchInventoryIcon';
 import ReportsIcon from 'assets/images/ReportsIcon';
 import ScanIcon from 'assets/images/ScanIcon';
 import TileBasic from 'components/TileBasic';
+import Breadcrumbs from 'components/Breadcrumbs';

 function HomepageScreen() {
  const data = [
@@ -36,6 +37,7 @@ function HomepageScreen() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
+      <Breadcrumbs route={[{ name: 'Home', path: '/home' }]} />
      <TileBasic tiles={data} />
    </DashboardLayout>
  );
--- a/src/pages/inventory/index.js
+++ b/src/pages/inventory/index.js
@@ -15,6 +15,7 @@ import { API } from 'constant';
 import { useDispatch } from 'react-redux';
 import InventoryActions from 'redux/InventoryRedux';
 import LOGGER from 'services/Logger';
+import Breadcrumbs from 'components/Breadcrumbs';

 const customStyles = {
  labelSize: {
@@ -158,6 +159,14 @@ function InventoryScreen() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
+      <Breadcrumbs
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Inventory Definition' },
+          { name: 'Add New/Update Inventory' }
+        ]}
+      />
      <MDBox px={5} py={5}>
        <form onSubmit={formik.handleSubmit}>
          <MDBox
--- a/src/pages/newWarehouseDetails/index.js
+++ b/src/pages/newWarehouseDetails/index.js
@@ -11,6 +11,7 @@ import MDInput from 'components/MDInput';
 import WarehouseActions from 'redux/WarehouseRedux';
 import { API } from 'constant';
 import SnackBar from 'components/SnackBar';
+import Breadcrumbs from 'components/Breadcrumbs';

 const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];

@@ -67,6 +68,14 @@ function NewWarehouseDetails() {
    <>
      <DashboardLayout>
        <DashboardNavbar />
+        <Breadcrumbs
+          route={[
+            { name: 'Home', path: '/home' },
+            { name: 'Setup', path: '/setup' },
+            { name: 'Warehouse', path: '/setup/warehouse' },
+            { name: 'Add new' }
+          ]}
+        />
        <Box mx={3} my={3}>
          <form onSubmit={formik.handleSubmit}>
            <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
@@ -139,7 +148,7 @@ function NewWarehouseDetails() {
                        marginBottom: '4px'
                      }}
                    >
-                      Types of inventories hosted
+                      Inventories hosted
                    </Box>
                    <Select
                      multiple
@@ -232,9 +241,9 @@ function NewWarehouseDetails() {
                <MDButton size="medium" color="primary" variant="outlined" type="submit">
                  SAVE
                </MDButton>
-                <MDButton size="medium" color="primary" variant="contained">
+                {/* <MDButton size="medium" color="primary" variant="contained">
                  NEXT
-                </MDButton>
+                </MDButton> */}
              </Box>
            </Box>
          </form>
--- a/src/pages/setup/index.js
+++ b/src/pages/setup/index.js
@@ -5,6 +5,7 @@ import InventoryIcon from 'assets/images/InventoryIcon';
 import ProfileCircleIcon from 'assets/images/ProfileCircleIcon';
 import LabelIcon from 'assets/images/LabelIcon';
 import TileBasic from 'components/TileBasic';
+import Breadcrumbs from 'components/Breadcrumbs';

 function SetupHome() {
  const data = [
@@ -32,6 +33,7 @@ function SetupHome() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
+      <Breadcrumbs route={[{ name: 'Home', path: '/home' }, { name: 'Setup' }]} />
      <TileBasic tiles={data} />
    </DashboardLayout>
  );
--- a/src/pages/setupInventory/index.js
+++ b/src/pages/setupInventory/index.js
@@ -9,9 +9,9 @@ import { Grid } from '@mui/material';
 import Tile from 'components/TileComponent';
 import MDButton from 'components/Button';
 import { useNavigate } from 'react-router-dom';
+import Breadcrumbs from 'components/Breadcrumbs';

-function SetupInventory()
-{
+function SetupInventory() {
  const navigate = useNavigate();

  const tiles = [
@@ -43,11 +43,22 @@ function SetupInventory()
  ];
  return (
    <DashboardLayout>
-      <DashboardNavbar>
-        <MDButton sx={{ ml: 3 }} color="primary" onClick={() => navigate('/setup/inventory/inventory-new')}>
+      <DashboardNavbar />
+      <Breadcrumbs
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Inventory' }
+        ]}
+      >
+        <MDButton
+          sx={{ ml: 3 }}
+          color="primary"
+          onClick={() => navigate('/setup/inventory/inventory-new')}
+        >
          Add new Inventory
        </MDButton>
-      </DashboardNavbar>
+      </Breadcrumbs>
      <MDBox px={2} py={3}>
        <Grid container spacing={2}>
          {tiles &&
--- a/src/pages/warehouse/index.js
+++ b/src/pages/warehouse/index.js
@@ -9,6 +9,7 @@ import { WarehouseSelectors } from 'redux/WarehouseRedux';
 import WarehouseIcon from 'assets/images/WarehouseIcon';
 import MDButton from 'components/Button';
 import { useNavigate } from 'react-router-dom';
+import Breadcrumbs from 'components/Breadcrumbs';

 function WarehouseScreen() {
  const dispatch = useDispatch();
@@ -26,7 +27,14 @@ function WarehouseScreen() {

  return (
    <DashboardLayout>
-      <DashboardNavbar>
+      <DashboardNavbar />
+      <Breadcrumbs
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Warehouse' }
+        ]}
+      >
        <MDButton
          sx={{ ml: 3 }}
          color="primary"
@@ -34,7 +42,7 @@ function WarehouseScreen() {
        >
          Add new Warehouse
        </MDButton>
-      </DashboardNavbar>
+      </Breadcrumbs>
      <TileBasic
        tiles={warehouseData.map((warehouse) => ({
          ...warehouse,
--- a/src/services/ValidationServices.js
+++ b/src/services/ValidationServices.js
@@ -25,7 +25,7 @@ const schema = {
    inventorytype: Yup.array('Enter inventory Type')
      .of(Yup.string())
      .required('inventory Type is required'),
-    attributes: Yup.string('Enter other attributes').required('attributes is required')
+    attributes: Yup.string('Enter other attributes')
  }),

  addNewProduct: Yup.object({