| | | 1 | | import { Form, Link } from "react-router"; |
| | | 2 | | import type { ItemResponse } from "~/api/client"; |
| | | 3 | | |
| | | 4 | | type ItemFormProps = { |
| | | 5 | | title: string; |
| | | 6 | | submitLabel: string; |
| | | 7 | | error?: string; |
| | | 8 | | item?: ItemResponse | null; |
| | | 9 | | roomId: number; |
| | | 10 | | cancelTo: string; |
| | | 11 | | }; |
| | | 12 | | |
| | 4 | 13 | | export function ItemForm({ title, submitLabel, error, item, roomId: _roomId, cancelTo }: ItemFormProps) { |
| | 4 | 14 | | if (item === null) { |
| | 1 | 15 | | return ( |
| | | 16 | | <div className="card-padded"> |
| | | 17 | | <p className="text-muted">Item not found.</p> |
| | | 18 | | <Link to={cancelTo} className="link-text" style={{ display: "inline-block", marginTop: 8 }}> |
| | | 19 | | Back to items |
| | | 20 | | </Link> |
| | | 21 | | </div> |
| | | 22 | | ); |
| | | 23 | | } |
| | | 24 | | |
| | 3 | 25 | | return ( |
| | | 26 | | <div className="card-padded"> |
| | | 27 | | <h2 className="card-title">{title}</h2> |
| | | 28 | | <Form method="post" className="form-group"> |
| | | 29 | | {error && <p className="text-error">{error}</p>} |
| | | 30 | | <div className="form-field"> |
| | | 31 | | <label htmlFor="name" className="form-label">Name</label> |
| | | 32 | | <input id="name" name="name" type="text" required autoFocus={!item} |
| | | 33 | | defaultValue={item?.name ?? ""} className="form-input" placeholder="e.g. Vintage Lamp" /> |
| | | 34 | | </div> |
| | | 35 | | <div className="form-field"> |
| | | 36 | | <label htmlFor="description" className="form-label">Description (optional)</label> |
| | | 37 | | <textarea id="description" name="description" rows={2} |
| | | 38 | | defaultValue={item?.description ?? ""} className="form-input" placeholder="e.g. Brass table lamp, 1980s" /> |
| | | 39 | | </div> |
| | | 40 | | <div className="form-field"> |
| | | 41 | | <label htmlFor="category" className="form-label">Category (optional)</label> |
| | | 42 | | <input id="category" name="category" type="text" |
| | | 43 | | defaultValue={item?.category ?? ""} className="form-input" placeholder="e.g. Electronics, Furniture" /> |
| | | 44 | | </div> |
| | | 45 | | <div className="form-field"> |
| | | 46 | | <label htmlFor="notes" className="form-label">Notes (optional)</label> |
| | | 47 | | <textarea id="notes" name="notes" rows={2} |
| | | 48 | | defaultValue={item?.notes ?? ""} className="form-input" placeholder="e.g. Needs new shade" /> |
| | | 49 | | </div> |
| | | 50 | | <div className="form-actions"> |
| | | 51 | | <button type="submit" className="btn-primary">{submitLabel}</button> |
| | | 52 | | <Link to={cancelTo} className="btn-secondary">Cancel</Link> |
| | | 53 | | </div> |
| | | 54 | | </Form> |
| | | 55 | | {item?.id != null && ( |
| | | 56 | | <Form |
| | | 57 | | method="post" |
| | | 58 | | style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--c-border)" }} |
| | 0 | 59 | | onSubmit={(e) => { if (!confirm("Delete this item?")) e.preventDefault(); }} |
| | | 60 | | > |
| | | 61 | | <input type="hidden" name="_action" value="delete" /> |
| | | 62 | | <button type="submit" className="btn-danger">Delete item</button> |
| | | 63 | | </Form> |
| | | 64 | | )} |
| | | 65 | | </div> |
| | | 66 | | ); |
| | | 67 | | } |