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

Wrap Checkbox with IconButton

Browse Source
This commit is contained in:
Ken Hibino
2021-07-13 19:00:29 -07:00
parent 9ec399926b
commit f9d9166248
5 changed files with 90 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/ActiveTasksTable.tsx
View File

@@ -191,6 +191,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
padding="checkbox" padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }} classes={{ stickyHeader: classes.stickyHeaderCell }}
> >
<IconButton>
<Checkbox <Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount} indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount} checked={rowCount > 0 && numSelected === rowCount}
@@ -199,6 +200,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
"aria-label": "select all tasks shown in the table", "aria-label": "select all tasks shown in the table",
}} }}
/> />
</IconButton>
</TableCell> </TableCell>
{columns.map((col) => ( {columns.map((col) => (
<TableCell <TableCell
@@ -293,12 +295,14 @@ function Row(props: RowProps) {
onClick={() => history.push(taskDetailsPath(task.queue, task.id))} onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
> >
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}> <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox <Checkbox
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
props.onSelectChange(event.target.checked) props.onSelectChange(event.target.checked)
} }
checked={props.isSelected} checked={props.isSelected}
/> />
</IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

4
ui/src/components/ArchivedTasksTable.tsx
View File

@@ -218,6 +218,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
padding="checkbox" padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }} classes={{ stickyHeader: classes.stickyHeaderCell }}
> >
<IconButton>
<Checkbox <Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount} indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount} checked={rowCount > 0 && numSelected === rowCount}
@@ -226,6 +227,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
"aria-label": "select all tasks shown in the table", "aria-label": "select all tasks shown in the table",
}} }}
/> />
</IconButton>
</TableCell> </TableCell>
{columns.map((col) => ( {columns.map((col) => (
<TableCell <TableCell
@@ -332,12 +334,14 @@ function Row(props: RowProps) {
onClick={() => history.push(taskDetailsPath(task.queue, task.id))} onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
> >
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}> <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox <Checkbox
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
props.onSelectChange(event.target.checked) props.onSelectChange(event.target.checked)
} }
checked={props.isSelected} checked={props.isSelected}
/> />
</IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

4
ui/src/components/PendingTasksTable.tsx
View File

@@ -218,6 +218,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
padding="checkbox" padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }} classes={{ stickyHeader: classes.stickyHeaderCell }}
> >
<IconButton>
<Checkbox <Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount} indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount} checked={rowCount > 0 && numSelected === rowCount}
@@ -226,6 +227,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
"aria-label": "select all tasks shown in the table", "aria-label": "select all tasks shown in the table",
}} }}
/> />
</IconButton>
</TableCell> </TableCell>
{columns.map((col) => ( {columns.map((col) => (
<TableCell <TableCell
@@ -334,12 +336,14 @@ function Row(props: RowProps) {
onClick={() => history.push(taskDetailsPath(task.queue, task.id))} onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
> >
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}> <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox <Checkbox
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
props.onSelectChange(event.target.checked) props.onSelectChange(event.target.checked)
} }
checked={props.isSelected} checked={props.isSelected}
/> />
</IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

4
ui/src/components/RetryTasksTable.tsx
View File

@@ -248,6 +248,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
padding="checkbox" padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }} classes={{ stickyHeader: classes.stickyHeaderCell }}
> >
<IconButton>
<Checkbox <Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount} indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount} checked={rowCount > 0 && numSelected === rowCount}
@@ -256,6 +257,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
"aria-label": "select all tasks shown in the table", "aria-label": "select all tasks shown in the table",
}} }}
/> />
</IconButton>
</TableCell> </TableCell>
{columns.map((col) => ( {columns.map((col) => (
<TableCell <TableCell
@@ -367,12 +369,14 @@ function Row(props: RowProps) {
onClick={() => history.push(taskDetailsPath(task.queue, task.id))} onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
> >
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}> <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox <Checkbox
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
props.onSelectChange(event.target.checked) props.onSelectChange(event.target.checked)
} }
checked={props.isSelected} checked={props.isSelected}
/> />
</IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

4
ui/src/components/ScheduledTasksTable.tsx
View File

@@ -245,6 +245,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
padding="checkbox" padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }} classes={{ stickyHeader: classes.stickyHeaderCell }}
> >
<IconButton>
<Checkbox <Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount} indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount} checked={rowCount > 0 && numSelected === rowCount}
@@ -253,6 +254,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
"aria-label": "select all tasks shown in the table", "aria-label": "select all tasks shown in the table",
}} }}
/> />
</IconButton>
</TableCell> </TableCell>
{columns.map((col) => ( {columns.map((col) => (
<TableCell <TableCell
@@ -363,12 +365,14 @@ function Row(props: RowProps) {
onClick={() => history.push(taskDetailsPath(task.queue, task.id))} onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
> >
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}> <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox <Checkbox
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
props.onSelectChange(event.target.checked) props.onSelectChange(event.target.checked)
} }
checked={props.isSelected} checked={props.isSelected}
/> />
</IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}