pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Fix hidden tabs issue

Browse Source
This commit is contained in:
Pierre HUBERT 2024-01-03 00:08:57 +01:00
parent 3407c068e1
commit 219fc184ee
2 changed files with 65 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
virtweb_frontend/src/widgets/TabsWidget.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Box, Tab, Tabs } from "@mui/material";
export interface TabWidgetOption<E> {
label: string;
value: E;
visible: boolean;
color?: string;
}
export function TabsWidget<E>(p: {
currTab: E;
options: TabWidgetOption<E>[];
onValueChange: (v: E) => void;
}): React.ReactElement {
const activeOptions = p.options.filter((v) => v.visible);
const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);
const updateActiveTab = (index: number) => {
p.onValueChange(activeOptions[index].value);
};
return (
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={currTabIndex}
onChange={(_ev, newVal) => updateActiveTab(newVal)}
>
{activeOptions.map((o, index) => (
<Tab key={index} label={o.label} style={{ color: o.color }} />
))}
</Tabs>
</Box>
);
}

55
virtweb_frontend/src/widgets/net/NetworkDetails.tsx
View File

@ -14,6 +14,7 @@ import { SelectInput } from "../forms/SelectInput";
import { TextInput } from "../forms/TextInput"; import { TextInput } from "../forms/TextInput";
import { DHCPHostReservations } from "./DHCPHostReservations"; import { DHCPHostReservations } from "./DHCPHostReservations";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { TabsWidget } from "../TabsWidget";
interface DetailsProps { interface DetailsProps {
net: NetworkInfo; net: NetworkInfo;
@ -38,7 +39,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
); );
} }
enum VMTab { enum NetTab {
General = 0, General = 0,
IPv4, IPv4,
IPv6, IPv6,
@ -48,36 +49,38 @@ enum VMTab {
type DetailsInnerProps = DetailsProps & { cardsList: string[] }; type DetailsInnerProps = DetailsProps & { cardsList: string[] };
function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement { function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
const [currTab, setCurrTab] = React.useState(VMTab.General); const [currTab, setCurrTab] = React.useState(NetTab.General);
return ( return (
<> <>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}> <TabsWidget
<Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}> currTab={currTab}
<Tab label="General" tabIndex={VMTab.General} /> onValueChange={setCurrTab}
options={[
{(p.editable || p.net.ip_v4) && ( { label: "General", value: NetTab.General, visible: true },
<Tab label="IPv4" tabIndex={VMTab.IPv4} /> {
)} label: "IPv4",
value: NetTab.IPv4,
{(p.editable || p.net.ip_v6) && ( visible: p.editable || !!p.net.ip_v4,
<Tab label="IPv6" tabIndex={VMTab.IPv6} /> },
)} {
label: "IPv6",
{!p.editable && ( value: NetTab.IPv6,
<Tab visible: p.editable || !!p.net.ip_v6,
label="Danger zone" },
style={{ color: "red" }} {
tabIndex={VMTab.Danger} label: "Danger zone",
value: NetTab.Danger,
color: "red",
visible: !p.editable,
},
]}
/> />
)}
</Tabs>
</Box>
{currTab === VMTab.General && <NetworkDetailsTabGeneral {...p} />} {currTab === NetTab.General && <NetworkDetailsTabGeneral {...p} />}
{currTab === VMTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />} {currTab === NetTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
{currTab === VMTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />} {currTab === NetTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
{currTab === VMTab.Danger && <NetworkDetailsTabDanger {...p} />} {currTab === NetTab.Danger && <NetworkDetailsTabDanger {...p} />}
</> </>
); );
} }