275 lines
13 KiB
TypeScript
275 lines
13 KiB
TypeScript
import { useState } from "react";
|
||
import { useNavigate, useParams } from "react-router-dom";
|
||
import { useRole, useRolePermissions, usePermissions, useAssignPermission, useRemovePermission } from "../core/_hooks";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||
import { Permission } from "@/types/auth";
|
||
import { ArrowRight, Plus, Trash2, Check } from "lucide-react";
|
||
import { Modal } from "@/components/ui/Modal";
|
||
|
||
const RolePermissionsPage = () => {
|
||
const navigate = useNavigate();
|
||
const { id = "" } = useParams();
|
||
const [showAssignModal, setShowAssignModal] = useState(false);
|
||
const [removePermissionId, setRemovePermissionId] = useState<string | null>(null);
|
||
|
||
const { data: role, isLoading: roleLoading } = useRole(id);
|
||
const { data: rolePermissions, isLoading: permissionsLoading } = useRolePermissions(id);
|
||
const { data: allPermissions, isLoading: allPermissionsLoading } = usePermissions();
|
||
const { mutate: assignPermission, isPending: assigning } = useAssignPermission();
|
||
const { mutate: removePermission, isPending: removing } = useRemovePermission();
|
||
|
||
const handleAssignPermission = (permissionId: number) => {
|
||
assignPermission({
|
||
roleId: id,
|
||
permissionId: permissionId.toString(),
|
||
});
|
||
};
|
||
|
||
const handleRemovePermission = (permissionId: number) => {
|
||
setRemovePermissionId(permissionId.toString());
|
||
};
|
||
|
||
const confirmRemovePermission = () => {
|
||
if (removePermissionId) {
|
||
removePermission({
|
||
roleId: id,
|
||
permissionId: removePermissionId,
|
||
}, {
|
||
onSuccess: () => {
|
||
setRemovePermissionId(null);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const cancelRemovePermission = () => {
|
||
setRemovePermissionId(null);
|
||
};
|
||
|
||
const isLoading = roleLoading || permissionsLoading;
|
||
|
||
if (isLoading) return <LoadingSpinner />;
|
||
if (!role) return <div className="text-red-600">نقش یافت نشد</div>;
|
||
|
||
const assignedPermissionIds = rolePermissions?.map(p => p.id) || [];
|
||
const availablePermissions = allPermissions?.filter(p => !assignedPermissionIds.includes(p.id)) || [];
|
||
|
||
return (
|
||
<div className="p-6">
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-4">
|
||
<Button
|
||
variant="secondary"
|
||
onClick={() => navigate('/roles')}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<ArrowRight className="h-4 w-4" />
|
||
بازگشت
|
||
</Button>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||
مدیریت دسترسیهای نقش
|
||
</h1>
|
||
<p className="text-gray-600 dark:text-gray-400">
|
||
{role.title}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
variant="primary"
|
||
onClick={() => setShowAssignModal(true)}
|
||
className="flex items-center gap-2"
|
||
disabled={availablePermissions.length === 0}
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
اختصاص دسترسی جدید
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* دسترسیهای تخصیص یافته */}
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||
دسترسیهای تخصیص یافته ({assignedPermissionIds.length})
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="p-6">
|
||
{permissionsLoading ? (
|
||
<div className="flex justify-center">
|
||
<LoadingSpinner />
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{rolePermissions && rolePermissions.length > 0 ? (
|
||
rolePermissions.map((permission: Permission) => (
|
||
<div
|
||
key={permission.id}
|
||
className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg"
|
||
>
|
||
<div className="flex-1">
|
||
<h4 className="font-medium text-green-900 dark:text-green-100">
|
||
{permission.title}
|
||
</h4>
|
||
<p className="text-sm text-green-700 dark:text-green-300">
|
||
{permission.description}
|
||
</p>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant="danger"
|
||
onClick={() => handleRemovePermission(permission.id)}
|
||
className="flex items-center gap-1 ml-3"
|
||
>
|
||
<Trash2 className="h-3 w-3" />
|
||
حذف
|
||
</Button>
|
||
</div>
|
||
))
|
||
) : (
|
||
<p className="text-center text-gray-500 dark:text-gray-400 py-8">
|
||
هیچ دسترسی تخصیص داده نشده است
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* دسترسیهای در دسترس */}
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||
دسترسیهای قابل تخصیص ({availablePermissions.length})
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="p-6">
|
||
{allPermissionsLoading ? (
|
||
<div className="flex justify-center">
|
||
<LoadingSpinner />
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{availablePermissions.length > 0 ? (
|
||
availablePermissions.map((permission: Permission) => (
|
||
<div
|
||
key={permission.id}
|
||
className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg"
|
||
>
|
||
<div className="flex-1">
|
||
<h4 className="font-medium text-gray-900 dark:text-gray-100">
|
||
{permission.title}
|
||
</h4>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
{permission.description}
|
||
</p>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant="primary"
|
||
onClick={() => handleAssignPermission(permission.id)}
|
||
className="flex items-center gap-1 ml-3"
|
||
loading={assigning}
|
||
>
|
||
<Plus className="h-3 w-3" />
|
||
اختصاص
|
||
</Button>
|
||
</div>
|
||
))
|
||
) : (
|
||
<p className="text-center text-gray-500 dark:text-gray-400 py-8">
|
||
تمام دسترسیها به این نقش تخصیص داده شده است
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Assign Permission Modal */}
|
||
<Modal
|
||
isOpen={showAssignModal}
|
||
onClose={() => setShowAssignModal(false)}
|
||
title="اختصاص دسترسی جدید"
|
||
size="lg"
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-gray-600 dark:text-gray-300">
|
||
دسترسی مورد نظر را برای تخصیص به نقش "{role.title}" انتخاب کنید:
|
||
</p>
|
||
|
||
<div className="max-h-96 overflow-y-auto space-y-3">
|
||
{availablePermissions.map((permission: Permission) => (
|
||
<div
|
||
key={permission.id}
|
||
className="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-600 rounded-lg"
|
||
>
|
||
<div className="flex-1">
|
||
<h4 className="font-medium text-gray-900 dark:text-gray-100">
|
||
{permission.title}
|
||
</h4>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
{permission.description}
|
||
</p>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant="primary"
|
||
onClick={() => {
|
||
handleAssignPermission(permission.id);
|
||
setShowAssignModal(false);
|
||
}}
|
||
className="flex items-center gap-1"
|
||
>
|
||
<Check className="h-3 w-3" />
|
||
انتخاب
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-3 pt-4">
|
||
<Button variant="secondary" onClick={() => setShowAssignModal(false)}>
|
||
انصراف
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
{/* Remove Permission Confirmation Modal */}
|
||
<Modal
|
||
isOpen={!!removePermissionId}
|
||
onClose={cancelRemovePermission}
|
||
title="تأیید حذف دسترسی"
|
||
size="sm"
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-gray-600 dark:text-gray-300">
|
||
آیا از حذف این دسترسی از نقش اطمینان دارید؟
|
||
</p>
|
||
<div className="flex justify-end gap-3">
|
||
<Button variant="secondary" onClick={cancelRemovePermission}>
|
||
انصراف
|
||
</Button>
|
||
<Button
|
||
variant="danger"
|
||
onClick={confirmRemovePermission}
|
||
loading={removing}
|
||
>
|
||
حذف دسترسی
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RolePermissionsPage;
|