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.

87 lines
2.9 KiB
React

import React, { useEffect, useState } from 'react'
import { usePrevious } from 'react-use'
import { router } from '@inertiajs/react'
import Modal from '@/Components/Modal'
import Pagination from '@/Components/Pagination'
import SearchInput from '@/Components/SearchInput'
export default function LocationModal(props) {
const {
modalState,
locations: { data, links },
onItemClick,
} = props
const [search, setSearch] = useState('')
const preValue = usePrevious(search)
const handleOnItemClick = (location) => {
onItemClick(location)
modalState.toggle()
}
const params = { location_q: search }
useEffect(() => {
if (preValue) {
router.get(
route(route().current()),
{ location_q: search },
{
replace: true,
preserveState: true,
}
)
}
}, [search])
return (
<Modal
isOpen={modalState.isOpen}
toggle={modalState.toggle}
title={'Lokasi'}
>
<div className="w-full flex flex-row">
<SearchInput
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 mb-4">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="py-3 px-6">
Nama
</th>
<th scope="col" className="py-3 px-6">
Deskripsi
</th>
</tr>
</thead>
<tbody>
{data.map((location) => (
<tr
className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-200"
key={location.id}
onClick={() => handleOnItemClick(location)}
>
<td
scope="row"
className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
{location.name}
</td>
<td className="py-4 px-6">
{location.description}
</td>
</tr>
))}
</tbody>
</table>
<div className="w-full flex flex-row justify-center">
<Pagination links={links} params={params} />
</div>
</Modal>
)
}