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 'app/assets/Color' import useStyles from 'app/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: 'provider_code', label: 'Mã đối tác', align: 'center', minWidth: 150, }, { id: 'provider_name', label: 'Tên đối tác', align: 'left', minWidth: 200, }, { id: 'phone', label: 'Số điện thoại', align: 'left', minWidth: 'auto', minWidth: 100, }, { id: 'email', label: 'Email', align: 'left', minWidth: 'auto', minWidth: 150, }, { id: 'address', label: 'Địa chỉ', align: 'left', minWidth: 'auto', minWidth: 250, }, ] 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 handleChangePage = (event, newPage) => { setPageIndex(newPage) } const handleChangeRowsPerPage = (event) => { setPageSize(event.target.value) } const handleClose = () => { setOpen(false) } const { user } = useAuth() 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> ))} <TableCell style={{ backgroundColor: colors.headerTable, width: 145, }} > Trạng thái </TableCell> <TableCell style={{ textAlign: 'center', backgroundColor: colors.headerTable, width: 160, }} > Hành động </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> ) })} <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} > <MenuItem value={1}> Hoạt động </MenuItem> <MenuItem value={2}>Khóa</MenuItem> </Select> </TableCell> <TableCell> {checkRole( user, '/payment-supplier/delete' ) ? ( <Tooltip title="Xoá"> <IconButton onClick={() => { setSelected({ ...row, title: 'Xóa đối tác thanh toán', content: `Bạn có muốn xóa đối tác thanh toán ${row.provider_name} hay không?`, }) setOpen(true) }} className={classes.button} aria-label="Delete" > <Icon color="error"> delete </Icon> </IconButton> </Tooltip> ) : null} {checkRole( user, '/payment-supplier/update' ) ? ( <Tooltip title="Cập nhật"> <IconButton onClick={() => { history.push({ pathname: '/payment-supplier/update', state: row.id, }) }} className={classes.button} aria-label="edit" > <Icon color="primary"> edit </Icon> </IconButton> </Tooltip> ) : null} {checkRole( user, '/payment-supplier/update' ) ? ( <Tooltip title="Cập nhật"> <IconButton onClick={() => { history.push({ pathname: '/payment-supplier/detail', state: row.id, }) }} className={classes.button} aria-label="edit" > <Icon color="primary"> visibility </Icon> </IconButton> </Tooltip> ) : null} </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