feat(timeline): duplicate a day's events onto another day
POST /api/events/duplicate-day — copies all events from sourceDate to targetDate, shifting timestamps by the day offset while preserving time-of-day, duration, notes, and metadata. Ownership-gated per family. In the timeline, each day header gains a copy icon button. Clicking it expands an inline date picker; confirming triggers the API and invalidates the events query. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -8,7 +8,7 @@ import { EventIcon } from "@/components/event-icon";
|
||||
import { useBaby } from "@/contexts/baby-context";
|
||||
import { format, isToday, isYesterday } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
import { Trash2, StickyNote, Pencil, CheckSquare, Square, XCircle, ImageIcon } from "lucide-react";
|
||||
import { Trash2, StickyNote, Pencil, CheckSquare, Square, XCircle, ImageIcon, Copy } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { EventModal } from "@/components/event-modal";
|
||||
|
||||
@@ -83,6 +83,10 @@ export default function TimelinePage() {
|
||||
const [page, setPage] = useState(0);
|
||||
const [selectMode, setSelectMode] = useState(false);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [duplicating, setDuplicating] = useState<string | null>(null); // sourceDate being duplicated
|
||||
const [dupTarget, setDupTarget] = useState(""); // target date string
|
||||
const [dupLoading, setDupLoading] = useState(false);
|
||||
const [dupError, setDupError] = useState("");
|
||||
|
||||
const { data: eventsData, isLoading } = useQuery({
|
||||
queryKey: ["events", selectedBaby?.id, filterType, page],
|
||||
@@ -106,6 +110,27 @@ export default function TimelinePage() {
|
||||
qc.invalidateQueries({ queryKey: ["events"] });
|
||||
}
|
||||
|
||||
async function duplicateDay(sourceDate: string, targetDate: string) {
|
||||
if (!selectedBaby?.id) return;
|
||||
setDupLoading(true);
|
||||
setDupError("");
|
||||
const res = await fetch("/api/events/duplicate-day", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ babyId: selectedBaby.id, sourceDate, targetDate }),
|
||||
});
|
||||
setDupLoading(false);
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
setDupError(data.error ?? "Erreur");
|
||||
return;
|
||||
}
|
||||
setDuplicating(null);
|
||||
setDupTarget("");
|
||||
setDupError("");
|
||||
qc.invalidateQueries({ queryKey: ["events"] });
|
||||
}
|
||||
|
||||
async function deleteSelected() {
|
||||
if (selected.size === 0) return;
|
||||
await Promise.all([...selected].map((id) => fetch(`/api/events/${id}`, { method: "DELETE" })));
|
||||
@@ -241,8 +266,48 @@ export default function TimelinePage() {
|
||||
<span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide capitalize">{dayLabel(day)}</span>
|
||||
<div className="flex-1 h-px bg-slate-200 dark:bg-slate-700" />
|
||||
<span className="text-xs text-slate-400 dark:text-slate-500">{grouped[day].length}</span>
|
||||
{!selectMode && (
|
||||
<button
|
||||
onClick={() => { setDuplicating(day); setDupTarget(""); setDupError(""); }}
|
||||
title="Dupliquer ce jour"
|
||||
className="p-1 rounded-lg text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{duplicating === day && (
|
||||
<div className="mb-3 px-4 py-3 bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800 rounded-xl">
|
||||
<p className="text-xs font-medium text-indigo-700 dark:text-indigo-300 mb-2">
|
||||
Copier les {grouped[day].length} événements vers…
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={dupTarget}
|
||||
onChange={(e) => { setDupTarget(e.target.value); setDupError(""); }}
|
||||
min={format(new Date(), "yyyy-MM-dd")}
|
||||
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-indigo-200 dark:border-indigo-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
/>
|
||||
<button
|
||||
disabled={!dupTarget || dupLoading}
|
||||
onClick={() => duplicateDay(day, dupTarget)}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-300 dark:disabled:bg-indigo-900 text-white rounded-lg transition"
|
||||
>
|
||||
{dupLoading ? "…" : "Copier"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setDuplicating(null); setDupError(""); }}
|
||||
className="px-3 py-1.5 text-xs text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 hover:text-slate-700 transition"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
{dupError && <p className="mt-1.5 text-xs text-red-500">{dupError}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{grouped[day].map((ev) => {
|
||||
const cfg = EVENT_CONFIG[ev.type];
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const session = await auth();
|
||||
if (!session?.user?.id) return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
|
||||
|
||||
const { babyId, sourceDate, targetDate } = await req.json();
|
||||
|
||||
if (!babyId || !sourceDate || !targetDate) {
|
||||
return NextResponse.json({ error: "babyId, sourceDate et targetDate requis" }, { status: 400 });
|
||||
}
|
||||
if (isNaN(new Date(sourceDate).getTime()) || isNaN(new Date(targetDate).getTime())) {
|
||||
return NextResponse.json({ error: "Date invalide" }, { status: 400 });
|
||||
}
|
||||
if (sourceDate === targetDate) {
|
||||
return NextResponse.json({ error: "Les dates source et cible doivent être différentes" }, { status: 400 });
|
||||
}
|
||||
|
||||
const familyId = (session.user as { familyId?: string }).familyId;
|
||||
if (!familyId) return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
|
||||
const ownedBaby = await prisma.baby.findFirst({ where: { id: babyId, familyId } });
|
||||
if (!ownedBaby) return NextResponse.json({ error: "Bébé introuvable" }, { status: 404 });
|
||||
|
||||
const dayStart = new Date(sourceDate);
|
||||
dayStart.setHours(0, 0, 0, 0);
|
||||
const dayEnd = new Date(sourceDate);
|
||||
dayEnd.setHours(23, 59, 59, 999);
|
||||
|
||||
const source = await prisma.event.findMany({
|
||||
where: { babyId, startedAt: { gte: dayStart, lte: dayEnd } },
|
||||
orderBy: { startedAt: "asc" },
|
||||
});
|
||||
|
||||
if (source.length === 0) {
|
||||
return NextResponse.json({ error: "Aucun événement ce jour-là" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Compute day offset in ms between sourceDate and targetDate
|
||||
const srcMidnight = new Date(sourceDate);
|
||||
srcMidnight.setHours(0, 0, 0, 0);
|
||||
const tgtMidnight = new Date(targetDate);
|
||||
tgtMidnight.setHours(0, 0, 0, 0);
|
||||
const offsetMs = tgtMidnight.getTime() - srcMidnight.getTime();
|
||||
|
||||
const created = await prisma.$transaction(
|
||||
source.map((ev) =>
|
||||
prisma.event.create({
|
||||
data: {
|
||||
babyId,
|
||||
userId: session.user.id,
|
||||
type: ev.type,
|
||||
startedAt: new Date(ev.startedAt.getTime() + offsetMs),
|
||||
endedAt: ev.endedAt ? new Date(ev.endedAt.getTime() + offsetMs) : null,
|
||||
notes: ev.notes,
|
||||
metadata: ev.metadata ?? undefined,
|
||||
},
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
return NextResponse.json({ count: created.length, events: created }, { status: 201 });
|
||||
}
|
||||
Reference in New Issue
Block a user