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"; import React, { PropsWithChildren } from "react";
export function EditSection( export function EditSection(
p: { title?: string; actions?: React.ReactElement } & PropsWithChildren p: {
title?: string;
actions?: React.ReactElement;
fullWidth?: boolean;
} & PropsWithChildren
): React.ReactElement { ): React.ReactElement {
return ( return (
<Grid item sm={12} md={6}> <Grid item sm={12} md={p.fullWidth ? 12 : 6}>
<Paper style={{ margin: "10px", padding: "10px" }}> <Paper style={{ margin: "10px", padding: "10px" }}>
{(p.title || p.actions) && ( {(p.title || p.actions) && (
<span <span

View File

@ -4,6 +4,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
import { import {
Avatar, Avatar,
Button, Button,
Grid,
IconButton, IconButton,
ListItem, ListItem,
ListItemAvatar, ListItemAvatar,
@ -35,21 +36,24 @@ export function NetDHCPHostReservations(p: {
return ( return (
<> <>
{p.dhcp.hosts.map((h, num) => ( <Grid container>
<HostReservationWidget {p.dhcp.hosts.map((h, num) => (
key={num} <Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
{...p} <HostReservationWidget
onChange={() => { key={num}
p.onChange?.(p.dhcp); {...p}
}} onChange={() => {
host={h} p.onChange?.(p.dhcp);
onRemove={() => { }}
p.dhcp.hosts.splice(num, 1); host={h}
p.onChange?.(p.dhcp); onRemove={() => {
}} p.dhcp.hosts.splice(num, 1);
/> p.onChange?.(p.dhcp);
))} }}
/>
</Grid>
))}
</Grid>
{p.editable && ( {p.editable && (
<Button onClick={addHost}>Add new host reservation</Button> <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) && ( {p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
<EditSection title="DHCP hosts reservations"> <EditSection title="DHCP hosts reservations" fullWidth>
<NetDHCPHostReservations <NetDHCPHostReservations
{...p} {...p}
dhcp={p.config.dhcp} dhcp={p.config.dhcp}