544 lines
18 KiB
JavaScript
544 lines
18 KiB
JavaScript
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 applyLocalOrder = (parentId, orderedIds) => {
|
|
setForums((prev) =>
|
|
prev.map((forum) => {
|
|
const pid = getParentId(forum)
|
|
if (String(pid ?? '') !== String(parentId ?? '')) {
|
|
return forum
|
|
}
|
|
const newIndex = orderedIds.indexOf(String(forum.id))
|
|
return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
|
|
})
|
|
)
|
|
}
|
|
|
|
const handleDragOver = (event, targetId, parentId) => {
|
|
event.preventDefault()
|
|
event.dataTransfer.dropEffect = 'move'
|
|
if (!draggingId || String(draggingId) === String(targetId)) {
|
|
return
|
|
}
|
|
|
|
const draggedForum = forums.find((forum) => String(forum.id) === String(draggingId))
|
|
if (!draggedForum) {
|
|
return
|
|
}
|
|
|
|
const draggedParentId = getParentId(draggedForum)
|
|
if (String(draggedParentId ?? '') !== String(parentId ?? '')) {
|
|
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(draggingId))
|
|
const toIndex = ordered.indexOf(String(targetId))
|
|
if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
|
|
return
|
|
}
|
|
|
|
ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
|
|
setOverId(String(targetId))
|
|
applyLocalOrder(parentId, ordered)
|
|
}
|
|
|
|
const handleDragEnter = (forumId) => {
|
|
if (draggingId && String(forumId) !== String(draggingId)) {
|
|
setOverId(String(forumId))
|
|
}
|
|
}
|
|
|
|
const handleDragLeave = (event, forumId) => {
|
|
if (event.currentTarget.contains(event.relatedTarget)) {
|
|
return
|
|
}
|
|
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 }}
|
|
draggable
|
|
onDragStart={(event) => handleDragStart(event, node.id)}
|
|
onDragEnd={handleDragEnd}
|
|
onDragOver={(event) => handleDragOver(event, node.id, getParentId(node))}
|
|
onDragEnter={() => handleDragEnter(node.id)}
|
|
onDragLeave={(event) => handleDragLeave(event, 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' }}
|
|
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 (
|
|
<Container className="py-5">
|
|
<h2 className="mb-3">{t('acp.title')}</h2>
|
|
<p className="bb-muted">{t('acp.no_access')}</p>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<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')}>
|
|
<p className="bb-muted">{t('acp.general_hint')}</p>
|
|
</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>
|
|
</Tab>
|
|
</Tabs>
|
|
</Container>
|
|
)
|
|
}
|