import { Head, router } from '@inertiajs/react'; import { Save } from 'lucide-react'; import { useState } from 'react'; import { PageHeader } from '@/components/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { update } from '@/routes/admin/developer/roles'; import type { PermissionGroups, RoleWithPermissions, } from '@/types/role-permission'; import { formatRoleLabel } from '@/types/role-permission'; type Props = { roles: RoleWithPermissions[]; permissionGroups: PermissionGroups; }; export default function RolePermissionIndex({ roles, permissionGroups, }: Props) { const [selectedRoleId, setSelectedRoleId] = useState( roles[0]?.id, ); const selectedRole = roles.find((role) => role.id === selectedRoleId); const [selected, setSelected] = useState( selectedRole?.permissions ?? [], ); const [processing, setProcessing] = useState(false); function handleSelectRole(id: string) { const role = roles.find((r) => r.id === Number(id)); setSelectedRoleId(role?.id); setSelected(role?.permissions ?? []); } function toggle(name: string, checked: boolean) { setSelected((prev) => checked ? [...prev, name] : prev.filter((p) => p !== name), ); } function toggleGroup(names: string[], checked: boolean) { setSelected((prev) => { const withoutGroup = prev.filter((p) => !names.includes(p)); return checked ? [...withoutGroup, ...names] : withoutGroup; }); } function handleSave() { if (!selectedRole) { return; } setProcessing(true); router.put( update.url(selectedRole.id), { permissions: selected }, { preserveScroll: true, onFinish: () => setProcessing(false), }, ); } return ( <>
Simpan ) } />
{selectedRole && ( {selected.length} permission )}
{selectedRole && (
{Object.entries(permissionGroups).map( ([group, names]) => { const allChecked = names.every((name) => selected.includes(name), ); return ( {group} {names.map((name) => ( ))} ); }, )}
)}
); }