325 lines
8.6 KiB
TypeScript
325 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { createEvent, updateEvent } from "@/actions/events";
|
|
import { ArticlePreview } from "@/components/admin/article-preview";
|
|
import { PublicationPreflight } from "@/components/admin/publication-preflight";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { DateTimePicker } from "@/components/ui/date-time-picker";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useFormRecovery } from "@/hooks/use-form-recovery";
|
|
import { useServerAction } from "@/hooks/use-server-action";
|
|
import { useUnsavedChanges } from "@/hooks/use-unsaved-changes";
|
|
import { publicationIssues } from "@/lib/publication-preflight";
|
|
import type {
|
|
CreateEventInput,
|
|
UpdateEventInput,
|
|
} from "@/lib/validators/event";
|
|
|
|
interface EventType {
|
|
id: number;
|
|
name: string;
|
|
slug: string;
|
|
color: string;
|
|
}
|
|
|
|
interface EventFormProps {
|
|
userId?: string;
|
|
eventTypes: EventType[];
|
|
defaultValues?: Partial<CreateEventInput> & { id?: number };
|
|
}
|
|
|
|
interface EventFormValues {
|
|
title: string;
|
|
description: string;
|
|
image?: string | null;
|
|
maxPlayers?: string | number | null;
|
|
roomId?: string | number | null;
|
|
typeId: number;
|
|
status: string;
|
|
isRecurring: number;
|
|
startsAt?: Date | null;
|
|
endsAt?: Date | null;
|
|
}
|
|
|
|
export function EventForm({
|
|
eventTypes,
|
|
defaultValues,
|
|
userId,
|
|
}: EventFormProps) {
|
|
const t = useTranslations("pages.admin.events");
|
|
const tAction = useTranslations("pages.admin.actions");
|
|
const router = useRouter();
|
|
const [preview, setPreview] = useState(false);
|
|
const { run, isPending } = useServerAction();
|
|
const isEditing = !!defaultValues?.id;
|
|
|
|
const form = useForm<EventFormValues>({
|
|
defaultValues: {
|
|
title: "",
|
|
description: "",
|
|
typeId: eventTypes[0]?.id ?? 0,
|
|
status: "draft",
|
|
isRecurring: 0,
|
|
...defaultValues,
|
|
},
|
|
});
|
|
|
|
const dirty = form.formState.isDirty;
|
|
useUnsavedChanges(dirty, tAction("leaveUnsaved"));
|
|
const recovery = useFormRecovery({
|
|
userId,
|
|
kind: "event",
|
|
record: String(defaultValues?.id ?? "new"),
|
|
dirty,
|
|
snapshot: () => JSON.parse(JSON.stringify(form.getValues())),
|
|
restore: (payload) => {
|
|
const restored = {
|
|
...payload,
|
|
startsAt: payload.startsAt ? new Date(String(payload.startsAt)) : null,
|
|
endsAt: payload.endsAt ? new Date(String(payload.endsAt)) : null,
|
|
} as EventFormValues;
|
|
form.reset(restored, { keepDefaultValues: true });
|
|
},
|
|
});
|
|
const values = form.watch();
|
|
const issues = publicationIssues({ kind: "event", ...values });
|
|
function onSubmit(data: EventFormValues) {
|
|
if (isPending) return;
|
|
recovery.flush();
|
|
if (
|
|
data.status === "published" &&
|
|
publicationIssues({ kind: "event", ...data }).some(
|
|
(issue) => issue.severity === "error",
|
|
)
|
|
)
|
|
return;
|
|
if (isEditing && defaultValues?.id) {
|
|
run(
|
|
() =>
|
|
updateEvent({ id: defaultValues.id, ...data } as UpdateEventInput & {
|
|
id: number;
|
|
}),
|
|
{
|
|
successMessage: t("toastUpdated"),
|
|
onSuccess: () => {
|
|
recovery.clear();
|
|
form.reset(data);
|
|
router.refresh();
|
|
},
|
|
},
|
|
);
|
|
} else {
|
|
run(() => createEvent(data as CreateEventInput), {
|
|
successMessage: t("toastCreated"),
|
|
onSuccess: (result) => {
|
|
recovery.clear();
|
|
form.reset(data);
|
|
if (result.id) {
|
|
router.push(`/admin/events/${result.id}`);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onChangeCapture={recovery.changed}
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
>
|
|
<fieldset disabled={isPending} className="contents">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
{isEditing ? t("formEditTitle") : t("formDetailsTitle")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{recovery.panel}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">{t("formTitle")}</Label>
|
|
<Input id="title" {...form.register("title")} />
|
|
{form.formState.errors.title && (
|
|
<p className="text-sm text-destructive">
|
|
{form.formState.errors.title.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="typeId">{t("formEventType")}</Label>
|
|
<Select
|
|
value={String(form.watch("typeId"))}
|
|
onValueChange={(v) =>
|
|
form.setValue("typeId", Number(v), { shouldDirty: true })
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("formSelectType")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{eventTypes.map((et) => (
|
|
<SelectItem key={et.id} value={String(et.id)}>
|
|
{et.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">{t("formDescription")}</Label>
|
|
<Textarea
|
|
id="description"
|
|
rows={4}
|
|
{...form.register("description")}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>{t("formStartsAt")}</Label>
|
|
<DateTimePicker
|
|
value={form.watch("startsAt")}
|
|
onChange={(d) =>
|
|
form.setValue("startsAt", d, { shouldDirty: true })
|
|
}
|
|
placeholder={t("formSelectStart")}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>{t("formEndsAt")}</Label>
|
|
<DateTimePicker
|
|
value={form.watch("endsAt")}
|
|
onChange={(d) =>
|
|
form.setValue("endsAt", d ?? null, { shouldDirty: true })
|
|
}
|
|
placeholder={t("formSelectEnd")}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="maxPlayers">{t("formMaxPlayers")}</Label>
|
|
<Input
|
|
id="maxPlayers"
|
|
type="number"
|
|
{...form.register("maxPlayers")}
|
|
placeholder={t("formUnlimited")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="roomId">{t("formRoomId")}</Label>
|
|
<Input
|
|
id="roomId"
|
|
type="number"
|
|
{...form.register("roomId")}
|
|
placeholder={t("formOptional")}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="status">{t("colStatus")}</Label>
|
|
<Select
|
|
value={form.watch("status")}
|
|
onValueChange={(v) =>
|
|
form.setValue("status", v as CreateEventInput["status"], {
|
|
shouldDirty: true,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="draft">{t("statusDraft")}</SelectItem>
|
|
<SelectItem value="published">
|
|
{t("statusPublished")}
|
|
</SelectItem>
|
|
<SelectItem value="cancelled">
|
|
{t("statusCancelled")}
|
|
</SelectItem>
|
|
<SelectItem value="completed">
|
|
{t("statusCompleted")}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="image">{t("formImageUrl")}</Label>
|
|
<Input
|
|
id="image"
|
|
{...form.register("image")}
|
|
placeholder="https://..."
|
|
/>
|
|
</div>
|
|
|
|
<PublicationPreflight
|
|
issues={issues}
|
|
paths={[
|
|
"/events",
|
|
...(defaultValues?.id ? [`/events/${defaultValues.id}`] : []),
|
|
]}
|
|
/>
|
|
<ArticlePreview
|
|
title={tAction("preview")}
|
|
data={
|
|
preview
|
|
? {
|
|
title: values.title,
|
|
image: values.image ?? "",
|
|
summary: values.description,
|
|
body: "",
|
|
}
|
|
: null
|
|
}
|
|
onClose={() => setPreview(false)}
|
|
/>
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setPreview(true)}
|
|
>
|
|
{tAction("preview")}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={
|
|
isPending ||
|
|
(values.status === "published" &&
|
|
issues.some((issue) => issue.severity === "error"))
|
|
}
|
|
>
|
|
{isPending
|
|
? t("formSaving")
|
|
: isEditing
|
|
? t("formUpdate")
|
|
: t("formCreate")}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</fieldset>
|
|
</form>
|
|
);
|
|
}
|