414 lines
15 KiB
TypeScript
414 lines
15 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import { Plus, Search, Filter, Eye, Edit, Trash2, Calendar, Tag, Loader2 } from 'lucide-react';
|
||
|
||
interface NewsItem {
|
||
id: string;
|
||
title: string;
|
||
slug: string;
|
||
summary: string;
|
||
content: string;
|
||
category: string;
|
||
imageUrl?: string;
|
||
featured: boolean;
|
||
published: boolean;
|
||
publishedAt: string;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
views: number;
|
||
likes: number;
|
||
author?: {
|
||
id: string;
|
||
name?: string;
|
||
username: string;
|
||
};
|
||
}
|
||
|
||
interface NewsCategory {
|
||
id: string;
|
||
name: string;
|
||
slug: string;
|
||
color: string;
|
||
}
|
||
|
||
const NEWS_CATEGORIES: NewsCategory[] = [
|
||
{ id: 'company', name: 'Новости компании', slug: 'company', color: 'bg-blue-500' },
|
||
{ id: 'promotions', name: 'Акции', slug: 'promotions', color: 'bg-green-500' },
|
||
{ id: 'other', name: 'Другое', slug: 'other', color: 'bg-purple-500' }
|
||
];
|
||
|
||
export default function AdminNewsPage() {
|
||
const [news, setNews] = useState<NewsItem[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||
const [selectedStatus, setSelectedStatus] = useState<string>('all');
|
||
const [sortBy, setSortBy] = useState<string>('publishedAt');
|
||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
||
|
||
useEffect(() => {
|
||
loadNews();
|
||
}, [searchQuery, selectedCategory, selectedStatus, sortBy, sortOrder]);
|
||
|
||
const loadNews = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
const params = new URLSearchParams();
|
||
params.append('page', '1');
|
||
params.append('limit', '100');
|
||
params.append('sortBy', sortBy);
|
||
params.append('sortOrder', sortOrder);
|
||
|
||
if (searchQuery.trim()) {
|
||
params.append('search', searchQuery);
|
||
}
|
||
|
||
if (selectedCategory !== 'all') {
|
||
params.append('category', selectedCategory);
|
||
}
|
||
|
||
// Для админки показываем все новости
|
||
if (selectedStatus === 'published') {
|
||
params.append('published', 'true');
|
||
} else if (selectedStatus === 'draft') {
|
||
params.append('published', 'false');
|
||
} else if (selectedStatus === 'featured') {
|
||
params.append('featured', 'true');
|
||
}
|
||
|
||
const response = await fetch(`/api/news?${params}`);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setNews(data.data.news);
|
||
} else {
|
||
console.error('Error loading news:', data.error);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading news:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const formatDate = (dateString: string) => {
|
||
return new Date(dateString).toLocaleDateString('ru-RU', {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric'
|
||
});
|
||
};
|
||
|
||
const getCategoryInfo = (categoryId: string) => {
|
||
return NEWS_CATEGORIES.find(cat => cat.id === categoryId);
|
||
};
|
||
|
||
const handleDelete = async (id: string) => {
|
||
if (!confirm('Вы уверены, что хотите удалить эту новость?')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/news/${id}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
if (response.ok) {
|
||
setNews(news.filter(item => item.id !== id));
|
||
} else {
|
||
console.error('Error deleting news');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error deleting news:', error);
|
||
}
|
||
};
|
||
|
||
const togglePublished = async (id: string) => {
|
||
try {
|
||
const newsItem = news.find(item => item.id === id);
|
||
if (!newsItem) return;
|
||
|
||
const response = await fetch(`/api/news/${id}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
published: !newsItem.published
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
setNews(news.map(item =>
|
||
item.id === id ? { ...item, published: !item.published } : item
|
||
));
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error toggling published status:', error);
|
||
}
|
||
};
|
||
|
||
const toggleFeatured = async (id: string) => {
|
||
try {
|
||
const newsItem = news.find(item => item.id === id);
|
||
if (!newsItem) return;
|
||
|
||
const response = await fetch(`/api/news/${id}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
featured: !newsItem.featured
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
setNews(news.map(item =>
|
||
item.id === id ? { ...item, featured: !item.featured } : item
|
||
));
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error toggling featured status:', error);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<Loader2 className="h-8 w-8 animate-spin text-blue-600" />
|
||
<span className="ml-2 text-gray-600">Загрузка новостей...</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900">Управление новостями</h1>
|
||
<p className="text-gray-600 mt-2">Создание, редактирование и публикация новостей</p>
|
||
</div>
|
||
<Link
|
||
href="/admin/news/create"
|
||
className="mt-4 sm:mt-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||
>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Создать новость
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="bg-white rounded-lg shadow-sm p-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{/* Search */}
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||
<input
|
||
type="text"
|
||
placeholder="Поиск новостей..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
{/* Category Filter */}
|
||
<select
|
||
value={selectedCategory}
|
||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="all">Все категории</option>
|
||
{NEWS_CATEGORIES.map((category) => (
|
||
<option key={category.id} value={category.id}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
{/* Status Filter */}
|
||
<select
|
||
value={selectedStatus}
|
||
onChange={(e) => setSelectedStatus(e.target.value)}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="all">Все статусы</option>
|
||
<option value="published">Опубликовано</option>
|
||
<option value="draft">Черновик</option>
|
||
<option value="featured">Рекомендуемые</option>
|
||
</select>
|
||
|
||
{/* Sort */}
|
||
<div className="flex space-x-2">
|
||
<select
|
||
value={sortBy}
|
||
onChange={(e) => setSortBy(e.target.value)}
|
||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="publishedAt">По дате</option>
|
||
<option value="title">По названию</option>
|
||
<option value="views">По просмотрам</option>
|
||
<option value="likes">По лайкам</option>
|
||
</select>
|
||
<button
|
||
onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
|
||
className="px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
|
||
>
|
||
{sortOrder === 'asc' ? '↑' : '↓'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* News List */}
|
||
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
||
<div className="px-6 py-4 border-b border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-lg font-semibold text-gray-900">
|
||
Новости ({news.length})
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
{news.length > 0 ? (
|
||
<div className="divide-y divide-gray-200">
|
||
{news.map((newsItem) => {
|
||
const categoryInfo = getCategoryInfo(newsItem.category);
|
||
|
||
return (
|
||
<div key={newsItem.id} className="px-6 py-4 hover:bg-gray-50">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center space-x-2 mb-2">
|
||
<h3 className="text-sm font-medium text-gray-900 truncate">
|
||
{newsItem.title}
|
||
</h3>
|
||
{categoryInfo && (
|
||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white ${categoryInfo.color}`}>
|
||
{categoryInfo.name}
|
||
</span>
|
||
)}
|
||
{newsItem.featured && (
|
||
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||
Рекомендуемое
|
||
</span>
|
||
)}
|
||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||
newsItem.published
|
||
? 'bg-green-100 text-green-800'
|
||
: 'bg-gray-100 text-gray-800'
|
||
}`}>
|
||
{newsItem.published ? 'Опубликовано' : 'Черновик'}
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-gray-500 truncate mb-1">
|
||
{newsItem.summary}
|
||
</p>
|
||
<div className="flex items-center text-xs text-gray-400 space-x-4">
|
||
<span className="flex items-center">
|
||
<Calendar className="h-3 w-3 mr-1" />
|
||
{formatDate(newsItem.publishedAt)}
|
||
</span>
|
||
<span className="flex items-center">
|
||
<Eye className="h-3 w-3 mr-1" />
|
||
{newsItem.views} просмотров
|
||
</span>
|
||
<span className="flex items-center">
|
||
❤️ {newsItem.likes} лайков
|
||
</span>
|
||
{newsItem.author && (
|
||
<span>
|
||
Автор: {newsItem.author.name || newsItem.author.username}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 ml-4">
|
||
<button
|
||
onClick={() => toggleFeatured(newsItem.id)}
|
||
className={`p-2 rounded-md transition-colors ${
|
||
newsItem.featured
|
||
? 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100'
|
||
: 'text-gray-400 hover:text-yellow-600 hover:bg-yellow-50'
|
||
}`}
|
||
title="Рекомендуемое"
|
||
>
|
||
<Tag className="h-4 w-4" />
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => togglePublished(newsItem.id)}
|
||
className={`p-2 rounded-md transition-colors ${
|
||
newsItem.published
|
||
? 'text-green-600 bg-green-50 hover:bg-green-100'
|
||
: 'text-gray-400 hover:text-green-600 hover:bg-green-50'
|
||
}`}
|
||
title="Опубликовано"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</button>
|
||
|
||
<Link
|
||
href={`/admin/news/${newsItem.id}/edit`}
|
||
className="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md transition-colors"
|
||
title="Редактировать"
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
</Link>
|
||
|
||
<Link
|
||
href={`/news/${newsItem.slug}`}
|
||
target="_blank"
|
||
className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors"
|
||
title="Просмотр"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
|
||
<button
|
||
onClick={() => handleDelete(newsItem.id)}
|
||
className="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
|
||
title="Удалить"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-12">
|
||
<Filter className="mx-auto h-12 w-12 text-gray-400 mb-4" />
|
||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||
Новости не найдены
|
||
</h3>
|
||
<p className="text-gray-500">
|
||
Попробуйте изменить фильтры или создать новую новость
|
||
</p>
|
||
<Link
|
||
href="/admin/news/create"
|
||
className="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||
>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Создать новость
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|