@mui/material#TableRow JavaScript Examples
The following examples show how to use
@mui/material#TableRow.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SimpleTable.jsx From matx-react with MIT License | 6 votes |
|
SimpleTable = () => {
return (
<Box width="100%" overflow="auto">
<StyledTable>
<TableHead>
<TableRow>
<TableCell align="left">Name</TableCell>
<TableCell align="center">Company</TableCell>
<TableCell align="center">Start Date</TableCell>
<TableCell align="center">Status</TableCell>
<TableCell align="center">Amount</TableCell>
<TableCell align="right">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{subscribarList.map((subscriber, index) => (
<TableRow key={index}>
<TableCell align="left">{subscriber.name}</TableCell>
<TableCell align="center">{subscriber.company}</TableCell>
<TableCell align="center">{subscriber.date}</TableCell>
<TableCell align="center">{subscriber.status}</TableCell>
<TableCell align="center">${subscriber.amount}</TableCell>
<TableCell align="right">
<IconButton>
<Icon color="error">close</Icon>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</StyledTable>
</Box>
);
}
Example #2
| Source File: index.js From fireact with MIT License | 6 votes |
|
DataTable = ({columns, rows, totalRows, pageSize, page, handlePageChane, handlePageSizeChange}) => {
return (
<>
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
{columns.map((c,i) =>
<TableCell key={i} style={c.style}>{c.name}</TableCell>
)}
</TableRow>
</TableHead>
<TableBody>
{rows.map((r, i) =>
<TableRow key={i}>
{columns.map((c, k) =>
<TableCell key={k}>{r[c.field]}</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10,20,50,100]}
component="div"
count={totalRows}
rowsPerPage={pageSize}
page={page}
onPageChange={handlePageChane}
onRowsPerPageChange={handlePageSizeChange}
/>
</>
)
}
Example #3
| Source File: index.js From neutron with Mozilla Public License 2.0 | 5 votes |
|
SectionNeverSaved = () => {
const passwordsNeverSaveDomains = useSelector(
(state) => state.preferences.passwordsNeverSaveDomains,
);
return (
<List disablePadding dense>
{passwordsNeverSaveDomains.length < 1 ? (
<ListItem disabled>
<ListItemText primary="Empty." />
</ListItem>
) : (
<ListItem>
<Table size="small" aria-label="Never Saved">
<TableBody>
{passwordsNeverSaveDomains.map((domain) => (
<TableRow key={domain}>
<TableCell component="th" scope="row">
{domain}
</TableCell>
<TableCell align="right">
<Tooltip title="Remove">
<IconButton
aria-label="Remove"
size="small"
onClick={() => {
requestSetPreference(
'passwordsNeverSaveDomains',
passwordsNeverSaveDomains.filter(((item) => item !== domain)),
);
}}
>
<ClearIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</ListItem>
)}
</List>
);
}
Example #4
| Source File: EnhancedTableHead.js From react-saas-template with MIT License | 5 votes |
|
function EnhancedTableHead(props) {
const { order, orderBy, rows, onRequestSort, classes } = props;
const createSortHandler = useCallback(
property => event => {
onRequestSort(event, property);
},
[onRequestSort]
);
return (
<TableHead>
<TableRow>
{rows.map((row, index) => (
<TableCell
key={index}
align={row.numeric ? "right" : "inherit"}
padding="normal"
sortDirection={orderBy === row.name ? order : false}
className={index === 0 ? classes.paddingFix : null}
>
{onRequestSort ? (
<Tooltip
title="Sort"
placement={row.numeric ? "bottom-end" : "bottom-start"}
enterDelay={300}
>
<TableSortLabel
active={orderBy === row.id}
direction={order}
onClick={createSortHandler(row.id)}
>
<Typography variant="body2">{row.label}</Typography>
</TableSortLabel>
</Tooltip>
) : (
<TableSortLabel
className={classNames(classes.tableSortLabel, classes.noIcon)}
>
<Typography variant="body2" className={classes.label}>
{row.label}
</Typography>
</TableSortLabel>
)}
</TableCell>
))}
</TableRow>
</TableHead>
);
}
Example #5
| Source File: UserListHead.js From Django-REST-Framework-React-BoilerPlate with MIT License | 5 votes |
|
export default function UserListHead({
order,
orderBy,
rowCount,
headLabel,
numSelected,
onRequestSort,
onSelectAllClick,
}) {
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
/>
</TableCell>
{headLabel.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.alignRight ? 'right' : 'left'}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
hideSortIcon
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box sx={{ ...visuallyHidden }}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
Example #6
| Source File: AlternatingTableRow.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
AlternatingTableRow = withStyles((theme) => ({
root: {
'&:nth-of-type(even)': {
backgroundColor: theme.palette.action.hover,
},
},
}))(TableRow)
Example #7
| Source File: PaginationTable.jsx From matx-react with MIT License | 5 votes |
|
PaginationTable = () => {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleChangePage = (_, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Box width="100%" overflow="auto">
<StyledTable>
<TableHead>
<TableRow>
<TableCell align="left">Name</TableCell>
<TableCell align="center">Company</TableCell>
<TableCell align="center">Start Date</TableCell>
<TableCell align="center">Status</TableCell>
<TableCell align="center">Amount</TableCell>
<TableCell align="right">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{subscribarList
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((subscriber, index) => (
<TableRow key={index}>
<TableCell align="left">{subscriber.name}</TableCell>
<TableCell align="center">{subscriber.company}</TableCell>
<TableCell align="center">{subscriber.date}</TableCell>
<TableCell align="center">{subscriber.status}</TableCell>
<TableCell align="center">${subscriber.amount}</TableCell>
<TableCell align="right">
<IconButton>
<Icon color="error">close</Icon>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</StyledTable>
<TablePagination
sx={{ px: 2 }}
page={page}
component="div"
rowsPerPage={rowsPerPage}
count={subscribarList.length}
onPageChange={handleChangePage}
rowsPerPageOptions={[5, 10, 25]}
onRowsPerPageChange={handleChangeRowsPerPage}
nextIconButtonProps={{ "aria-label": "Next Page" }}
backIconButtonProps={{ "aria-label": "Previous Page" }}
/>
</Box>
);
}
Example #8
| Source File: ServerZones.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
function ServerZones(props) {
const { serverZones } = props;
const formatBytes = bytes => {
let exp = Math.log(bytes) / Math.log(1024) | 0;
let res = (bytes / Math.pow(1024, exp)).toFixed(1);
return res + '' + (exp === 0 ? ' bytes' : ' ' + 'KMGTPEZY'[exp - 1] + 'B');
};
return (
<Table size="small" padding="none" style={{ marginBottom: 16 }}>
<TableHead>
<TableRow>
<StyledTableCell rowSpan={2} align="center">Zone</StyledTableCell>
<StyledTableCell colSpan={3} align="center">Requests</StyledTableCell>
<StyledTableCell colSpan={6} align="center">Responses</StyledTableCell>
<StyledTableCell colSpan={2} align="center">Traffic</StyledTableCell>
</TableRow>
<TableRow>
<StyledTableCell align="center">Total</StyledTableCell>
<StyledTableCell align="center">Req/s</StyledTableCell>
<StyledTableCell align="center">Time</StyledTableCell>
<StyledTableCell align="center">1xx</StyledTableCell>
<StyledTableCell align="center">2xx</StyledTableCell>
<StyledTableCell align="center">3xx</StyledTableCell>
<StyledTableCell align="center">4xx</StyledTableCell>
<StyledTableCell align="center">5xx</StyledTableCell>
<StyledTableCell align="center">Total</StyledTableCell>
<StyledTableCell align="center">Sent</StyledTableCell>
<StyledTableCell align="center">Rcvd</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{serverZones.map(({ server, values }, idx) => {
const { responses } = values;
return (
<AlternatingTableRow key={idx}>
<StyledTableCell>
<strong>{server === '*' ? 'Any' : server === '_' ? 'Other' : server}</strong>
</StyledTableCell>
<StyledTableCell align="right">{values.requestCounter}</StyledTableCell>
<StyledTableCell align="right">{values.requestMsec}</StyledTableCell>
<StyledTableCell align="right">{values.time}</StyledTableCell>
<StyledTableCell align="right">{responses['1xx']}</StyledTableCell>
<StyledTableCell align="right">{responses['2xx']}</StyledTableCell>
<StyledTableCell align="right">{responses['3xx']}</StyledTableCell>
<StyledTableCell align="right">{responses['4xx']}</StyledTableCell>
<StyledTableCell align="right">{responses['5xx']}</StyledTableCell>
<StyledTableCell align="right">
{responses['1xx'] + responses['2xx'] + responses['3xx'] +
responses['4xx'] + responses['5xx']}
</StyledTableCell>
<StyledTableCell align="right">{formatBytes(values.outBytes)}</StyledTableCell>
<StyledTableCell align="right">{formatBytes(values.inBytes)}</StyledTableCell>
</AlternatingTableRow>
);
})}
</TableBody>
</Table>
);
}
Example #9
| Source File: FetchMail.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { classes, t, fetchmail, handleAdd, handleEdit, handleDelete } = this.props;
return (
<FormControl className={classes.form}>
<Grid container alignItems="center" className={classes.headline}>
<Typography variant="h6">{t('Fetchmail')}</Typography>
<IconButton onClick={handleAdd} size="large">
<AddCircleOutline color="primary" fontSize="small"/>
</IconButton>
</Grid>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
{t(column.label)}
</TableCell>
))}
<TableCell padding="checkbox" />
</TableRow>
</TableHead>
<TableBody>
{fetchmail.map((entry, idx) =>
<TableRow key={idx} hover onClick={handleEdit(idx)}>
<TableCell>
{entry.srcUser}
</TableCell>
<TableCell>
{entry.srcServer}
</TableCell>
<TableCell>
{entry.srcFolder}
</TableCell>
<TableCell align="right">
<IconButton onClick={handleDelete(idx)} size="large">
<Delete color="error"/>
</IconButton>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</FormControl>
);
}
Example #10
| Source File: Sync.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { classes, t, sync } = this.props;
const { sortedDevices, order, orderBy, wipingID, snackbar } = this.state;
return (
<FormControl className={classes.form}>
<Grid container alignItems="center" className={classes.headline}>
<Typography variant="h6">{t('Mobile devices')}</Typography>
</Grid>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column, key) =>
<TableCell
key={key}
padding={column.padding || 'normal'}
>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={order}
onClick={this.handleSort(column.value, column.type, true)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
)}
<TableCell padding="checkbox">{t('Actions')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(sortedDevices || sync).map((obj, idx) =>
<TableRow key={idx}>
<TableCell>{obj.deviceid || ''}</TableCell>
<TableCell>{obj.deviceuser || ''}</TableCell>
<TableCell>{(obj.devicetype || '') + ' / ' + (obj.useragent || '')}</TableCell>
<TableCell>{obj.firstsynctime ? parseUnixtime(obj.firstsynctime) : ''}</TableCell>
<TableCell>{obj.lastupdatetime ? parseUnixtime(obj.lastupdatetime) : ''}</TableCell>
<TableCell>{obj.asversion || ''}</TableCell>
<TableCell>{(obj.foldersSynced || '') + '/' + (obj.foldersSyncable || '')}</TableCell>
<TableCell>{this.getWipeStatus(obj.wipeStatus)}</TableCell>
<TableCell style={{ display: 'flex' }}>
{obj.wipeStatus >= 2 && <Tooltip title="Cancel remote wipe" placement="top">
<IconButton onClick={this.handleRemoteWipeCancel(obj.deviceid)}>
<DoNotDisturbOn color="secondary"/>
</IconButton>
</Tooltip>}
{obj.wipeStatus < 2 && <Tooltip title="Remote wipe" placement="top">
<IconButton onClick={this.handlePasswordDialog(obj.deviceid)}>
<CleaningServices color="error" />
</IconButton>
</Tooltip>}
<Tooltip title="Resync" placement='top'>
<IconButton onClick={this.handleResync(obj.deviceid)}>
<SyncIcon color="primary"/>
</IconButton>
</Tooltip>
<Tooltip title="Delete device" placement='top'>
<IconButton onClick={this.handleRemoteDelete(obj.deviceid)}>
<Delete color="error"/>
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<PasswordSafetyDialog
open={Boolean(wipingID)}
deviceID={wipingID}
onClose={this.handlePasswordDialog('')}
onConfirm={this.handleRemoteWipeConfirm}
/>
<Feedback
snackbar={snackbar || ''}
onClose={() => this.setState({ snackbar: '' })}
/>
</FormControl>
);
}
Example #11
| Source File: TopSellingTable.jsx From matx-react with MIT License | 5 votes |
|
TopSellingTable = () => {
const { palette } = useTheme();
const bgError = palette.error.main;
const bgPrimary = palette.primary.main;
const bgSecondary = palette.secondary.main;
return (
<Card elevation={3} sx={{ pt: '20px', mb: 3 }}>
<CardHeader>
<Title>top selling products</Title>
<Select size="small" defaultValue="this_month">
<MenuItem value="this_month">This Month</MenuItem>
<MenuItem value="last_month">Last Month</MenuItem>
</Select>
</CardHeader>
<Box overflow="auto">
<ProductTable>
<TableHead>
<TableRow>
<TableCell sx={{ px: 3 }} colSpan={4}>
Name
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={2}>
Revenue
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={2}>
Stock Status
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={1}>
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{productList.map((product, index) => (
<TableRow key={index} hover>
<TableCell colSpan={4} align="left" sx={{ px: 0, textTransform: 'capitalize' }}>
<Box display="flex" alignItems="center">
<Avatar src={product.imgUrl} />
<Paragraph sx={{ m: 0, ml: 4 }}>{product.name}</Paragraph>
</Box>
</TableCell>
<TableCell align="left" colSpan={2} sx={{ px: 0, textTransform: 'capitalize' }}>
${product.price > 999 ? (product.price / 1000).toFixed(1) + 'k' : product.price}
</TableCell>
<TableCell sx={{ px: 0 }} align="left" colSpan={2}>
{product.available ? (
product.available < 20 ? (
<Small bgcolor={bgSecondary}>{product.available} available</Small>
) : (
<Small bgcolor={bgPrimary}>in stock</Small>
)
) : (
<Small bgcolor={bgError}>out of stock</Small>
)}
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={1}>
<IconButton>
<Icon color="primary">edit</Icon>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</ProductTable>
</Box>
</Card>
);
}
Example #12
| Source File: Menu.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { classes, t, domains } = this.props;
const { orderBy, order, sortedDomains } = this.state;
return (
<div className={classes.root}>
<TopBar onAdd={this.handleAdd} title="Dashboard"/>
<div className={classes.toolbar}></div>
<Typography variant="h2" className={classes.pageTitle}>
{t("Dashboard")}
</Typography>
<div className={classes.base}>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : "asc"}
onClick={this.handleSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{(sortedDomains.length > 0 ? sortedDomains : domains).map((obj, idx) =>
<TableRow key={idx} hover onClick={this.handleNavigation(obj.ID)}>
<TableCell>
{obj.domainname}{" "}
{obj.domainStatus === 3 ? `[${t("Deactivated")}]` : ""}
</TableCell>
<TableCell>{obj.address}</TableCell>
<TableCell>{obj.title}</TableCell>
<TableCell>{obj.maxUser}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</Paper>
</div>
</div>
);
}
Example #13
| Source File: Roles.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, roles, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, match, adding, snackbar, deleting } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={<span>
{t("Roles")}
<IconButton
size="small"
href="https://docs.grommunio.com/admin/administration.html#id1"
target="_blank"
>
<HelpOutline fontSize="small"/>
</IconButton>
</span>
}
subtitle={t('roles_sub')}
snackbar={snackbar}
onSnackbarClose={clearSnackbar}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
disabled={!writable}
>
{t("New role")}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingRoles", { count: roles.Roles.length })}
</Typography>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel
active
align="left"
direction={order}
onClick={handleRequestSort('name')}
>
{t('Name')}
</TableSortLabel>
</TableCell>
<TableCell>{t('Description')}</TableCell>
<TableCell>{t('Permissions')}</TableCell>
<TableCell padding="checkbox"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{roles.Roles.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/roles/' + obj.ID)}>
<TableCell>{obj.name}</TableCell>
<TableCell>{obj.description}</TableCell>
<TableCell>{obj.permissions.map(perm => perm.permission).toString()}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(roles.Roles.length < roles.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper>
<AddRoles
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
onClose={handleAddingClose}
/>
<GeneralDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.name}
id={deleting.ID}
/>
</TableViewContainer>
);
}
Example #14
| Source File: Folders.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, folders, domain, tableState, handleMatch,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { Folders, moreDataAvailable } = folders;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
const { match, snackbar, adding, deleting } = tableState;
const { hierarchy } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Folders")}
subtitle={t('folders_sub')}
href="https://docs.grommunio.com/admin/administration.html#folders"
snackbar={snackbar}
onSnackbarClose={clearSnackbar}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
disabled={!writable}
>
{t('New folder')}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingFolders", { count: Folders.length + (hierarchy.length === 1 ? 1 : 0) })}
</Typography>
<Breadcrumbs aria-label="breadcrumb" className={classes.breadcumbs}>
{hierarchy.map((folder, idx) =>
<Link
key={folder.folderid}
underline="hover"
color="primary"
onClick={this.handleBreadcrumb(folder, idx)}
className={classes.link}
>
{folder.displayname}
</Link>
)}
</Breadcrumbs>
<Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{['Folder name', 'Comment', 'Creation time', ''].map(headerName =>
<TableCell key={headerName}>{t(headerName)}</TableCell>
)}
</TableRow>
</TableHead>
<TableBody>
{hierarchy.length === 1 && <TableRow>
<TableCell>{IPM_SUBTREE_OBJECT.displayname}</TableCell>
<TableCell>{t(IPM_SUBTREE_OBJECT.comment)}</TableCell>
<TableCell></TableCell>
<TableCell align="right">
<IconButton onClick={handleEdit('/' + domain.ID + '/folders/' + IPM_SUBTREE_ID)} size="large">
<Edit color="primary"/>
</IconButton>
</TableCell>
</TableRow>}
{Folders.map((obj, idx) =>
<TableRow hover onClick={this.handleFetchChildren(obj)} key={idx}>
<TableCell>{obj.displayname}</TableCell>
<TableCell>{obj.comment}</TableCell>
<TableCell>{obj.creationtime}</TableCell>
<TableCell align="right">
<IconButton onClick={handleEdit('/' + domain.ID + '/folders/' + obj.folderid)} size="large">
<Edit color="primary"/>
</IconButton>
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(moreDataAvailable) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper>
<AddFolder
open={adding}
onClose={handleAddingClose}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
domain={domain}
parentID={hierarchy[hierarchy.length - 1].folderid}
/>
<DeleteFolder
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.displayname}
id={deleting.folderid}
domainID={domain.ID}
/>
</TableViewContainer>
);
}
Example #15
| Source File: Servers.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, servers, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, adding, snackbar, deleting } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={<span>
{t("Servers")}
<IconButton
size="small"
href="https://docs.grommunio.com/admin/administration.html#id1"
target="_blank"
>
<HelpOutline fontSize="small"/>
</IconButton>
</span>
}
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
disabled={!writable}
>
{t("New server")}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<div>
<TextField
value={servers.policy || 'round-robin'}
onChange={this.handlePolicyChange}
select
label="Selection policy"
className={classes.policy}
>
<MenuItem value={"round-robin"}>round-robin</MenuItem>
<MenuItem value={"balanced"}>balanced</MenuItem>
<MenuItem value={"first"}>first</MenuItem>
<MenuItem value={"last"}>last</MenuItem>
<MenuItem value={"random"}>random</MenuItem>
</TextField>
</div>
<Typography className={classes.count} color="textPrimary">
{t("showingServers", { count: servers.Servers.length })}
</Typography>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : "asc"}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
<TableCell padding="checkbox" />
</TableRow>
</TableHead>
<TableBody>
{servers.Servers.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/servers/' + obj.ID)}>
<TableCell>{obj.hostname}</TableCell>
<TableCell>{obj.extname}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(servers.Servers.length < servers.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper>
<AddServer
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
onClose={handleAddingClose}
/>
<GeneralDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.hostname}
id={deleting.ID}
/>
</TableViewContainer>
);
}
Example #16
| Source File: Sync.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, sync } = this.props;
const { snackbar, sortedDevices, order, orderBy, match, showPush, onlyActive,
filterEnded, filterUpdated } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={<>
{t("Mobile devices")}
<IconButton
size="small"
href="https://docs.grommunio.com/admin/administration.html#mobile-devices"
target="_blank"
>
<HelpOutline fontSize="small"/>
</IconButton>
</>
}
subtitle={t('sync_sub')}
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<FormControlLabel
control={
<Checkbox
checked={showPush}
onChange={this.handleCheckbox('showPush')}
color="primary"
/>
}
label={t('Show push connections')}
/>
<FormControlLabel
control={
<Checkbox
checked={onlyActive}
onChange={this.handleCheckbox('onlyActive')}
color="primary"
/>
}
label={t('Only show active connections')}
/>
<TextField
value={filterUpdated}
onChange={this.handleInput('filterUpdated')}
label={t("Last updated (seconds)")}
className={classes.select}
select
color="primary"
fullWidth
>
<MenuItem value={60}>10</MenuItem>
<MenuItem value={60}>30</MenuItem>
<MenuItem value={60}>60</MenuItem>
<MenuItem value={120}>120</MenuItem>
</TextField>
<TextField
value={filterEnded}
onChange={this.handleInput('filterEnded')}
label={t("Last ended (seconds)")}
className={classes.select}
select
color="primary"
fullWidth
>
<MenuItem value={20}>3</MenuItem>
<MenuItem value={20}>5</MenuItem>
<MenuItem value={20}>10</MenuItem>
<MenuItem value={20}>20</MenuItem>
</TextField>
<div className={classes.actions}>
<TextField
value={match}
onChange={this.handleInput('match')}
placeholder={t("Filter")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<SyncStatistics data={sync}/>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell
key={column.value}
padding={column.padding || 'normal'}
>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={order}
onClick={this.handleSort(column.value, column.type, true)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
<TableCell padding="checkbox">
{t('Push')}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(sortedDevices || sync).map((obj, idx) => {
const timePast = getTimePast(obj.diff);
const matches = this.getMatch(obj);
return matches ? (
<Tooltip key={idx} placement="top" title={obj.devtype + ' / ' + obj.devagent}>
<TableRow hover className={this.getRowClass(obj, obj.diff)}>
<TableCell className={classes.cell} padding="checkbox">{obj.pid || ''}</TableCell>
<TableCell className={classes.cell} padding="checkbox">{obj.ip || ''}</TableCell>
<TableCell className={classes.cell}>{obj.user || ''}</TableCell>
<TableCell className={classes.cell}>{getStringFromCommand(obj.command)}</TableCell>
<TableCell className={classes.cell}>{timePast}</TableCell>
<TableCell className={classes.cell}>{obj.devid || ''}</TableCell>
<TableCell className={classes.cell}>{obj.addinfo || ''}</TableCell>
<TableCell className={classes.cell} padding="checkbox">
{obj.push ? <CheckCircleOutlined /> : <HighlightOffOutlined />}
</TableCell>
</TableRow>
</Tooltip>
) : null;
})}
</TableBody>
</Table>
</Paper>
</TableViewContainer>
);
}
Example #17
| Source File: TaskQ.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, taskq, tableState, handleMatch, handleRequestSort,
handleEdit } = this.props;
const { order, orderBy, match, snackbar } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<TableViewContainer
headline={t("Task queue")}
href="https://docs.grommunio.com/admin/administration.html#taskq"
// subtitle={t("taskq_sub")}
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
>
<Grid container alignItems="flex-end" className={classes.chipGrid}>
<Chip
className={classes.chip}
label={t(taskq.running ? "Running" : "Not running")}
color={taskq.running ? "success" : "secondary"}
/>
<Chip
className={classes.chip}
label={"Queued: " + taskq.queued}
color={"primary"}
/>
<Chip
className={classes.chip}
label={"Workers: " + taskq.workers}
color={"primary"}
/>
</Grid>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={this.handleStart}
disabled={!writable || taskq.running}
>
{t("Start server")}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search tasks")}
variant={"outlined"}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingTaskq", { count: taskq.Tasks.length })}
</Typography>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : "asc"}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{taskq.Tasks.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/taskq/' + obj.ID)}>
<TableCell>{obj.command}</TableCell>
<TableCell>{t(this.getTaskState(obj.state))}</TableCell>
<TableCell>{obj.message}</TableCell>
<TableCell>{obj.created ? setDateTimeString(obj.created) : ''}</TableCell>
<TableCell>{obj.updated ? setDateTimeString(obj.updated) : ''}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{taskq.Tasks.length < taskq.count && (
<Grid container justifyContent="center">
<CircularProgress
color="primary"
className={classes.circularProgress}
/>
</Grid>
)}
</Paper>
</TableViewContainer>
);
}
Example #18
| Source File: Users.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, users, domain, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
const { checking, taskMessage, taskID } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Users")}
subtitle={t('users_sub')}
href="https://docs.grommunio.com/admin/administration.html#users"
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
className={classes.newButton}
disabled={!writable}
>
{t('New user')}
</Button>
<Button
variant="contained"
color="primary"
onClick={this.handleNavigation(domain.ID + '/ldap')}
className={classes.newButton}
disabled={!writable}
>
{t('Search in LDAP')}
</Button>
<Tooltip placement="top" title="Synchronize imported users for this domain">
<Button
variant="contained"
color="primary"
className={classes.newButton}
onClick={this.handleUserSync(false)}
disabled={!writable}
>
{t('Sync LDAP users')}
</Button>
</Tooltip>
<Tooltip
placement="top"
title="Import new users from LDAP for this domain and synchronize previously imported ones"
>
<Button
variant="contained"
color="primary"
className={classes.newButton}
onClick={this.handleUserSync(true)}
disabled={!writable}
>
{t('Import LDAP users')}
</Button>
</Tooltip>
<Tooltip
placement="top"
title="Check status of imported users of this domain"
>
<Button
variant="contained"
color="primary"
onClick={this.checkUsers}
disabled={!writable}
>
{t('Check LDAP users')}
</Button>
</Tooltip>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingUser", { count: users.Users.length })}
</Typography>
<Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel
active={orderBy === 'username'}
align="left"
direction={orderBy === 'username' ? order : 'asc'}
onClick={handleRequestSort('username')}
color="primary"
sx={{
color: 'text.primary',
}}
>
{t('Username')}
</TableSortLabel>
</TableCell>
{this.columns.map(column =>
<TableCell key={column.value}>
{t(column.label)}
</TableCell>
)}
<TableCell padding="checkbox"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.Users.map((obj, idx) => {
const properties = obj.properties || {};
return (
<TableRow key={idx} hover onClick={handleEdit('/' + domain.ID + '/users/' + obj.ID)}>
<TableCell>{obj.username}</TableCell>
<TableCell>{properties.displayname}</TableCell>
<TableCell>{this.getStatus(obj.status)}</TableCell>
<TableCell>{this.getType(properties.displaytypeex)}</TableCell>
<TableCell>{obj.ldapID || ''}</TableCell>
<TableCell>{this.getMaxSizeFormatting(properties.storagequotalimit)}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
{(users.Users.length < users.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper>
<AddUser
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
domain={domain}
onClose={handleAddingClose}
/>
<DeleteUser
open={!!deleting}
onSuccess={handleDeleteSuccess}
onClose={handleDeleteClose}
onError={handleDeleteError}
domainID={domain.ID}
user={deleting}
/>
<CheckLdapDialog
open={checking}
onClose={this.handleCheckClose}
onError={handleDeleteError}
/>
<TaskCreated
message={taskMessage}
taskID={taskID}
onClose={this.handleTaskClose}
/>
</TableViewContainer>
);
}
Example #19
| Source File: index.js From neutron with Mozilla Public License 2.0 | 4 votes |
|
SectionSavedPassword = () => {
const [credentials, setCredentials] = useState([]);
const [revealPasswords, setRevealPasswords] = useState({});
const reloadCredentials = useCallback(() => {
getAllCredentialsAsync()
.then((_credentials) => {
setCredentials(_credentials);
})
.catch((err) => {
// eslint-disable-next-line no-console
console.log(err);
});
}, [setCredentials]);
useEffect(() => {
reloadCredentials();
}, [reloadCredentials]);
useEffect(() => {
ipcRenderer.removeAllListeners('password-credentials-added');
ipcRenderer.on('password-credentials-added', () => {
reloadCredentials();
});
return () => {
ipcRenderer.removeAllListeners('password-credentials-added');
};
}, [reloadCredentials]);
return (
<List disablePadding dense>
{credentials.length < 1 ? (
<ListItem disabled>
<ListItemText primary="Saved passwords will appear here." />
</ListItem>
) : (
<>
<ListItem>
<Table size="small" aria-label="Saved Passwords">
<TableHead>
<TableRow>
<TableCell>Website</TableCell>
<TableCell align="right">Username</TableCell>
<TableCell align="right">Password</TableCell>
<TableCell align="right" />
</TableRow>
</TableHead>
<TableBody>
{credentials.map((row) => {
const key = `${row.domain}-${row.username}`;
return (
<TableRow key={key}>
<TableCell component="th" scope="row">
{row.domain}
</TableCell>
<TableCell align="right">
<TextField
value={row.username}
margin="dense"
fullWidth
variant="outlined"
inputProps={{ 'aria-label': 'Username' }}
disabled
/>
</TableCell>
<TableCell align="right">
<FormControl variant="outlined">
<OutlinedInput
id="outlined-adornment-password"
type={revealPasswords[key] ? 'text' : 'password'}
defaultValue={row.password}
margin="dense"
endAdornment={(
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => {
setRevealPasswords({
...revealPasswords,
[key]: !revealPasswords[key],
});
}}
edge="end"
size="large"
>
{revealPasswords[key]
? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
</InputAdornment>
)}
inputProps={{ 'aria-label': 'Password' }}
fullWidth
onChange={(e) => {
const newPassword = e.target.value;
saveCredentialAsync(row.domain, row.username, newPassword, row.id)
.then(() => reloadCredentials())
.catch((err) => {
// eslint-disable-next-line no-console
console.log(err);
});
}}
/>
</FormControl>
</TableCell>
<TableCell align="right">
<Tooltip title="Remove">
<IconButton
aria-label="Remove"
size="small"
onClick={() => {
deleteCredentialAsync(row.id)
.then(() => reloadCredentials())
.catch((err) => {
// eslint-disable-next-line no-console
console.log(err);
});
}}
>
<ClearIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</ListItem>
<ListItem disabled>
<ListItemText primary={`Passwords are stored encrypted locally on disk with the master key stored securely in ${getKeytarVaultName()}.`} />
</ListItem>
</>
)}
</List>
);
}
Example #20
| Source File: Orgs.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, orgs, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Organizations")}
href="https://docs.grommunio.com/admin/administration.html#organizations"
subtitle={t("orgs_sub")}
snackbar={snackbar}
onSnackbarClose={clearSnackbar}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
disabled={!writable}
>
{t("New organization")}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search organizations")}
variant={"outlined"}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingOrgs", { count: orgs.Orgs.length })}
</Typography>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : "asc"}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
<TableCell padding="checkbox" />
</TableRow>
</TableHead>
<TableBody>
{orgs.Orgs.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/orgs/' + obj.ID)}>
<TableCell>{obj.name}</TableCell>
<TableCell>{obj.description}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error" />
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{orgs.Orgs.length < orgs.count && (
<Grid container justifyContent="center">
<CircularProgress
color="primary"
className={classes.circularProgress}
/>
</Grid>
)}
</Paper>
<AddOrg
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
onClose={handleAddingClose}
/>
<GeneralDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.name}
id={deleting.ID}
/>
</TableViewContainer>
);
}
Example #21
| Source File: MLists.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, mLists, domain, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Mail lists")}
subtitle={t('mlists_sub')}
href="https://docs.grommunio.com/admin/administration.html#mail-lists"
snackbar={snackbar}
onSnackbarClose={clearSnackbar}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
className={classes.newButton}
disabled={!writable}
>
{t('New mail list')}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingMLists", { count: mLists.MLists.length })}
</Typography>
<Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map(column =>
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : 'asc'}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
)}
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{mLists.MLists.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/' + domain.ID + '/mailLists/' + obj.ID)}>
<TableCell>{obj.listname}</TableCell>
<TableCell>{this.listTypes[obj.listType]}</TableCell>
<TableCell>{this.listPrivileges[obj.listPrivilege]}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(mLists.MLists.length < mLists.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper>
<AddMList
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
domain={domain}
onClose={handleAddingClose}
/>
<DomainDataDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.listname}
id={deleting.ID}
domainID={domain.ID}
/>
</TableViewContainer>
);
}
Example #22
| Source File: GlobalUsers.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, users, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
const { checking } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Users")}
subtitle={t("globalusers_sub")}
href="https://docs.grommunio.com/admin/administration.html#users"
snackbar={snackbar}
onSnackbarClose={clearSnackbar}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
className={classes.newButton}
disabled={!writable}
>
{t('New user')}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingUser", { count: users.Users.length })}
</Typography>
<Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel
active={orderBy === 'username'}
align="left"
direction={orderBy === 'username' ? order : 'asc'}
onClick={handleRequestSort('username')}
>
{t('Username')}
</TableSortLabel>
</TableCell>
{this.columns.map(column =>
<TableCell key={column.value}>
{t(column.label)}
</TableCell>
)}
<TableCell padding="checkbox"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.Users.map((obj, idx) => {
return (
<TableRow key={idx} hover onClick={handleEdit('/' + obj.domainID + '/users/' + obj.ID)}>
<TableCell>{obj.username}</TableCell>
<TableCell>{obj.ldapID || ''}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
{(users.Users.length < users.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper>
<AddGlobalUser
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
onClose={handleAddingClose}
/>
<DeleteUser
open={!!deleting}
onSuccess={handleDeleteSuccess}
onClose={handleDeleteClose}
onError={handleDeleteError}
user={deleting}
domainID={deleting.domainID || -1}
/>
<CheckLdapDialog
open={checking}
onClose={this.handleCheckClose}
onError={handleDeleteError}
/>
</TableViewContainer>
);
}
Example #23
| Source File: Domains.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, domains, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { showDeleted } = this.state;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
const filteredDomains = domains.Domains.filter(d => d.domainStatus !== 3 || showDeleted);
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Domains")}
subtitle={t('domains_sub')}
snackbar={snackbar}
href="https://docs.grommunio.com/admin/administration.html#domains"
onSnackbarClose={clearSnackbar}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
disabled={!writable}
>
{t("New domain")}
</Button>
<div className={classes.actions}>
<FormControlLabel
label={t("Show deactivated")}
control={
<Checkbox
checked={showDeleted || false}
onChange={this.handleCheckbox("showDeleted")}
/>
}
/>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant={"outlined"}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Typography className={classes.count} color="textPrimary">
{t("showingDomains", { count: filteredDomains.length })}
</Typography>
<Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map((column) => (
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : "asc"}
onClick={handleRequestSort(column.value)}
disabled={column.value === 'activeUsers'}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
))}
<TableCell padding="checkbox" />
</TableRow>
</TableHead>
<TableBody>
{filteredDomains.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit("/domains/" + obj.ID)}>
<TableCell>
{obj.domainname}{obj.domainname !== obj.displayname ? ` (${obj.displayname}) ` : " "}
{obj.domainStatus === 3 ? `[${t("Deactivated")}]` : ""}
</TableCell>
<TableCell>{obj.address}</TableCell>
<TableCell>{obj.title}</TableCell>
<TableCell>{obj.activeUsers}</TableCell>
<TableCell>{obj.maxUser}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error" />
</IconButton>}
</TableCell>
</TableRow>)
}
</TableBody>
</Table>
{domains.Domains.length < domains.count && (
<Grid container justifyContent="center">
<CircularProgress
color="primary"
className={classes.circularProgress}
/>
</Grid>
)}
</Paper>
<AddDomain
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
onClose={handleAddingClose}
/>
<DeleteDomain
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.domainname}
id={deleting.ID}
/>
</TableViewContainer>
);
}
Example #24
| Source File: DBConf.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, services, commands } = this.props;
const { adding, configuring, snackbar, match, tab, deleting } = this.state;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<TableViewContainer
headline={t("Configuration DB")}
href="https://docs.grommunio.com/admin/administration.html#db-configuration"
subtitle={t('dbconf_sub')}
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={() => this.setState({ adding: true })}
disabled={!writable}
>
{t("Create file")}
</Button>
<Button
variant="contained"
color="primary"
onClick={() => this.setState({ configuring: true })}
className={classes.button}
disabled={!writable}
>
{t("Configure grommunio-dbconf")}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={this.handleMatch}
placeholder={t("search services")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Tabs
textColor="primary"
indicatorColor="primary"
value={tab}
onChange={this.handleTab}
>
<Tab value={0} label="Services" />
<Tab value={1} label="Commands" />
</Tabs>
</Grid>
{tab === 0 ? <Paper elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>
{t('Name')}
</TableCell>
<TableCell padding="checkbox"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{services.filter(s => s.includes(match)).map((service, idx) =>
<TableRow onClick={this.handleNavigation('dbconf/' + service)} key={idx} hover>
<TableCell>{service}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={this.handleDelete(service)} size="large">
<Delete color="error" />
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</Paper> : <Paper className={classes.paper}>
<Typography variant="h6">Key</Typography>
{commands.key.length > 0 ? commands.key.map((key, idx) =>
<pre className={classes.pre} key={idx}>
<code key={idx}>{key}</code>
</pre>
) : <Typography><i>none</i></Typography>}
<Typography className={classes.title} variant="h6">File</Typography>
{commands.file.length > 0 ? commands.file.map((key, idx) =>
<pre className={classes.pre} key={idx}>
<code>{key}</code>
</pre>
) : <Typography><i>none</i></Typography>}
<Typography className={classes.title} variant="h6">Service</Typography>
{commands.service.length > 0 ? commands.service.map((key, idx) =>
<pre className={classes.pre} key={idx}>
<code>{key}</code>
</pre>
) : <Typography><i>none</i></Typography>}
</Paper>}
<GeneralDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={this.handleDeleteSuccess}
onError={this.handleDeleteError}
onClose={this.handleDeleteClose}
item={deleting}
id={deleting}
/>
<UploadServiceFile
open={adding}
onClose={this.handleAddingClose}
onError={this.handleAddingError}
onSuccess={this.handleAddingSuccess}
/>
<CreateDbconfFile
open={configuring}
onClose={this.handleAddingClose}
onError={this.handleAddingError}
onSuccess={this.handleAddingSuccess}
/>
</TableViewContainer>
);
}
Example #25
| Source File: Classes.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, _classes, domain, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
const { tab, root } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Groups")}
subtitle={t("groups_sub")}
href="https://docs.grommunio.com/admin/administration.html#groups"
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
baseRef={tc => (this.treeContainer = tc)}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
className={classes.newButton}
disabled={!writable}
>
{t('New group')}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Tabs
indicatorColor="primary"
textColor="primary"
className={classes.tabs}
onChange={this.handleTab}
value={tab}
>
<Tab value={0} label={t("List")} />
<Tab value={1} label={t("Tree")} />
</Tabs>
{!tab && <Typography className={classes.count} color="textPrimary">
{t("showingGroups", { count: _classes.Classes.length })}
</Typography>}
{!tab ? <Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map(column =>
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : 'asc'}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
)}
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{_classes.Classes.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/' + domain.ID + '/classes/' + obj.ID)}>
<TableCell>{obj.classname}</TableCell>
<TableCell>{obj.listname}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(_classes.Classes.length < _classes.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper> :
<>
<FormControl className={classes.select}>
<InputLabel variant="standard">{t("Root group")}</InputLabel>
<Select
fullWidth
value={root > -1 ? root : ''}
onChange={this.handleRootSelect}
input={<Input />}
placeholder={t('Select root group')}
>
{_classes.Trees.map((tree, idx) => (
<MenuItem key={idx} value={idx}>
{tree.name}
</MenuItem>
))}
</Select>
</FormControl>
<div className={classes.treeContainer}>
{root !== -1 &&
<Paper style={{ flex: 1 }}>
<Tree
data={_classes.Trees[root]}
orientation="vertical"
renderCustomNodeElement={this.renderNode}
depthFactor={50}
pathFunc="step"
translate={this.getOffset()}
scaleExtent={{
min: 0.1,
max: 2,
}}
separation={{
siblings: 1,
nonSiblings: 2,
}}
onNodeClick={this.handleNodeClicked}
collapsible={false}
/>
</Paper>}
</div>
</>
}
<AddClass
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
domain={domain}
onClose={handleAddingClose}
/>
<DomainDataDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.name}
id={deleting.ID}
domainID={domain.ID}
/>
</TableViewContainer>
);
}
Example #26
| Source File: ServicesChart.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, Services, t } = this.props;
const { starting, restarting, stoping, snackbar, service, action } = this.state;
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>
{"Service"}
</TableCell>
<TableCell align="center" style={{ width: 124 }}>
{"State | Autostart"}
</TableCell>
<TableCell align="center" style={{ width: 132 }}>
{"Actions"}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Services.map((service, idx) => (
<TableRow key={idx} hover style={{cursor: "default"}}>
<TableCell>
<Tooltip
title={service.description ? <>
<Typography>{service.description}</Typography>
<Typography variant="caption">
{service.since ? `${t('since')} ${setDateTimeString(service.since)}` : ''}
</Typography>
</> : ''}
placement="top"
>
<Typography className={classes.serviceName}>
{service.name}
</Typography>
</Tooltip>
</TableCell>
<TableCell>
<Grid container justifyContent="center">
<div
style={{ marginRight: 4 }}
className={classes.label + " " + this.getChipColor(service.state)}
>
{service.state}
</div>
<div className={classes.label + " " +
this.getChipColor(service.autostart === "enabled" ? "active" : "error")}>
{service.autostart || 'error'}
</div>
</Grid>
</TableCell>
<TableCell align="right">
<Tooltip title={t("Enable/Disable")} placement="top">
<IconButton
onClick={this.handleServiceAction(service, service.autostart === "enabled" ?
"disable" : "enable")}
className={classes.chipIcon}
size="large">
<Enable className={classes.iconButton} fontSize="small" />
</IconButton>
</Tooltip>
{stoping !== service.name ? (
<Tooltip title={t("Stop")} placement="top">
<IconButton
onClick={this.handleDialog(service, "stop")}
className={classes.chipIcon}
size="large">
<Stop className={classes.iconButton} fontSize="small" />
</IconButton>
</Tooltip>
) : (
<IconButton className={classes.chipIcon} size="large">
<CircularProgress size={18} />
</IconButton>
)}
{restarting !== service.name ? (
<Tooltip title={t("Restart")}placement="top">
<IconButton
onClick={this.handleDialog(service, "restart")}
className={classes.chipIcon}
size="large">
<Restart
className={classes.iconButton}
fontSize="small"
/>
</IconButton>
</Tooltip>
) : (
<IconButton className={classes.chipIcon} size="large">
<CircularProgress size={18} />
</IconButton>
)}
{starting !== service.name ? (
<Tooltip title={t("Start")} placement="top">
<IconButton
onClick={this.handleServiceAction(service, "start")}
className={classes.chipIcon}
size="large">
<Start className={classes.iconButton} fontSize="small" />
</IconButton>
</Tooltip>
) : (
<IconButton className={classes.chipIcon} size="large">
<CircularProgress size={18} />
</IconButton>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
<ConfirmRestartStop
open={!!service}
handleConfirm={this.handleServiceAction(service, action)}
onClose={this.handleCloseDialog}
service={service}
action={action}
/>
<Feedback
snackbar={snackbar}
onClose={() => this.setState({ snackbar: "" })}
/>
</div>
);
}
Example #27
| Source File: User.js From Django-REST-Framework-React-BoilerPlate with MIT License | 4 votes |
|
export default function User() {
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
const listUser = useSelector((state) => state.listUser);
const { loading, error, USERLIST } = listUser;
const [page, setPage] = useState(0);
const [order, setOrder] = useState('asc');
const [selected, setSelected] = useState([]);
const [orderBy, setOrderBy] = useState('name');
const [filterName, setFilterName] = useState('');
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = USERLIST.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
}
setSelected(newSelected);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const handleFilterByName = (event) => {
setFilterName(event.target.value);
};
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - USERLIST.length) : 0;
const filteredUsers = applySortFilter(USERLIST, getComparator(order, orderBy), filterName);
const isUserNotFound = filteredUsers.length === 0;
return (
<Page title="User">
<Container>
{userInfo ? <UsersListCall /> : null}
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h4" gutterBottom>
User
</Typography>
<Button variant="contained" component={RouterLink} to="#" startIcon={<Iconify icon="eva:plus-fill" />}>
New User
</Button>
</Stack>
<Card>
<UserListToolbar numSelected={selected.length} filterName={filterName} onFilterName={handleFilterByName} />
{error ? (
<Alert severity="error">
<AlertTitle>List Loading Error</AlertTitle>
{error}
</Alert>
) : null}
{loading ? (
<Box sx={{ width: '100%' }}>
<LinearProgress />
</Box>
) : null}
<Scrollbar>
<TableContainer sx={{ minWidth: 800 }}>
<Table>
<UserListHead
order={order}
orderBy={orderBy}
headLabel={TABLE_HEAD}
rowCount={USERLIST.length}
numSelected={selected.length}
onRequestSort={handleRequestSort}
onSelectAllClick={handleSelectAllClick}
/>
<TableBody>
{filteredUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
const { id, name, role, status, company, avatarUrl, isVerified } = row;
const isItemSelected = selected.indexOf(name) !== -1;
return (
<TableRow
hover
key={id}
tabIndex={-1}
role="checkbox"
selected={isItemSelected}
aria-checked={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isItemSelected} onChange={(event) => handleClick(event, name)} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
<Stack direction="row" alignItems="center" spacing={2}>
<Avatar alt={name} src={avatarUrl} />
<Typography variant="subtitle2" noWrap>
{name}
</Typography>
</Stack>
</TableCell>
<TableCell align="left">{company}</TableCell>
<TableCell align="left">{role}</TableCell>
<TableCell align="left">{isVerified ? 'Yes' : 'No'}</TableCell>
<TableCell align="left">
<Label variant="ghost" color={(status === 'banned' && 'error') || 'success'}>
{sentenceCase(status)}
</Label>
</TableCell>
<TableCell align="right">
<UserMoreMenu />
</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
{isUserNotFound && (
<TableBody>
<TableRow>
<TableCell align="center" colSpan={6} sx={{ py: 3 }}>
<SearchNotFound searchQuery={filterName} />
</TableCell>
</TableRow>
</TableBody>
)}
</Table>
</TableContainer>
</Scrollbar>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={USERLIST.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Card>
</Container>
</Page>
);
}
Example #28
| Source File: SubscriptionTable.js From react-saas-template with MIT License | 4 votes |
|
function SubscriptionTable(props) {
const { transactions, theme, classes } = props;
const [page, setPage] = useState(0);
const handleChangePage = useCallback(
(_, page) => {
setPage(page);
},
[setPage]
);
if (transactions.length > 0) {
return (
<div className={classes.tableWrapper}>
<Table aria-labelledby="tableTitle">
<EnhancedTableHead rowCount={transactions.length} rows={rows} />
<TableBody>
{transactions
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((transaction, index) => (
<TableRow hover tabIndex={-1} key={index}>
<TableCell
component="th"
scope="row"
className={classes.firstData}
>
{transaction.description}
</TableCell>
<TableCell component="th" scope="row">
{transaction.balanceChange > 0 ? (
<ColorfulChip
label={`+${currencyPrettyPrint(
transaction.balanceChange
)}`}
color={theme.palette.secondary.main}
/>
) : (
<ColorfulChip
label={currencyPrettyPrint(transaction.balanceChange)}
color={theme.palette.error.dark}
/>
)}
</TableCell>
<TableCell component="th" scope="row">
{unixToDateString(transaction.timestamp)}
</TableCell>
<TableCell component="th" scope="row">
{transaction.paidUntil
? unixToDateString(transaction.paidUntil)
: ""}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
component="div"
count={transactions.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
"aria-label": "Previous Page"
}}
nextIconButtonProps={{
"aria-label": "Next Page"
}}
onPageChange={handleChangePage}
classes={{
select: classes.dNone,
selectIcon: classes.dNone,
actions: transactions.length > 0 ? classes.dBlock : classes.dNone,
caption: transactions.length > 0 ? classes.dBlock : classes.dNone
}}
labelRowsPerPage=""
/>
</div>
);
}
return (
<div className={classes.contentWrapper}>
<HighlightedInformation>
No transactions received yet.
</HighlightedInformation>
</div>
);
}
Example #29
| Source File: UserDataArea.js From react-saas-template with MIT License | 4 votes |
|
function CustomTable(props) {
const { pushMessageToSnackbar, classes, targets, setTargets } = props;
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState(null);
const [page, setPage] = useState(0);
const [isDeleteTargetDialogOpen, setIsDeleteTargetDialogOpen] = useState(
false
);
const [deleteTargetDialogRow, setDeleteTargetDialogRow] = useState(null);
const [isDeleteTargetLoading, setIsDeleteTargetLoading] = useState(false);
const handleRequestSort = useCallback(
(__, property) => {
const _orderBy = property;
let _order = "desc";
if (orderBy === property && order === "desc") {
_order = "asc";
}
setOrder(_order);
setOrderBy(_orderBy);
},
[setOrder, setOrderBy, order, orderBy]
);
const deleteTarget = useCallback(() => {
setIsDeleteTargetLoading(true);
setTimeout(() => {
setIsDeleteTargetDialogOpen(false);
setIsDeleteTargetLoading(false);
const _targets = [...targets];
const index = _targets.findIndex(
(element) => element.id === deleteTargetDialogRow.id
);
_targets.splice(index, 1);
setTargets(_targets);
pushMessageToSnackbar({
text: "Your friend has been removed",
});
}, 1500);
}, [
setIsDeleteTargetDialogOpen,
setIsDeleteTargetLoading,
pushMessageToSnackbar,
setTargets,
deleteTargetDialogRow,
targets,
]);
const handleChangePage = useCallback(
(_, page) => {
setPage(page);
},
[setPage]
);
const handleDeleteTargetDialogClose = useCallback(() => {
setIsDeleteTargetDialogOpen(false);
}, [setIsDeleteTargetDialogOpen]);
const handleDeleteTargetDialogOpen = useCallback(
(row) => {
setIsDeleteTargetDialogOpen(true);
setDeleteTargetDialogRow(row);
},
[setIsDeleteTargetDialogOpen, setDeleteTargetDialogRow]
);
const toggleTarget = useCallback(
(row) => {
const _targets = [...targets];
const index = _targets.findIndex((element) => element.id === row.id);
row.isActivated = !row.isActivated;
_targets[index] = row;
if (row.isActivated) {
pushMessageToSnackbar({
text: "The row is now activated",
});
} else {
pushMessageToSnackbar({
text: "The row is now deactivated",
});
}
setTargets(_targets);
},
[pushMessageToSnackbar, targets, setTargets]
);
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Some user data</Typography>
</AccordionSummary>
<ConfirmationDialog
open={isDeleteTargetDialogOpen}
title="Confirmation"
content={
deleteTargetDialogRow ? (
<span>
{"Do you really want to remove the friend "}
<b>{deleteTargetDialogRow.name}</b>
{" from your list?"}
</span>
) : null
}
onClose={handleDeleteTargetDialogClose}
onConfirm={deleteTarget}
loading={isDeleteTargetLoading}
/>
<Box width="100%">
<div className={classes.tableWrapper}>
{targets.length > 0 ? (
<Table aria-labelledby="tableTitle">
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={targets.length}
rows={rows}
/>
<TableBody>
{stableSort(targets, getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => (
<TableRow hover tabIndex={-1} key={index}>
<TableCell
component="th"
scope="row"
className={classes.firstData}
>
<Avatar
className={classes.avatar}
src={row.profilePicUrl}
/>
</TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell component="th" scope="row">
{row.number1}
</TableCell>
<TableCell component="th" scope="row">
{row.number2}
</TableCell>
<TableCell component="th" scope="row">
{row.number3}
</TableCell>
<TableCell component="th" scope="row">
{row.number4}
</TableCell>
<TableCell component="th" scope="row">
<Box display="flex" justifyContent="flex-end">
{row.isActivated ? (
<IconButton
className={classes.iconButton}
onClick={() => {
toggleTarget(row);
}}
aria-label="Pause"
size="large">
<PauseCircleOutlineIcon
className={classes.blackIcon}
/>
</IconButton>
) : (
<IconButton
className={classes.iconButton}
color="primary"
onClick={() => {
toggleTarget(row);
}}
aria-label="Resume"
size="large">
<PlayCirlceOutlineIcon />
</IconButton>
)}
<IconButton
className={classes.iconButton}
onClick={() => {
handleDeleteTargetDialogOpen(row);
}}
aria-label="Delete"
size="large">
<DeleteIcon className={classes.blackIcon} />
</IconButton>
</Box>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<Box m={2}>
<HighlightedInformation>
No friends added yet.
</HighlightedInformation>
</Box>
)}
</div>
<div className={classes.alignRight}>
<TablePagination
component="div"
count={targets.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
"aria-label": "Previous Page",
}}
nextIconButtonProps={{
"aria-label": "Next Page",
}}
onPageChange={handleChangePage}
classes={{
select: classes.dNone,
selectIcon: classes.dNone,
actions: targets.length > 0 ? classes.dBlock : classes.dNone,
caption: targets.length > 0 ? classes.dBlock : classes.dNone,
}}
labelRowsPerPage=""
/>
</div>
</Box>
</Accordion>
);
}
