feat(frontend): add blog editor and interactions

2026-06-08 21:31:07 +03:30
parent f2b4cfce1a
commit 49dcb1dd1b
10 changed files with 1019 additions and 35 deletions
--- a/src/views/AdminBlog.tsx
+++ b/src/views/AdminBlog.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { BookOpenText, CheckCircle2, Clock3, Edit, Eye, Loader2, Plus, Send, XCircle } from "lucide-react";
+import { Link } from "@/lib/router";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { formatJalali, resolveErrorMessage } from "@/lib/utils";
+
+const statusLabels: Record<string, string> = {
+  draft: "پیش‌نویس",
+  submitted: "در انتظار بررسی",
+  changes_requested: "نیازمند اصلاح",
+  published: "منتشر شده",
+  archived: "آرشیو شده",
+};
+
+export default function AdminBlog() {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [posts, setPosts] = useState<Types.PostListSchema[]>([]);
+  const [status, setStatus] = useState("all");
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [actingId, setActingId] = useState<number | null>(null);
+
+  const canReview = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
+
+  const loadPosts = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await api.listAdminBlogPosts({
+        status: status === "all" ? undefined : status,
+        search: search.trim() || undefined,
+        limit: 100,
+      });
+      setPosts(data);
+    } catch (error) {
+      toast({
+        title: "دریافت نوشته‌ها ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [search, status, toast]);
+
+  useEffect(() => {
+    loadPosts();
+  }, [loadPosts]);
+
+  const stats = useMemo(() => {
+    return posts.reduce<Record<string, number>>((acc, post) => {
+      acc[post.status] = (acc[post.status] ?? 0) + 1;
+      return acc;
+    }, {});
+  }, [posts]);
+
+  const submitPost = async (postId: number) => {
+    setActingId(postId);
+    try {
+      await api.submitBlogPost(postId);
+      await loadPosts();
+      toast({ title: "نوشته برای بررسی ارسال شد", variant: "success" });
+    } catch (error) {
+      toast({ title: "ارسال ناموفق بود", description: resolveErrorMessage(error, "دوباره تلاش کنید"), variant: "destructive" });
+    } finally {
+      setActingId(null);
+    }
+  };
+
+  const reviewPost = async (postId: number, action: Types.PostReviewSchema["action"]) => {
+    setActingId(postId);
+    try {
+      await api.reviewBlogPost(postId, { action });
+      await loadPosts();
+      toast({ title: action === "publish" ? "نوشته منتشر شد" : "درخواست اصلاح ثبت شد", variant: "success" });
+    } catch (error) {
+      toast({ title: "عملیات ناموفق بود", description: resolveErrorMessage(error, "دوباره تلاش کنید"), variant: "destructive" });
+    } finally {
+      setActingId(null);
+    }
+  };
+
+  return (
+    <div className="space-y-6" dir="rtl">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <Button asChild>
+          <Link to="/admin/blog/new/edit">
+            <Plus className="ml-2 h-4 w-4" />
+            نوشته جدید
+          </Link>
+        </Button>
+        <div className="text-right">
+          <h2 className="text-2xl font-bold">مدیریت بلاگ</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            پیش‌نویس‌ها، صف بررسی، انتشار و اصلاح نوشته‌ها.
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card><CardContent className="flex items-center justify-between p-4"><BookOpenText className="h-5 w-5 text-primary" /><span>کل: {posts.length}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center justify-between p-4"><Clock3 className="h-5 w-5 text-amber-600" /><span>بررسی: {stats.submitted ?? 0}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center justify-between p-4"><CheckCircle2 className="h-5 w-5 text-emerald-600" /><span>منتشر: {stats.published ?? 0}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center justify-between p-4"><XCircle className="h-5 w-5 text-rose-600" /><span>اصلاح: {stats.changes_requested ?? 0}</span></CardContent></Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={loadPosts}>جستجو</Button>
+              <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="جستجو..." className="w-64 text-right" />
+              <Select value={status} onValueChange={setStatus}>
+                <SelectTrigger className="w-48"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">همه وضعیت‌ها</SelectItem>
+                  <SelectItem value="draft">پیش‌نویس</SelectItem>
+                  <SelectItem value="submitted">در انتظار بررسی</SelectItem>
+                  <SelectItem value="changes_requested">نیازمند اصلاح</SelectItem>
+                  <SelectItem value="published">منتشر شده</SelectItem>
+                  <SelectItem value="archived">آرشیو شده</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="text-right">
+              <CardTitle>نوشته‌ها</CardTitle>
+              <CardDescription>دسترسی نویسنده‌ها به نوشته‌های خودشان محدود می‌شود.</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {loading ? (
+            <div className="flex justify-center py-10"><Loader2 className="h-5 w-5 animate-spin" /></div>
+          ) : posts.length ? (
+            posts.map((post) => (
+              <div key={post.id} className="flex flex-col gap-3 rounded-2xl border p-4 md:flex-row md:items-center md:justify-between">
+                <div className="flex flex-wrap gap-2">
+                  <Button variant="outline" size="sm" asChild>
+                    <Link to={`/blog/${post.slug}`}><Eye className="ml-2 h-4 w-4" />مشاهده</Link>
+                  </Button>
+                  <Button variant="secondary" size="sm" asChild>
+                    <Link to={`/admin/blog/${post.id}/edit`}><Edit className="ml-2 h-4 w-4" />ویرایش</Link>
+                  </Button>
+                  {post.status === "draft" || post.status === "changes_requested" ? (
+                    <Button size="sm" onClick={() => submitPost(post.id)} disabled={actingId === post.id}>
+                      <Send className="ml-2 h-4 w-4" />ارسال برای بررسی
+                    </Button>
+                  ) : null}
+                  {canReview && post.status === "submitted" ? (
+                    <>
+                      <Button size="sm" onClick={() => reviewPost(post.id, "publish")} disabled={actingId === post.id}>انتشار</Button>
+                      <Button size="sm" variant="outline" onClick={() => reviewPost(post.id, "request_changes")} disabled={actingId === post.id}>درخواست اصلاح</Button>
+                    </>
+                  ) : null}
+                </div>
+                <div className="text-right">
+                  <div className="flex flex-wrap items-center justify-end gap-2">
+                    <Badge variant={post.status === "published" ? "default" : "secondary"}>{statusLabels[post.status] ?? post.status}</Badge>
+                    <h3 className="font-semibold">{post.title}</h3>
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {post.updated_at ? formatJalali(post.updated_at, false) : ""}
+                  </p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="rounded-2xl border border-dashed p-8 text-center text-muted-foreground">
+              نوشته‌ای پیدا نشد.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}