first commit
This commit is contained in:
Beyhan Oğur
107
components/cors/cors-dialog.tsx
Normal file
107
components/cors/cors-dialog.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
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 CorsDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
type: "whitelist" | "blacklist";
|
||||
entry: CorsEntry | null;
|
||||
onSubmit: (origin: string, note: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export function CorsDialog({ open, onOpenChange, type, entry, onSubmit }: CorsDialogProps) {
|
||||
const [origin, setOrigin] = useState("");
|
||||
const [note, setNote] = useState(""); // Description or Reason
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (entry) {
|
||||
setOrigin(entry.origin);
|
||||
setNote(type === "whitelist" ? (entry.description || "") : (entry.reason || ""));
|
||||
} else {
|
||||
setOrigin("");
|
||||
setNote("");
|
||||
}
|
||||
}
|
||||
}, [open, entry, type]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await onSubmit(origin, note);
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isEdit = !!entry;
|
||||
const typeLabel = type === "whitelist" ? "Whitelist" : "Blacklist";
|
||||
const noteLabel = type === "whitelist" ? "Açıklama" : "Sebep";
|
||||
const title = `${typeLabel} ${isEdit ? "Düzenle" : "Ekle"}`;
|
||||
const description = isEdit
|
||||
? "Mevcut kaydı düzenleyin."
|
||||
: "Listeye yeni bir domain ekleyin.";
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{description}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="origin" className="text-right">
|
||||
Origin
|
||||
</Label>
|
||||
<Input
|
||||
id="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="note" className="text-right">
|
||||
{noteLabel}
|
||||
</Label>
|
||||
<Input
|
||||
id="note"
|
||||
placeholder={noteLabel}
|
||||
className="col-span-3"
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
99
components/cors/cors-edit-dialog.tsx
Normal file
99
components/cors/cors-edit-dialog.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
93
components/cors/cors-table.tsx
Normal file
93
components/cors/cors-table.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Trash2, Edit } from "lucide-react";
|
||||
import { CorsEntry } from "@/lib/features/cors/corsSlice";
|
||||
|
||||
interface CorsTableProps {
|
||||
data: CorsEntry[];
|
||||
type: "whitelist" | "blacklist";
|
||||
onDelete: (id: string) => void;
|
||||
onEdit: (entry: CorsEntry) => void;
|
||||
onToggleActive: (id: string, currentStatus: boolean) => void;
|
||||
}
|
||||
|
||||
export function CorsTable({ data, type, onDelete, onEdit, onToggleActive }: CorsTableProps) {
|
||||
return (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Origin</TableHead>
|
||||
<TableHead>{type === "whitelist" ? "Açıklama" : "Sebep"}</TableHead>
|
||||
<TableHead>Durum</TableHead>
|
||||
<TableHead>Oluşturan</TableHead>
|
||||
<TableHead className="text-right">İşlemler</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
|
||||
Kayıt bulunamadı.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
data.map((entry) => (
|
||||
<TableRow key={entry.id}>
|
||||
<TableCell className="font-medium">{entry.origin}</TableCell>
|
||||
<TableCell>
|
||||
{type === "whitelist" ? entry.description : entry.reason}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={entry.is_active}
|
||||
onCheckedChange={() => onToggleActive(entry.id, entry.is_active)}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{entry.is_active ? "Aktif" : "Pasif"}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-sm">
|
||||
{entry.created_by}
|
||||
</TableCell>
|
||||
<TableCell className="text-right space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onEdit(entry)}
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
<span className="sr-only">Düzenle</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => onDelete(entry.id)}
|
||||
title="Sil"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Sil</span>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user