100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { useState, useEffect } from "react";
|
||
import { CorsEntry } from "@/lib/features/cors/corsSlice";
|
||
|
||
interface CorsEditDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
entry: CorsEntry | null;
|
||
type: "whitelist" | "blacklist";
|
||
onUpdate: (id: string, origin: string, note: string) => Promise<void>;
|
||
}
|
||
|
||
export function CorsEditDialog({ open, onOpenChange, entry, type, onUpdate }: CorsEditDialogProps) {
|
||
const [origin, setOrigin] = useState("");
|
||
const [note, setNote] = useState(""); // Description or Reason
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (entry) {
|
||
setOrigin(entry.origin);
|
||
setNote(entry.description || entry.reason || "");
|
||
}
|
||
}, [entry]);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!entry) return;
|
||
|
||
setLoading(true);
|
||
try {
|
||
await onUpdate(entry.id, origin, note);
|
||
onOpenChange(false);
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const typeLabel = type === "whitelist" ? "Whitelist" : "Blacklist";
|
||
const noteLabel = type === "whitelist" ? "Açıklama" : "Sebep";
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle>{typeLabel} Güncelle</DialogTitle>
|
||
<DialogDescription>
|
||
Mevcut kaydı düzenleyin.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<form onSubmit={handleSubmit}>
|
||
<div className="grid gap-4 py-4">
|
||
<div className="grid grid-cols-4 items-center gap-4">
|
||
<Label htmlFor="edit-origin" className="text-right">
|
||
Origin
|
||
</Label>
|
||
<Input
|
||
id="edit-origin"
|
||
placeholder="https://example.com"
|
||
className="col-span-3"
|
||
value={origin}
|
||
onChange={(e) => setOrigin(e.target.value)}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="grid grid-cols-4 items-center gap-4">
|
||
<Label htmlFor="edit-note" className="text-right">
|
||
{noteLabel}
|
||
</Label>
|
||
<Input
|
||
id="edit-note"
|
||
placeholder={noteLabel}
|
||
className="col-span-3"
|
||
value={note}
|
||
onChange={(e) => setNote(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button type="submit" disabled={loading}>
|
||
{loading ? "Güncelleniyor..." : "Güncelle"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|