import React from 'react'; import AppLayout from '@/layouts/app-layout' import { type BreadcrumbItem } from '@/types'; import { Head, usePage, useForm, Link } from '@inertiajs/react'; import { Permission } from '@/types/permission'; import { toast } from 'sonner'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Table, TableCard, TableBody, TableCell, TableRow, TableHeader, TableHead } from '@/components/ui/table' import { Button } from '@/components/ui/button' import { ArrowLeft, LoaderCircle, Save } from 'lucide-react' import { Checkbox } from '@/components/ui/checkbox'; import { Role } from '@/types/role'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Roles', href: route('apps.roles.index'), }, { title: 'Edit Role', href: '#', }, ]; interface IndexProps { permissions: Permission[]; role: Role [key: string]: unknown; } export default function Index() { const { role, permissions } = usePage().props; const {data, setData, errors, processing, post, reset} = useForm({ name: role.name, selectedPermissions: role.permissions.map((permission : Permission) => permission.name), _method: 'put' }); const selectedPermission = (e: React.ChangeEvent) => { let permissionIds = data.selectedPermissions; if(permissionIds.some((name) => name === e.target.value)) permissionIds = permissionIds.filter((name) => name !== e.target.value); else permissionIds.push(e.target.value); setData('selectedPermissions', permissionIds); }; const selectAllPermission = (e: React.ChangeEvent) => { const permissionsIds = permissions.map(permission => permission.name); setData('selectedPermissions', e.target.checked ? permissionsIds : []); } const storeData = (e: React.FormEvent) => { e.preventDefault(); post(route('apps.roles.update', role.id), { onSuccess: () => { toast('Data has been saved.') reset() }, }); } return (

Edit Role This form for edit role

Role Name* setData('name', e.target.value)} placeholder="Input roles name"/>

{errors.name}

Permissions* selectAllPermission(e as React.ChangeEvent)} checked={data.selectedPermissions.length === permissions.length}/> Permission Name {permissions.map((permission, i) => (

selectedPermission(e as React.ChangeEvent)} key={i} value={permission.name} id={`permission-${i}`}/>

{permission.name} ))}

{errors.selectedPermissions}

) }