import React, { useEffect, useState } from 'react' import { Head, Link, useForm, usePage } from '@inertiajs/react' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import FormInput from '@/Components/FormInput' import Button from '@/Components/Button' import { isEmpty } from 'lodash' import Checkbox from '@/Components/Checkbox' import { router } from '@inertiajs/react' export default function Role(props) { const { props: { errors }, } = usePage() const { permissions, role } = props const [processing, setProcessing] = useState(false) const [name, setName] = useState('') const [permins, setPermins] = useState( permissions.map((permin) => { return { ...permin, checked: false } }) ) const handleCheckPermission = (e) => { setPermins( permins.map((item) => { if (item.name === e.target.name) { return { ...item, checked: !item.checked, } } return item }) ) } const handleCheckAll = (e) => { setPermins( permins.map((item) => { return { ...item, checked: e.target.checked, } }) ) } const handleSubmit = () => { if (isEmpty(role) === false) { router.put( route('roles.update', role), { name: name, permissions: permins.filter((item) => item.checked), }, { onStart: () => setProcessing(true), onFinish: (e) => { setProcessing(false) }, } ) return } router.post( route('roles.store'), { name: name, permissions: permins.filter((item) => item.checked), }, { onStart: () => setProcessing(true), onFinish: (e) => { setProcessing(false) }, } ) } useEffect(() => { if (!isEmpty(role)) { setName(role.name) setPermins( permins.map((item) => { const isExists = role.permissions.find( (permit) => permit.id === item.id ) if (isExists) { return { ...item, checked: true, } } return item }) ) } }, [role]) return (
setName(e.target.value)} label="Nama" error={errors.name} />
{permins.map((item) => ( ))}
{errors.permissions && (

{errors.permissions}

)}
) }