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.
96 lines
3.4 KiB
React
96 lines
3.4 KiB
React
1 year ago
|
import React, { useState, useEffect } from 'react'
|
||
|
|
import { router, usePage } from '@inertiajs/react'
|
||
|
|
import { Spinner } from 'flowbite-react'
|
||
|
|
import { usePrevious } from 'react-use'
|
||
|
|
|
||
|
|
import Modal from '@/Components/Modal'
|
||
|
|
import SearchInput from '@/Components/SearchInput'
|
||
|
|
import Pagination from '@/Components/Pagination'
|
||
|
|
|
||
|
|
export default function CustomerSelectionModal(props) {
|
||
|
|
const { modalState, onItemSelected } = props
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
const {
|
||
|
|
props: {
|
||
|
|
customers: { data, links },
|
||
|
|
},
|
||
|
|
} = usePage()
|
||
|
|
|
||
|
|
const [search, setSearch] = useState('')
|
||
|
|
const preValue = usePrevious(search)
|
||
|
|
const params = { customer_q: search }
|
||
|
|
|
||
|
|
const handleItemSelected = (item) => {
|
||
|
|
onItemSelected(item)
|
||
|
|
modalState.toggle()
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (preValue) {
|
||
|
|
router.get(route(route().current()), params, {
|
||
|
|
replace: true,
|
||
|
|
preserveState: true,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [search])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
router.on('start', () => setLoading(true))
|
||
|
|
router.on('finish', () => setLoading(false))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
isOpen={modalState.isOpen}
|
||
|
|
toggle={modalState.toggle}
|
||
|
|
title={'Customer'}
|
||
|
|
>
|
||
|
|
<SearchInput
|
||
|
|
onChange={(e) => setSearch(e.target.value)}
|
||
|
|
value={search}
|
||
|
|
/>
|
||
|
|
{loading ? (
|
||
|
|
<div className="justify-center flex flex-row w-full py-32">
|
||
|
|
<Spinner size="xl" />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="overflow-auto">
|
||
|
|
<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">
|
||
|
|
Name
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{data.map((customer) => (
|
||
|
|
<tr
|
||
|
|
className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
|
||
|
|
key={customer.id}
|
||
|
|
onClick={() =>
|
||
|
|
handleItemSelected(customer)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<td
|
||
|
|
scope="row"
|
||
|
|
className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap hover:bg-gray-200"
|
||
|
|
>
|
||
|
|
{customer.name}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div className="w-full flex items-center justify-center">
|
||
|
|
<Pagination links={links} params={params} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Modal>
|
||
|
|
)
|
||
|
|
}
|