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 { FormEvent } from 'react'; import PermissionSelector, { GroupedPermission } from './PermissionSelector'; 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)); }; 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 */}

權限設定

setData('permissions', permissions)} />
); }