From ab1d39628761edb8456e3f27dc55676bd6292810 Mon Sep 17 00:00:00 2001 From: Dikshajain39511 <98263148+Dikshajain39511@users.noreply.github.com> Date: Mon, 31 Jan 2022 11:31:25 +0530 Subject: [PATCH] Feature/wms 35 (#34) Added: Location label form Co-authored-by: [Diksha] <[diksha39511@gmail.com]> Co-authored-by: Llewellyn D'souza Co-authored-by: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com> --- src/components/BasicTable/index.js | 68 ++++++++++++ src/components/Dropdown/index.js | 84 +++++++++------ src/pages/labeling/index.js | 162 +++++++++++++++++++++++++++++ src/routes/index.js | 23 +++- 4 files changed, 306 insertions(+), 31 deletions(-) create mode 100644 src/components/BasicTable/index.js create mode 100644 src/pages/labeling/index.js diff --git a/src/components/BasicTable/index.js b/src/components/BasicTable/index.js new file mode 100644 index 0000000..f88cba6 --- /dev/null +++ b/src/components/BasicTable/index.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; +import { makeStyles } from '@mui/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; + +const useStyles = makeStyles({ + headColor: { + display: 'revert' + }, + rowStyle: { + color: '#007aff' + }, + tablebody: { + fontSize: '13px', + color: '#7F7F7F' + } +}); + +const row = (x, i, header) => ( + + {header.map((y, k) => ( + {x[y.prop]} + ))} + +); +export default function BasicTable({ data, header, backgroundColor }) { + const classes = useStyles(); + const TableContainer = styled('div')( + () => ` + td, + th { + border-right: 1px solid #EBEBEB; + border-bottom: 1px solid #EBEBEB; + border-left: 1px solid #EBEBEB; + text-align: left; + white-space: nowrap; + background-color: white; + } + th { + background-color: ${backgroundColor};, + color: #9B9B9B; + } + ` + ); + + return ( + + + + + {header && header.map((x, i) => {x.name})} + + + {data.map((x, i) => row(x, i, header))} +
+ + ); +} +BasicTable.propTypes = { + data: PropTypes.array, + header: PropTypes.array, + backgroundColor: PropTypes.string +}; diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js index 6afe5db..14aadb7 100644 --- a/src/components/Dropdown/index.js +++ b/src/components/Dropdown/index.js @@ -1,13 +1,29 @@ -import * as React from 'react'; +import React, { useState, useEffect } 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'; +import { InputLabel } from '@mui/material'; +import { makeStyles } from '@mui/styles'; -export default function Dropdown() { - const [age, setAge] = React.useState(''); +const useStyles = makeStyles({ + font: { + fontWeight: 'bold', + color: 'black' + } +}); +export default function Dropdown({ items, dropdownData }) { + const classes = useStyles(); + + const [age, setAge] = useState(''); + const [dropDownValue, setDropDownValue] = useState([]); + + useEffect(() => { + setDropDownValue(items); + }, [items]); const handleChange = (event) => { const { @@ -20,32 +36,40 @@ export default function Dropdown() { }; return ( - - - {/* Equipment */} - - - + <> + + + {dropDownValue?.label} + + + + + + ); } +Dropdown.propTypes = { + items: PropTypes.object.isRequired, + dropdownData: PropTypes.object.isRequired + +}; diff --git a/src/pages/labeling/index.js b/src/pages/labeling/index.js new file mode 100644 index 0000000..aeb1988 --- /dev/null +++ b/src/pages/labeling/index.js @@ -0,0 +1,162 @@ +import MDBox from 'components/MDBox'; +import DashboardNavbar from 'components/DashboardNavbar'; +import Footer from 'components/Footer'; +import DashboardLayout from 'layouts/DashboardLayout'; +import { makeStyles } from '@mui/styles'; +import Dropdown from 'components/Dropdown'; +import { Grid } from '@mui/material'; +import BasicTable from 'components/BasicTable'; +import MDButton from 'components/Button'; + +const useStyles = makeStyles({ + iconSize: { + width: '50%', + height: '50%', + marginBottom: '10px' + }, + margin: { + margin: '20px' + }, + buttondiv: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: '200px' + } +}); + +function LabelingScreen() { + const classes = useStyles(); + + const dropdownData = [ + { + ID: '1', + displayname: 'Regular, full time' + }, + { + ID: '2', + displayname: 'Regular, part time' + }, + { + ID: '3', + displayname: 'Contractor- Arise Max' + } + ]; + 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' + } + ]; + const data2 = [ + { + placeholder: 'Z01-A02-R001-B001', + label: 'Bay TOTEM Labels' + }, + { + placeholder: 'Z01-A02-R001-B001', + label: 'BIN Location Labels' + } + ]; + + const tableData = [ + { + 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 header = [ + { + name: 'Warehouse', + prop: 'warehouse' + }, + { + name: 'Zone', + prop: 'zone' + }, + { + name: 'Area', + prop: 'area' + }, + { + name: 'Row', + prop: 'row' + }, + { + name: 'Label', + prop: 'label' + }, + { + name: 'Bay', + prop: 'bay' + } + ]; + return ( + + + + + {data && + data.map((item, index) => ( + + + + ))} + +
+ + + {data2 && + data2.map((item, index) => ( + + + + ))} + +
+ {'Print Labels'} +
+ +