"use client"; import { useState, useEffect } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { useIsMobile } from "@/hooks/use-mobile"; import { cn } from "@/lib/utils"; import { Folder, File, Home, UploadIcon, FolderPlus, ChevronDownIcon, FileTextIcon, MoreHorizontalIcon, XIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Switch } from "@/components/ui/switch"; import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from "@/components/ui/breadcrumb"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { Separator } from "@/components/ui/separator"; import { Checkbox } from "@/components/ui/checkbox"; import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"; import { FileUploadDialog } from "./file-upload-dialog"; import allFileItems from "../data.json"; import FileManagerPagination from "./pagination"; type FileItem = (typeof allFileItems)[number]; function getFileIcon(iconType: string) { switch (iconType) { case "folder": return ; case "figma": return (

); case "sketch": return (

); case "word": return (

); case "illustrator": return (

); case "photoshop": return (

); case "pdf": return (

); case "audio": return (

♪

); default: return ; } } type SortOption = "name" | "date" | "size"; type SortDirection = "asc" | "desc"; export function FileManager() { const router = useRouter(); const searchParams = useSearchParams(); const [searchQuery, setSearchQuery] = useState(""); const [selectedItem, setSelectedItem] = useState(null); const [showMobileDetails, setShowMobileDetails] = useState(false); const [sortBy, setSortBy] = useState("name"); const [sortDirection, setSortDirection] = useState("asc"); const [selectedItems, setSelectedItems] = useState>(new Set()); const currentPath = searchParams.get("path") || ""; const pathSegments = currentPath ? currentPath.split("/").filter(Boolean) : []; const isMobile = useIsMobile(); const parseFileSize = (sizeStr: string): number => { const size = Number.parseFloat(sizeStr); if (sizeStr.includes("GB")) return size * 1024 * 1024 * 1024; if (sizeStr.includes("MB")) return size * 1024 * 1024; if (sizeStr.includes("KB")) return size * 1024; return size; }; const parseDate = (dateStr: string): number => { const [day, month, year] = dateStr.split("."); return new Date( 2000 + Number.parseInt(year), Number.parseInt(month) - 1, Number.parseInt(day) ).getTime(); }; const sortItems = (items: FileItem[]): FileItem[] => { return [...items].sort((a, b) => { let comparison = 0; switch (sortBy) { case "name": comparison = a.name.localeCompare(b.name); break; case "date": comparison = parseDate(a.date) - parseDate(b.date); break; case "size": comparison = parseFileSize(a.size) - parseFileSize(b.size); break; } return sortDirection === "asc" ? comparison : -comparison; }); }; const getCurrentFolderItems = () => { if (!currentPath) { return allFileItems.filter((item) => !item.parentPath); } const parentFolder = allFileItems.find( (item) => item.name === pathSegments[pathSegments.length - 1] ); return parentFolder?.children || []; }; const currentItems = getCurrentFolderItems(); const filteredItems = currentItems.filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase()) ); const sortedAndFilteredItems = sortItems(filteredItems); useEffect(() => { setSelectedItem(null); setShowMobileDetails(false); }, [currentPath]); const handleSortChange = (option: SortOption) => { if (sortBy === option) { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortBy(option); setSortDirection("asc"); } }; const getSortLabel = () => { const directionIcon = sortDirection === "asc" ? "↑" : "↓"; switch (sortBy) { case "name": return `Name ${directionIcon}`; case "date": return `Date ${directionIcon}`; case "size": return `Size ${directionIcon}`; } }; const handleItemClick = (item: FileItem) => { if (item.type === "folder") { const newPath = currentPath ? `${currentPath}/${item.name}` : item.name; router.push(`?path=${encodeURIComponent(newPath)}`); } else { setSelectedItem(item); setShowMobileDetails(true); } }; const handleBreadcrumbClick = (index: number) => { if (index === -1) { router.push("/dashboard/apps/file-manager"); } else { const newPath = pathSegments.slice(0, index + 1).join("/"); router.push(`?path=${encodeURIComponent(newPath)}`); } }; const toggleSelectAll = () => { if (selectedItems.size === sortedAndFilteredItems.length) { setSelectedItems(new Set()); } else { setSelectedItems(new Set(sortedAndFilteredItems.map((item) => item.id))); } }; const toggleItemSelection = (itemId: string, event: React.MouseEvent) => { event.stopPropagation(); const newSelectedItems = new Set(selectedItems); if (newSelectedItems.has(itemId)) { newSelectedItems.delete(itemId); } else { newSelectedItems.add(itemId); } setSelectedItems(newSelectedItems); }; const FileDetailContent = ({ selectedItem }: { selectedItem: FileItem }) => { return (

{getFileIcon(selectedItem.icon)}

{selectedItem.name}

Info

Type {selectedItem.type}

Size {selectedItem.size}

Owner ArtTemplate

Location {currentPath ? `My Files/${currentPath}` : "My Files"}

Modified Sep 17, 2020 4:25

Created Sep 10, 2020 2:25

Settings

File Sharing

Backup

Sync

); }; return (

{/* Breadcrumb Navigation */}

File Manager

{pathSegments.length > 0 && ( <>

handleBreadcrumbClick(-1)}> {pathSegments.map((segment, i) => ( <> handleBreadcrumbClick(i)}> {segment} {i < pathSegments.length - 1 && } ))}

)}

{/* File List */}

{sortedAndFilteredItems.map((item) => (

handleItemClick(item)}>

toggleItemSelection(item.id, e)} />

{getFileIcon(item.icon)}

{item.name}

{item.date} {item.size} {item.owner.name.charAt(0)} Compress Archive Share Move Copy Delete

))} {sortedAndFilteredItems.length === 0 && searchQuery && (

No files or folders found matching "{searchQuery}"

)} {sortedAndFilteredItems.length === 0 && !searchQuery && currentPath && (

This folder is empty.

)} {pathSegments.length == 0 && (

)}

{/* Desktop Right Panel - Details */} {selectedItem && !isMobile ? (

) : null}

{selectedItem && isMobile && ( File Details )}

); }