72c5379706
- CharacterList: entire card is clickable to enter edit mode - CharacterList: uses ConfirmModal for delete (replaces browser confirm) - CharacterList: action buttons stop propagation to avoid double-nav - ContentPage: auto-selects first active character as default - Rename "Archivio Contenuti" → "Libreria Contenuti" everywhere - Mobile-safe grid for character cards Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
261 lines
13 KiB
JavaScript
261 lines
13 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { api } from '../api'
|
|
import ConfirmModal from './ConfirmModal'
|
|
|
|
const statusLabels = { draft: 'Bozza', approved: 'Approvato', scheduled: 'Schedulato', published: 'Pubblicato' }
|
|
const statusColors = {
|
|
draft: { bg: '#FFFBEB', color: '#B45309' },
|
|
approved: { bg: 'var(--success-light)', color: 'var(--success)' },
|
|
scheduled: { bg: '#EFF6FF', color: '#1D4ED8' },
|
|
published: { bg: '#F5F3FF', color: '#6D28D9' },
|
|
}
|
|
|
|
function groupByBatch(posts) {
|
|
const groups = []
|
|
const batchMap = {}
|
|
for (const post of posts) {
|
|
const key = post.batch_id || `solo_${post.id}`
|
|
if (batchMap[key]) {
|
|
batchMap[key].posts.push(post)
|
|
} else {
|
|
const group = { key, posts: [post] }
|
|
batchMap[key] = group
|
|
groups.push(group)
|
|
}
|
|
}
|
|
return groups
|
|
}
|
|
|
|
export default function ContentArchive() {
|
|
const [posts, setPosts] = useState([])
|
|
const [characters, setCharacters] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [expandedKey, setExpandedKey] = useState(null)
|
|
const [activePlatform, setActivePlatform] = useState({}) // key → index
|
|
const [editingId, setEditingId] = useState(null)
|
|
const [editText, setEditText] = useState('')
|
|
const [filterCharacter, setFilterCharacter] = useState('')
|
|
const [filterStatus, setFilterStatus] = useState('')
|
|
const [deleteTarget, setDeleteTarget] = useState(null) // { id, batchKey }
|
|
|
|
useEffect(() => { loadData() }, [])
|
|
|
|
const loadData = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [postsData, charsData] = await Promise.all([api.get('/content/posts'), api.get('/characters/')])
|
|
setPosts(postsData)
|
|
setCharacters(charsData)
|
|
} catch {} finally { setLoading(false) }
|
|
}
|
|
|
|
const getCharacterName = (id) => characters.find(c => c.id === id)?.name || '—'
|
|
|
|
const handleApprove = async (postId) => {
|
|
try { await api.post(`/content/posts/${postId}/approve`); loadData() } catch {}
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteTarget) return
|
|
try {
|
|
await api.delete(`/content/posts/${deleteTarget.id}`)
|
|
setDeleteTarget(null)
|
|
loadData()
|
|
} catch {}
|
|
}
|
|
|
|
const handleSaveEdit = async (postId) => {
|
|
try {
|
|
await api.put(`/content/posts/${postId}`, { text_content: editText })
|
|
setEditingId(null)
|
|
loadData()
|
|
} catch {}
|
|
}
|
|
|
|
const filtered = posts.filter(p => {
|
|
if (filterCharacter && String(p.character_id) !== filterCharacter) return false
|
|
if (filterStatus && p.status !== filterStatus) return false
|
|
return true
|
|
})
|
|
|
|
const groups = groupByBatch(filtered)
|
|
|
|
const formatDate = (d) => d ? new Date(d).toLocaleDateString('it-IT', { day: '2-digit', month: 'short', year: 'numeric' }) : '—'
|
|
|
|
return (
|
|
<div style={{ animation: 'fade-up 0.5s ease-out both' }}>
|
|
<div style={{ marginBottom: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div>
|
|
<span className="editorial-tag">Libreria</span>
|
|
<div className="editorial-line" />
|
|
<h2 style={{ fontFamily: "'Fraunces', serif", fontSize: '1.75rem', fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--ink)', margin: '0.5rem 0 0.3rem' }}>
|
|
Libreria Contenuti
|
|
</h2>
|
|
<p style={{ fontSize: '0.875rem', color: 'var(--ink-muted)', margin: 0 }}>I tuoi contenuti generati</p>
|
|
</div>
|
|
<Link to="/content" style={{ fontSize: '0.8rem', color: 'var(--accent)', textDecoration: 'none', fontWeight: 600 }}>
|
|
← Genera nuovo
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1.5rem', alignItems: 'center' }}>
|
|
<select value={filterCharacter} onChange={e => setFilterCharacter(e.target.value)} style={selectStyle}>
|
|
<option value="">Tutti i personaggi</option>
|
|
{characters.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
|
</select>
|
|
<select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={selectStyle}>
|
|
<option value="">Tutti gli stati</option>
|
|
{Object.entries(statusLabels).map(([val, label]) => <option key={val} value={val}>{label}</option>)}
|
|
</select>
|
|
<span style={{ fontSize: '0.78rem', color: 'var(--ink-muted)', marginLeft: 'auto' }}>
|
|
{groups.length} contenut{groups.length === 1 ? 'o' : 'i'}
|
|
</span>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '3rem 0' }}>
|
|
<div style={{ width: 32, height: 32, border: '2px solid var(--border)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
|
|
</div>
|
|
) : groups.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '4rem 1rem', backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}>
|
|
<div style={{ fontSize: '2.5rem', color: 'var(--border-strong)', marginBottom: '1rem' }}>✦</div>
|
|
<p style={{ fontFamily: "'Fraunces', serif", fontSize: '1rem', color: 'var(--ink)', margin: '0 0 0.5rem' }}>Nessun contenuto trovato</p>
|
|
<p style={{ fontSize: '0.82rem', color: 'var(--ink-muted)', margin: 0 }}>
|
|
{posts.length === 0 ? 'Genera il tuo primo contenuto dalla pagina Contenuti' : 'Prova a cambiare i filtri'}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 380px), 1fr))', gap: '1rem' }}>
|
|
{groups.map(group => {
|
|
const activeIdx = activePlatform[group.key] || 0
|
|
const activePost = group.posts[activeIdx] || group.posts[0]
|
|
const sc = statusColors[activePost.status] || statusColors.draft
|
|
const isExpanded = expandedKey === group.key
|
|
const isEditing = editingId === activePost.id
|
|
const hasMultiple = group.posts.length > 1
|
|
|
|
return (
|
|
<div key={group.key} style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)', borderTop: `3px solid ${sc.color}`, cursor: 'pointer', transition: 'border-color 0.15s' }}
|
|
onClick={() => { if (!isEditing) setExpandedKey(isExpanded ? null : group.key) }}>
|
|
<div style={{ padding: '1.25rem' }}>
|
|
|
|
{/* Character name */}
|
|
<p style={{ fontSize: '0.82rem', fontWeight: 700, color: 'var(--ink)', margin: '0 0 0.5rem' }}>
|
|
{getCharacterName(activePost.character_id)}
|
|
</p>
|
|
|
|
{/* Platform tabs */}
|
|
<div style={{ display: 'flex', gap: '0', marginBottom: '0.5rem', borderBottom: hasMultiple ? '2px solid var(--border)' : 'none' }}>
|
|
{group.posts.map((p, i) => (
|
|
<button key={p.id} onClick={e => { e.stopPropagation(); setActivePlatform(prev => ({ ...prev, [group.key]: i })); setEditing && setEditingId(null) }}
|
|
style={{
|
|
padding: '0.35rem 0.75rem', fontSize: '0.75rem', fontWeight: activeIdx === i ? 700 : 400,
|
|
fontFamily: "'DM Sans', sans-serif", border: 'none', cursor: 'pointer',
|
|
backgroundColor: activeIdx === i ? 'var(--surface)' : 'transparent',
|
|
color: activeIdx === i ? 'var(--ink)' : 'var(--ink-muted)',
|
|
borderBottom: hasMultiple ? (activeIdx === i ? '2px solid var(--accent)' : '2px solid transparent') : 'none',
|
|
marginBottom: hasMultiple ? '-2px' : 0, transition: 'all 0.15s',
|
|
}}>
|
|
{(p.platform_hint || 'post').charAt(0).toUpperCase() + (p.platform_hint || 'post').slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Status badge */}
|
|
<div style={{ marginBottom: '0.75rem' }}>
|
|
<span style={{ fontSize: '0.7rem', fontWeight: 700, padding: '0.15rem 0.5rem', backgroundColor: sc.bg, color: sc.color }}>
|
|
{statusLabels[activePost.status] || activePost.status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Text content */}
|
|
{isEditing ? (
|
|
<div onClick={e => e.stopPropagation()}>
|
|
<textarea value={editText} onChange={e => setEditText(e.target.value)} rows={6}
|
|
style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.6, fontSize: '0.85rem' }} />
|
|
<div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
|
|
<button onClick={() => handleSaveEdit(activePost.id)} style={btnPrimary}>Salva</button>
|
|
<button onClick={() => setEditingId(null)} style={btnSecondary}>Annulla</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p style={{ fontSize: '0.85rem', color: 'var(--ink)', lineHeight: 1.6, margin: 0, whiteSpace: isExpanded ? 'pre-wrap' : 'normal', overflow: isExpanded ? 'visible' : 'hidden', display: isExpanded ? 'block' : '-webkit-box', WebkitLineClamp: isExpanded ? 'unset' : 3, WebkitBoxOrient: 'vertical' }}>
|
|
{activePost.text_content || '(nessun testo)'}
|
|
</p>
|
|
)}
|
|
|
|
{/* Hashtags when expanded */}
|
|
{isExpanded && !isEditing && activePost.hashtags?.length > 0 && (
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem', marginTop: '0.75rem' }}>
|
|
{activePost.hashtags.map((tag, i) => (
|
|
<span key={i} style={{ fontSize: '0.72rem', padding: '0.1rem 0.4rem', backgroundColor: 'var(--accent-light)', color: 'var(--accent)' }}>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '0.75rem', paddingTop: '0.75rem', borderTop: '1px solid var(--border)' }}>
|
|
<span style={{ fontSize: '0.72rem', color: 'var(--ink-muted)' }}>{formatDate(activePost.created_at)}</span>
|
|
{activePost.hashtags?.length > 0 && (
|
|
<span style={{ fontSize: '0.72rem', color: 'var(--ink-muted)' }}>{activePost.hashtags.length} hashtag</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.75rem', borderTop: '1px solid var(--border)' }}
|
|
onClick={e => e.stopPropagation()}>
|
|
{activePost.status === 'draft' && (
|
|
<button onClick={() => handleApprove(activePost.id)} style={{ ...btnSmall, backgroundColor: 'var(--success-light)', color: 'var(--success)' }}>Approva</button>
|
|
)}
|
|
<button onClick={() => { setEditingId(activePost.id); setEditText(activePost.text_content || ''); setExpandedKey(group.key) }}
|
|
style={{ ...btnSmall, backgroundColor: 'var(--cream-dark)', color: 'var(--ink-light)' }}>Modifica</button>
|
|
<button onClick={() => setDeleteTarget({ id: activePost.id, batchKey: group.key })}
|
|
style={{ ...btnSmall, color: 'var(--error)', backgroundColor: 'transparent', marginLeft: 'auto' }}>Elimina</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
<ConfirmModal
|
|
open={deleteTarget !== null}
|
|
title="Elimina contenuto"
|
|
message="Sei sicuro di voler eliminare questo contenuto? L'operazione non è reversibile."
|
|
confirmLabel="Elimina"
|
|
cancelLabel="Annulla"
|
|
confirmStyle="danger"
|
|
onConfirm={handleDelete}
|
|
onCancel={() => setDeleteTarget(null)}
|
|
/>
|
|
<style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const selectStyle = {
|
|
padding: '0.5rem 0.75rem', border: '1px solid var(--border)', fontSize: '0.82rem',
|
|
fontFamily: "'DM Sans', sans-serif", backgroundColor: 'var(--surface)', outline: 'none', cursor: 'pointer',
|
|
}
|
|
const inputStyle = {
|
|
width: '100%', padding: '0.625rem 0.875rem', border: '1px solid var(--border)',
|
|
fontSize: '0.875rem', color: 'var(--ink)', backgroundColor: 'var(--surface)',
|
|
outline: 'none', boxSizing: 'border-box', fontFamily: "'DM Sans', sans-serif",
|
|
}
|
|
const btnPrimary = {
|
|
padding: '0.4rem 0.8rem', backgroundColor: 'var(--ink)', color: 'white',
|
|
fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: '0.8rem', border: 'none', cursor: 'pointer',
|
|
}
|
|
const btnSecondary = {
|
|
...btnPrimary, backgroundColor: 'var(--cream-dark)', color: 'var(--ink-light)',
|
|
}
|
|
const btnSmall = {
|
|
padding: '0.3rem 0.6rem', fontSize: '0.75rem', fontWeight: 600, border: 'none',
|
|
cursor: 'pointer', fontFamily: "'DM Sans', sans-serif",
|
|
}
|