go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-02-23 12:20:12 +08:00
Code Issues Projects Releases Wiki Activity

(ui): Add empty group UI

Browse Source
This commit is contained in:
Ken Hibino 2022-04-01 10:54:39 -07:00
parent c8d7da05eb
commit 5d9e4aec9c
1 changed files with 166 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
ui/src/components/AggregatingTasksTable.tsx
View File

@ -249,160 +249,175 @@ function AggregatingTasksTable(
error={props.groupsError} error={props.groupsError}
/> />
</div> </div>
{!window.READ_ONLY && ( {props.tasks.length > 0 && selectedGroup !== null ? (
<TableActions <>
showIconButtons={numSelected > 0} {!window.READ_ONLY && (
iconButtonActions={[ <TableActions
{ showIconButtons={numSelected > 0}
tooltip: "Delete", iconButtonActions={[
icon: <DeleteIcon />, {
onClick: handleBatchDeleteClick, tooltip: "Delete",
disabled: props.batchActionPending, icon: <DeleteIcon />,
}, onClick: handleBatchDeleteClick,
{ disabled: props.batchActionPending,
tooltip: "Archive", },
icon: <ArchiveIcon />, {
onClick: handleBatchArchiveClick, tooltip: "Archive",
disabled: props.batchActionPending, icon: <ArchiveIcon />,
}, onClick: handleBatchArchiveClick,
{ disabled: props.batchActionPending,
tooltip: "Run", },
icon: <PlayArrowIcon />, {
onClick: handleBatchRunClick, tooltip: "Run",
disabled: props.batchActionPending, icon: <PlayArrowIcon />,
}, onClick: handleBatchRunClick,
]} disabled: props.batchActionPending,
menuItemActions={[ },
{ ]}
label: "Delete All", menuItemActions={[
onClick: handleDeleteAllClick, {
disabled: props.allActionPending, label: "Delete All",
}, onClick: handleDeleteAllClick,
{ disabled: props.allActionPending,
label: "Archive All", },
onClick: handleArchiveAllClick, {
disabled: props.allActionPending, label: "Archive All",
}, onClick: handleArchiveAllClick,
{ disabled: props.allActionPending,
label: "Run All", },
onClick: handleRunAllClick, {
disabled: props.allActionPending, label: "Run All",
}, onClick: handleRunAllClick,
]} disabled: props.allActionPending,
/> },
)} ]}
<TableContainer component={Paper}> />
<Table )}
stickyHeader={true} <TableContainer component={Paper}>
className={classes.table} <Table
aria-label="pending tasks table" stickyHeader={true}
size="small" className={classes.table}
> aria-label="pending tasks table"
<TableHead> size="small"
<TableRow> >
{!window.READ_ONLY && ( <TableHead>
<TableCell <TableRow>
padding="checkbox" {!window.READ_ONLY && (
classes={{ stickyHeader: classes.stickyHeaderCell }} <TableCell
> padding="checkbox"
<IconButton> classes={{ stickyHeader: classes.stickyHeaderCell }}
<Checkbox >
indeterminate={numSelected > 0 && numSelected < rowCount} <IconButton>
checked={rowCount > 0 && numSelected === rowCount} <Checkbox
onChange={handleSelectAllClick} indeterminate={
inputProps={{ numSelected > 0 && numSelected < rowCount
"aria-label": "select all tasks shown in the table", }
checked={rowCount > 0 && numSelected === rowCount}
onChange={handleSelectAllClick}
inputProps={{
"aria-label": "select all tasks shown in the table",
}}
/>
</IconButton>
</TableCell>
)}
{columns
.filter((col) => {
// Filter out actions column in readonly mode.
return !window.READ_ONLY || col.key !== "actions";
})
.map((col) => (
<TableCell
key={col.key}
align={col.align}
classes={{
stickyHeader: classes.stickyHeaderCell,
}}
>
{col.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{props.group === selectedGroup.group &&
props.tasks.map((task) => (
<Row
key={task.id}
task={task}
isSelected={selectedIds.includes(task.id)}
onSelectChange={(checked: boolean) => {
if (checked) {
setSelectedIds(selectedIds.concat(task.id));
} else {
setSelectedIds(
selectedIds.filter((id) => id !== task.id)
);
}
}} }}
allActionPending={props.allActionPending}
onDeleteClick={() => {
if (selectedGroup === null) return;
props.deleteAggregatingTaskAsync(
queue,
selectedGroup.group,
task.id
);
}}
onArchiveClick={() => {
if (selectedGroup === null) return;
props.archiveAggregatingTaskAsync(
queue,
selectedGroup.group,
task.id
);
}}
onRunClick={() => {
if (selectedGroup === null) return;
props.runAggregatingTaskAsync(
queue,
selectedGroup.group,
task.id
);
}}
onActionCellEnter={() => setActiveTaskId(task.id)}
onActionCellLeave={() => setActiveTaskId("")}
showActions={activeTaskId === task.id}
/> />
</IconButton> ))}
</TableCell> </TableBody>
)} <TableFooter>
{columns <TableRow>
.filter((col) => { <TablePagination
// Filter out actions column in readonly mode. rowsPerPageOptions={rowsPerPageOptions}
return !window.READ_ONLY || col.key !== "actions"; colSpan={columns.length + 1}
}) count={selectedGroup === null ? 0 : selectedGroup.size}
.map((col) => ( rowsPerPage={pageSize}
<TableCell page={page}
key={col.key} SelectProps={{
align={col.align} inputProps: { "aria-label": "rows per page" },
classes={{ native: true,
stickyHeader: classes.stickyHeaderCell,
}} }}
> onPageChange={handlePageChange}
{col.label} onRowsPerPageChange={handleRowsPerPageChange}
</TableCell> ActionsComponent={TablePaginationActions}
))} className={classes.pagination}
</TableRow> />
</TableHead> </TableRow>
<TableBody> </TableFooter>
{props.group === selectedGroup?.group && </Table>
props.tasks.map((task) => ( </TableContainer>
<Row </>
key={task.id} ) : (
task={task} <Alert severity="info" className={classes.alert}>
isSelected={selectedIds.includes(task.id)} <AlertTitle>Info</AlertTitle>
onSelectChange={(checked: boolean) => { {selectedGroup === null ? (
if (checked) { <div>Please select group</div>
setSelectedIds(selectedIds.concat(task.id)); ) : (
} else { <div>Group {selectedGroup.group} is empty</div>
setSelectedIds( )}
selectedIds.filter((id) => id !== task.id) </Alert>
); )}
}
}}
allActionPending={props.allActionPending}
onDeleteClick={() => {
if (selectedGroup === null) return;
props.deleteAggregatingTaskAsync(
queue,
selectedGroup.group,
task.id
);
}}
onArchiveClick={() => {
if (selectedGroup === null) return;
props.archiveAggregatingTaskAsync(
queue,
selectedGroup.group,
task.id
);
}}
onRunClick={() => {
if (selectedGroup === null) return;
props.runAggregatingTaskAsync(
queue,
selectedGroup.group,
task.id
);
}}
onActionCellEnter={() => setActiveTaskId(task.id)}
onActionCellLeave={() => setActiveTaskId("")}
showActions={activeTaskId === task.id}
/>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={rowsPerPageOptions}
colSpan={columns.length + 1}
count={selectedGroup === null ? 0 : selectedGroup.size}
rowsPerPage={pageSize}
page={page}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onPageChange={handlePageChange}
onRowsPerPageChange={handleRowsPerPageChange}
ActionsComponent={TablePaginationActions}
className={classes.pagination}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</div> </div>
); );
} }