feat: garden plants crud (task 72)
- perenual species lookup with 24h db cache (api key optional) - /api/garden/species-search route handler - createPlant / updatePlant / deletePlant server actions - addPlantImage / removePlantImage / setPrimaryImage actions (max 10) - listPlants query grouped by container with last-watered subquery - getPlant query with care log summary and active schedules - plant-form client component with species autofill and image upload - plant-list server component grouped by container with unassigned bucket - plant-detail client component with info/gallery/care tabs - species-search debounced combobox component - /garden/plants/new, /[id], /[id]/edit pages - garden.plant entity registered with search and share support - /garden page updated to containers/plants tabs (default: containers)
This commit is contained in:
ginnoir
@@ -0,0 +1,367 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { createPlant, updatePlant } from "../server/actions";
|
||||
import { SpeciesSearch } from "./species-search";
|
||||
import type { PlantDetailDto, ContainerDto } from "../server/queries";
|
||||
import type { SpeciesSuggestion } from "../server/species-lookup";
|
||||
|
||||
const CATEGORIES = [
|
||||
{ value: "vegetable", label: "Vegetable" },
|
||||
{ value: "fruit", label: "Fruit" },
|
||||
{ value: "herb", label: "Herb" },
|
||||
{ value: "flower", label: "Flower" },
|
||||
{ value: "succulent", label: "Succulent" },
|
||||
{ value: "cactus", label: "Cactus" },
|
||||
{ value: "tropical", label: "Tropical" },
|
||||
{ value: "tree", label: "Tree" },
|
||||
{ value: "shrub", label: "Shrub" },
|
||||
{ value: "other", label: "Other" },
|
||||
];
|
||||
|
||||
const HEALTH_STATUSES = [
|
||||
{ value: "healthy", label: "Healthy" },
|
||||
{ value: "needs-attention", label: "Needs attention" },
|
||||
{ value: "sick", label: "Sick" },
|
||||
{ value: "dormant", label: "Dormant" },
|
||||
];
|
||||
|
||||
const GROWTH_STAGES = [
|
||||
{ value: "", label: "Unknown" },
|
||||
{ value: "seedling", label: "Seedling" },
|
||||
{ value: "sprout", label: "Sprout" },
|
||||
{ value: "vegetative", label: "Vegetative" },
|
||||
{ value: "budding", label: "Budding" },
|
||||
{ value: "flowering", label: "Flowering" },
|
||||
{ value: "ripening", label: "Ripening" },
|
||||
{ value: "dormant", label: "Dormant" },
|
||||
];
|
||||
|
||||
type Props = {
|
||||
existingPlant?: PlantDetailDto;
|
||||
defaultContainerId?: string | null;
|
||||
containers: ContainerDto[];
|
||||
};
|
||||
|
||||
export function PlantForm({ existingPlant, defaultContainerId, containers }: Props) {
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [images, setImages] = useState<string[]>(existingPlant?.images ?? []);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [selectedSpeciesId, setSelectedSpeciesId] = useState(existingPlant?.speciesId ?? "");
|
||||
|
||||
const scientificNameRef = useRef<HTMLInputElement>(null);
|
||||
const sunlightRef = useRef<HTMLInputElement>(null);
|
||||
const wateringNotesRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
function handleSpeciesSelect(species: SpeciesSuggestion) {
|
||||
setSelectedSpeciesId(species.id);
|
||||
if (scientificNameRef.current) scientificNameRef.current.value = species.scientific_name;
|
||||
if (sunlightRef.current) sunlightRef.current.value = species.sunlight.join(", ");
|
||||
if (wateringNotesRef.current) wateringNotesRef.current.value = species.watering;
|
||||
}
|
||||
|
||||
async function handleImageSelect(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const files = Array.from(e.target.files ?? []);
|
||||
if (images.length >= 10) {
|
||||
setError("Maximum 10 images allowed.");
|
||||
return;
|
||||
}
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const urls: string[] = [];
|
||||
for (const file of files) {
|
||||
if (images.length + urls.length >= 10) break;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const res = await fetch("/api/uploads", { method: "POST", body: fd });
|
||||
if (!res.ok) throw new Error("Upload failed");
|
||||
const data = (await res.json()) as { url: string };
|
||||
urls.push(data.url);
|
||||
}
|
||||
setImages((prev) => [...prev, ...urls]);
|
||||
} catch {
|
||||
setError("Image upload failed. Please try again.");
|
||||
} finally {
|
||||
setUploading(false);
|
||||
e.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function handleRemoveImage(url: string) {
|
||||
setImages((prev) => prev.filter((u) => u !== url));
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.currentTarget);
|
||||
|
||||
const input = {
|
||||
name: fd.get("name") as string,
|
||||
category: (fd.get("category") as string) || "other",
|
||||
containerId: (fd.get("containerId") as string) || null,
|
||||
healthStatus: (fd.get("healthStatus") as string) || "healthy",
|
||||
growthStage: (fd.get("growthStage") as string) || null,
|
||||
scientificName: scientificNameRef.current?.value || null,
|
||||
speciesId: selectedSpeciesId || null,
|
||||
sunlight: sunlightRef.current?.value || null,
|
||||
wateringNotes: wateringNotesRef.current?.value || null,
|
||||
fertilizingNotes: (fd.get("fertilizingNotes") as string) || null,
|
||||
notes: (fd.get("notes") as string) || null,
|
||||
acquisitionDate: (fd.get("acquisitionDate") as string) || null,
|
||||
images,
|
||||
primaryImageUrl: existingPlant?.primaryImageUrl ?? images[0] ?? null,
|
||||
};
|
||||
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
if (existingPlant) {
|
||||
await updatePlant({ id: existingPlant.id, ...input });
|
||||
router.push(`/garden/plants/${existingPlant.id}`);
|
||||
router.refresh();
|
||||
} else {
|
||||
const plant = await createPlant(input);
|
||||
router.push(`/garden/plants/${plant.id}`);
|
||||
}
|
||||
} catch {
|
||||
setError("Something went wrong. Please try again.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-xl">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-name" className="text-sm font-medium">
|
||||
Name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="plant-name"
|
||||
name="name"
|
||||
required
|
||||
maxLength={120}
|
||||
defaultValue={existingPlant?.name}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium">Species lookup (optional)</label>
|
||||
<SpeciesSearch
|
||||
onSelect={handleSpeciesSelect}
|
||||
initialValue={existingPlant?.scientificName ?? ""}
|
||||
/>
|
||||
<p className="text-xs text-[var(--ink-mute)]">
|
||||
Search Perenual to auto-fill scientific name and care notes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-scientific-name" className="text-sm font-medium">
|
||||
Scientific name
|
||||
</label>
|
||||
<input
|
||||
id="plant-scientific-name"
|
||||
name="scientificName"
|
||||
ref={scientificNameRef}
|
||||
maxLength={200}
|
||||
defaultValue={existingPlant?.scientificName ?? ""}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-category" className="text-sm font-medium">
|
||||
Category
|
||||
</label>
|
||||
<select
|
||||
id="plant-category"
|
||||
name="category"
|
||||
defaultValue={existingPlant?.category ?? "other"}
|
||||
>
|
||||
{CATEGORIES.map((c) => (
|
||||
<option key={c.value} value={c.value}>
|
||||
{c.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-container" className="text-sm font-medium">
|
||||
Container
|
||||
</label>
|
||||
<select
|
||||
id="plant-container"
|
||||
name="containerId"
|
||||
defaultValue={existingPlant?.containerId ?? defaultContainerId ?? ""}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{containers.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-health" className="text-sm font-medium">
|
||||
Health status
|
||||
</label>
|
||||
<select
|
||||
id="plant-health"
|
||||
name="healthStatus"
|
||||
defaultValue={existingPlant?.healthStatus ?? "healthy"}
|
||||
>
|
||||
{HEALTH_STATUSES.map((h) => (
|
||||
<option key={h.value} value={h.value}>
|
||||
{h.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-stage" className="text-sm font-medium">
|
||||
Growth stage
|
||||
</label>
|
||||
<select
|
||||
id="plant-stage"
|
||||
name="growthStage"
|
||||
defaultValue={existingPlant?.growthStage ?? ""}
|
||||
>
|
||||
{GROWTH_STAGES.map((g) => (
|
||||
<option key={g.value} value={g.value}>
|
||||
{g.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-acquired" className="text-sm font-medium">
|
||||
Acquisition date
|
||||
</label>
|
||||
<input
|
||||
id="plant-acquired"
|
||||
type="date"
|
||||
name="acquisitionDate"
|
||||
defaultValue={existingPlant?.acquisitionDate ?? ""}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-sunlight" className="text-sm font-medium">
|
||||
Sunlight requirements
|
||||
</label>
|
||||
<input
|
||||
id="plant-sunlight"
|
||||
name="sunlight"
|
||||
ref={sunlightRef}
|
||||
maxLength={200}
|
||||
defaultValue={existingPlant?.sunlight ?? ""}
|
||||
placeholder="e.g. full sun, part shade"
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-watering" className="text-sm font-medium">
|
||||
Watering notes
|
||||
</label>
|
||||
<textarea
|
||||
id="plant-watering"
|
||||
name="wateringNotes"
|
||||
ref={wateringNotesRef}
|
||||
maxLength={2000}
|
||||
rows={2}
|
||||
defaultValue={existingPlant?.wateringNotes ?? ""}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-fertilizing" className="text-sm font-medium">
|
||||
Fertilizing notes
|
||||
</label>
|
||||
<textarea
|
||||
id="plant-fertilizing"
|
||||
name="fertilizingNotes"
|
||||
maxLength={2000}
|
||||
rows={2}
|
||||
defaultValue={existingPlant?.fertilizingNotes ?? ""}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="plant-notes" className="text-sm font-medium">
|
||||
General notes
|
||||
</label>
|
||||
<textarea
|
||||
id="plant-notes"
|
||||
name="notes"
|
||||
maxLength={2000}
|
||||
rows={3}
|
||||
defaultValue={existingPlant?.notes ?? ""}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium">Photos ({images.length}/10)</label>
|
||||
{images.length > 0 && (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{images.map((url) => (
|
||||
<div key={url} className="relative group">
|
||||
<img src={url} alt="" className="w-full aspect-square object-cover rounded" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveImage(url)}
|
||||
className="absolute top-0.5 right-0.5 bg-black/60 text-white rounded text-xs px-1 opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{images.length < 10 && (
|
||||
<label className="btn btn-ghost btn-sm w-fit cursor-pointer">
|
||||
{uploading ? "Uploading…" : "Add photos"}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleImageSelect}
|
||||
disabled={uploading}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<a
|
||||
href={existingPlant ? `/garden/plants/${existingPlant.id}` : "/garden"}
|
||||
className="btn btn-ghost"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" className="btn btn-primary" disabled={isPending || uploading}>
|
||||
{isPending ? "Saving…" : existingPlant ? "Save" : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user