|
|
|
|
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 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>
|
|
|
|
|
)
|
|
|
|
|
}
|
