Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 2x 2x 11x 11x 11x 11x 2x 2x 2x 2x 2x 2x 1x 1x 1x 2x 11x 2x 1x 1x | "use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import type { Item } from "@/types";
import { Button, Input, Textarea, ErrorMessage } from "@/components/ui";
import { apiPost } from "@/lib/api-client";
import { z } from "zod";
const itemSchema = z.object({
name: z.string().min(1, "Item name is required"),
brand: z.string().optional(),
style: z.string().optional(),
color: z.string().optional(),
material: z.string().optional(),
category: z.string().optional(),
notes: z.string().optional(),
});
export function ItemForm({ collectionId }: { collectionId: string }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [formData, setFormData] = useState({
name: "",
brand: "",
style: "",
color: "",
material: "",
category: "",
notes: "",
});
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError("");
setLoading(true);
try {
const validated = itemSchema.parse(formData);
const result = await apiPost<Item>(`/api/collections/${collectionId}/items`, validated);
// The server assigns a catalog number; the page URL uses that human-readable number.
router.push(`/collections/${collectionId}/items/${result.number}`);
} catch (err: any) {
Iif (err instanceof z.ZodError) {
setError(err.issues[0].message);
} else {
setError(err?.message || "Failed to save item");
}
} finally {
setLoading(false);
}
}
return (
<form onSubmit={handleSubmit} className="space-y-6 max-w-2xl">
{error && <ErrorMessage message={error} />}
<Input
label="Item name"
required
value={formData.name}
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
disabled={loading}
/>
<Input
label="Brand"
value={formData.brand}
onChange={(e) => setFormData((prev) => ({ ...prev, brand: e.target.value }))}
disabled={loading}
/>
<Input
label="Style"
value={formData.style}
onChange={(e) => setFormData((prev) => ({ ...prev, style: e.target.value }))}
disabled={loading}
/>
<Input
label="Color"
value={formData.color}
onChange={(e) => setFormData((prev) => ({ ...prev, color: e.target.value }))}
disabled={loading}
/>
<Input
label="Material"
value={formData.material}
onChange={(e) => setFormData((prev) => ({ ...prev, material: e.target.value }))}
disabled={loading}
/>
<Input
label="Category"
value={formData.category}
onChange={(e) => setFormData((prev) => ({ ...prev, category: e.target.value }))}
disabled={loading}
/>
<Textarea
label="Notes"
value={formData.notes}
onChange={(e) => setFormData((prev) => ({ ...prev, notes: e.target.value }))}
disabled={loading}
rows={4}
/>
<div className="grid grid-cols-2 gap-3 sm:flex">
<Button type="submit" disabled={loading} className="w-full sm:w-auto">
{loading ? "Saving..." : "Add item"}
</Button>
<Button
variant="secondary"
type="button"
onClick={() => router.back()}
disabled={loading}
className="w-full sm:w-auto"
>
Cancel
</Button>
</div>
</form>
);
}
|