| | | 1 | | import { Form, Link } from "react-router"; |
| | | 2 | | import { routes } from "~/constants/routes"; |
| | | 3 | | import type { RoomResponse } from "~/api/client"; |
| | | 4 | | |
| | | 5 | | type RoomsListProps = { |
| | | 6 | | locationId: number; |
| | | 7 | | locationName: string; |
| | | 8 | | rooms: RoomResponse[]; |
| | | 9 | | }; |
| | | 10 | | |
| | 0 | 11 | | export function RoomsList({ locationId, locationName, rooms }: RoomsListProps) { |
| | 0 | 12 | | if (rooms.length === 0) { |
| | 0 | 13 | | return ( |
| | | 14 | | <div className="card-empty"> |
| | | 15 | | <p className="text-muted">No rooms in {locationName} yet.</p> |
| | | 16 | | <Link to={routes.locations.roomsNew(locationId)} className="link-text" style={{ display: "inline-block", marginT |
| | | 17 | | Add the first room → |
| | | 18 | | </Link> |
| | | 19 | | </div> |
| | | 20 | | ); |
| | | 21 | | } |
| | | 22 | | |
| | 0 | 23 | | return ( |
| | | 24 | | <table className="console-table"> |
| | | 25 | | <thead> |
| | | 26 | | <tr> |
| | | 27 | | <th>Name</th> |
| | | 28 | | <th>Description</th> |
| | | 29 | | <th style={{ width: 1, whiteSpace: "nowrap" }}></th> |
| | | 30 | | </tr> |
| | | 31 | | </thead> |
| | | 32 | | <tbody> |
| | 0 | 33 | | {rooms.map((room) => ( |
| | 0 | 34 | | <tr key={room.id}> |
| | | 35 | | <td> |
| | | 36 | | <span style={{ fontWeight: 500 }}>{room.name ?? "Unnamed"}</span> |
| | | 37 | | </td> |
| | | 38 | | <td style={{ color: "var(--c-fg-3)", fontSize: 12 }}> |
| | | 39 | | {room.description || "—"} |
| | | 40 | | </td> |
| | | 41 | | <td> |
| | | 42 | | <div style={{ display: "flex", alignItems: "center", gap: 6 }}> |
| | | 43 | | <Link to={routes.locations.roomItems(locationId, room.id!)} className="link-chip"> |
| | | 44 | | Items |
| | | 45 | | </Link> |
| | | 46 | | <Link to={routes.locations.roomEdit(locationId, room.id!)} className="link-chip"> |
| | | 47 | | Edit |
| | | 48 | | </Link> |
| | | 49 | | <Form |
| | | 50 | | method="post" |
| | 0 | 51 | | onSubmit={(e) => { |
| | 0 | 52 | | if (!confirm("Delete this room and all its items?")) e.preventDefault(); |
| | | 53 | | }} |
| | | 54 | | > |
| | | 55 | | <input type="hidden" name="_action" value="delete" /> |
| | | 56 | | <input type="hidden" name="id" value={room.id} /> |
| | | 57 | | <button type="submit" className="link-chip" style={{ color: "var(--c-danger)", borderColor: "transpare |
| | | 58 | | Delete |
| | | 59 | | </button> |
| | | 60 | | </Form> |
| | | 61 | | </div> |
| | | 62 | | </td> |
| | | 63 | | </tr> |
| | | 64 | | ))} |
| | | 65 | | </tbody> |
| | | 66 | | </table> |
| | | 67 | | ); |
| | | 68 | | } |