import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { Shield, ArrowLeft, Check, AlertCircle } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { Checkbox } from '@/Components/ui/checkbox'; import { FormEvent } from 'react'; interface Permission { id: number; name: string; } interface GroupedPermission { key: string; name: string; permissions: Permission[]; } interface Role { id: number; name: string; display_name: string; } interface Props { role: Role; groupedPermissions: GroupedPermission[]; currentPermissions: string[]; } export default function RoleEdit({ role, groupedPermissions, currentPermissions }: Props) { const { data, setData, put, processing, errors } = useForm({ name: role.name, display_name: role.display_name || '', permissions: currentPermissions, }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); put(route('roles.update', role.id)); }; const togglePermission = (name: string) => { if (data.permissions.includes(name)) { setData('permissions', data.permissions.filter(p => p !== name)); } else { setData('permissions', [...data.permissions, name]); } }; const toggleGroup = (groupPermissions: Permission[]) => { const groupNames = groupPermissions.map(p => p.name); const allSelected = groupNames.every(name => data.permissions.includes(name)); if (allSelected) { // Unselect all setData('permissions', data.permissions.filter(p => !groupNames.includes(p))); } else { // Select all const newPermissions = [...data.permissions]; groupNames.forEach(name => { if (!newPermissions.includes(name)) newPermissions.push(name); }); setData('permissions', newPermissions); } }; const translateAction = (permissionName: string) => { const parts = permissionName.split('.'); if (parts.length < 2) return permissionName; const action = parts[1]; const map: Record = { 'view': '檢視', 'create': '新增', 'edit': '編輯', 'delete': '刪除', 'publish': '發布', 'adjust': '調整', 'transfer': '調撥', 'safety_stock': '安全庫存設定', 'export': '匯出', 'complete': '完成', 'view_cost': '檢視成本', 'view_logs': '檢視日誌', }; return map[action] || action; }; return (
{/* Header Area */}

編輯角色

修改角色資料與權限設定

{/* Role Name */}
setData('display_name', e.target.value)} /> {errors.display_name && (

{errors.display_name}

)}

這是在介面上看到的名稱。

setData('name', e.target.value)} className="font-mono bg-gray-50" disabled={role.name === 'super-admin'} /> {errors.name && (

{errors.name}

)} {role.name === 'super-admin' ? (
超級管理員角色名稱不可修改
) : (

請使用英文字母與連字號，例如: warehouse-staff

)}
{/* Permissions Matrix */}

權限設定

{groupedPermissions.map((group) => { const allGroupSelected = group.permissions.every(p => data.permissions.includes(p.name)); return (
{group.name}
{group.permissions.map((permission) => (
togglePermission(permission.name)} />

{permission.name}

))}
); })}
); }