added attchments
This commit is contained in:
@@ -1,7 +1,15 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button, Badge, Card, Col, Container, Form, Modal, Row } from 'react-bootstrap'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { createThread, getForum, listAllForums, listThreadsByForum } from '../api/client'
|
||||
import {
|
||||
createThread,
|
||||
getForum,
|
||||
listAllForums,
|
||||
listThreadsByForum,
|
||||
uploadAttachment,
|
||||
listAttachmentExtensionsPublic,
|
||||
previewBbcode,
|
||||
} from '../api/client'
|
||||
import PortalTopicRow from '../components/PortalTopicRow'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
@@ -18,6 +26,24 @@ export default function ForumView() {
|
||||
const [title, setTitle] = useState('')
|
||||
const [body, setBody] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [threadFiles, setThreadFiles] = useState([])
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [allowedAttachmentExtensions, setAllowedAttachmentExtensions] = useState([])
|
||||
const [attachmentValidationError, setAttachmentValidationError] = useState('')
|
||||
const [threadDropActive, setThreadDropActive] = useState(false)
|
||||
const [showPreview, setShowPreview] = useState(false)
|
||||
const [previewHtml, setPreviewHtml] = useState('')
|
||||
const [previewLoading, setPreviewLoading] = useState(false)
|
||||
const [previewUrls, setPreviewUrls] = useState([])
|
||||
const [attachmentTab, setAttachmentTab] = useState('options')
|
||||
const [attachmentOptions, setAttachmentOptions] = useState({
|
||||
disableBbcode: false,
|
||||
disableSmilies: false,
|
||||
disableAutoUrls: false,
|
||||
attachSignature: true,
|
||||
notifyReplies: false,
|
||||
lockTopic: false,
|
||||
})
|
||||
const { t } = useTranslation()
|
||||
|
||||
const renderChildRows = (nodes) =>
|
||||
@@ -178,24 +204,388 @@ export default function ForumView() {
|
||||
}
|
||||
}, [id])
|
||||
|
||||
useEffect(() => {
|
||||
listAttachmentExtensionsPublic()
|
||||
.then((data) => {
|
||||
if (Array.isArray(data)) {
|
||||
setAllowedAttachmentExtensions(data.map((item) => String(item).toLowerCase()))
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setSaving(true)
|
||||
setError('')
|
||||
try {
|
||||
await createThread({ title, body, forumId: id })
|
||||
const created = await createThread({ title, body, forumId: id })
|
||||
if (threadFiles.length > 0 && created?.id) {
|
||||
setUploading(true)
|
||||
for (const entry of threadFiles) {
|
||||
await uploadAttachment({ threadId: created.id, file: entry.file })
|
||||
}
|
||||
}
|
||||
setTitle('')
|
||||
setBody('')
|
||||
setThreadFiles([])
|
||||
const updated = await listThreadsByForum(id)
|
||||
setThreads(updated)
|
||||
setShowModal(false)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setUploading(false)
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatBytes = (bytes) => {
|
||||
if (!bytes && bytes !== 0) return ''
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
const kb = bytes / 1024
|
||||
if (kb < 1024) return `${kb.toFixed(1)} KB`
|
||||
const mb = kb / 1024
|
||||
return `${mb.toFixed(1)} MB`
|
||||
}
|
||||
|
||||
const handleInlineInsert = (entry) => {
|
||||
const marker = `[attachment]${entry.file.name}[/attachment]`
|
||||
setBody((prev) => (prev ? `${prev}\n${marker}` : marker))
|
||||
}
|
||||
|
||||
const clearPreviewUrls = () => {
|
||||
previewUrls.forEach((url) => URL.revokeObjectURL(url))
|
||||
setPreviewUrls([])
|
||||
}
|
||||
|
||||
const buildPreviewBody = (rawBody, entries) => {
|
||||
if (!entries || entries.length === 0) {
|
||||
return { body: rawBody, urls: [] }
|
||||
}
|
||||
|
||||
const urls = []
|
||||
const map = new Map()
|
||||
entries.forEach((entry) => {
|
||||
const file = entry.file
|
||||
if (!file) return
|
||||
const url = URL.createObjectURL(file)
|
||||
urls.push(url)
|
||||
map.set(String(file.name || '').toLowerCase(), { url, mime: file.type || '' })
|
||||
})
|
||||
|
||||
const replaced = rawBody.replace(/\[attachment\](.+?)\[\/attachment\]/gi, (match, name) => {
|
||||
const key = String(name || '').trim().toLowerCase()
|
||||
if (!map.has(key)) return match
|
||||
const { url, mime } = map.get(key)
|
||||
if (mime.startsWith('image/')) {
|
||||
return `[img]${url}[/img]`
|
||||
}
|
||||
return `[url=${url}]${name}[/url]`
|
||||
})
|
||||
|
||||
return { body: replaced, urls }
|
||||
}
|
||||
|
||||
const handlePreview = async () => {
|
||||
setPreviewLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
clearPreviewUrls()
|
||||
const { body: previewBody, urls } = buildPreviewBody(body || '', threadFiles)
|
||||
const result = await previewBbcode(previewBody || '')
|
||||
setPreviewHtml(result?.html || '')
|
||||
setShowPreview(true)
|
||||
setPreviewUrls(urls)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const applyThreadFiles = (files) => {
|
||||
const fileList = Array.from(files || [])
|
||||
const allowed = allowedAttachmentExtensions
|
||||
const rejected = []
|
||||
const accepted = fileList.filter((file) => {
|
||||
const ext = file.name.split('.').pop()?.toLowerCase() || ''
|
||||
if (!ext || (allowed.length > 0 && !allowed.includes(ext))) {
|
||||
rejected.push(file.name)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
if (rejected.length > 0) {
|
||||
setAttachmentValidationError(
|
||||
t('attachment.invalid_extensions', { names: rejected.join(', ') })
|
||||
)
|
||||
} else {
|
||||
setAttachmentValidationError('')
|
||||
}
|
||||
|
||||
setThreadFiles(
|
||||
accepted.map((file) => ({
|
||||
id: `${file.name}-${file.lastModified}`,
|
||||
file,
|
||||
comment: '',
|
||||
}))
|
||||
)
|
||||
setAttachmentTab('attachments')
|
||||
}
|
||||
|
||||
const appendThreadFiles = (files) => {
|
||||
const fileList = Array.from(files || [])
|
||||
const allowed = allowedAttachmentExtensions
|
||||
const rejected = []
|
||||
const accepted = fileList.filter((file) => {
|
||||
const ext = file.name.split('.').pop()?.toLowerCase() || ''
|
||||
if (!ext || (allowed.length > 0 && !allowed.includes(ext))) {
|
||||
rejected.push(file.name)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
if (rejected.length > 0) {
|
||||
setAttachmentValidationError(
|
||||
t('attachment.invalid_extensions', { names: rejected.join(', ') })
|
||||
)
|
||||
} else if (accepted.length > 0) {
|
||||
setAttachmentValidationError('')
|
||||
}
|
||||
|
||||
if (accepted.length === 0) return
|
||||
setThreadFiles((prev) => [
|
||||
...prev,
|
||||
...accepted.map((file) => ({
|
||||
id: `${file.name}-${file.lastModified}`,
|
||||
file,
|
||||
comment: '',
|
||||
})),
|
||||
])
|
||||
setAttachmentTab('attachments')
|
||||
}
|
||||
|
||||
const handleThreadPaste = (event) => {
|
||||
const items = Array.from(event.clipboardData?.items || [])
|
||||
if (items.length === 0) return
|
||||
const imageItems = items.filter((item) => item.type?.startsWith('image/'))
|
||||
if (imageItems.length === 0) return
|
||||
event.preventDefault()
|
||||
const files = imageItems
|
||||
.map((item) => item.getAsFile())
|
||||
.filter(Boolean)
|
||||
.map((file) => {
|
||||
const ext = file.type?.split('/')[1] || 'png'
|
||||
const name = `pasted-${Date.now()}-${Math.floor(Math.random() * 1000)}.${ext}`
|
||||
return new File([file], name, { type: file.type })
|
||||
})
|
||||
appendThreadFiles(files)
|
||||
if (files.length > 0) {
|
||||
const marker = `[attachment]${files[0].name}[/attachment]`
|
||||
setBody((prev) => (prev ? `${prev}\n${marker}` : marker))
|
||||
}
|
||||
}
|
||||
|
||||
const renderAttachmentFooter = () => (
|
||||
<div className="bb-attachment-panel">
|
||||
<div className="bb-attachment-tabs">
|
||||
<button
|
||||
type="button"
|
||||
className={`bb-attachment-tab ${attachmentTab === 'options' ? 'is-active' : ''}`}
|
||||
onClick={() => setAttachmentTab('options')}
|
||||
>
|
||||
{t('attachment.tab_options')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`bb-attachment-tab ${attachmentTab === 'attachments' ? 'is-active' : ''}`}
|
||||
onClick={() => setAttachmentTab('attachments')}
|
||||
>
|
||||
{t('attachment.tab_attachments')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="bb-attachment-body">
|
||||
{attachmentTab === 'options' && (
|
||||
<div className="bb-attachment-options">
|
||||
<Form.Check
|
||||
type="checkbox"
|
||||
id="bb-option-disable-bbcode"
|
||||
label={t('attachment.option_disable_bbcode')}
|
||||
checked={attachmentOptions.disableBbcode}
|
||||
onChange={(event) =>
|
||||
setAttachmentOptions((prev) => ({
|
||||
...prev,
|
||||
disableBbcode: event.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Form.Check
|
||||
type="checkbox"
|
||||
id="bb-option-disable-smilies"
|
||||
label={t('attachment.option_disable_smilies')}
|
||||
checked={attachmentOptions.disableSmilies}
|
||||
onChange={(event) =>
|
||||
setAttachmentOptions((prev) => ({
|
||||
...prev,
|
||||
disableSmilies: event.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Form.Check
|
||||
type="checkbox"
|
||||
id="bb-option-disable-auto-urls"
|
||||
label={t('attachment.option_disable_auto_urls')}
|
||||
checked={attachmentOptions.disableAutoUrls}
|
||||
onChange={(event) =>
|
||||
setAttachmentOptions((prev) => ({
|
||||
...prev,
|
||||
disableAutoUrls: event.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Form.Check
|
||||
type="checkbox"
|
||||
id="bb-option-attach-signature"
|
||||
label={t('attachment.option_attach_signature')}
|
||||
checked={attachmentOptions.attachSignature}
|
||||
onChange={(event) =>
|
||||
setAttachmentOptions((prev) => ({
|
||||
...prev,
|
||||
attachSignature: event.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Form.Check
|
||||
type="checkbox"
|
||||
id="bb-option-notify-replies"
|
||||
label={t('attachment.option_notify_replies')}
|
||||
checked={attachmentOptions.notifyReplies}
|
||||
onChange={(event) =>
|
||||
setAttachmentOptions((prev) => ({
|
||||
...prev,
|
||||
notifyReplies: event.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Form.Check
|
||||
type="checkbox"
|
||||
id="bb-option-lock-topic"
|
||||
label={t('attachment.option_lock_topic')}
|
||||
checked={attachmentOptions.lockTopic}
|
||||
onChange={(event) =>
|
||||
setAttachmentOptions((prev) => ({
|
||||
...prev,
|
||||
lockTopic: event.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{attachmentTab === 'attachments' && (
|
||||
<>
|
||||
<p className="bb-muted mb-2">
|
||||
{t('attachment.hint')}
|
||||
</p>
|
||||
<p className="bb-muted mb-3">
|
||||
{t('attachment.max_size', { size: '25 MB' })}
|
||||
</p>
|
||||
<div className="bb-attachment-actions">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline-secondary"
|
||||
onClick={() => document.getElementById('bb-thread-attachment-input')?.click()}
|
||||
>
|
||||
{t('attachment.add_files')}
|
||||
</Button>
|
||||
</div>
|
||||
{attachmentValidationError && (
|
||||
<p className="text-danger mb-2">{attachmentValidationError}</p>
|
||||
)}
|
||||
<table className="table bb-attachment-table">
|
||||
<thead className="tr-header">
|
||||
<tr>
|
||||
<th scope="col" className="text-start">{t('attachment.filename')}</th>
|
||||
<th scope="col" className="text-start">{t('attachment.file_comment')}</th>
|
||||
<th scope="col" className="text-start">{t('attachment.size')}</th>
|
||||
<th scope="col" className="text-start">{t('attachment.status')}</th>
|
||||
<th scope="col" className="text-start">{t('attachment.actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{threadFiles.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="bb-attachment-empty">
|
||||
{t('attachment.empty')}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{threadFiles.map((entry) => (
|
||||
<tr key={entry.id} className="bb-attachment-row">
|
||||
<td className="bb-attachment-name text-start" style={{ color: 'var(--bb-accent)' }}>
|
||||
{entry.file.name}
|
||||
</td>
|
||||
<td className="bb-attachment-cell-comment">
|
||||
<Form.Control
|
||||
className="bb-attachment-comment"
|
||||
value={entry.comment}
|
||||
onChange={(event) =>
|
||||
setThreadFiles((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === entry.id
|
||||
? { ...item, comment: event.target.value }
|
||||
: item
|
||||
)
|
||||
)
|
||||
}
|
||||
placeholder={t('attachment.file_comment_placeholder')}
|
||||
/>
|
||||
</td>
|
||||
<td className="bb-attachment-size text-start" style={{ color: 'var(--bb-accent)' }}>
|
||||
{formatBytes(entry.file.size)}
|
||||
</td>
|
||||
<td className="bb-attachment-status text-center">
|
||||
<i className="bi bi-check-circle-fill text-success" aria-hidden="true" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="bb-attachment-row-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="bb-attachment-action"
|
||||
onClick={() => handleInlineInsert(entry)}
|
||||
title={t('attachment.place_inline')}
|
||||
aria-label={t('attachment.place_inline')}
|
||||
>
|
||||
<i className="bi bi-paperclip" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bb-attachment-action"
|
||||
onClick={() =>
|
||||
setThreadFiles((prev) =>
|
||||
prev.filter((item) => item.id !== entry.id)
|
||||
)
|
||||
}
|
||||
title={t('attachment.delete_file')}
|
||||
aria-label={t('attachment.delete_file')}
|
||||
>
|
||||
<i className="bi bi-trash" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Container fluid className="py-5 bb-shell-container">
|
||||
{loading && <p className="bb-muted">{t('forum.loading')}</p>}
|
||||
@@ -258,7 +648,7 @@ export default function ForumView() {
|
||||
</div>
|
||||
{!token && <p className="bb-muted mb-3">{t('forum.login_hint')}</p>}
|
||||
<div className="bb-portal-topic-table">
|
||||
<div className="bb-portal-topic-header">
|
||||
<div className="bb-portal-topic-header tr-header">
|
||||
<span>{t('portal.topic')}</span>
|
||||
<span>{t('thread.replies')}</span>
|
||||
<span>{t('thread.views')}</span>
|
||||
@@ -284,13 +674,19 @@ export default function ForumView() {
|
||||
</>
|
||||
)}
|
||||
{forum?.type === 'forum' && (
|
||||
<Modal show={showModal} onHide={() => setShowModal(false)} centered size="lg">
|
||||
<Modal
|
||||
show={showModal}
|
||||
onHide={() => setShowModal(false)}
|
||||
centered
|
||||
size="lg"
|
||||
dialogClassName="bb-thread-modal"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{t('forum.start_thread')}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Modal.Body className="d-flex flex-column p-0">
|
||||
{!token && <p className="bb-muted mb-3">{t('forum.login_hint')}</p>}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form onSubmit={handleSubmit} className="d-flex flex-column flex-grow-1 px-3 pb-3 pt-2">
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.title')}</Form.Label>
|
||||
<Form.Control
|
||||
@@ -302,30 +698,113 @@ export default function ForumView() {
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Group className="mb-3 d-flex flex-column flex-grow-1">
|
||||
<Form.Label>{t('form.body')}</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={6}
|
||||
className="flex-grow-1"
|
||||
placeholder={t('form.thread_body_placeholder')}
|
||||
value={body}
|
||||
onChange={(event) => setBody(event.target.value)}
|
||||
onPaste={handleThreadPaste}
|
||||
disabled={!token || saving}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<div className="d-flex gap-2 justify-content-between">
|
||||
<Form.Control
|
||||
id="bb-thread-attachment-input"
|
||||
type="file"
|
||||
multiple
|
||||
className="bb-attachment-input"
|
||||
disabled={!token || saving || uploading}
|
||||
onChange={(event) => {
|
||||
applyThreadFiles(event.target.files)
|
||||
event.target.value = ''
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className={`bb-attachment-drop ${threadDropActive ? 'is-dragover' : ''}`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => document.getElementById('bb-thread-attachment-input')?.click()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
document.getElementById('bb-thread-attachment-input')?.click()
|
||||
}
|
||||
}}
|
||||
onDragOver={(event) => {
|
||||
event.preventDefault()
|
||||
setThreadDropActive(true)
|
||||
}}
|
||||
onDragLeave={() => setThreadDropActive(false)}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault()
|
||||
setThreadDropActive(false)
|
||||
applyThreadFiles(event.dataTransfer.files)
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{t('attachment.drop_hint')}{' '}
|
||||
<button
|
||||
type="button"
|
||||
className="bb-attachment-drop-link"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
document.getElementById('bb-thread-attachment-input')?.click()
|
||||
}}
|
||||
>
|
||||
{t('attachment.drop_browse')}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
{renderAttachmentFooter()}
|
||||
<Modal.Footer className="d-flex gap-2 justify-content-between mt-auto pt-2 px-0 border-0 mb-0 pb-0">
|
||||
<Button type="button" variant="outline-secondary" onClick={() => setShowModal(false)}>
|
||||
{t('acp.cancel')}
|
||||
</Button>
|
||||
<Button type="submit" className="bb-accent-button" disabled={!token || saving}>
|
||||
{saving ? t('form.posting') : t('form.create_thread')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline-secondary"
|
||||
onClick={handlePreview}
|
||||
disabled={!token || saving || uploading || previewLoading}
|
||||
>
|
||||
{t('form.preview')}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bb-accent-button"
|
||||
disabled={!token || saving || uploading}
|
||||
>
|
||||
{saving || uploading ? t('form.posting') : t('form.create_thread')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
)}
|
||||
<Modal
|
||||
show={showPreview}
|
||||
onHide={() => {
|
||||
setShowPreview(false)
|
||||
clearPreviewUrls()
|
||||
}}
|
||||
centered
|
||||
size="lg"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{t('form.preview')}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<div
|
||||
className="bb-post-body"
|
||||
dangerouslySetInnerHTML={{ __html: previewHtml || '' }}
|
||||
/>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user