288 lines
11 KiB
JavaScript
288 lines
11 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import PropTypes from 'prop-types';
|
|
import SearchBar from 'components/SearchBar';
|
|
import MDButton from 'components/Button';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Fade from '@mui/material/Fade';
|
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import { styled } from '@mui/material/styles';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import Paper from '@mui/material/Paper';
|
|
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Collapse from '@mui/material/Collapse';
|
|
import TablePagination from 'components/TablePagination';
|
|
|
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
|
[`&.${tableCellClasses.head}`]: {
|
|
backgroundColor: '#e5e7eb',
|
|
color: theme.palette.common.black,
|
|
fontWeight:400
|
|
},
|
|
[`&.${tableCellClasses.body}`]: {
|
|
fontSize: 14,
|
|
fontWeight:400
|
|
}
|
|
}));
|
|
|
|
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
|
'&:nth-of-type(4n+1)': {
|
|
backgroundColor: theme.palette.action.hover
|
|
},
|
|
'td, th' :{
|
|
padding: '0.75rem 0.5rem'
|
|
},
|
|
// hide last border
|
|
'&:last-child td, &:last-child th': {
|
|
border: 0
|
|
}
|
|
// '&:nth-of-type(1) td, &:nth-of-type(1) th': {
|
|
// width: '10px'
|
|
// }
|
|
}));
|
|
|
|
|
|
function createData(zone, names, type, specifications) {
|
|
return {
|
|
zone,
|
|
names,
|
|
type,
|
|
specifications,
|
|
children:[
|
|
{
|
|
rownumber:'10,654',
|
|
location:'ALFKI',
|
|
employeeid:'4',
|
|
orderdate:'08/25/2008',
|
|
requiredate:'09/22/2008',
|
|
shippeddate:'09/22/2008'
|
|
},
|
|
{
|
|
rownumber:'10,654',
|
|
location:'ALFKI',
|
|
employeeid:'4',
|
|
orderdate:'08/25/2008',
|
|
requiredate:'09/22/2008',
|
|
shippeddate:'09/22/2008'
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
const rows = [
|
|
createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'),
|
|
createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'),
|
|
createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'),
|
|
createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque'),
|
|
createData('Zone A', 'Semper libero sit element...', 'Ana Trujillo', 'Orci arcu dictum pellentesque')
|
|
];
|
|
|
|
Row.propTypes = {
|
|
row: PropTypes.shape({
|
|
zone: PropTypes.string.isRequired,
|
|
names: PropTypes.string.isRequired,
|
|
type: PropTypes.string.isRequired,
|
|
specifications: PropTypes.string.isRequired,
|
|
children: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
rownumber: PropTypes.string.isRequired,
|
|
location: PropTypes.string.isRequired,
|
|
employeeid: PropTypes.string.isRequired,
|
|
orderdate: PropTypes.string.isRequired,
|
|
requiredate: PropTypes.string.isRequired,
|
|
shippeddate: PropTypes.string.isRequired
|
|
}),
|
|
).isRequired
|
|
}).isRequired
|
|
};
|
|
|
|
function Row(props) {
|
|
const { row } = props;
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<StyledTableRow sx={{ '&odd > *': { borderBottom: 'unset' } }}>
|
|
<StyledTableCell sx={{ width:'10%', display:'flex', alignItems: 'center' }}>
|
|
<IconButton
|
|
aria-label="expand row"
|
|
size="small"
|
|
sx ={{ border: '1px solid #ccc' }}
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
|
</IconButton>
|
|
<MDButton size="small" variant="contained" color="primary" sx={{ textTransform:'capitalize', minWidth:'45px', minHeight:'28px', marginLeft:'10px', boxShadow:'none', fontWeight:'500', padding:'0' }}>EDIT</MDButton>
|
|
|
|
</StyledTableCell>
|
|
<StyledTableCell component="th" scope="row" sx={{ textTransform:'uppercase', fontWeight:'400', fontSize:'14px', width:'5%' }}>
|
|
{row.zone}
|
|
</StyledTableCell>
|
|
<StyledTableCell>{row.names}</StyledTableCell>
|
|
<StyledTableCell>{row.type}</StyledTableCell>
|
|
<StyledTableCell>{row.specifications}</StyledTableCell>
|
|
</StyledTableRow>
|
|
<TableRow>
|
|
<TableCell colSpan={5} style={{ paddingBottom: 0, paddingTop: 0 }} >
|
|
<Collapse unmountOnExit in={open}>
|
|
<Box sx={{ margin:'15px 104px' }}>
|
|
<Table size="small" aria-label="purchases" sx={{ border: '1.2px solid #C2C2C2' }}>
|
|
<TableHead sx={{ background: '#E5E7EB', display:'table-header-group !important' }}>
|
|
<TableRow>
|
|
<TableCell sx={{ fontWeight:'500', fontSize:'14px' }}>Row no</TableCell>
|
|
<TableCell sx={{ fontWeight:'500', fontSize:'14px' }}>Number of Bays</TableCell>
|
|
<TableCell sx={{ fontWeight:'500', fontSize:'14px' }}>Employee ID</TableCell>
|
|
<TableCell sx={{ fontWeight:'500', fontSize:'14px' }}>Order Date</TableCell>
|
|
<TableCell sx={{ fontWeight:'500', fontSize:'14px' }}>Required Date</TableCell>
|
|
<TableCell sx={{ fontWeight:'500', fontSize:'14px' }}>Shipped Date</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{row?.children?.map((item , i)=>{
|
|
return(
|
|
<TableRow key={i}>
|
|
<TableCell>{item.rownumber}</TableCell>
|
|
<TableCell>{item.location}</TableCell>
|
|
<TableCell>{item.employeeid}</TableCell>
|
|
<TableCell>{item.orderdate}</TableCell>
|
|
<TableCell>{item.requiredate}</TableCell>
|
|
<TableCell>{item.shippeddate}</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</Box>
|
|
</Collapse>
|
|
</TableCell>
|
|
</TableRow>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default function NestedTable() {
|
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
const open = Boolean(anchorEl);
|
|
const handleClick = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
return (
|
|
<>
|
|
<Box sx={{ border:'1px solid #c4c4c4', borderTop:'6px solid #007aff', borderRadius:'4px', overflow: 'hidden' }}>
|
|
<Box
|
|
sx={{
|
|
display : 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding:'16px'
|
|
}}
|
|
>
|
|
<Box>
|
|
<SearchBar />
|
|
</Box>
|
|
<Box sx={{ display:'flex', columnGap:'15px' }}>
|
|
<MDButton size="small" variant="outlined" color="primary" sx={{ textTransform:'capitalize', minWidth:'60px', minHeight:'44px', fontWeight:'500' }}>Sorting</MDButton>
|
|
<MDButton
|
|
id="fade-button"
|
|
size="small" variant="outlined" color="primary" sx={{ textTransform:'capitalize', minWidth:'60px', minHeight:'44px', fontWeight:'500' }}
|
|
aria-controls={open ? 'fade-menu' : undefined}
|
|
aria-haspopup="true"
|
|
aria-expanded={open ? 'true' : undefined}
|
|
endIcon={ <KeyboardArrowDownIcon /> }
|
|
onClick={handleClick}
|
|
>
|
|
Dashboard
|
|
</MDButton>
|
|
<Menu
|
|
id="fade-menu"
|
|
MenuListProps={{
|
|
'aria-labelledby': 'fade-button'
|
|
}}
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
TransitionComponent={Fade}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem>Profile</MenuItem>
|
|
<MenuItem>My account</MenuItem>
|
|
<MenuItem>Logout</MenuItem>
|
|
</Menu>
|
|
</Box>
|
|
</Box>
|
|
{/* Table-row- */}
|
|
<TableContainer component={Paper} sx={{ borderRadius: '0 !important', boxShadow:'none' }}>
|
|
<Table aria-label="collapsible table" sx={{ minWidth: 700 }}>
|
|
<TableHead sx={{ display:'table-header-group' }}>
|
|
<TableRow>
|
|
<StyledTableCell></StyledTableCell>
|
|
<StyledTableCell>Zone</StyledTableCell>
|
|
<StyledTableCell>Names</StyledTableCell>
|
|
<StyledTableCell>Type</StyledTableCell>
|
|
<StyledTableCell>Specifications</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row) => (
|
|
<Row key={row.name} row={row} />
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent:'space-between', padding:'15px 10px' }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<MDButton size="small" variant="outlined" color="primary" sx={{ textTransform:'inherit', minWidth:'45px', minHeight:'28px', boxShadow:'none', fontWeight:'500', padding:'0' }}>Go to</MDButton>
|
|
<MDButton size="small" variant="outlined" color="primary" sx={{ textTransform:'inherit', minWidth:'45px', minHeight:'28px', marginLeft:'10px', boxShadow:'none', fontWeight:'500', padding:'0', border:' 1px solid #C2C2C2', color:'#000' }}>1</MDButton>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', fontSize:'12px', marginLeft:'15px' }}>
|
|
View:
|
|
<MDButton
|
|
id="fade-button"
|
|
size="small" variant="outlined" color="primary"
|
|
aria-controls={open ? 'fade-menu' : undefined}
|
|
aria-haspopup="true"
|
|
aria-expanded={open ? 'true' : undefined}
|
|
endIcon={ <KeyboardArrowDownIcon /> }
|
|
sx={{ textTransform:'inherit', minWidth:'45px', minHeight:'28px', marginLeft:'10px', boxShadow:'none', fontWeight:'500', padding:'0', border:' 1px solid #C2C2C2', color:'#000' }}
|
|
onClick={handleClick}
|
|
>
|
|
12
|
|
</MDButton>
|
|
<Menu
|
|
id="fade-menu"
|
|
MenuListProps={{
|
|
'aria-labelledby': 'fade-button'
|
|
}}
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
TransitionComponent={Fade}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem>Profile</MenuItem>
|
|
<MenuItem>My account</MenuItem>
|
|
<MenuItem>Logout</MenuItem>
|
|
</Menu>
|
|
</Box>
|
|
</Box>
|
|
{/*---- pagination- */}
|
|
<Box>
|
|
<TablePagination />
|
|
</Box>
|
|
<Box sx={{ fontSize:'14px', color:'#000' }}>
|
|
[1 to 10 of 92]
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
|