import React, { useState, useEffect } from 'react' import { Head } from '@inertiajs/react' import { router } from '@inertiajs/react' import { usePrevious } from 'react-use' import { toast } from 'react-toastify' import { useModalState } from '@/Hooks' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import Pagination from '@/Components/Pagination' import ModalConfirm from '@/Components/ModalConfirm' import UserFormModal from './UserFormModal' import { hasPermission } from '@/utils' export default function Users(props) { const { data: users, links } = props.users const [search, setSearch] = useState('') const preValue = usePrevious(search) const [user, setUser] = useState(null) const formModal = useModalState(false) const toggle = (user = null) => { setUser(user) formModal.toggle() } const confirmModal = useModalState(false) const handleDelete = (user) => { confirmModal.setData(user) confirmModal.toggle() } const onDelete = () => { const user = confirmModal.data if(user != null) { router.delete(route('users.destroy', user), { onSuccess: () => toast.success('The Data has been deleted'), }) } } const canCreate = hasPermission('create-user', props.auth.user) const canUpdate = hasPermission('update-user', props.auth.user) const canDelete = hasPermission('delete-user', props.auth.user) useEffect(() => { if (preValue) { router.get( route(route().current()), { q: search }, { replace: true, preserveState: true, } ) } }, [search]) return (
{canCreate && (
toggle()} > Tambah
)}
setSearch(e.target.value) } placeholder="Search" />
{users?.map((user) => ( ))}
Id Nama Email Role Group Region
{user.id} {user.name} {user.email} {user?.role?.name} {user?.region?.group?.name} {user.region ? `${user?.region?.name} (${user?.region?.group?.name})` : ''} {canUpdate && (
toggle(user) } > Edit
)} {+user.is_admin === 0 && ( <> {canDelete && ( <> {props.auth.user.id !== user.id && (
handleDelete(user) } > Delete
)} )} )}
) }