Can set the list of referenced filters in filters list
This commit is contained in:
parent
baa0adf529
commit
aafa4bf145
@ -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?.();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
import { Autocomplete, TextField } from "@mui/material";
|
||||
import { NWFilter } from "../../api/NWFilterApi";
|
||||
import { NWFilterItem } from "../nwfilter/NWFilterItem";
|
||||
import React from "react";
|
||||
|
||||
export function NWFilterSelectInput(p: {
|
||||
editable: boolean;
|
||||
@ -10,6 +11,8 @@ export function NWFilterSelectInput(p: {
|
||||
onChange?: (name?: string) => void;
|
||||
canBeNull: boolean;
|
||||
}): React.ReactElement {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const selectedValue = p.nwfilters.find((o) => o.name === p.value);
|
||||
if (!p.editable && !selectedValue) return <></>;
|
||||
|
||||
@ -23,7 +26,14 @@ export function NWFilterSelectInput(p: {
|
||||
|
||||
return (
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
open={open}
|
||||
onOpen={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
onClose={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
readOnly={!p.editable}
|
||||
options={[...(p.canBeNull ? [undefined] : []), ...p.nwfilters]}
|
||||
getOptionLabel={(o) => o?.name ?? "Unspecified"}
|
||||
value={selectedValue}
|
||||
@ -32,7 +42,11 @@ export function NWFilterSelectInput(p: {
|
||||
)}
|
||||
renderOption={(_props, option, _state) => (
|
||||
<NWFilterItem
|
||||
onClick={() => p.onChange?.(option?.name)}
|
||||
dense
|
||||
onClick={() => {
|
||||
p.onChange?.(option?.name);
|
||||
setOpen(false);
|
||||
}}
|
||||
value={option}
|
||||
/>
|
||||
)}
|
||||
|
@ -16,6 +16,7 @@ import { EditSection } from "../forms/EditSection";
|
||||
import { TextInput } from "../forms/TextInput";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
import { SelectInput } from "../forms/SelectInput";
|
||||
import { NWFSelectReferencedFilters } from "../forms/NWFSelectReferencedFilters";
|
||||
|
||||
interface DetailsProps {
|
||||
nwfilter: NWFilter;
|
||||
@ -143,6 +144,17 @@ function NetworkFilterDetailsTabGeneral(
|
||||
size={ServerApi.Config.constraints.nwfilter_priority}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
@ -20,7 +20,6 @@ export function NWFilterItem(p: {
|
||||
}): React.ReactElement {
|
||||
const inner = (
|
||||
<>
|
||||
{" "}
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Icon path={mdiSecurityNetwork} />
|
||||
|
Loading…
Reference in New Issue
Block a user