import { Head, Link, router } from '@inertiajs/react'; import { ArrowTopRightOnSquareIcon, ChevronRightIcon, DocumentIcon, EyeIcon, FolderIcon, HomeIcon, MagnifyingGlassIcon, TrashIcon, LinkIcon, } from '@heroicons/react/24/outline'; import { FormEvent, useState } from 'react'; import DocumentEntryController from '@/actions/App/Http/Controllers/Documents/DocumentEntryController'; import { CreateFolderDialog } from '@/components/documents/create-folder-dialog'; import { EditEntryDialog } from '@/components/documents/edit-entry-dialog'; import { UploadFileDialog } from '@/components/documents/upload-file-dialog'; import { CreateEmbedDialog } from '@/components/documents/create-embed-dialog'; import { DocumentEntryIcon } from '@/components/documents/document-entry-icon'; import { Pagination } from '@/components/pagination'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { index, preview, show, } from '@/routes/documents'; import type { DirectoryCapabilities, DocumentEntry, DocumentFolder, DocumentFolderBreadcrumb, DocumentIframe, DocumentMenuIconOption, PaginatedData, } from '@/types'; type Props = { documentIframe: DocumentIframe; entries: PaginatedData; currentFolder: DocumentFolder | null; folderBreadcrumbs: DocumentFolderBreadcrumb[]; filters: { search: string; }; capabilities: DirectoryCapabilities; iconOptions: DocumentMenuIconOption[]; }; function formatFileSize(bytes: number | null): string { if (!bytes) { return 'Tamaño no disponible'; } const units = ['B', 'KB', 'MB', 'GB']; let size = bytes; let unitIndex = 0; while (size >= 1024 && unitIndex < units.length - 1) { size /= 1024; unitIndex++; } return `${size.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`; } export default function ShowDocumentIframe({ documentIframe, entries, currentFolder, folderBreadcrumbs, filters, capabilities, iconOptions, }: Props) { const [searchValue, setSearchValue] = useState(filters.search); const currentFolderId = currentFolder?.public_id ?? null; const submitSearch = (event: FormEvent) => { event.preventDefault(); const search = searchValue.trim(); router.get( show(documentIframe.public_id).url, { ...(currentFolderId ? { folder: currentFolderId } : {}), ...(search ? { search } : {}), }, { preserveState: true, replace: true, }, ); }; const clearSearch = () => { setSearchValue(''); router.get( show(documentIframe.public_id).url, currentFolderId ? { folder: currentFolderId } : {}, { preserveState: true, replace: true, }, ); }; const deleteEntry = (entry: DocumentEntry) => { const target = entry.type === 'folder' ? 'esta carpeta y todo su contenido' : 'este archivo'; if ( !window.confirm( `¿Seguro que deseas eliminar ${target}? Esta acción no se puede deshacer.`, ) ) { return; } router.delete( DocumentEntryController.destroy.url({ documentIframe: documentIframe.public_id, documentEntry: entry.public_id, }), { preserveScroll: true, }, ); }; const isDynamicRoot = documentIframe.view_type === 'dynamic' && currentFolder === null; return ( <>

{documentIframe.name}

{documentIframe.view_label} {entries.total} elementos en esta ubicación
{capabilities.can_create_folder && ( )} {capabilities.can_upload_file && ( )} {capabilities.can_create_embed && currentFolderId && ( )}
setSearchValue(event.target.value) } placeholder="Buscar en esta ubicación..." className="pl-10" />
{filters.search && ( )}
{documentIframe.view_type === 'dynamic' && currentFolder === null && (
Las carpetas de este nivel representan las opciones que aparecerán en el menú lateral del iframe.
)} {documentIframe.view_type === 'dynamic' && currentFolder !== null && (
Estás administrando el contenido de la opción {currentFolder.name}. En esta vista no se permiten subcarpetas.
)} {entries.data.length > 0 ? (
{entries.data.map((entry) => ( ))}
) : (
{currentFolder ? ( ) : ( )}

{filters.search ? 'No se encontraron resultados' : 'Esta ubicación está vacía'}

{filters.search ? `No hay contenido que coincida con "${filters.search}".` : capabilities.can_create_folder ? 'Crea una carpeta para comenzar a organizar el contenido.' : 'Sube un archivo para comenzar a agregar contenido.'}

)}
); } ShowDocumentIframe.layout = { breadcrumbs: [ { title: 'Documentos', href: index(), }, ], };