Improve ACP forum management UI
This commit is contained in:
Micha
@@ -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