Merge Nested to Edit warehouse

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
@@ -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 />
       },