107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { useBoilers } from '../hooks/swrHooks'
|
||
import { Stack, Text } from '@mantine/core'
|
||
import CustomTable from '../components/CustomTable'
|
||
|
||
function Boilers() {
|
||
const [boilersPage, setBoilersPage] = useState(1)
|
||
const [boilerSearch, setBoilerSearch] = useState("")
|
||
const [debouncedBoilerSearch, setDebouncedBoilerSearch] = useState("")
|
||
const { boilers } = useBoilers(10, boilersPage, debouncedBoilerSearch)
|
||
|
||
useEffect(() => {
|
||
const handler = setTimeout(() => {
|
||
setDebouncedBoilerSearch(boilerSearch)
|
||
}, 500)
|
||
|
||
return () => {
|
||
clearTimeout(handler)
|
||
}
|
||
}, [boilerSearch])
|
||
|
||
useEffect(() => {
|
||
setBoilersPage(1)
|
||
setBoilerSearch("")
|
||
}, [])
|
||
|
||
return (
|
||
<Stack w={'100%'} h={'100%'} p='sm'>
|
||
<Text size="xl" fw={600}>
|
||
Котельные
|
||
</Text>
|
||
|
||
{boilers &&
|
||
<CustomTable data={boilers} columns={[
|
||
{
|
||
accessorKey: 'id_object',
|
||
header: 'ID',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'boiler_name',
|
||
header: 'Название',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'boiler_code',
|
||
header: 'Код',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'id_city',
|
||
header: 'Город',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'activity',
|
||
header: 'Активен',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
]} />
|
||
}
|
||
|
||
{/* {boilers &&
|
||
<Table highlightOnHover>
|
||
<Table.Thead>
|
||
<Table.Tr>
|
||
{boilersColumns.map(column => (
|
||
<Table.Th key={column.field}>{column.headerName}</Table.Th>
|
||
))}
|
||
</Table.Tr>
|
||
</Table.Thead>
|
||
<Table.Tbody>
|
||
{boilers.map((boiler: IBoiler) => (
|
||
<Table.Tr key={boiler.id_object}>
|
||
{boilersColumns.map(column => {
|
||
if (column.field === 'activity') {
|
||
return (
|
||
boiler.activity ? (
|
||
<Table.Td key={`${boiler.id_object}-${boiler[column.field]}`}>
|
||
<Badge fullWidth variant="light">
|
||
Активен
|
||
</Badge>
|
||
</Table.Td>
|
||
|
||
) : (
|
||
<Table.Td key={`${boiler.id_object}-${boiler[column.field]}`}>
|
||
<Badge color="gray" fullWidth variant="light">
|
||
Отключен
|
||
</Badge>
|
||
</Table.Td>
|
||
)
|
||
)
|
||
}
|
||
else return (
|
||
<Table.Td key={`${boiler.id_object}-${column.field}`}>{boiler[column.field as keyof IBoiler]}</Table.Td>
|
||
)
|
||
})}
|
||
</Table.Tr>
|
||
))}
|
||
</Table.Tbody>
|
||
</Table>
|
||
} */}
|
||
</Stack>
|
||
)
|
||
}
|
||
|
||
export default Boilers |