59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { useState } from 'react'
|
||
import { Link } from 'react-router'
|
||
import { useDeleteObject, useObjectsList } from '../../hooks/useObjects'
|
||
import { Button } from '../../components/Button'
|
||
|
||
export function ObjectListPage() {
|
||
const [search, setSearch] = useState('')
|
||
const { data: objects, isLoading } = useObjectsList(search)
|
||
const deleteObject = useDeleteObject()
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<h1 className="text-xl font-semibold">Объекты</h1>
|
||
<Link to="/admin/objects/new">
|
||
<Button>Добавить</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<input
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
placeholder="Поиск по номеру или названию..."
|
||
className="w-full rounded-md border border-slate-300 px-3 py-2 dark:border-slate-700 dark:bg-slate-900"
|
||
/>
|
||
|
||
{isLoading && <p className="text-slate-500">Загрузка...</p>}
|
||
|
||
<div className="divide-y divide-slate-200 dark:divide-slate-800">
|
||
{objects?.map((object) => (
|
||
<div key={object.id} className="flex items-center justify-between gap-2 py-3">
|
||
<div>
|
||
<p className="font-medium">{object.name}</p>
|
||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||
{object.inventory_number}
|
||
{object.box && ` · ${object.box.name}`}
|
||
</p>
|
||
</div>
|
||
<div className="flex shrink-0 gap-2">
|
||
<Link to={`/admin/objects/${object.id}/edit`}>
|
||
<Button variant="secondary">Изменить</Button>
|
||
</Link>
|
||
<Button
|
||
variant="danger"
|
||
onClick={() => {
|
||
if (confirm(`Удалить объект «${object.name}»?`)) deleteObject.mutate(object.id)
|
||
}}
|
||
>
|
||
Удалить
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{objects?.length === 0 && !isLoading && <p className="py-4 text-slate-500">Ничего не найдено</p>}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|