353 lines
10 KiB
TypeScript
353 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Search, Plus, Eye, Pencil, Trash2 } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { getArticlePagination, deleteArticle } from "@/service/article";
|
|
import { formatDate } from "@/utils/global";
|
|
import { close, loading } from "@/config/swal";
|
|
import Cookies from "js-cookie";
|
|
import { isContributorRole } from "@/constants/user-roles";
|
|
import Swal from "sweetalert2";
|
|
import type { ArticleContentKind } from "@/constants/article-content-types";
|
|
import {
|
|
ARTICLE_KIND_LABEL,
|
|
articleListPath,
|
|
} from "@/constants/article-content-types";
|
|
|
|
type Props = {
|
|
kind: ArticleContentKind;
|
|
typeId: number;
|
|
};
|
|
|
|
export default function NewsArticleList({ kind, typeId }: Props) {
|
|
const [articles, setArticles] = useState<any[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const [search, setSearch] = useState("");
|
|
const [debouncedSearch, setDebouncedSearch] = useState("");
|
|
const [levelId, setLevelId] = useState<string | undefined>();
|
|
const [selectedTag, setSelectedTag] = useState<string>("all");
|
|
|
|
useEffect(() => {
|
|
setLevelId(Cookies.get("urie"));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const t = setTimeout(() => setDebouncedSearch(search), 350);
|
|
return () => clearTimeout(t);
|
|
}, [search]);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
loading();
|
|
try {
|
|
const req = {
|
|
limit: "10",
|
|
page,
|
|
title: debouncedSearch,
|
|
source: "",
|
|
categoryId: null,
|
|
search: "",
|
|
sort: "desc",
|
|
sortBy: "created_at",
|
|
typeId,
|
|
};
|
|
const res = await getArticlePagination(req as any);
|
|
const payload = (res as any)?.data;
|
|
const data = payload?.data ?? [];
|
|
setArticles(Array.isArray(data) ? data : []);
|
|
setTotalPage(payload?.meta?.totalPage ?? 1);
|
|
} finally {
|
|
close();
|
|
}
|
|
}, [page, debouncedSearch, typeId]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
const getStatus = (article: any) => {
|
|
if (article.isDraft) return "Draft";
|
|
if (article.publishStatus?.toLowerCase() === "cancel") return "Pending";
|
|
if (article.isPublish) return "Published";
|
|
return "Pending";
|
|
};
|
|
|
|
const statusClass = (status: string) => {
|
|
const v = status.toLowerCase();
|
|
if (v === "published") return "bg-green-100 text-green-700";
|
|
if (v === "pending") return "bg-yellow-100 text-yellow-700";
|
|
if (v === "draft") return "bg-gray-200 text-gray-600";
|
|
return "bg-gray-200 text-gray-600";
|
|
};
|
|
|
|
async function handleDelete(id: number) {
|
|
const ok = await Swal.fire({
|
|
icon: "warning",
|
|
title: "Delete this article?",
|
|
showCancelButton: true,
|
|
});
|
|
if (!ok.isConfirmed) return;
|
|
|
|
loading();
|
|
try {
|
|
const res = await deleteArticle(String(id));
|
|
if ((res as any)?.error) {
|
|
await Swal.fire({
|
|
icon: "error",
|
|
title: "Delete failed",
|
|
text: String((res as any)?.message ?? ""),
|
|
});
|
|
return;
|
|
}
|
|
await fetchData();
|
|
await Swal.fire({
|
|
icon: "success",
|
|
title: "Deleted",
|
|
timer: 1200,
|
|
showConfirmButton: false,
|
|
});
|
|
} finally {
|
|
close();
|
|
}
|
|
}
|
|
|
|
const parseTags = (tags?: string) => {
|
|
if (!tags) return [];
|
|
return tags
|
|
.split(",")
|
|
.map((t) => t.replace("#", "").trim())
|
|
.filter(Boolean);
|
|
};
|
|
|
|
const tagCounts: Record<string, number> = {};
|
|
|
|
articles.forEach((article) => {
|
|
parseTags(article.tags).forEach((tag) => {
|
|
tagCounts[tag] = (tagCounts[tag] || 0) + 1;
|
|
});
|
|
});
|
|
|
|
const tagEntries = Object.entries(tagCounts);
|
|
|
|
const allOne = tagEntries.every(([, count]) => count === 1);
|
|
|
|
let topTags: string[];
|
|
|
|
if (allOne) {
|
|
topTags = tagEntries
|
|
.sort(() => Math.random() - 0.5)
|
|
.slice(0, 5)
|
|
.map(([tag]) => tag);
|
|
} else {
|
|
topTags = tagEntries
|
|
.sort((a, b) => b[1] - a[1])
|
|
.slice(0, 5)
|
|
.map(([tag]) => tag);
|
|
}
|
|
|
|
const filteredArticles =
|
|
selectedTag === "all"
|
|
? articles
|
|
: articles.filter((a) => parseTags(a.tags).includes(selectedTag));
|
|
|
|
const label = ARTICLE_KIND_LABEL[kind];
|
|
const basePath = articleListPath(kind);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-slate-800">
|
|
News & Articles
|
|
</h1>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
Create and manage {label.toLowerCase()} articles.
|
|
</p>
|
|
</div>
|
|
|
|
{isContributorRole(levelId) && (
|
|
<Link href={`${basePath}/create`}>
|
|
<Button className="bg-blue-600 hover:bg-blue-700 rounded-lg">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
New {label} article
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => setSelectedTag("all")}
|
|
className={`px-4 py-1.5 rounded-full text-sm text-black font-bold border ${
|
|
selectedTag === "all"
|
|
? "bg-blue-600 text-white"
|
|
: "bg-white text-slate-600"
|
|
}`}
|
|
>
|
|
All ({articles.length})
|
|
</button>
|
|
{topTags.map((tag) => (
|
|
<button
|
|
key={tag}
|
|
onClick={() => setSelectedTag(tag)}
|
|
className={`px-4 py-1.5 rounded-full text-sm text-black font-bold border ${
|
|
selectedTag === tag
|
|
? "bg-blue-600 text-white"
|
|
: "bg-white text-slate-600"
|
|
}`}
|
|
>
|
|
{tag} ({tagCounts[tag]})
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* SEARCH */}
|
|
<div className="flex gap-3">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-3 w-4 h-4 text-slate-400" />
|
|
<Input
|
|
placeholder="Search by title..."
|
|
className="pl-9"
|
|
value={search}
|
|
onChange={(e) => {
|
|
setSearch(e.target.value);
|
|
setPage(1);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TABLE */}
|
|
<Card className="rounded-2xl border shadow-sm">
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="pl-3">Article</TableHead>
|
|
<TableHead>Category</TableHead>
|
|
<TableHead>Author</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{filteredArticles.length > 0 ? (
|
|
filteredArticles.map((article) => {
|
|
const status = getStatus(article);
|
|
|
|
return (
|
|
<TableRow key={article.id}>
|
|
<TableCell className="font-medium pl-3">
|
|
{article.title}
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
{article.categoryName ? (
|
|
<Badge className="bg-blue-100 text-blue-700 rounded-full">
|
|
{article.categoryName}
|
|
</Badge>
|
|
) : (
|
|
"—"
|
|
)}
|
|
</TableCell>
|
|
|
|
<TableCell>{article.createdByName || "—"}</TableCell>
|
|
|
|
<TableCell>
|
|
<span
|
|
className={`px-3 py-1 text-xs rounded-full font-medium ${statusClass(
|
|
status,
|
|
)}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
</TableCell>
|
|
|
|
<TableCell>{formatDate(article.createdAt)}</TableCell>
|
|
|
|
<TableCell className="text-right space-x-1">
|
|
<Link href={`/admin/news-article/detail/${article.id}`}>
|
|
<Button size="icon" variant="ghost">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link href={`/admin/news-article/update/${article.id}`}>
|
|
<Button size="icon" variant="ghost">
|
|
<Pencil className="w-4 h-4" />
|
|
</Button>
|
|
</Link>
|
|
|
|
{isContributorRole(levelId) && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() => handleDelete(article.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4 text-red-500" />
|
|
</Button>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="text-center py-8">
|
|
No articles found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
{/* PAGINATION */}
|
|
<div className="flex items-center justify-between p-4 border-t text-sm text-slate-500">
|
|
<p>
|
|
Page {page} of {totalPage}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page === 1}
|
|
onClick={() => setPage((p) => p - 1)}
|
|
>
|
|
Previous
|
|
</Button>
|
|
|
|
<Button size="sm" className="bg-blue-600">
|
|
{page}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page === totalPage}
|
|
onClick={() => setPage((p) => p + 1)}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|