Merge branch 'fixes/overall' into develop

src/App.js

@@ -23,14 +23,14 @@ import LoginScreen from 'pages/authentication';
 // @mui material components
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import Icon from '@mui/material/Icon';
+// import Icon from '@mui/material/Icon';
 
 // Material Dashboard 2 PRO React components
-import MDBox from 'components/MDBox';
+// import MDBox from 'components/MDBox';
 
 // Material Dashboard 2 PRO React example components
 import Sidenav from 'components/Sidenav';
-import Configurator from 'components/Configurator';
+// import Configurator from 'components/Configurator';
 
 // Material Dashboard 2 PRO React themes
 import theme from 'assets/theme';
@@ -39,7 +39,7 @@ import theme from 'assets/theme';
 import themeDark from 'assets/theme-dark';
 
 // Material Dashboard 2 PRO React contexts
-import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from 'context';
+import { useMaterialUIController, setMiniSidenav /*, setOpenConfigurator*/ } from 'context';
 
 // Images
 // import brandWhite from 'assets/images/logo-ct.png';
@@ -59,7 +59,7 @@ export default function App() {
     miniSidenav,
     direction,
     layout,
-    openConfigurator,
+    // openConfigurator,
     sidenavColor,
     // transparentSidenav,
     // whiteSidenav,
@@ -85,7 +85,7 @@ export default function App() {
   };
 
   // Change the openConfigurator state
-  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+  // const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
 
   // Setting the dir attribute for the body element
   useEffect(() => {
@@ -116,29 +116,29 @@ export default function App() {
       return null;
     });
 
-  const configsButton = (
-    <MDBox
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      width="3.25rem"
-      height="3.25rem"
-      bgColor="white"
-      shadow="sm"
-      borderRadius="50%"
-      position="fixed"
-      right="2rem"
-      bottom="2rem"
-      zIndex={99}
-      color="dark"
-      sx={{ cursor: 'pointer' }}
-      onClick={handleConfiguratorOpen}
-    >
-      <Icon fontSize="small" color="inherit">
-        settings
-      </Icon>
-    </MDBox>
-  );
+  // const configsButton = (
+  //   <MDBox
+  //     display="flex"
+  //     justifyContent="center"
+  //     alignItems="center"
+  //     width="3.25rem"
+  //     height="3.25rem"
+  //     bgColor="white"
+  //     shadow="sm"
+  //     borderRadius="50%"
+  //     position="fixed"
+  //     right="2rem"
+  //     bottom="2rem"
+  //     zIndex={99}
+  //     color="dark"
+  //     sx={{ cursor: 'pointer' }}
+  //     onClick={handleConfiguratorOpen}
+  //   >
+  //     <Icon fontSize="small" color="inherit">
+  //       settings
+  //     </Icon>
+  //   </MDBox>
+  // );
 
   return (
     <Provider store={reduxStore.store}>
@@ -155,11 +155,11 @@ export default function App() {
                 onMouseEnter={handleOnMouseEnter}
                 onMouseLeave={handleOnMouseLeave}
               />
-              <Configurator />
-              {configsButton}
+              {/* <Configurator /> */}
+              {/* {configsButton} */}
             </>
           )}
-          {layout === 'vr' && <Configurator />}
+          {/* {layout === 'vr' && <Configurator />} */}
           <Routes>
             <Route path="/" element={<PublicRoutes component={<LoginScreen />} />} />
             {getRoutes(routes)}

src/pages/editWarehouseDetails/index.js

@@ -1,7 +1,19 @@
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { Box, Grid, MenuItem, OutlinedInput, Chip, Select } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Box,
+  Grid,
+  MenuItem,
+  OutlinedInput,
+  Chip,
+  Select,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions
+} from '@mui/material';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
 import ImageUpload from 'components/ImageUpload';
@@ -13,21 +25,300 @@ 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';
+import LOGGER from 'services/Logger';
+import WarehouseLocationsActions from 'redux/WarehouseLocationsRedux';
+import { getAPIslugOfLocationType } from 'utils/nestedTableTools';
+import { toTitleCase } from 'utils/nestedTableTools';
+import { useParams } from 'react-router-dom';
+import { WarehouseLocationsSelectors } from 'redux/WarehouseLocationsRedux';
+import { API } from 'constant';
+import NestedDataTable from 'components/NestedTable';
 
-const useStyles = makeStyles({
-  labelSize: {
-    fontSize: '16px',
-    letterSpacing: '0.01em',
-    color: '#000',
-    marginBottom: '4px'
-  }
-});
+const bottomButtonStyling = {
+  width: '100%',
+  textTransform: 'uppercase',
+  borderRadius: '100px',
+  padding: '13px 30px'
+};
+
+const AddForm = ({ addFormOpen, setAddFormOpen, selected, warehouseId }) => {
+  const dispatch = useDispatch();
+  const data = addFormOpen !== 'zone' ? selected : { location: 'warehouse', id: warehouseId };
+
+  const childLocationType = getChildLocationType(data.location);
+  const fields = getPropertiesOfLocationType(childLocationType);
+
+  const formik = useFormik({
+    initialValues: getInitialvaluesFromParentData(data),
+    onSubmit: (values) => {
+      LOGGER.log('Form values and parent info', values, data);
+      const formData = { ...values };
+      formData[`${data.location}_id`] = data.id;
+      dispatch(
+        WarehouseLocationsActions.addLocationRequest({
+          loader: 'location-request',
+          slug: getAPIslugOfLocationType(childLocationType),
+          method: 'post',
+          data: formData,
+          parent: {
+            id: data.id,
+            type: data.location
+          }
+        })
+      );
+      setAddFormOpen(false);
+    }
+  });
+
+  return (
+    <Dialog
+      open={addFormOpen}
+      onClose={() => {
+        setAddFormOpen(false);
+      }}
+    >
+      <DialogTitle>Add new {childLocationType} details</DialogTitle>
+      <DialogContent>
+        {/* <DialogContentText>Some more text if needed</DialogContentText> */}
+        {fields &&
+          fields.map((fieldName) => (
+            <TextField
+              autoFocus
+              fullWidth
+              key={fieldName}
+              margin="dense"
+              label={toTitleCase(fieldName)}
+              type={fieldName === 'number' ? 'number' : 'text'}
+              name={fieldName}
+              variant="standard"
+              value={formik.values[fieldName]}
+              error={formik.touched[fieldName] && Boolean(formik.errors[fieldName])}
+              helperText={formik.touched[fieldName] && formik.errors[fieldName]}
+              onChange={formik.handleChange}
+            />
+          ))}
+        {childLocationType === 'sublevel' ? (
+          <>
+            Type:{' '}
+            <Select
+              label="Type"
+              name="type"
+              value={formik.values.type}
+              onChange={formik.handleChange}
+            >
+              <MenuItem value="POSITION">Position</MenuItem>
+              <MenuItem value="BIN">Bin</MenuItem>
+              <MenuItem value="PALLET">Pallet</MenuItem>
+            </Select>
+            Positions:{' '}
+            <Select
+              multiple
+              name="postitions"
+              value={formik.values.positions}
+              input={<OutlinedInput id="select-multiple-chip" label="Positions" />}
+              renderValue={(selected) => (
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                  {selected.map((value) => (
+                    <Chip key={value} label={value} />
+                  ))}
+                </Box>
+              )}
+              MenuProps={{
+                PaperProps: {
+                  style: {
+                    maxHeight: 48 * 4.5 + 8,
+                    width: 250
+                  }
+                }
+              }}
+              onChange={(event) => {
+                const {
+                  target: { value }
+                } = event;
+                formik.setFieldValue(
+                  'positions',
+                  // On autofill we get a stringified value.
+                  typeof value === 'string' ? value.split(',') : value
+                );
+              }}
+            >
+              {['LDB', 'LDF', 'LUB', 'LUF', 'RDB', 'RDF', 'RUB', 'RUF'].map((position) => (
+                <MenuItem
+                  key={position}
+                  value={position}
+                  // style={{
+                  //   fontWeight: theme.typography.fontWeightMedium
+                  // }}
+                >
+                  {position}
+                </MenuItem>
+              ))}
+            </Select>
+          </>
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        <MDButton
+          onClick={() => {
+            setAddFormOpen(false);
+          }}
+        >
+          Cancel
+        </MDButton>
+        <MDButton onClick={formik.handleSubmit}>Save</MDButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+AddForm.propTypes = {
+  addFormOpen: PropTypes.any,
+  setAddFormOpen: PropTypes.any,
+  selected: PropTypes.any,
+  warehouseId: PropTypes.any
+};
+
+const WarehouseNestedDetails = () => {
+  const [selected, setSelected] = React.useState(null);
+  const [addFormOpen, setAddFormOpen] = React.useState(false);
+  const dispatch = useDispatch();
+
+  const { warehouseId } = useParams();
+  LOGGER.log('warehouseID', warehouseId);
+  const data = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(warehouseId));
+
+  const populateChildren = (id, type) => {
+    LOGGER.log('populating:', id, type);
+    dispatch(
+      WarehouseLocationsActions.locationRequest({
+        loader: 'location-request',
+        slug: API.GET_CHILDREN_FROM_PARENT,
+        method: 'post',
+        data: { id, type }
+      })
+    );
+  };
+
+  React.useEffect(() => {
+    populateChildren(warehouseId, 'warehouse');
+  }, []);
+
+  return (
+    <>
+      <Box px={3} py={3}>
+        {data &&
+          data.map((data) => (
+            <NestedDataTable
+              key={data.id}
+              data={data}
+              selected={selected}
+              setSelected={setSelected}
+              populateChildren={populateChildren}
+            />
+          ))}
+        {/* Debugging */}
+        {/* <pre>{JSON.stringify(selected, null, 4)}</pre> */}
+        {/* Bottom buttons */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            columnGap: '20px',
+            margin: '20px'
+          }}
+        >
+          <MDButton
+            size="medium"
+            sx={bottomButtonStyling}
+            color="primary"
+            variant="contained"
+            onClick={() => {
+              setAddFormOpen('zone');
+            }}
+          >
+            Add zone
+          </MDButton>
+          <MDButton
+            size="medium"
+            sx={bottomButtonStyling}
+            disabled={selected?.location !== 'zone'}
+            color={selected?.location === 'zone' ? 'primary' : 'secondary'}
+            variant="contained"
+            onClick={() => {
+              setAddFormOpen(true);
+            }}
+          >
+            Add area
+          </MDButton>
+          <MDButton
+            size="medium"
+            sx={bottomButtonStyling}
+            disabled={selected?.location !== 'area'}
+            color={selected?.location === 'area' ? 'primary' : 'secondary'}
+            variant="contained"
+            onClick={() => {
+              setAddFormOpen(true);
+            }}
+          >
+            Add row
+          </MDButton>
+          <MDButton
+            size="medium"
+            sx={bottomButtonStyling}
+            disabled={selected?.location !== 'row'}
+            color={selected?.location === 'row' ? 'primary' : 'secondary'}
+            variant="contained"
+            onClick={() => {
+              setAddFormOpen(true);
+            }}
+          >
+            Add bay
+          </MDButton>
+          <MDButton
+            size="medium"
+            sx={bottomButtonStyling}
+            disabled={selected?.location !== 'bay'}
+            color={selected?.location === 'bay' ? 'primary' : 'secondary'}
+            variant="contained"
+            onClick={() => {
+              setAddFormOpen(true);
+            }}
+          >
+            Add Level
+          </MDButton>
+          <MDButton
+            size="medium"
+            sx={bottomButtonStyling}
+            disabled={!['level', 'sublevel'].includes(selected?.location)}
+            color={['level', 'sublevel'].includes(selected?.location) ? 'primary' : 'secondary'}
+            variant="contained"
+            onClick={() => {
+              setAddFormOpen(true);
+            }}
+          >
+            Add Sublevel
+          </MDButton>
+        </Box>
+      </Box>
+      {addFormOpen && (
+        <AddForm
+          addFormOpen={addFormOpen}
+          setAddFormOpen={setAddFormOpen}
+          selected={selected}
+          warehouseId={warehouseId}
+        />
+      )}
+    </>
+  );
+};
 
 const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];
 
 function EditWarehouseDetails() {
   const navigate = useNavigate();
-  const classes = useStyles();
   const location = useLocation();
   const [open, setOpen] = useState(false);
   const ITEM_HEIGHT = 48;
@@ -96,7 +387,15 @@ function EditWarehouseDetails() {
               <Grid container spacing={2}>
                 <Grid item xs={12} sm={6} md={6}>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
-                    <Box component="div" className={classes.labelSize}>
+                    <Box
+                      component="div"
+                      sx={{
+                        fontSize: '16px',
+                        letterSpacing: '0.01em',
+                        color: '#000',
+                        marginBottom: '4px'
+                      }}
+                    >
                       Warehouse name
                     </Box>
                     <MDInput
@@ -111,7 +410,15 @@ function EditWarehouseDetails() {
                     />
                   </Box>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
-                    <Box component="div" className={classes.labelSize}>
+                    <Box
+                      component="div"
+                      sx={{
+                        fontSize: '16px',
+                        letterSpacing: '0.01em',
+                        color: '#000',
+                        marginBottom: '4px'
+                      }}
+                    >
                       Address
                     </Box>
                     <MDInput
@@ -126,7 +433,15 @@ function EditWarehouseDetails() {
                     />
                   </Box>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
-                    <Box component="div" className={classes.labelSize}>
+                    <Box
+                      component="div"
+                      sx={{
+                        fontSize: '16px',
+                        letterSpacing: '0.01em',
+                        color: '#000',
+                        marginBottom: '4px'
+                      }}
+                    >
                       Types of inventories hosted
                     </Box>
                     <Select
@@ -169,7 +484,15 @@ function EditWarehouseDetails() {
                     </Select>
                   </Box>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
-                    <Box component="div" className={classes.labelSize}>
+                    <Box
+                      component="div"
+                      sx={{
+                        fontSize: '16px',
+                        letterSpacing: '0.01em',
+                        color: '#000',
+                        marginBottom: '4px'
+                      }}
+                    >
                       Other attributes
                     </Box>
                     <MDInput
@@ -208,7 +531,7 @@ function EditWarehouseDetails() {
               >
                 {/* ---edit-- */}
                 <MDButton size="large" color="primary" variant="outlined" type="submit">
-                  EDIT DETAILS
+                  SAVE
                 </MDButton>
                 <MDButton
                   size="large"
@@ -223,6 +546,7 @@ function EditWarehouseDetails() {
               </Box>
             </Box>
           </form>
+          <WarehouseNestedDetails />
         </Box>
       </DashboardLayout>
       <SnackBar open={open} message="warehouse edit successful" handleClose={handleClose} />

src/pages/warehouse/index.js

@@ -39,7 +39,7 @@ function WarehouseScreen() {
         tiles={warehouseData.map((warehouse) => ({
           ...warehouse,
           icon: <WarehouseIcon height={96} width={96} />,
-          path: '/setup/warehouse/edit-warehouse'
+          path: `/setup/warehouse/edit-warehouse/${warehouse._id}`
         }))}
       />
     </DashboardLayout>

src/routes/index.js

@@ -187,7 +187,7 @@ const protectedRoutes = [
       {
         name: 'Edit Warehouse',
         key: 'edit-warehouse',
-        route: '/setup/warehouse/edit-warehouse',
+        route: '/setup/warehouse/edit-warehouse/:warehouseId',
         hide: true,
         component: <EditWarehouseDetails />
       },