261 lines
16 KiB
TypeScript
261 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Header from '../../components/nav/Header'
|
|
import Footer from '../../components/Footer'
|
|
import PageTransitionEffect from '../../components/animation/pageTransitionEffect'
|
|
import { PlusIcon, PencilIcon, TrashIcon, PhotoIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
|
import AffiliateCropModal from '../affiliate-management/components/AffiliateCropModal'
|
|
import { useAdminNews } from './hooks/getNews'
|
|
import { addNews } from './hooks/addNews'
|
|
import { updateNews } from './hooks/updateNews'
|
|
import { deleteNews } from './hooks/deleteNews'
|
|
|
|
export default function NewsManagementPage() {
|
|
const { items, loading, error, refresh } = useAdminNews()
|
|
const [showCreate, setShowCreate] = React.useState(false)
|
|
const [selected, setSelected] = React.useState<any | null>(null)
|
|
|
|
return (
|
|
<PageTransitionEffect>
|
|
<Header />
|
|
<main className="bg-white">
|
|
<div className="mx-auto max-w-7xl px-6 pt-8">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-blue-900">News Manager</h1>
|
|
<button onClick={() => setShowCreate(true)} className="flex items-center gap-2 px-4 py-2 bg-blue-900 text-white rounded-lg hover:bg-blue-800">
|
|
<PlusIcon className="h-5 w-5" /> Add News
|
|
</button>
|
|
</div>
|
|
|
|
{error && <div className="mt-4 text-red-600">{error}</div>}
|
|
|
|
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{items.map(item => (
|
|
<div key={item.id} className="rounded-2xl border border-gray-200 overflow-hidden bg-white shadow-sm">
|
|
<div className="aspect-[3/2] bg-gray-100">
|
|
{item.imageUrl ? (
|
|
<img src={item.imageUrl} alt={item.title} className="h-full w-full object-cover" />
|
|
) : (
|
|
<div className="h-full w-full flex items-center justify-center">
|
|
<PhotoIcon className="h-12 w-12 text-gray-400" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-blue-900 truncate">{item.title}</h3>
|
|
<span className={`text-xs px-2 py-1 rounded ${item.isActive ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>{item.isActive ? 'Active' : 'Inactive'}</span>
|
|
</div>
|
|
{item.summary && <p className="mt-2 text-sm text-gray-700 line-clamp-2">{item.summary}</p>}
|
|
<div className="mt-4 flex items-center justify-end gap-2">
|
|
<button onClick={() => setSelected(item)} className="px-3 py-1.5 text-sm bg-blue-50 text-blue-900 rounded hover:bg-blue-100">
|
|
<PencilIcon className="h-4 w-4" />
|
|
</button>
|
|
<button onClick={async () => { await deleteNews(item.id); await refresh() }} className="px-3 py-1.5 text-sm bg-red-50 text-red-700 rounded hover:bg-red-100">
|
|
<TrashIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
|
|
{showCreate && (
|
|
<CreateNewsModal onClose={() => setShowCreate(false)} onCreate={async (payload) => { await addNews(payload); setShowCreate(false); await refresh() }} />
|
|
)}
|
|
{selected && (
|
|
<EditNewsModal item={selected} onClose={() => setSelected(null)} onUpdate={async (id, payload) => { await updateNews(id, payload); setSelected(null); await refresh() }} />
|
|
)}
|
|
</PageTransitionEffect>
|
|
)
|
|
}
|
|
|
|
function CreateNewsModal({ onClose, onCreate }: { onClose: () => void; onCreate: (payload: { title: string; summary?: string; content?: string; slug: string; category?: string; isActive: boolean; publishedAt?: string | null; imageFile?: File }) => void }) {
|
|
const [title, setTitle] = React.useState('')
|
|
const [summary, setSummary] = React.useState('')
|
|
const [content, setContent] = React.useState('')
|
|
const [slug, setSlug] = React.useState('')
|
|
const [category, setCategory] = React.useState('')
|
|
const [isActive, setIsActive] = React.useState(true)
|
|
const [publishedAt, setPublishedAt] = React.useState<string>('')
|
|
const [imageFile, setImageFile] = React.useState<File | undefined>(undefined)
|
|
const [previewUrl, setPreviewUrl] = React.useState<string | null>(null)
|
|
const [showCrop, setShowCrop] = React.useState(false)
|
|
const [rawUrl, setRawUrl] = React.useState<string | null>(null)
|
|
|
|
React.useEffect(() => () => { if (previewUrl) URL.revokeObjectURL(previewUrl); if (rawUrl) URL.revokeObjectURL(rawUrl) }, [previewUrl, rawUrl])
|
|
|
|
const openFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const f = e.target.files?.[0]
|
|
if (!f) return
|
|
const allowed = ['image/jpeg','image/png','image/webp']
|
|
if (!allowed.includes(f.type)) { alert('Invalid image type'); e.target.value=''; return }
|
|
if (f.size > 5*1024*1024) { alert('Max 5MB'); e.target.value=''; return }
|
|
const url = URL.createObjectURL(f)
|
|
setRawUrl(url)
|
|
setShowCrop(true)
|
|
e.target.value=''
|
|
}
|
|
|
|
const onCropComplete = (blob: Blob) => {
|
|
if (previewUrl) URL.revokeObjectURL(previewUrl)
|
|
if (rawUrl) URL.revokeObjectURL(rawUrl)
|
|
const file = new File([blob], 'news-image.jpg', { type: 'image/jpeg' })
|
|
setImageFile(file)
|
|
setPreviewUrl(URL.createObjectURL(blob))
|
|
setRawUrl(null)
|
|
}
|
|
|
|
const submit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
onCreate({ title, summary: summary || undefined, content: content || undefined, slug, category: category || undefined, isActive, publishedAt: publishedAt || undefined, imageFile })
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AffiliateCropModal isOpen={showCrop} imageSrc={rawUrl || ''} onClose={() => { setShowCrop(false); if (rawUrl) URL.revokeObjectURL(rawUrl); setRawUrl(null) }} onCropComplete={onCropComplete} />
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
|
<div className="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold text-blue-900">Add News</h2>
|
|
<button onClick={onClose} className="text-gray-500 hover:text-gray-700"><XMarkIcon className="h-6 w-6"/></button>
|
|
</div>
|
|
<form onSubmit={submit} className="p-6 space-y-4">
|
|
<input className="w-full border rounded px-4 py-2" placeholder="Title" value={title} onChange={e=>setTitle(e.target.value)} required />
|
|
<input className="w-full border rounded px-4 py-2" placeholder="Slug" value={slug} onChange={e=>setSlug(e.target.value)} required />
|
|
<input className="w-full border rounded px-4 py-2" placeholder="Category" value={category} onChange={e=>setCategory(e.target.value)} />
|
|
<textarea className="w-full border rounded px-4 py-2" placeholder="Summary" value={summary} onChange={e=>setSummary(e.target.value)} rows={3} />
|
|
<textarea className="w-full border rounded px-4 py-2" placeholder="Content (markdown/html)" value={content} onChange={e=>setContent(e.target.value)} rows={6} />
|
|
<div>
|
|
<label className="block text-sm font-medium text-blue-900 mb-2">Image</label>
|
|
<div className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 cursor-pointer overflow-hidden" style={{ minHeight:'200px' }} onClick={() => (document.getElementById('news-image-upload') as HTMLInputElement)?.click()}>
|
|
{!previewUrl ? (
|
|
<div className="text-center w-full px-6 py-10">
|
|
<PhotoIcon className="mx-auto h-12 w-12 text-gray-400" />
|
|
<div className="mt-4 text-sm font-medium text-gray-700">Click to upload</div>
|
|
<p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP up to 5MB</p>
|
|
</div>
|
|
) : (
|
|
<div className="relative w-full h-full min-h-[200px] flex items-center justify-center bg-white p-4">
|
|
<img src={previewUrl} alt="Preview" className="max-h-[180px] max-w-full object-contain" />
|
|
<button type="button" onClick={() => { if (previewUrl) URL.revokeObjectURL(previewUrl); setPreviewUrl(null); setImageFile(undefined) }} className="absolute top-2 right-2 bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg text-sm">Remove</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<input id="news-image-upload" type="file" accept="image/*" className="hidden" onChange={openFile} />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input id="isActive" type="checkbox" checked={isActive} onChange={e=>setIsActive(e.target.checked)} className="h-4 w-4" />
|
|
<label htmlFor="isActive" className="text-sm font-medium text-gray-700">Active</label>
|
|
<input type="datetime-local" value={publishedAt} onChange={e=>setPublishedAt(e.target.value)} className="ml-auto border rounded px-2 py-1 text-sm" />
|
|
</div>
|
|
<div className="flex items-center justify-end gap-2 pt-4 border-t">
|
|
<button type="button" onClick={onClose} className="px-5 py-2.5 text-sm bg-gray-100 rounded-lg">Cancel</button>
|
|
<button type="submit" className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg">Add News</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function EditNewsModal({ item, onClose, onUpdate }: { item: any; onClose: () => void; onUpdate: (id: number, payload: { title?: string; summary?: string; content?: string; slug?: string; category?: string; isActive?: boolean; publishedAt?: string | null; imageFile?: File; removeImage?: boolean }) => void }) {
|
|
const [title, setTitle] = React.useState(item.title)
|
|
const [summary, setSummary] = React.useState(item.summary || '')
|
|
const [content, setContent] = React.useState('')
|
|
const [slug, setSlug] = React.useState(item.slug)
|
|
const [category, setCategory] = React.useState(item.category || '')
|
|
const [isActive, setIsActive] = React.useState(item.isActive)
|
|
const [publishedAt, setPublishedAt] = React.useState<string>(item.publishedAt || '')
|
|
const [imageFile, setImageFile] = React.useState<File | undefined>(undefined)
|
|
const [previewUrl, setPreviewUrl] = React.useState<string | null>(null)
|
|
const [currentUrl, setCurrentUrl] = React.useState<string | undefined>(item.imageUrl)
|
|
const [removeImage, setRemoveImage] = React.useState(false)
|
|
const [showCrop, setShowCrop] = React.useState(false)
|
|
const [rawUrl, setRawUrl] = React.useState<string | null>(null)
|
|
|
|
React.useEffect(() => () => { if (previewUrl) URL.revokeObjectURL(previewUrl); if (rawUrl) URL.revokeObjectURL(rawUrl) }, [previewUrl, rawUrl])
|
|
|
|
const openFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const f = e.target.files?.[0]
|
|
if (!f) return
|
|
const allowed = ['image/jpeg','image/png','image/webp']
|
|
if (!allowed.includes(f.type)) { alert('Invalid image type'); e.target.value=''; return }
|
|
if (f.size > 5*1024*1024) { alert('Max 5MB'); e.target.value=''; return }
|
|
const url = URL.createObjectURL(f)
|
|
setRawUrl(url)
|
|
setShowCrop(true)
|
|
e.target.value=''
|
|
}
|
|
|
|
const onCropComplete = (blob: Blob) => {
|
|
if (previewUrl) URL.revokeObjectURL(previewUrl)
|
|
if (rawUrl) URL.revokeObjectURL(rawUrl)
|
|
const file = new File([blob], 'news-image.jpg', { type: 'image/jpeg' })
|
|
setImageFile(file)
|
|
setRemoveImage(false)
|
|
setPreviewUrl(URL.createObjectURL(blob))
|
|
setRawUrl(null)
|
|
}
|
|
|
|
const displayUrl = removeImage ? null : (previewUrl || currentUrl)
|
|
|
|
const submit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
onUpdate(item.id, { title, summary: summary || undefined, content: content || undefined, slug, category: category || undefined, isActive, publishedAt, imageFile, removeImage: removeImage && !imageFile })
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AffiliateCropModal isOpen={showCrop} imageSrc={rawUrl || ''} onClose={() => { setShowCrop(false); if (rawUrl) URL.revokeObjectURL(rawUrl); setRawUrl(null) }} onCropComplete={onCropComplete} />
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
|
<div className="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold text-blue-900">Edit News</h2>
|
|
<button onClick={onClose} className="text-gray-500 hover:text-gray-700"><XMarkIcon className="h-6 w-6"/></button>
|
|
</div>
|
|
<form onSubmit={submit} className="p-6 space-y-4">
|
|
<input className="w-full border rounded px-4 py-2" placeholder="Title" value={title} onChange={e=>setTitle(e.target.value)} required />
|
|
<input className="w-full border rounded px-4 py-2" placeholder="Slug" value={slug} onChange={e=>setSlug(e.target.value)} required />
|
|
<input className="w-full border rounded px-4 py-2" placeholder="Category" value={category} onChange={e=>setCategory(e.target.value)} />
|
|
<textarea className="w-full border rounded px-4 py-2" placeholder="Summary" value={summary} onChange={e=>setSummary(e.target.value)} rows={3} />
|
|
<textarea className="w-full border rounded px-4 py-2" placeholder="Content (markdown/html)" value={content} onChange={e=>setContent(e.target.value)} rows={6} />
|
|
<div>
|
|
<label className="block text-sm font-medium text-blue-900 mb-2">Image</label>
|
|
<div className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 cursor-pointer overflow-hidden" style={{ minHeight:'200px' }} onClick={() => (document.getElementById('edit-news-image-upload') as HTMLInputElement)?.click()}>
|
|
{!displayUrl ? (
|
|
<div className="text-center w-full px-6 py-10">
|
|
<PhotoIcon className="mx-auto h-12 w-12 text-gray-400" />
|
|
<div className="mt-4 text-sm font-medium text-gray-700">Click to upload</div>
|
|
<p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP up to 5MB</p>
|
|
</div>
|
|
) : (
|
|
<div className="relative w-full h-full min-h-[200px] flex items-center justify-center bg-white p-4">
|
|
<img src={displayUrl} alt="Preview" className="max-h-[180px] max-w-full object-contain" />
|
|
<button type="button" onClick={() => { if (previewUrl) URL.revokeObjectURL(previewUrl); setPreviewUrl(null); setImageFile(undefined); setCurrentUrl(undefined); setRemoveImage(true) }} className="absolute top-2 right-2 bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg text-sm">Remove</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<input id="edit-news-image-upload" type="file" accept="image/*" className="hidden" onChange={openFile} />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input id="editIsActive" type="checkbox" checked={isActive} onChange={e=>setIsActive(e.target.checked)} className="h-4 w-4" />
|
|
<label htmlFor="editIsActive" className="text-sm font-medium text-gray-700">Active</label>
|
|
<input type="datetime-local" value={publishedAt || ''} onChange={e=>setPublishedAt(e.target.value)} className="ml-auto border rounded px-2 py-1 text-sm" />
|
|
</div>
|
|
<div className="flex items-center justify-end gap-2 pt-4 border-t">
|
|
<button type="button" onClick={onClose} className="px-5 py-2.5 text-sm bg-gray-100 rounded-lg">Cancel</button>
|
|
<button type="submit" className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|