mohiit1502/plaidware-wms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed: Multiple select form component

Browse Source
This commit is contained in:
Llewellyn D'souza
2022-02-08 18:10:03 +05:30
parent e2d720c044
commit c106412691
2 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/editWarehouseDetails/index.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { Box, Grid, MenuItem, OutlinedInput, Chip } from '@mui/material'; import { Box, Grid, MenuItem, OutlinedInput, Chip, Select } from '@mui/material';
import { makeStyles } from '@mui/styles'; import { makeStyles } from '@mui/styles';
import DashboardNavbar from 'components/DashboardNavbar'; import DashboardNavbar from 'components/DashboardNavbar';
import DashboardLayout from 'layouts/DashboardLayout'; import DashboardLayout from 'layouts/DashboardLayout';
@@ -24,18 +24,7 @@ const useStyles = makeStyles({
const previewImg = [1, 2, 3]; const previewImg = [1, 2, 3];
const names = [ const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];
'Oliver Hansen',
'Van Henry',
'April Tucker',
'Ralph Hubbard',
'Omar Alexander',
'Carlos Abbott',
'Miriam Wagner',
'Bradley Wilkerson',
'Virginia Andrews',
'Kelly Snyder'
];
function EditWarehouseDetails() { function EditWarehouseDetails() {
const classes = useStyles(); const classes = useStyles();
@@ -56,7 +45,7 @@ function EditWarehouseDetails() {
initialValues: { initialValues: {
warehousename: location.state.name, warehousename: location.state.name,
address: location.state.address, address: location.state.address,
inventorytype: '', inventorytype: [],
attributes: '' attributes: ''
}, },
validationSchema: schema.warehouseForm, validationSchema: schema.warehouseForm,
@@ -139,15 +128,13 @@ function EditWarehouseDetails() {
<Box component="div" className={classes.labelSize}> <Box component="div" className={classes.labelSize}>
Types of inventories hosted Types of inventories hosted
</Box> </Box>
<MDInput <Select
multiple multiple
select select
fullWidth fullWidth
variant="outlined" variant="outlined"
labelId="demo-multiple-chip-label"
id="demo-multiple-chip"
name="inventorytype" name="inventorytype"
input={<OutlinedInput id="select-multiple-chip" label="Chip" />} input={<OutlinedInput />}
value={formik.values.inventorytype} value={formik.values.inventorytype}
error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)} error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)}
helperText={formik.touched.inventorytype && formik.errors.inventorytype} helperText={formik.touched.inventorytype && formik.errors.inventorytype}
@@ -159,17 +146,26 @@ function EditWarehouseDetails() {
</Box> </Box>
)} )}
MenuProps={MenuProps} MenuProps={MenuProps}
onChange={formik.handleChange} onChange={(event) => {
const {
target: { value }
} = event;
formik.setFieldValue(
'inventorytype',
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value
);
}}
> >
<MenuItem key={''} value={''}> <MenuItem key={''} value={''}>
No Selected // Or Empty None Selected
</MenuItem> </MenuItem>
{names.map((name) => ( {inventoryTypes.map((name) => (
<MenuItem key={name} value={name}> <MenuItem key={name} value={name}>
{name} {name}
</MenuItem> </MenuItem>
))} ))}
</MDInput> </Select>
</Box> </Box>
<Box component="div" sx={{ marginBottom: '15px' }}> <Box component="div" sx={{ marginBottom: '15px' }}>
<Box component="div" className={classes.labelSize}> <Box component="div" className={classes.labelSize}>

38
src/pages/newWarehouseDetails/index.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { Box, Grid, MenuItem, OutlinedInput, Chip } from '@mui/material'; import { Box, Grid, MenuItem, OutlinedInput, Chip, Select } from '@mui/material';
import { makeStyles } from '@mui/styles'; import { makeStyles } from '@mui/styles';
import DashboardNavbar from 'components/DashboardNavbar'; import DashboardNavbar from 'components/DashboardNavbar';
import DashboardLayout from 'layouts/DashboardLayout'; import DashboardLayout from 'layouts/DashboardLayout';
@@ -24,18 +24,7 @@ const useStyles = makeStyles({
const previewImg = [1, 2, 3]; const previewImg = [1, 2, 3];
const names = [ const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];
'Oliver Hansen',
'Van Henry',
'April Tucker',
'Ralph Hubbard',
'Omar Alexander',
'Carlos Abbott',
'Miriam Wagner',
'Bradley Wilkerson',
'Virginia Andrews',
'Kelly Snyder'
];
function NewWarehouseDetails() { function NewWarehouseDetails() {
const classes = useStyles(); const classes = useStyles();
@@ -56,7 +45,7 @@ function NewWarehouseDetails() {
initialValues: { initialValues: {
warehousename: '', warehousename: '',
address: '', address: '',
inventorytype: '', inventorytype: [],
attributes: '' attributes: ''
}, },
validationSchema: schema.warehouseForm, validationSchema: schema.warehouseForm,
@@ -140,13 +129,13 @@ function NewWarehouseDetails() {
<Box component="div" className={classes.labelSize}> <Box component="div" className={classes.labelSize}>
Types of inventories hosted Types of inventories hosted
</Box> </Box>
<MDInput <Select
multiple multiple
select select
fullWidth fullWidth
variant="outlined" variant="outlined"
name="inventorytype" name="inventorytype"
input={<OutlinedInput id="select-multiple-chip" label="Chip" />} input={<OutlinedInput />}
value={formik.values.inventorytype} value={formik.values.inventorytype}
error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)} error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)}
helperText={formik.touched.inventorytype && formik.errors.inventorytype} helperText={formik.touched.inventorytype && formik.errors.inventorytype}
@@ -158,17 +147,26 @@ function NewWarehouseDetails() {
</Box> </Box>
)} )}
MenuProps={MenuProps} MenuProps={MenuProps}
onChange={formik.handleChange} onChange={(event) => {
const {
target: { value }
} = event;
formik.setFieldValue(
'inventorytype',
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value
);
}}
> >
<MenuItem key={''} value={''}> <MenuItem key={''} value={''}>
No Selected // Or Empty None Selected
</MenuItem> </MenuItem>
{names.map((name) => ( {inventoryTypes.map((name) => (
<MenuItem key={name} value={name}> <MenuItem key={name} value={name}>
{name} {name}
</MenuItem> </MenuItem>
))} ))}
</MDInput> </Select>
</Box> </Box>
<Box component="div" sx={{ marginBottom: '15px' }}> <Box component="div" sx={{ marginBottom: '15px' }}>
<Box component="div" className={classes.labelSize}> <Box component="div" className={classes.labelSize}>