445 lines
27 KiB
TypeScript
445 lines
27 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { useLockFn } from "ahooks";
|
|
import yaml from "js-yaml";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
DndContext,
|
|
closestCenter,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
useSortable,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { Virtuoso } from "react-virtuoso";
|
|
import MonacoEditor from "react-monaco-editor";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
import {
|
|
getNetworkInterfaces,
|
|
readProfileFile,
|
|
saveProfileFile,
|
|
} from "@/services/cmds";
|
|
import getSystem from "@/utils/get-system";
|
|
import { useThemeMode } from "@/services/states";
|
|
import { BaseSearchBox } from "../base/base-search-box";
|
|
import { showNotice } from "@/services/noticeService";
|
|
import { cn } from "@root/lib/utils";
|
|
|
|
// --- Компоненты shadcn/ui и иконки ---
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
DialogClose,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormDescription } from "@/components/ui/form";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Check,
|
|
ChevronsUpDown,
|
|
GripVertical,
|
|
Trash2,
|
|
Undo2,
|
|
ArrowDownToLine,
|
|
ArrowUpToLine,
|
|
} from "lucide-react";
|
|
|
|
|
|
// --- Вспомогательные функции, константы и валидаторы ---
|
|
const portValidator = (value: string): boolean => /^(?:[1-9]\d{0,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(value);
|
|
const ipv4CIDRValidator = (value: string): boolean => /^(?:(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))\.){3}(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))(?:\/(?:[12]?[0-9]|3[0-2]))?$/.test(value);
|
|
const ipv6CIDRValidator = (value: string): boolean => /^([0-9a-fA-F]{1,4}(?::[0-9a-fA-F]{1,4}){7}|::|:(?::[0-9a-fA-F]{1,4}){1,6}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,5}|(?:[0-9a-fA-F]{1,4}:){2}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){3}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){4}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){5}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,6}:)\/(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])$/.test(value);
|
|
const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
|
|
interface Props {
|
|
proxiesUid: string;
|
|
mergeUid: string;
|
|
profileUid: string;
|
|
property: string;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSave?: (prev?: string, curr?: string) => void;
|
|
}
|
|
|
|
// --- Новый компонент Combobox (одиночный выбор) ---
|
|
const Combobox = ({ options, value, onSelect, placeholder }: { options: string[], value: string, onSelect: (value: string) => void, placeholder?: string }) => {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between font-normal">
|
|
{value || placeholder || "Select..."}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search..." />
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandList>
|
|
{options.map((option) => (
|
|
<CommandItem key={option} value={option} onSelect={(currentValue) => { onSelect(options.find(opt => opt.toLowerCase() === currentValue) || ''); setOpen(false); }}>
|
|
<Check className={cn("mr-2 h-4 w-4", value === option ? "opacity-100" : "opacity-0")} />
|
|
{option}
|
|
</CommandItem>
|
|
))}
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// --- Новый компонент MultiSelectCombobox (множественный выбор) ---
|
|
const MultiSelectCombobox = ({ options, value, onChange, placeholder }: { options: string[], value: string[], onChange: (value: string[]) => void, placeholder?: string }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const selectedSet = new Set(value);
|
|
|
|
const handleSelect = (currentValue: string) => {
|
|
const newSet = new Set(selectedSet);
|
|
if (newSet.has(currentValue)) {
|
|
newSet.delete(currentValue);
|
|
} else {
|
|
newSet.add(currentValue);
|
|
}
|
|
onChange(Array.from(newSet));
|
|
};
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between font-normal h-auto min-h-10">
|
|
<div className="flex gap-1 flex-wrap">
|
|
{value && value.length > 0 ? value.map(item => <Badge key={item} variant="secondary">{item}</Badge>) : <span className="text-muted-foreground">{placeholder || "Select..."}</span>}
|
|
</div>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search..." />
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandList>
|
|
{options.map((option) => (
|
|
<CommandItem key={option} value={option} onSelect={() => handleSelect(option)} className="cursor-pointer">
|
|
<Check className={cn("mr-2 h-4 w-4", selectedSet.has(option) ? "opacity-100" : "opacity-0")} />
|
|
{option}
|
|
</CommandItem>
|
|
))}
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// --- Новый компонент для элемента списка групп ---
|
|
const EditorGroupItem = ({ type, group, onDelete, id }: { type: string, group: IProxyGroupConfig, onDelete: () => void, id: string }) => {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
|
const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 100 : undefined };
|
|
const isDelete = type === 'delete';
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="flex items-center p-2 mb-1 rounded-md bg-secondary" {...attributes}>
|
|
<div {...listeners} className="cursor-grab p-1 text-muted-foreground hover:bg-accent rounded-sm"><GripVertical className="h-5 w-5" /></div>
|
|
<p className={`flex-1 truncate text-sm ${isDelete ? 'line-through text-muted-foreground' : ''}`}>{group.name}</p>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={onDelete}>
|
|
{isDelete ? <Undo2 className="h-4 w-4" /> : <Trash2 className="h-4 w-4 text-destructive" />}
|
|
</Button>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export const GroupsEditorViewer = (props: Props) => {
|
|
const { mergeUid, proxiesUid, profileUid, property, open, onClose, onSave } = props;
|
|
const { t } = useTranslation();
|
|
const themeMode = useThemeMode();
|
|
const [prevData, setPrevData] = useState("");
|
|
const [currData, setCurrData] = useState("");
|
|
const [visualization, setVisualization] = useState(true);
|
|
const [match, setMatch] = useState(() => (_: string) => true);
|
|
const [interfaceNameList, setInterfaceNameList] = useState<string[]>([]);
|
|
|
|
const form = useForm<IProxyGroupConfig>({
|
|
defaultValues: { type: "select", name: "", interval: 300, timeout: 5000, "max-failed-times": 5, lazy: true },
|
|
});
|
|
const { control, watch, handleSubmit, getValues } = form;
|
|
|
|
const [groupList, setGroupList] = useState<IProxyGroupConfig[]>([]);
|
|
const [proxyPolicyList, setProxyPolicyList] = useState<string[]>([]);
|
|
const [proxyProviderList, setProxyProviderList] = useState<string[]>([]);
|
|
const [prependSeq, setPrependSeq] = useState<IProxyGroupConfig[]>([]);
|
|
const [appendSeq, setAppendSeq] = useState<IProxyGroupConfig[]>([]);
|
|
const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
|
|
|
|
const filteredPrependSeq = useMemo(() => prependSeq.filter((group) => match(group.name)), [prependSeq, match]);
|
|
const filteredGroupList = useMemo(() => groupList.filter((group) => match(group.name)), [groupList, match]);
|
|
const filteredAppendSeq = useMemo(() => appendSeq.filter((group) => match(group.name)), [appendSeq, match]);
|
|
|
|
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
|
|
|
|
const reorder = (list: IProxyGroupConfig[], startIndex: number, endIndex: number) => {
|
|
const result = Array.from(list);
|
|
const [removed] = result.splice(startIndex, 1);
|
|
result.splice(endIndex, 0, removed);
|
|
return result;
|
|
};
|
|
|
|
const onPrependDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (over && active.id !== over.id) {
|
|
let activeIndex = 0;
|
|
let overIndex = 0;
|
|
prependSeq.forEach((item, index) => {
|
|
if (item.name === active.id) activeIndex = index;
|
|
if (item.name === over.id) overIndex = index;
|
|
});
|
|
setPrependSeq(reorder(prependSeq, activeIndex, overIndex));
|
|
}
|
|
};
|
|
|
|
const onAppendDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (over && active.id !== over.id) {
|
|
let activeIndex = 0;
|
|
let overIndex = 0;
|
|
appendSeq.forEach((item, index) => {
|
|
if (item.name === active.id) activeIndex = index;
|
|
if (item.name === over.id) overIndex = index;
|
|
});
|
|
setAppendSeq(reorder(appendSeq, activeIndex, overIndex));
|
|
}
|
|
};
|
|
|
|
const fetchContent = async () => {
|
|
try {
|
|
let data = await readProfileFile(property);
|
|
let obj = yaml.load(data) as ISeqProfileConfig | null;
|
|
setPrependSeq(obj?.prepend || []);
|
|
setAppendSeq(obj?.append || []);
|
|
setDeleteSeq(obj?.delete || []);
|
|
setPrevData(data);
|
|
setCurrData(data);
|
|
} catch (error) { console.error("Failed to fetch or parse content:", error); }
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (currData === "" || !visualization) return;
|
|
try {
|
|
let obj = yaml.load(currData) as { prepend: [], append: [], delete: [] } | null;
|
|
setPrependSeq(obj?.prepend || []);
|
|
setAppendSeq(obj?.append || []);
|
|
setDeleteSeq(obj?.delete || []);
|
|
} catch (e) { /* Ignore parsing errors while typing */ }
|
|
}, [visualization, currData]);
|
|
|
|
useEffect(() => {
|
|
if (prependSeq && appendSeq && deleteSeq && visualization) {
|
|
const serialize = () => {
|
|
try {
|
|
setCurrData(yaml.dump({ prepend: prependSeq, append: appendSeq, delete: deleteSeq }, { forceQuotes: true }));
|
|
} catch (e: any) { showNotice("error", e?.message || e?.toString() || "YAML dump error"); }
|
|
};
|
|
if (window.requestIdleCallback) { window.requestIdleCallback(serialize); } else { setTimeout(serialize, 0); }
|
|
}
|
|
}, [prependSeq, appendSeq, deleteSeq, visualization]);
|
|
|
|
const fetchProxyPolicy = async () => {
|
|
try {
|
|
let data = await readProfileFile(profileUid);
|
|
let proxiesData = await readProfileFile(proxiesUid);
|
|
let originGroupsObj = yaml.load(data) as { "proxy-groups": IProxyGroupConfig[] } | null;
|
|
let originProxiesObj = yaml.load(data) as { proxies: [] } | null;
|
|
let originProxies = originProxiesObj?.proxies || [];
|
|
let moreProxiesObj = yaml.load(proxiesData) as ISeqProfileConfig | null;
|
|
let morePrependProxies = moreProxiesObj?.prepend || [];
|
|
let moreAppendProxies = moreProxiesObj?.append || [];
|
|
let moreDeleteProxies = moreProxiesObj?.delete || ([] as string[] | { name: string }[]);
|
|
let proxies = morePrependProxies.concat(originProxies.filter((proxy: any) => !moreDeleteProxies.some((del: any) => (del.name || del) === proxy.name)), moreAppendProxies);
|
|
|
|
setProxyPolicyList(Array.from(new Set(builtinProxyPolicies.concat(
|
|
prependSeq.map((group) => group.name),
|
|
originGroupsObj?.["proxy-groups"].map((group) => group.name).filter((name) => !deleteSeq.includes(name)) || [],
|
|
appendSeq.map((group) => group.name),
|
|
proxies.map((proxy: any) => proxy.name),
|
|
))));
|
|
} catch(error) { console.error("Failed to fetch proxy policy:", error) }
|
|
};
|
|
|
|
const fetchProfile = async () => {
|
|
try {
|
|
let data = await readProfileFile(profileUid);
|
|
let mergeData = await readProfileFile(mergeUid);
|
|
let globalMergeData = await readProfileFile("Merge");
|
|
|
|
let originGroupsObj = yaml.load(data) as { "proxy-groups": IProxyGroupConfig[] } | null;
|
|
let originProviderObj = yaml.load(data) as { "proxy-providers": {} } | null;
|
|
let originProvider = originProviderObj?.["proxy-providers"] || {};
|
|
let moreProviderObj = yaml.load(mergeData) as { "proxy-providers": {} } | null;
|
|
let moreProvider = moreProviderObj?.["proxy-providers"] || {};
|
|
let globalProviderObj = yaml.load(globalMergeData) as { "proxy-providers": {} } | null;
|
|
let globalProvider = globalProviderObj?.["proxy-providers"] || {};
|
|
let provider = { ...originProvider, ...moreProvider, ...globalProvider };
|
|
|
|
setProxyProviderList(Object.keys(provider));
|
|
setGroupList(originGroupsObj?.["proxy-groups"] || []);
|
|
} catch(error) { console.error("Failed to fetch profile:", error) }
|
|
};
|
|
|
|
const getInterfaceNameList = async () => {
|
|
try {
|
|
let list = await getNetworkInterfaces();
|
|
setInterfaceNameList(list);
|
|
} catch (error) { console.error("Failed to get network interfaces:", error) }
|
|
};
|
|
|
|
useEffect(() => { fetchProxyPolicy(); }, [prependSeq, appendSeq, deleteSeq]);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
fetchContent();
|
|
fetchProxyPolicy();
|
|
fetchProfile();
|
|
getInterfaceNameList();
|
|
}
|
|
}, [open]);
|
|
|
|
const validateGroup = () => {
|
|
let group = getValues();
|
|
if (group.name === "") {
|
|
throw new Error(t("Group Name Required"));
|
|
}
|
|
};
|
|
|
|
const handleSave = useLockFn(async () => {
|
|
try {
|
|
await saveProfileFile(property, currData);
|
|
showNotice("success", t("Saved Successfully"));
|
|
onSave?.(prevData, currData);
|
|
onClose();
|
|
} catch (err: any) {
|
|
showNotice("error", err.toString());
|
|
}
|
|
});
|
|
|
|
const groupType = watch("type");
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent className="min-w-6xl h-[90vh] flex flex-col">
|
|
<DialogHeader>
|
|
<div className="flex justify-between items-center pr-8">
|
|
<DialogTitle>{t("Edit Groups")}</DialogTitle>
|
|
<Button variant="outline" size="sm" onClick={() => setVisualization(prev => !prev)}>
|
|
{visualization ? t("Advanced") : t("Visualization")}
|
|
</Button>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 min-h-0 mt-4">
|
|
{visualization ? (
|
|
<Form {...form}>
|
|
<form className="h-full flex gap-4">
|
|
{/* Левая панель: Конструктор групп */}
|
|
<div className="w-1/2 flex flex-col border rounded-md p-4">
|
|
<h3 className="text-lg font-medium mb-4">Constructor</h3>
|
|
<Separator className="mb-4"/>
|
|
<div className="space-y-3 overflow-y-auto p-1 -mr-3 ">
|
|
<FormField control={control} name="type" render={({ field }) => (<FormItem><FormLabel>{t("Group Type")}</FormLabel><Select onValueChange={field.onChange} defaultValue={field.value}><FormControl><SelectTrigger><SelectValue/></SelectTrigger></FormControl><SelectContent><SelectItem value="select">select</SelectItem><SelectItem value="url-test">url-test</SelectItem><SelectItem value="fallback">fallback</SelectItem><SelectItem value="load-balance">load-balance</SelectItem><SelectItem value="relay">relay</SelectItem></SelectContent></Select></FormItem>)}/>
|
|
<FormField control={control} name="name" render={({ field }) => (<FormItem><FormLabel>{t("Group Name")}</FormLabel><FormControl><Input {...field} required/></FormControl></FormItem>)}/>
|
|
<FormField control={control} name="icon" render={({ field }) => (<FormItem><FormLabel>{t("Proxy Group Icon")}</FormLabel><FormControl><Input {...field}/></FormControl></FormItem>)}/>
|
|
<FormField control={control} name="proxies" render={({ field }) => (<FormItem><FormLabel>{t("Use Proxies")}</FormLabel><MultiSelectCombobox options={proxyPolicyList} value={field.value || []} onChange={field.onChange} placeholder={t("Select proxies...")} /></FormItem>)}/>
|
|
<FormField control={control} name="use" render={({ field }) => (<FormItem><FormLabel>{t("Use Provider")}</FormLabel><MultiSelectCombobox options={proxyProviderList} value={field.value || []} onChange={field.onChange} placeholder={t("Select providers...")} /></FormItem>)}/>
|
|
{(groupType === "url-test" || groupType === "fallback") && <>
|
|
<FormField control={control} name="url" render={({ field }) => (<FormItem><FormLabel>{t("Health Check Url")}</FormLabel><FormControl><Input placeholder="https://cp.cloudflare.com/generate_204" {...field}/></FormControl></FormItem>)}/>
|
|
<FormField control={control} name="interval" render={({ field }) => (<FormItem><FormLabel>{t("Interval")}</FormLabel><FormControl><div className="flex items-center gap-2"><Input type="number" placeholder="300" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/><span className="text-sm text-muted-foreground">{t("seconds")}</span></div></FormControl></FormItem>)}/>
|
|
<FormField control={control} name="timeout" render={({ field }) => (<FormItem><FormLabel>{t("Timeout")}</FormLabel><FormControl><div className="flex items-center gap-2"><Input type="number" placeholder="5000" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/><span className="text-sm text-muted-foreground">{t("millis")}</span></div></FormControl></FormItem>)}/>
|
|
<FormField control={control} name="max-failed-times" render={({ field }) => (<FormItem><FormLabel>{t("Max Failed Times")}</FormLabel><FormControl><Input type="number" placeholder="5" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/></FormControl></FormItem>)}/>
|
|
</>}
|
|
<FormField control={control} name="interface-name" render={({ field }) => (<FormItem><FormLabel>{t("Interface Name")}</FormLabel><Combobox options={interfaceNameList} value={field.value} onSelect={field.onChange} /></FormItem>)}/>
|
|
<FormField control={control} name="routing-mark" render={({ field }) => (<FormItem><FormLabel>{t("Routing Mark")}</FormLabel><FormControl><Input type="number" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/></FormControl></FormItem>)}/>
|
|
{(groupType === "url-test" || groupType === "fallback" || groupType === "load-balance") && <>
|
|
<FormField control={control} name="lazy" render={({ field }) => (<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3"><FormLabel>{t("Lazy")}</FormLabel><FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl></FormItem>)} />
|
|
<FormField control={control} name="disable-udp" render={({ field }) => (<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3"><FormLabel>{t("Disable UDP")}</FormLabel><FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl></FormItem>)} />
|
|
</>}
|
|
<FormField control={control} name="hidden" render={({ field }) => (<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3"><FormLabel>{t("Hidden")}</FormLabel><FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl></FormItem>)} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 mt-auto pt-4">
|
|
<Button type="button" onClick={() => { try { validateGroup(); const newGroup = getValues(); if ([...prependSeq, ...groupList, ...appendSeq].every(g => g.name !== newGroup.name)) setPrependSeq([newGroup, ...prependSeq]); else throw new Error(t("Group Name Already Exists")); } catch (err: any) { showNotice("error", err.message); }}}><ArrowUpToLine className="mr-2 h-4 w-4" />{t("Prepend Group")}</Button>
|
|
<Button type="button" onClick={() => { try { validateGroup(); const newGroup = getValues(); if ([...prependSeq, ...groupList, ...appendSeq].every(g => g.name !== newGroup.name)) setAppendSeq([...appendSeq, newGroup]); else throw new Error(t("Group Name Already Exists")); } catch (err: any) { showNotice("error", err.message); }}}><ArrowDownToLine className="mr-2 h-4 w-4" />{t("Append Group")}</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator orientation="vertical" />
|
|
|
|
<div className="w-1/2 flex flex-col">
|
|
<BaseSearchBox onSearch={(matcher) => setMatch(() => matcher)} />
|
|
<div className="flex-1 min-h-0 mt-2 rounded-md border">
|
|
<Virtuoso
|
|
className="h-full"
|
|
totalCount={filteredGroupList.length + (filteredPrependSeq.length > 0 ? 1 : 0) + (filteredAppendSeq.length > 0 ? 1 : 0)}
|
|
itemContent={(index) => {
|
|
let shift = filteredPrependSeq.length > 0 ? 1 : 0;
|
|
if (filteredPrependSeq.length > 0 && index === 0) {
|
|
return (<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onPrependDragEnd}><SortableContext items={filteredPrependSeq.map(x => x.name)}>{filteredPrependSeq.map((item) => (<EditorGroupItem key={item.name} id={item.name} type="prepend" group={item} onDelete={() => setPrependSeq(prependSeq.filter(v => v.name !== item.name))} />))}</SortableContext></DndContext>);
|
|
} else if (index < filteredGroupList.length + shift) {
|
|
const newIndex = index - shift;
|
|
const currentGroup = filteredGroupList[newIndex];
|
|
return (<EditorGroupItem key={currentGroup.name} id={currentGroup.name} type={deleteSeq.includes(currentGroup.name) ? "delete" : "original"} group={currentGroup} onDelete={() => { if (deleteSeq.includes(currentGroup.name)) { setDeleteSeq(deleteSeq.filter(v => v !== currentGroup.name)); } else { setDeleteSeq((prev) => [...prev, currentGroup.name]); }}} />);
|
|
} else {
|
|
return (<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onAppendDragEnd}><SortableContext items={filteredAppendSeq.map(x => x.name)}>{filteredAppendSeq.map((item) => (<EditorGroupItem key={item.name} id={item.name} type="append" group={item} onDelete={() => setAppendSeq(appendSeq.filter(v => v.name !== item.name))} />))}</SortableContext></DndContext>);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
) : (
|
|
<div className="h-full rounded-md border">
|
|
<MonacoEditor height="100%" language="yaml" value={currData} theme={themeMode === "light" ? "vs" : "vs-dark"} options={{ tabSize: 2, minimap: { enabled: document.documentElement.clientWidth >= 1500 }, mouseWheelZoom: true, quickSuggestions: { strings: true, comments: true, other: true }, padding: { top: 16 }, fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${getSystem() === "windows" ? ", twemoji mozilla" : ""}`, fontLigatures: false, smoothScrolling: true }} onChange={(value) => setCurrData(value)} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="mt-4">
|
|
<DialogClose asChild><Button type="button" variant="outline">{t("Cancel")}</Button></DialogClose>
|
|
<Button type="button" onClick={handleSubmit(handleSave)}>{t("Save")}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|