feat: Add bulletin board system
- Add BoardCategory and BoardPost models with multi-language support - Add bulletin API endpoints (CRUD, notice toggle, pin toggle) - Add board_enabled setting to control menu visibility - Create frontend board pages (list, detail, write, edit) - Create admin board management and category management pages - Update Header.tsx with conditional Board menu between Inquiry and Contact Us - Update admin settings with board_enabled toggle - Add Board menu to admin sidebar Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
AutonetSellCar Deploy
293
frontend/src/app/board/page.tsx
Normal file
293
frontend/src/app/board/page.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { boardApi, BoardPostListItem, BoardCategory, BoardPostListResponse, BoardCategoryListResponse } from '@/lib/api';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslate } from '@/lib/useTranslate';
|
||||
|
||||
export default function BoardPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { user, isLoggedIn } = useAuthStore();
|
||||
const { translate, language } = useTranslate();
|
||||
|
||||
const [posts, setPosts] = useState<BoardPostListItem[]>([]);
|
||||
const [notices, setNotices] = useState<BoardPostListItem[]>([]);
|
||||
const [categories, setCategories] = useState<BoardCategory[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const page = parseInt(searchParams.get('page') || '1');
|
||||
const categoryId = searchParams.get('category') ? parseInt(searchParams.get('category')!) : undefined;
|
||||
const search = searchParams.get('search') || '';
|
||||
|
||||
const getCategoryName = (cat: BoardCategory) => {
|
||||
if (language === 'en' && cat.name_en) return cat.name_en;
|
||||
if (language === 'mn' && cat.name_mn) return cat.name_mn;
|
||||
if (language === 'ru' && cat.name_ru) return cat.name_ru;
|
||||
return cat.name;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [postsRes, categoriesRes] = await Promise.all([
|
||||
boardApi.getPosts({ page, page_size: 20, category_id: categoryId, search }),
|
||||
boardApi.getCategories(),
|
||||
]);
|
||||
setPosts(postsRes.posts);
|
||||
setNotices(postsRes.notices);
|
||||
setTotal(postsRes.total);
|
||||
setTotalPages(postsRes.total_pages);
|
||||
setCategories(categoriesRes.categories);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch board data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [page, categoryId, search]);
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (days === 0) {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else if (days < 7) {
|
||||
return `${days}d ago`;
|
||||
} else {
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCategoryChange = (catId: number | undefined) => {
|
||||
const params = new URLSearchParams();
|
||||
if (catId) params.set('category', catId.toString());
|
||||
if (search) params.set('search', search);
|
||||
router.push(`/board?${params.toString()}`);
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const searchValue = formData.get('search') as string;
|
||||
const params = new URLSearchParams();
|
||||
if (categoryId) params.set('category', categoryId.toString());
|
||||
if (searchValue) params.set('search', searchValue);
|
||||
router.push(`/board?${params.toString()}`);
|
||||
};
|
||||
|
||||
const renderPostRow = (post: BoardPostListItem, isNotice: boolean = false) => (
|
||||
<tr
|
||||
key={post.id}
|
||||
className={`hover:bg-gray-50 cursor-pointer ${isNotice ? 'bg-amber-50' : ''}`}
|
||||
onClick={() => router.push(`/board/${post.id}`)}
|
||||
>
|
||||
<td className="px-4 py-3 text-center text-sm text-gray-500">
|
||||
{isNotice ? (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
|
||||
Notice
|
||||
</span>
|
||||
) : (
|
||||
post.id
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{post.is_pinned && !isNotice && (
|
||||
<span className="text-amber-500" title="Pinned">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<span className={`text-sm ${isNotice ? 'font-semibold text-red-700' : 'text-gray-900'}`}>
|
||||
{post.title}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 hidden md:table-cell">
|
||||
{post.category_name || '-'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 hidden sm:table-cell">
|
||||
{post.author_name || 'Unknown'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 text-center hidden sm:table-cell">
|
||||
{post.view_count}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 text-right">
|
||||
{formatDate(post.created_at)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto px-4 py-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{translate('Board')}
|
||||
</h1>
|
||||
{isLoggedIn && (
|
||||
<Link
|
||||
href="/board/write"
|
||||
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
{translate('Write')}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Categories & Search */}
|
||||
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
{/* Category Tabs */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => handleCategoryChange(undefined)}
|
||||
className={`px-3 py-1.5 text-sm rounded-full transition-colors ${
|
||||
!categoryId
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{translate('All')}
|
||||
</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => handleCategoryChange(cat.id)}
|
||||
className={`px-3 py-1.5 text-sm rounded-full transition-colors ${
|
||||
categoryId === cat.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{getCategoryName(cat)} ({cat.post_count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<form onSubmit={handleSearch} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
defaultValue={search}
|
||||
placeholder={translate('Search...')}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Posts Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : notices.length === 0 && posts.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
{translate('No posts yet')}
|
||||
</div>
|
||||
) : (
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-20">
|
||||
#
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{translate('Title')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell w-32">
|
||||
{translate('Category')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell w-32">
|
||||
{translate('Author')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell w-20">
|
||||
{translate('Views')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-28">
|
||||
{translate('Date')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{notices.map((notice) => renderPostRow(notice, true))}
|
||||
{posts.map((post) => renderPostRow(post, false))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-6 flex justify-center">
|
||||
<nav className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', (page - 1).toString());
|
||||
router.push(`/board?${params.toString()}`);
|
||||
}}
|
||||
disabled={page <= 1}
|
||||
className="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<span className="px-4 py-2 text-sm text-gray-700">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', (page + 1).toString());
|
||||
router.push(`/board?${params.toString()}`);
|
||||
}}
|
||||
disabled={page >= totalPages}
|
||||
className="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Login prompt for non-logged in users */}
|
||||
{!isLoggedIn && (
|
||||
<div className="mt-6 p-4 bg-blue-50 rounded-lg text-center">
|
||||
<p className="text-sm text-blue-800">
|
||||
{translate('Please login to write a post')}.{' '}
|
||||
<Link href="/login" className="font-medium underline">
|
||||
{translate('Login')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user