335 lines
14 KiB
TypeScript
335 lines
14 KiB
TypeScript
import type { CSSProperties, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
|
|
import { Copy, Download, FolderOpen, Home, MoveRight, Plus, Trash2, UploadCloud } from "lucide-react";
|
|
import { Button, Dialog, ExplorerTree, type ExplorerTreeNodeContext, i18nMessage } from "@govoplan/core-webui";
|
|
import type { ConflictAction, FileSpace, RenameResponse } from "../../../api/files";
|
|
import type { ConflictDialogState, FileActionTarget, FileConflictItem, FolderNode, ContextMenuState } from "../types";
|
|
import { isPathUnderOrSame, normalizeFolder, treeNodeKey } from "../utils/fileManagerUtils";
|
|
|
|
export function TransferFolderSelector({
|
|
space,
|
|
nodes,
|
|
selectedFolder,
|
|
onSelect,
|
|
disabled
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {space: FileSpace | null;nodes: FolderNode[];selectedFolder: string;onSelect: (folderPath: string) => void;disabled?: boolean;}) {
|
|
return (
|
|
<div className="file-folder-selector" role="tree" aria-label="i18n:govoplan-files.destination_folder.f8ccb63b">
|
|
<button
|
|
type="button"
|
|
className={`file-folder-selector-node ${selectedFolder === "" ? "is-selected" : ""}`}
|
|
onClick={() => onSelect("")}
|
|
disabled={disabled || !space}>
|
|
|
|
<Home size={15} aria-hidden="true" />
|
|
<span>{space?.label || "i18n:govoplan-files.root.e96857c5"}</span>
|
|
</button>
|
|
{nodes.length === 0 && <span className="muted small-text file-folder-selector-empty">i18n:govoplan-files.no_folders_yet_choose_the_root_folder.6430304d</span>}
|
|
<TransferFolderSelectorNodes nodes={nodes} selectedFolder={selectedFolder} onSelect={onSelect} disabled={disabled} />
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function TransferFolderSelectorNodes({
|
|
nodes,
|
|
selectedFolder,
|
|
onSelect,
|
|
disabled,
|
|
depth = 1
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {nodes: FolderNode[];selectedFolder: string;onSelect: (folderPath: string) => void;disabled?: boolean;depth?: number;}) {
|
|
if (nodes.length === 0) return null;
|
|
return (
|
|
<div className="file-folder-selector-children">
|
|
{nodes.map((node) =>
|
|
<div key={node.path}>
|
|
<button
|
|
type="button"
|
|
className={`file-folder-selector-node ${selectedFolder === node.path ? "is-selected" : ""}`}
|
|
style={{ paddingLeft: `${Math.min(depth * 16 + 10, 74)}px` }}
|
|
onClick={() => onSelect(node.path)}
|
|
disabled={disabled}>
|
|
|
|
<FolderOpen size={15} aria-hidden="true" />
|
|
<span>{node.name}</span>
|
|
</button>
|
|
<TransferFolderSelectorNodes nodes={node.children} selectedFolder={selectedFolder} onSelect={onSelect} disabled={disabled} depth={depth + 1} />
|
|
</div>
|
|
)}
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function FolderTree({
|
|
nodes,
|
|
activeSpaceId,
|
|
spaceId,
|
|
currentFolder,
|
|
dropTargetKey = "",
|
|
expandedKeys,
|
|
onOpen,
|
|
onToggle,
|
|
onContextMenu,
|
|
onDragOverTarget,
|
|
onDropOnTarget,
|
|
onClearDropState,
|
|
onRequestDragExpand,
|
|
onDragStartFolder,
|
|
onDragEndFolder,
|
|
dragDropEnabled = true,
|
|
contextMenuEnabled = true,
|
|
disabled,
|
|
depth = 1
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {nodes: FolderNode[];activeSpaceId: string;spaceId: string;currentFolder: string;dropTargetKey?: string;expandedKeys: Set<string>;onOpen: (spaceId: string, path: string) => void;onToggle: (spaceId: string, path: string) => void;onContextMenu?: (event: ReactMouseEvent<HTMLElement>, spaceId: string, path: string) => void;onDragOverTarget?: (event: ReactDragEvent<HTMLElement>, target: FileActionTarget) => void;onDropOnTarget?: (event: ReactDragEvent<HTMLElement>, target: FileActionTarget) => Promise<void>;onClearDropState?: () => void;onRequestDragExpand?: (spaceId: string, path: string) => void;onDragStartFolder?: (spaceId: string, path: string, event: ReactDragEvent<HTMLElement>) => void;onDragEndFolder?: () => void;dragDropEnabled?: boolean;contextMenuEnabled?: boolean;disabled?: boolean;depth?: number;}) {
|
|
return (
|
|
<ExplorerTree
|
|
nodes={nodes}
|
|
getNodeId={(node) => treeNodeKey(spaceId, node.path)}
|
|
getNodeLabel={(node) => node.name}
|
|
getNodeChildren={(node) => node.children}
|
|
activeId={activeSpaceId === spaceId ? treeNodeKey(spaceId, currentFolder) : ""}
|
|
expandedIds={expandedKeys}
|
|
onOpen={(node) => onOpen(spaceId, node.path)}
|
|
onToggle={(node) => onToggle(spaceId, node.path)}
|
|
disabled={disabled}
|
|
depth={depth}
|
|
getNodeWrapClassName={(node) => {
|
|
const target = { spaceId, folderPath: node.path };
|
|
return dragDropEnabled && dropTargetKey === `${target.spaceId}:${normalizeFolder(target.folderPath)}` ? "is-drop-target" : undefined;
|
|
}}
|
|
getNodeWrapStyle={(_node, context: ExplorerTreeNodeContext) => ({ paddingLeft: `${Math.min(context.depth * 14, 56)}px` })}
|
|
getNodeDraggable={() => dragDropEnabled && !disabled}
|
|
onContextMenu={contextMenuEnabled && onContextMenu ? (event, node) => onContextMenu(event, spaceId, node.path) : undefined}
|
|
onDragStart={dragDropEnabled && onDragStartFolder ? (event, node) => onDragStartFolder(spaceId, node.path, event) : undefined}
|
|
onDragEnd={dragDropEnabled && onDragEndFolder ? () => onDragEndFolder() : undefined}
|
|
onDragOver={dragDropEnabled && onDragOverTarget ? (event, node, context) => {
|
|
const target = { spaceId, folderPath: node.path };
|
|
onDragOverTarget(event, target);
|
|
if (context.hasChildren && !context.expanded) onRequestDragExpand?.(spaceId, node.path);
|
|
} : undefined}
|
|
onDragLeave={dragDropEnabled && onClearDropState ? () => onClearDropState() : undefined}
|
|
onDrop={dragDropEnabled && onDropOnTarget ? (event, node) => void onDropOnTarget(event, { spaceId, folderPath: node.path }) : undefined} />);
|
|
|
|
|
|
}
|
|
|
|
export function RenamePreviewList({
|
|
response,
|
|
selectedFileIds,
|
|
selectedFolderPaths,
|
|
recursive,
|
|
visibleCount,
|
|
onShowMore,
|
|
onShowFewer
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {response: RenameResponse;selectedFileIds: Set<string>;selectedFolderPaths: Set<string>;recursive: boolean;visibleCount: number;onShowMore: () => void;onShowFewer: () => void;}) {
|
|
const selectedFolderRoots = Array.from(selectedFolderPaths).map(normalizeFolder);
|
|
const hiddenNonRecursiveItems = !recursive ?
|
|
response.items.filter((item) => {
|
|
if (item.kind === "file" && selectedFileIds.has(item.id)) return false;
|
|
if (item.kind === "folder" && selectedFolderRoots.includes(normalizeFolder(item.old_path))) return false;
|
|
return selectedFolderRoots.some((folder) => isPathUnderOrSame(item.old_path, folder));
|
|
}).length :
|
|
0;
|
|
const visibleItems = response.items.filter((item) => {
|
|
if (recursive) return true;
|
|
if (item.kind === "file") {
|
|
if (selectedFileIds.has(item.id)) return true;
|
|
return !selectedFolderRoots.some((folder) => isPathUnderOrSame(item.old_path, folder));
|
|
}
|
|
return selectedFolderRoots.includes(normalizeFolder(item.old_path));
|
|
});
|
|
const safeVisibleCount = Math.max(20, visibleCount);
|
|
const shownItems = visibleItems.slice(0, safeVisibleCount);
|
|
const remaining = visibleItems.length - shownItems.length;
|
|
return (
|
|
<div className="rename-preview-panel">
|
|
<div className="placeholder-stack rename-preview-list">
|
|
{hiddenNonRecursiveItems > 0 && <span className="muted">{hiddenNonRecursiveItems} i18n:govoplan-files.contained_path_s_will_move_with_the_selected_fol.b786f1a1</span>}
|
|
{shownItems.map((item) => <span key={`${item.kind}:${item.id}:${item.old_path}`}><code>{item.old_path}</code> → <code>{item.new_path}</code></span>)}
|
|
{remaining > 0 &&
|
|
<button type="button" className="rename-preview-more" onClick={onShowMore}>i18n:govoplan-files.and.a0d93385 {remaining} i18n:govoplan-files.more_show_next.f1912318 {Math.min(20, remaining)}</button>
|
|
}
|
|
{shownItems.length > 20 &&
|
|
<button type="button" className="rename-preview-more" onClick={onShowFewer}>i18n:govoplan-files.show_fewer.d94dfbe5</button>
|
|
}
|
|
</div>
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function FileDialog({ title, onClose, children }: {title: string;onClose: () => void;children: ReactNode;}) {
|
|
return (
|
|
<Dialog
|
|
open
|
|
title={title}
|
|
onClose={onClose}
|
|
backdropClassName="file-dialog-backdrop"
|
|
className="file-dialog"
|
|
headerClassName="file-dialog-header"
|
|
titleClassName="file-dialog-title"
|
|
bodyClassName="file-dialog-body">
|
|
|
|
{children}
|
|
</Dialog>);
|
|
|
|
}
|
|
|
|
export function FileContextMenu({
|
|
menu,
|
|
hasSelection,
|
|
canCreateFolder,
|
|
canUpload,
|
|
canDownload,
|
|
canOrganize,
|
|
canDelete,
|
|
downloadLabel,
|
|
onCreateFolder,
|
|
onUpload,
|
|
onDownload,
|
|
onMove,
|
|
onCopy,
|
|
onDelete
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {menu: ContextMenuState;hasSelection: boolean;canCreateFolder: boolean;canUpload: boolean;canDownload: boolean;canOrganize: boolean;canDelete: boolean;downloadLabel: string;onCreateFolder: () => void;onUpload: () => void;onDownload: () => void;onMove: () => void;onCopy: () => void;onDelete: () => void;}) {
|
|
const showNewFolder = true;
|
|
const showDelete = menu.target !== "empty";
|
|
const viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth;
|
|
const viewportHeight = typeof window === "undefined" ? 768 : window.innerHeight;
|
|
const estimatedWidth = 220;
|
|
const estimatedHeight = 260;
|
|
const left = Math.max(8, Math.min(menu.x, viewportWidth - estimatedWidth - 8));
|
|
const openUp = menu.y + estimatedHeight > viewportHeight;
|
|
const style: CSSProperties = openUp ?
|
|
{ left, bottom: Math.max(8, viewportHeight - menu.y) } :
|
|
{ left, top: Math.max(8, menu.y) };
|
|
return (
|
|
<div className="file-context-menu" style={style} role="menu" onClick={(event) => event.stopPropagation()}>
|
|
{showNewFolder && <button type="button" role="menuitem" onClick={onCreateFolder} disabled={!canCreateFolder}><Plus size={15} aria-hidden="true" /> i18n:govoplan-files.new_folder.a711999b</button>}
|
|
<button type="button" role="menuitem" onClick={onUpload} disabled={!canUpload}><UploadCloud size={15} aria-hidden="true" /> i18n:govoplan-files.upload.8bdf057f</button>
|
|
<button type="button" role="menuitem" onClick={onDownload} disabled={!hasSelection || !canDownload}><Download size={15} aria-hidden="true" /> {downloadLabel}</button>
|
|
<button type="button" role="menuitem" onClick={onMove} disabled={!hasSelection || !canOrganize}><MoveRight size={15} aria-hidden="true" /> i18n:govoplan-files.move.8a74a26e</button>
|
|
<button type="button" role="menuitem" onClick={onCopy} disabled={!hasSelection || !canOrganize}><Copy size={15} aria-hidden="true" /> i18n:govoplan-files.copy.92556c6d</button>
|
|
{showDelete && <button type="button" role="menuitem" className="danger" onClick={onDelete} disabled={!canDelete}><Trash2 size={15} aria-hidden="true" /> i18n:govoplan-files.delete.f6fdbe48</button>}
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function FileConflictDialog({
|
|
state,
|
|
busy,
|
|
onClose,
|
|
onCancel,
|
|
onOverwrite,
|
|
onRename,
|
|
onReview,
|
|
onApplyReview,
|
|
onUpdateItem
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}: {state: ConflictDialogState;busy: boolean;onClose: () => void;onCancel: () => void;onOverwrite: () => void;onRename: () => void;onReview: () => void;onApplyReview: () => void;onUpdateItem: (id: string, patch: Partial<FileConflictItem>) => void;}) {
|
|
return (
|
|
<FileDialog title={state.title} onClose={onClose}>
|
|
<p className="muted">{state.message}</p>
|
|
<div className="file-conflict-summary">
|
|
<strong>{state.items.length} i18n:govoplan-files.conflict_s.60cea6d5</strong>
|
|
<span>{state.items.length > 1 ? "i18n:govoplan-files.choose_the_same_action_for_all_conflicts_or_revi.319cfe5f" : "i18n:govoplan-files.choose_how_to_resolve_this_conflict.c303fcc6"}</span>
|
|
</div>
|
|
{state.review &&
|
|
<div className="file-conflict-list">
|
|
{state.items.map((item) =>
|
|
<div className="file-conflict-row" key={item.id}>
|
|
<div>
|
|
<strong>{item.label}</strong>
|
|
<small>{item.kind === "folder" ? "i18n:govoplan-files.folder.30baa249" : "i18n:govoplan-files.file.2c3cafa4"} i18n:govoplan-files.conflict_at.0a91052f <code>{item.targetPath}</code></small>
|
|
</div>
|
|
<select value={item.action} onChange={(event) => onUpdateItem(item.id, { action: event.target.value as ConflictAction })} disabled={busy}>
|
|
<option value="overwrite">i18n:govoplan-files.overwrite.0625c54e</option>
|
|
<option value="rename">i18n:govoplan-files.rename.d3f4cb89</option>
|
|
<option value="skip">i18n:govoplan-files.skip.3da47453</option>
|
|
</select>
|
|
<input
|
|
value={item.newPath}
|
|
onChange={(event) => onUpdateItem(item.id, { newPath: event.target.value })}
|
|
disabled={busy || item.action !== "rename"}
|
|
aria-label={i18nMessage("i18n:govoplan-files.new_path_for_value.a9a30c1c", { value0: item.label })} />
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
{!state.review &&
|
|
<div className="placeholder-stack">
|
|
{state.items.slice(0, 8).map((item) => <span key={item.id}><code>{item.targetPath}</code></span>)}
|
|
{state.items.length > 8 && <span>i18n:govoplan-files.and.a0d93385 {state.items.length - 8} more</span>}
|
|
</div>
|
|
}
|
|
<div className="button-row compact-actions align-end">
|
|
<Button onClick={onCancel} disabled={busy}>i18n:govoplan-files.cancel.77dfd213</Button>
|
|
<Button onClick={onOverwrite} disabled={busy}>i18n:govoplan-files.overwrite_all.a76f2d04</Button>
|
|
<Button onClick={onRename} disabled={busy}>i18n:govoplan-files.rename_all.1d6b24dc</Button>
|
|
{!state.review && state.items.length > 1 && <Button onClick={onReview} disabled={busy}>i18n:govoplan-files.review_individually.19abbe58</Button>}
|
|
{state.review && <Button variant="primary" onClick={onApplyReview} disabled={busy}>i18n:govoplan-files.apply_reviewed_choices.bb55f7b3</Button>}
|
|
</div>
|
|
</FileDialog>);
|
|
|
|
} |