Make DHCP hosts reservation be full width

This commit is contained in:
Pierre HUBERT 2024-01-09 18:28:26 +01:00
parent e86b29c03a
commit 71e22bc328
3 changed files with 26 additions and 18 deletions

View File

@ -2,10 +2,14 @@ import { Grid, Paper, Typography } from "@mui/material";
import React, { PropsWithChildren } from "react";
export function EditSection(
p: { title?: string; actions?: React.ReactElement } & PropsWithChildren
p: {
title?: string;
actions?: React.ReactElement;
fullWidth?: boolean;
} & PropsWithChildren
): React.ReactElement {
return (
<Grid item sm={12} md={6}>
<Grid item sm={12} md={p.fullWidth ? 12 : 6}>
<Paper style={{ margin: "10px", padding: "10px" }}>
{(p.title || p.actions) && (
<span

View File

@ -4,6 +4,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
import {
Avatar,
Button,
Grid,
IconButton,
ListItem,
ListItemAvatar,
@ -35,7 +36,9 @@ export function NetDHCPHostReservations(p: {
return (
<>
<Grid container>
{p.dhcp.hosts.map((h, num) => (
<Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
<HostReservationWidget
key={num}
{...p}
@ -48,8 +51,9 @@ export function NetDHCPHostReservations(p: {
p.onChange?.(p.dhcp);
}}
/>
</Grid>
))}
</Grid>
{p.editable && (
<Button onClick={addHost}>Add new host reservation</Button>
)}

View File

@ -373,7 +373,7 @@ function IPSection(p: {
)}
{p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
<EditSection title="DHCP hosts reservations">
<EditSection title="DHCP hosts reservations" fullWidth>
<NetDHCPHostReservations
{...p}
dhcp={p.config.dhcp}