feat(events): redesign admin event editing
This commit is contained in:
378
src/views/AdminEventForm.tsx
Normal file
378
src/views/AdminEventForm.tsx
Normal file
@@ -0,0 +1,378 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { ImagePlus, Trash2, Upload } from "lucide-react";
|
||||
import AdminDateTimeField from "@/components/AdminDateTimeField";
|
||||
import Markdown from "@/components/Markdown";
|
||||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||||
import ProgressiveImage from "@/components/ProgressiveImage";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
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 { Link, Navigate, useNavigate, useParams } from "@/lib/router";
|
||||
import type { EventCreateSchema, EventDetailSchema, EventGalleryItem } from "@/lib/types";
|
||||
import { api } from "@/lib/api";
|
||||
import { getEventCardImageUrl, resolveErrorMessage } from "@/lib/utils";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
type Mode = "create" | "edit";
|
||||
|
||||
const emptyForm = {
|
||||
title: "",
|
||||
slug: "",
|
||||
status: "draft" as EventCreateSchema["status"],
|
||||
event_type: "on_site" as EventCreateSchema["event_type"],
|
||||
price: "",
|
||||
capacity: "",
|
||||
start_time: null as string | null,
|
||||
end_time: null as string | null,
|
||||
registration_start_date: null as string | null,
|
||||
registration_end_date: null as string | null,
|
||||
location: "",
|
||||
address: "",
|
||||
online_link: "",
|
||||
description: "",
|
||||
registration_success_markdown: "",
|
||||
};
|
||||
|
||||
function toForm(event: EventDetailSchema) {
|
||||
return {
|
||||
title: event.title || "",
|
||||
slug: event.slug || "",
|
||||
status: event.status || "draft",
|
||||
event_type: event.event_type || "on_site",
|
||||
price: event.price ? String(Math.floor(Number(event.price) / 10)) : "",
|
||||
capacity: event.capacity != null ? String(event.capacity) : "",
|
||||
start_time: event.start_time || null,
|
||||
end_time: event.end_time || null,
|
||||
registration_start_date: event.registration_start_date || null,
|
||||
registration_end_date: event.registration_end_date || null,
|
||||
location: event.location || "",
|
||||
address: event.address || "",
|
||||
online_link: event.online_link || "",
|
||||
description: event.description || "",
|
||||
registration_success_markdown: event.registration_success_markdown || "",
|
||||
};
|
||||
}
|
||||
|
||||
export default function AdminEventForm({ mode }: { mode: Mode }) {
|
||||
const { user, isAuthenticated, loading } = useAuth();
|
||||
const { id } = useParams<{ id?: string }>();
|
||||
const eventId = Number(id);
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [form, setForm] = React.useState(emptyForm);
|
||||
const [previewMode, setPreviewMode] = React.useState<"editor" | "preview">("editor");
|
||||
const [galleryPreview, setGalleryPreview] = React.useState<EventGalleryItem | null>(null);
|
||||
|
||||
const detailQuery = useQuery({
|
||||
queryKey: ["admin", "edit-event", eventId],
|
||||
queryFn: () => api.getEventAdminDetail(eventId),
|
||||
enabled: mode === "edit" && Number.isFinite(eventId) && isAuthenticated,
|
||||
});
|
||||
|
||||
const galleryQuery = useQuery({
|
||||
queryKey: ["admin", "event", eventId, "gallery"],
|
||||
queryFn: () => api.listEventGallery(eventId),
|
||||
enabled: mode === "edit" && Number.isFinite(eventId) && isAuthenticated,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (detailQuery.data) setForm(toForm(detailQuery.data));
|
||||
}, [detailQuery.data]);
|
||||
|
||||
const makePayload = (): EventCreateSchema => ({
|
||||
title: form.title,
|
||||
slug: form.slug || null,
|
||||
status: form.status,
|
||||
event_type: form.event_type,
|
||||
price: form.price ? Number(form.price) * 10 : 0,
|
||||
capacity: form.capacity ? Number(form.capacity) : null,
|
||||
start_time: form.start_time || new Date().toISOString(),
|
||||
end_time: form.end_time || form.start_time || new Date().toISOString(),
|
||||
registration_start_date: form.registration_start_date,
|
||||
registration_end_date: form.registration_end_date,
|
||||
location: form.location || null,
|
||||
address: form.address || null,
|
||||
online_link: form.online_link || null,
|
||||
description: form.description || "",
|
||||
registration_success_markdown: form.registration_success_markdown || null,
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const payload = makePayload();
|
||||
return mode === "edit" ? api.updateEvent(eventId, payload) : api.createEvent(payload);
|
||||
},
|
||||
onSuccess: (event) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin", "events"] });
|
||||
toast({ title: "رویداد ذخیره شد", variant: "success" });
|
||||
navigate(`/admin/events/${event.id}/edit`);
|
||||
},
|
||||
onError: (error) => toast({ title: "خطا در ذخیره رویداد", description: resolveErrorMessage(error), variant: "destructive" }),
|
||||
});
|
||||
|
||||
const posterMutation = useMutation({
|
||||
mutationFn: (file: File) => api.uploadEventFeaturedImage(eventId, file),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin", "edit-event", eventId] });
|
||||
toast({ title: "پوستر ذخیره شد", variant: "success" });
|
||||
},
|
||||
onError: (error) => toast({ title: "خطا در آپلود پوستر", description: resolveErrorMessage(error), variant: "destructive" }),
|
||||
});
|
||||
|
||||
const galleryUploadMutation = useMutation({
|
||||
mutationFn: (file: File) => api.uploadEventGalleryImage(eventId, file, { title: file.name }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin", "event", eventId, "gallery"] });
|
||||
toast({ title: "تصویر گالری افزوده شد", variant: "success" });
|
||||
},
|
||||
onError: (error) => toast({ title: "خطا در آپلود گالری", description: resolveErrorMessage(error), variant: "destructive" }),
|
||||
});
|
||||
|
||||
const galleryDeleteMutation = useMutation({
|
||||
mutationFn: (imageId: number) => api.deleteEventGalleryImage(eventId, imageId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin", "event", eventId, "gallery"] });
|
||||
toast({ title: "تصویر حذف شد", variant: "success" });
|
||||
},
|
||||
onError: (error) => toast({ title: "خطا در حذف تصویر", description: resolveErrorMessage(error), variant: "destructive" }),
|
||||
});
|
||||
|
||||
if (loading) return <div className="py-10 text-center text-muted-foreground">در حال بررسی دسترسی...</div>;
|
||||
if (!isAuthenticated || !(user?.is_staff || user?.is_superuser)) return <Navigate to="/" />;
|
||||
if (mode === "edit" && !Number.isFinite(eventId)) return <div className="py-10 text-center">شناسه رویداد معتبر نیست.</div>;
|
||||
|
||||
const event = detailQuery.data;
|
||||
const gallery = galleryQuery.data ?? event?.gallery_images ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6" dir="rtl">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-black">{mode === "edit" ? "ویرایش رویداد" : "افزودن رویداد"}</h1>
|
||||
<p className="text-sm text-muted-foreground">فرم کامل رویداد با توضیحات Markdown، زمانبندی، پوستر و گالری</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" asChild><Link to="/admin/events">بازگشت</Link></Button>
|
||||
<Button disabled={saveMutation.isPending || !form.title.trim()} onClick={() => saveMutation.mutate()}>ذخیره</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{detailQuery.isLoading ? <p className="text-sm text-muted-foreground">در حال بارگذاری...</p> : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>اطلاعات اصلی</CardTitle>
|
||||
<CardDescription>عنوان، وضعیت، نوع رویداد، ظرفیت و هزینه</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>عنوان</Label>
|
||||
<Input value={form.title} onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>اسلاگ</Label>
|
||||
<Input dir="ltr" value={form.slug} onChange={(event) => setForm((current) => ({ ...current, slug: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>وضعیت</Label>
|
||||
<Select value={form.status} onValueChange={(value) => setForm((current) => ({ ...current, status: value as typeof form.status }))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="draft">پیشنویس</SelectItem>
|
||||
<SelectItem value="published">منتشر شده</SelectItem>
|
||||
<SelectItem value="cancelled">لغو شده</SelectItem>
|
||||
<SelectItem value="completed">برگزار شده</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>نوع</Label>
|
||||
<Select value={form.event_type} onValueChange={(value) => setForm((current) => ({ ...current, event_type: value as typeof form.event_type }))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="on_site">حضوری</SelectItem>
|
||||
<SelectItem value="online">آنلاین</SelectItem>
|
||||
<SelectItem value="hybrid">ترکیبی</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>قیمت (تومان)</Label>
|
||||
<Input type="number" value={form.price} onChange={(event) => setForm((current) => ({ ...current, price: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>ظرفیت</Label>
|
||||
<Input type="number" value={form.capacity} onChange={(event) => setForm((current) => ({ ...current, capacity: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>محل / مختصات</Label>
|
||||
<Input value={form.location} onChange={(event) => setForm((current) => ({ ...current, location: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>آدرس</Label>
|
||||
<Input value={form.address} onChange={(event) => setForm((current) => ({ ...current, address: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label>لینک آنلاین</Label>
|
||||
<Input dir="ltr" value={form.online_link} onChange={(event) => setForm((current) => ({ ...current, online_link: event.target.value }))} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>زمانبندی</CardTitle>
|
||||
<CardDescription>تاریخ شمسی و زمان جداگانه نمایش داده میشود.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<AdminDateTimeField label="شروع رویداد" value={form.start_time} required onChange={(value) => setForm((current) => ({ ...current, start_time: value }))} />
|
||||
<AdminDateTimeField label="پایان رویداد" value={form.end_time} required onChange={(value) => setForm((current) => ({ ...current, end_time: value }))} />
|
||||
<AdminDateTimeField label="شروع ثبتنام" value={form.registration_start_date} onChange={(value) => setForm((current) => ({ ...current, registration_start_date: value }))} />
|
||||
<AdminDateTimeField label="پایان ثبتنام" value={form.registration_end_date} onChange={(value) => setForm((current) => ({ ...current, registration_end_date: value }))} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>پوستر</CardTitle>
|
||||
<CardDescription>تصویر شاخص رویداد</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{event ? (
|
||||
<ProgressiveImage
|
||||
src={getEventCardImageUrl(event)}
|
||||
alt={event.title}
|
||||
wrapperClassName="aspect-video max-w-xl overflow-hidden rounded-2xl bg-muted"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex aspect-video max-w-xl items-center justify-center rounded-2xl border bg-muted/30 text-muted-foreground">
|
||||
<ImagePlus className="h-8 w-8" />
|
||||
</div>
|
||||
)}
|
||||
{mode === "edit" ? (
|
||||
<label className="inline-flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted">
|
||||
<Upload className="h-4 w-4" />
|
||||
آپلود پوستر
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) posterMutation.mutate(file);
|
||||
event.currentTarget.value = "";
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">پس از ذخیره اولیه، امکان آپلود پوستر فعال میشود.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>متن رویداد</CardTitle>
|
||||
<CardDescription>ویرایشگر Markdown و پیشنمایش</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2 md:hidden">
|
||||
<Button variant={previewMode === "editor" ? "default" : "outline"} size="sm" onClick={() => setPreviewMode("editor")}>ویرایش</Button>
|
||||
<Button variant={previewMode === "preview" ? "default" : "outline"} size="sm" onClick={() => setPreviewMode("preview")}>پیشنمایش</Button>
|
||||
</div>
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<div className={previewMode === "preview" ? "hidden lg:block" : ""}>
|
||||
<MarkdownEditor value={form.description} onChange={(value) => setForm((current) => ({ ...current, description: value }))} minHeight="520px" onSave={() => saveMutation.mutate()} />
|
||||
</div>
|
||||
<div className={previewMode === "editor" ? "hidden lg:block" : ""}>
|
||||
<div className="min-h-[520px] rounded-2xl border bg-background p-5">
|
||||
<Markdown content={form.description || "هنوز متنی وارد نشده است."} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>پیام موفقیت ثبتنام</CardTitle>
|
||||
<CardDescription>متنی که بعد از ثبتنام موفق به کاربر نمایش داده میشود.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Textarea
|
||||
value={form.registration_success_markdown}
|
||||
onChange={(event) => setForm((current) => ({ ...current, registration_success_markdown: event.target.value }))}
|
||||
rows={6}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>گالری رویداد</CardTitle>
|
||||
<CardDescription>تصاویر مرتبط با رویداد</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{mode === "edit" ? (
|
||||
<label className="inline-flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted">
|
||||
<Upload className="h-4 w-4" />
|
||||
آپلود تصویر
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
const files = Array.from(event.target.files ?? []);
|
||||
files.forEach((file) => galleryUploadMutation.mutate(file));
|
||||
event.currentTarget.value = "";
|
||||
}}
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">پس از ذخیره اولیه، امکان آپلود گالری فعال میشود.</p>
|
||||
)}
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{gallery.map((item) => (
|
||||
<div key={item.id} className="overflow-hidden rounded-2xl border bg-card">
|
||||
<button type="button" className="block w-full" onClick={() => setGalleryPreview(item)}>
|
||||
<ProgressiveImage
|
||||
src={item.absolute_image_preview_url || item.absolute_image_url}
|
||||
alt={item.title}
|
||||
wrapperClassName="aspect-video w-full bg-muted"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
<div className="flex items-center justify-between gap-2 p-3 text-sm">
|
||||
<span className="truncate">{item.title}</span>
|
||||
<Button size="icon" variant="ghost" className="text-destructive" onClick={() => galleryDeleteMutation.mutate(item.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{galleryPreview ? (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" onClick={() => setGalleryPreview(null)}>
|
||||
<img
|
||||
src={galleryPreview.absolute_image_preview_url || galleryPreview.absolute_image_url || ""}
|
||||
alt={galleryPreview.title}
|
||||
className="max-h-[90vh] max-w-full rounded-2xl object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user