Can set the list of referenced filters in filters list

This commit is contained in:
Pierre HUBERT 2024-01-04 10:47:08 +01:00
parent baa0adf529
commit aafa4bf145
4 changed files with 82 additions and 3 deletions

View File

@ -0,0 +1,54 @@
import React from "react";
import { NWFilter } from "../../api/NWFilterApi";
import { NWFilterSelectInput } from "./NWFilterSelectInput";
import { NWFilterItem } from "../nwfilter/NWFilterItem";
export function NWFSelectReferencedFilters(p: {
editable: boolean;
selected: string[];
nwFiltersList: NWFilter[];
onChange?: () => void;
excludedFilters?: string[];
}): React.ReactElement {
const nwfilters = React.useMemo(
() =>
p.excludedFilters
? p.nwFiltersList.filter((f) => !p.excludedFilters!.includes(f.name))
: p.nwFiltersList,
[p.excludedFilters]
);
const selectedFilters = React.useMemo(
() => p.selected.map((f) => p.nwFiltersList.find((s) => s.name === f)),
[p.selected.length]
);
return (
<>
{selectedFilters.map((entry, n) => (
<NWFilterItem
key={n}
value={entry}
onDelete={() => {
p.selected.splice(n, 1);
p.onChange?.();
}}
/>
))}
{p.editable && (
<NWFilterSelectInput
editable={p.editable}
label="Attach a new filter"
canBeNull={false}
nwfilters={nwfilters}
value={""}
onChange={(f) => {
p.selected.push(f!);
p.onChange?.();
}}
/>
)}
</>
);
}

View File

@ -1,6 +1,7 @@
import { Autocomplete, TextField } from "@mui/material"; import { Autocomplete, TextField } from "@mui/material";
import { NWFilter } from "../../api/NWFilterApi"; import { NWFilter } from "../../api/NWFilterApi";
import { NWFilterItem } from "../nwfilter/NWFilterItem"; import { NWFilterItem } from "../nwfilter/NWFilterItem";
import React from "react";
export function NWFilterSelectInput(p: { export function NWFilterSelectInput(p: {
editable: boolean; editable: boolean;
@ -10,6 +11,8 @@ export function NWFilterSelectInput(p: {
onChange?: (name?: string) => void; onChange?: (name?: string) => void;
canBeNull: boolean; canBeNull: boolean;
}): React.ReactElement { }): React.ReactElement {
const [open, setOpen] = React.useState(false);
const selectedValue = p.nwfilters.find((o) => o.name === p.value); const selectedValue = p.nwfilters.find((o) => o.name === p.value);
if (!p.editable && !selectedValue) return <></>; if (!p.editable && !selectedValue) return <></>;
@ -23,7 +26,14 @@ export function NWFilterSelectInput(p: {
return ( return (
<Autocomplete <Autocomplete
disablePortal open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
readOnly={!p.editable}
options={[...(p.canBeNull ? [undefined] : []), ...p.nwfilters]} options={[...(p.canBeNull ? [undefined] : []), ...p.nwfilters]}
getOptionLabel={(o) => o?.name ?? "Unspecified"} getOptionLabel={(o) => o?.name ?? "Unspecified"}
value={selectedValue} value={selectedValue}
@ -32,7 +42,11 @@ export function NWFilterSelectInput(p: {
)} )}
renderOption={(_props, option, _state) => ( renderOption={(_props, option, _state) => (
<NWFilterItem <NWFilterItem
onClick={() => p.onChange?.(option?.name)} dense
onClick={() => {
p.onChange?.(option?.name);
setOpen(false);
}}
value={option} value={option}
/> />
)} )}

View File

@ -16,6 +16,7 @@ import { EditSection } from "../forms/EditSection";
import { TextInput } from "../forms/TextInput"; import { TextInput } from "../forms/TextInput";
import { ServerApi } from "../../api/ServerApi"; import { ServerApi } from "../../api/ServerApi";
import { SelectInput } from "../forms/SelectInput"; import { SelectInput } from "../forms/SelectInput";
import { NWFSelectReferencedFilters } from "../forms/NWFSelectReferencedFilters";
interface DetailsProps { interface DetailsProps {
nwfilter: NWFilter; nwfilter: NWFilter;
@ -143,6 +144,17 @@ function NetworkFilterDetailsTabGeneral(
size={ServerApi.Config.constraints.nwfilter_priority} size={ServerApi.Config.constraints.nwfilter_priority}
/> />
</EditSection> </EditSection>
{/* Referenced filters */}
{(p.editable || p.nwfilter.join_filters.length > 0) && (
<EditSection title="Referenced filters">
<NWFSelectReferencedFilters
selected={p.nwfilter.join_filters}
excludedFilters={[p.nwfilter.name]}
{...p}
/>
</EditSection>
)}
</Grid> </Grid>
); );
} }

View File

@ -20,7 +20,6 @@ export function NWFilterItem(p: {
}): React.ReactElement { }): React.ReactElement {
const inner = ( const inner = (
<> <>
{" "}
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
<Icon path={mdiSecurityNetwork} /> <Icon path={mdiSecurityNetwork} />