535 lines
17 KiB
TypeScript
535 lines
17 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
||
import { useQueryClient } from "@tanstack/react-query";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardHeader,
|
||
CardTitle,
|
||
CardDescription,
|
||
} from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Plus,
|
||
File as FileIcon,
|
||
FileText,
|
||
Image as ImageIcon,
|
||
Trash2,
|
||
Download,
|
||
Edit3 as EditIcon,
|
||
} from "lucide-react";
|
||
import { apiRequest } from "@/lib/queryClient";
|
||
import type { CloudFile } from "@repo/db/types";
|
||
import { MultipleFileUploadZone } from "@/components/file-upload/multiple-file-upload-zone";
|
||
import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
|
||
import { Menu, Item, contextMenu } from "react-contexify";
|
||
import "react-contexify/dist/ReactContexify.css";
|
||
import { useAuth } from "@/hooks/use-auth";
|
||
import {
|
||
Pagination,
|
||
PaginationContent,
|
||
PaginationItem,
|
||
PaginationPrevious,
|
||
PaginationLink,
|
||
PaginationNext,
|
||
} from "@/components/ui/pagination";
|
||
import { getPageNumbers } from "@/utils/pageNumberGenerator";
|
||
import { NewFolderModal } from "./new-folder-modal";
|
||
import { toast } from "@/hooks/use-toast";
|
||
import FilePreviewModal from "./file-preview-modal";
|
||
|
||
export type FilesSectionProps = {
|
||
parentId: number | null;
|
||
pageSize?: number;
|
||
className?: string;
|
||
onFileOpen?: (fileId: number) => void;
|
||
};
|
||
|
||
const FILES_LIMIT_DEFAULT = 20;
|
||
const MAX_FILE_MB = 10;
|
||
const MAX_FILE_BYTES = MAX_FILE_MB * 1024 * 1024;
|
||
|
||
function fileIcon(mime?: string) {
|
||
if (!mime) return <FileIcon className="h-6 w-6" />;
|
||
if (mime.startsWith("image/")) return <ImageIcon className="h-6 w-6" />;
|
||
if (mime === "application/pdf" || mime.endsWith("/pdf"))
|
||
return <FileText className="h-6 w-6" />;
|
||
return <FileIcon className="h-6 w-6" />;
|
||
}
|
||
|
||
export default function FilesSection({
|
||
parentId,
|
||
pageSize = FILES_LIMIT_DEFAULT,
|
||
className,
|
||
onFileOpen,
|
||
}: FilesSectionProps) {
|
||
const qc = useQueryClient();
|
||
const { user } = useAuth();
|
||
const userId = user?.id;
|
||
|
||
const [data, setData] = useState<CloudFile[]>([]);
|
||
const [total, setTotal] = useState(0);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
// upload modal and ref
|
||
const [uploading, setUploading] = useState(false);
|
||
const [isUploadOpen, setIsUploadOpen] = useState(false);
|
||
const uploadRef = useRef<any>(null);
|
||
|
||
// rename/delete
|
||
const [isRenameOpen, setIsRenameOpen] = useState(false);
|
||
const [renameTargetId, setRenameTargetId] = useState<number | null>(null);
|
||
const [renameInitial, setRenameInitial] = useState("");
|
||
|
||
// delete dialog
|
||
const [isDeleteOpen, setIsDeleteOpen] = useState(false);
|
||
const [deleteTarget, setDeleteTarget] = useState<CloudFile | null>(null);
|
||
|
||
// preview modal
|
||
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
||
const [previewFileId, setPreviewFileId] = useState<number | null>(null);
|
||
|
||
useEffect(() => {
|
||
loadPage(currentPage);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [parentId, currentPage]);
|
||
|
||
async function loadPage(page: number) {
|
||
setIsLoading(true);
|
||
try {
|
||
const offset = (page - 1) * pageSize;
|
||
const fid = parentId === null ? "null" : String(parentId);
|
||
const res = await apiRequest(
|
||
"GET",
|
||
`/api/cloud-storage/items/files?parentId=${encodeURIComponent(
|
||
fid
|
||
)}&limit=${pageSize}&offset=${offset}`
|
||
);
|
||
const json = await res.json();
|
||
if (!res.ok) throw new Error(json?.message || "Failed to load files");
|
||
const rows: CloudFile[] = Array.isArray(json.data) ? json.data : [];
|
||
setData(rows);
|
||
const t =
|
||
typeof json.totalCount === "number"
|
||
? json.totalCount
|
||
: typeof json.total === "number"
|
||
? json.total
|
||
: rows.length;
|
||
setTotal(t);
|
||
} catch (err: any) {
|
||
setData([]);
|
||
setTotal(0);
|
||
toast({
|
||
title: "Failed to load files",
|
||
description: err?.message ?? String(err),
|
||
variant: "destructive",
|
||
});
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
}
|
||
|
||
function showMenu(e: React.MouseEvent, file: CloudFile) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
contextMenu.show({
|
||
id: "files-section-menu",
|
||
event: e.nativeEvent,
|
||
props: { file },
|
||
});
|
||
}
|
||
|
||
// rename
|
||
function openRename(file: CloudFile) {
|
||
setRenameTargetId(Number(file.id));
|
||
setRenameInitial(file.name ?? "");
|
||
setIsRenameOpen(true);
|
||
contextMenu.hideAll();
|
||
}
|
||
async function submitRename(newName: string) {
|
||
if (!renameTargetId) return;
|
||
try {
|
||
const res = await apiRequest(
|
||
"PUT",
|
||
`/api/cloud-storage/files/${renameTargetId}`,
|
||
{ name: newName }
|
||
);
|
||
const json = await res.json();
|
||
if (!res.ok) throw new Error(json?.message || "Rename failed");
|
||
setIsRenameOpen(false);
|
||
setRenameTargetId(null);
|
||
toast({ title: "File renamed" });
|
||
|
||
loadPage(currentPage);
|
||
qc.invalidateQueries({
|
||
queryKey: ["/api/cloud-storage/folders/recent", 1],
|
||
});
|
||
} catch (err: any) {
|
||
toast({
|
||
title: "Rename failed",
|
||
description: err?.message ?? String(err),
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
}
|
||
|
||
// delete
|
||
function openDelete(file: CloudFile) {
|
||
setDeleteTarget(file);
|
||
setIsDeleteOpen(true);
|
||
contextMenu.hideAll();
|
||
}
|
||
async function confirmDelete() {
|
||
if (!deleteTarget) return;
|
||
try {
|
||
const res = await apiRequest(
|
||
"DELETE",
|
||
`/api/cloud-storage/files/${deleteTarget.id}`
|
||
);
|
||
const json = await res.json();
|
||
if (!res.ok) throw new Error(json?.message || "Delete failed");
|
||
setIsDeleteOpen(false);
|
||
setDeleteTarget(null);
|
||
toast({ title: "File deleted" });
|
||
|
||
// reload current page (ensure page index valid)
|
||
loadPage(currentPage);
|
||
qc.invalidateQueries({
|
||
queryKey: ["/api/cloud-storage/folders/recent", 1],
|
||
});
|
||
} catch (err: any) {
|
||
toast({
|
||
title: "Delete failed",
|
||
description: err?.message ?? String(err),
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
}
|
||
|
||
// download (context menu) - (fetch bytes from backend host via wrapper)
|
||
async function handleDownload(file: CloudFile) {
|
||
try {
|
||
const res = await apiRequest(
|
||
"GET",
|
||
`/api/cloud-storage/files/${file.id}/download`
|
||
);
|
||
if (!res.ok) {
|
||
const j = await res.json().catch(() => ({}));
|
||
throw new Error(j?.message || `Download failed (${res.status})`);
|
||
}
|
||
const blob = await res.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = file.name ?? `file-${file.id}`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
|
||
// revoke after a bit
|
||
setTimeout(() => URL.revokeObjectURL(url), 5000);
|
||
contextMenu.hideAll();
|
||
} catch (err: any) {
|
||
toast({
|
||
title: "Download failed",
|
||
description: err?.message ?? String(err),
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
}
|
||
|
||
// upload: get files from MultipleFileUploadZone (imperative handle)
|
||
async function handleUploadSubmit() {
|
||
const files: File[] = uploadRef.current?.getFiles?.() ?? [];
|
||
if (!files.length) {
|
||
toast({
|
||
title: "No files selected",
|
||
description: "Please choose files to upload before clicking Upload.",
|
||
variant: "destructive",
|
||
});
|
||
return;
|
||
}
|
||
|
||
setUploading(true);
|
||
|
||
// pre-check all files and show errors / skip too-large files
|
||
const oversized = files.filter((f) => f.size > MAX_FILE_BYTES);
|
||
if (oversized.length) {
|
||
oversized.slice(0, 5).forEach((f) =>
|
||
toast({
|
||
title: "File too large",
|
||
description: `${f.name} is ${Math.round(f.size / 1024 / 1024)} MB — max ${MAX_FILE_MB} MB allowed.`,
|
||
variant: "destructive",
|
||
})
|
||
);
|
||
// Remove oversized files from the upload list (upload the rest)
|
||
}
|
||
|
||
const toUpload = files.filter((f) => f.size <= MAX_FILE_BYTES);
|
||
if (toUpload.length === 0) {
|
||
// nothing to upload
|
||
return;
|
||
}
|
||
|
||
try {
|
||
for (const f of toUpload) {
|
||
const fid = parentId === null ? "null" : String(parentId);
|
||
const initRes = await apiRequest(
|
||
"POST",
|
||
`/api/cloud-storage/folders/${encodeURIComponent(fid)}/files`,
|
||
{
|
||
userId,
|
||
name: f.name,
|
||
mimeType: f.type || null,
|
||
expectedSize: f.size,
|
||
totalChunks: 1,
|
||
}
|
||
);
|
||
const initJson = await initRes.json();
|
||
const created = initJson?.data;
|
||
if (!created || typeof created.id !== "number")
|
||
throw new Error("Init failed");
|
||
const raw = await f.arrayBuffer();
|
||
// upload chunk
|
||
await apiRequest(
|
||
"POST",
|
||
`/api/cloud-storage/files/${created.id}/chunks?seq=0`,
|
||
raw
|
||
);
|
||
// finalize
|
||
await apiRequest(
|
||
"POST",
|
||
`/api/cloud-storage/files/${created.id}/complete`,
|
||
{}
|
||
);
|
||
toast({ title: "Upload complete", description: f.name });
|
||
}
|
||
setIsUploadOpen(false);
|
||
loadPage(currentPage);
|
||
qc.invalidateQueries({
|
||
queryKey: ["/api/cloud-storage/folders/recent", 1],
|
||
});
|
||
} catch (err: any) {
|
||
toast({
|
||
title: "Upload failed",
|
||
description: err?.message ?? String(err),
|
||
variant: "destructive",
|
||
});
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
}
|
||
|
||
// Pagination
|
||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||
const startItem = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
||
const endItem = Math.min(total, currentPage * pageSize);
|
||
|
||
// open preview (single click)
|
||
function openPreview(file: CloudFile) {
|
||
setPreviewFileId(Number(file.id));
|
||
setIsPreviewOpen(true);
|
||
contextMenu.hideAll();
|
||
}
|
||
|
||
return (
|
||
<Card className={className}>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||
<div>
|
||
<CardTitle>Files</CardTitle>
|
||
<CardDescription>Manage Files in this folder</CardDescription>
|
||
</div>
|
||
|
||
<Button
|
||
variant="default"
|
||
className="inline-flex items-center px-4 py-2"
|
||
onClick={() => setIsUploadOpen(true)}
|
||
>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Upload
|
||
</Button>
|
||
</CardHeader>
|
||
|
||
<CardContent>
|
||
{isLoading ? (
|
||
<div className="py-6 text-center">Loading...</div>
|
||
) : (
|
||
<>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
{data.map((file) => (
|
||
<div
|
||
key={file.id}
|
||
className="p-3 rounded border hover:bg-gray-50 cursor-pointer"
|
||
onContextMenu={(e) => showMenu(e, file)}
|
||
onClick={() => openPreview(file)}
|
||
>
|
||
<div className="flex flex-col items-center">
|
||
<div className="h-10 w-10 text-gray-500 mb-2 flex items-center justify-center">
|
||
{fileIcon((file as any).mimeType)}
|
||
</div>
|
||
<div
|
||
className="text-sm truncate text-center"
|
||
style={{ maxWidth: 140 }}
|
||
>
|
||
<div title={file.name}>{file.name}</div>
|
||
<div className="text-xs text-gray-400">
|
||
{((file as any).fileSize ?? 0).toString()} bytes
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* pagination */}
|
||
{totalPages > 1 && (
|
||
<div className="mt-4 pt-3 border-t border-gray-100">
|
||
<div className="flex items-center justify-between">
|
||
<div className="text-sm text-muted-foreground whitespace-nowrap">
|
||
Showing {startItem}–{endItem} of {total} results
|
||
</div>
|
||
|
||
<Pagination>
|
||
<PaginationContent>
|
||
<PaginationItem>
|
||
<PaginationPrevious
|
||
href="#"
|
||
onClick={(e: any) => {
|
||
e.preventDefault();
|
||
setCurrentPage((p) => Math.max(1, p - 1));
|
||
}}
|
||
className={
|
||
currentPage === 1
|
||
? "pointer-events-none opacity-50"
|
||
: ""
|
||
}
|
||
/>
|
||
</PaginationItem>
|
||
|
||
{getPageNumbers(currentPage, totalPages).map(
|
||
(page, idx) => (
|
||
<PaginationItem key={idx}>
|
||
{page === "..." ? (
|
||
<span className="px-2 text-gray-500">...</span>
|
||
) : (
|
||
<PaginationLink
|
||
href="#"
|
||
onClick={(e: any) => {
|
||
e.preventDefault();
|
||
setCurrentPage(page as number);
|
||
}}
|
||
isActive={currentPage === page}
|
||
>
|
||
{page}
|
||
</PaginationLink>
|
||
)}
|
||
</PaginationItem>
|
||
)
|
||
)}
|
||
|
||
<PaginationItem>
|
||
<PaginationNext
|
||
href="#"
|
||
onClick={(e: any) => {
|
||
e.preventDefault();
|
||
setCurrentPage((p) => Math.min(totalPages, p + 1));
|
||
}}
|
||
className={
|
||
currentPage === totalPages
|
||
? "pointer-events-none opacity-50"
|
||
: ""
|
||
}
|
||
/>
|
||
</PaginationItem>
|
||
</PaginationContent>
|
||
</Pagination>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</CardContent>
|
||
|
||
{/* context menu */}
|
||
<Menu id="files-section-menu" animation="fade">
|
||
<Item onClick={({ props }: any) => openRename(props.file)}>
|
||
<span className="flex items-center gap-2">
|
||
<EditIcon className="h-4 w-4" /> Rename
|
||
</span>
|
||
</Item>
|
||
|
||
<Item onClick={({ props }: any) => handleDownload(props.file)}>
|
||
<span className="flex items-center gap-2">
|
||
<Download className="h-4 w-4" /> Download
|
||
</span>
|
||
</Item>
|
||
|
||
<Item onClick={({ props }: any) => openDelete(props.file)}>
|
||
<span className="flex items-center gap-2 text-red-600">
|
||
<Trash2 className="h-4 w-4" /> Delete
|
||
</span>
|
||
</Item>
|
||
</Menu>
|
||
|
||
{/* upload modal using MultipleFileUploadZone (imperative handle) */}
|
||
{isUploadOpen && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
|
||
<div className="bg-white p-6 rounded-md w-[90%] max-w-2xl">
|
||
<h3 className="text-lg font-semibold mb-4">Upload files</h3>
|
||
<MultipleFileUploadZone
|
||
ref={uploadRef}
|
||
acceptedFileTypes="application/pdf,image/*"
|
||
maxFiles={10}
|
||
maxFileSizeMB={10}
|
||
maxFileSizeByType={{ "application/pdf": 10, "image/*": 5 }}
|
||
isUploading={uploading}
|
||
/>
|
||
<div className="mt-4 flex justify-end gap-2">
|
||
<Button variant="ghost" onClick={() => setIsUploadOpen(false)}>
|
||
Cancel
|
||
</Button>
|
||
<Button onClick={handleUploadSubmit} disabled={uploading}>
|
||
{uploading ? "Uploading..." : "Upload"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* rename modal (reusing NewFolderModal for simplicity) */}
|
||
<NewFolderModal
|
||
isOpen={isRenameOpen}
|
||
initialName={renameInitial}
|
||
title="Rename File"
|
||
submitLabel="Rename"
|
||
onClose={() => {
|
||
setIsRenameOpen(false);
|
||
setRenameTargetId(null);
|
||
}}
|
||
onSubmit={submitRename}
|
||
/>
|
||
|
||
{/* FIle Preview Modal */}
|
||
<FilePreviewModal
|
||
fileId={previewFileId}
|
||
isOpen={isPreviewOpen}
|
||
onClose={() => {
|
||
setIsPreviewOpen(false);
|
||
setPreviewFileId(null);
|
||
}}
|
||
/>
|
||
{/* delete confirm */}
|
||
<DeleteConfirmationDialog
|
||
isOpen={isDeleteOpen}
|
||
entityName={deleteTarget?.name}
|
||
onCancel={() => {
|
||
setIsDeleteOpen(false);
|
||
setDeleteTarget(null);
|
||
}}
|
||
onConfirm={confirmDelete}
|
||
/>
|
||
</Card>
|
||
);
|
||
}
|