yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: display overlay when no machines available

Browse Source
This commit is contained in:
DavHau
2023-11-18 16:27:37 +07:00
parent 2a1ba99376
commit ea967670eb
3 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/ui/.envrc
View File

@@ -2,7 +2,7 @@
source_up source_up
files=(flake-module.nix package.json package-lock.json) files=(../../flake.nix ../theme default.nix flake-module.nix package.json package-lock.json)
if type nix_direnv_watch_file &>/dev/null; then if type nix_direnv_watch_file &>/dev/null; then
nix_direnv_watch_file "${files[@]}" nix_direnv_watch_file "${files[@]}"
else else

2
pkgs/ui/src/components/noDataOverlay/index.tsx
View File

@@ -75,7 +75,7 @@ export function NoDataOverlay(props: NoDataOverlayProps) {
</g> </g>
</g> </g>
</svg> </svg>
<Box sx={{ mt: 1 }}>{label}</Box> <Box sx={{ mt: 1, textAlign: "center" }}>{label}</Box>
</StyledGridOverlay> </StyledGridOverlay>
); );
} }

65
pkgs/ui/src/components/table/nodeTableContainer.tsx
View File

@@ -13,6 +13,7 @@ import { visuallyHidden } from "@mui/utils";
import { NodeRow } from "./nodeRow"; import { NodeRow } from "./nodeRow";
import { Machine } from "@/api/model/machine"; import { Machine } from "@/api/model/machine";
import { NoDataOverlay } from "../noDataOverlay";
interface HeadCell { interface HeadCell {
disablePadding: boolean; disablePadding: boolean;
@@ -163,35 +164,41 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
); );
return ( return (
<TableContainer> <TableContainer>
<Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}> {tableData.length === 0 ? (
<EnhancedTableHead <div className="my-8 flex w-full items-center justify-center">
order={order} <NoDataOverlay label={"No Machines"} />
orderBy={orderBy} </div>
onRequestSort={handleRequestSort} ) : (
rowCount={tableData.length} <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
/> <EnhancedTableHead
<TableBody> order={order}
{visibleRows.map((row, index) => { orderBy={orderBy}
return ( onRequestSort={handleRequestSort}
<NodeRow rowCount={tableData.length}
key={index} />
row={row} <TableBody>
selected={selected} {visibleRows.map((row, index) => {
setSelected={setSelected} return (
/> <NodeRow
); key={index}
})} row={row}
{emptyRows > 0 && ( selected={selected}
<TableRow setSelected={setSelected}
style={{ />
height: (dense ? 33 : 53) * emptyRows, );
}} })}
> {emptyRows > 0 && (
<TableCell colSpan={6} /> <TableRow
</TableRow> style={{
)} height: (dense ? 33 : 53) * emptyRows,
</TableBody> }}
</Table> >
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
)}
</TableContainer> </TableContainer>
); );
} }