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

Feature/wms 52 (#71)

Browse Source 
Labeling module

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>
Co-authored-by: evdigitech <evdigitech@gmail.com>
This commit is contained in:
Dikshajain39511
2022-03-03 22:29:08 +05:30
committed by GitHub
parent a883212126
commit fd8d0b1167
10 changed files with 546 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,6 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import Box from '@mui/material/Box';
// import InputLabel from '@mui/material/InputLabel'
import PropTypes from 'prop-types';
import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
@@ -15,17 +13,15 @@ const useStyles = makeStyles({
color: 'black'
}
});
export default function Dropdown({ items, dropdownData }) {
export default function Dropdown({ dropdownData, label, dropdownChange = null }) {
const classes = useStyles();
const [age, setAge] = useState('');
const [dropDownValue, setDropDownValue] = useState([]);
useEffect(() => {
setDropDownValue(items);
}, [items]);
const handleChange = (event) => {
if (dropdownChange !== null) {
dropdownChange(event);
}
const {
target: { value }
} = event;
@@ -39,16 +35,15 @@ export default function Dropdown({ items, dropdownData }) {
<>
<Box sx={{ width: '100%' }}>
<InputLabel className={classes.font} id="demo-simple-select-label" sx={{ pb: 2, pt: 3 }}>
{dropDownValue?.label}
{label}
</InputLabel>
<FormControl sx={{ width: '100%' }}>
<Select
displayEmpty
input={<OutlinedInput />}
value={age}
renderValue={(selected) => {
if (selected.length === 0) {
return <span>{dropDownValue?.placeholder}</span>;
return <span>{/* {dropDownValue?.placeholder} */}</span>;
}
return selected;
}}
@@ -56,12 +51,14 @@ export default function Dropdown({ items, dropdownData }) {
onChange={handleChange}
>
<MenuItem disabled value="">
<span>{dropDownValue?.label}</span>
{/* <span>{dropDownValue?.label}</span> */}
</MenuItem>
{dropdownData && dropdownData.map((data) => (
<MenuItem value={data.displayname} key={data.ID}>{data.displayname}</MenuItem>
))}
{dropdownData &&
dropdownData.map((data) => (
<MenuItem value={data.name} key={data._id}>
{data.name}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
@@ -69,7 +66,7 @@ export default function Dropdown({ items, dropdownData }) {
);
}
Dropdown.propTypes = {
items: PropTypes.object.isRequired,
dropdownData: PropTypes.object.isRequired
dropdownData: PropTypes.object.isRequired,
dropdownChange: PropTypes.object,
label: PropTypes.string
};

3
src/constant/Endpoints.js
View File

@@ -24,5 +24,8 @@ export default {
GET_WIDGET_FAMILY_BY_INVENTORY: '/widget-family/search-by-inventory?inventory=',
ADD_WIDGET_FAMILY: '/widget-family',
EDIT_WIDGET_FAMILY: '/widget-family/',
GET_LABEL: '/sublevel/filter',
LOCATION_DELETE: '/dashboard/delete-location',
GET_PRODUCT_BY_ID: '/item/filter?inventory=',
GET_ITEMS_BY_INVENTORY: '/item/filter?inventory='
};

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

@@ -3,12 +3,29 @@ import DashboardNavbar from 'components/DashboardNavbar';
import DashboardLayout from 'layouts/DashboardLayout';
import { makeStyles } from '@mui/styles';
import Dropdown from 'components/Dropdown';
import { Grid, TableBody, TableCell, TableRow } from '@mui/material';
import BasicTable from 'components/BasicTable';
import { Box, Checkbox, Grid, TableBody, TableCell, TableRow } from '@mui/material';
import MDButton from 'components/Button';
import Breadcrumbs from 'components/Breadcrumbs';
import { useDispatch, useSelector } from 'react-redux';
import React, { useEffect, useState } from 'react';
import { LabellingSelectors } from 'redux/LabellingRedux';
import { WarehouseSelectors } from 'redux/WarehouseRedux';
import { WarehouseLocationsSelectors } from 'redux/WarehouseLocationsRedux';
import WarehouseActions from 'redux/WarehouseRedux';
import { API } from 'constant';
import WarehouseLocationsActions from 'redux/WarehouseLocationsRedux';
import LabellingActions from 'redux/LabellingRedux';
import BasicTable from 'components/BasicTable';
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
const useStyles = makeStyles({
nodataStyle: {
height: '200px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '300%'
},
iconSize: {
width: '50%',
height: '50%',
@@ -25,105 +42,145 @@ const useStyles = makeStyles({
}
});
const records = [
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
row: 'Nulla',
label: 'Mauris',
bay: ''
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
row: 'Nulla',
label: 'Mauris',
bay: ''
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
row: 'Nulla',
label: 'Mauris',
bay: ''
}
];
const headCells = [
{
id: 'warehouse',
label: 'warehouse'
},
{
id: 'zone',
label: 'Zone'
},
{
id: 'area',
label: 'Area'
},
{
id: 'row',
label: 'Row'
},
{
id: 'Label',
label: 'label'
},
{
id: 'Bay',
label: 'bay'
}
];
function LabelingScreen() {
const classes = useStyles();
const dispatch = useDispatch();
const [zoneId, setZoneId] = useState('');
const [areaId, setAreaId] = useState('');
const [rowId, setRowId] = useState('');
const [bayId, setBayId] = useState('');
const [allLabelData, setAllLabelData] = useState([]);
const [totemLabelData, setTotemLabelData] = useState([]);
const [locationLabelData, setLocationLabelData] = useState([]);
const dropdownData = [
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) {
setAllLabelData(labelData);
}
}, [labelData, zoneId, areaId, rowId]);
const headCells = [
{
ID: '1',
displayname: 'Regular, full time'
id: 'warehouse',
label: 'Warehouse'
},
{
ID: '2',
displayname: 'Regular, part time'
id: 'zone',
label: 'Zone'
},
{
ID: '3',
displayname: 'Contractor- Arise Max'
id: 'area',
label: 'Area'
},
{
id: 'row',
label: 'Row'
},
{
id: 'bay',
label: 'Bay'
}
];
const data = [
{
placeholder: 'Lorem Ipsum',
label: 'Select Warehouse'
},
{
placeholder: 'Lorem Ipsum',
label: 'Select Zone'
},
{
placeholder: 'Lorem Ipsum',
label: 'Select Area'
},
{
placeholder: 'Warehouse 1',
label: 'Select Row'
useEffect(() => {
dispatch(
WarehouseActions.warehouseDataAction({
loader: 'loading-request',
slug: API.GET_WAREHOUSE_DATA,
method: 'get'
})
);
}, []);
const warehouseChange = (event) => {
const filterData = warehouseData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
const type = 'warehouse';
setZoneId(id);
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
slug: API.GET_CHILDREN_FROM_PARENT,
method: 'post',
data: { id, type }
})
);
};
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);
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
slug: API.GET_CHILDREN_FROM_PARENT,
method: 'post',
data: { id, type }
})
);
};
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);
dispatch(
WarehouseLocationsActions.locationRequest({
loader: 'loading-request',
slug: API.GET_CHILDREN_FROM_PARENT,
method: 'post',
data: { id, type }
})
);
};
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 getTableItem = (e, item) => {
if (e.target.checked) {
setTotemLabelData((prev) => [...prev, item.totem_label]);
setLocationLabelData((prev) => [...prev, item.location_data]);
} else {
const filterData = allLabelData.filter((item2) => item2.bay._id !== item.bay._id);
setTotemLabelData(filterData);
setLocationLabelData(filterData);
}
];
const data2 = [
{
placeholder: 'Z01-A02-R001-B001',
label: 'Bay TOTEM Labels'
},
{
placeholder: 'Z01-A02-R001-B001',
label: 'BIN Location Labels'
}
];
};
return (
<DashboardLayout>
@@ -138,41 +195,74 @@ function LabelingScreen() {
/>
<MDBox px={5} py={5}>
<Grid container spacing={2}>
{data &&
data.map((item, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<Dropdown items={item} dropdownData={dropdownData} />
</Grid>
))}
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={warehouseData}
dropdownChange={warehouseChange}
label="Select warehouse"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown dropdownData={zonedata} dropdownChange={zoneChange} label="Select Zone" />
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown dropdownData={areadata} dropdownChange={areaChange} label="Select Area" />
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown dropdownData={rowdata} dropdownChange={rowChange} label="Select Row" />
</Grid>
</Grid>
<br />
<BasicTable
headCells={headCells}
records={records}
backgroundColor="#F4F4F4"
records={allLabelData}
backgroundColor="#E5E5E5"
color="#8D8D8D"
>
<TableBody>
{records &&
records.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.warehouse}</TableCell>
<TableCell>{item.zone}</TableCell>
<TableCell>{item.area}</TableCell>
<TableCell>{item.row}</TableCell>
<TableCell>{item.label}</TableCell>
<TableCell>{item.Bay}</TableCell>
{bayId ? (
allLabelData &&
allLabelData.map((item) => (
<TableRow key={item._id}>
<TableCell>
<Checkbox
{...label}
sx={{ marginRight: '2px' }}
onChange={(e) => getTableItem(e, item)}
/>
{item?.warehouse?.name}
</TableCell>
<TableCell>{item?.zone?.name}</TableCell>
<TableCell>{item?.row?.name}</TableCell>
<TableCell>{item?.area?.name}</TableCell>
<TableCell>{item?.bay?.name}</TableCell>
</TableRow>
))}
))
) : (
<TableRow className={classes.nodataStyle}>No Data</TableRow>
)}
</TableBody>
</BasicTable>
<Grid container spacing={2}>
{data2 &&
data2.map((item, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<Dropdown items={item} dropdownData={dropdownData} />
</Grid>
))}
<Grid container spacing={2} py={5}>
<Grid item xs={12} sm={6} 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}>
<Box sx={{ backgroundColor: '#FFBC26', padding: '3px 12px' }}>Bin Location Labels</Box>
<Box sx={{ border: '1px solid black', padding: '3px 12px', height: '300px' }}>
{locationLabelData &&
locationLabelData.map((item, index) => (
<div key={index}>
{item.map((data, index) => (
<div key={index}>{data.label}</div>
))}
</div>
))}
</Box>
</Grid>
</Grid>
<div className={classes.buttondiv}>
<MDButton color="primary">{'Print Labels'}</MDButton>

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

@@ -1,21 +1,33 @@
import { Box, TableBody, TableCell, TableRow } from '@mui/material';
import { Box, Grid, TableBody, TableCell, TableRow } from '@mui/material';
import DashboardNavbar from 'components/DashboardNavbar';
import DashboardLayout from 'layouts/DashboardLayout';
import { makeStyles } from '@mui/styles';
import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import React from 'react';
import SearchBar from 'components/SearchBar';
import React, { useState } from 'react';
import BasicTable from 'components/BasicTable';
import Barcodeimage from 'assets/images/barcode-number.png';
import MDButton from 'components/Button';
import Checkbox from '@mui/material/Checkbox';
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
import Breadcrumbs from 'components/Breadcrumbs';
import Dropdown from 'components/Dropdown';
import { useDispatch, useSelector } from 'react-redux';
import { InventorySelectors } from 'redux/InventoryRedux';
import WidgetActions from 'redux/WidgetRedux';
import { API } from 'constant';
import MDBox from 'components/MDBox';
import { WidgetSelectors } from 'redux/WidgetRedux';
import ProductActions from 'redux/ProductsRedux';
import { ProductSelectors } from 'redux/ProductsRedux';
import InventoryActions from 'redux/InventoryRedux';
import QRcode from 'components/QRcode';
const useStyles = makeStyles({
nodataStyle: {
height: '200px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '600%'
},
labelSize: {
fontSize: '16px',
letterSpacing: '0.01em',
@@ -32,69 +44,6 @@ const useStyles = makeStyles({
margin: '52px 0px'
}
});
const records = [
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
row: 'Nulla',
label: 'Mauris',
bay: 'Senectus',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
row: 'Nulla',
label: 'Mauris',
bay: 'Senectus',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
row: 'Nulla',
label: 'Mauris',
bay: 'Senectus',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
}
];
const recordsNew = [
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
},
{
warehouse: 'Ipsum',
zone: 'Vivera',
area: 'Nisi',
barcodenumber: '2085550112',
barcodeimage: Barcodeimage
}
];
const headCells = [
{
@@ -110,15 +59,15 @@ const headCells = [
label: 'Subfamily'
},
{
id: 'Name',
id: 'formalName',
label: 'Name'
},
{
id: 'Manufacture',
id: 'manufacturer',
label: 'Manufacture'
},
{
id: 'Size',
id: 'size',
label: 'Size'
},
{
@@ -136,11 +85,11 @@ const headCellsNew = [
label: 'Inventory Name'
},
{
id: 'Item Name',
id: 'formalName',
label: 'Item Name'
},
{
id: 'Item Description',
id: 'description',
label: 'Item Description'
},
{
@@ -152,18 +101,93 @@ const headCellsNew = [
label: 'Barcode'
}
];
function WidgetLabel() {
const classes = useStyles();
const [personName, setPersonName] = React.useState([]);
const dispatch = useDispatch();
const [labelData, setLabelData] = useState([]);
const [inventoryId, setInventoryId] = useState('');
const [familyId, setFamilyId] = useState('');
const [allProductData, setAllProductData] = useState([]);
const [filterClick, setFilterClick] = useState(false);
const handleChange = (event) => {
const {
target: { value }
} = event;
setPersonName(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value
const inventoryData = useSelector(InventorySelectors.getInventoryDetail);
const familyData = useSelector(WidgetSelectors.getWidgetFamiliesByInventoryId(inventoryId));
const subFamilyData = useSelector(WidgetSelectors.getWidgetsByParentId(familyId));
const productData = useSelector(ProductSelectors.getProductDetail);
React.useEffect(() => {
dispatch(
InventoryActions.getInventoryAction({
loader: 'loading-request',
slug: API.GET_INVENTORY,
method: 'get'
})
);
}, []);
React.useEffect(() => {
if (productData.result && filterClick) {
setAllProductData(productData?.result);
}
}, [productData, filterClick]);
const inventoryChange = (event) => {
const filterData = inventoryData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
setInventoryId(filterData[0]._id);
dispatch(
WidgetActions.widgetRequest({
loader: 'loading-request',
slug: `${API.GET_WIDGET_FAMILY_BY_INVENTORY}${id}`,
method: 'get'
})
);
};
const familyChange = (event) => {
const filterData = familyData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
setFamilyId(filterData[0]._id);
dispatch(
WidgetActions.widgetRequest({
loader: 'loading-request',
slug: `${API.GET_WIDGET_FAMILY_BY_INVENTORY}${id}`,
method: 'get'
})
);
};
const subFamilyChange = (event) => {
const filterData = subFamilyData.filter((item) => item.name === event.target.value);
const id = filterData[0]._id;
dispatch(
WidgetActions.widgetRequest({
loader: 'loading-request',
slug: `${API.GET_WIDGET_FAMILY_BY_INVENTORY}${id}`,
method: 'get'
})
);
};
const filterHandler = () => {
setInventoryId('');
setFilterClick(true);
dispatch(
ProductActions.getProductByIdAction({
loader: 'loading-request',
slug: `${API.GET_PRODUCT_BY_ID}${inventoryId}`,
method: 'get'
})
);
};
const getTableItem = (e, item) => {
if (e.target.checked) {
setLabelData((prev) => [...prev, item]);
} else {
const filterData = labelData.filter((item2) => item2._id !== item._id);
setLabelData(filterData);
}
};
return (
<>
@@ -177,159 +201,93 @@ function WidgetLabel() {
{ name: 'Widget Label' }
]}
/>
<Box mx={3} my={3}>
<Box
sx ={{
display: 'grid',
gridTemplateColumns: ' repeat(5, 1fr)',
gridColumnGap :'20px'
}}
>
<Box>
<Box component="div" className={classes.labelSize}>
Select Inventory
</Box>
<Box className={classes.customLabel}>
<Select
multiple
displayEmpty
value={personName}
input={<OutlinedInput />}
renderValue={(selected) => {
if (selected.length === 0) {
return 'Placeholder';
}
return selected.join(', ');
}}
inputProps={{ 'aria-label': 'Without label' }}
sx={{
width: '100%'
}}
onChange={handleChange}
>
<MenuItem disabled value="">
Placeholder
</MenuItem>
<MenuItem>Lorem Ipsum</MenuItem>
</Select>
</Box>
</Box>
<Box>
<Box component="div" className={classes.labelSize}>
Select Family
</Box>
<Box className={classes.customLabel}>
<Select
multiple
displayEmpty
value={personName}
input={<OutlinedInput />}
renderValue={(selected) => {
if (selected.length === 0) {
return 'Placeholder';
}
return selected.join(', ');
}}
inputProps={{ 'aria-label': 'Without label' }}
sx={{
width: '100%'
}}
onChange={handleChange}
>
<MenuItem disabled value="">
Placeholder
</MenuItem>
<MenuItem>Lorem Ipsum</MenuItem>
</Select>
</Box>
</Box>
<Box>
<Box component="div" className={classes.labelSize}>
Select Sub Family
</Box>
<Box className={classes.customLabel}>
<Select
multiple
displayEmpty
value={personName}
input={<OutlinedInput />}
renderValue={(selected) => {
if (selected.length === 0) {
return 'Placeholder';
}
return selected.join(', ');
}}
inputProps={{ 'aria-label': 'Without label' }}
sx={{
width: '100%'
}}
onChange={handleChange}
>
<MenuItem disabled value="">
Placeholder
</MenuItem>
<MenuItem>Lorem Ipsum</MenuItem>
</Select>
</Box>
</Box>
<Box>
<Box component="div" className={classes.labelSize}>
Search Keyword
</Box>
<Box className={classes.customLabel}>
<SearchBar />
</Box>
</Box>
<Box>
<MDButton color="primary" sx={{ minWidth:'100%', marginTop:'30px', padding:'13px 40px' }} >{'Filter'}</MDButton>
</Box>
</Box>
<MDBox px={5} py={5}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={inventoryData}
dropdownChange={inventoryChange}
label="Select Inventory"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={familyData}
dropdownChange={familyChange}
label="Select Family"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Dropdown
dropdownData={subFamilyData}
label="Select Sub Family"
dropdownChange={subFamilyChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<MDButton
color="primary"
sx={{ minWidth: '100%', marginTop: '50px', padding: '13px 40px' }}
onClick={() => filterHandler()}
>
{'Filter'}
</MDButton>
</Grid>
</Grid>
<Box sx={{ marginTop: '24px', backgroundColor: '#FFFFFF' }}>
<BasicTable
headCells={headCells}
records={records}
records={allProductData}
backgroundColor="#E5E5E5"
color="#8D8D8D"
>
<TableBody>
{records &&
records.map((item) => (
{filterClick && allProductData.length ? (
allProductData &&
allProductData.map((item) => (
<TableRow key={item.id}>
<TableCell><Checkbox {...label} sx={{ marginRight:'2px' }} /> {item.warehouse}</TableCell>
<TableCell>{item.zone}</TableCell>
<TableCell>{item.area}</TableCell>
<TableCell>{item.row}</TableCell>
<TableCell>{item.label}</TableCell>
<TableCell>{item.bay}</TableCell>
<TableCell>{item.barcodenumber}</TableCell>
<TableCell>
<img src={item.barcodeimage} alt="img" width="200px" />
<Checkbox
{...label}
sx={{ marginRight: '2px' }}
onChange={(e) => getTableItem(e, item)}
/>
{item?.inventory?.name}
</TableCell>
<TableCell>{item?.widgetfamily?.name}</TableCell>
<TableCell>{item?.location?.sub_levels}</TableCell>
<TableCell>{item?.formalName}</TableCell>
<TableCell>{item?.manufacturer}</TableCell>
<TableCell>{item?.size}</TableCell>
<TableCell>{item?._id}</TableCell>
<TableCell>
<QRcode payload={item._id} width={100} height={100} />
</TableCell>
</TableRow>
))}
))
) : (
<TableRow className={classes.nodataStyle}>No Data</TableRow>
)}
</TableBody>
</BasicTable>
</Box>
<Box sx={{ marginTop: '24px', backgroundColor: '#FFFFFF' }}>
<BasicTable
headCells={headCellsNew}
records={records}
records={labelData}
backgroundColor="#E5E5E5"
color="#8D8D8D"
>
<TableBody>
{recordsNew &&
recordsNew.map((item) => (
{labelData &&
labelData.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.warehouse}</TableCell>
<TableCell>{item.zone}</TableCell>
<TableCell>{item.area}</TableCell>
<TableCell>{item.barcodenumber}</TableCell>
<TableCell>{item?.inventory?.name}</TableCell>
<TableCell>{item.formalName}</TableCell>
<TableCell>{item.description}</TableCell>
<TableCell>{item._id}</TableCell>
<TableCell>
<img src={item.barcodeimage} alt="img" width="200px" />
<QRcode payload={item._id} width={100} height={100} />
</TableCell>
</TableRow>
))}
@@ -339,7 +297,7 @@ function WidgetLabel() {
<div className={classes.buttondiv}>
<MDButton color="primary">{'Print Labels'}</MDButton>
</div>
</Box>
</MDBox>
</DashboardLayout>
</>
);

54
src/redux/LabellingRedux.js Normal file
View File

@@ -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({
getLabelAction: ['payload'],
getLabelSuccess: ['data'],
getLabelFailure: ['error']
});
export const LabellingTypes = Types;
const LabellingActions = Creators;
export default LabellingActions;
/* ------------- Initial State ------------- */
export const INITIAL_STATE = Immutable({
getLabelDetail: [],
getLabelLoading: false,
getLabelerror: {}
});
/* ------------- Selectors ------------- */
export const LabellingSelectors = {
getLabelDetail: (state) => state.labelling.getLabelDetail
};
/* ------------- Reducers ------------- */
export const onGetLabelAction = (state, { payload }) =>
state.merge({
fetching: _.uniq([state.fetching, payload?.loader]),
error: getErrorValue(state?.error, payload?.loader)
});
export const onGetLabelSuccess = (state, { data }) =>
state.merge({
fetching: getFetchingValue(state.fetching, data?.loader),
error: getErrorValue(state?.error, data?.loader),
getLabelDetail: data.getLabelDetail
});
export const onGetLabelFailure = (state, { error }) =>
state.merge({
fetching: _.without(state.fetching, error?.loader),
error: { ...state.error, [error?.loader]: error?.error }
});
/* ------------- Hookup Reducers To Types ------------- */
export const labellingReducer = createReducer(INITIAL_STATE, {
[Types.GET_LABEL_ACTION]: onGetLabelAction,
[Types.GET_LABEL_SUCCESS]: onGetLabelSuccess,
[Types.GET_LABEL_FAILURE]: onGetLabelFailure
});

31
src/redux/ProductsRedux.js
View File

@@ -5,6 +5,9 @@ import { getFetchingValue, getErrorValue } from '../services/Utils';
/* ------------- Types and Action Creators ------------- */
const { Types, Creators } = createActions({
getProductByIdAction: ['payload'],
getProductByIdSuccess: ['data'],
getProductByIdFailure: ['error'],
addProductAction: ['payload'],
addProductSuccess: ['data'],
addProductFailure: ['error']
@@ -18,15 +21,35 @@ export default ProductActions;
export const INITIAL_STATE = Immutable({
addProductDetail: [],
addProductLoading: false,
addProducterror: {}
addProducterror: {},
getProductByIdDetail: []
});
/* ------------- Selectors ------------- */
export const ProductSelectors = {
addProductDetail: (state) => state.product.productDetail
addProductDetail: (state) => state.product.productDetail,
getProductDetail: (state) => state.product.getProductByIdDetail
};
/* ------------- Reducers ------------- */
export const onGetProductByIdAction = (state, { payload }) =>
state.merge({
fetching: _.uniq([state.fetching, payload?.loader]),
error: getErrorValue(state?.error, payload?.loader)
});
export const onGetProductByIdSuccess = (state, { data }) =>
state.merge({
fetching: getFetchingValue(state.fetching, data?.loader),
error: getErrorValue(state?.error, data?.loader),
getProductByIdDetail: data.getProductByIdDetail
});
export const onGetProductByIdFailure = (state, { error }) =>
state.merge({
fetching: _.without(state.fetching, error?.loader),
error: { ...state.error, [error?.loader]: error?.error }
});
export const onAddProductAction = (state, { payload }) =>
state.merge({
fetching: _.uniq([state.fetching, payload?.loader]),
@@ -48,6 +71,10 @@ export const onAddProductFailure = (state, { error }) =>
/* ------------- Hookup Reducers To Types ------------- */
export const productReducer = createReducer(INITIAL_STATE, {
[Types.GET_PRODUCT_BY_ID_ACTION]: onGetProductByIdAction,
[Types.GET_PRODUCT_BY_ID_SUCCESS]: onGetProductByIdSuccess,
[Types.GET_PRODUCT_BY_ID_FAILURE]: onGetProductByIdFailure,
[Types.ADD_PRODUCT_FAILURE]: onAddProductFailure,
[Types.ADD_PRODUCT_ACTION]: onAddProductAction,
[Types.ADD_PRODUCT_SUCCESS]: onAddProductSuccess,
[Types.ADD_PRODUCT_FAILURE]: onAddProductFailure

2
src/redux/index.js
View File

@@ -8,6 +8,7 @@ import { rolesReducer } from './RolesRedux';
import { permissionsReducer } from './PermissionsRedux';
import { WarehouseLocationsReducer } from './WarehouseLocationsRedux';
import { widgetReducer } from './WidgetRedux';
import { labellingReducer } from './LabellingRedux';
import { itemReducer } from './ItemRedux';
// Combine all reducers.
@@ -21,6 +22,7 @@ const appReducer = combineReducers({
product: productReducer,
inventory: inventoryReducer,
widgets: widgetReducer,
labelling: labellingReducer,
items: itemReducer
});

31
src/sagas/Labelling.js Normal file
View File

@@ -0,0 +1,31 @@
import { AuthorizedAPI } from 'config';
import { takeLatest, call, put } from 'redux-saga/effects';
import LabellingActions from 'redux/LabellingRedux';
import { LabellingTypes } from 'redux/LabellingRedux';
import ApiServices from 'services/API/ApiServices';
export function* onRequestGetLabelData({ payload }) {
const response = yield call(
ApiServices[payload?.method],
AuthorizedAPI,
payload?.slug,
payload?.data
);
if (response?.status === 200) {
yield put(
LabellingActions.getLabelSuccess({
loader: payload?.loader,
getLabelDetail: response?.data?.data
})
);
} else {
payload.onFailedGetLabelData(response.data.error);
yield put(
LabellingActions.getLabelFailure({
loader: payload?.loader,
error: response?.data
})
);
}
}
export default [takeLatest(LabellingTypes.GET_LABEL_ACTION, onRequestGetLabelData)];

30
src/sagas/Product.js
View File

@@ -28,4 +28,32 @@ export function* onRequestAddProductData({ payload }) {
);
}
}
export default [takeLatest(ProductTypes.ADD_PRODUCT_ACTION, onRequestAddProductData)];
export function* onRequestGetProductById({ payload }) {
const response = yield call(
ApiServices[payload?.method],
AuthorizedAPI,
payload?.slug,
payload?.data
);
if (response?.status === 200) {
yield put(
ProductActions.getProductByIdSuccess({
loader: payload?.loader,
getProductByIdDetail: response?.data?.data
})
);
} else {
payload.onFailedGetProductById(response.data.error);
yield put(
ProductActions.getProductByIdFailure({
loader: payload?.loader,
error: response?.data
})
);
}
}
export default [
takeLatest(ProductTypes.ADD_PRODUCT_ACTION, onRequestAddProductData),
takeLatest(ProductTypes.GET_PRODUCT_BY_ID_ACTION, onRequestGetProductById)
];

2
src/sagas/index.js
View File

@@ -8,6 +8,7 @@ import RolesSaga from './Roles';
import PermissionsSaga from './Permissions';
import WarehouseLocationsSaga from './WarehouseLocations';
import WidgetSaga from './Widget';
import LabellingSaga from './Labelling';
import ItemSaga from './Item';
export default function* rootSaga() {
@@ -20,5 +21,6 @@ export default function* rootSaga() {
yield all([...PermissionsSaga]);
yield all([...WarehouseLocationsSaga]);
yield all([...WidgetSaga]);
yield all([...LabellingSaga]);
yield all([...ItemSaga]);
}