import { Head, Link, router, useForm, usePage } from '@inertiajs/react'; import { Trash2 } from 'lucide-react'; import { FormEvent, useEffect, useMemo, useState } from 'react'; import { Button, EmptyState, PageHeader, Pagination, PriorityBadge, StatusBadge } from '@/Components/ui'; import AppLayout from '@/Layouts/AppLayout'; import { confirmAction } from '@/lib/confirm'; import { formatDate, visitFilters } from '@/lib/utils'; import type { ContentSummary, FormOptions, Paginator, SharedProps } from '@/types'; const presets = [ ['All content', {}], ['My tasks', { owner: 'me' }], ['New ideas', { status: 'inbox' }], ['For review', { status: 'internal_review' }], ['Ready for production', { status: 'ready_for_production' }], ['Overdue', { overdue: '1' }], ['Recently published', { status: 'published' }], ['Archived', { status: 'archived' }], ['Trash', { trashed: '1' }], ] as const; export default function Index({ content, filters, options, savedViews, canDelete = false, isTrash = false, }: { content: Paginator; filters: Record; options: FormOptions; savedViews: { id: number; name: string; filters: Record }[]; canDelete?: boolean; isTrash?: boolean; }) { const permissions = usePage().props.auth.user?.permissions ?? []; const lookups = usePage().props.lookups; const save = useForm({ name: '', module: 'content', filters }); const [selected, setSelected] = useState([]); const [deleting, setDeleting] = useState(false); const deletableIds = useMemo( () => content.data.filter((item) => item.can_delete !== false && canDelete).map((item) => item.id), [content.data, canDelete], ); useEffect(() => { setSelected((current) => current.filter((id) => content.data.some((item) => item.id === id))); }, [content.data]); const allSelected = deletableIds.length > 0 && deletableIds.every((id) => selected.includes(id)); const someSelected = selected.length > 0; function submitFilters(event: FormEvent) { event.preventDefault(); visitFilters('/content', Object.fromEntries(new FormData(event.currentTarget).entries()) as Record); } function toggleOne(id: number) { setSelected((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id])); } function toggleAll() { setSelected(allSelected ? [] : deletableIds); } async function deleteSelected() { if (selected.length === 0) { return; } const ok = await confirmAction({ title: isTrash ? 'Permanently delete?' : 'Move to trash?', message: isTrash ? `Permanently delete ${selected.length} selected item${selected.length === 1 ? '' : 's'}? This cannot be undone.` : `Move ${selected.length} selected item${selected.length === 1 ? '' : 's'} to trash? You can restore later from Trash.`, confirmLabel: isTrash ? 'Delete forever' : 'Move to trash', }); if (!ok) { return; } setDeleting(true); router.post('/content/bulk-destroy', { ids: selected, force: isTrash, }, { preserveScroll: true, onFinish: () => setDeleting(false), onSuccess: () => setSelected([]), }); } return ( New idea : undefined} />
{presets.map(([label, query]) => ( {label} ))} Production board Publishing calendar
{permissions.includes('content.export') && Export CSV}
{ event.preventDefault(); save.post('/saved-views'); }} className="mb-4 flex gap-2"> save.setData('name', event.target.value)} placeholder="Name this filter" className="rounded-lg border border-zinc-300 px-3 py-2 text-sm" /> {savedViews.map((view) => ( {view.name} ))}
{canDelete && content.data.length > 0 && (
)} {content.data.length === 0 ? ( Capture an idea : undefined} /> ) : (
{content.data.map((item) => { const canRemove = canDelete && item.can_delete !== false; const isChecked = selected.includes(item.id); return (
{canDelete && (
toggleOne(item.id)} />
)}
{item.title} {item.is_overdue && Overdue}

{item.reference_number} · {item.brand?.name} · {item.format_label} · {item.owner?.name ?? 'No owner'} · Due {formatDate(item.deadline)}

{item.platforms.map((platform, index) => ( {platform.name} ))} {canRemove && ( )}
); })}
)} ); }