import { Head, router, useForm } from '@inertiajs/react'; import { Download, File, Folder, LayoutGrid, List, Pencil, Trash2 } from 'lucide-react'; import { FormEvent, useEffect, useState } from 'react'; import { Button, EmptyState, Field, Input, Modal, PageHeader, Pagination } from '@/Components/ui'; import AppLayout from '@/Layouts/AppLayout'; import { confirmAction } from '@/lib/confirm'; import { formatDate, visitFilters } from '@/lib/utils'; interface ResourceCard { id: number; name: string; url: string; created_at: string | null; can_edit: boolean; can_delete: boolean; user: { id: number; name: string } | null; } interface DriveEntry { id: string; name: string; kind: 'folder' | 'file'; mime: string | null; modified: string | null; previewable: boolean; } export default function ResourcesIndex({ items, canSave, filters, }: { items: { data: ResourceCard[]; prev: string | null; next: string | null; total: number; from?: number | null; to?: number | null }; canSave: boolean; filters: { q: string; view: 'cards' | 'list' }; }) { const form = useForm({ name: '', url: '' }); const editForm = useForm({ name: '', url: '' }); const [editing, setEditing] = useState(null); const [browsing, setBrowsing] = useState(null); function openEdit(item: ResourceCard) { editForm.setData({ name: item.name, url: item.url }); editForm.clearErrors(); setEditing(item); } function save(event: FormEvent) { event.preventDefault(); form.post('/resources', { preserveScroll: true, onSuccess: () => form.reset('name', 'url') }); } function saveEdit(event: FormEvent) { event.preventDefault(); if (!editing) { return; } editForm.put(`/resources/${editing.id}`, { preserveScroll: true, onSuccess: () => setEditing(null), }); } return (
{ event.preventDefault(); const data = new FormData(event.currentTarget); visitFilters('/resources', { q: String(data.get('q') ?? ''), view: filters.view }); }}>
{canSave && (
form.setData('name', event.target.value)} placeholder="Brand assets" required /> form.setData('url', event.target.value)} placeholder="https://drive.google.com/drive/folders/..." required />
)} {items.data.length === 0 ? : filters.view === 'list' ? (
{items.data.map((item) => (

{item.name}

{item.url}

{item.user?.name} · {formatDate(item.created_at)}

))}
) : (
{items.data.map((item) => (

{item.name}

{formatDate(item.created_at)}

{item.url}

{item.user?.name}

))}
)} setBrowsing(null)} /> { if (!open) setEditing(null); }} title="Edit folder">
editForm.setData('name', event.target.value)} required /> editForm.setData('url', event.target.value)} required />
); } function FolderActions({ item, onEdit, onBrowse }: { item: ResourceCard; onEdit: (item: ResourceCard) => void; onBrowse: (item: ResourceCard) => void }) { return (
); } function DriveBrowser({ item, onClose }: { item: ResourceCard | null; onClose: () => void }) { const [path, setPath] = useState<{ id: string; name: string }[]>([]); const [folderId, setFolderId] = useState(null); const [entries, setEntries] = useState([]); const [selected, setSelected] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); useEffect(() => { setPath([]); setSelected(null); setFolderId(null); setEntries([]); setError(''); }, [item?.id]); useEffect(() => { if (!item) { return; } const current = path[path.length - 1]; const params = current ? `?folder=${encodeURIComponent(current.id)}` : ''; let cancelled = false; setLoading(true); setError(''); fetch(`/resources/${item.id}/files${params}`, { headers: { Accept: 'application/json' } }) .then(async (response) => { const data = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(typeof data.message === 'string' ? data.message : 'This folder could not be opened.'); } if (cancelled) { return; } setFolderId(typeof data.folder_id === 'string' ? data.folder_id : null); setEntries(Array.isArray(data.entries) ? data.entries : []); }) .catch((reason: Error) => { if (!cancelled) { setEntries([]); setError(reason.message); } }) .finally(() => { if (!cancelled) { setLoading(false); } }); return () => { cancelled = true; }; }, [item, path]); const googleUrl = !item ? '' : path.length === 0 ? item.url : `https://drive.google.com/drive/folders/${path[path.length - 1].id}`; function fileHref(entry: DriveEntry, action: 'preview' | 'download') { if (!item || !folderId) { return '#'; } return `/resources/${item.id}/files/${entry.id}/${action}?folder=${encodeURIComponent(folderId)}`; } return ( { if (!open) onClose(); }} title={item?.name ?? 'Folder'} contentClassName="!w-[min(100%-2rem,68rem)] max-h-[min(100%-2rem,90vh)] overflow-auto"> {item && (
{path.map((crumb, index) => ( / ))}
{error &&

{error}

} {loading &&

Loading files…

} {!loading && !error && entries.length === 0 &&

This folder is empty.

}
{entries.map((entry) => ( ))}
)} ); } function EditDelete({ item, onEdit }: { item: ResourceCard; onEdit: (item: ResourceCard) => void }) { return ( <> {item.can_edit && ( )} {item.can_delete && ( )} ); }