| | | 1 | | import { Form, Link } from "react-router"; |
| | | 2 | | import { routes } from "~/constants/routes"; |
| | | 3 | | import type { ItemResponse } from "~/api/client"; |
| | | 4 | | import { ItemThumb } from "~/components/item-thumb"; |
| | | 5 | | import { CategoryTag } from "~/components/category-tag"; |
| | | 6 | | |
| | | 7 | | type ItemsListProps = { |
| | | 8 | | locationId: number; |
| | | 9 | | roomId: number; |
| | | 10 | | roomName: string; |
| | | 11 | | items: ItemResponse[]; |
| | | 12 | | }; |
| | | 13 | | |
| | 3 | 14 | | export function ItemsList({ locationId, roomId, roomName, items }: ItemsListProps) { |
| | 3 | 15 | | if (items.length === 0) { |
| | 1 | 16 | | return ( |
| | | 17 | | <div className="card-empty"> |
| | | 18 | | <p className="text-muted">No items in {roomName} yet.</p> |
| | | 19 | | <Link to={routes.locations.roomItemsNew(locationId, roomId)} className="link-text" style={{ display: "inline-blo |
| | | 20 | | Add the first item → |
| | | 21 | | </Link> |
| | | 22 | | </div> |
| | | 23 | | ); |
| | | 24 | | } |
| | | 25 | | |
| | 2 | 26 | | return ( |
| | | 27 | | <table className="console-table"> |
| | | 28 | | <thead> |
| | | 29 | | <tr> |
| | | 30 | | <th>Item</th> |
| | | 31 | | <th>Category</th> |
| | | 32 | | <th>Notes</th> |
| | | 33 | | <th style={{ width: 1, whiteSpace: "nowrap" }}></th> |
| | | 34 | | </tr> |
| | | 35 | | </thead> |
| | | 36 | | <tbody> |
| | 2 | 37 | | {items.map((item) => ( |
| | 2 | 38 | | <tr key={item.id}> |
| | | 39 | | <td> |
| | | 40 | | <div style={{ display: "flex", alignItems: "center", gap: 10 }}> |
| | | 41 | | <ItemThumb name={item.name ?? ""} /> |
| | | 42 | | <div style={{ display: "flex", flexDirection: "column", gap: 2 }}> |
| | | 43 | | <span style={{ fontWeight: 500 }}>{item.name ?? "Unnamed"}</span> |
| | | 44 | | {item.description && ( |
| | | 45 | | <span style={{ fontSize: 11, color: "var(--c-fg-3)" }}>{item.description}</span> |
| | | 46 | | )} |
| | | 47 | | </div> |
| | | 48 | | </div> |
| | | 49 | | </td> |
| | | 50 | | <td> |
| | | 51 | | {item.category ? <CategoryTag name={item.category} /> : <span style={{ color: "var(--c-fg-3)" }}>—</span>} |
| | | 52 | | </td> |
| | | 53 | | <td style={{ color: "var(--c-fg-3)", fontSize: 12 }}> |
| | | 54 | | {item.notes || "—"} |
| | | 55 | | </td> |
| | | 56 | | <td> |
| | | 57 | | <div style={{ display: "flex", alignItems: "center", gap: 6 }}> |
| | | 58 | | <Link to={routes.locations.itemEdit(locationId, roomId, item.id!)} className="link-chip"> |
| | | 59 | | Edit |
| | | 60 | | </Link> |
| | | 61 | | <Form |
| | | 62 | | method="post" |
| | 0 | 63 | | onSubmit={(e) => { |
| | 0 | 64 | | if (!confirm("Delete this item?")) e.preventDefault(); |
| | | 65 | | }} |
| | | 66 | | > |
| | | 67 | | <input type="hidden" name="_action" value="delete" /> |
| | | 68 | | <input type="hidden" name="id" value={item.id} /> |
| | | 69 | | <button type="submit" className="link-chip" style={{ color: "var(--c-danger)", borderColor: "transpare |
| | | 70 | | Delete |
| | | 71 | | </button> |
| | | 72 | | </Form> |
| | | 73 | | </div> |
| | | 74 | | </td> |
| | | 75 | | </tr> |
| | | 76 | | ))} |
| | | 77 | | </tbody> |
| | | 78 | | </table> |
| | | 79 | | ); |
| | | 80 | | } |