fix: quick add opens create ui
Add createKey to quick-add manifests and client create dialog host. FAB and command palette open in-place create UIs instead of navigating away.
This commit is contained in:
ginnoir
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { addBang } from "@/modules/bangs/server/actions";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function BangRecordDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? <BangRecordForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function BangRecordForm({ onDone }: { onDone: () => void }) {
|
||||
const [dateValue, setDateValue] = useState(todayValue());
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await addBang({ occurredOn: dateValue });
|
||||
onDone();
|
||||
} catch {
|
||||
setError("Something went wrong. Try again.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Record a bang</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="quick-add-bang-form" onSubmit={handleSubmit} className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="qa-bang-date" className="text-sm font-medium">
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
id="qa-bang-date"
|
||||
type="date"
|
||||
value={dateValue}
|
||||
onChange={(e) => setDateValue(e.target.value)}
|
||||
className="input input-sm"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-[var(--ink-mute)]">
|
||||
Change if you're documenting a bang from a previous day.
|
||||
</p>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
</form>
|
||||
<DialogFooter showCloseButton>
|
||||
<button
|
||||
type="submit"
|
||||
form="quick-add-bang-form"
|
||||
disabled={isPending}
|
||||
className="btn btn-primary btn-sm"
|
||||
>
|
||||
{isPending ? "Recording…" : "Record it"}
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function todayValue(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { createCalendar } from "@/modules/calendar/server/actions";
|
||||
|
||||
const DEFAULT_COLOR = "#B85C3C";
|
||||
const VISIBILITY_ITEMS = [
|
||||
{ label: "Household", value: "household" },
|
||||
{ label: "Private", value: "private" },
|
||||
];
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function CalendarCreateDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? <CalendarCreateForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarCreateForm({ onDone }: { onDone: () => void }) {
|
||||
const [name, setName] = useState("");
|
||||
const [color, setColor] = useState(DEFAULT_COLOR);
|
||||
const [visibility, setVisibility] = useState<"private" | "household">("household");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) return;
|
||||
startTransition(async () => {
|
||||
await createCalendar({ name: name.trim(), color, visibility });
|
||||
onDone();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New calendar</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="quick-add-calendar-form" onSubmit={handleSubmit} className="grid gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-calendar-name">Name</Label>
|
||||
<Input
|
||||
id="qa-calendar-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[1fr_1fr] gap-2">
|
||||
<Input
|
||||
aria-label="Calendar color"
|
||||
type="color"
|
||||
value={color}
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
items={VISIBILITY_ITEMS}
|
||||
value={visibility}
|
||||
onValueChange={(value) => setVisibility(value as "private" | "household")}
|
||||
>
|
||||
<SelectTrigger aria-label="Calendar visibility">
|
||||
<SelectValue>{visibility === "household" ? "Household" : "Private"}</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{VISIBILITY_ITEMS.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<Button type="submit" form="quick-add-calendar-form" disabled={!name.trim() || isPending}>
|
||||
Create calendar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState, useTransition } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { createEvent } from "@/modules/calendar/server/actions";
|
||||
import { listCalendars, type CalendarDto } from "@/modules/calendar/server/queries";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function CalendarEventCreateDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? <CalendarEventCreateForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarEventCreateForm({ onDone }: { onDone: () => void }) {
|
||||
const [calendars, setCalendars] = useState<CalendarDto[]>([]);
|
||||
const [calendarId, setCalendarId] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [startAt, setStartAt] = useState(() => toInputDateTime(new Date()));
|
||||
const [endAt, setEndAt] = useState(() => toInputDateTime(new Date(Date.now() + 60 * 60 * 1000)));
|
||||
const [location, setLocation] = useState("");
|
||||
const [notes, setNotes] = useState("");
|
||||
const [remind, setRemind] = useState(true);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
useEffect(() => {
|
||||
listCalendars().then((rows) => {
|
||||
setCalendars(rows);
|
||||
setCalendarId(rows[0]?.id ?? "");
|
||||
});
|
||||
}, []);
|
||||
|
||||
const calendarItems = useMemo(
|
||||
() => calendars.map((c) => ({ label: c.name, value: c.id })),
|
||||
[calendars],
|
||||
);
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!calendarId || !title.trim()) return;
|
||||
startTransition(async () => {
|
||||
await createEvent({
|
||||
calendarId,
|
||||
title: title.trim(),
|
||||
startAt: new Date(startAt),
|
||||
endAt: new Date(endAt),
|
||||
allDay: false,
|
||||
location: location || null,
|
||||
notes: notes || null,
|
||||
remindMinutesBefore: remind ? 30 : null,
|
||||
});
|
||||
onDone();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New event</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="quick-add-event-form" onSubmit={handleSubmit} className="grid gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-event-title">Title</Label>
|
||||
<Input
|
||||
id="qa-event-title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-event-calendar">Calendar</Label>
|
||||
<Select
|
||||
items={calendarItems}
|
||||
value={calendarId}
|
||||
onValueChange={(value) => setCalendarId(value ?? "")}
|
||||
>
|
||||
<SelectTrigger id="qa-event-calendar">
|
||||
<SelectValue>
|
||||
{calendars.find((c) => c.id === calendarId)?.name ?? "Select a calendar"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{calendarItems.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-event-start">Start</Label>
|
||||
<Input
|
||||
id="qa-event-start"
|
||||
type="datetime-local"
|
||||
value={startAt}
|
||||
onChange={(e) => setStartAt(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-event-end">End</Label>
|
||||
<Input
|
||||
id="qa-event-end"
|
||||
type="datetime-local"
|
||||
value={endAt}
|
||||
onChange={(e) => setEndAt(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-event-location">Location</Label>
|
||||
<Input
|
||||
id="qa-event-location"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-event-notes">Notes</Label>
|
||||
<textarea
|
||||
id="qa-event-notes"
|
||||
className="min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 cursor-pointer"
|
||||
checked={remind}
|
||||
onChange={(e) => setRemind(e.target.checked)}
|
||||
/>
|
||||
Remind me 30 min before
|
||||
</label>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<Button type="submit" form="quick-add-event-form" disabled={!title.trim() || isPending}>
|
||||
Save event
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function toInputDateTime(date: Date) {
|
||||
const offset = date.getTimezoneOffset();
|
||||
const local = new Date(date.getTime() - offset * 60 * 1000);
|
||||
return local.toISOString().slice(0, 16);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { ContainerForm } from "@/modules/garden/components/container-form";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function ContainerCreateDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md max-h-[90dvh] overflow-y-auto">
|
||||
{open ? (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add container</DialogTitle>
|
||||
</DialogHeader>
|
||||
<ContainerForm
|
||||
onSuccess={() => onOpenChange(false)}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { CareLogForm } from "@/modules/garden/components/care-log-form";
|
||||
import { listPlants, type PlantListItemDto } from "@/modules/garden/server/queries";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function GardenCareLogDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? <GardenCareLogForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function GardenCareLogForm({ onDone }: { onDone: () => void }) {
|
||||
const [plants, setPlants] = useState<PlantListItemDto[]>([]);
|
||||
const [plantId, setPlantId] = useState("");
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
listPlants()
|
||||
.then((rows) => {
|
||||
setPlants(rows);
|
||||
setPlantId(rows[0]?.id ?? "");
|
||||
if (rows.length === 0) setLoadError("No plants yet — add a plant first.");
|
||||
})
|
||||
.catch(() => setLoadError("Could not load plants."));
|
||||
}, []);
|
||||
|
||||
const plantItems = plants.map((p) => ({ label: p.name, value: p.id }));
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Log plant care</DialogTitle>
|
||||
</DialogHeader>
|
||||
{loadError ? (
|
||||
<p className="text-sm text-red-500">{loadError}</p>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-care-plant">Plant</Label>
|
||||
<Select
|
||||
items={plantItems}
|
||||
value={plantId}
|
||||
onValueChange={(value) => setPlantId(value ?? "")}
|
||||
>
|
||||
<SelectTrigger id="qa-care-plant">
|
||||
<SelectValue>
|
||||
{plants.find((p) => p.id === plantId)?.name ?? "Select a plant"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{plantItems.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{plantId ? <CareLogForm plantId={plantId} onSuccess={onDone} /> : null}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { createList } from "@/modules/lists/server/actions";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function ListCreateDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? <ListCreateForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ListCreateForm({ onDone }: { onDone: () => void }) {
|
||||
const [type, setType] = useState("shopping");
|
||||
const [name, setName] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!type.trim() || !name.trim()) return;
|
||||
startTransition(async () => {
|
||||
await createList({ type: type.trim(), name: name.trim() });
|
||||
onDone();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New list</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="quick-add-new-list-form" onSubmit={handleSubmit} className="grid gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-new-list-type">Type</Label>
|
||||
<Input
|
||||
id="qa-new-list-type"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-new-list-name">Name</Label>
|
||||
<Input
|
||||
id="qa-new-list-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
form="quick-add-new-list-form"
|
||||
disabled={!type.trim() || !name.trim() || isPending}
|
||||
>
|
||||
Create list
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { addItem } from "@/modules/lists/server/actions";
|
||||
import { listLists } from "@/modules/lists/server/queries";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
listType: "shopping" | "task";
|
||||
};
|
||||
|
||||
const TITLES: Record<Props["listType"], string> = {
|
||||
shopping: "Add to shopping",
|
||||
task: "Add to tasks",
|
||||
};
|
||||
|
||||
export function ListItemCreateDialog({ open, onOpenChange, listType }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? (
|
||||
<ListItemCreateForm listType={listType} onDone={() => onOpenChange(false)} />
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ListItemCreateForm({
|
||||
listType,
|
||||
onDone,
|
||||
}: {
|
||||
listType: "shopping" | "task";
|
||||
onDone: () => void;
|
||||
}) {
|
||||
const [listId, setListId] = useState<string | null>(null);
|
||||
const [listName, setListName] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
useEffect(() => {
|
||||
listLists({ type: listType })
|
||||
.then((rows) => {
|
||||
const list = rows[0];
|
||||
if (!list) {
|
||||
setLoadError(`No ${listType} list found.`);
|
||||
return;
|
||||
}
|
||||
setListId(list.id);
|
||||
setListName(list.name);
|
||||
})
|
||||
.catch(() => setLoadError("Could not load list."));
|
||||
}, [listType]);
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const trimmed = text.trim();
|
||||
if (!listId || !trimmed) return;
|
||||
startTransition(async () => {
|
||||
await addItem({ listId, text: trimmed });
|
||||
onDone();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{TITLES[listType]}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{loadError ? (
|
||||
<p className="text-sm text-red-500">{loadError}</p>
|
||||
) : (
|
||||
<form id={`quick-add-list-item-${listType}`} onSubmit={handleSubmit} className="grid gap-3">
|
||||
{listName ? <p className="text-sm text-muted-foreground">Adding to {listName}</p> : null}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor={`qa-list-item-${listType}`}>
|
||||
{listType === "shopping" ? "Item" : "Task"}
|
||||
</Label>
|
||||
<Input
|
||||
id={`qa-list-item-${listType}`}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder={listType === "shopping" ? "Add to list…" : "Add a task…"}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
form={`quick-add-list-item-${listType}`}
|
||||
disabled={!listId || !text.trim() || isPending}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { createNote } from "@/modules/notes/server/actions";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function NoteCreateDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
{open ? <NoteCreateForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function NoteCreateForm({ onDone }: { onDone: () => void }) {
|
||||
const [title, setTitle] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
const [remindAt, setRemindAt] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) return;
|
||||
startTransition(async () => {
|
||||
await createNote({
|
||||
title: title.trim(),
|
||||
body,
|
||||
remindAt: remindAt ? new Date(remindAt) : null,
|
||||
});
|
||||
onDone();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New note</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="quick-add-note-form" onSubmit={handleSubmit} className="grid gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-note-title">Title</Label>
|
||||
<Input
|
||||
id="qa-note-title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-note-body">Body</Label>
|
||||
<textarea
|
||||
id="qa-note-body"
|
||||
aria-label="Body"
|
||||
className="min-h-32 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="qa-note-reminder">Reminder</Label>
|
||||
<Input
|
||||
id="qa-note-reminder"
|
||||
type="datetime-local"
|
||||
value={remindAt}
|
||||
onChange={(e) => setRemindAt(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<Button type="submit" form="quick-add-note-form" disabled={!title.trim() || isPending}>
|
||||
Save note
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { PlantForm } from "@/modules/garden/components/plant-form";
|
||||
import { listContainers, type ContainerDto } from "@/modules/garden/server/queries";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export function PlantCreateDialog({ open, onOpenChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-lg max-h-[90dvh] overflow-y-auto">
|
||||
{open ? <PlantCreateForm onDone={() => onOpenChange(false)} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function PlantCreateForm({ onDone }: { onDone: () => void }) {
|
||||
const [containers, setContainers] = useState<ContainerDto[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
listContainers()
|
||||
.then(setContainers)
|
||||
.catch(() => setContainers([]));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add plant</DialogTitle>
|
||||
</DialogHeader>
|
||||
<PlantForm containers={containers} onSuccess={() => onDone()} onCancel={onDone} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user