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
JavaScript
143 lines
4.8 KiB
JavaScript
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>
|
|
);
|
|
}
|