From d32a8892e37513e030c462afcb3374a0e8453c39 Mon Sep 17 00:00:00 2001 From: Dikshajain39511 <98263148+Dikshajain39511@users.noreply.github.com> Date: Mon, 7 Feb 2022 16:57:53 +0530 Subject: [PATCH] Feature/wms 48 (#46) * create warehouse * edit warehouse changes * Update: linted and formatted * add warehouse button * Update: linted Co-authored-by: [Diksha] <[diksha39511@gmail.com]> Co-authored-by: Llewellyn Dsouza --- src/components/Breadcrumbs/index.js | 21 +- src/components/DashboardNavbar/index.js | 35 ++-- src/components/SnackBar/index.js | 25 +++ src/components/TileBasic/index.js | 6 +- src/constant/Endpoints.js | 3 +- src/pages/authentication/index.js | 3 +- src/pages/editWarehouseDetails/index.js | 220 ++++++++++++++++++++ src/pages/newWarehouseDetails/index.js | 256 +++++++++++++++++------- src/pages/warehouse/index.js | 12 +- src/redux/WarehouseRedux.js | 71 ++++++- src/routes/index.js | 10 +- src/sagas/Warehouse.js | 56 +++++- src/services/ValidationServices.js | 7 + 13 files changed, 624 insertions(+), 101 deletions(-) create mode 100644 src/components/SnackBar/index.js create mode 100644 src/pages/editWarehouseDetails/index.js diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js index 427adb3..863e123 100644 --- a/src/components/Breadcrumbs/index.js +++ b/src/components/Breadcrumbs/index.js @@ -23,7 +23,7 @@ import ArrowRight from 'assets/images/CarretArrowRightIcon'; import MDBox from 'components/MDBox'; import MDTypography from 'components/MDTypography'; -function Breadcrumbs({ title, route, light }) { +function Breadcrumbs({ title, route, light, children }) { return ( {title.replace('-', ' ')} + + {children} + ); @@ -78,7 +94,8 @@ Breadcrumbs.defaultProps = { Breadcrumbs.propTypes = { title: PropTypes.string.isRequired, route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired, - light: PropTypes.bool + light: PropTypes.bool, + children: PropTypes.node }; export default Breadcrumbs; diff --git a/src/components/DashboardNavbar/index.js b/src/components/DashboardNavbar/index.js index 1b18adf..6f5d9cc 100644 --- a/src/components/DashboardNavbar/index.js +++ b/src/components/DashboardNavbar/index.js @@ -16,7 +16,6 @@ Coded by www.creative-tim.com import { useState, useEffect } from 'react'; // import Grid from '@mui/material/Grid'; - // react-router components import { useLocation } from 'react-router-dom'; @@ -41,7 +40,6 @@ import NotificationItem from 'components/NotificationItem'; // import InputAdornment from '@mui/material/InputAdornment'; - // Custom styles for DashboardNavbar import { // navbar, @@ -62,17 +60,12 @@ import { import SearchBar from 'components/SearchBar'; import { Box } from '@mui/material'; - - - -function DashboardNavbar({ absolute, light, isMini }) { +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 route = useLocation().pathname.split('/').slice(1); - - useEffect(() => { // Setting the navbar type if (fixedNavbar) { @@ -83,7 +76,7 @@ function DashboardNavbar({ absolute, light, isMini }) { // A function that sets the transparent state of the navbar. function handleTransparentNavbar() { - setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) && !fixedNavbar); + setTransparentNavbar(dispatch, fixedNavbar && window.scrollY === 0 && !fixedNavbar); } /** @@ -135,7 +128,7 @@ function DashboardNavbar({ absolute, light, isMini }) { return colorValue; } }); - + return ( navbar(theme, { transparentNavbar, absolute, light, darkMode })} > - - + }} + > + {isMini ? null : ( - - + @@ -199,10 +192,12 @@ function DashboardNavbar({ absolute, light, isMini }) { )} - - + + navbarRow(theme, { isMini })}> - + + {children} + @@ -220,8 +215,8 @@ DashboardNavbar.defaultProps = { DashboardNavbar.propTypes = { absolute: PropTypes.bool, light: PropTypes.bool, - isMini: PropTypes.bool - + isMini: PropTypes.bool, + children: PropTypes.node }; export default DashboardNavbar; diff --git a/src/components/SnackBar/index.js b/src/components/SnackBar/index.js new file mode 100644 index 0000000..55b57bb --- /dev/null +++ b/src/components/SnackBar/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Snackbar } from '@mui/material'; +import PropTypes from 'prop-types'; +import MuiAlert from '@mui/material/Alert'; + +export default function SnackBar({ message, open, handleClose }) { + const Alert = React.forwardRef(function Alert(props, ref) { + return ; + }); + + return ( + <> + + + {message} + + + + ); +} +SnackBar.propTypes = { + message: PropTypes.string, + open: PropTypes.bool, + handleClose: PropTypes.bool +}; diff --git a/src/components/TileBasic/index.js b/src/components/TileBasic/index.js index c411704..d73c4cb 100644 --- a/src/components/TileBasic/index.js +++ b/src/components/TileBasic/index.js @@ -44,6 +44,7 @@ const useStyles = makeStyles({ export default function TileBasic({ tiles }) { const classes = useStyles(); + return ( <> @@ -52,7 +53,10 @@ export default function TileBasic({ tiles }) { tiles.map((items) => ( <> 4 ? 4 : 6}> - + { + onSubmit: (values, { resetForm, setSubmitting }) => + { const onFailedLogin = (errorMessage) => { resetForm(); setSubmitting(false); diff --git a/src/pages/editWarehouseDetails/index.js b/src/pages/editWarehouseDetails/index.js new file mode 100644 index 0000000..c1dc0f0 --- /dev/null +++ b/src/pages/editWarehouseDetails/index.js @@ -0,0 +1,220 @@ +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { Box, Grid, MenuItem, OutlinedInput, Chip } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import DashboardNavbar from 'components/DashboardNavbar'; +import DashboardLayout from 'layouts/DashboardLayout'; +import ImageUpload from 'components/ImageUpload'; +import MDButton from 'components/Button'; +import { useFormik } from 'formik'; +import schema from 'services/ValidationServices'; +import MDInput from 'components/MDInput'; +import { useLocation } from 'react-router-dom'; +import WarehouseActions from 'redux/WarehouseRedux'; +import SnackBar from 'components/SnackBar'; + +const useStyles = makeStyles({ + labelSize: { + fontSize: '16px', + letterSpacing: '0.01em', + color: '#000', + marginBottom: '4px' + } +}); + +const previewImg = [1, 2, 3]; + +const names = [ + 'Oliver Hansen', + 'Van Henry', + 'April Tucker', + 'Ralph Hubbard', + 'Omar Alexander', + 'Carlos Abbott', + 'Miriam Wagner', + 'Bradley Wilkerson', + 'Virginia Andrews', + 'Kelly Snyder' +]; + +function EditWarehouseDetails() { + const classes = useStyles(); + const location = useLocation(); + const [open, setOpen] = useState(false); + const ITEM_HEIGHT = 48; + const ITEM_PADDING_TOP = 8; + const MenuProps = { + PaperProps: { + style: { + maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, + width: 250 + } + } + }; + const dispatch = useDispatch(); + const formik = useFormik({ + initialValues: { + warehousename: location.state.name, + address: location.state.address, + inventorytype: '', + attributes: '' + }, + validationSchema: schema.warehouseForm, + onSubmit: (values, onSubmitProps) => { + dispatch( + WarehouseActions.editWarehouseAction({ + loader: 'loading-request', + slug: `/warehouse/${location.state.id}`, + method: 'patch', + data: { + name: values.warehousename, + address: values.address, + specs: '', + company_id: '' + } + }) + ); + onSubmitProps.resetForm(); + setOpen(true); + } + }); + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + setOpen(false); + }; + + return ( + <> + + + +
+ + + Form to Input + + + + + + Warehouse name + + + + + + Address + + + + + + Types of inventories hosted + + } + value={formik.values.inventorytype} + error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)} + helperText={formik.touched.inventorytype && formik.errors.inventorytype} + renderValue={(selected) => ( + + {selected.map((value) => ( + + ))} + + )} + MenuProps={MenuProps} + onChange={formik.handleChange} + > + + No Selected // Or Empty + + {names.map((name) => ( + + {name} + + ))} + + + + + Other attributes + + + + + + + + + + + + {/* ---edit-- */} + + EDIT DETAILS + + + SHOW DETAILS + + + +
+ + + + + ); +} +export default EditWarehouseDetails; diff --git a/src/pages/newWarehouseDetails/index.js b/src/pages/newWarehouseDetails/index.js index 51b7255..602699e 100644 --- a/src/pages/newWarehouseDetails/index.js +++ b/src/pages/newWarehouseDetails/index.js @@ -1,9 +1,17 @@ -import { Box, Grid, TextField } from '@mui/material'; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { Box, Grid, MenuItem, OutlinedInput, Chip } from '@mui/material'; import { makeStyles } from '@mui/styles'; import DashboardNavbar from 'components/DashboardNavbar'; import DashboardLayout from 'layouts/DashboardLayout'; import ImageUpload from 'components/ImageUpload'; import MDButton from 'components/Button'; +import { useFormik } from 'formik'; +import schema from 'services/ValidationServices'; +import MDInput from 'components/MDInput'; +import WarehouseActions from 'redux/WarehouseRedux'; +import { API } from 'constant'; +import SnackBar from 'components/SnackBar'; const useStyles = makeStyles({ labelSize: { @@ -16,87 +24,201 @@ const useStyles = makeStyles({ const previewImg = [1, 2, 3]; +const names = [ + 'Oliver Hansen', + 'Van Henry', + 'April Tucker', + 'Ralph Hubbard', + 'Omar Alexander', + 'Carlos Abbott', + 'Miriam Wagner', + 'Bradley Wilkerson', + 'Virginia Andrews', + 'Kelly Snyder' +]; + function NewWarehouseDetails() { const classes = useStyles(); + const dispatch = useDispatch(); + const [open, setOpen] = useState(false); + + const ITEM_HEIGHT = 48; + const ITEM_PADDING_TOP = 8; + const MenuProps = { + PaperProps: { + style: { + maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, + width: 250 + } + } + }; + const formik = useFormik({ + initialValues: { + warehousename: '', + address: '', + inventorytype: '', + attributes: '' + }, + validationSchema: schema.warehouseForm, + onSubmit: (values, onSubmitProps) => { + dispatch( + WarehouseActions.createWarehouseAction({ + loader: 'loading-request', + slug: API.CREATE_WAREHOUSE, + method: 'post', + data: { + name: values.warehousename, + address: values.address, + specs: '', + company_id: '61cea5fd028432700a7f8601' + } + }) + ); + onSubmitProps.resetForm(); + setOpen(true); + } + }); + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + setOpen(false); + }; + return ( <> - - - Form to Input - - - - - - Warehouse name +
+ + + Form to Input + + + + + + Warehouse name + + - - - - - Address + + + Address + + - - - - - Types of inventories hosted + + + Types of inventories hosted + + } + value={formik.values.inventorytype} + error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)} + helperText={formik.touched.inventorytype && formik.errors.inventorytype} + renderValue={(selected) => ( + + {selected.map((value) => ( + + ))} + + )} + MenuProps={MenuProps} + onChange={formik.handleChange} + > + + No Selected // Or Empty + + {names.map((name) => ( + + {name} + + ))} + - - - - - Other attributes + + + Other attributes + + - - + + + + + + - - - - - - - - - CANCEL - - - SAVE - - - NEXT - - - {/* ---edit-- */} - - EDIT DETAILS - - - SHOW DETAILS - + + + CANCEL + + + SAVE + + + NEXT + + - +
+ ); } diff --git a/src/pages/warehouse/index.js b/src/pages/warehouse/index.js index 2280538..fb7d6ba 100644 --- a/src/pages/warehouse/index.js +++ b/src/pages/warehouse/index.js @@ -8,11 +8,13 @@ import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { WarehouseSelectors } from 'redux/WarehouseRedux'; import WarehouseIcon from 'assets/images/WarehouseIcon'; +import MDButton from 'components/Button'; +import { useNavigate } from 'react-router-dom'; function WarehouseScreen() { const dispatch = useDispatch(); + const navigate = useNavigate(); const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail); - useEffect(() => { dispatch( WarehouseActions.warehouseDataAction({ @@ -25,12 +27,16 @@ function WarehouseScreen() { return ( - + + navigate('/warehouse-form')}> + + Add new + + ({ ...warehouse, icon: , - path: '/' + path: '/edit-warehouse-design-form' }))} />