129 lines
4.4 KiB
TypeScript
129 lines
4.4 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import type { NextPage } from 'next'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
|
|
interface Category {
|
|
id: number
|
|
name: string
|
|
slug: string
|
|
description: string
|
|
color: string
|
|
priority: number
|
|
is_active: boolean
|
|
}
|
|
|
|
const CategoriesManagement: NextPage = () => {
|
|
const [categories, setCategories] = useState<Category[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchCategories()
|
|
}, [])
|
|
|
|
const fetchCategories = async () => {
|
|
try {
|
|
const response = await fetch('/api/admin/categories')
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setCategories(data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch categories:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const toggleCategory = async (id: number, isActive: boolean) => {
|
|
try {
|
|
const response = await fetch(`/api/admin/categories/${id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ is_active: !isActive })
|
|
})
|
|
if (response.ok) {
|
|
fetchCategories()
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to update category:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Správa kategórií - Infohliadka</title>
|
|
</Head>
|
|
|
|
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
|
|
<h1>Správa kategórií</h1>
|
|
|
|
{loading ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '20px' }}>
|
|
<thead>
|
|
<tr style={{ backgroundColor: '#f3f4f6' }}>
|
|
<th style={{ padding: '12px', textAlign: 'left', border: '1px solid #d1d5db' }}>Názov</th>
|
|
<th style={{ padding: '12px', textAlign: 'left', border: '1px solid #d1d5db' }}>Priorita</th>
|
|
<th style={{ padding: '12px', textAlign: 'left', border: '1px solid #d1d5db' }}>Farba</th>
|
|
<th style={{ padding: '12px', textAlign: 'left', border: '1px solid #d1d5db' }}>Aktívna</th>
|
|
<th style={{ padding: '12px', textAlign: 'left', border: '1px solid #d1d5db' }}>Akcie</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{categories.map((category) => (
|
|
<tr key={category.id}>
|
|
<td style={{ padding: '12px', border: '1px solid #d1d5db' }}>
|
|
<strong>{category.name}</strong>
|
|
<div style={{ fontSize: '12px', color: '#6b7280' }}>
|
|
{category.description}
|
|
</div>
|
|
</td>
|
|
<td style={{ padding: '12px', border: '1px solid #d1d5db' }}>
|
|
{category.priority}
|
|
</td>
|
|
<td style={{ padding: '12px', border: '1px solid #d1d5db' }}>
|
|
<div style={{
|
|
width: '20px',
|
|
height: '20px',
|
|
backgroundColor: category.color,
|
|
borderRadius: '4px',
|
|
display: 'inline-block'
|
|
}}></div>
|
|
<span style={{ marginLeft: '8px' }}>{category.color}</span>
|
|
</td>
|
|
<td style={{ padding: '12px', border: '1px solid #d1d5db' }}>
|
|
{category.is_active ? '✅' : '❌'}
|
|
</td>
|
|
<td style={{ padding: '12px', border: '1px solid #d1d5db' }}>
|
|
<button
|
|
onClick={() => toggleCategory(category.id, category.is_active)}
|
|
style={{
|
|
padding: '4px 8px',
|
|
backgroundColor: category.is_active ? '#ef4444' : '#10b981',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
{category.is_active ? 'Deaktivovať' : 'Aktivovať'}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
|
|
<div style={{ marginTop: '30px' }}>
|
|
<Link href="/admin">← Späť na dashboard</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CategoriesManagement |