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

Merge pull request #86 from kfnawaz/fix/WMS-66

Browse Source 
Fix/wms 66 - labelling functionality
This commit is contained in:
bluestreamlds
2022-03-09 12:06:40 +05:30
committed by GitHub
parent e17f4fb0b6 787c91fe7a
commit cb71fe1a42
8 changed files with 144 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@@ -8,6 +8,10 @@ module.exports = {
extends: ['eslint:recommended', 'plugin:react/recommended'],
parser: '@babel/eslint-parser',
parserOptions: {
requireConfigFile: false,
babelOptions: {
presets: ['@babel/preset-react']
},
ecmaFeatures: {
jsx: true,
modules: true,
@@ -23,7 +27,7 @@ module.exports = {
'linebreak-style': ['error', 'unix'],
quotes: ['warn', 'single'],
semi: ['warn', 'always'],
'no-unused-vars' : 'warn',
'no-unused-vars': 'warn',
'comma-dangle': [
'warn',
{

2
package.json
View File

@@ -100,7 +100,9 @@
]
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/eslint-parser": "^7.17.0",
"@babel/preset-react": "^7.16.7",
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "8.3.0",

39
src/components/Dropdown/index.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import Box from '@mui/material/Box';
import PropTypes from 'prop-types';
import MenuItem from '@mui/material/MenuItem';
@@ -14,22 +14,8 @@ const useStyles = makeStyles({
}
});
export default function Dropdown({ dropdownData, label, dropdownChange = null }) {
export default function Dropdown({ dropdownData, label, onChange, value }) {
const classes = useStyles();
const [age, setAge] = useState('');
const handleChange = (event) => {
if (dropdownChange !== null) {
dropdownChange(event);
}
const {
target: { value }
} = event;
setAge(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value
);
};
return (
<>
@@ -40,22 +26,16 @@ export default function Dropdown({ dropdownData, label, dropdownChange = null })
<FormControl sx={{ width: '100%' }}>
<Select
displayEmpty
value={age}
renderValue={(selected) => {
if (selected.length === 0) {
return <span>{/* {dropDownValue?.placeholder} */}</span>;
}
return selected;
}}
value={value}
inputProps={{ 'aria-label': 'Without label' }}
onChange={handleChange}
onChange={onChange}
>
<MenuItem disabled value="">
{/* <span>{dropDownValue?.label}</span> */}
None selected
</MenuItem>
{dropdownData &&
dropdownData.map((data) => (
<MenuItem value={data.name} key={data._id}>
<MenuItem value={data._id} key={data._id}>
{data.name}
</MenuItem>
))}
@@ -66,7 +46,8 @@ export default function Dropdown({ dropdownData, label, dropdownChange = null })
);
}
Dropdown.propTypes = {
dropdownData: PropTypes.object.isRequired,
dropdownChange: PropTypes.object,
label: PropTypes.string
dropdownData: PropTypes.array,
onChange: PropTypes.any,
label: PropTypes.string,
value: PropTypes.any
};

2
src/components/NestedTable/index.js
View File

@@ -90,7 +90,7 @@ function NestedDataTable({ data, selected, setSelected, populateChildren }) {
selected?.id === data.id
? 'linear-gradient(135deg, ' +
getColorOfLocationType(data.location) +
' 0%, #f9f9f9 20%)'
' 0%, #f9f9f9 100%)'
: '#f9f9f9'
}}
>

5
src/components/SearchBar/index.js
View File

@@ -4,8 +4,7 @@ import { makeStyles } from '@mui/styles';
import Search from 'assets/images/SearchIcon';
function SearchBar(props) {
const {onChange} = props;
const { onChange } = props;
const useStyles = makeStyles(() => ({
textField: {
@@ -41,5 +40,5 @@ function SearchBar(props) {
SearchBar.propTypes = {
onChange: PropTypes.func
}
};
export default SearchBar;

170
src/pages/labeling/index.js
View File

@@ -42,51 +42,54 @@ const useStyles = makeStyles({
}
});
const headCells = [
{
id: 'warehouse',
label: 'Warehouse'
},
{
id: 'zone',
label: 'Zone'
},
{
id: 'area',
label: 'Area'
},
{
id: 'row',
label: 'Row'
},
{
id: 'bay',
label: 'Bay'
}
];
function LabelingScreen() {
const classes = useStyles();
const dispatch = useDispatch();
const [warehouseId, setWarehouseId] = useState('');
const [zoneId, setZoneId] = useState('');
const [areaId, setAreaId] = useState('');
const [rowId, setRowId] = useState('');
const [bayId, setBayId] = useState('');
const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
const zonedata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(warehouseId));
const areadata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(zoneId));
const rowdata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(areaId));
const [allLabelData, setAllLabelData] = useState([]);
const [totemLabelData, setTotemLabelData] = useState([]);
const [locationLabelData, setLocationLabelData] = useState([]);
const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
const zonedata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(zoneId));
const areadata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(areaId));
const rowdata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(rowId));
const labelData = useSelector(LabellingSelectors.getLabelDetail);
React.useEffect(() => {
if (labelData && zoneId && areaId && rowId && bayId) {
if (labelData && warehouseId && zoneId && areaId && rowId) {
setAllLabelData(labelData);
}
}, [labelData, zoneId, areaId, rowId]);
const headCells = [
{
id: 'warehouse',
label: 'Warehouse'
},
{
id: 'zone',
label: 'Zone'
},
{
id: 'area',
label: 'Area'
},
{
id: 'row',
label: 'Row'
},
{
id: 'bay',
label: 'Bay'
}
];
}, [labelData, warehouseId, zoneId, areaId]);
useEffect(() => {
dispatch(
@@ -99,10 +102,12 @@ function LabelingScreen() {
}, []);
const warehouseChange = (event) => {
const filterData = warehouseData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
const id = event.target.value;
const type = 'warehouse';
setZoneId(id);
setWarehouseId(id);
setZoneId('');
setAreaId('');
setRowId('');
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
@@ -114,10 +119,11 @@ function LabelingScreen() {
};
const zoneChange = (event) => {
const filterData = zonedata.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
const type = filterData[0].location;
setAreaId(id);
const id = event.target.value;
const type = 'zone';
setZoneId(id);
setAreaId('');
setRowId('');
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
@@ -129,10 +135,10 @@ function LabelingScreen() {
};
const areaChange = (event) => {
const filterData = areadata.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
const type = filterData[0].location;
setRowId(id);
const id = event.target.value;
const type = 'area';
setAreaId(id);
setRowId('');
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
@@ -144,31 +150,8 @@ function LabelingScreen() {
};
const rowChange = (event) => {
const filterData = rowdata.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
const type = filterData[0].location;
setBayId(id);
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
slug: API.GET_CHILDREN_FROM_PARENT,
method: 'post',
data: { id, type }
})
);
dispatch(
LabellingActions.getLabelAction({
loader: 'labelling-request',
slug: API.GET_LABEL,
method: 'post',
data: {
warehouse: zoneId,
zone: areaId,
area: rowId,
row: bayId
}
})
);
const id = event.target.value;
setRowId(id);
};
const getTableItem = (e, item) => {
@@ -195,22 +178,53 @@ function LabelingScreen() {
]}
/>
<MDBox px={5} py={5}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={3}>
<Grid container spacing={2} alignItems="end">
<Grid item xs={12} md={2.5}>
<Dropdown
dropdownData={warehouseData}
dropdownChange={warehouseChange}
value={warehouseId}
label="Select warehouse"
onChange={warehouseChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown dropdownData={zonedata} dropdownChange={zoneChange} label="Select Zone" />
<Grid item xs={12} md={2.5}>
<Dropdown dropdownData={zonedata} label="Select Zone" onChange={zoneChange} />
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown dropdownData={areadata} dropdownChange={areaChange} label="Select Area" />
<Grid item xs={12} md={2.5}>
<Dropdown dropdownData={areadata} label="Select Area" onChange={areaChange} />
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown dropdownData={rowdata} dropdownChange={rowChange} label="Select Row" />
<Grid item xs={12} md={2.5}>
<Dropdown dropdownData={rowdata} label="Select Row" onChange={rowChange} />
</Grid>
<Grid item xs={12} md={2}>
<MDButton
fullWidth
color="primary"
sx={{
height: '45px'
}}
onClick={() => {
warehouseId &&
zoneId &&
areaId &&
rowId &&
dispatch(
LabellingActions.getLabelAction({
loader: 'labelling-request',
slug: API.GET_LABEL,
method: 'post',
data: {
warehouse: warehouseId,
zone: zoneId,
area: areaId,
row: rowId
}
})
);
}}
>
Filter
</MDButton>
</Grid>
</Grid>
<br />
@@ -221,7 +235,7 @@ function LabelingScreen() {
color="#8D8D8D"
>
<TableBody>
{bayId ? (
{rowId ? (
allLabelData &&
allLabelData.map((item) => (
<TableRow key={item._id}>
@@ -245,13 +259,13 @@ function LabelingScreen() {
</TableBody>
</BasicTable>
<Grid container spacing={2} py={5}>
<Grid item xs={12} sm={6} md={3}>
<Grid item xs={12} md={3}>
<Box sx={{ backgroundColor: '#FFBC26', padding: '3px 12px' }}>Bay Totem Labels</Box>
<Box sx={{ border: '1px solid black', padding: '3px 12px', height: '300px' }}>
{totemLabelData && totemLabelData.map((item, index) => <div key={index}>{item}</div>)}
</Box>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Grid item xs={12} md={3}>
<Box sx={{ backgroundColor: '#FFBC26', padding: '3px 12px' }}>Bin Location Labels</Box>
<Box sx={{ border: '1px solid black', padding: '3px 12px', height: '300px' }}>
{locationLabelData &&

46
src/pages/widgetLabel/index.js
View File

@@ -105,9 +105,11 @@ const headCellsNew = [
function WidgetLabel() {
const classes = useStyles();
const dispatch = useDispatch();
const [labelData, setLabelData] = useState([]);
const [inventoryId, setInventoryId] = useState('');
const [familyId, setFamilyId] = useState('');
const [subFamilyId, setSubFamilyId] = useState('');
const [allProductData, setAllProductData] = useState([]);
const [filterClick, setFilterClick] = useState(false);
@@ -133,9 +135,10 @@ function WidgetLabel() {
}, [productData, filterClick]);
const inventoryChange = (event) => {
const filterData = inventoryData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
setInventoryId(filterData[0]._id);
const id = event.target.value;
setInventoryId(id);
setFamilyId('');
setSubFamilyId('');
dispatch(
WidgetActions.widgetRequest({
loader: 'loading-request',
@@ -146,9 +149,9 @@ function WidgetLabel() {
};
const familyChange = (event) => {
const filterData = familyData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
setFamilyId(filterData[0]._id);
const id = event.target.value;
setFamilyId(id);
setSubFamilyId('');
dispatch(
WidgetActions.widgetRequest({
loader: 'loading-request',
@@ -159,8 +162,8 @@ function WidgetLabel() {
};
const subFamilyChange = (event) => {
const filterData = subFamilyData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
const id = event.target.value;
setSubFamilyId(id);
dispatch(
WidgetActions.widgetRequest({
loader: 'loading-request',
@@ -169,8 +172,8 @@ function WidgetLabel() {
})
);
};
const filterHandler = () => {
setInventoryId('');
setFilterClick(true);
dispatch(
ProductActions.getProductByIdAction({
@@ -206,23 +209,26 @@ function WidgetLabel() {
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={inventoryData}
dropdownChange={inventoryChange}
label="Select Inventory"
dropdownData={inventoryData}
value={inventoryId}
onChange={inventoryChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={familyData}
dropdownChange={familyChange}
label="Select Family"
dropdownData={familyData}
value={familyId}
onChange={familyChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={subFamilyData}
label="Select Sub Family"
dropdownChange={subFamilyChange}
value={subFamilyId}
dropdownData={subFamilyData}
onChange={subFamilyChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
@@ -235,7 +241,15 @@ function WidgetLabel() {
</MDButton>
</Grid>
</Grid>
<Box sx={{ marginTop: '24px', backgroundColor: '#FFFFFF' }}>
<Box
sx={{
marginTop: '24px',
backgroundColor: '#FFFFFF',
overflowX: 'auto',
overflowY: 'auto',
height: '60vh'
}}
>
<BasicTable
headCells={headCells}
records={allProductData}

4
src/sagas/Labelling.js
View File

@@ -1,5 +1,5 @@
import { AuthorizedAPI } from 'config';
import { takeLatest, call, put } from 'redux-saga/effects';
import { call, put, takeEvery } from 'redux-saga/effects';
import LabellingActions from 'redux/LabellingRedux';
import { LabellingTypes } from 'redux/LabellingRedux';
import ApiServices from 'services/API/ApiServices';
@@ -28,4 +28,4 @@ export function* onRequestGetLabelData({ payload }) {
);
}
}
export default [takeLatest(LabellingTypes.GET_LABEL_ACTION, onRequestGetLabelData)];
export default [takeEvery(LabellingTypes.GET_LABEL_ACTION, onRequestGetLabelData)];