| | | 1 | | import type { ItemResponse, RoomResponse } from "~/api/client"; |
| | | 2 | | |
| | 0 | 3 | | export function TuiItemTable({ items, roomById, selectedId, onSelect, totalCount }: { |
| | | 4 | | items: ItemResponse[]; |
| | | 5 | | roomById: Record<number, RoomResponse | undefined>; |
| | | 6 | | selectedId?: number | null; |
| | | 7 | | onSelect: (item: ItemResponse) => void; |
| | | 8 | | totalCount: number; |
| | | 9 | | }) { |
| | 0 | 10 | | return ( |
| | | 11 | | <div className="tui-panel tui-table" style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}> |
| | | 12 | | <span className="tui-panel-title"> |
| | | 13 | | {`─[ items · ${items.length}${items.length !== totalCount ? ` of ${totalCount}` : ""} ]─`} |
| | | 14 | | </span> |
| | | 15 | | |
| | | 16 | | <div className="tui-table-scroll"> |
| | | 17 | | <div className="tui-table-head"> |
| | | 18 | | <span>ID</span> |
| | | 19 | | <span>NAME</span> |
| | | 20 | | <span>ROOM</span> |
| | | 21 | | <span>CAT</span> |
| | | 22 | | <span>UPD</span> |
| | | 23 | | </div> |
| | | 24 | | |
| | 0 | 25 | | {items.map(item => { |
| | 0 | 26 | | const sel = selectedId === item.id; |
| | 0 | 27 | | const room = item.roomId != null ? roomById[item.roomId] : undefined; |
| | 0 | 28 | | const updated = formatShortDate(item.updatedAtUtc ?? item.createdAtUtc); |
| | 0 | 29 | | return ( |
| | | 30 | | <div |
| | | 31 | | key={item.id} |
| | | 32 | | role="button" |
| | | 33 | | tabIndex={0} |
| | | 34 | | data-selected={sel ? "true" : undefined} |
| | 0 | 35 | | onClick={() => onSelect(item)} |
| | | 36 | | className="tui-table-row" |
| | | 37 | | > |
| | | 38 | | <span className="tui-table-id">{String(item.id ?? 0).padStart(3, "0")}</span> |
| | | 39 | | <span className="tui-table-name"> |
| | | 40 | | <span className="tui-table-arrow">{sel ? "▶ " : " "}</span> |
| | | 41 | | {item.name ?? "—"} |
| | | 42 | | </span> |
| | | 43 | | <span className="tui-table-dim">{room?.name ?? "—"}</span> |
| | | 44 | | <span className="tui-table-cat">{item.category ?? "—"}</span> |
| | | 45 | | <span className="tui-table-dim">{updated}</span> |
| | | 46 | | </div> |
| | | 47 | | ); |
| | | 48 | | })} |
| | | 49 | | </div> |
| | | 50 | | </div> |
| | | 51 | | ); |
| | | 52 | | } |
| | | 53 | | |
| | 0 | 54 | | function formatShortDate(iso?: string | null): string { |
| | 0 | 55 | | if (!iso) return "—"; |
| | 0 | 56 | | const d = new Date(iso); |
| | 0 | 57 | | if (isNaN(d.getTime())) return "—"; |
| | 0 | 58 | | const yyyy = d.getFullYear(); |
| | 0 | 59 | | const mm = String(d.getMonth() + 1).padStart(2, "0"); |
| | 0 | 60 | | const dd = String(d.getDate()).padStart(2, "0"); |
| | 0 | 61 | | return `${yyyy}-${mm}-${dd}`; |
| | | 62 | | } |