import React from 'react'; import AppLayout from '@/layouts/app-layout' import { User, type BreadcrumbItem } from '@/types'; import { Head, usePage, useForm, Link } from '@inertiajs/react'; 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'; import { Badge } from '@/components/ui/badge'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Users', href: route('apps.users.index'), }, { title: 'Edit User', href: '#', }, ]; interface IndexProps { user: User; roles: Role[]; [key: string]: unknown; } export default function Index() { const { user, roles } = usePage().props; const {data, setData, errors, processing, post, reset} = useForm({ name: user.name, username: user.username, email: user.email, password: '', password_confirmation: '', selectedRoles: user.roles.map((role: Role) => role.name), _method: 'put' }); const selectRole = (e: React.ChangeEvent) => { let roleIds = data.selectedRoles; if(roleIds.some((name) => name === e.target.value)) roleIds = roleIds.filter((name) => name !== e.target.value); else roleIds.push(e.target.value); setData('selectedRoles', roleIds); }; const selectAllRole = (e: React.ChangeEvent) => { const roleIds = roles.map(role => role.name); setData('selectedRoles', e.target.checked ? roleIds : []); } const storeData = (e: React.FormEvent) => { e.preventDefault(); post(route('apps.users.update', user.id), { onSuccess: () => { toast('Data has been saved.') reset() }, }); } return (

Edit User This form for edit user

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

{errors.name}

Username* setData('username', e.target.value)} placeholder="Input username"/>

{errors.username}

Email* setData('email', e.target.value)} placeholder="Input email"/>

{errors.email}

Password* setData('password', e.target.value)} placeholder="Input password"/>

{errors.password}

Password Confirmation* setData('password_confirmation', e.target.value)} placeholder="Input password confirmation"/>

{errors.password_confirmation}

Roles* selectAllRole(e as React.ChangeEvent)} checked={data.selectedRoles.length === roles.length}/> Role Permissions {roles.map((role, i) => (

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

{role.name}

{role.permissions.map((permission, i) => ( {permission.name} ))}

))}

{errors.selectedRoles}

) }