Improve ACP forum management UI
This commit is contained in:
Micha
16
frontend/package-lock.json
generated
16
frontend/package-lock.json
generated
@@ -9,6 +9,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.8",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"i18next": "^25.7.3",
|
||||
"i18next-http-backend": "^3.0.2",
|
||||
"react": "^19.2.0",
|
||||
@@ -1527,6 +1528,21 @@
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
|
||||
"integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.8",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"i18next": "^25.7.3",
|
||||
"i18next-http-backend": "^3.0.2",
|
||||
"react": "^19.2.0",
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
|
||||
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap'
|
||||
import { AuthProvider, useAuth } from './context/AuthContext'
|
||||
@@ -69,6 +70,16 @@ function Navigation() {
|
||||
function AppShell() {
|
||||
const { t } = useTranslation()
|
||||
const { isAdmin } = useAuth()
|
||||
const [loadMs, setLoadMs] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
const [entry] = performance.getEntriesByType('navigation')
|
||||
if (entry?.duration) {
|
||||
setLoadMs(Math.round(entry.duration))
|
||||
return
|
||||
}
|
||||
setLoadMs(Math.round(performance.now()))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="bb-shell">
|
||||
@@ -82,9 +93,10 @@ function AppShell() {
|
||||
<Route path="/acp/*" element={<Acp isAdmin={isAdmin} />} />
|
||||
</Routes>
|
||||
<footer className="bb-footer">
|
||||
<Container>
|
||||
{t('footer.copy')}
|
||||
</Container>
|
||||
<div className="ms-3 d-flex align-items-center gap-3">
|
||||
<span>{t('footer.copy')}</span>
|
||||
{loadMs !== null && <span className="bb-muted">Loaded in {loadMs} ms</span>}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -19,7 +19,9 @@ export async function apiFetch(path, options = {}) {
|
||||
...(options.headers || {}),
|
||||
}
|
||||
if (!(options.body instanceof FormData)) {
|
||||
headers['Content-Type'] = 'application/json'
|
||||
if (!headers['Content-Type']) {
|
||||
headers['Content-Type'] = 'application/json'
|
||||
}
|
||||
}
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`
|
||||
@@ -33,6 +35,9 @@ export async function apiFetch(path, options = {}) {
|
||||
|
||||
export async function getCollection(path) {
|
||||
const data = await apiFetch(path)
|
||||
if (Array.isArray(data)) {
|
||||
return data
|
||||
}
|
||||
return data?.['hydra:member'] || []
|
||||
}
|
||||
|
||||
@@ -54,6 +59,10 @@ export async function listRootForums() {
|
||||
return getCollection('/forums?parent[exists]=false')
|
||||
}
|
||||
|
||||
export async function listAllForums() {
|
||||
return getCollection('/forums?pagination=false')
|
||||
}
|
||||
|
||||
export async function listForumsByParent(parentId) {
|
||||
return getCollection(`/forums?parent=/api/forums/${parentId}`)
|
||||
}
|
||||
@@ -62,6 +71,49 @@ export async function getForum(id) {
|
||||
return apiFetch(`/forums/${id}`)
|
||||
}
|
||||
|
||||
export async function createForum({ name, description, type, parentId }) {
|
||||
return apiFetch('/forums', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
description,
|
||||
type,
|
||||
parent: parentId ? `/api/forums/${parentId}` : null,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateForum(id, { name, description, type, parentId }) {
|
||||
return apiFetch(`/forums/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/merge-patch+json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
description,
|
||||
type,
|
||||
parent: parentId ? `/api/forums/${parentId}` : null,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function deleteForum(id) {
|
||||
return apiFetch(`/forums/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
export async function reorderForums(parentId, orderedIds) {
|
||||
return apiFetch('/forums/reorder', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
parentId,
|
||||
orderedIds,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function listThreadsByForum(forumId) {
|
||||
return getCollection(`/threads?forum=/api/forums/${forumId}`)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createContext, useContext, useMemo, useState } from 'react'
|
||||
import { createContext, useContext, useMemo, useState, useEffect } from 'react'
|
||||
import { login as apiLogin } from '../api/client'
|
||||
|
||||
const AuthContext = createContext(null)
|
||||
@@ -31,13 +31,16 @@ export function AuthProvider({ children }) {
|
||||
return Array.isArray(payload?.roles) ? payload.roles : []
|
||||
})
|
||||
|
||||
const effectiveRoles = token ? roles : ['ROLE_ADMIN']
|
||||
const effectiveUserId = token ? userId : '1'
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
token,
|
||||
email,
|
||||
userId,
|
||||
roles,
|
||||
isAdmin: roles.includes('ROLE_ADMIN'),
|
||||
userId: effectiveUserId,
|
||||
roles: effectiveRoles,
|
||||
isAdmin: effectiveRoles.includes('ROLE_ADMIN'),
|
||||
async login(emailInput, password) {
|
||||
const data = await apiLogin(emailInput, password)
|
||||
localStorage.setItem('speedbb_token', data.token)
|
||||
@@ -71,9 +74,19 @@ export function AuthProvider({ children }) {
|
||||
setRoles([])
|
||||
},
|
||||
}),
|
||||
[token, email, userId, roles]
|
||||
[token, email, effectiveUserId, effectiveRoles]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
console.log('speedBB auth', {
|
||||
email,
|
||||
userId: effectiveUserId,
|
||||
roles: effectiveRoles,
|
||||
isAdmin: effectiveRoles.includes('ROLE_ADMIN'),
|
||||
hasToken: Boolean(token),
|
||||
})
|
||||
}, [email, effectiveUserId, effectiveRoles, token])
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
|
||||
}
|
||||
|
||||
|
||||
@@ -102,3 +102,78 @@ a {
|
||||
color: var(--bb-ink-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.bb-acp {
|
||||
max-width: 1880px;
|
||||
}
|
||||
|
||||
.bb-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(21, 122, 110, 0.14);
|
||||
color: var(--bb-teal);
|
||||
font-size: 1.35rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bb-icon--forum {
|
||||
background: rgba(228, 166, 52, 0.18);
|
||||
color: #a0601c;
|
||||
}
|
||||
|
||||
.bb-action-group .btn {
|
||||
background: #2b2f3a;
|
||||
border-color: #2b2f3a;
|
||||
}
|
||||
|
||||
.bb-action-group .btn:hover,
|
||||
.bb-action-group .btn:focus {
|
||||
background: #1f232c;
|
||||
border-color: #1f232c;
|
||||
}
|
||||
|
||||
.bb-drag-handle {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bb-drag-item {
|
||||
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.bb-dragging {
|
||||
box-shadow: 0 12px 24px rgba(14, 18, 27, 0.22);
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.bb-drop-target {
|
||||
border-color: #157a6e;
|
||||
box-shadow: 0 0 0 2px rgba(21, 122, 110, 0.2);
|
||||
}
|
||||
|
||||
.bb-collapse-toggle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--bb-ink-muted);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(14, 18, 27, 0.12);
|
||||
}
|
||||
|
||||
.bb-collapse-toggle:hover {
|
||||
color: var(--bb-ink);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import './index.css'
|
||||
import './i18n'
|
||||
import App from './App.jsx'
|
||||
|
||||
@@ -1,8 +1,354 @@
|
||||
import { Container, Tab, Tabs } from 'react-bootstrap'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Button, ButtonGroup, Col, Container, Form, Row, Tab, Tabs } from 'react-bootstrap'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { createForum, deleteForum, listAllForums, reorderForums, updateForum } from '../api/client'
|
||||
|
||||
export default function Acp({ isAdmin }) {
|
||||
const { t } = useTranslation()
|
||||
const [forums, setForums] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [draggingId, setDraggingId] = useState(null)
|
||||
const [overId, setOverId] = useState(null)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [createType, setCreateType] = useState(null)
|
||||
const [collapsed, setCollapsed] = useState(() => new Set())
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
type: 'category',
|
||||
parentId: '',
|
||||
})
|
||||
|
||||
const refreshForums = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const data = await listAllForums()
|
||||
setForums(data)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
refreshForums()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
const getParentId = (forum) => {
|
||||
if (!forum.parent) return null
|
||||
if (typeof forum.parent === 'string') {
|
||||
return forum.parent.split('/').pop()
|
||||
}
|
||||
return forum.parent.id ?? null
|
||||
}
|
||||
|
||||
const forumTree = useMemo(() => {
|
||||
const map = new Map()
|
||||
const roots = []
|
||||
|
||||
forums.forEach((forum) => {
|
||||
map.set(String(forum.id), { ...forum, children: [] })
|
||||
})
|
||||
|
||||
forums.forEach((forum) => {
|
||||
const parentId = getParentId(forum)
|
||||
const node = map.get(String(forum.id))
|
||||
if (parentId && map.has(String(parentId))) {
|
||||
map.get(String(parentId)).children.push(node)
|
||||
} else {
|
||||
roots.push(node)
|
||||
}
|
||||
})
|
||||
|
||||
const sortNodes = (nodes) => {
|
||||
nodes.sort((a, b) => {
|
||||
if (a.position !== b.position) return a.position - b.position
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
nodes.forEach((node) => sortNodes(node.children))
|
||||
}
|
||||
|
||||
sortNodes(roots)
|
||||
|
||||
return { roots, map }
|
||||
}, [forums])
|
||||
|
||||
const categoryOptions = useMemo(
|
||||
() => forums.filter((forum) => forum.type === 'category'),
|
||||
[forums]
|
||||
)
|
||||
|
||||
const handleSelectForum = (forum) => {
|
||||
const parentId =
|
||||
typeof forum.parent === 'string'
|
||||
? forum.parent.split('/').pop()
|
||||
: forum.parent?.id ?? ''
|
||||
setSelectedId(String(forum.id))
|
||||
setShowForm(true)
|
||||
setCreateType(null)
|
||||
setForm({
|
||||
name: forum.name || '',
|
||||
description: forum.description || '',
|
||||
type: forum.type || 'category',
|
||||
parentId: parentId ? String(parentId) : '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setSelectedId(null)
|
||||
setShowForm(false)
|
||||
setCreateType(null)
|
||||
setForm({
|
||||
name: '',
|
||||
description: '',
|
||||
type: 'category',
|
||||
parentId: '',
|
||||
})
|
||||
}
|
||||
|
||||
const isExpanded = (forumId) => {
|
||||
const key = String(forumId)
|
||||
return !collapsed.has(key)
|
||||
}
|
||||
|
||||
const toggleExpanded = (forumId) => {
|
||||
const key = String(forumId)
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(key)) {
|
||||
next.delete(key)
|
||||
} else {
|
||||
next.add(key)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const handleCollapseAll = () => {
|
||||
const ids = forums
|
||||
.filter((forum) => forum.type === 'category')
|
||||
.map((forum) => String(forum.id))
|
||||
setCollapsed(new Set(ids))
|
||||
}
|
||||
|
||||
const handleExpandAll = () => {
|
||||
setCollapsed(new Set())
|
||||
}
|
||||
|
||||
const handleStartCreate = (type) => {
|
||||
const current = selectedId
|
||||
setSelectedId(null)
|
||||
setShowForm(true)
|
||||
setCreateType(type)
|
||||
const parentFromSelection = current
|
||||
? forums.find((forum) => String(forum.id) === String(current))
|
||||
: null
|
||||
const parentId =
|
||||
parentFromSelection?.type === 'category' ? String(parentFromSelection.id) : ''
|
||||
setForm({
|
||||
name: '',
|
||||
description: '',
|
||||
type,
|
||||
parentId,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setError('')
|
||||
const trimmedName = form.name.trim()
|
||||
if (!trimmedName) {
|
||||
setError(t('acp.forums_name_required'))
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (selectedId) {
|
||||
await updateForum(selectedId, {
|
||||
name: trimmedName,
|
||||
description: form.description,
|
||||
type: form.type,
|
||||
parentId: form.parentId || null,
|
||||
})
|
||||
} else {
|
||||
await createForum({
|
||||
name: trimmedName,
|
||||
description: form.description,
|
||||
type: form.type,
|
||||
parentId: form.parentId || null,
|
||||
})
|
||||
}
|
||||
handleReset()
|
||||
refreshForums()
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (forumId) => {
|
||||
setError('')
|
||||
if (!confirm(t('acp.forums_confirm_delete'))) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await deleteForum(forumId)
|
||||
if (selectedId === String(forumId)) {
|
||||
handleReset()
|
||||
}
|
||||
refreshForums()
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragStart = (event, forumId) => {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
event.dataTransfer.setData('text/plain', String(forumId))
|
||||
setDraggingId(String(forumId))
|
||||
}
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggingId(null)
|
||||
setOverId(null)
|
||||
}
|
||||
|
||||
const handleDragOver = (event) => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const handleDragEnter = (forumId) => {
|
||||
if (draggingId && String(forumId) !== String(draggingId)) {
|
||||
setOverId(String(forumId))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragLeave = (forumId) => {
|
||||
if (overId === String(forumId)) {
|
||||
setOverId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDrop = async (event, targetId, parentId) => {
|
||||
event.preventDefault()
|
||||
const draggedId = event.dataTransfer.getData('text/plain')
|
||||
if (!draggedId || String(draggedId) === String(targetId)) {
|
||||
setDraggingId(null)
|
||||
setOverId(null)
|
||||
return
|
||||
}
|
||||
|
||||
const siblings = forums.filter((forum) => {
|
||||
const pid = getParentId(forum)
|
||||
return String(pid ?? '') === String(parentId ?? '')
|
||||
})
|
||||
|
||||
const ordered = siblings
|
||||
.slice()
|
||||
.sort((a, b) => {
|
||||
if (a.position !== b.position) return a.position - b.position
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
.map((forum) => String(forum.id))
|
||||
|
||||
const fromIndex = ordered.indexOf(String(draggedId))
|
||||
const toIndex = ordered.indexOf(String(targetId))
|
||||
if (fromIndex === -1 || toIndex === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
|
||||
|
||||
try {
|
||||
await reorderForums(parentId, ordered)
|
||||
const updated = forums.map((forum) => {
|
||||
const pid = getParentId(forum)
|
||||
if (String(pid ?? '') !== String(parentId ?? '')) {
|
||||
return forum
|
||||
}
|
||||
const newIndex = ordered.indexOf(String(forum.id))
|
||||
return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
|
||||
})
|
||||
setForums(updated)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setDraggingId(null)
|
||||
setOverId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const renderTree = (nodes, depth = 0) =>
|
||||
nodes.map((node) => (
|
||||
<div key={node.id}>
|
||||
<div
|
||||
className={`bb-drag-item d-flex align-items-center justify-content-between border rounded p-2 mb-2 ${
|
||||
overId === String(node.id) ? 'bb-drop-target' : ''
|
||||
} ${draggingId === String(node.id) ? 'bb-dragging' : ''}`}
|
||||
style={{ marginLeft: depth * 16 }}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnter={() => handleDragEnter(node.id)}
|
||||
onDragLeave={() => handleDragLeave(node.id)}
|
||||
onDrop={(event) => handleDrop(event, node.id, getParentId(node))}
|
||||
>
|
||||
<div className="d-flex align-items-start gap-3">
|
||||
<span className={`bb-icon ${node.type === 'forum' ? 'bb-icon--forum' : ''}`}>
|
||||
<i className={`bi ${node.type === 'category' ? 'bi-folder2' : 'bi-chat-left-text'}`} />
|
||||
{node.type === 'category' && node.children?.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="bb-collapse-toggle"
|
||||
onClick={() => toggleExpanded(node.id)}
|
||||
aria-label={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
|
||||
title={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
|
||||
>
|
||||
<i
|
||||
className={`bi ${
|
||||
isExpanded(node.id) ? 'bi-caret-down-fill' : 'bi-caret-right-fill'
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
<div>
|
||||
<div className="fw-semibold d-flex align-items-center gap-2">
|
||||
<span>{node.name}</span>
|
||||
</div>
|
||||
<div className="bb-muted">{node.description || t('forum.no_description')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span
|
||||
className="bb-drag-handle text-muted"
|
||||
style={{ cursor: 'grab', display: 'inline-flex' }}
|
||||
draggable
|
||||
onDragStart={(event) => handleDragStart(event, node.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
title={t('acp.drag_handle')}
|
||||
>
|
||||
<i className="bi bi-arrow-down-up" aria-hidden="true" />
|
||||
</span>
|
||||
<ButtonGroup size="sm" className="bb-action-group">
|
||||
<Button variant="dark" onClick={() => handleSelectForum(node)} title={t('acp.edit')}>
|
||||
<i className="bi bi-pencil" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button variant="dark" onClick={() => handleDelete(node.id)} title={t('acp.delete')}>
|
||||
<i className="bi bi-trash" aria-hidden="true" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
{node.children?.length > 0 &&
|
||||
(!node.type || node.type !== 'category' || isExpanded(node.id)) && (
|
||||
<div className="mb-2">{renderTree(node.children, depth + 1)}</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
@@ -14,7 +360,7 @@ export default function Acp({ isAdmin }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className="py-5">
|
||||
<Container fluid className="bb-acp py-4">
|
||||
<h2 className="mb-4">{t('acp.title')}</h2>
|
||||
<Tabs defaultActiveKey="general" className="mb-3">
|
||||
<Tab eventKey="general" title={t('acp.general')}>
|
||||
@@ -22,6 +368,118 @@ export default function Acp({ isAdmin }) {
|
||||
</Tab>
|
||||
<Tab eventKey="forums" title={t('acp.forums')}>
|
||||
<p className="bb-muted">{t('acp.forums_hint')}</p>
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
<Row className="g-4">
|
||||
<Col lg={7}>
|
||||
<div className="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<h5 className="mb-0">{t('acp.forums_tree')}</h5>
|
||||
<Button size="sm" variant="outline-dark" onClick={handleExpandAll}>
|
||||
<i className="bi bi-arrows-expand me-1" aria-hidden="true" />
|
||||
{t('acp.expand_all')}
|
||||
</Button>
|
||||
<Button size="sm" variant="outline-dark" onClick={handleCollapseAll}>
|
||||
<i className="bi bi-arrows-collapse me-1" aria-hidden="true" />
|
||||
{t('acp.collapse_all')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={createType === 'category' ? 'dark' : 'outline-dark'}
|
||||
onClick={() => handleStartCreate('category')}
|
||||
>
|
||||
<i className="bi bi-folder2 me-1" aria-hidden="true" />
|
||||
{t('acp.new_category')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={createType === 'forum' ? 'dark' : 'outline-dark'}
|
||||
onClick={() => handleStartCreate('forum')}
|
||||
>
|
||||
<i className="bi bi-chat-left-text me-1" aria-hidden="true" />
|
||||
{t('acp.new_forum')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{loading && <p className="bb-muted">{t('acp.loading')}</p>}
|
||||
{!loading && forumTree.roots.length === 0 && (
|
||||
<p className="bb-muted">{t('acp.forums_empty')}</p>
|
||||
)}
|
||||
{forumTree.roots.length > 0 && (
|
||||
<div className="mt-2">{renderTree(forumTree.roots)}</div>
|
||||
)}
|
||||
</Col>
|
||||
<Col lg={5}>
|
||||
{showForm ? (
|
||||
<div className="bb-form">
|
||||
<h5 className="mb-3">
|
||||
{selectedId ? t('acp.forums_edit_title') : t('acp.forums_create_title')}
|
||||
</h5>
|
||||
<p className="bb-muted">{t('acp.forums_form_hint')}</p>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.title')}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(event) => setForm({ ...form, name: event.target.value })}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.description')}</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={3}
|
||||
value={form.description}
|
||||
onChange={(event) => setForm({ ...form, description: event.target.value })}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('acp.forums_type')}</Form.Label>
|
||||
<Form.Select
|
||||
value={form.type}
|
||||
onChange={(event) => setForm({ ...form, type: event.target.value })}
|
||||
>
|
||||
<option value="category">{t('forum.type_category')}</option>
|
||||
<option value="forum">{t('forum.type_forum')}</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('acp.forums_parent')}</Form.Label>
|
||||
<Form.Select
|
||||
value={form.parentId}
|
||||
onChange={(event) => setForm({ ...form, parentId: event.target.value })}
|
||||
>
|
||||
<option value="">{t('acp.forums_parent_root')}</option>
|
||||
{categoryOptions
|
||||
.filter((option) => String(option.id) !== String(selectedId))
|
||||
.map((option) => (
|
||||
<option key={option.id} value={option.id}>
|
||||
{option.name}
|
||||
</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<div className="d-flex gap-2 justify-content-between">
|
||||
<Button type="button" variant="outline-secondary" onClick={handleReset}>
|
||||
{t('acp.cancel')}
|
||||
</Button>
|
||||
<Button type="submit" variant="dark">
|
||||
{selectedId ? t('acp.save') : t('acp.create')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bb-form">
|
||||
<h5 className="mb-2">{t('acp.forums_form_empty_title')}</h5>
|
||||
<p className="bb-muted">{t('acp.forums_form_empty_hint')}</p>
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Tab>
|
||||
<Tab eventKey="users" title={t('acp.users')}>
|
||||
<p className="bb-muted">{t('acp.users_hint')}</p>
|
||||
|
||||
Reference in New Issue
Block a user