diff --git a/src/constant/Endpoints.js b/src/constant/Endpoints.js index f83c239..e74f761 100644 --- a/src/constant/Endpoints.js +++ b/src/constant/Endpoints.js @@ -4,5 +4,6 @@ export default { CREATE_WAREHOUSE: '/warehouse/', GET_USERS_DATA: '/user/all?page=0&perPage=10', ADD_PRODUCT: '/item/', + ADD_INVENTORY: '/inventory', GET_ROLES_DATA: '/user-role/all?page=0&perPage=10' }; diff --git a/src/pages/inventory/index.js b/src/pages/inventory/index.js index c03c971..d8fb38b 100644 --- a/src/pages/inventory/index.js +++ b/src/pages/inventory/index.js @@ -1,17 +1,28 @@ import DashboardNavbar from 'components/DashboardNavbar'; import DashboardLayout from 'layouts/DashboardLayout'; -import { Grid, InputLabel, TableBody, TableCell, TableRow } from '@mui/material'; +import { Box, Grid, MenuItem, Select, TableBody, TableCell, TableRow } from '@mui/material'; import MDInput from 'components/MDInput'; import ImageUpload from 'components/ImageUpload'; import Switch from 'components/Switch'; import MDTypography from 'components/MDTypography'; -import { makeStyles } from '@mui/styles'; import MDBox from 'components/MDBox'; import Dropdown from 'components/Dropdown'; import MDButton from 'components/Button'; import BasicTable from 'components/BasicTable'; +import { useFormik } from 'formik'; +import schema from 'services/ValidationServices'; +import { API } from 'constant'; +import { useDispatch } from 'react-redux'; +import InventoryActions from 'redux/InventoryRedux'; +import LOGGER from 'services/Logger'; -const useStyles = makeStyles({ +const customStyles = { + labelSize: { + fontSize: '16px', + letterSpacing: '0.01em', + color: '#000', + marginBottom: '4px' + }, textWrap: { whiteSpace: 'nowrap', fontSize: '16px', @@ -35,7 +46,7 @@ const useStyles = makeStyles({ marginTop: { marginTop: '54px' } -}); +}; const stockBox = [ { @@ -95,12 +106,8 @@ const dropdownData = [ } ]; -const dataInventory = [ - { - placeholder: 'Lorem Ipsum', - label: 'Inventory Type' - } -]; +const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet']; + const dataLevel = [ { placeholder: 'Lorem Ipsum', @@ -113,141 +120,223 @@ const dataLevel = [ ]; function InventoryScreen() { - const previewImg = [1, 2, 3]; - const classes = useStyles(); + const dispatch = useDispatch(); + + const formik = useFormik({ + initialValues: { + inventoryname: '', + inventorytype: '', + widgetname: '', + policies: false, + images: [] + }, + validationSchema: schema.addInventory, + onSubmit: (values, onSubmitProps) => { + LOGGER.log('values', values); + dispatch( + InventoryActions.addInventoryAction({ + loader: 'loading-request', + slug: API.ADD_INVENTORY, + method: 'post', + data: { + name: values.inventoryname, + type: values.inventorytype, + policies: { + alerting: { + lowestStockLevel: true, + highestStockLevel: true, + alertStockLevel: true, + reOrderLevel: true + } + } + } + }) + ); + onSubmitProps.resetForm(); + } + }); return ( - - - - - - +
+ + + + + Inventory Name - - - - {dataInventory && - dataInventory.map((item, index) => ( - - - - ))} + + + + + + Inventory Type + + + + - + Widget Name - - + + - - - Policies - - Egestas pulvinar ornare vulputate porttitor consectetur condimentum at tellus - quis. Leo pellentesque ipsum, a purus dignissim aliquam, orci. Elementum - ullamcorper a sit eleifend ante ullamcorper ornare mi pharetra. - - - -
- {stockBox.map((item) => ( - <> -
- {item.text} - -
- - ))} -
- - - - - - - - {dataLevel && - dataLevel.map((item, index) => ( - - - - ))} - - - {'add hierarchy level'} - - - - - - - + Policies + + Egestas pulvinar ornare vulputate porttitor consectetur condimentum at tellus + quis. Leo pellentesque ipsum, a purus dignissim aliquam, orci. Elementum + ullamcorper a sit eleifend ante ullamcorper ornare mi pharetra. + + + +
+ {stockBox.map((item) => ( + <> +
+ {item.text} + +
+ + ))} +
+ + + + { + formik.setFieldValue('images', images); + }} + /> + + + + {dataLevel && + dataLevel.map((item, index) => ( + + + + ))} + + + {'add hierarchy level'} + + + + + + - Widget hierarchy - - - - {records && - records.map((item) => ( - - {item.level1} - {item.level2} - - ))} - - + + Widget hierarchy + + + + {records && + records.map((item) => ( + + {item.level1} + {item.level2} + + ))} + + + + + + + {'CANCEL'} + + + {'SAVE'} + + + {'ADD ITEMS'} + - - - {'CANCEL'} - - - {'SAVE'} - - - {'ADD ITEMS'} - - - - + +
); diff --git a/src/pages/setupInventory/index.js b/src/pages/setupInventory/index.js index 8dfe076..b3d197c 100644 --- a/src/pages/setupInventory/index.js +++ b/src/pages/setupInventory/index.js @@ -7,8 +7,13 @@ import FleetIcon from 'assets/images/FleetIcon'; import RawMaterialIcon from 'assets/images/RawMaterialIcon'; import { Grid } from '@mui/material'; import Tile from 'components/TileComponent'; +import MDButton from 'components/Button'; +import { useNavigate } from 'react-router-dom'; + +function SetupInventory() +{ + const navigate = useNavigate(); -function SetupInventory() { const tiles = [ { name: 'Raw Material', @@ -38,7 +43,11 @@ function SetupInventory() { ]; return ( - + + navigate('/setup/inventory/inventory-new')}> + + Add new + + {tiles && diff --git a/src/pages/useraccess/index.js b/src/pages/useraccess/index.js index e6b8a20..0edc37f 100644 --- a/src/pages/useraccess/index.js +++ b/src/pages/useraccess/index.js @@ -158,7 +158,11 @@ function UserAccessScreen() { - navigate('/setup/users-access/create-role')}> + navigate('/setup/users-access/create-role')} + > {'+ CREATE USER'} diff --git a/src/redux/InventoryRedux.js b/src/redux/InventoryRedux.js new file mode 100644 index 0000000..1dc19c8 --- /dev/null +++ b/src/redux/InventoryRedux.js @@ -0,0 +1,54 @@ +import { createActions, createReducer } from 'reduxsauce'; +import Immutable from 'seamless-immutable'; +import _ from 'underscore'; +import { getFetchingValue, getErrorValue } from '../services/Utils'; + +/* ------------- Types and Action Creators ------------- */ +const { Types, Creators } = createActions({ + addInventoryAction: ['payload'], + addInventorySuccess: ['data'], + addInventoryFailure: ['error'] +}); + +export const InventoryTypes = Types; +const InventoryActions = Creators; +export default InventoryActions; + +/* ------------- Initial State ------------- */ +export const INITIAL_STATE = Immutable({ + addInventoryDetail: [], + addInventoryLoading: false, + addInventoryerror: {} +}); + +/* ------------- Selectors ------------- */ +export const InventorySelectors = { + addInventoryDetail: (state) => state.inventory.inventoryDetail +}; + +/* ------------- Reducers ------------- */ +export const onAddInventoryAction = (state, { payload }) => + state.merge({ + fetching: _.uniq([state.fetching, payload?.loader]), + error: getErrorValue(state?.error, payload?.loader) + }); + +export const onAddInventorySuccess = (state, { data }) => + state.merge({ + fetching: getFetchingValue(state.fetching, data?.loader), + error: getErrorValue(state?.error, data?.loader), + addInventoryDetail: data.addInventoryDetail + }); + +export const onAddInventoryFailure = (state, { error }) => + state.merge({ + fetching: _.without(state.fetching, error?.loader), + error: { ...state.error, [error?.loader]: error?.error } + }); + +/* ------------- Hookup Reducers To Types ------------- */ +export const inventoryReducer = createReducer(INITIAL_STATE, { + [Types.ADD_INVENTORY_ACTION]: onAddInventoryAction, + [Types.ADD_INVENTORY_SUCCESS]: onAddInventorySuccess, + [Types.ADD_INVENTORY_FAILURE]: onAddInventoryFailure +}); diff --git a/src/redux/index.js b/src/redux/index.js index cc75a86..ca8ecd3 100644 --- a/src/redux/index.js +++ b/src/redux/index.js @@ -3,6 +3,7 @@ import { authReducer } from './AuthRedux'; import { warehouseReducer } from './WarehouseRedux'; import { usersReducer } from './UsersRedux'; import { productReducer } from './ProductsRedux'; +import { inventoryReducer } from './InventoryRedux'; import { rolesReducer } from './RolesRedux'; // Combine all reducers. @@ -11,6 +12,7 @@ const appReducer = combineReducers({ warehouse: warehouseReducer, users: usersReducer, product: productReducer, + inventory: inventoryReducer, roles: rolesReducer }); diff --git a/src/sagas/Inventory.js b/src/sagas/Inventory.js new file mode 100644 index 0000000..fe1e20d --- /dev/null +++ b/src/sagas/Inventory.js @@ -0,0 +1,31 @@ +import { AuthorizedAPI } from 'config'; +import { takeLatest, call, put } from 'redux-saga/effects'; +import InventoryActions from 'redux/InventoryRedux'; +import { InventoryTypes } from 'redux/InventoryRedux'; +import ApiServices from 'services/API/ApiServices'; + +export function* onRequestAddInventoryData({ payload }) { + const response = yield call( + ApiServices[payload?.method], + AuthorizedAPI, + payload?.slug, + payload?.data + ); + if (response?.status === 200) { + yield put( + InventoryActions.addInventorySuccess({ + loader: payload?.loader, + addInventoryDetail: response?.data?.data + }) + ); + } else { + payload.onFailedAddInventoryData(response.data.error); + yield put( + InventoryActions.addInventoryFailure({ + loader: payload?.loader, + error: response?.data + }) + ); + } +} +export default [takeLatest(InventoryTypes.ADD_INVENTORY_ACTION, onRequestAddInventoryData)]; diff --git a/src/sagas/index.js b/src/sagas/index.js index ed1d037..c8b6adb 100644 --- a/src/sagas/index.js +++ b/src/sagas/index.js @@ -3,6 +3,7 @@ import AuthSaga from './Auth'; import WarehouseSaga from './Warehouse'; import UsersSaga from './Users'; import ProductSaga from './Product'; +import InventorySaga from './Inventory'; import RolesSaga from './Roles'; export default function* rootSaga() { @@ -10,5 +11,6 @@ export default function* rootSaga() { yield all([...WarehouseSaga]); yield all([...UsersSaga]); yield all([...ProductSaga]); + yield all([...InventorySaga]); yield all([...RolesSaga]); } diff --git a/src/services/ValidationServices.js b/src/services/ValidationServices.js index 29f08ec..2fad8c9 100644 --- a/src/services/ValidationServices.js +++ b/src/services/ValidationServices.js @@ -49,6 +49,12 @@ const schema = { under: Yup.number().required('required'), over: Yup.number().required('required'), alert: Yup.number().required('required') + }), + + addInventory: Yup.object({ + inventoryname: Yup.string('Enter Inventory name').required('Inventory name is required'), + inventorytype: Yup.string('Enter inventory Type').required('inventory Type is required'), + widgetname: Yup.string('Enter Widget Name').required('Widget Name is required') }) };