first commit
This commit is contained in:
Beyhan Oğur
90
components/users/deleted-user-table.tsx
Normal file
90
components/users/deleted-user-table.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCcw, ShieldAlert } from "lucide-react";
|
||||
import { User } from "@/lib/features/auth/authSlice";
|
||||
import { getAvatarUrl } from "@/lib/utils";
|
||||
|
||||
interface DeletedUserTableProps {
|
||||
users: (User & { deleted_at?: string })[];
|
||||
onRestore: (id: string) => void;
|
||||
onHardDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export function DeletedUserTable({ users, onRestore, onHardDelete }: DeletedUserTableProps) {
|
||||
return (
|
||||
<div className="rounded-md border border-destructive/20 bg-destructive/5">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-14">Avatar</TableHead>
|
||||
<TableHead>Username (Silinmiş)</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Silinme Tarihi</TableHead>
|
||||
<TableHead className="text-right">İşlemler</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
|
||||
Çöp kutusu boş.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
<Avatar className="h-9 w-9 grayscale opacity-50">
|
||||
<AvatarImage src={getAvatarUrl(user.avatar_url)} alt={user.username} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{user.username?.slice(0, 2).toUpperCase() || "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-muted-foreground line-through">
|
||||
{user.username}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{user.email}</TableCell>
|
||||
<TableCell className="text-muted-foreground text-sm">
|
||||
{user.deleted_at ? new Date(user.deleted_at).toLocaleString('tr-TR') : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="inline-flex rounded-md border border-input bg-background [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:first-child]:border-r [&>button:first-child]:border-input">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-green-600 hover:text-green-700 hover:bg-green-100 dark:hover:bg-green-900/20"
|
||||
onClick={() => onRestore(user.id)}
|
||||
title="Geri Yükle"
|
||||
>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
<span className="sr-only">Geri Yükle</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => onHardDelete(user.id)}
|
||||
title="Kalıcı Sil (Hard)"
|
||||
>
|
||||
<ShieldAlert className="h-4 w-4" />
|
||||
<span className="sr-only">Kalıcı Sil</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
190
components/users/user-dialog.tsx
Normal file
190
components/users/user-dialog.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { CreateUserRequest, UpdateUserRequest } from "@/lib/features/users/usersSlice";
|
||||
import { User } from "@/lib/features/auth/authSlice";
|
||||
import { getAvatarUrl } from "@/lib/utils";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface UserDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
user?: User | null;
|
||||
onSubmit: (data: CreateUserRequest | UpdateUserRequest) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function UserDialog({ open, onOpenChange, user, onSubmit, isLoading }: UserDialogProps) {
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [role, setRole] = useState("user");
|
||||
const [avatar, setAvatar] = useState<File | null>(null);
|
||||
const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setUsername(user.username);
|
||||
setEmail(user.email);
|
||||
setPassword("");
|
||||
setRole(user.roles?.[0]?.name || "user");
|
||||
setAvatar(null);
|
||||
setAvatarPreview(null);
|
||||
} else {
|
||||
setUsername("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setRole("user");
|
||||
setAvatar(null);
|
||||
setAvatarPreview(null);
|
||||
}
|
||||
}, [user, open]);
|
||||
|
||||
const onAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0] || null;
|
||||
setAvatar(file);
|
||||
if (avatarPreview) URL.revokeObjectURL(avatarPreview);
|
||||
setAvatarPreview(file ? URL.createObjectURL(file) : null);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const roles = [role];
|
||||
|
||||
if (user) {
|
||||
const updateData: UpdateUserRequest = {
|
||||
id: user.id,
|
||||
username,
|
||||
email,
|
||||
roles
|
||||
};
|
||||
if (password) updateData.password = password;
|
||||
if (avatar) updateData.avatar = avatar;
|
||||
onSubmit(updateData);
|
||||
} else {
|
||||
const createData: CreateUserRequest = {
|
||||
username,
|
||||
email,
|
||||
password,
|
||||
roles,
|
||||
avatar: avatar || undefined
|
||||
};
|
||||
onSubmit(createData);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{user ? "Kullanıcıyı Düzenle" : "Yeni Kullanıcı Ekle"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{user ? "Kullanıcı bilgilerini güncelleyin." : "Yeni bir kullanıcı oluşturun."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="username" className="text-right">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="col-span-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="email" className="text-right">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="col-span-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="password" className="text-right">
|
||||
Şifre
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="col-span-3"
|
||||
placeholder={user ? "Değiştirmek için girin" : "Şifre"}
|
||||
required={!user}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="role" className="text-right">
|
||||
Rol
|
||||
</Label>
|
||||
<Select onValueChange={setRole} value={role}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Rol Seçin" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">User</SelectItem>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="avatar" className="text-right">
|
||||
Avatar
|
||||
</Label>
|
||||
<div className="col-span-3 flex items-center gap-4">
|
||||
<Avatar className="h-14 w-14">
|
||||
<AvatarImage
|
||||
src={avatarPreview ?? (user ? getAvatarUrl(user.avatar_url) : undefined)}
|
||||
alt={username || "Avatar"}
|
||||
/>
|
||||
<AvatarFallback className="text-lg">
|
||||
{username?.slice(0, 2).toUpperCase() || "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Input
|
||||
id="avatar"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={onAvatarChange}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
99
components/users/user-table.tsx
Normal file
99
components/users/user-table.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Edit, Trash2, ShieldAlert } from "lucide-react";
|
||||
import { User } from "@/lib/features/auth/authSlice";
|
||||
import { getAvatarUrl } from "@/lib/utils";
|
||||
|
||||
interface UserTableProps {
|
||||
users: User[];
|
||||
onEdit: (user: User) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onHardDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export function UserTable({ users, onEdit, onDelete, onHardDelete }: UserTableProps) {
|
||||
return (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-14">Avatar</TableHead>
|
||||
<TableHead>Username</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Roller</TableHead>
|
||||
<TableHead className="text-right">İşlemler</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="h-24 text-center">
|
||||
Kullanıcı bulunamadı.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={getAvatarUrl(user.avatar_url)} alt={user.username} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{user.username?.slice(0, 2).toUpperCase() || "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{user.username}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>
|
||||
{user.roles?.map((r) => r.name).join(", ") || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="inline-flex rounded-md border border-input bg-background [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button]:border-r [&>button:last-child]:border-r-0 [&>button]:border-input">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(user)}
|
||||
className="h-9 w-9"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
<span className="sr-only">Düzenle</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-orange-500 hover:text-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/20"
|
||||
onClick={() => onDelete(user.id)}
|
||||
title="Sil (Soft)"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Sil</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => onHardDelete(user.id)}
|
||||
title="Kalıcı Sil (Hard)"
|
||||
>
|
||||
<ShieldAlert className="h-4 w-4" />
|
||||
<span className="sr-only">Kalıcı Sil</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user