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 (
+ <>
+
+
+
+
+
+
+
+
+ );
+}
+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
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- 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'
}))}
/>
diff --git a/src/redux/WarehouseRedux.js b/src/redux/WarehouseRedux.js
index 350d08c..5995182 100644
--- a/src/redux/WarehouseRedux.js
+++ b/src/redux/WarehouseRedux.js
@@ -7,7 +7,15 @@ import { getFetchingValue, getErrorValue } from '../services/Utils';
const { Types, Creators } = createActions({
warehouseDataAction: ['payload'],
warehouseDataSuccess: ['data'],
- warehouseDataFailure: ['error']
+ warehouseDataFailure: ['error'],
+
+ createWarehouseAction: ['payload'],
+ createWarehouseSuccess: ['data'],
+ createWarehouseFailure: ['error'],
+
+ editWarehouseAction: ['payload'],
+ editWarehouseSuccess: ['data'],
+ editWarehouseFailure: ['error']
});
export const WarehouseTypes = Types;
@@ -17,12 +25,22 @@ export default WarehouseActions;
/* ------------- Initial State ------------- */
export const INITIAL_STATE = Immutable({
warehouseDetail: [],
- error: {}
+ error: {},
+
+ createWarehouse: [],
+ createWarehouseLoading: false,
+ createWarehouseError: {},
+
+ editWarehouse: [],
+ editWarehouseLoading: false,
+ editWarehouseError: {}
});
/* ------------- Selectors ------------- */
export const WarehouseSelectors = {
- getWarehouseDetail: (state) => state.warehouse.warehouseDetail
+ getWarehouseDetail: (state) => state.warehouse.warehouseDetail,
+ createWarehouseDetail: (state) => state.warehouse.createWarehouse,
+ editWarehouseDetail: (state) => state.warehouse.editWarehouse
};
/* ------------- Reducers ------------- */
@@ -45,9 +63,54 @@ export const onWarehouseDataFailure = (state, { error }) =>
error: { ...state.error, [error?.loader]: error?.error }
});
+export const onCreateWarehouseAction = (state, { payload }) =>
+ state.merge({
+ fetching: _.uniq([state.fetching, payload?.loader]),
+ error: getErrorValue(state?.error, payload?.loader)
+ });
+
+export const onCreateWarehouseSuccess = (state, { data }) =>
+ state.merge({
+ fetching: getFetchingValue(state.fetching, data?.loader),
+ error: getErrorValue(state?.error, data?.loader),
+ createWarehouse: data.createWarehouse
+ });
+
+export const onCreateWarehouseFailure = (state, { error }) =>
+ state.merge({
+ fetching: _.without(state.fetching, error?.loader),
+ error: { ...state.error, [error?.loader]: error?.error }
+ });
+
+export const onEditWarehouseAction = (state, { payload }) =>
+ state.merge({
+ fetching: _.uniq([state.fetching, payload?.loader]),
+ error: getErrorValue(state?.error, payload?.loader)
+ });
+
+export const onEditWarehouseSuccess = (state, { data }) =>
+ state.merge({
+ fetching: getFetchingValue(state.fetching, data?.loader),
+ error: getErrorValue(state?.error, data?.loader),
+ editWarehouse: data.editWarehouse
+ });
+
+export const onEditWarehouseFailure = (state, { error }) =>
+ state.merge({
+ fetching: _.without(state.fetching, error?.loader),
+ error: { ...state.error, [error?.loader]: error?.error }
+ });
/* ------------- Hookup Reducers To Types ------------- */
export const warehouseReducer = createReducer(INITIAL_STATE, {
[Types.WAREHOUSE_DATA_ACTION]: onWarehouseDataAction,
[Types.WAREHOUSE_DATA_SUCCESS]: onWarehouseDataSuccess,
- [Types.WAREHOUSE_DATA_FAILURE]: onWarehouseDataFailure
+ [Types.WAREHOUSE_DATA_FAILURE]: onWarehouseDataFailure,
+
+ [Types.CREATE_WAREHOUSE_ACTION]: onCreateWarehouseAction,
+ [Types.CREATE_WAREHOUSE_SUCCESS]: onCreateWarehouseSuccess,
+ [Types.CREATE_WAREHOUSE_FAILURE]: onCreateWarehouseFailure,
+
+ [Types.EDIT_WAREHOUSE_ACTION]: onEditWarehouseAction,
+ [Types.EDIT_WAREHOUSE_SUCCESS]: onEditWarehouseSuccess,
+ [Types.EDIT_WAREHOUSE_FAILURE]: onEditWarehouseFailure
});
diff --git a/src/routes/index.js b/src/routes/index.js
index 545b24e..ab061e6 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -52,6 +52,7 @@ import UserAccessScreen from 'pages/useraccess';
import NewWarehouseDetails from 'pages/newWarehouseDetails';
import SetupHome from 'pages/setup';
import WarehouseDetailsTables from 'pages/warehouseDetailsTables';
+import EditWarehouseDetails from 'pages/editWarehouseDetails';
import LabelingHome from 'pages/labellingHome';
import SetupInventory from 'pages/setupInventory';
@@ -170,10 +171,17 @@ const protectedRoutes = [
component:
},
{
- name: 'New/Edit Warehouse Details',
+ name: 'Add Warehouse Details',
key: 'warehouse-form',
route: '/warehouse-form',
component:
+ },
+ {
+ name: 'Edit Warehouse Details',
+ key: 'warehouse-form',
+ route: '/edit-warehouse-design-form',
+ hide: true,
+ component:
}
]
}
diff --git a/src/sagas/Warehouse.js b/src/sagas/Warehouse.js
index 40c7b3e..2d440e5 100644
--- a/src/sagas/Warehouse.js
+++ b/src/sagas/Warehouse.js
@@ -28,4 +28,58 @@ export function* onRequestWarehouseData({ payload }) {
}
}
-export default [takeLatest(WarehouseTypes.WAREHOUSE_DATA_ACTION, onRequestWarehouseData)];
+export function* onRequestCreateWarehouse({ payload }) {
+ const response = yield call(
+ ApiServices[payload?.method],
+ AuthorizedAPI,
+ payload?.slug,
+ payload?.data
+ );
+ if (response?.status === 200) {
+ yield put(
+ WarehouseActions.createWarehouseSuccess({
+ loader: payload?.loader,
+ createWarehouse: response?.data?.data
+ })
+ );
+ } else {
+ payload.onFailedCreateWarehouse(response.data.error);
+ yield put(
+ WarehouseActions.createWarehouseFailure({
+ loader: payload?.loader,
+ error: response?.data
+ })
+ );
+ }
+}
+
+export function* onRequestEditWarehouse({ payload }) {
+ const response = yield call(
+ ApiServices[payload?.method],
+ AuthorizedAPI,
+ payload?.slug,
+ payload?.data
+ );
+ if (response?.status === 200) {
+ yield put(
+ WarehouseActions.editWarehouseSuccess({
+ loader: payload?.loader,
+ createWarehouse: response?.data?.data
+ })
+ );
+ } else {
+ payload.onFailedEditWarehouse(response.data.error);
+ yield put(
+ WarehouseActions.editWarehouseFailure({
+ loader: payload?.loader,
+ error: response?.data
+ })
+ );
+ }
+}
+
+export default [
+ takeLatest(WarehouseTypes.WAREHOUSE_DATA_ACTION, onRequestWarehouseData),
+ takeLatest(WarehouseTypes.CREATE_WAREHOUSE_ACTION, onRequestCreateWarehouse),
+ takeLatest(WarehouseTypes.EDIT_WAREHOUSE_ACTION, onRequestEditWarehouse)
+];
diff --git a/src/services/ValidationServices.js b/src/services/ValidationServices.js
index b712e7e..cb6040c 100644
--- a/src/services/ValidationServices.js
+++ b/src/services/ValidationServices.js
@@ -17,6 +17,13 @@ const schema = {
password: Yup.string('Enter your password')
.min(8, 'Password should be of minimum 8 characters length')
.required('Password is required')
+ }),
+
+ warehouseForm: Yup.object({
+ warehousename: Yup.string('Enter warehouse name').required('warehouse name is required'),
+ address: Yup.string('Enter address').required('address is required'),
+ inventorytype: Yup.string('Enter inventory Type').required('inventory Type is required'),
+ attributes: Yup.string('Enter other attributes').required('attributes is required')
})
};