You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.8 KiB
React

1 year ago
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 (
<AuthenticatedLayout
auth={props.auth}
errors={props.errors}
flash={props.flash}
page={'System'}
action={'Role'}
>
<Head title="Role" />
<div>
<div className="mx-auto sm:px-6 lg:px-8 ">
<div className="p-6 shadow-sm sm:rounded-lg bg-white dark:bg-gray-800 space-y-4">
<FormInput
name="name"
value={name}
onChange={e => setName(e.target.value)}
label="Nama"
error={errors.name}
/>
<Checkbox
label={"Check All"}
onChange={handleCheckAll}
/>
<div
className={`grid grid-cols-1 md:grid-cols-4 border border-rounded border-gray-400 rounded-lg p-2 gap-2 ${errors.permissions ? 'border-red-600' : 'border-gray-400'}`}
>
{permins.map(item => (
<Checkbox
key={item.id}
label={item.label}
value={item.checked}
name={item.name}
onChange={handleCheckPermission}
/>
))}
</div>
{errors.permissions && (
<p className="mb-2 text-sm text-red-600 dark:text-red-500">{errors.permissions}</p>
)}
<div className="flex items-center">
<Button
onClick={handleSubmit}
processing={processing}
>
Simpan
</Button>
<Link href={route('roles.index')}>
<Button
type="secondary"
>
Kembali
</Button>
</Link>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}