import React, { useState } from 'react' import { Paper, Table, TableBody, TableCell, TableHead, TableContainer, TablePagination, TableRow, IconButton, MenuItem, Select, Modal, Fade, Grid, Backdrop, Link, Button, Tooltip, Icon, } from '@material-ui/core' import EditIcon from '@material-ui/icons/Edit' import DeleteIcon from '@material-ui/icons/Delete' import colors from '../../assets/Color' import useStyles from '../../styles/Table' import { Breadcrumb, SimpleCard } from 'app/components' import DialogTransition from 'app/components/dialog/DialogTransition' import { useHistory } from 'react-router-dom' import useAuth from 'app/hooks/useAuth' import { checkRole } from 'app/config/Function' const columns = [ { id: 'index', label: 'STT', align: 'center', minWidth: 50, }, { id: 'cus_name', label: 'Họ và tên', align: 'left', minWidth: 'auto', }, { id: 'phone', label: 'Số điện thoại', align: 'left', minWidth: 'auto', }, { id: 'email', label: 'Email', align: 'left', minWidth: 'auto', }, { id: 'tax', label: 'Mã số thuế', align: 'left', minWidth: 'auto', }, { id: 'company_name', label: 'Doanh nghiệp/Đơn vị ', align: 'left', minWidth: 'auto', }, { id: 'city', label: 'Tỉnh/ Thành phố', align: 'left', minWidth: 'auto', }, ] function TableList(props) { const { data, handeChangeActive, removeItem, changeActive, setChangeActive, setPageIndex, setPageSize, pageIndex, totalRecords, permissions, } = props const classes = useStyles() let history = useHistory() const [selected, setSelected] = useState({ name: '', id: '', title: '', content: '', }) const [open, setOpen] = React.useState(false) const { user } = useAuth() const handleChangePage = (event, newPage) => { setPageIndex(newPage) } const handleChangeRowsPerPage = (event) => { setPageSize(event.target.value) } const handleClose = () => { setOpen(false) } return ( <Paper className={classes.root}> <TableContainer className={classes.container}> <Table stickyHeader aria-label="sticky table"> <TableHead> <TableRow> {columns.map((column) => ( <TableCell key={column.id} align={'center'} style={{ width: column.minWidth, backgroundColor: colors.headerTable, }} > {column.label} </TableCell> ))} {checkRole(user, '/merchant/changeStatus') && ( <TableCell style={{ backgroundColor: colors.headerTable, width: 150, }} > Trạng thái </TableCell> )} </TableRow> </TableHead> <TableBody className={classes.columnTable}> {data.map((row) => { return ( <TableRow hover role="checkbox" tabIndex={-1} key={row.id} > {columns.map((column) => { const imageUrl = row[column.id] return ( <TableCell key={column.id} align={column.align} > {column.format ? ( <img src={column.format( imageUrl )} className={ classes.image } /> ) : ( imageUrl )} </TableCell> ) })} {checkRole( user, '/merchant/changeStatus' ) && ( <TableCell className={classes.border}> <Select variant={'outlined'} labelId="demo-simple-select-placeholder-label-label" id="demo-simple-select-placeholder-label" onChange={(e) => handeChangeActive( row.id, e.target.value ) } displayEmpty defaultValue={row.status} className={classes.formControl} style={{ width: 130, }} > <MenuItem value={1}> Chờ tư vấn </MenuItem> <MenuItem value={2}> Đang tư vấn </MenuItem> <MenuItem value={3}> Đã tư vấn </MenuItem> </Select> </TableCell> )} </TableRow> ) })} </TableBody> </Table> </TableContainer> <DialogTransition data={selected} open={open} handleClose={handleClose} onAgree={() => { removeItem(selected.id) handleClose() }} /> <TablePagination component="div" page={pageIndex} count={totalRecords} rowsPerPage={10} rowsPerPageOptions={[]} onChangePage={handleChangePage} onChangeRowsPerPage={handleChangeRowsPerPage} /> </Paper> ) } export default TableList