From d11280fe341995149204f9b7163b8c3bc5cde45e Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Sun, 3 May 2026 22:03:42 +0200 Subject: [PATCH 01/11] fixed component formgeneratortree and truastee workflows --- eslint.config.js | 7 +- src/api/fileApi.ts | 118 ++ .../FolderTree/FolderTree.module.css | 197 --- src/components/FolderTree/FolderTree.tsx | 1170 ----------------- .../FolderTree/SharepointBrowseTree.tsx | 319 ----- .../actions/FileActionBottomSheet.module.css | 103 -- .../actions/FileActionBottomSheet.tsx | 83 -- .../actions/FileActionContextMenu.module.css | 103 -- .../actions/FileActionContextMenu.tsx | 146 -- src/components/FolderTree/actions/registry.ts | 218 --- src/components/FolderTree/actions/types.ts | 87 -- .../FolderTree/actions/usePointerLongPress.ts | 75 -- .../FolderTree/actions/useViewMode.ts | 25 - .../FormGeneratorTree.module.css | 640 +++++++++ .../FormGeneratorTree/FormGeneratorTree.tsx | 930 +++++++++++++ .../__tests__/FormGeneratorTree.test.tsx | 683 ++++++++++ .../FormGeneratorTree/__tests__/dnd.test.tsx | 190 +++ .../FormGenerator/FormGeneratorTree/index.ts | 9 + .../providers/FolderFileProvider.tsx | 261 ++++ .../FormGenerator/FormGeneratorTree/types.ts | 64 + src/components/FormGenerator/index.ts | 1 + .../UnifiedDataBar/ChatsTab.module.css | 25 + .../UnifiedDataBar/FilesTab.module.css | 9 + src/components/UnifiedDataBar/FilesTab.tsx | 221 ++-- .../UnifiedDataBar/UnifiedDataBar.module.css | 16 + src/contexts/FileContext.tsx | 27 +- src/hooks/useFiles.ts | 177 +++ src/pages/AutomationsDashboardPage.tsx | 85 +- src/pages/basedata/FilesPage.tsx | 377 ++++-- 29 files changed, 3558 insertions(+), 2808 deletions(-) delete mode 100644 src/components/FolderTree/FolderTree.module.css delete mode 100644 src/components/FolderTree/FolderTree.tsx delete mode 100644 src/components/FolderTree/SharepointBrowseTree.tsx delete mode 100644 src/components/FolderTree/actions/FileActionBottomSheet.module.css delete mode 100644 src/components/FolderTree/actions/FileActionBottomSheet.tsx delete mode 100644 src/components/FolderTree/actions/FileActionContextMenu.module.css delete mode 100644 src/components/FolderTree/actions/FileActionContextMenu.tsx delete mode 100644 src/components/FolderTree/actions/registry.ts delete mode 100644 src/components/FolderTree/actions/types.ts delete mode 100644 src/components/FolderTree/actions/usePointerLongPress.ts delete mode 100644 src/components/FolderTree/actions/useViewMode.ts create mode 100644 src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css create mode 100644 src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx create mode 100644 src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx create mode 100644 src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx create mode 100644 src/components/FormGenerator/FormGeneratorTree/index.ts create mode 100644 src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx create mode 100644 src/components/FormGenerator/FormGeneratorTree/types.ts diff --git a/eslint.config.js b/eslint.config.js index 10a64ff..ab679c5 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -26,12 +26,7 @@ export default tseslint.config( 'no-restricted-imports': [ 'warn', { - patterns: [ - { - group: ['**/components/FolderTree/FolderTree*', '**/FolderTree/FolderTree*'], - message: 'FolderTree is deprecated — use FormGeneratorTable with groupingConfig instead.', - }, - ], + patterns: [], }, ], }, diff --git a/src/api/fileApi.ts b/src/api/fileApi.ts index e251006..7e2c67a 100644 --- a/src/api/fileApi.ts +++ b/src/api/fileApi.ts @@ -280,3 +280,121 @@ export function collectGroupItemIds( // - previewFile: Requires flexible responseType (json or blob) // These are kept in the hooks for now due to their special requirements +// ============================================================================ +// FOLDER TYPES & API FUNCTIONS +// ============================================================================ + +export interface FolderInfo { + id: string; + name: string; + parentId: string | null; + mandateId: string; + featureInstanceId: string; + scope: string; + neutralize: boolean; + contextOrphan?: boolean; + sysCreatedBy?: string; + sysCreatedAt?: number; + sysModifiedAt?: number; +} + +export async function getFolderTree( + request: ApiRequestFunction, + owner: 'me' | 'shared' = 'me', +): Promise { + const data = await request({ + url: '/api/files/folders/tree', + method: 'get', + params: { owner }, + }); + return Array.isArray(data) ? data : []; +} + +export async function createFolder( + request: ApiRequestFunction, + name: string, + parentId?: string | null, +): Promise { + return await request({ + url: '/api/files/folders', + method: 'post', + data: { name, parentId: parentId ?? null }, + }); +} + +export async function renameFolder( + request: ApiRequestFunction, + folderId: string, + name: string, +): Promise { + return await request({ + url: `/api/files/folders/${folderId}`, + method: 'patch', + data: { name }, + }); +} + +export async function moveFolder( + request: ApiRequestFunction, + folderId: string, + parentId: string | null, +): Promise { + return await request({ + url: `/api/files/folders/${folderId}/move`, + method: 'post', + data: { parentId }, + }); +} + +export async function deleteFolderCascade( + request: ApiRequestFunction, + folderId: string, +): Promise<{ deletedFolders: number; deletedFiles: number }> { + return await request({ + url: `/api/files/folders/${folderId}`, + method: 'delete', + params: { cascade: true }, + }); +} + +export async function patchFolderScope( + request: ApiRequestFunction, + folderId: string, + scope: string, + cascadeToFiles: boolean = false, +): Promise<{ folderId: string; scope: string; filesUpdated: number }> { + return await request({ + url: `/api/files/folders/${folderId}/scope`, + method: 'patch', + data: { scope, cascadeToFiles }, + }); +} + +export async function patchFolderNeutralize( + request: ApiRequestFunction, + folderId: string, + neutralize: boolean, +): Promise<{ folderId: string; neutralize: boolean; filesUpdated: number }> { + return await request({ + url: `/api/files/folders/${folderId}/neutralize`, + method: 'patch', + data: { neutralize }, + }); +} + +export async function moveFiles( + request: ApiRequestFunction, + fileIds: string[], + targetFolderId: string | null, +): Promise { + await Promise.all( + fileIds.map((fileId) => + request({ + url: `/api/files/${fileId}`, + method: 'put', + data: { folderId: targetFolderId }, + }), + ), + ); +} + diff --git a/src/components/FolderTree/FolderTree.module.css b/src/components/FolderTree/FolderTree.module.css deleted file mode 100644 index 5d929f5..0000000 --- a/src/components/FolderTree/FolderTree.module.css +++ /dev/null @@ -1,197 +0,0 @@ -.folderTree { - font-size: 0.875rem; - user-select: none; -} - -.treeNode { - display: flex; - align-items: center; - padding: 2px 4px; - cursor: pointer; - border-radius: 4px; - gap: 2px; - min-height: 26px; - position: relative; -} - -.treeNode:hover { - background: var(--color-bg-hover, rgba(0, 0, 0, 0.04)); -} - -.treeNode.selected { - background: var(--color-bg-selected, rgba(25, 118, 210, 0.08)); - font-weight: 600; -} - -.treeNode.multiSelected { - background: var(--color-bg-multi-selected, rgba(25, 118, 210, 0.14)); - box-shadow: inset 3px 0 0 var(--color-primary, #F25843); -} - -.treeNode.multiSelected:hover { - background: var(--color-bg-multi-selected-hover, rgba(25, 118, 210, 0.20)); -} - -.treeNode.dropTarget { - background: var(--color-bg-drop, rgba(25, 118, 210, 0.15)); - outline: 2px dashed var(--color-primary, #F25843); - outline-offset: -2px; -} - -.treeNode.dragging { - opacity: 0.5; -} - -/* Visueller Hint für Custom-Drag-Sources (z. B. Workflow-Files): - * pulst dezent beim Hover, um zu signalisieren "hier kann ich woanders hingezogen werden". */ -@keyframes _customDragPulse { - 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } - 50% { box-shadow: inset 2px 0 0 0 var(--color-primary, #F25843); } -} -.treeNode.hasCustomDrag:hover { - animation: _customDragPulse 1.6s ease-in-out infinite; -} - -.chevron { - width: 12px; - height: 12px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - transition: transform 0.15s ease; - color: var(--color-text-secondary, #666); - font-size: 8px; -} - -.chevron.expanded { - transform: rotate(90deg); -} - -.chevron.empty { - visibility: hidden; -} - -.folderIcon { - flex-shrink: 0; - color: var(--color-text-secondary, #888); - font-size: 13px; -} - -.folderName { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.renameInput { - flex: 1; - border: 1px solid var(--color-primary, #F25843); - border-radius: 3px; - padding: 1px 4px; - font-size: inherit; - font-family: inherit; - outline: none; - min-width: 0; -} - -/* Right zone: contains dynamic on-hover actions + always-visible stable trio. - * The stable trio (chat / scope / neutralize) sits at the right edge in a - * fixed slot order so icons never jump. Dynamic actions appear on hover - * to the left of the trio without displacing it. */ -.rightZone { - display: flex; - align-items: center; - gap: 4px; - margin-left: auto; - flex-shrink: 0; -} - -.actions { - display: none; - gap: 2px; - flex-shrink: 0; -} - -.treeNode:hover .actions { - display: flex; -} - -.stableActions { - display: flex; - gap: 2px; - flex-shrink: 0; - align-items: center; -} - -.iconSlot { - display: inline-flex; - align-items: center; - justify-content: center; - width: 22px; - height: 20px; - flex-shrink: 0; -} - -.iconSlot.placeholder { - visibility: hidden; -} - -.actionBtn { - background: none; - border: none; - cursor: pointer; - padding: 2px 4px; - border-radius: 3px; - color: var(--color-text-secondary, #888); - font-size: 12px; - line-height: 1; - display: flex; - align-items: center; -} - -.actionBtn:hover { - background: var(--color-bg-hover, rgba(0, 0, 0, 0.08)); - color: var(--color-text-primary, #333); -} - -.actionBtn.danger:hover { - color: var(--color-error, #d32f2f); -} - -.children { - padding-left: 10px; -} - -.rootLabel { - font-weight: 600; - color: var(--color-text-primary, #333); -} - -/* File nodes inside the tree */ -.fileNode { - cursor: pointer; -} - -.fileNode:hover { - background: var(--color-bg-hover, rgba(0, 0, 0, 0.04)); -} - -.fileIcon { - flex-shrink: 0; - font-size: 11px; -} - -.fileSize { - font-size: 10px; - color: var(--color-text-secondary, #999); - flex-shrink: 0; -} - -.rootActions { - display: flex; - gap: 2px; - margin-left: auto; - flex-shrink: 0; -} diff --git a/src/components/FolderTree/FolderTree.tsx b/src/components/FolderTree/FolderTree.tsx deleted file mode 100644 index 52b1096..0000000 --- a/src/components/FolderTree/FolderTree.tsx +++ /dev/null @@ -1,1170 +0,0 @@ -/** - * FolderTree – Shared recursive folder/file tree component. - * - * Used on the Files page and in the Workspace chat. - * Supports: - * - Alphabetical sorting per level (folders first, then files) - * - Multi-selection (CTRL+click, SHIFT+click) with visual highlight - * - Batch drag-and-drop for selected items - * - Inline CRUD icons for folders - * - showFiles mode renders files inline under their parent folder - * - Drag-out: sets application/tree-items on dataTransfer for external drop targets - */ - -import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'; -import { FaFolder, FaFolderOpen, FaPlus, FaPen, FaTrash, FaChevronRight, FaSyncAlt, FaDownload } from 'react-icons/fa'; -import { usePrompt, type PromptOptions } from '../../hooks/usePrompt'; -import styles from './FolderTree.module.css'; - -import { useLanguage } from '../../providers/language/LanguageContext'; -import { - type FileAction, - type FileActionContext, - type FileActionTarget, - type UdbSurface, - resolveActionLabel, -} from './actions/types'; -import { useFileActions, runAction, type ResolvedActions } from './actions/registry'; -import { useViewMode } from './actions/useViewMode'; -import { usePointerLongPress } from './actions/usePointerLongPress'; -import { FileActionContextMenu } from './actions/FileActionContextMenu'; -import { FileActionBottomSheet } from './actions/FileActionBottomSheet'; - -/* ── Public types ──────────────────────────────────────────────────────── */ - -export interface FolderNode { - id: string; - name: string; - parentId: string | null; - fileCount?: number; - children?: FolderNode[]; - isProtected?: boolean; - isReadonly?: boolean; - icon?: string; - neutralize?: boolean; - scope?: string; -} - -export interface FileNode { - id: string; - fileName: string; - mimeType?: string; - fileSize?: number; - folderId?: string | null; - scope?: string; - neutralize?: boolean; - sysCreatedBy?: string; - isReadonly?: boolean; -} - -export interface TreeItem { - id: string; - type: 'file' | 'folder'; - name: string; -} - -export interface FolderTreeProps { - folders: FolderNode[]; - files?: FileNode[]; - showFiles?: boolean; - selectedFolderId: string | null; - onSelect: (folderId: string | null) => void; - onFileSelect?: (fileId: string) => void; - selectedItemIds?: Set; - onSelectionChange?: (selectedIds: Set) => void; - expandedIds?: Set; - onToggleExpand?: (id: string) => void; - onRefresh?: () => void; - onCreateFolder?: (name: string, parentId: string | null) => Promise; - onRenameFolder?: (folderId: string, newName: string) => Promise; - onDeleteFolder?: (folderId: string) => Promise; - onMoveFolder?: (folderId: string, targetParentId: string | null) => Promise; - onMoveFolders?: (folderIds: string[], targetParentId: string | null) => Promise; - onMoveFile?: (fileId: string, targetFolderId: string | null) => Promise; - onMoveFiles?: (fileIds: string[], targetFolderId: string | null) => Promise; - onRenameFile?: (fileId: string, newName: string) => Promise; - onDeleteFile?: (fileId: string) => Promise; - onDeleteFiles?: (fileIds: string[]) => Promise; - onDeleteFolders?: (folderIds: string[]) => Promise; - onDownloadFolder?: (folderId: string, folderName: string) => Promise; - onScopeChange?: (fileId: string, newScope: string) => void; - onNeutralizeToggle?: (fileId: string, newValue: boolean) => void; - onFolderScopeChange?: (folderId: string, newScope: string) => void; - onFolderNeutralizeToggle?: (folderId: string, newValue: boolean) => void; - onSendToChat?: (items: Array<{ id: string; type: 'file' | 'folder'; name: string }>) => void; - /** Optionale Custom-Aktionen (Plugin-Slot, siehe `actions/types.ts`). - * Built-in Aktionen funktionieren auch ohne dieses Prop unverändert. */ - customActions?: FileAction[]; - /** Aufruf-Surface (z. B. ``'graphEditor'``) — wird in Predicates der Custom-Actions gespiegelt. */ - udbContext?: UdbSurface; -} - -/* ── Helpers ───────────────────────────────────────────────────────────── */ - -function _buildTree(folders: FolderNode[]): FolderNode[] { - const map = new Map(); - const roots: FolderNode[] = []; - for (const f of folders) map.set(f.id, { ...f, children: [] }); - for (const f of folders) { - const node = map.get(f.id)!; - if (f.parentId && map.has(f.parentId)) { - map.get(f.parentId)!.children!.push(node); - } else { - roots.push(node); - } - } - const _sortLevel = (nodes: FolderNode[]) => { - nodes.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })); - for (const n of nodes) { - if (n.children && n.children.length > 0) _sortLevel(n.children); - } - }; - _sortLevel(roots); - return roots; -} - -function _groupFilesByFolder(files: FileNode[]): Map { - const map = new Map(); - for (const f of files) { - const key = f.folderId || ''; - if (!map.has(key)) map.set(key, []); - map.get(key)!.push(f); - } - for (const [, arr] of map) { - arr.sort((a, b) => a.fileName.localeCompare(b.fileName, undefined, { sensitivity: 'base' })); - } - return map; -} - -function _computeFlatList( - tree: FolderNode[], - expandedIds: Set, - showFiles: boolean, - filesByFolder: Map, -): TreeItem[] { - const result: TreeItem[] = []; - const _walk = (nodes: FolderNode[]) => { - for (const node of nodes) { - result.push({ id: node.id, type: 'folder', name: node.name }); - if (expandedIds.has(node.id)) { - if (node.children) _walk(node.children); - if (showFiles) { - for (const f of (filesByFolder.get(node.id) || [])) { - result.push({ id: f.id, type: 'file', name: f.fileName }); - } - } - } - } - }; - _walk(tree); - if (showFiles) { - for (const f of (filesByFolder.get('') || [])) { - result.push({ id: f.id, type: 'file', name: f.fileName }); - } - } - return result; -} - -function _matchesShortcut(e: KeyboardEvent, shortcut: string): boolean { - const parts = shortcut.toLowerCase().split('+').map(p => p.trim()); - const wantMod = parts.includes('mod'); - const wantShift = parts.includes('shift'); - const wantAlt = parts.includes('alt'); - const wantCtrl = parts.includes('ctrl') && !wantMod; - const key = parts.find(p => !['mod', 'shift', 'alt', 'ctrl'].includes(p)); - if (!key) return false; - const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform); - const modOk = wantMod ? (isMac ? e.metaKey : e.ctrlKey) : true; - const ctrlOk = wantCtrl ? e.ctrlKey : (wantMod ? true : !e.ctrlKey); - const shiftOk = wantShift === e.shiftKey; - const altOk = wantAlt === e.altKey; - const keyOk = e.key.toLowerCase() === key || e.code.toLowerCase() === `key${key}`; - return modOk && ctrlOk && shiftOk && altOk && keyOk; -} - -function _windowConfirm(_title: string, body: string): boolean { - if (typeof window === 'undefined') return true; - return window.confirm(body); -} - -function _fileIcon(mime?: string): string { - if (!mime) return '\uD83D\uDCC4'; - if (mime.startsWith('image/')) return '\uD83D\uDDBC\uFE0F'; - if (mime.includes('pdf')) return '\uD83D\uDCD5'; - if (mime.includes('word') || mime.includes('docx')) return '\uD83D\uDCD8'; - if (mime.includes('sheet') || mime.includes('xlsx') || mime.includes('csv')) return '\uD83D\uDCCA'; - if (mime.includes('presentation') || mime.includes('pptx')) return '\uD83D\uDCD9'; - if (mime.includes('zip') || mime.includes('tar') || mime.includes('gz')) return '\uD83D\uDCE6'; - if (mime.startsWith('text/') || mime.includes('json') || mime.includes('xml')) return '\uD83D\uDCDD'; - if (mime.startsWith('audio/')) return '\uD83C\uDFB5'; - if (mime.startsWith('video/')) return '\uD83C\uDFA5'; - return '\uD83D\uDCC4'; -} - -/* ── Selection context threaded through the tree ──────────────────────── */ - -const _SCOPE_ICONS: Record = { - personal: '\uD83D\uDC64', - featureInstance: '\uD83D\uDC65', - mandate: '\uD83C\uDFE2', - global: '\uD83C\uDF10', -}; - -const _SCOPE_CYCLE: string[] = ['personal', 'featureInstance', 'mandate']; - -interface SelectionCtx { - selectedItemIds: Set; - selectedFileIds: string[]; - selectedFolderIds: string[]; - onItemClick: (id: string, type: 'file' | 'folder', e: React.MouseEvent) => void; - onItemDragStart: (e: React.DragEvent, id: string, type: 'file' | 'folder', name: string) => void; - onRenameFile?: (fileId: string, newName: string) => Promise; - onDeleteFile?: (fileId: string) => Promise; - onDeleteFiles?: (fileIds: string[]) => Promise; - onDeleteFolders?: (folderIds: string[]) => Promise; - onScopeChange?: (fileId: string, newScope: string) => void; - onNeutralizeToggle?: (fileId: string, newValue: boolean) => void; - onSendToChat?: (items: Array<{ id: string; type: 'file' | 'folder'; name: string }>) => void; - /** Action-System Pipeline. Wenn vorhanden, rendert das FileItem zusätzlich - * Right-Click-Menu, Long-Press-Sheet und Custom-Inline-Icons. */ - actions?: { - actionCtx: FileActionContext; - /** Liefert pro Target die nach Kanal sortierten/gefilterten Aktionen. */ - resolveFor: (target: FileActionTarget) => ResolvedActions; - /** Öffnet das Right-Click-Menu am angegebenen Viewport-Punkt. */ - openMenu: (anchor: { x: number; y: number }, target: FileActionTarget, title?: string) => void; - /** Öffnet das Bottom-Sheet (Mobile Long-Press). */ - openSheet: (target: FileActionTarget, title?: string) => void; - /** Custom-Drag-MIME-Types, die zusätzlich ans dataTransfer gehängt werden. */ - applyDragPayload: (e: React.DragEvent, target: FileActionTarget) => void; - }; - /** Inline-Rename-Trigger des FolderTree (für die Built-in `core.rename`-Action). */ - registerInlineRename: (fileId: string, fn: () => void) => void; -} - -/* ── Stable trio (chat | scope | neutralize) ────────────────────────────── - * Always rendered in this order, always at the right edge of the row. - * Each slot has a fixed width so missing actions render an invisible - * placeholder — icons never jump position between rows. */ - -interface StableTrioProps { - scope?: string; - neutralize?: boolean; - scopeLabels: Record; - onChat?: () => void; - onScopeChange?: (newScope: string) => void; - onNeutralizeToggle?: (newValue: boolean) => void; - chatTitle: string; -} - -function _StableTrio({ - scope, neutralize, - scopeLabels, - onChat, onScopeChange, onNeutralizeToggle, - chatTitle, -}: StableTrioProps) { - const { t } = useLanguage(); - const _cycleScope = (current: string | undefined) => { - const idx = _SCOPE_CYCLE.indexOf(current ?? 'personal'); - return _SCOPE_CYCLE[(idx + 1) % _SCOPE_CYCLE.length]; - }; - - return ( - - {/* Slot 1: Chat */} - {onChat ? ( - - ) : ( - - )} - {/* Slot 2: Scope */} - {onScopeChange && scope != null ? ( - - ) : ( - - )} - {/* Slot 3: Neutralize */} - {onNeutralizeToggle ? ( - - ) : ( - - )} - - ); -} - -/* ── File node (leaf) ─────────────────────────────────────────────────── */ - -function _FileItem({ file, sel }: { file: FileNode; sel: SelectionCtx }) { - const { t } = useLanguage(); - const scopeLabels = useMemo((): Record => ({ - personal: t('Persönlich'), - featureInstance: t('Instanz'), - mandate: t('Mandant'), - global: t('Global'), - }), [t]); - const [dragging, setDragging] = useState(false); - const [renaming, setRenaming] = useState(false); - const [renameValue, setRenameValue] = useState(''); - const isSelected = sel.selectedItemIds.has(file.id); - const multiSelected = sel.selectedItemIds.size > 1; - - const _beginRename = useCallback(() => { - setRenameValue(file.fileName); - setRenaming(true); - }, [file.fileName]); - useEffect(() => { - sel.registerInlineRename(file.id, _beginRename); - }, [file.id, _beginRename, sel]); - - const _buildActionTarget = useCallback((): FileActionTarget => { - return { files: [file], folders: [] }; - }, [file]); - - const _onContextMenu = useCallback((e: React.MouseEvent) => { - if (!sel.actions) return; - e.preventDefault(); - e.stopPropagation(); - sel.actions.openMenu({ x: e.clientX, y: e.clientY }, _buildActionTarget(), file.fileName); - }, [sel.actions, _buildActionTarget, file.fileName]); - - const _longPressHandlers = usePointerLongPress( - useCallback(() => { - if (!sel.actions) return; - sel.actions.openSheet(_buildActionTarget(), file.fileName); - }, [sel.actions, _buildActionTarget, file.fileName]), - ); - - const inlineCustomActions = useMemo(() => { - if (!sel.actions) return []; - return sel.actions.resolveFor(_buildActionTarget()).inline; - }, [sel.actions, _buildActionTarget]); - - const _handleRename = useCallback(async () => { - const trimmed = renameValue.trim(); - if (trimmed && trimmed !== file.fileName && sel.onRenameFile) { - await sel.onRenameFile(file.id, trimmed); - } - setRenaming(false); - }, [renameValue, file.id, file.fileName, sel.onRenameFile]); - - const _handleDeleteFiles = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (sel.selectedFileIds.length > 0 && sel.onDeleteFiles) { - await sel.onDeleteFiles(sel.selectedFileIds); - } - }, [sel]); - - const _handleDeleteFolders = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (sel.selectedFolderIds.length > 0 && sel.onDeleteFolders) { - await sel.onDeleteFolders(sel.selectedFolderIds); - } - }, [sel]); - - const _handleDeleteSingle = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (sel.onDeleteFile) await sel.onDeleteFile(file.id); - }, [file.id, sel]); - - return ( -
0 ? styles.hasCustomDrag : '', - ].filter(Boolean).join(' ')} - onClick={(e) => sel.onItemClick(file.id, 'file', e)} - onContextMenu={_onContextMenu} - {..._longPressHandlers} - draggable - onDragStart={(e) => { - sel.onItemDragStart(e, file.id, 'file', file.fileName); - if (sel.actions) sel.actions.applyDragPayload(e, _buildActionTarget()); - setDragging(true); - }} - onDragEnd={() => setDragging(false)} - > - - {_fileIcon(file.mimeType)} - {renaming ? ( - setRenameValue(e.target.value)} - onBlur={_handleRename} - onKeyDown={(e) => { - if (e.key === 'Enter') _handleRename(); - if (e.key === 'Escape') setRenaming(false); - }} - onClick={(e) => e.stopPropagation()} - /> - ) : ( - {file.fileName} - )} - {!renaming && ( - - {file.fileSize != null && ( - - {(file.fileSize / 1024).toFixed(0)}K - - )} - - {!multiSelected && inlineCustomActions.slice(0, 3).map((a) => { - const Icon = a.icon; - return ( - - ); - })} - {sel.onRenameFile && !multiSelected && ( - - )} - {multiSelected && isSelected ? ( - <> - {sel.selectedFolderIds.length > 0 && sel.onDeleteFolders && ( - - )} - {sel.selectedFileIds.length > 0 && sel.onDeleteFiles && ( - - )} - - ) : ( - (sel.onDeleteFile || sel.onDeleteFiles) && ( - - ) - )} - - <_StableTrio - scope={file.scope} - neutralize={file.neutralize} - scopeLabels={scopeLabels} - onChat={sel.onSendToChat ? () => sel.onSendToChat!([{ id: file.id, type: 'file', name: file.fileName }]) : undefined} - onScopeChange={sel.onScopeChange ? (next) => sel.onScopeChange!(file.id, next) : undefined} - onNeutralizeToggle={sel.onNeutralizeToggle ? (next) => sel.onNeutralizeToggle!(file.id, next) : undefined} - chatTitle={t('In Chat senden')} - /> - - )} -
- ); -} - -/* ── Tree node (folder) ───────────────────────────────────────────────── */ - -interface TreeNodeProps { - node: FolderNode; - depth: number; - selectedFolderId: string | null; - expandedIds: Set; - showFiles: boolean; - filesByFolder: Map; - sel: SelectionCtx; - promptFolderName: (message: string, options?: PromptOptions) => Promise; - onToggle: (id: string) => void; - onSelect: (id: string | null) => void; - onCreateFolder?: (name: string, parentId: string | null) => Promise; - onRenameFolder?: (folderId: string, newName: string) => Promise; - onDeleteFolder?: (folderId: string) => Promise; - onMoveFolder?: (folderId: string, targetParentId: string | null) => Promise; - onMoveFolders?: (folderIds: string[], targetParentId: string | null) => Promise; - onMoveFile?: (fileId: string, targetFolderId: string | null) => Promise; - onMoveFiles?: (fileIds: string[], targetFolderId: string | null) => Promise; - onDownloadFolder?: (folderId: string, folderName: string) => Promise; - onFolderScopeChange?: (folderId: string, newScope: string) => void; - onFolderNeutralizeToggle?: (folderId: string, newValue: boolean) => void; -} - -function _TreeNode({ - node, depth, selectedFolderId, expandedIds, showFiles, filesByFolder, sel, - promptFolderName, - onToggle, onSelect, - onCreateFolder, onRenameFolder, onDeleteFolder, onMoveFolder, onMoveFolders, onMoveFile, onMoveFiles, - onDownloadFolder, onFolderScopeChange, onFolderNeutralizeToggle, -}: TreeNodeProps) { - const { t } = useLanguage(); - const scopeLabels = useMemo((): Record => ({ - personal: t('Persönlich'), - featureInstance: t('Instanz'), - mandate: t('Mandant'), - global: t('Global'), - }), [t]); - const [renaming, setRenaming] = useState(false); - const [renameValue, setRenameValue] = useState(node.name); - const [dropOver, setDropOver] = useState(false); - const [dragging, setDragging] = useState(false); - const inputRef = useRef(null); - const isExpanded = expandedIds.has(node.id); - const isNavSelected = selectedFolderId === node.id; - const isMultiSelected = sel.selectedItemIds.has(node.id); - const folderFiles = showFiles ? (filesByFolder.get(node.id) || []) : []; - const hasChildren = (node.children && node.children.length > 0) || folderFiles.length > 0 || (node.fileCount ?? 0) > 0; - - useEffect(() => { - if (renaming && inputRef.current) inputRef.current.focus(); - }, [renaming]); - - const _handleRename = useCallback(async () => { - const trimmed = renameValue.trim(); - if (trimmed && trimmed !== node.name && onRenameFolder) { - await onRenameFolder(node.id, trimmed); - } - setRenaming(false); - }, [renameValue, node.id, node.name, onRenameFolder]); - - const _handleAdd = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (!onCreateFolder) return; - const name = await promptFolderName(t('Neuer Ordnername:'), { title: t('Neuer Ordner'), placeholder: t('Ordnername') }); - if (name?.trim()) { - await onCreateFolder(name.trim(), node.id); - if (!expandedIds.has(node.id)) onToggle(node.id); - } - }, [onCreateFolder, node.id, expandedIds, onToggle, promptFolderName, t]); - - const _handleDeleteSingle = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (onDeleteFolder) await onDeleteFolder(node.id); - }, [onDeleteFolder, node.id]); - - const _handleDeleteFolders = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (sel.selectedFolderIds.length > 0 && sel.onDeleteFolders) { - await sel.onDeleteFolders(sel.selectedFolderIds); - } - }, [sel]); - - const _handleDeleteFiles = useCallback(async (e: React.MouseEvent) => { - e.stopPropagation(); - if (sel.selectedFileIds.length > 0 && sel.onDeleteFiles) { - await sel.onDeleteFiles(sel.selectedFileIds); - } - }, [sel]); - - const _handleDragOver = useCallback((e: React.DragEvent) => { - e.preventDefault(); - e.dataTransfer.dropEffect = 'move'; - setDropOver(true); - }, []); - - const _handleDragLeave = useCallback(() => setDropOver(false), []); - - const _handleDrop = useCallback(async (e: React.DragEvent) => { - e.preventDefault(); - setDropOver(false); - - const treeItemsJson = e.dataTransfer.getData('application/tree-items'); - if (treeItemsJson) { - const items: TreeItem[] = JSON.parse(treeItemsJson); - const fileIds = items.filter(i => i.type === 'file').map(i => i.id); - const folderIds = items.filter(i => i.type === 'folder' && i.id !== node.id).map(i => i.id); - - if (folderIds.length > 0 && onMoveFolders) { - await onMoveFolders(folderIds, node.id); - } else if (onMoveFolder) { - for (const fId of folderIds) await onMoveFolder(fId, node.id); - } - if (fileIds.length > 0 && onMoveFiles) { - await onMoveFiles(fileIds, node.id); - } else if (fileIds.length > 0 && onMoveFile) { - for (const fId of fileIds) await onMoveFile(fId, node.id); - } - return; - } - - const folderId = e.dataTransfer.getData('application/folder-id'); - const fileIdsJson = e.dataTransfer.getData('application/file-ids'); - const fileId = e.dataTransfer.getData('application/file-id'); - if (folderId && folderId !== node.id && onMoveFolder) { - await onMoveFolder(folderId, node.id); - } else if (fileIdsJson && onMoveFiles) { - await onMoveFiles(JSON.parse(fileIdsJson), node.id); - } else if (fileId && onMoveFile) { - await onMoveFile(fileId, node.id); - } - }, [node.id, onMoveFolder, onMoveFolders, onMoveFile, onMoveFiles]); - - const nodeClasses = [ - styles.treeNode, - isNavSelected && !isMultiSelected ? styles.selected : '', - isMultiSelected ? styles.multiSelected : '', - dropOver ? styles.dropTarget : '', - dragging ? styles.dragging : '', - ].filter(Boolean).join(' '); - - const isProtected = node.isProtected === true; - const isReadonly = node.isReadonly === true; - const notDraggable = isProtected || isReadonly; - const notEditable = isProtected || isReadonly; - const customIcon = node.icon; - - return ( -
-
sel.onItemClick(node.id, 'folder', e)} - draggable={!notDraggable} - onDragStart={notDraggable ? undefined : (e) => { - sel.onItemDragStart(e, node.id, 'folder', node.name); - setDragging(true); - }} - onDragEnd={notDraggable ? undefined : () => setDragging(false)} - onDragOver={isProtected ? undefined : _handleDragOver} - onDragLeave={isProtected ? undefined : _handleDragLeave} - onDrop={isProtected ? undefined : _handleDrop} - > - { e.stopPropagation(); if (hasChildren) onToggle(node.id); }} - > - - - - {customIcon ? ( - {customIcon} - ) : isExpanded ? : } - - {renaming && !notEditable ? ( - setRenameValue(e.target.value)} - onBlur={_handleRename} - onKeyDown={(e) => { - if (e.key === 'Enter') _handleRename(); - if (e.key === 'Escape') setRenaming(false); - }} - onClick={(e) => e.stopPropagation()} - /> - ) : ( - {node.name} - )} - {!isProtected && ( - - - {!notEditable && onDownloadFolder && !(isMultiSelected && sel.selectedItemIds.size > 1) && ( - - )} - {onCreateFolder && !(isMultiSelected && sel.selectedItemIds.size > 1) && ( - - )} - {!notEditable && onRenameFolder && !(isMultiSelected && sel.selectedItemIds.size > 1) && ( - - )} - {isMultiSelected && sel.selectedItemIds.size > 1 ? ( - <> - {sel.selectedFolderIds.length > 0 && sel.onDeleteFolders && ( - - )} - {sel.selectedFileIds.length > 0 && sel.onDeleteFiles && ( - - )} - - ) : !notEditable && onDeleteFolder && ( - - )} - - <_StableTrio - scope={node.scope} - neutralize={node.neutralize} - scopeLabels={scopeLabels} - onChat={(sel.onSendToChat && !(isMultiSelected && sel.selectedItemIds.size > 1)) ? () => sel.onSendToChat!([{ id: node.id, type: 'folder', name: node.name }]) : undefined} - onScopeChange={(onFolderScopeChange && !(isMultiSelected && sel.selectedItemIds.size > 1)) ? (next) => onFolderScopeChange(node.id, next) : undefined} - onNeutralizeToggle={(onFolderNeutralizeToggle && !(isMultiSelected && sel.selectedItemIds.size > 1)) ? (next) => onFolderNeutralizeToggle(node.id, next) : undefined} - chatTitle={t('In Chat senden')} - /> - - )} -
- {isExpanded && hasChildren && ( -
- {node.children!.map((child) => ( - <_TreeNode - key={child.id} - node={child} - depth={depth + 1} - selectedFolderId={selectedFolderId} - expandedIds={expandedIds} - showFiles={showFiles} - filesByFolder={filesByFolder} - sel={sel} - promptFolderName={promptFolderName} - onToggle={onToggle} - onSelect={onSelect} - onCreateFolder={onCreateFolder} - onRenameFolder={onRenameFolder} - onDeleteFolder={onDeleteFolder} - onMoveFolder={onMoveFolder} - onMoveFolders={onMoveFolders} - onMoveFile={onMoveFile} - onMoveFiles={onMoveFiles} - onDownloadFolder={onDownloadFolder} - onFolderScopeChange={onFolderScopeChange} - onFolderNeutralizeToggle={onFolderNeutralizeToggle} - /> - ))} - {folderFiles.map((file) => ( - <_FileItem key={file.id} file={file} sel={sel} /> - ))} -
- )} -
- ); -} - -/* ── Root component ────────────────────────────────────────────────────── */ - -export default function FolderTree({ - folders, files, showFiles = false, selectedFolderId, onSelect, onFileSelect, - selectedItemIds: externalSelectedIds, onSelectionChange, - expandedIds: externalExpandedIds, onToggleExpand, - onCreateFolder, onRenameFolder, onDeleteFolder, onMoveFolder, onMoveFolders, onMoveFile, onMoveFiles, - onRenameFile, onDeleteFile, onDeleteFiles, onDeleteFolders, onRefresh, onDownloadFolder, - onScopeChange, onNeutralizeToggle, onFolderScopeChange, onFolderNeutralizeToggle, onSendToChat, - customActions, udbContext, -}: FolderTreeProps) { - const { t } = useLanguage(); - const viewMode = useViewMode(); - const containerRef = useRef(null); - const inlineRenameRegistryRef = useRef void>>(new Map()); - const _registerInlineRename = useCallback((fileId: string, fn: () => void) => { - inlineRenameRegistryRef.current.set(fileId, fn); - }, []); - - const [menuState, setMenuState] = useState<{ - anchor: { x: number; y: number }; - target: FileActionTarget; - title?: string; - } | null>(null); - const [sheetState, setSheetState] = useState<{ - target: FileActionTarget; - title?: string; - } | null>(null); - - const [internalExpandedIds, setInternalExpandedIds] = useState>(new Set()); - const [internalSelectedIds, setInternalSelectedIds] = useState>(new Set()); - const lastClickedIdRef = useRef(null); - const { prompt: promptFolderName, PromptDialog } = usePrompt(); - const [rootDropOver, setRootDropOver] = useState(false); - - const expandedIds = externalExpandedIds ?? internalExpandedIds; - const selectedItemIds = externalSelectedIds ?? internalSelectedIds; - - const realTree = useMemo(() => _buildTree(folders), [folders]); - const filesByFolder = useMemo(() => _groupFilesByFolder(files || []), [files]); - const rootFiles = showFiles ? (filesByFolder.get('') || []) : []; - - const knownFolderIds = useMemo(() => { - const ids = new Set(); - const _collect = (nodes: FolderNode[]) => { for (const n of nodes) { ids.add(n.id); if (n.children) _collect(n.children); } }; - _collect(realTree); - return ids; - }, [realTree]); - - const tree = useMemo(() => { - if (!showFiles) return realTree; - const orphanFolders: FolderNode[] = []; - for (const key of filesByFolder.keys()) { - if (key && !knownFolderIds.has(key)) { - orphanFolders.push({ id: key, name: key.slice(0, 8) + '…', parentId: null, fileCount: filesByFolder.get(key)?.length ?? 0, isProtected: true }); - } - } - if (orphanFolders.length === 0) return realTree; - return [...realTree, ...orphanFolders.sort((a, b) => a.name.localeCompare(b.name))]; - }, [realTree, showFiles, filesByFolder, knownFolderIds]); - - const flatList = useMemo( - () => _computeFlatList(tree, expandedIds, showFiles, filesByFolder), - [tree, expandedIds, showFiles, filesByFolder], - ); - - const _handleToggle = useCallback((id: string) => { - if (onToggleExpand) { - onToggleExpand(id); - return; - } - setInternalExpandedIds((prev) => { - const next = new Set(prev); - if (next.has(id)) next.delete(id); else next.add(id); - return next; - }); - }, [onToggleExpand]); - - const _setSelection = useCallback((ids: Set) => { - if (onSelectionChange) { - onSelectionChange(ids); - } else { - setInternalSelectedIds(ids); - } - }, [onSelectionChange]); - - const _handleItemClick = useCallback((id: string, type: 'file' | 'folder', e: React.MouseEvent) => { - if (e.ctrlKey || e.metaKey) { - const next = new Set(selectedItemIds); - if (next.has(id)) next.delete(id); else next.add(id); - _setSelection(next); - lastClickedIdRef.current = id; - return; - } - - if (e.shiftKey && lastClickedIdRef.current) { - const lastIdx = flatList.findIndex(i => i.id === lastClickedIdRef.current); - const currIdx = flatList.findIndex(i => i.id === id); - if (lastIdx >= 0 && currIdx >= 0) { - const [from, to] = lastIdx < currIdx ? [lastIdx, currIdx] : [currIdx, lastIdx]; - const next = new Set(selectedItemIds); - for (let i = from; i <= to; i++) next.add(flatList[i].id); - _setSelection(next); - } - return; - } - - _setSelection(new Set([id])); - lastClickedIdRef.current = id; - if (type === 'folder') onSelect(id); - if (type === 'file') onFileSelect?.(id); - }, [selectedItemIds, flatList, _setSelection, onSelect, onFileSelect]); - - const _handleItemDragStart = useCallback((e: React.DragEvent, id: string, type: 'file' | 'folder', name: string) => { - const isInSelection = selectedItemIds.has(id) && selectedItemIds.size > 1; - - if (isInSelection) { - const items: TreeItem[] = []; - for (const selId of selectedItemIds) { - const item = flatList.find(i => i.id === selId); - if (item) items.push(item); - } - e.dataTransfer.setData('application/tree-items', JSON.stringify(items)); - const fileIds = items.filter(i => i.type === 'file').map(i => i.id); - if (fileIds.length > 0) { - e.dataTransfer.setData('application/file-ids', JSON.stringify(fileIds)); - } - } else { - e.dataTransfer.setData('application/tree-items', JSON.stringify([{ id, type, name }])); - if (type === 'file') { - e.dataTransfer.setData('application/file-id', id); - } else { - e.dataTransfer.setData('application/folder-id', id); - } - } - e.dataTransfer.effectAllowed = 'copyMove'; - }, [selectedItemIds, flatList]); - - const allFileIds = useMemo(() => { - const ids = new Set(); - for (const [, arr] of filesByFolder) for (const f of arr) ids.add(f.id); - return ids; - }, [filesByFolder]); - - const allFolderIds = useMemo(() => { - const ids = new Set(); - const _collect = (nodes: FolderNode[]) => { for (const n of nodes) { ids.add(n.id); if (n.children) _collect(n.children); } }; - _collect(tree); - return ids; - }, [tree]); - - const _beginInlineRename = useCallback((fileId: string) => { - const fn = inlineRenameRegistryRef.current.get(fileId); - if (fn) fn(); - }, []); - - const actionCtx: FileActionContext = useMemo(() => ({ - viewMode, - udbContext, - }), [viewMode, udbContext]); - - const fileActions = useFileActions(actionCtx, customActions, { - onRenameFile, - onDeleteFile, - onDeleteFiles, - onDeleteFolders, - onSendToChat, - t, - beginInlineRename: _beginInlineRename, - }); - - const _openMenu = useCallback( - (anchor: { x: number; y: number }, target: FileActionTarget, title?: string) => { - setMenuState({ anchor, target, title }); - }, - [], - ); - const _openSheet = useCallback((target: FileActionTarget, title?: string) => { - setSheetState({ target, title }); - }, []); - const _closeMenu = useCallback(() => setMenuState(null), []); - const _closeSheet = useCallback(() => setSheetState(null), []); - - const _applyDragPayload = useCallback( - (e: React.DragEvent, target: FileActionTarget) => { - const drag = fileActions.forTarget(target).drag; - for (const a of drag) { - if (!a.dragMime) continue; - try { - e.dataTransfer.setData( - a.dragMime, - JSON.stringify({ - actionId: a.id, - files: target.files.map((f) => ({ id: f.id, name: f.fileName })), - folders: target.folders.map((f) => ({ id: f.id, name: f.name })), - }), - ); - } catch { - // dataTransfer.setData kann in seltenen Fällen werfen (read-only) — nicht fatal. - } - } - }, - [fileActions], - ); - - const sel: SelectionCtx = useMemo(() => { - const selFileIds = Array.from(selectedItemIds).filter(id => allFileIds.has(id)); - const selFolderIds = Array.from(selectedItemIds).filter(id => allFolderIds.has(id)); - return { - selectedItemIds, - selectedFileIds: selFileIds, - selectedFolderIds: selFolderIds, - onItemClick: _handleItemClick, - onItemDragStart: _handleItemDragStart, - onRenameFile, - onDeleteFile, - onDeleteFiles, - onDeleteFolders, - onScopeChange, - onNeutralizeToggle, - onSendToChat, - actions: { - actionCtx, - resolveFor: fileActions.forTarget, - openMenu: _openMenu, - openSheet: _openSheet, - applyDragPayload: _applyDragPayload, - }, - registerInlineRename: _registerInlineRename, - }; - }, [ - selectedItemIds, allFileIds, allFolderIds, _handleItemClick, _handleItemDragStart, - onRenameFile, onDeleteFile, onDeleteFiles, onDeleteFolders, - onScopeChange, onNeutralizeToggle, onSendToChat, - actionCtx, fileActions.forTarget, _openMenu, _openSheet, _applyDragPayload, _registerInlineRename, - ]); - - // Tastenkürzel — nur dispatchen wenn FolderTree den Fokus enthält und es nicht aus - // einem Input/Editable-Element kommt (sonst kollidiert F2/Delete mit Inline-Rename). - useEffect(() => { - const _onKeyDown = (e: KeyboardEvent) => { - const root = containerRef.current; - if (!root) return; - const active = document.activeElement as HTMLElement | null; - if (!active || !root.contains(active)) return; - const tag = active.tagName.toLowerCase(); - if (tag === 'input' || tag === 'textarea' || active.isContentEditable) return; - - const selFileIds = Array.from(selectedItemIds).filter(id => allFileIds.has(id)); - const selFolderIds = Array.from(selectedItemIds).filter(id => allFolderIds.has(id)); - if (selFileIds.length + selFolderIds.length === 0) return; - - const allFiles = (files ?? []).filter(f => selFileIds.includes(f.id)); - // Folder-Ziele für Shortcuts kommen aktuell nicht vor — Built-in `core.delete` - // operiert auf der Selection. Für diese Iteration genügt das. - const target: FileActionTarget = { files: allFiles, folders: [] }; - const resolved = fileActions.forTarget(target).shortcut; - - for (const a of resolved) { - if (!a.shortcut) continue; - if (_matchesShortcut(e, a.shortcut)) { - e.preventDefault(); - void runAction(a, target, actionCtx, _windowConfirm); - return; - } - } - }; - window.addEventListener('keydown', _onKeyDown); - return () => window.removeEventListener('keydown', _onKeyDown); - }, [selectedItemIds, allFileIds, allFolderIds, files, fileActions, actionCtx]); - - // Root drop handler: items dropped on the empty area go to root (null) - const _handleRootDrop = useCallback(async (e: React.DragEvent) => { - e.preventDefault(); - setRootDropOver(false); - const treeItemsJson = e.dataTransfer.getData('application/tree-items'); - if (treeItemsJson) { - const items: TreeItem[] = JSON.parse(treeItemsJson); - const fileIds = items.filter(i => i.type === 'file').map(i => i.id); - const folderIds = items.filter(i => i.type === 'folder').map(i => i.id); - if (folderIds.length > 0 && onMoveFolders) await onMoveFolders(folderIds, null); - else if (onMoveFolder) for (const fId of folderIds) await onMoveFolder(fId, null); - if (fileIds.length > 0 && onMoveFiles) await onMoveFiles(fileIds, null); - else if (onMoveFile) for (const fId of fileIds) await onMoveFile(fId, null); - return; - } - - const folderId = e.dataTransfer.getData('application/folder-id'); - const fileId = e.dataTransfer.getData('application/file-id'); - if (folderId && onMoveFolder) await onMoveFolder(folderId, null); - else if (fileId && onMoveFile) await onMoveFile(fileId, null); - }, [onMoveFolder, onMoveFolders, onMoveFile, onMoveFiles]); - - const _handleRootAddFolder = useCallback(async () => { - if (!onCreateFolder) return; - const name = await promptFolderName(t('Neuer Ordnername:'), { title: t('Neuer Ordner'), placeholder: t('Ordnername') }); - if (name?.trim()) await onCreateFolder(name.trim(), null); - }, [onCreateFolder, promptFolderName, t]); - - const isRootSelected = selectedFolderId === null; - - const _handleRootClick = useCallback(() => { - _setSelection(new Set()); - onSelect(null); - }, [_setSelection, onSelect]); - - const menuActions = useMemo( - () => (menuState ? fileActions.forTarget(menuState.target).menu : []), - [menuState, fileActions], - ); - const sheetActions = useMemo( - () => (sheetState ? fileActions.forTarget(sheetState.target).sheet : []), - [sheetState, fileActions], - ); - - return ( -
-
- { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setRootDropOver(true); }} - onDragLeave={() => setRootDropOver(false)} - onDrop={_handleRootDrop} - > - / - - - {onCreateFolder && ( - - )} - {onRefresh && ( - - )} - -
-
- {tree.map((node) => ( - <_TreeNode - key={node.id} - node={node} - depth={0} - selectedFolderId={selectedFolderId} - expandedIds={expandedIds} - showFiles={showFiles} - filesByFolder={filesByFolder} - sel={sel} - promptFolderName={promptFolderName} - onToggle={_handleToggle} - onSelect={onSelect} - onCreateFolder={onCreateFolder} - onRenameFolder={onRenameFolder} - onDeleteFolder={onDeleteFolder} - onMoveFolder={onMoveFolder} - onMoveFolders={onMoveFolders} - onMoveFile={onMoveFile} - onMoveFiles={onMoveFiles} - onDownloadFolder={onDownloadFolder} - onFolderScopeChange={onFolderScopeChange} - onFolderNeutralizeToggle={onFolderNeutralizeToggle} - /> - ))} - {rootFiles.map((file) => ( - <_FileItem key={file.id} file={file} sel={sel} /> - ))} -
- - {menuState && ( - - )} - -
- ); -} diff --git a/src/components/FolderTree/SharepointBrowseTree.tsx b/src/components/FolderTree/SharepointBrowseTree.tsx deleted file mode 100644 index b344c51..0000000 --- a/src/components/FolderTree/SharepointBrowseTree.tsx +++ /dev/null @@ -1,319 +0,0 @@ -/** - * SharepointBrowseTree – Lazy-loading tree for SharePoint browse. - * Same look & feel as FolderTree (chevron, FaFolder/FaFolderOpen, styling). - * Loads children on expand via onLoadChildren(path). - */ - -import React, { useState, useCallback, useEffect } from 'react'; -import { FaFolder, FaFolderOpen, FaChevronRight, FaGlobe } from 'react-icons/fa'; -import styles from './FolderTree.module.css'; -import { useLanguage } from '../../providers/language/LanguageContext'; - -export interface BrowseEntry { - name: string; - path: string; - isFolder: boolean; - size?: number; - mimeType?: string; - metadata?: Record; -} - -export interface SharepointBrowseTreeProps { - /** Root path (usually "/") - children loaded via onLoadChildren */ - rootPath?: string; - /** Load children for a given path. Returns folders and files. */ - onLoadChildren: (path: string) => Promise; - /** Called when user selects a file path */ - onSelectFile: (path: string) => void; - /** Called when user selects a folder path (e.g. for destination). If provided, folder rows are selectable. */ - onSelectFolder?: (path: string) => void; - /** If true, file rows are not shown — only folders (for list/upload/destination folder pickers). */ - foldersOnly?: boolean; - /** Currently selected path (for highlight) */ - selectedPath?: string | null; - /** Optional: pre-seed root children (e.g. from initial load) */ - initialChildren?: BrowseEntry[]; -} - -function _fileIcon(mime?: string): string { - if (!mime) return '\uD83D\uDCC4'; - if (mime.startsWith('image/')) return '\uD83D\uDDBC\uFE0F'; - if (mime.includes('pdf')) return '\uD83D\uDCD5'; - if (mime.includes('word') || mime.includes('docx')) return '\uD83D\uDCD8'; - if (mime.includes('sheet') || mime.includes('xlsx') || mime.includes('csv')) return '\uD83D\uDCCA'; - if (mime.includes('presentation') || mime.includes('pptx')) return '\uD83D\uDCD9'; - if (mime.includes('zip') || mime.includes('tar') || mime.includes('gz')) return '\uD83D\uDCE6'; - if (mime.startsWith('text/') || mime.includes('json') || mime.includes('xml')) return '\uD83D\uDCDD'; - return '\uD83D\uDCC4'; -} - -/* ── File row ──────────────────────────────────────────────────────────── */ - -function _FileRow({ - entry, - selectedPath, - onSelect, -}: { - entry: BrowseEntry; - selectedPath: string | null | undefined; - onSelect: (path: string) => void; -}) { - const isSelected = selectedPath === entry.path; - - return ( -
onSelect(entry.path)} - title={entry.path} - > - - {_fileIcon(entry.mimeType)} - {entry.name} - {entry.size != null && ( - - {(entry.size / 1024).toFixed(0)}K - - )} -
- ); -} - -/* ── Folder row (expandable, lazy-loads children) ───────────────────────── */ - -function _FolderRow({ - entry, - selectedPath, - expandedPaths, - loadedChildren, - loadingPaths, - onToggle, - onSelectFile, - onSelectFolder, - foldersOnly, -}: { - entry: BrowseEntry; - selectedPath: string | null | undefined; - expandedPaths: Set; - loadedChildren: Record; - loadingPaths: Set; - onToggle: (path: string) => void; - onSelectFile: (path: string) => void; - onSelectFolder?: (path: string) => void; - foldersOnly: boolean; -}) { - const { t } = useLanguage(); - const isExpanded = expandedPaths.has(entry.path); - const isSelected = selectedPath === entry.path; - const children = loadedChildren[entry.path] ?? []; - const folders = children.filter((c) => c.isFolder).sort((a, b) => a.name.localeCompare(b.name)); - const files = children.filter((c) => !c.isFolder).sort((a, b) => a.name.localeCompare(b.name)); - const isLoading = isExpanded && loadingPaths.has(entry.path); - - const handleRowClick = (e: React.MouseEvent) => { - const target = e.target as HTMLElement; - if (target.closest(`.${styles.chevron}`)) return; - if (onSelectFolder) { - onSelectFolder(entry.path); - return; - } - onToggle(entry.path); - }; - - const handleChevronClick = (e: React.MouseEvent) => { - e.stopPropagation(); - onToggle(entry.path); - }; - - return ( -
-
- - - - - {isExpanded ? : } - - {entry.name} - {isLoading && ( - … - )} -
- {isExpanded && ( -
- {isLoading ? ( -
- {t('Wird geladen…')} -
- ) : ( - <> - {folders.map((child) => ( - <_FolderRow - key={child.path} - entry={child} - selectedPath={selectedPath} - expandedPaths={expandedPaths} - loadedChildren={loadedChildren} - loadingPaths={loadingPaths} - onToggle={onToggle} - onSelectFile={onSelectFile} - onSelectFolder={onSelectFolder} - foldersOnly={foldersOnly} - /> - ))} - {!foldersOnly && - files.map((child) => ( - <_FileRow - key={child.path} - entry={child} - selectedPath={selectedPath} - onSelect={onSelectFile} - /> - ))} - {children.length === 0 && ( -
- {t('Leer')} -
- )} - - )} -
- )} -
- ); -} - -/* ── Root component ─────────────────────────────────────────────────────── */ - -export function SharepointBrowseTree({ - rootPath = '/', - onLoadChildren, - onSelectFile, - onSelectFolder, - foldersOnly = false, - selectedPath, - initialChildren = [], -}: SharepointBrowseTreeProps) { - const { t } = useLanguage(); - const [expandedPaths, setExpandedPaths] = useState>(new Set([rootPath])); - const [loadedChildren, setLoadedChildren] = useState>(() => - initialChildren.length > 0 ? { [rootPath]: initialChildren } : {} - ); - const [loadingPaths, setLoadingPaths] = useState>(new Set()); - - const loadPath = useCallback( - async (path: string) => { - setLoadingPaths((p) => new Set(p).add(path)); - try { - const items = await onLoadChildren(path); - setLoadedChildren((prev) => ({ ...prev, [path]: items })); - } catch { - setLoadedChildren((prev) => ({ ...prev, [path]: [] })); - } finally { - setLoadingPaths((p) => { - const next = new Set(p); - next.delete(path); - return next; - }); - } - }, - [onLoadChildren] - ); - - const handleToggle = useCallback( - (path: string) => { - setExpandedPaths((prev) => { - const next = new Set(prev); - if (next.has(path)) { - next.delete(path); - } else { - next.add(path); - loadPath(path); - } - return next; - }); - }, - [loadPath] - ); - - useEffect(() => { - if (rootPath in loadedChildren) return; - if (initialChildren.length > 0) return; - loadPath(rootPath); - }, [rootPath, initialChildren.length, loadPath]); - - const rootItems = loadedChildren[rootPath] ?? []; - const rootLoading = loadingPaths.has(rootPath); - const rootFolders = rootItems.filter((e) => e.isFolder).sort((a, b) => a.name.localeCompare(b.name)); - const rootFiles = rootItems.filter((e) => !e.isFolder).sort((a, b) => a.name.localeCompare(b.name)); - const isRootExpanded = expandedPaths.has(rootPath); - - return ( -
-
- handleToggle(rootPath)} - title={isRootExpanded ? t('Einklappen') : t('Erweitern')} - > - - - - {t('SharePoint')} - {rootLoading && ( - … - )} -
- {isRootExpanded && ( -
- {rootLoading ? ( -
- {t('Sites werden geladen…')} -
- ) : ( - <> - {rootFolders.map((entry) => ( - <_FolderRow - key={entry.path} - entry={entry} - selectedPath={selectedPath} - expandedPaths={expandedPaths} - loadedChildren={loadedChildren} - loadingPaths={loadingPaths} - onToggle={handleToggle} - onSelectFile={onSelectFile} - onSelectFolder={onSelectFolder} - foldersOnly={foldersOnly} - /> - ))} - {!foldersOnly && - rootFiles.map((entry) => ( - <_FileRow - key={entry.path} - entry={entry} - selectedPath={selectedPath} - onSelect={onSelectFile} - /> - ))} - {rootItems.length === 0 && !rootLoading && ( -
- {t('Keine Einträge')} -
- )} - - )} -
- )} -
- ); -} diff --git a/src/components/FolderTree/actions/FileActionBottomSheet.module.css b/src/components/FolderTree/actions/FileActionBottomSheet.module.css deleted file mode 100644 index 49f7d08..0000000 --- a/src/components/FolderTree/actions/FileActionBottomSheet.module.css +++ /dev/null @@ -1,103 +0,0 @@ -/* Bottom-Sheet für FolderTree Long-Press (Mobile). */ - -@keyframes _slideUp { - from { transform: translateY(100%); } - to { transform: translateY(0); } -} - -@keyframes _fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -.backdrop { - position: fixed; - inset: 0; - z-index: 1000; - background: rgba(0, 0, 0, 0.45); - animation: _fadeIn 0.15s ease-out; -} - -.sheet { - position: fixed; - left: 0; - right: 0; - bottom: 0; - z-index: 1001; - background: var(--color-bg-elevated, #ffffff); - border-top-left-radius: 16px; - border-top-right-radius: 16px; - box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); - padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); - max-height: 80vh; - overflow-y: auto; - animation: _slideUp 0.18s ease-out; -} - -.handle { - width: 36px; - height: 4px; - border-radius: 2px; - background: var(--color-border, rgba(0, 0, 0, 0.18)); - margin: 4px auto 8px; -} - -.title { - padding: 4px 16px 12px; - font-size: 13px; - font-weight: 600; - color: var(--color-text-primary, #222); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06)); - margin-bottom: 4px; -} - -.item { - display: flex; - align-items: center; - gap: 14px; - width: 100%; - min-height: 48px; - padding: 12px 16px; - border: none; - background: none; - cursor: pointer; - color: var(--color-text-primary, #222); - text-align: left; - font-size: 15px; - line-height: 1.2; -} - -.item:active { - background: var(--color-bg-hover, rgba(25, 118, 210, 0.10)); -} - -.item.danger { - color: var(--color-error, #d32f2f); -} - -.icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 20px; - font-size: 17px; - flex-shrink: 0; -} - -.label { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.empty { - padding: 16px; - text-align: center; - font-size: 13px; - color: var(--color-text-secondary, #999); - font-style: italic; -} diff --git a/src/components/FolderTree/actions/FileActionBottomSheet.tsx b/src/components/FolderTree/actions/FileActionBottomSheet.tsx deleted file mode 100644 index efe5f62..0000000 --- a/src/components/FolderTree/actions/FileActionBottomSheet.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/** - * FileActionBottomSheet — Long-Press Action-Sheet für Mobile. - * - * Slide-Up von unten, 48 px Touch-Targets, ESC + Backdrop schließen. - */ - -import React, { useEffect } from 'react'; -import { - type FileAction, - type FileActionContext, - type FileActionTarget, - resolveActionLabel, -} from './types'; -import { runAction } from './registry'; -import styles from './FileActionBottomSheet.module.css'; - -interface Props { - open: boolean; - actions: FileAction[]; - target: FileActionTarget; - ctx: FileActionContext; - onClose: () => void; - title?: string; - confirm?: (title: string, body: string) => boolean | Promise; -} - -export const FileActionBottomSheet: React.FC = ({ - open, - actions, - target, - ctx, - onClose, - title, - confirm, -}) => { - useEffect(() => { - if (!open) return; - const _onKey = (e: KeyboardEvent) => { - if (e.key === 'Escape') onClose(); - }; - window.addEventListener('keydown', _onKey); - return () => window.removeEventListener('keydown', _onKey); - }, [open, onClose]); - - if (!open) return null; - - const _handleClick = async (action: FileAction) => { - onClose(); - await runAction(action, target, ctx, confirm); - }; - - return ( - <> -
-
- - - ); -}; diff --git a/src/components/FolderTree/actions/FileActionContextMenu.module.css b/src/components/FolderTree/actions/FileActionContextMenu.module.css deleted file mode 100644 index 3307011..0000000 --- a/src/components/FolderTree/actions/FileActionContextMenu.module.css +++ /dev/null @@ -1,103 +0,0 @@ -/* Context-Menu für FolderTree (Right-Click). - * Floating, ARIA-menu, Backdrop-Click + ESC schließen. */ - -.backdrop { - position: fixed; - inset: 0; - z-index: 1000; - background: transparent; -} - -.menu { - position: fixed; - z-index: 1001; - min-width: 200px; - max-width: 320px; - background: var(--color-bg-elevated, #ffffff); - border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12)); - border-radius: 6px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); - padding: 4px 0; - font-size: 13px; - color: var(--color-text-primary, #222); - user-select: none; -} - -.header { - padding: 4px 12px 6px; - font-size: 11px; - font-weight: 600; - color: var(--color-text-secondary, #888); - text-transform: uppercase; - letter-spacing: 0.04em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.divider { - height: 1px; - margin: 4px 0; - background: var(--color-border, rgba(0, 0, 0, 0.08)); -} - -.item { - display: flex; - align-items: center; - gap: 10px; - width: 100%; - padding: 6px 12px; - border: none; - background: none; - cursor: pointer; - color: inherit; - text-align: left; - font: inherit; - line-height: 1.2; -} - -.item:hover, -.item:focus-visible { - background: var(--color-bg-hover, rgba(25, 118, 210, 0.08)); - outline: none; -} - -.item.danger { - color: var(--color-error, #d32f2f); -} - -.item.danger:hover, -.item.danger:focus-visible { - background: var(--color-bg-error, rgba(211, 47, 47, 0.08)); -} - -.icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 16px; - font-size: 13px; - flex-shrink: 0; -} - -.label { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.shortcut { - flex-shrink: 0; - font-size: 11px; - color: var(--color-text-secondary, #999); - font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace; - padding-left: 12px; -} - -.empty { - padding: 8px 12px; - font-size: 12px; - color: var(--color-text-secondary, #999); - font-style: italic; -} diff --git a/src/components/FolderTree/actions/FileActionContextMenu.tsx b/src/components/FolderTree/actions/FileActionContextMenu.tsx deleted file mode 100644 index 64e4a1c..0000000 --- a/src/components/FolderTree/actions/FileActionContextMenu.tsx +++ /dev/null @@ -1,146 +0,0 @@ -/** - * FileActionContextMenu — Floating Right-Click-Menu für FolderTree. - * - * Wird vom FolderTree gemountet wenn `onContextMenu` auf einer Zeile feuert. - * Schließt sich bei Backdrop-Klick, ESC oder nach Aktion-Dispatch. - */ - -import React, { useEffect, useRef } from 'react'; -import { - type FileAction, - type FileActionContext, - type FileActionTarget, - resolveActionLabel, -} from './types'; -import { runAction } from './registry'; -import styles from './FileActionContextMenu.module.css'; - -interface Props { - /** Sichtbar/positioniert. ``null`` → nicht gemountet. */ - anchor: { x: number; y: number } | null; - actions: FileAction[]; - target: FileActionTarget; - ctx: FileActionContext; - /** Wird aufgerufen sobald das Menü schließen soll (Backdrop, ESC, nach Action). */ - onClose: () => void; - /** Optional: Header-Label (z. B. Dateiname). */ - title?: string; - /** Optionaler Confirm-Provider (z. B. browser native ``window.confirm``). */ - confirm?: (title: string, body: string) => boolean | Promise; -} - -export const FileActionContextMenu: React.FC = ({ - anchor, - actions, - target, - ctx, - onClose, - title, - confirm, -}) => { - const menuRef = useRef(null); - - useEffect(() => { - if (!anchor) return; - const _onKey = (e: KeyboardEvent) => { - if (e.key === 'Escape') onClose(); - }; - window.addEventListener('keydown', _onKey); - return () => window.removeEventListener('keydown', _onKey); - }, [anchor, onClose]); - - useEffect(() => { - if (!anchor || !menuRef.current) return; - menuRef.current.focus(); - }, [anchor]); - - if (!anchor) return null; - - const adjusted = _adjustToViewport(anchor, menuRef.current); - - const _handleClick = async (action: FileAction) => { - onClose(); - await runAction(action, target, ctx, confirm); - }; - - return ( - <> -
{ - e.preventDefault(); - onClose(); - }} - /> -
- {title &&
{title}
} - {actions.length === 0 ? ( -
—
- ) : ( - actions.map((a, idx) => { - const Icon = a.icon; - const isDangerCls = a.danger ? `${styles.item} ${styles.danger}` : styles.item; - return ( - - {idx > 0 && a.danger && actions[idx - 1] && !actions[idx - 1].danger && ( -
- )} - - - ); - }) - )} -
- - ); -}; - -function _adjustToViewport( - anchor: { x: number; y: number }, - menu: HTMLDivElement | null, -): { x: number; y: number } { - if (!menu) return anchor; - const rect = menu.getBoundingClientRect(); - const vw = window.innerWidth; - const vh = window.innerHeight; - const margin = 4; - let x = anchor.x; - let y = anchor.y; - if (x + rect.width + margin > vw) x = Math.max(margin, vw - rect.width - margin); - if (y + rect.height + margin > vh) y = Math.max(margin, vh - rect.height - margin); - return { x, y }; -} - -function _formatShortcut(s: string): string { - const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform); - return s - .split('+') - .map((part) => { - const k = part.trim().toLowerCase(); - if (k === 'mod') return isMac ? '\u2318' : 'Ctrl'; - if (k === 'shift') return isMac ? '\u21E7' : 'Shift'; - if (k === 'alt') return isMac ? '\u2325' : 'Alt'; - if (k === 'ctrl') return 'Ctrl'; - return k.length === 1 ? k.toUpperCase() : part; - }) - .join(isMac ? '' : '+'); -} diff --git a/src/components/FolderTree/actions/registry.ts b/src/components/FolderTree/actions/registry.ts deleted file mode 100644 index c2b83bb..0000000 --- a/src/components/FolderTree/actions/registry.ts +++ /dev/null @@ -1,218 +0,0 @@ -/** - * useFileActions — zentraler Registry-Hook für FolderTree Aktionen. - * - * Liefert eine einheitliche, gefilterte und sortierte Aktion-Liste, die das - * `FolderTree`-Inneres an Right-Click-Menü, Long-Press-Sheet, Tastenkürzel und - * Drag-Source dispatched. Built-in-Aktionen (Rename, Delete, Send-to-Chat) - * werden aus den vorhandenen FolderTree-Callbacks abgeleitet, damit existierende - * Aufrufer nichts ändern müssen. - */ - -import { useMemo } from 'react'; -import { FaPen, FaTrash, FaCommentDots } from 'react-icons/fa'; -import { - type FileAction, - type FileActionContext, - type FileActionTarget, - resolveActionLabel, -} from './types'; - -/** Callback-Bündel mit den heutigen `FolderTreeProps`-Handlern. - * Optional, weil nicht jeder Aufrufer alle Built-ins anbietet. */ -export interface BuiltinCallbacks { - onRenameFile?: (fileId: string, newName: string) => Promise; - onDeleteFile?: (fileId: string) => Promise; - onDeleteFiles?: (fileIds: string[]) => Promise; - onDeleteFolders?: (folderIds: string[]) => Promise; - onSendToChat?: ( - items: Array<{ id: string; type: 'file' | 'folder'; name: string }>, - ) => void; - /** Translator (i18n) — typischerweise `t` aus dem LanguageContext. */ - t?: (key: string, vars?: Record) => string; - /** Inline-Rename-Trigger (Eingabefeld in der Zeile). Wird vom FolderTree - * intern bereitgestellt — nicht vom Aufrufer. */ - beginInlineRename?: (fileId: string) => void; -} - -/** Sortierte, gefilterte Aktionsliste pro Kanal. */ -export interface ResolvedActions { - inline: FileAction[]; - menu: FileAction[]; - sheet: FileAction[]; - shortcut: FileAction[]; - drag: FileAction[]; -} - -const _IDENTITY: NonNullable = (s) => s; - -/** Built-in-Definitionen, die aus den heute hartcodierten Callbacks abgeleitet werden. - * Diese erscheinen NUR in den neuen Kanälen (Menu, Sheet, Shortcut) — die Inline-Icons - * werden weiterhin direkt vom FolderTree-Renderer gezeichnet, damit die bestehende - * "Stable-Trio + dynamische Aktionen"-Logik unangetastet bleibt. */ -function _buildBuiltins(cb: BuiltinCallbacks): FileAction[] { - const t: NonNullable = cb.t ?? _IDENTITY; - const list: FileAction[] = []; - - if (cb.onSendToChat) { - list.push({ - id: 'core.sendToChat', - label: t('In Chat senden'), - icon: FaCommentDots, - scope: 'multi', - channels: ['menu', 'sheet'], - sortOrder: 100, - handler: ({ files, folders }) => { - const items = [ - ...files.map((f) => ({ id: f.id, type: 'file' as const, name: f.fileName })), - ...folders.map((f) => ({ id: f.id, type: 'folder' as const, name: f.name })), - ]; - if (items.length > 0) cb.onSendToChat!(items); - }, - }); - } - - if (cb.onRenameFile && cb.beginInlineRename) { - list.push({ - id: 'core.rename', - label: t('Umbenennen'), - icon: FaPen, - scope: 'file', - channels: ['menu', 'sheet', 'shortcut'], - shortcut: 'F2', - sortOrder: 110, - predicate: ({ files, folders }) => files.length === 1 && folders.length === 0, - handler: ({ files }) => { - if (files.length === 1) cb.beginInlineRename!(files[0].id); - }, - }); - } - - if (cb.onDeleteFile || cb.onDeleteFiles || cb.onDeleteFolders) { - list.push({ - id: 'core.delete', - label: ({ files, folders }) => - files.length + folders.length > 1 - ? t('{count} Einträge löschen', { count: String(files.length + folders.length) }) - : t('Löschen'), - icon: FaTrash, - scope: 'multi', - channels: ['menu', 'sheet', 'shortcut'], - shortcut: 'Delete', - danger: true, - sortOrder: 200, - predicate: ({ files, folders }) => files.length > 0 || folders.length > 0, - confirm: { - title: t('Löschen bestätigen'), - body: ({ files, folders }) => - files.length + folders.length > 1 - ? t('{count} Einträge löschen?', { - count: String(files.length + folders.length), - }) - : t('Diesen Eintrag löschen?'), - }, - handler: async ({ files, folders }) => { - if (folders.length > 0 && cb.onDeleteFolders) { - await cb.onDeleteFolders(folders.map((f) => f.id)); - } - if (files.length > 1 && cb.onDeleteFiles) { - await cb.onDeleteFiles(files.map((f) => f.id)); - } else if (files.length === 1) { - if (cb.onDeleteFile) await cb.onDeleteFile(files[0].id); - else if (cb.onDeleteFiles) await cb.onDeleteFiles([files[0].id]); - } - }, - }); - } - - return list; -} - -/** - * Zentrale Registry-Hook. - * - * @param ctx Aktueller Aufruf-Kontext (View-Mode, Mandant, …). - * @param customs Vom Aufrufer registrierte Custom-Actions (Plugin-Slot). - * @param builtins Callback-Bündel der Built-in-Aktionen (aus FolderTreeProps abgeleitet). - * - * Die Rückgabe ist memoized und pro Kanal vorgefiltert; ein `Predicate`-Check - * pro Target erfolgt zusätzlich erst beim Render der jeweiligen Zeile/Sheet. - */ -export function useFileActions( - ctx: FileActionContext, - customs: FileAction[] | undefined, - builtins: BuiltinCallbacks, -): { - /** Alle Aktionen (gemerged + sortiert), unfiltered nach Predicate. */ - all: FileAction[]; - /** Liefert die für ein konkretes Target sichtbaren Aktionen, gruppiert nach Kanal. */ - forTarget: (target: FileActionTarget) => ResolvedActions; -} { - const all = useMemo(() => { - const merged = [..._buildBuiltins(builtins), ...(customs ?? [])]; - merged.sort( - (a, b) => - (a.sortOrder ?? 1000) - (b.sortOrder ?? 1000) || a.id.localeCompare(b.id), - ); - return merged; - // We intentionally depend on each callback identity so re-renders pick up - // updated handlers (closures over instanceId etc.). - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - customs, - builtins.onRenameFile, - builtins.onDeleteFile, - builtins.onDeleteFiles, - builtins.onDeleteFolders, - builtins.onSendToChat, - builtins.beginInlineRename, - builtins.t, - ]); - - const forTarget = useMemo(() => { - return (target: FileActionTarget): ResolvedActions => { - const _matches = (a: FileAction): boolean => { - if (a.scope === 'file' && (target.files.length !== 1 || target.folders.length > 0)) - return false; - if (a.scope === 'folder' && (target.folders.length !== 1 || target.files.length > 0)) - return false; - if (a.scope === 'multi' && target.files.length + target.folders.length === 0) - return false; - if (a.predicate && !a.predicate(target, ctx)) return false; - return true; - }; - - const matched = all.filter(_matches); - return { - inline: matched.filter((a) => a.channels.includes('inline')), - menu: matched.filter((a) => a.channels.includes('menu')), - sheet: matched.filter((a) => a.channels.includes('sheet')), - shortcut: matched.filter((a) => a.channels.includes('shortcut')), - drag: matched.filter((a) => a.channels.includes('drop')), - }; - }; - }, [all, ctx]); - - return { all, forTarget }; -} - -/** Hilfs-Dispatcher: führt Confirm + Handler aus, fängt Fehler ab und loggt sie. - * Der eigentliche Confirm-Dialog wird vom Renderer (Context-Menu/Sheet) bereitgestellt - * — dieser Helper bleibt UI-frei und ist von außerhalb React aufrufbar. */ -export async function runAction( - action: FileAction, - target: FileActionTarget, - ctx: FileActionContext, - confirmFn?: (label: string, body: string) => boolean | Promise, -): Promise { - if (action.confirm && confirmFn) { - const ok = await confirmFn(action.confirm.title, action.confirm.body(target)); - if (!ok) return; - } - try { - await action.handler(target, ctx); - } catch (err) { - console.error(`[FileAction] ${action.id} failed`, err); - } -} - -export { resolveActionLabel }; diff --git a/src/components/FolderTree/actions/types.ts b/src/components/FolderTree/actions/types.ts deleted file mode 100644 index d2b75db..0000000 --- a/src/components/FolderTree/actions/types.ts +++ /dev/null @@ -1,87 +0,0 @@ -/** - * Action-Modell für FolderTree (UDB Action System). - * - * Eine `FileAction` ist die kanonische Beschreibung einer Aktion, die der User - * auf eine Datei oder einen Ordner anwenden kann. Dieselbe Definition rendert - * sich automatisch in mehreren Kanälen: - * - inline → Icon-Button am rechten Zeilenrand - * - menu → Eintrag im Right-Click-Context-Menu - * - sheet → Eintrag im Long-Press Bottom-Sheet (Mobile) - * - shortcut → Tastenkürzel solange FolderTree Fokus hat - * - drop → Drag-Source: hängt eine zusätzliche MIME ans dataTransfer - * - * Vorhandene Built-in-Aktionen (Rename, Delete, Send-to-Chat) bleiben hinter - * dem System bestehen; wenn der Aufrufer keine `customActions` mitliefert, - * verhält sich `FolderTree` 1:1 wie zuvor. - */ - -import type React from 'react'; -import type { FileNode, FolderNode } from '../FolderTree'; - -export type FileActionScope = 'file' | 'folder' | 'multi'; -export type FileActionChannel = 'inline' | 'menu' | 'sheet' | 'shortcut' | 'drop'; - -/** UDB-Aufruf-Kontext — Aufrufer-Sites identifizieren sich, damit Predicates - * pro Surface entscheiden können (z. B. "nur im Graph-Editor sichtbar"). */ -export type UdbSurface = - | 'workspace' - | 'graphEditor' - | 'trustee' - | 'standalone' - | 'sharepoint'; - -export interface FileActionContext { - mandateId?: string; - featureInstanceId?: string; - viewMode: 'desktop' | 'mobile'; - udbContext?: UdbSurface; -} - -export interface FileActionTarget { - files: FileNode[]; - folders: FolderNode[]; -} - -export interface FileActionConfirm { - title: string; - body: (target: FileActionTarget) => string; -} - -export interface FileAction { - /** Global eindeutige Aktion-ID, namespace-prefixed (z. B. ``workflow.openInEditor``). */ - id: string; - /** Anzeige-Label (statisch oder als Funktion vom Target abgeleitet). */ - label: string | ((target: FileActionTarget) => string); - /** Icon-Komponente (react-icons-Style), bekommt optional `size`-Prop. */ - icon: React.ComponentType<{ size?: number }>; - /** Optionale Tönung des Icons (CSS color string). */ - iconColor?: string; - /** Was ist das Target — einzelne Datei, Ordner, oder Mehrfach-Selektion. */ - scope: FileActionScope; - /** Über welche UI-Kanäle wird die Aktion angeboten. */ - channels: FileActionChannel[]; - /** Pure, billig — entscheidet ob die Aktion für das aktuelle Target sichtbar ist. */ - predicate?: (target: FileActionTarget, ctx: FileActionContext) => boolean; - /** Async oder sync. Fehler werden vom Renderer geloggt; Toasts macht der Aufrufer. */ - handler: (target: FileActionTarget, ctx: FileActionContext) => Promise | void; - /** Tastenkürzel, z. B. `mod+e`. ``mod`` = Cmd auf Mac, Ctrl sonst. */ - shortcut?: string; - /** Wenn gesetzt → Bestätigungs-Dialog vor `handler`. */ - confirm?: FileActionConfirm; - /** MIME-Type für Drag-Source: wird zusätzlich ans `dataTransfer` gehängt. */ - dragMime?: string; - /** Sortier-Reihenfolge — kleinere Werte zuerst (Built-ins liegen bei 100, 110, 120…). */ - sortOrder?: number; - /** Visuell als gefährliche/destruktive Aktion markieren (rote Tönung). */ - danger?: boolean; -} - -/** Resolver-Helper: liest das Label eines `FileAction` aus, egal ob String oder Funktion. */ -export function resolveActionLabel(action: FileAction, target: FileActionTarget): string { - return typeof action.label === 'function' ? action.label(target) : action.label; -} - -/** Hilfs-Konstruktor: baut ein leeres Target. */ -export function emptyTarget(): FileActionTarget { - return { files: [], folders: [] }; -} diff --git a/src/components/FolderTree/actions/usePointerLongPress.ts b/src/components/FolderTree/actions/usePointerLongPress.ts deleted file mode 100644 index 18722c9..0000000 --- a/src/components/FolderTree/actions/usePointerLongPress.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { useCallback, useRef } from 'react'; - -/** - * Long-Press-Erkennung über Pointer-Events. - * - * Liefert Handler die direkt auf `
` etc. gespreaded werden können. - * Ein "Long-Press" feuert nach `thresholdMs` (Default 500 ms) wenn der Pointer - * sich nicht weiter als `moveTolerance` Pixel bewegt hat. - */ - -interface LongPressOptions { - thresholdMs?: number; - moveTolerance?: number; - /** Wenn ``true``, werden auch Maus-Events behandelt (für Desktop-Smoke-Tests). */ - includeMouse?: boolean; -} - -interface LongPressHandlers { - onPointerDown: (e: React.PointerEvent) => void; - onPointerMove: (e: React.PointerEvent) => void; - onPointerUp: (e: React.PointerEvent) => void; - onPointerCancel: (e: React.PointerEvent) => void; - onPointerLeave: (e: React.PointerEvent) => void; -} - -export function usePointerLongPress( - callback: (e: React.PointerEvent) => void, - options: LongPressOptions = {}, -): LongPressHandlers { - const { thresholdMs = 500, moveTolerance = 8, includeMouse = false } = options; - const timerRef = useRef(null); - const startPosRef = useRef<{ x: number; y: number } | null>(null); - const firedRef = useRef(false); - - const _clear = useCallback(() => { - if (timerRef.current !== null) { - window.clearTimeout(timerRef.current); - timerRef.current = null; - } - startPosRef.current = null; - firedRef.current = false; - }, []); - - const onPointerDown = useCallback( - (e: React.PointerEvent) => { - if (!includeMouse && e.pointerType === 'mouse') return; - _clear(); - startPosRef.current = { x: e.clientX, y: e.clientY }; - firedRef.current = false; - timerRef.current = window.setTimeout(() => { - firedRef.current = true; - callback(e); - }, thresholdMs); - }, - [callback, includeMouse, thresholdMs, _clear], - ); - - const onPointerMove = useCallback( - (e: React.PointerEvent) => { - if (timerRef.current === null || !startPosRef.current) return; - const dx = e.clientX - startPosRef.current.x; - const dy = e.clientY - startPosRef.current.y; - if (Math.abs(dx) > moveTolerance || Math.abs(dy) > moveTolerance) _clear(); - }, - [moveTolerance, _clear], - ); - - return { - onPointerDown, - onPointerMove, - onPointerUp: _clear, - onPointerCancel: _clear, - onPointerLeave: _clear, - }; -} diff --git a/src/components/FolderTree/actions/useViewMode.ts b/src/components/FolderTree/actions/useViewMode.ts deleted file mode 100644 index 187b832..0000000 --- a/src/components/FolderTree/actions/useViewMode.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { useEffect, useState } from 'react'; - -/** - * Liefert den aktuellen View-Mode (`'desktop' | 'mobile'`) basierend auf - * Viewport-Breite + Touch-Heuristik. Mobile = Breite < 768 px ODER - * Touch-Primary-Pointer ohne Maus. - */ -export function useViewMode(): 'desktop' | 'mobile' { - const [mode, setMode] = useState<'desktop' | 'mobile'>(() => _detect()); - - useEffect(() => { - const _onResize = () => setMode(_detect()); - window.addEventListener('resize', _onResize); - return () => window.removeEventListener('resize', _onResize); - }, []); - - return mode; -} - -function _detect(): 'desktop' | 'mobile' { - if (typeof window === 'undefined') return 'desktop'; - const isNarrow = window.matchMedia('(max-width: 768px)').matches; - const isCoarse = window.matchMedia('(pointer: coarse)').matches; - return isNarrow || isCoarse ? 'mobile' : 'desktop'; -} diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css new file mode 100644 index 0000000..97a8592 --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css @@ -0,0 +1,640 @@ +.formGeneratorTree { + display: flex; + flex-direction: column; + width: 100%; + font-family: var(--font-family); + min-height: 0; + flex: 1; + overflow: hidden; + height: 100%; + max-height: 100%; + position: relative; +} + +/* Section header */ +.sectionHeader { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + cursor: pointer; + user-select: none; + border-bottom: 1px solid var(--color-border, #e2e8f0); + background: var(--table-header-bg, #edf0f5); + border-radius: 8px 8px 0 0; +} + +.sectionHeader:hover { + background: #e4e8ef; +} + +.sectionHeaderNonCollapsible { + cursor: default; +} + +.sectionHeaderNonCollapsible:hover { + background: var(--table-header-bg, #edf0f5); +} + +.collapseChevron { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + font-size: 10px; + color: var(--color-text-secondary, #64748b); + transition: transform 0.2s ease; + flex-shrink: 0; +} + +.collapseChevronExpanded { + transform: rotate(90deg); +} + +.sectionTitle { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.02em; + color: var(--color-text-secondary, #475569); + flex: 1; +} + +.sectionCount { + font-size: 11px; + font-weight: 400; + color: var(--color-text-secondary, #94a3b8); +} + +.refreshBtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: none; + border-radius: 4px; + background: transparent; + color: var(--color-text-secondary, #94a3b8); + font-size: 11px; + cursor: pointer; + transition: all 0.15s ease; + padding: 0; + margin-left: 2px; + flex-shrink: 0; +} + +.refreshBtn:hover { + background: rgba(0, 0, 0, 0.06); + color: var(--color-text, #334155); +} + +/* Filter row */ +.filterRow { + display: flex; + align-items: center; + padding: 4px 8px; + gap: 4px; + position: relative; +} + +.filterInput { + flex: 1; + padding: 4px 24px 4px 8px; + font-size: 12px; + border: 1px solid var(--color-border, #e2e8f0); + border-radius: 4px; + background: var(--color-bg, #fff); + color: var(--color-text, #334155); + outline: none; +} + +.filterInput:focus { + border-color: var(--primary-color, #F25843); + box-shadow: 0 0 0 1px var(--primary-color, #F25843); +} + +.filterInput::placeholder { + color: var(--color-text-muted, #94a3b8); +} + +.filterClear { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; + font-size: 14px; + color: var(--color-text-muted, #94a3b8); + padding: 0 2px; + line-height: 1; +} + +.filterClear:hover { + color: var(--color-text, #334155); +} + +/* Tree wrapper */ +.treeWrapper { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + overflow: hidden; + border: 1px solid var(--color-border, #e2e8f0); + border-radius: 8px; + background: var(--color-bg); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); +} + +/* Tree content (scrollable) */ +.treeContent { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + min-height: 0; +} + +.treeContent::-webkit-scrollbar { + width: 6px; +} + +.treeContent::-webkit-scrollbar-track { + background: transparent; +} + +.treeContent::-webkit-scrollbar-thumb { + background: var(--color-border, #cbd5e1); + border-radius: 3px; +} + +.treeContent::-webkit-scrollbar-thumb:hover { + background: var(--color-text-secondary, #94a3b8); +} + +/* Batch action toolbar */ +.batchToolbar { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + background: var(--table-header-bg, #edf0f5); + border-bottom: 1px solid var(--color-border, #e2e8f0); + flex-shrink: 0; + flex-wrap: wrap; +} + +.batchCount { + font-size: 12px; + font-weight: 500; + color: var(--color-text-secondary, #475569); + margin-right: 4px; + white-space: nowrap; +} + +.batchButton { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 10px; + border: 1px solid var(--color-border, #e2e8f0); + border-radius: 6px; + background: var(--color-bg); + color: var(--color-text, #334155); + font-size: 12px; + font-family: var(--font-family); + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; +} + +.batchButton:hover { + background: var(--color-gray-disabled, #f1f5f9); + border-color: var(--color-text-secondary, #94a3b8); +} + +.batchButtonDanger { + color: #dc2626; + border-color: rgba(220, 38, 38, 0.3); +} + +.batchButtonDanger:hover { + background: rgba(220, 38, 38, 0.06); + border-color: #dc2626; +} + +.batchButtonIcon { + font-size: 12px; + display: inline-flex; +} + +.batchButtonCount { + font-size: 10px; + font-weight: 700; + margin-left: 2px; + opacity: 0.8; +} + +/* Node row */ +.nodeRow { + display: flex; + align-items: center; + gap: 4px; + height: 36px; + padding: 0 8px; + cursor: pointer; + user-select: none; + transition: background-color 0.12s ease; + position: relative; + border-bottom: 1px solid transparent; +} + +.nodeRowCompact { + height: 32px; +} + +.nodeRow:hover { + background: #f0f4ff; +} + +.nodeRowSelected { + background: rgba(var(--color-secondary-rgb), 0.08); +} + +.nodeRowSelected:hover { + background: rgba(var(--color-secondary-rgb), 0.12); +} + +.nodeRowFocused { + box-shadow: inset 0 0 0 2px rgba(var(--color-secondary-rgb), 0.3); + border-radius: 2px; +} + +.nodeRowDragOver { + background: rgba(var(--color-secondary-rgb), 0.06); + border: 1px dashed var(--color-secondary); + border-radius: 4px; +} + +.nodeRowDragging { + opacity: 0.5; +} + +.nodeRowOrphan { + border-left: 2px solid #f59e0b; +} + +/* Indent spacer */ +.indentSpacer { + flex-shrink: 0; +} + +/* Checkbox */ +.nodeCheckbox { + flex-shrink: 0; + width: 14px; + height: 14px; + cursor: pointer; + accent-color: var(--color-secondary); + margin: 0; +} + +/* Expand/collapse chevron */ +.expandChevron { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + font-size: 10px; + color: var(--color-text-secondary, #64748b); + cursor: pointer; + flex-shrink: 0; + border-radius: 3px; + transition: transform 0.15s ease, background 0.15s ease; +} + +.expandChevron:hover { + background: rgba(0, 0, 0, 0.06); +} + +.expandChevronExpanded { + transform: rotate(90deg); +} + +.expandChevronPlaceholder { + width: 18px; + flex-shrink: 0; +} + +/* Node icon */ +.nodeIcon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + font-size: 14px; + color: var(--color-text-secondary, #64748b); + flex-shrink: 0; +} + +/* Node name */ +.nodeName { + flex: 1; + font-size: 13px; + color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +/* File size column */ +.nodeSize { + width: 52px; + flex-shrink: 0; + font-size: 10px; + color: var(--color-text-muted, #94a3b8); + text-align: right; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +/* Orphan badge */ +.orphanBadge { + display: inline-flex; + align-items: center; + font-size: 10px; + color: #f59e0b; + margin-left: 2px; + flex-shrink: 0; +} + +/* Inline rename input */ +.renameInput { + flex: 1; + font-size: 13px; + font-family: var(--font-family); + padding: 2px 6px; + border: 1px solid var(--color-secondary); + border-radius: 4px; + background: var(--color-bg); + color: var(--color-text); + outline: none; + box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb), 0.15); + min-width: 0; +} + +/* Hover action icons (download, delete) -- only visible on hover, left of persistent */ +.nodeActionsHover { + display: flex; + align-items: center; + gap: 2px; + flex-shrink: 0; + opacity: 0; + transition: opacity 0.15s ease; +} + +.nodeRow:hover .nodeActionsHover { + opacity: 1; +} + +/* Persistent action icons (scope, neutralize) -- always visible, right-aligned */ +.nodeActionsPersistent { + display: flex; + align-items: center; + gap: 0; + flex-shrink: 0; + margin-left: auto; +} + +.nodeActionBtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: none; + border-radius: 4px; + background: transparent; + color: var(--color-text-secondary, #94a3b8); + font-size: 14px; + cursor: pointer; + transition: all 0.15s ease; + padding: 0; +} + +.nodeActionBtn:hover { + background: rgba(0, 0, 0, 0.06); + color: var(--color-text, #334155); +} + +.nodeActionBtnDanger:hover { + background: rgba(220, 38, 38, 0.08); + color: #dc2626; +} + +/* Emoji button (scope, neutralize) -- matches SourcesTab style */ +.emojiBtn { + background: none; + border: none; + cursor: pointer; + font-size: 12px; + padding: 0 2px; + line-height: 1; + flex-shrink: 0; + width: 22px; + text-align: center; +} + +.emojiBtnReadonly { + cursor: default; + opacity: 0.35; +} + +/* Loading */ +.loadingState { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 32px 16px; + color: var(--color-text-secondary, #64748b); +} + +.loadingSpinner { + width: 24px; + height: 24px; + border: 2px solid var(--color-border, #e2e8f0); + border-top: 2px solid var(--color-text-secondary, #64748b); + border-radius: 50%; + animation: spin 0.8s linear infinite; + margin-bottom: 8px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.nodeLoadingIndicator { + font-size: 10px; + color: var(--color-text-secondary, #94a3b8); + padding: 4px 0; + padding-left: 24px; +} + +/* Empty state */ +.emptyState { + display: flex; + align-items: center; + justify-content: center; + padding: 32px 16px; +} + +.emptyMessage { + text-align: center; + color: var(--color-text); + opacity: 0.5; + font-size: 13px; + line-height: 1.5; +} + +/* Compact mode */ +.compactMode .sectionHeader { + padding: 6px 8px; +} + +.compactMode .sectionTitle { + font-size: 11px; +} + +.compactMode .treeWrapper { + border: none; + box-shadow: none; +} + +.compactMode .nodeRow { + padding: 0 6px; +} + +.compactMode .nodeName { + font-size: 12px; +} + +/* Dark theme */ +@media (prefers-color-scheme: dark) { + .sectionHeader { + background: #2d3038; + } + + .sectionHeader:hover { + background: #363a42; + } + + .sectionHeaderNonCollapsible:hover { + background: #2d3038; + } + + .nodeRow:hover { + background: rgba(124, 109, 216, 0.08); + } + + .nodeRowSelected { + background: rgba(var(--color-secondary-rgb), 0.15); + } + + .expandChevron:hover { + background: rgba(255, 255, 255, 0.08); + } + + .nodeActionBtn:hover { + background: rgba(255, 255, 255, 0.08); + color: var(--color-text, #e2e8f0); + } + + .nodeActionBtnDanger:hover { + background: rgba(220, 38, 38, 0.15); + } + + .batchToolbar { + background: #2d3038; + } + + .batchButton { + background: #363a42; + border-color: rgba(255, 255, 255, 0.1); + color: var(--color-text, #e2e8f0); + } + + .batchButton:hover { + background: #3e424b; + } +} + +/* Responsive */ +@media (max-width: 768px) { + .nodeRow { + height: 36px; + padding: 0 6px; + } + + .nodeName { + font-size: 12px; + } + + .nodeSize { + display: none; + } + + .nodeActionBtn { + width: 24px; + height: 24px; + font-size: 13px; + } + + .emojiBtn { + width: 24px; + font-size: 13px; + } + + .batchToolbar { + padding: 4px 8px; + flex-wrap: wrap; + } + + .batchButton { + padding: 3px 8px; + font-size: 11px; + } + + .filterInput { + font-size: 14px; + padding: 6px 24px 6px 8px; + } + + .sectionHeader { + padding: 8px; + } +} + +/* Touch devices: always show hover actions (no hover on touch) */ +@media (pointer: coarse) { + .nodeActionsHover { + opacity: 1; + } +} + +/* Accessibility */ +.nodeActionBtn:focus-visible, +.expandChevron:focus-visible { + outline: 2px solid var(--color-secondary); + outline-offset: 1px; +} + +.nodeRow:focus-visible { + box-shadow: inset 0 0 0 2px rgba(var(--color-secondary-rgb), 0.3); +} diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx new file mode 100644 index 0000000..aa1bee9 --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx @@ -0,0 +1,930 @@ +import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react'; +import { + FaChevronRight, + FaUnlink, + FaSyncAlt, +} from 'react-icons/fa'; +import type { + TreeNode, + TreeNodeProvider, + FormGeneratorTreeProps, + Ownership, + ScopeValue, + TreeBatchAction, +} from './types'; +import styles from './FormGeneratorTree.module.css'; + +const INDENT_PX = 24; +const DRAG_MIME = 'application/x-poweron-tree-items'; + +const SCOPE_ORDER: ScopeValue[] = ['personal', 'featureInstance', 'mandate', 'global']; + +const _SCOPE_EMOJIS: Record = { + personal: '\uD83D\uDC64', + featureInstance: '\uD83D\uDC65', + mandate: '\uD83C\uDFE2', + global: '\uD83C\uDF10', +}; + +const _NEUTRALIZE_EMOJI = '\uD83D\uDD12'; + +function _nextScope(current: ScopeValue | undefined): ScopeValue { + const idx = SCOPE_ORDER.indexOf(current ?? 'personal'); + return SCOPE_ORDER[(idx + 1) % SCOPE_ORDER.length]; +} + +function _formatSize(bytes: number): string { + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`; + if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; + return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; +} + +interface FlatEntry { + node: TreeNode; + depth: number; + hasChildren: boolean; +} + +function _buildChildMap(nodes: TreeNode[]): Map[]> { + const map = new Map[]>(); + for (const n of nodes) { + const key = n.parentId ?? '__root__'; + const list = map.get(key); + if (list) list.push(n); + else map.set(key, [n]); + } + return map; +} + +function _flatten( + nodes: TreeNode[], + expandedIds: Set, +): FlatEntry[] { + const childMap = _buildChildMap(nodes); + const result: FlatEntry[] = []; + + const _walk = (parentKey: string | '__root__', depth: number) => { + const children = childMap.get(parentKey); + if (!children) return; + for (const node of children) { + const nodeChildren = childMap.get(node.id); + const hasChildren = (nodeChildren && nodeChildren.length > 0) || node.type === 'folder'; + result.push({ node, depth, hasChildren }); + if (hasChildren && expandedIds.has(node.id)) { + _walk(node.id, depth + 1); + } + } + }; + + _walk('__root__', 0); + return result; +} + +function _collectDescendantIds(nodeId: string, nodes: TreeNode[]): string[] { + const childMap = _buildChildMap(nodes); + const result: string[] = []; + const _walk = (id: string) => { + const children = childMap.get(id); + if (!children) return; + for (const child of children) { + result.push(child.id); + _walk(child.id); + } + }; + _walk(nodeId); + return result; +} + +interface TreeNodeRowProps { + entry: FlatEntry; + isSelected: boolean; + isFocused: boolean; + isExpanded: boolean; + isRenaming: boolean; + isDragOver: boolean; + isDragging: boolean; + ownership: Ownership; + compact: boolean; + provider: TreeNodeProvider; + onToggleExpand: (id: string) => void; + onToggleSelect: (id: string, e: React.MouseEvent) => void; + onNodeClick: (node: TreeNode) => void; + onStartRename: (id: string) => void; + onConfirmRename: (id: string, newName: string) => void; + onCancelRename: () => void; + onDelete: (id: string) => void; + onDownload: (node: TreeNode) => void; + onSendToChat?: (node: TreeNode) => void; + onCycleScope: (node: TreeNode) => void; + onToggleNeutralize: (node: TreeNode) => void; + onDragStart: (e: React.DragEvent, node: TreeNode) => void; + onDragOver: (e: React.DragEvent, node: TreeNode) => void; + onDragLeave: (e: React.DragEvent) => void; + onDrop: (e: React.DragEvent, node: TreeNode) => void; +} + +const TreeNodeRow = React.memo(function TreeNodeRow({ + entry, + isSelected, + isFocused, + isExpanded, + isRenaming, + isDragOver, + isDragging, + ownership, + compact, + provider, + onToggleExpand, + onToggleSelect, + onNodeClick, + onStartRename, + onConfirmRename, + onCancelRename, + onDelete, + onDownload, + onSendToChat, + onCycleScope, + onToggleNeutralize, + onDragStart, + onDragOver, + onDragLeave, + onDrop, +}: TreeNodeRowProps) { + const { node, depth, hasChildren } = entry; + const renameRef = useRef(null); + const [renameValue, setRenameValue] = useState(node.name); + + useEffect(() => { + if (isRenaming && renameRef.current) { + setRenameValue(node.name); + renameRef.current.focus(); + renameRef.current.select(); + } + }, [isRenaming, node.name]); + + const _handleRenameKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + onConfirmRename(node.id, renameValue.trim()); + } else if (e.key === 'Escape') { + e.preventDefault(); + onCancelRename(); + } + }, + [node.id, renameValue, onConfirmRename, onCancelRename], + ); + + const _handleRenameBlur = useCallback(() => { + onConfirmRename(node.id, renameValue.trim()); + }, [node.id, renameValue, onConfirmRename]); + + const _handleDoubleClick = useCallback( + (e: React.MouseEvent) => { + e.stopPropagation(); + if (ownership === 'own' && provider.canRename?.(node)) { + onStartRename(node.id); + } + }, + [ownership, provider, node, onStartRename], + ); + + const _handleRowClick = useCallback( + (e: React.MouseEvent) => { + onToggleSelect(node.id, e); + onNodeClick(node); + }, + [node, onToggleSelect, onNodeClick], + ); + + const _handleExpandClick = useCallback( + (e: React.MouseEvent) => { + e.stopPropagation(); + onToggleExpand(node.id); + }, + [node.id, onToggleExpand], + ); + + const isOwn = ownership === 'own'; + const canRename = isOwn && provider.canRename?.(node); + const canDelete = isOwn && provider.canDelete?.(node); + const canPatchScope = isOwn && provider.canPatchScope?.(node); + const canPatchNeutralize = isOwn && provider.canPatchNeutralize?.(node); + + const rowClasses = [ + styles.nodeRow, + compact && styles.nodeRowCompact, + isSelected && styles.nodeRowSelected, + isFocused && styles.nodeRowFocused, + isDragOver && styles.nodeRowDragOver, + isDragging && styles.nodeRowDragging, + node.contextOrphan && styles.nodeRowOrphan, + ] + .filter(Boolean) + .join(' '); + + return ( +
onDragStart(e, node)} + onDragOver={(e) => onDragOver(e, node)} + onDragLeave={onDragLeave} + onDrop={(e) => onDrop(e, node)} + data-node-id={node.id} + title={node.name} + role="treeitem" + aria-selected={isSelected} + aria-expanded={hasChildren ? isExpanded : undefined} + tabIndex={-1} + > +
+ + {}} + onClick={(e) => { + e.stopPropagation(); + onToggleSelect(node.id, e as unknown as React.MouseEvent); + }} + tabIndex={-1} + /> + + {hasChildren ? ( + + + + ) : ( + + )} + + {node.icon && {node.icon}} + + {isRenaming ? ( + setRenameValue(e.target.value)} + onKeyDown={_handleRenameKeyDown} + onBlur={_handleRenameBlur} + onClick={(e) => e.stopPropagation()} + /> + ) : ( + {node.name} + )} + + {node.contextOrphan && ( + + + + )} + + + {node.sizeBytes != null ? _formatSize(node.sizeBytes) : ''} + + +
+ {canRename && ( + + )} + + {node.type !== 'folder' && ( + + )} + + {canDelete && ( + + )} +
+ +
+ {onSendToChat && ( + + )} + + {node.scope !== undefined && ( + + )} + + {node.neutralize !== undefined && ( + + )} +
+
+ ); +}) as (props: TreeNodeRowProps) => React.ReactElement; + +export function FormGeneratorTree({ + provider, + ownership, + title, + compact = false, + collapsible = false, + defaultCollapsed = false, + emptyMessage, + showFilter = false, + onNodeClick, + onSelectionChange, + onRefresh, + onSendToChat, + className, +}: FormGeneratorTreeProps) { + const [nodes, setNodes] = useState[]>([]); + const [expandedIds, setExpandedIds] = useState>(new Set()); + const [selectedIds, setSelectedIds] = useState>(new Set()); + const [renamingId, setRenamingId] = useState(null); + const [loading, setLoading] = useState(true); + const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed); + const [focusedId, setFocusedId] = useState(null); + const [dragOverId, setDragOverId] = useState(null); + const [draggingIds, setDraggingIds] = useState>(new Set()); + const [filterText, setFilterText] = useState(''); + const lastSelectedIdRef = useRef(null); + const treeContentRef = useRef(null); + + const _loadRoot = useCallback(async () => { + setLoading(true); + try { + const rootNodes = await provider.loadChildren(null, ownership); + setNodes(rootNodes); + if (defaultCollapsed && rootNodes.length === 0) { + setSectionCollapsed(true); + } + } finally { + setLoading(false); + } + }, [provider, ownership, defaultCollapsed]); + + useEffect(() => { + _loadRoot(); + }, [_loadRoot]); + + const flatEntriesRaw = useMemo(() => _flatten(nodes, expandedIds), [nodes, expandedIds]); + + const flatEntries = useMemo(() => { + const term = filterText.trim().toLowerCase(); + if (!term) return flatEntriesRaw; + const matchIds = new Set(); + for (const entry of flatEntriesRaw) { + if (entry.node.name.toLowerCase().includes(term)) { + matchIds.add(entry.node.id); + let pid = entry.node.parentId; + while (pid) { + matchIds.add(pid); + const parent = nodes.find((n) => n.id === pid); + pid = parent?.parentId ?? null; + } + } + } + return flatEntriesRaw.filter((e) => matchIds.has(e.node.id)); + }, [flatEntriesRaw, filterText, nodes]); + + const _updateSelection = useCallback( + (newSelection: Set) => { + setSelectedIds(newSelection); + onSelectionChange?.(newSelection); + }, + [onSelectionChange], + ); + + const _handleToggleExpand = useCallback( + async (id: string) => { + setExpandedIds((prev) => { + const next = new Set(prev); + if (next.has(id)) { + next.delete(id); + } else { + next.add(id); + } + return next; + }); + + const node = nodes.find((n) => n.id === id); + if (node && !expandedIds.has(id)) { + const childMap = _buildChildMap(nodes); + const existingChildren = childMap.get(id); + if (!existingChildren || existingChildren.length === 0) { + const childNodes = await provider.loadChildren(id, ownership); + if (childNodes.length > 0) { + setNodes((prev) => [...prev, ...childNodes]); + } + } + } + }, + [nodes, expandedIds, provider, ownership], + ); + + const _handleToggleSelect = useCallback( + (id: string, e: React.MouseEvent) => { + const newSelection = new Set(selectedIds); + + if (e.shiftKey && lastSelectedIdRef.current) { + const visibleIds = flatEntries.map((entry) => entry.node.id); + const lastIdx = visibleIds.indexOf(lastSelectedIdRef.current); + const curIdx = visibleIds.indexOf(id); + if (lastIdx !== -1 && curIdx !== -1) { + const start = Math.min(lastIdx, curIdx); + const end = Math.max(lastIdx, curIdx); + for (let i = start; i <= end; i++) { + newSelection.add(visibleIds[i]); + } + } + } else if (e.ctrlKey || e.metaKey) { + if (newSelection.has(id)) { + newSelection.delete(id); + const descendantIds = _collectDescendantIds(id, nodes); + for (const did of descendantIds) newSelection.delete(did); + } else { + newSelection.add(id); + if (ownership === 'own') { + const descendantIds = _collectDescendantIds(id, nodes); + for (const did of descendantIds) newSelection.add(did); + } + } + } else { + const wasSelected = newSelection.has(id) && newSelection.size === 1; + newSelection.clear(); + if (!wasSelected) { + newSelection.add(id); + if (ownership === 'own') { + const node = nodes.find((n) => n.id === id); + if (node?.type === 'folder') { + const descendantIds = _collectDescendantIds(id, nodes); + for (const did of descendantIds) newSelection.add(did); + } + } + } + } + + lastSelectedIdRef.current = id; + _updateSelection(newSelection); + }, + [selectedIds, flatEntries, nodes, ownership, _updateSelection], + ); + + const _handleNodeClick = useCallback( + (node: TreeNode) => { + setFocusedId(node.id); + onNodeClick?.(node); + }, + [onNodeClick], + ); + + const _handleStartRename = useCallback((id: string) => { + setRenamingId(id); + }, []); + + const _handleConfirmRename = useCallback( + async (id: string, newName: string) => { + setRenamingId(null); + if (!newName) return; + const node = nodes.find((n) => n.id === id); + if (!node || node.name === newName) return; + await provider.renameNode?.(id, newName); + setNodes((prev) => prev.map((n) => (n.id === id ? { ...n, name: newName } : n))); + }, + [nodes, provider], + ); + + const _handleCancelRename = useCallback(() => { + setRenamingId(null); + }, []); + + const _handleRefresh = useCallback(async () => { + await _loadRoot(); + _updateSelection(new Set()); + onRefresh?.(); + }, [_loadRoot, _updateSelection, onRefresh]); + + const _handleDelete = useCallback( + async (id: string) => { + const node = nodes.find((n) => n.id === id); + const label = node?.name ?? id; + if (!window.confirm(`"${label}" wirklich loeschen?`)) return; + await provider.deleteNodes?.([id]); + setNodes((prev) => { + const toRemove = new Set([id, ..._collectDescendantIds(id, prev)]); + return prev.filter((n) => !toRemove.has(n.id)); + }); + _updateSelection(new Set([...selectedIds].filter((sid) => sid !== id))); + }, + [provider, selectedIds, nodes, _updateSelection], + ); + + const _handleDownload = useCallback( + async (node: TreeNode) => { + await provider.downloadNode?.(node); + }, + [provider], + ); + + const _handleCycleScope = useCallback( + async (node: TreeNode) => { + const newScope = _nextScope(node.scope); + await provider.patchScope?.([node.id], newScope); + setNodes((prev) => + prev.map((n) => (n.id === node.id ? { ...n, scope: newScope } : n)), + ); + }, + [provider], + ); + + const _handleToggleNeutralize = useCallback( + async (node: TreeNode) => { + const newValue = !node.neutralize; + await provider.patchNeutralize?.([node.id], newValue); + setNodes((prev) => + prev.map((n) => (n.id === node.id ? { ...n, neutralize: newValue } : n)), + ); + }, + [provider], + ); + + const _handleDragStart = useCallback( + (e: React.DragEvent, node: TreeNode) => { + const dragIds = selectedIds.has(node.id) ? [...selectedIds] : [node.id]; + const payload = dragIds.map((id) => { + const n = nodes.find((nd) => nd.id === id); + return { id, type: n?.type ?? '', name: n?.name ?? '', providerKey: provider.rootKey }; + }); + e.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload)); + + const chatPayload = dragIds.map((id) => { + const n = nodes.find((nd) => nd.id === id); + return { id, type: n?.type === 'folder' ? 'group' : 'file', name: n?.name ?? '' }; + }); + e.dataTransfer.setData('application/tree-items', JSON.stringify(chatPayload)); + e.dataTransfer.setData('text/plain', chatPayload.map((p) => p.name).join(', ')); + + e.dataTransfer.effectAllowed = 'copyMove'; + setDraggingIds(new Set(dragIds)); + }, + [selectedIds, nodes, provider.rootKey], + ); + + const _handleDragOver = useCallback( + (e: React.DragEvent, node: TreeNode) => { + if (ownership === 'shared') return; + if (draggingIds.size === 0) return; + if (draggingIds.has(node.id)) return; + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + setDragOverId(node.id); + }, + [ownership, draggingIds], + ); + + const _handleDragLeave = useCallback(() => { + setDragOverId(null); + }, []); + + const _handleDrop = useCallback( + async (e: React.DragEvent, targetNode: TreeNode) => { + setDragOverId(null); + + const raw = e.dataTransfer.getData(DRAG_MIME); + if (!raw) return; + + e.preventDefault(); + e.stopPropagation(); + setDraggingIds(new Set()); + + if (ownership === 'shared') return; + + try { + const items = JSON.parse(raw) as { id: string }[]; + const ids = items.map((it) => it.id); + + const canMove = ids.every((id) => { + const sourceNode = nodes.find((n) => n.id === id); + return sourceNode && provider.canMove?.(sourceNode, targetNode); + }); + + if (!canMove) return; + + await provider.moveNodes?.(ids, targetNode.id); + setNodes((prev) => + prev.map((n) => (ids.includes(n.id) ? { ...n, parentId: targetNode.id } : n)), + ); + } catch { + // invalid drag payload + } + }, + [ownership, nodes, provider], + ); + + const _handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (!focusedId) return; + const idx = flatEntries.findIndex((entry) => entry.node.id === focusedId); + if (idx === -1) return; + + switch (e.key) { + case 'ArrowDown': { + e.preventDefault(); + if (idx < flatEntries.length - 1) { + const nextId = flatEntries[idx + 1].node.id; + setFocusedId(nextId); + _scrollToNode(nextId); + } + break; + } + case 'ArrowUp': { + e.preventDefault(); + if (idx > 0) { + const prevId = flatEntries[idx - 1].node.id; + setFocusedId(prevId); + _scrollToNode(prevId); + } + break; + } + case 'ArrowRight': { + e.preventDefault(); + const entry = flatEntries[idx]; + if (entry.hasChildren && !expandedIds.has(entry.node.id)) { + _handleToggleExpand(entry.node.id); + } + break; + } + case 'ArrowLeft': { + e.preventDefault(); + const entry = flatEntries[idx]; + if (expandedIds.has(entry.node.id)) { + _handleToggleExpand(entry.node.id); + } else if (entry.node.parentId) { + setFocusedId(entry.node.parentId); + _scrollToNode(entry.node.parentId); + } + break; + } + case 'Enter': { + e.preventDefault(); + _handleToggleSelect(focusedId, e as unknown as React.MouseEvent); + break; + } + case 'F2': { + e.preventDefault(); + const node = nodes.find((n) => n.id === focusedId); + if (node && ownership === 'own' && provider.canRename?.(node)) { + _handleStartRename(focusedId); + } + break; + } + case 'Delete': { + e.preventDefault(); + const node = nodes.find((n) => n.id === focusedId); + if (node && ownership === 'own' && provider.canDelete?.(node)) { + _handleDelete(focusedId); + } + break; + } + } + }, + [ + focusedId, + flatEntries, + expandedIds, + nodes, + ownership, + provider, + _handleToggleExpand, + _handleToggleSelect, + _handleStartRename, + _handleDelete, + ], + ); + + const _scrollToNode = useCallback((nodeId: string) => { + const el = treeContentRef.current?.querySelector(`[data-node-id="${nodeId}"]`); + el?.scrollIntoView({ block: 'nearest' }); + }, []); + + const batchActions = useMemo(() => { + const actions = provider.getBatchActions?.() ?? []; + return actions.filter( + (a: TreeBatchAction) => !a.ownershipFilter || a.ownershipFilter === ownership, + ); + }, [provider, ownership]); + + const _filteredIdsForAction = useCallback( + (action: TreeBatchAction): string[] => { + const ids = [...selectedIds]; + if (!action.typeFilter) return ids; + return ids.filter((id) => { + const node = nodes.find((n) => n.id === id); + return node?.type === action.typeFilter; + }); + }, + [selectedIds, nodes], + ); + + const totalNodeCount = nodes.filter((n) => n.parentId === null).length; + + const wrapperClasses = [ + styles.formGeneratorTree, + compact && styles.compactMode, + className, + ] + .filter(Boolean) + .join(' '); + + return ( +
+ {title && ( +
setSectionCollapsed((v) => !v) : undefined} + > + {collapsible && ( + + + + )} + {title} + {totalNodeCount} + +
+ )} + + {(!collapsible || !sectionCollapsed) && ( +
+ {showFilter && ( +
+ setFilterText(e.target.value)} + /> + {filterText && ( + + )} +
+ )} + + {selectedIds.size > 0 && batchActions.length > 0 && ( +
+ {selectedIds.size} selected + {batchActions.map((action: TreeBatchAction) => { + const ids = _filteredIdsForAction(action); + if (ids.length === 0) return null; + return ( + + ); + })} +
+ )} + +
+ {loading ? ( +
+
+
+ ) : flatEntries.length === 0 ? ( +
+ + {emptyMessage ?? 'No items'} + +
+ ) : ( + flatEntries.map((entry) => ( + + key={entry.node.id} + entry={entry} + isSelected={selectedIds.has(entry.node.id)} + isFocused={focusedId === entry.node.id} + isExpanded={expandedIds.has(entry.node.id)} + isRenaming={renamingId === entry.node.id} + isDragOver={dragOverId === entry.node.id} + isDragging={draggingIds.has(entry.node.id)} + ownership={ownership} + compact={compact} + provider={provider} + onToggleExpand={_handleToggleExpand} + onToggleSelect={_handleToggleSelect} + onNodeClick={_handleNodeClick} + onStartRename={_handleStartRename} + onConfirmRename={_handleConfirmRename} + onCancelRename={_handleCancelRename} + onDelete={_handleDelete} + onDownload={_handleDownload} + onSendToChat={onSendToChat} + onCycleScope={_handleCycleScope} + onToggleNeutralize={_handleToggleNeutralize} + onDragStart={_handleDragStart} + onDragOver={_handleDragOver} + onDragLeave={_handleDragLeave} + onDrop={_handleDrop} + /> + )) + )} +
+
+ )} +
+ ); +} + +export default FormGeneratorTree; diff --git a/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx b/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx new file mode 100644 index 0000000..1835c9e --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx @@ -0,0 +1,683 @@ +// Copyright (c) 2026 Patrick Motsch +// All rights reserved. + +import { describe, expect, it, vi, beforeEach } from 'vitest'; +import { render, screen, waitFor, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { FormGeneratorTree } from '../FormGeneratorTree'; +import type { TreeNode, TreeNodeProvider, TreeBatchAction } from '../types'; + +// --------------------------------------------------------------------------- +// Fixtures +// --------------------------------------------------------------------------- + +const _ownFolder: TreeNode = { + id: 'f1', + name: 'My Folder', + type: 'folder', + parentId: null, + ownership: 'own', + scope: 'personal', + neutralize: false, +}; + +const _ownFile: TreeNode = { + id: 'file1', + name: 'doc.pdf', + type: 'file', + parentId: 'f1', + ownership: 'own', + scope: 'personal', + neutralize: false, +}; + +const _sharedFolder: TreeNode = { + id: 'sf1', + name: 'Shared Folder', + type: 'folder', + parentId: null, + ownership: 'shared', + scope: 'mandate', + neutralize: false, +}; + +const _orphanFile: TreeNode = { + id: 'of1', + name: 'orphan.txt', + type: 'file', + parentId: null, + ownership: 'shared', + scope: 'mandate', + contextOrphan: true, +}; + +// --------------------------------------------------------------------------- +// Mock Provider Factory +// --------------------------------------------------------------------------- + +function _createMockProvider(nodes: TreeNode[]): TreeNodeProvider { + return { + rootKey: 'test', + loadChildren: vi.fn(async (parentId) => + nodes.filter((n) => n.parentId === parentId), + ), + canCreate: vi.fn(() => true), + canRename: vi.fn((node) => node.ownership === 'own'), + canDelete: vi.fn((node) => node.ownership === 'own'), + canMove: vi.fn(() => true), + canPatchScope: vi.fn((node) => node.ownership === 'own'), + canPatchNeutralize: vi.fn((node) => node.ownership === 'own'), + createChild: vi.fn(async (parentId, name) => ({ + id: 'new-1', + name, + type: 'folder', + parentId, + ownership: 'own' as const, + scope: 'personal' as const, + })), + renameNode: vi.fn(async () => {}), + deleteNodes: vi.fn(async () => {}), + moveNodes: vi.fn(async () => {}), + patchScope: vi.fn(async () => {}), + patchNeutralize: vi.fn(async () => {}), + getBatchActions: vi.fn(() => []), + }; +} + +// --------------------------------------------------------------------------- +// Rendering +// --------------------------------------------------------------------------- + +describe('FormGeneratorTree', () => { + describe('Rendering', () => { + it('renders tree with title and node count', async () => { + const provider = _createMockProvider([_ownFolder]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('Documents')).toBeInTheDocument(); + }); + expect(screen.getByText('1')).toBeInTheDocument(); + }); + + it('shows loading spinner while loading', () => { + const provider = _createMockProvider([]); + provider.loadChildren = vi.fn(() => new Promise(() => {})); // never resolves + render(); + + const tree = screen.getByRole('tree'); + expect(tree.querySelector('[class*="loadingSpinner"]')).toBeInTheDocument(); + }); + + it('shows empty message when no nodes', async () => { + const provider = _createMockProvider([]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('Nothing here')).toBeInTheDocument(); + }); + }); + + it('shows default empty message when no custom message', async () => { + const provider = _createMockProvider([]); + render(); + + await waitFor(() => { + expect(screen.getByText('No items')).toBeInTheDocument(); + }); + }); + + it('renders nodes with correct names', async () => { + const provider = _createMockProvider([_ownFolder, _sharedFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + it('renders nested nodes with indentation when folder expanded', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder, _ownFile]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + const expandBtn = screen.getByRole('treeitem', { name: /My Folder/i }) + .querySelector('[role="button"]')!; + await user.click(expandBtn); + + await waitFor(() => { + expect(screen.getByText('doc.pdf')).toBeInTheDocument(); + }); + }); + + it('shows contextOrphan badge for orphan nodes', async () => { + const provider = _createMockProvider([_orphanFile]); + render(); + + await waitFor(() => { + expect(screen.getByText('orphan.txt')).toBeInTheDocument(); + }); + expect(screen.getByTitle('Context orphan')).toBeInTheDocument(); + }); + }); + + // --------------------------------------------------------------------------- + // Selection + // --------------------------------------------------------------------------- + + describe('Selection', () => { + it('click selects a node', async () => { + const user = userEvent.setup(); + const onSelectionChange = vi.fn(); + const provider = _createMockProvider([_ownFolder]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); + + expect(onSelectionChange).toHaveBeenCalledWith( + expect.objectContaining({ has: expect.any(Function) }), + ); + const lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set; + expect(lastCall.has('f1')).toBe(true); + }); + + it('ctrl+click adds to selection', async () => { + const user = userEvent.setup(); + const onSelectionChange = vi.fn(); + const secondNode: TreeNode = { + id: 'f2', + name: 'Other Folder', + type: 'folder', + parentId: null, + ownership: 'own', + scope: 'personal', + }; + const provider = _createMockProvider([_ownFolder, secondNode]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); + await user.click(screen.getByRole('treeitem', { name: /Other Folder/i }), { + ctrlKey: true, + }); + + const lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set; + expect(lastCall.has('f1')).toBe(true); + expect(lastCall.has('f2')).toBe(true); + }); + + it('click on selected folder cascades deselect of descendants (own)', async () => { + const user = userEvent.setup(); + const onSelectionChange = vi.fn(); + const provider = _createMockProvider([_ownFolder, _ownFile]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + // Expand folder first + const expandBtn = screen.getByRole('treeitem', { name: /My Folder/i }) + .querySelector('[role="button"]')!; + await user.click(expandBtn); + + await waitFor(() => { + expect(screen.getByText('doc.pdf')).toBeInTheDocument(); + }); + + // Select folder (cascades to children in own mode) + await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); + + let lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set; + expect(lastCall.has('f1')).toBe(true); + expect(lastCall.has('file1')).toBe(true); + + // Click again to deselect + await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); + + lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set; + expect(lastCall.has('f1')).toBe(false); + expect(lastCall.has('file1')).toBe(false); + }); + + it('selection in shared tree does NOT cascade to children', async () => { + const user = userEvent.setup(); + const onSelectionChange = vi.fn(); + const sharedChild: TreeNode = { + id: 'sc1', + name: 'child.txt', + type: 'file', + parentId: 'sf1', + ownership: 'shared', + scope: 'mandate', + }; + const provider = _createMockProvider([_sharedFolder, sharedChild]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + // Expand folder + const expandBtn = screen.getByRole('treeitem', { name: /Shared Folder/i }) + .querySelector('[role="button"]')!; + await user.click(expandBtn); + + await waitFor(() => { + expect(screen.getByText('child.txt')).toBeInTheDocument(); + }); + + // Click folder in shared mode + await user.click(screen.getByRole('treeitem', { name: /Shared Folder/i })); + + const lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set; + expect(lastCall.has('sf1')).toBe(true); + expect(lastCall.has('sc1')).toBe(false); + }); + }); + + // --------------------------------------------------------------------------- + // Expand/Collapse + // --------------------------------------------------------------------------- + + describe('Expand/Collapse', () => { + it('clicking chevron expands folder and loads children lazily', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder, _ownFile]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + expect(screen.queryByText('doc.pdf')).not.toBeInTheDocument(); + + const row = screen.getByRole('treeitem', { name: /My Folder/i }); + const expandBtn = row.querySelector('[role="button"]')!; + await user.click(expandBtn); + + await waitFor(() => { + expect(screen.getByText('doc.pdf')).toBeInTheDocument(); + }); + + expect(provider.loadChildren).toHaveBeenCalledWith('f1', 'own'); + }); + + it('clicking expanded folder collapses it', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder, _ownFile]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + const row = screen.getByRole('treeitem', { name: /My Folder/i }); + const expandBtn = row.querySelector('[role="button"]')!; + + // Expand + await user.click(expandBtn); + await waitFor(() => { + expect(screen.getByText('doc.pdf')).toBeInTheDocument(); + }); + + // Collapse + await user.click(expandBtn); + await waitFor(() => { + expect(screen.queryByText('doc.pdf')).not.toBeInTheDocument(); + }); + }); + }); + + // --------------------------------------------------------------------------- + // Inline Rename + // --------------------------------------------------------------------------- + + describe('Inline Rename', () => { + it('double-click on own node starts rename', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + await user.dblClick(screen.getByRole('treeitem', { name: /My Folder/i })); + + await waitFor(() => { + expect(screen.getByDisplayValue('My Folder')).toBeInTheDocument(); + }); + }); + + it('enter confirms rename and calls provider.renameNode', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + await user.dblClick(screen.getByRole('treeitem', { name: /My Folder/i })); + + const input = await screen.findByDisplayValue('My Folder'); + await user.clear(input); + await user.type(input, 'Renamed{Enter}'); + + await waitFor(() => { + expect(provider.renameNode).toHaveBeenCalledWith('f1', 'Renamed'); + }); + }); + + it('escape cancels rename', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + await user.dblClick(screen.getByRole('treeitem', { name: /My Folder/i })); + + const input = await screen.findByDisplayValue('My Folder'); + await user.type(input, '{Escape}'); + + await waitFor(() => { + expect(screen.queryByDisplayValue('My Folder')).not.toBeInTheDocument(); + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + expect(provider.renameNode).not.toHaveBeenCalled(); + }); + + it('double-click on shared node does NOT start rename', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_sharedFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + await user.dblClick(screen.getByRole('treeitem', { name: /Shared Folder/i })); + + expect(screen.queryByDisplayValue('Shared Folder')).not.toBeInTheDocument(); + }); + }); + + // --------------------------------------------------------------------------- + // Delete + // --------------------------------------------------------------------------- + + describe('Delete', () => { + it('delete button calls provider.deleteNodes', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + const row = screen.getByRole('treeitem', { name: /My Folder/i }); + const deleteBtn = within(row).getByTitle('Delete'); + await user.click(deleteBtn); + + await waitFor(() => { + expect(provider.deleteNodes).toHaveBeenCalledWith(['f1']); + }); + }); + + it('no delete button shown for shared nodes', async () => { + const provider = _createMockProvider([_sharedFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + const row = screen.getByRole('treeitem', { name: /Shared Folder/i }); + expect(within(row).queryByTitle('Delete')).not.toBeInTheDocument(); + }); + }); + + // --------------------------------------------------------------------------- + // Scope Cycling + // --------------------------------------------------------------------------- + + describe('Scope Cycling', () => { + it('clicking scope icon cycles through values', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + const scopeBtn = screen.getByTitle('Scope: personal'); + await user.click(scopeBtn); + + await waitFor(() => { + expect(provider.patchScope).toHaveBeenCalledWith( + ['f1'], + 'featureInstance', + ); + }); + }); + + it('scope icon is readonly in shared tree', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_sharedFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + const scopeBtn = screen.getByTitle('Scope: mandate'); + await user.click(scopeBtn); + + expect(provider.patchScope).not.toHaveBeenCalled(); + }); + }); + + // --------------------------------------------------------------------------- + // Neutralize Toggle + // --------------------------------------------------------------------------- + + describe('Neutralize Toggle', () => { + it('clicking neutralize icon toggles value', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + const neutralizeBtn = screen.getByTitle('Not neutralized'); + await user.click(neutralizeBtn); + + await waitFor(() => { + expect(provider.patchNeutralize).toHaveBeenCalledWith(['f1'], true); + }); + }); + + it('neutralize icon is readonly in shared tree', async () => { + const user = userEvent.setup(); + const sharedNodeWithNeutralize: TreeNode = { + ..._sharedFolder, + neutralize: false, + }; + const provider = _createMockProvider([sharedNodeWithNeutralize]); + render(); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + const neutralizeBtn = screen.getByTitle('Not neutralized'); + await user.click(neutralizeBtn); + + expect(provider.patchNeutralize).not.toHaveBeenCalled(); + }); + }); + + // --------------------------------------------------------------------------- + // Collapsible Section + // --------------------------------------------------------------------------- + + describe('Collapsible Section', () => { + it('section collapses when clicking header', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + await user.click(screen.getByText('Documents')); + + await waitFor(() => { + expect(screen.queryByText('My Folder')).not.toBeInTheDocument(); + }); + }); + + it('section expands when clicking header again', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render( + , + ); + + // Initially collapsed + expect(screen.queryByRole('tree')).not.toBeInTheDocument(); + + await user.click(screen.getByText('Documents')); + + await waitFor(() => { + expect(screen.getByRole('tree')).toBeInTheDocument(); + }); + }); + }); + + // --------------------------------------------------------------------------- + // Batch Actions + // --------------------------------------------------------------------------- + + describe('Batch Actions', () => { + it('batch toolbar appears when items selected', async () => { + const user = userEvent.setup(); + const batchAction: TreeBatchAction = { + key: 'export', + label: 'Export', + onClick: vi.fn(), + }; + const provider = _createMockProvider([_ownFolder]); + provider.getBatchActions = vi.fn(() => [batchAction]); + + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + + expect(screen.queryByText('Export')).not.toBeInTheDocument(); + + await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); + + await waitFor(() => { + expect(screen.getByText(/selected/i)).toBeInTheDocument(); + expect(screen.getByText('Export')).toBeInTheDocument(); + }); + }); + + it('batch actions filtered by ownership', async () => { + const user = userEvent.setup(); + const ownOnlyAction: TreeBatchAction = { + key: 'delete-all', + label: 'Delete All', + danger: true, + ownershipFilter: 'own', + onClick: vi.fn(), + }; + const provider = _createMockProvider([_sharedFolder]); + provider.getBatchActions = vi.fn(() => [ownOnlyAction]); + + render(); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + + await user.click(screen.getByRole('treeitem', { name: /Shared Folder/i })); + + // The action has ownershipFilter='own' but we're in 'shared' mode, so it's filtered out + await waitFor(() => { + const lastCall = provider.getBatchActions as ReturnType; + expect(lastCall).toHaveBeenCalled(); + }); + expect(screen.queryByText('Delete All')).not.toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx b/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx new file mode 100644 index 0000000..d40ff0c --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx @@ -0,0 +1,190 @@ +// Copyright (c) 2026 Patrick Motsch +// All rights reserved. + +import { describe, expect, it, vi } from 'vitest'; +import { render, screen, waitFor, fireEvent } from '@testing-library/react'; +import { FormGeneratorTree } from '../FormGeneratorTree'; +import type { TreeNode, TreeNodeProvider } from '../types'; + +// --------------------------------------------------------------------------- +// Fixtures +// --------------------------------------------------------------------------- + +const _ownFolder: TreeNode = { + id: 'f1', + name: 'Target Folder', + type: 'folder', + parentId: null, + ownership: 'own', + scope: 'personal', + neutralize: false, +}; + +const _ownFile: TreeNode = { + id: 'file1', + name: 'doc.pdf', + type: 'file', + parentId: null, + ownership: 'own', + scope: 'personal', + neutralize: false, +}; + +const _sharedFolder: TreeNode = { + id: 'sf1', + name: 'Shared Folder', + type: 'folder', + parentId: null, + ownership: 'shared', + scope: 'mandate', + neutralize: false, +}; + +const _sharedFile: TreeNode = { + id: 'sfile1', + name: 'shared.pdf', + type: 'file', + parentId: null, + ownership: 'shared', + scope: 'mandate', + neutralize: false, +}; + +// --------------------------------------------------------------------------- +// Mock Provider Factory +// --------------------------------------------------------------------------- + +function _createMockProvider(nodes: TreeNode[]): TreeNodeProvider { + return { + rootKey: 'test', + loadChildren: vi.fn(async (parentId) => + nodes.filter((n) => n.parentId === parentId), + ), + canCreate: vi.fn(() => true), + canRename: vi.fn((node) => node.ownership === 'own'), + canDelete: vi.fn((node) => node.ownership === 'own'), + canMove: vi.fn(() => true), + canPatchScope: vi.fn((node) => node.ownership === 'own'), + canPatchNeutralize: vi.fn((node) => node.ownership === 'own'), + createChild: vi.fn(async (parentId, name) => ({ + id: 'new-1', + name, + type: 'folder', + parentId, + ownership: 'own' as const, + scope: 'personal' as const, + })), + renameNode: vi.fn(async () => {}), + deleteNodes: vi.fn(async () => {}), + moveNodes: vi.fn(async () => {}), + patchScope: vi.fn(async () => {}), + patchNeutralize: vi.fn(async () => {}), + getBatchActions: vi.fn(() => []), + }; +} + +// --------------------------------------------------------------------------- +// Drag and Drop Helpers +// --------------------------------------------------------------------------- + +function _createDataTransfer(data: Record = {}): DataTransfer { + const store: Record = { ...data }; + return { + setData: vi.fn((type: string, val: string) => { + store[type] = val; + }), + getData: vi.fn((type: string) => store[type] ?? ''), + effectAllowed: 'uninitialized', + dropEffect: 'none', + clearData: vi.fn(), + items: [] as unknown as DataTransferItemList, + types: Object.keys(store), + files: [] as unknown as FileList, + setDragImage: vi.fn(), + } as unknown as DataTransfer; +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- + +describe('FormGeneratorTree - Drag and Drop', () => { + it('drag start sets MIME application/x-poweron-tree-items with correct payload', async () => { + const provider = _createMockProvider([_ownFile, _ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('doc.pdf')).toBeInTheDocument(); + }); + + const row = screen.getByRole('treeitem', { name: /doc\.pdf/i }); + const dataTransfer = _createDataTransfer(); + + fireEvent.dragStart(row, { dataTransfer }); + + expect(dataTransfer.setData).toHaveBeenCalledWith( + 'application/x-poweron-tree-items', + expect.any(String), + ); + + const payload = JSON.parse( + (dataTransfer.setData as ReturnType).mock.calls[0][1], + ); + expect(payload).toEqual([ + { + id: 'file1', + type: 'file', + name: 'doc.pdf', + providerKey: 'test', + }, + ]); + }); + + it('drop on folder calls provider.moveNodes', async () => { + const provider = _createMockProvider([_ownFile, _ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('doc.pdf')).toBeInTheDocument(); + }); + + const targetRow = screen.getByRole('treeitem', { name: /Target Folder/i }); + const dragPayload = JSON.stringify([ + { id: 'file1', type: 'file', name: 'doc.pdf', providerKey: 'test' }, + ]); + const dataTransfer = _createDataTransfer({ + 'application/x-poweron-tree-items': dragPayload, + }); + + fireEvent.dragOver(targetRow, { dataTransfer }); + fireEvent.drop(targetRow, { dataTransfer }); + + await waitFor(() => { + expect(provider.moveNodes).toHaveBeenCalledWith(['file1'], 'f1'); + }); + }); + + it('drop in shared tree is blocked (no move call)', async () => { + const provider = _createMockProvider([_sharedFile, _sharedFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('shared.pdf')).toBeInTheDocument(); + }); + + const targetRow = screen.getByRole('treeitem', { name: /Shared Folder/i }); + const dragPayload = JSON.stringify([ + { id: 'sfile1', type: 'file', name: 'shared.pdf', providerKey: 'test' }, + ]); + const dataTransfer = _createDataTransfer({ + 'application/x-poweron-tree-items': dragPayload, + }); + + fireEvent.dragOver(targetRow, { dataTransfer }); + fireEvent.drop(targetRow, { dataTransfer }); + + // In shared tree, the dragOver handler returns early without calling preventDefault + // so drop won't trigger moveNodes + expect(provider.moveNodes).not.toHaveBeenCalled(); + }); +}); diff --git a/src/components/FormGenerator/FormGeneratorTree/index.ts b/src/components/FormGenerator/FormGeneratorTree/index.ts new file mode 100644 index 0000000..8792d9b --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/index.ts @@ -0,0 +1,9 @@ +export { FormGeneratorTree } from './FormGeneratorTree'; +export type { + TreeNode, + TreeNodeProvider, + TreeBatchAction, + FormGeneratorTreeProps, + Ownership, + ScopeValue, +} from './types'; diff --git a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx new file mode 100644 index 0000000..ad8899b --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx @@ -0,0 +1,261 @@ +import { FaFolder, FaFile, FaTrash } from 'react-icons/fa'; +import type { TreeNodeProvider, TreeNode, Ownership, ScopeValue, TreeBatchAction } from '../types'; +import api from '../../../../api'; +import { getUserDataCache } from '../../../../utils/userCache'; + +interface FolderData { + id: string; + name: string; + parentId?: string | null; + scope?: ScopeValue; + neutralize?: boolean; + contextOrphan?: boolean; +} + +interface FileData { + id: string; + fileName: string; + folderId?: string | null; + fileSize?: number; + scope?: ScopeValue; + neutralize?: boolean; + contextOrphan?: boolean; + sysCreatedBy?: string; +} + +function _mapFolderToNode(folder: FolderData, ownership: Ownership): TreeNode { + return { + id: folder.id, + name: folder.name, + type: 'folder', + parentId: folder.parentId ?? null, + ownership, + scope: folder.scope, + neutralize: folder.neutralize, + contextOrphan: folder.contextOrphan, + icon: , + }; +} + +function _mapFileToNode(file: FileData, ownership: Ownership): TreeNode { + return { + id: file.id, + name: file.fileName, + type: 'file', + parentId: file.folderId ?? null, + ownership, + scope: file.scope, + neutralize: file.neutralize, + contextOrphan: file.contextOrphan, + sizeBytes: file.fileSize, + icon: , + }; +} + +export function createFolderFileProvider(): TreeNodeProvider { + const ownerParam = (ownership: Ownership) => (ownership === 'own' ? 'me' : 'shared'); + const typeMap = new Map(); + + function _trackTypes(nodes: TreeNode[]) { + for (const n of nodes) { + typeMap.set(n.id, n.type as 'folder' | 'file'); + } + } + + function _isFile(id: string): boolean { + return typeMap.get(id) === 'file'; + } + + return { + rootKey: 'files', + + async loadChildren(parentId, ownership) { + const owner = ownerParam(ownership); + const nodes: TreeNode[] = []; + + const foldersRes = await api.get('/api/files/folders/tree', { params: { owner } }); + const allFolders: FolderData[] = foldersRes.data ?? []; + const childFolders = allFolders.filter((f) => (f.parentId ?? null) === parentId); + nodes.push(...childFolders.map((f) => _mapFolderToNode(f, ownership))); + + try { + const filters: Record = {}; + if (parentId) { + filters.folderId = parentId; + } + const paginationParam = JSON.stringify({ filters, pageSize: 500 }); + const filesRes = await api.get('/api/files/list', { + params: { pagination: paginationParam }, + }); + const data = filesRes.data; + let rawFiles: FileData[] = []; + if (data && typeof data === 'object' && 'items' in data) { + rawFiles = Array.isArray(data.items) ? data.items : []; + } else if (Array.isArray(data)) { + rawFiles = data; + } + let matched = rawFiles.filter((f) => (f.folderId ?? null) === parentId); + if (ownership === 'shared') { + const myId = getUserDataCache()?.id; + if (myId) matched = matched.filter((f) => f.sysCreatedBy !== myId); + } + nodes.push(...matched.map((f) => _mapFileToNode(f, ownership))); + } catch { + // file list may fail for shared trees; folders still render + } + + _trackTypes(nodes); + return nodes; + }, + + canCreate() { + return true; + }, + + canRename(node) { + return node.ownership === 'own'; + }, + + canDelete(node) { + return node.ownership === 'own'; + }, + + canMove(source, target) { + if (source.ownership !== 'own') return false; + if (target && target.type !== 'folder') return false; + if (target && target.id === source.id) return false; + return true; + }, + + canPatchScope(node) { + return node.ownership === 'own'; + }, + + canPatchNeutralize(node) { + return node.ownership === 'own'; + }, + + async createChild(parentId, name) { + const res = await api.post('/api/files/folders', { name, parentId }); + return _mapFolderToNode(res.data, 'own'); + }, + + async renameNode(id, newName) { + if (_isFile(id)) { + await api.put(`/api/files/${id}`, { fileName: newName }); + } else { + await api.patch(`/api/files/folders/${id}`, { name: newName }); + } + }, + + async deleteNodes(ids) { + await Promise.all(ids.map((id) => { + if (_isFile(id)) return api.delete(`/api/files/${id}`); + return api.delete(`/api/files/folders/${id}`); + })); + }, + + async moveNodes(ids, targetParentId) { + await Promise.all( + ids.map((id) => { + if (_isFile(id)) return api.put(`/api/files/${id}`, { folderId: targetParentId }); + return api.post(`/api/files/folders/${id}/move`, { targetParentId }); + }), + ); + }, + + async patchScope(ids, scope, cascadeChildren) { + await Promise.all( + ids.map((id) => { + if (_isFile(id)) return api.patch(`/api/files/${id}/scope`, { scope }); + return api.patch(`/api/files/folders/${id}/scope`, { scope, cascadeChildren }); + }), + ); + }, + + async downloadNode(node) { + if (node.type === 'folder') return; + const res = await api.get(`/api/files/${node.id}/download`, { responseType: 'blob' }); + const url = window.URL.createObjectURL(res.data); + const a = document.createElement('a'); + a.href = url; + a.download = node.name; + a.click(); + window.URL.revokeObjectURL(url); + }, + + async patchNeutralize(ids, neutralize) { + await Promise.all( + ids.map((id) => { + if (_isFile(id)) return api.patch(`/api/files/${id}/neutralize`, { neutralize }); + return api.patch(`/api/files/folders/${id}/neutralize`, { neutralize }); + }), + ); + }, + + getBatchActions(): TreeBatchAction[] { + return [ + { + key: 'delete-folders', + label: 'Ordner', + icon: <>, + danger: true, + ownershipFilter: 'own', + typeFilter: 'folder', + async onClick(folderIds) { + await Promise.all(folderIds.map((id) => api.delete(`/api/files/folders/${id}`))); + }, + }, + { + key: 'delete-files', + label: 'Dateien', + icon: , + danger: true, + ownershipFilter: 'own', + typeFilter: 'file', + async onClick(fileIds) { + if (fileIds.length === 1) { + await api.delete(`/api/files/${fileIds[0]}`); + } else { + await api.post('/api/files/batch-delete', { fileIds }); + } + }, + }, + { + key: 'download', + label: 'Download', + async onClick(selectedIds) { + const folderIds = selectedIds.filter((id) => typeMap.get(id) === 'folder'); + const fileIds = selectedIds.filter((id) => typeMap.get(id) !== 'folder'); + + if (fileIds.length === 1 && folderIds.length === 0) { + const res = await api.get(`/api/files/${fileIds[0]}/download`, { responseType: 'blob' }); + const url = window.URL.createObjectURL(res.data); + const a = document.createElement('a'); + a.href = url; + const disposition = res.headers?.['content-disposition'] ?? ''; + const match = disposition.match(/filename\*?=(?:UTF-8'')?(.+)/i); + a.download = match ? decodeURIComponent(match[1]) : fileIds[0]; + a.click(); + window.URL.revokeObjectURL(url); + } else { + const res = await api.post( + '/api/files/batch-download', + { fileIds, folderIds }, + { responseType: 'blob' }, + ); + const url = window.URL.createObjectURL(res.data); + const a = document.createElement('a'); + a.href = url; + a.download = 'download.zip'; + a.click(); + window.URL.revokeObjectURL(url); + } + }, + }, + ]; + }, + }; +} + +export default createFolderFileProvider; diff --git a/src/components/FormGenerator/FormGeneratorTree/types.ts b/src/components/FormGenerator/FormGeneratorTree/types.ts new file mode 100644 index 0000000..12c1d47 --- /dev/null +++ b/src/components/FormGenerator/FormGeneratorTree/types.ts @@ -0,0 +1,64 @@ +export type Ownership = 'own' | 'shared'; + +export type ScopeValue = 'personal' | 'featureInstance' | 'mandate' | 'global'; + +export interface TreeNode { + id: string; + name: string; + type: string; + parentId: string | null; + ownership: Ownership; + scope?: ScopeValue; + neutralize?: boolean; + contextOrphan?: boolean; + icon?: React.ReactNode; + children?: TreeNode[]; + isLoading?: boolean; + sizeBytes?: number; + data?: T; +} + +export interface TreeBatchAction { + key: string; + label: string; + icon?: React.ReactNode; + danger?: boolean; + ownershipFilter?: Ownership; + typeFilter?: string; + onClick: (selectedIds: string[]) => void | Promise; +} + +export interface TreeNodeProvider { + rootKey: string; + loadChildren(parentId: string | null, ownership: Ownership): Promise[]>; + canCreate?(parentId: string | null): boolean; + canRename?(node: TreeNode): boolean; + canDelete?(node: TreeNode): boolean; + canMove?(source: TreeNode, target: TreeNode | null): boolean; + canPatchScope?(node: TreeNode): boolean; + canPatchNeutralize?(node: TreeNode): boolean; + createChild?(parentId: string | null, name: string): Promise>; + renameNode?(id: string, newName: string): Promise; + deleteNodes?(ids: string[]): Promise; + moveNodes?(ids: string[], targetParentId: string | null): Promise; + patchScope?(ids: string[], scope: ScopeValue, cascadeChildren?: boolean): Promise; + patchNeutralize?(ids: string[], neutralize: boolean): Promise; + downloadNode?(node: TreeNode): Promise; + getBatchActions?(): TreeBatchAction[]; +} + +export interface FormGeneratorTreeProps { + provider: TreeNodeProvider; + ownership: Ownership; + title?: string; + compact?: boolean; + collapsible?: boolean; + defaultCollapsed?: boolean; + emptyMessage?: string; + showFilter?: boolean; + onNodeClick?: (node: TreeNode) => void; + onSelectionChange?: (selectedIds: Set) => void; + onRefresh?: () => void; + onSendToChat?: (node: TreeNode) => void; + className?: string; +} diff --git a/src/components/FormGenerator/index.ts b/src/components/FormGenerator/index.ts index 24ccc3f..c1e59ab 100644 --- a/src/components/FormGenerator/index.ts +++ b/src/components/FormGenerator/index.ts @@ -4,6 +4,7 @@ export * from './FormGeneratorList'; export * from './FormGeneratorForm'; export * from './FormGeneratorControls'; export * from './FormGeneratorReport'; +export * from './FormGeneratorTree'; // Alias FormGeneratorTable as FormGenerator for backward compatibility export { FormGeneratorTable as FormGenerator, FormGeneratorTableComponent as FormGeneratorComponent } from './FormGeneratorTable'; diff --git a/src/components/UnifiedDataBar/ChatsTab.module.css b/src/components/UnifiedDataBar/ChatsTab.module.css index 44bd65b..5a17f68 100644 --- a/src/components/UnifiedDataBar/ChatsTab.module.css +++ b/src/components/UnifiedDataBar/ChatsTab.module.css @@ -311,3 +311,28 @@ color: #f3f4f6; } } + +/* Touch devices: always show action buttons */ +@media (pointer: coarse) { + .chatActions { + display: flex; + } +} + +/* Mobile portrait */ +@media (max-width: 480px) { + .chatItem { + padding: 8px 8px; + font-size: 0.9rem; + } + + .actionBtn { + padding: 4px 5px; + font-size: 0.85rem; + } + + .search { + font-size: 0.9rem; + padding: 8px 10px; + } +} diff --git a/src/components/UnifiedDataBar/FilesTab.module.css b/src/components/UnifiedDataBar/FilesTab.module.css index 7a48a75..d992368 100644 --- a/src/components/UnifiedDataBar/FilesTab.module.css +++ b/src/components/UnifiedDataBar/FilesTab.module.css @@ -93,3 +93,12 @@ border-top-color: var(--border-dark, #374151); } } + +/* Mobile portrait */ +@media (max-width: 480px) { + .legend { + gap: 8px; + font-size: 0.7rem; + padding: 6px 8px; + } +} diff --git a/src/components/UnifiedDataBar/FilesTab.tsx b/src/components/UnifiedDataBar/FilesTab.tsx index 75ba482..388ce93 100644 --- a/src/components/UnifiedDataBar/FilesTab.tsx +++ b/src/components/UnifiedDataBar/FilesTab.tsx @@ -1,29 +1,18 @@ -import React, { useCallback, useRef, useMemo } from 'react'; -import { FaFileImport, FaPaperPlane } from 'react-icons/fa'; +import React, { useCallback, useRef, useMemo, useState } from 'react'; +import { FaFileImport } from 'react-icons/fa'; import type { UdbContext } from './UnifiedDataBar'; import api from '../../api'; -import { useUserFiles, useFileOperations } from '../../hooks/useFiles'; import { useApiRequest } from '../../hooks/useApi'; import { importWorkflowFromFile, WORKFLOW_FILE_EXTENSION, } from '../../api/workflowApi'; import { useToast } from '../../contexts/ToastContext'; -import { FormGeneratorTable } from '../FormGenerator/FormGeneratorTable'; -import { ViewActionButton } from '../FormGenerator/ActionButtons/ViewActionButton'; -import actionBtnStyles from '../FormGenerator/ActionButtons/ActionButton.module.css'; +import { FormGeneratorTree } from '../FormGenerator/FormGeneratorTree'; +import { createFolderFileProvider } from '../FormGenerator/FormGeneratorTree/providers/FolderFileProvider'; +import type { TreeNode } from '../FormGenerator/FormGeneratorTree'; import styles from './FilesTab.module.css'; import { useLanguage } from '../../providers/language/LanguageContext'; -import type { TableGroupNode } from '../../api/connectionApi'; - -function _findGroupDisplayName(nodes: TableGroupNode[], groupId: string): string | null { - for (const n of nodes) { - if (n.id === groupId) return (n.name && n.name.trim()) || groupId; - const sub = _findGroupDisplayName(n.subGroups, groupId); - if (sub !== null) return sub; - } - return null; -} interface FilesTabProps { context: UdbContext; @@ -38,23 +27,24 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat const { t } = useLanguage(); const { request } = useApiRequest(); const { showSuccess, showError } = useToast(); - const [isDragOver, setIsDragOver] = React.useState(false); - const [uploading, setUploading] = React.useState(false); + const [isDragOver, setIsDragOver] = useState(false); + const [uploading, setUploading] = useState(false); const fileInputRef = useRef(null); - const { - data: files, - pagination, - loading, - refetch, - groupTree, - } = useUserFiles(); + const provider = useMemo(() => createFolderFileProvider(), []); + const [ownTreeKey, setOwnTreeKey] = useState(0); + const [sharedTreeKey, setSharedTreeKey] = useState(0); - const { handleFileDelete, previewingFiles } = useFileOperations() as any; + const _handleNodeClick = useCallback((node: TreeNode) => { + if (node.type === 'file') { + onFileSelect?.(node.id, node.name); + } + }, [onFileSelect]); - const _tableRefetch = useCallback(async (params?: any) => { - await refetch(params); - }, [refetch]); + const _handleRefresh = useCallback(() => { + setOwnTreeKey(k => k + 1); + setSharedTreeKey(k => k + 1); + }, []); const _uploadFiles = useCallback(async (fileList: FileList | File[]) => { if (!context.instanceId || uploading) return; @@ -68,13 +58,13 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat headers: { 'Content-Type': 'multipart/form-data' }, }); } - await _tableRefetch(); + _handleRefresh(); } catch (err) { console.error('File upload failed:', err); } finally { setUploading(false); } - }, [context.instanceId, uploading, _tableRefetch]); + }, [context.instanceId, uploading, _handleRefresh]); const _handleDragOver = useCallback((e: React.DragEvent) => { if (e.dataTransfer.types.includes('Files')) { @@ -106,76 +96,36 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat } }, [_uploadFiles]); + /* Workflow import is only available when embedded in the graph editor */ + const _handleWorkflowImport = useCallback(async (fileId: string, fileName: string) => { + if (context.surface !== 'graphEditor' || !context.instanceId) return; + if (!fileName?.toLowerCase().endsWith(WORKFLOW_FILE_EXTENSION)) return; + try { + const result = await importWorkflowFromFile(request, context.instanceId, { fileId }); + const warnings = result?.warnings ?? []; + const wfId = result?.workflow?.id; + if (warnings.length > 0) { + showSuccess(t('Workflow importiert ({n} Warnungen).', { n: String(warnings.length) })); + } else { + showSuccess(t('Workflow importiert (deaktiviert).')); + } + if (wfId && onWorkflowImported) onWorkflowImported(wfId); + } catch (e: unknown) { + const msg = e instanceof Error ? e.message : String(e); + showError(t('Import fehlgeschlagen: {msg}', { msg })); + } + }, [context.surface, context.instanceId, request, showSuccess, showError, t, onWorkflowImported]); - const columns = useMemo(() => [{ - key: 'fileName', - label: t('Dateiname'), - sortable: false, - filterable: false, - searchable: false, - formatter: (value: any, row: any) => ( -
- {}} - idField="id" - nameField="fileName" - typeField="mimeType" - loadingStateName="previewingFiles" - hookData={{ previewingFiles }} - className={actionBtnStyles.compact} - /> - - {value} - -
- ), - }], [t, previewingFiles]); + const _handleNodeClickWithImport = useCallback((node: TreeNode) => { + _handleNodeClick(node); + if (node.type === 'file') { + _handleWorkflowImport(node.id, node.name); + } + }, [_handleNodeClick, _handleWorkflowImport]); - const _groupBulkActionsProvider = useMemo(() => { - if (!onSendToChat) return undefined; - return (groupId: string, itemIds: string[]) => [ - { - icon: , - title: t('Gruppe an Chat anhängen'), - onClick: () => { - const name = _findGroupDisplayName(groupTree, groupId) ?? groupId; - onSendToChat([{ id: groupId, type: 'group', name }]); - }, - disabled: itemIds.length === 0, - }, - ]; - }, [onSendToChat, groupTree, t]); - - const _customActions = useMemo(() => { - if (context.surface !== 'graphEditor') return []; - return [ - { - id: 'workflow.openInEditor', - icon: , - title: t('In Graph-Editor laden'), - onClick: async (row: any) => { - if (!context.instanceId || !row?.id) return; - if (!row.fileName?.toLowerCase().endsWith(WORKFLOW_FILE_EXTENSION)) return; - try { - const result = await importWorkflowFromFile(request, context.instanceId, { fileId: row.id }); - const warnings = result?.warnings ?? []; - const wfId = result?.workflow?.id; - if (warnings.length > 0) { - showSuccess(t('Workflow importiert ({n} Warnungen).', { n: String(warnings.length) })); - } else { - showSuccess(t('Workflow importiert (deaktiviert).')); - } - if (wfId && onWorkflowImported) onWorkflowImported(wfId); - } catch (e: unknown) { - const msg = e instanceof Error ? e.message : String(e); - showError(t('Import fehlgeschlagen: {msg}', { msg })); - } - }, - hidden: (row: any) => !row?.fileName?.toLowerCase().endsWith(WORKFLOW_FILE_EXTENSION), - }, - ]; - }, [context.surface, context.instanceId, t, request, showSuccess, showError, onWorkflowImported]); + const _handleSendToChat = useCallback((node: TreeNode) => { + onSendToChat?.([{ id: node.id, type: node.type === 'folder' ? 'group' : 'file', name: node.name }]); + }, [onSendToChat]); return (
= ({ context, onFileSelect, onSendToChat onDrop={_handleDrop} > {isDragOver && ( -
+
{ e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; }} + onDragLeave={(e) => { + if (!e.relatedTarget || !(e.currentTarget as Node).contains(e.relatedTarget as Node)) { + setIsDragOver(false); + } + }} + onDrop={_handleDrop} + > {t('Dateien hier ablegen')}
)} @@ -208,8 +168,9 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat {uploading ? '...' : '+'} @@ -225,36 +186,32 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat />
- onFileSelect?.(row.id, row.fileName)} - actionButtons={[]} - customActions={_customActions} - hookData={{ - refetch: _tableRefetch, - pagination, - handleDelete: handleFileDelete, - previewingFiles, - groupTree, - }} - groupingConfig={{ contextKey: 'files/list', enabled: true }} - groupBulkActionsProvider={_groupBulkActionsProvider} - emptyMessage={t('Keine Dateien. Drag & Drop zum Hochladen.')} + +
- {'\uD83D\uDC64'} {t('Persönlich')} + {'\uD83D\uDC64'} {t('Persoenlich')} {'\uD83D\uDC65'} {t('Instanz')} {'\uD83C\uDFE2'} {t('Mandant')} {'\uD83D\uDD12'} {t('Neutralisiert')} diff --git a/src/components/UnifiedDataBar/UnifiedDataBar.module.css b/src/components/UnifiedDataBar/UnifiedDataBar.module.css index 784d687..c7cdbb9 100644 --- a/src/components/UnifiedDataBar/UnifiedDataBar.module.css +++ b/src/components/UnifiedDataBar/UnifiedDataBar.module.css @@ -58,3 +58,19 @@ border-bottom-color: var(--accent, #818cf8); } } + +/* Mobile portrait */ +@media (max-width: 480px) { + .tabBar { + padding: 4px 4px 0; + } + + .tab { + padding: 8px 6px; + font-size: 0.8rem; + } + + .tabContent { + padding: 4px; + } +} diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx index 0f23385..ba9a3c2 100644 --- a/src/contexts/FileContext.tsx +++ b/src/contexts/FileContext.tsx @@ -1,5 +1,6 @@ import React, { createContext, useContext } from 'react'; -import { useFileOperations, type FilePreviewResult } from '../hooks/useFiles'; +import { useFileOperations, useFolderOperations, type FilePreviewResult } from '../hooks/useFiles'; +import type { FolderInfo } from '../api/fileApi'; interface FileContextType { handleFileUpload: (file: File, workflowId?: string) => Promise<{ success: boolean; fileData?: any; error?: string }>; @@ -10,6 +11,13 @@ interface FileContextType { deletingFiles: Set; previewingFiles: Set; downloadingFiles: Set; + handleCreateFolder: (name: string, parentId?: string | null) => Promise; + handleRenameFolder: (folderId: string, name: string) => Promise; + handleDeleteFolderCascade: (folderId: string) => Promise<{ deletedFolders: number; deletedFiles: number }>; + handleMoveFolder: (folderId: string, parentId: string | null) => Promise; + handleMoveFiles: (fileIds: string[], targetFolderId: string | null) => Promise; + fetchOwnFolderTree: () => Promise; + fetchSharedFolderTree: () => Promise; } export const FileContext = createContext(undefined); @@ -26,6 +34,16 @@ export function FileProvider({ children }: { children: React.ReactNode }) { downloadingFiles, } = useFileOperations(); + const { + handleCreateFolder, + handleRenameFolder, + handleMoveFolder, + handleDeleteFolderCascade, + handleMoveFiles, + fetchOwnFolderTree, + fetchSharedFolderTree, + } = useFolderOperations(); + return ( {children} diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts index 5141f44..72d390d 100644 --- a/src/hooks/useFiles.ts +++ b/src/hooks/useFiles.ts @@ -12,6 +12,15 @@ import { updateFile as updateFileApi, deleteFile as deleteFileApi, deleteFiles as deleteFilesApi, + getFolderTree, + createFolder as createFolderApi, + renameFolder as renameFolderApi, + moveFolder as moveFolderApi, + deleteFolderCascade as deleteFolderCascadeApi, + patchFolderScope as patchFolderScopeApi, + patchFolderNeutralize as patchFolderNeutralizeApi, + moveFiles as moveFilesApi, + type FolderInfo, } from '../api/fileApi'; import type { TableGroupNode } from '../api/connectionApi'; @@ -697,4 +706,172 @@ export function useFileOperations() { handleInlineUpdate, isLoading }; +} + +// Folder operations hook +export function useFolderOperations() { + const [folderLoading, setFolderLoading] = useState(false); + const [folderError, setFolderError] = useState(null); + const { request } = useApiRequest(); + + const fetchOwnFolderTree = useCallback(async (): Promise => { + setFolderLoading(true); + setFolderError(null); + try { + return await getFolderTree(request, 'me'); + } catch (err: any) { + const msg = err?.message ?? 'Failed to fetch own folder tree'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const fetchSharedFolderTree = useCallback(async (): Promise => { + setFolderLoading(true); + setFolderError(null); + try { + return await getFolderTree(request, 'shared'); + } catch (err: any) { + const msg = err?.message ?? 'Failed to fetch shared folder tree'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handleCreateFolder = useCallback(async ( + name: string, + parentId?: string | null, + ): Promise => { + setFolderLoading(true); + setFolderError(null); + try { + return await createFolderApi(request, name, parentId); + } catch (err: any) { + const msg = err?.message ?? 'Failed to create folder'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handleRenameFolder = useCallback(async ( + folderId: string, + name: string, + ): Promise => { + setFolderLoading(true); + setFolderError(null); + try { + return await renameFolderApi(request, folderId, name); + } catch (err: any) { + const msg = err?.message ?? 'Failed to rename folder'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handleMoveFolder = useCallback(async ( + folderId: string, + parentId: string | null, + ): Promise => { + setFolderLoading(true); + setFolderError(null); + try { + return await moveFolderApi(request, folderId, parentId); + } catch (err: any) { + const msg = err?.message ?? 'Failed to move folder'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handleDeleteFolderCascade = useCallback(async ( + folderId: string, + ): Promise<{ deletedFolders: number; deletedFiles: number }> => { + setFolderLoading(true); + setFolderError(null); + try { + return await deleteFolderCascadeApi(request, folderId); + } catch (err: any) { + const msg = err?.message ?? 'Failed to delete folder'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handlePatchFolderScope = useCallback(async ( + folderId: string, + scope: string, + cascadeToFiles: boolean = false, + ): Promise<{ folderId: string; scope: string; filesUpdated: number }> => { + setFolderLoading(true); + setFolderError(null); + try { + return await patchFolderScopeApi(request, folderId, scope, cascadeToFiles); + } catch (err: any) { + const msg = err?.message ?? 'Failed to patch folder scope'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handlePatchFolderNeutralize = useCallback(async ( + folderId: string, + neutralize: boolean, + ): Promise<{ folderId: string; neutralize: boolean; filesUpdated: number }> => { + setFolderLoading(true); + setFolderError(null); + try { + return await patchFolderNeutralizeApi(request, folderId, neutralize); + } catch (err: any) { + const msg = err?.message ?? 'Failed to patch folder neutralize'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + const handleMoveFiles = useCallback(async ( + fileIds: string[], + targetFolderId: string | null, + ): Promise => { + setFolderLoading(true); + setFolderError(null); + try { + await moveFilesApi(request, fileIds, targetFolderId); + } catch (err: any) { + const msg = err?.message ?? 'Failed to move files'; + setFolderError(msg); + throw err; + } finally { + setFolderLoading(false); + } + }, [request]); + + return { + folderLoading, + folderError, + fetchOwnFolderTree, + fetchSharedFolderTree, + handleCreateFolder, + handleRenameFolder, + handleMoveFolder, + handleDeleteFolderCascade, + handlePatchFolderScope, + handlePatchFolderNeutralize, + handleMoveFiles, + }; } \ No newline at end of file diff --git a/src/pages/AutomationsDashboardPage.tsx b/src/pages/AutomationsDashboardPage.tsx index 4644873..69b464b 100644 --- a/src/pages/AutomationsDashboardPage.tsx +++ b/src/pages/AutomationsDashboardPage.tsx @@ -1177,11 +1177,65 @@ const _FileLinkList: React.FC<{ files: Array<{ id: string; fileName?: string }> ); }; +const _ProducedFilesSection: React.FC<{ + steps: Array<{ outputFiles?: Array<{ id: string; fileName?: string }> }>; + unassignedFiles?: Array<{ id: string; fileName?: string }>; +}> = ({ steps, unassignedFiles }) => { + const { t } = useLanguage(); + const seen = new Set(); + const allFiles: Array<{ id: string; fileName?: string }> = []; + for (const step of steps) { + for (const f of step.outputFiles ?? []) { + if (!seen.has(f.id)) { seen.add(f.id); allFiles.push(f); } + } + } + for (const f of unassignedFiles ?? []) { + if (!seen.has(f.id)) { seen.add(f.id); allFiles.push(f); } + } + if (!allFiles.length) return null; + const baseUrl = api.defaults.baseURL || ''; + return ( +
+
+ + {t('Ergebnisse')} ({allFiles.length}) +
+
+ {allFiles.map(f => ( + + + {f.fileName || f.id} + + ))} +
+
+ ); +}; + +function _downloadJson(data: unknown, fileName: string) { + const json = JSON.stringify(data, null, 2); + const blob = new Blob([json], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = fileName; + a.click(); + URL.revokeObjectURL(url); +} + interface _WorkspaceTabProps { runId: string | null; onBack: () => void; } +const _TERMINAL_STATUSES = new Set(['completed', 'failed', 'cancelled', 'error', 'stopped']); +const _POLL_INTERVAL_MS = 3000; + const _WorkspaceTab: React.FC<_WorkspaceTabProps> = ({ runId, onBack }) => { const { t } = useLanguage(); const { request } = useApiRequest(); @@ -1205,6 +1259,18 @@ const _WorkspaceTab: React.FC<_WorkspaceTabProps> = ({ runId, onBack }) => { else setRunDetail(null); }, [runId, _loadDetail]); + useEffect(() => { + if (!runId || !runDetail) return; + const status = runDetail.run?.status; + if (status && _TERMINAL_STATUSES.has(status)) return; + const timer = setInterval(() => { + fetchWorkspaceRunDetail(request, runId) + .then(detail => setRunDetail(detail)) + .catch(() => {}); + }, _POLL_INTERVAL_MS); + return () => clearInterval(timer); + }, [runId, runDetail, request]); + if (!runId) { return (
@@ -1237,6 +1303,7 @@ const _WorkspaceTab: React.FC<_WorkspaceTabProps> = ({ runId, onBack }) => { {run.error}
)} + <_ProducedFilesSection steps={steps} unassignedFiles={unassignedFiles} />

{t('Schritte')}

{steps.length === 0 ? (

{t('Keine Schritte protokolliert.')}

@@ -1262,8 +1329,13 @@ const _WorkspaceTab: React.FC<_WorkspaceTabProps> = ({ runId, onBack }) => {
{hasInput && (
-
+
{t('Input')} + {inputData !== undefined && inputData !== null && ( + + )}
<_DataBlock data={inputData} /> <_FileLinkList files={inputFiles} /> @@ -1271,8 +1343,13 @@ const _WorkspaceTab: React.FC<_WorkspaceTabProps> = ({ runId, onBack }) => { )} {hasOutput && (
-
+
{t('Output')} + {outputData !== undefined && outputData !== null && ( + + )}
<_DataBlock data={outputData} /> <_FileLinkList files={outputFiles} /> @@ -1349,12 +1426,12 @@ export const AutomationsDashboardPage: React.FC = () => { }, { id: 'dashboard', - label: t('Dashboard'), + label: t('Workflow-Durchläufe'), content: <_DashboardTab workflowFilter={workflowFilter} onRunClick={_handleRunClick} />, }, { id: 'workspace', - label: t('Workspace'), + label: t('Durchlauf-Details'), content: <_WorkspaceTab runId={selectedRunId} onBack={_handleBackFromWorkspace} />, }, ], [t, _handleWorkflowClick, workflowFilter, _handleRunClick, selectedRunId, _handleBackFromWorkspace]); diff --git a/src/pages/basedata/FilesPage.tsx b/src/pages/basedata/FilesPage.tsx index 36c7802..d1d019e 100644 --- a/src/pages/basedata/FilesPage.tsx +++ b/src/pages/basedata/FilesPage.tsx @@ -1,23 +1,25 @@ /** * FilesPage * - * Full-width file management using FormGeneratorTable with persistent grouping. - * Organisation exclusively via groupTree/groupId — no physical folder navigation. + * Split-view file management: tree panel on the left (FormGeneratorTree), + * FormGeneratorTable on the right. Two modes: + * - "Ordner-Sicht": table filtered by selected folder in the tree + * - "Alle Dateien": table shows all files without folder filter */ -import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'; +import React, { useState, useMemo, useEffect, useRef, useCallback, type PointerEvent as RPointerEvent } from 'react'; import { useUserFiles, useFileOperations } from '../../hooks/useFiles'; import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable'; import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm'; -import { FaSync, FaUpload, FaDownload, FaLock, FaLockOpen, FaFileArchive, FaTrash } from 'react-icons/fa'; +import { FormGeneratorTree } from '../../components/FormGenerator/FormGeneratorTree'; +import { createFolderFileProvider } from '../../components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider'; +import type { TreeNode } from '../../components/FormGenerator/FormGeneratorTree'; +import { FaSync, FaUpload, FaDownload, FaTree, FaTable } from 'react-icons/fa'; import { useToast } from '../../contexts/ToastContext'; -import { useApiRequest } from '../../hooks/useApi'; -import { patchGroupScope, downloadGroupZip, deleteGroup } from '../../api/fileApi'; import styles from '../admin/Admin.module.css'; import { useLanguage } from '../../providers/language/LanguageContext'; import { getUserDataCache } from '../../utils/userCache'; import { resolveColumnTypes } from '../../utils/columnTypeResolver'; -import type { GroupBulkAction } from '../../components/FormGenerator/GroupingManager/GroupRow'; interface UserFile { id: string; @@ -28,11 +30,16 @@ interface UserFile { [key: string]: any; } +type ViewMode = 'folder' | 'all'; + export const FilesPage: React.FC = () => { const { t } = useLanguage(); const fileInputRef = useRef(null); const { showSuccess, showError } = useToast(); - const { request } = useApiRequest(); + + const [viewMode, setViewMode] = useState('folder'); + const provider = useMemo(() => createFolderFileProvider(), []); + const [treeKey, setTreeKey] = useState(0); // ── Table data ──────────────────────────────────────────────────────── const { @@ -43,7 +50,6 @@ export const FilesPage: React.FC = () => { error, refetch: tableRefetch, pagination, - groupTree, fetchFileById, updateFileOptimistically, } = useUserFiles(); @@ -63,20 +69,68 @@ export const FilesPage: React.FC = () => { const [editingFile, setEditingFile] = useState(null); const [selectedFiles, setSelectedFiles] = useState([]); + const [selectedFolderId, setSelectedFolderId] = useState(null); + const [highlightedFileId, setHighlightedFileId] = useState(null); - // ── Table refetch wrapper ────────────────────────────────────────────── + const [treeWidth, setTreeWidth] = useState(300); + const [treeVisible, setTreeVisible] = useState(true); + const [tableVisible, setTableVisible] = useState(true); + const draggingRef = useRef(false); + const splitContainerRef = useRef(null); + + const _handleDividerPointerDown = useCallback((e: RPointerEvent) => { + e.preventDefault(); + draggingRef.current = true; + (e.target as HTMLElement).setPointerCapture(e.pointerId); + }, []); + + const _handleDividerPointerMove = useCallback((e: RPointerEvent) => { + if (!draggingRef.current || !splitContainerRef.current) return; + const rect = splitContainerRef.current.getBoundingClientRect(); + const x = e.clientX - rect.left; + setTreeWidth(Math.max(180, Math.min(x, rect.width - 200))); + }, []); + + const _handleDividerPointerUp = useCallback(() => { + draggingRef.current = false; + }, []); + + // ── Table refetch wrapper (filters by selectedFolderId in folder mode) ── const _tableRefetch = useCallback(async (params?: any) => { - await tableRefetch(params); - }, [tableRefetch]); + const nextParams = { ...(params || {}) }; + const nextFilters = { ...(nextParams.filters || {}) }; + if (viewMode === 'folder' && selectedFolderId) { + nextFilters.folderId = selectedFolderId; + } else { + delete nextFilters.folderId; + } + nextParams.filters = nextFilters; + await tableRefetch(nextParams); + }, [tableRefetch, selectedFolderId, viewMode]); const _refreshAll = useCallback(async () => { await _tableRefetch({ page: 1, pageSize: 25 }); + setTreeKey(k => k + 1); }, [_tableRefetch]); - // Initial fetch useEffect(() => { _tableRefetch({ page: 1, pageSize: 25 }); - }, [_tableRefetch]); + }, [selectedFolderId, viewMode, _tableRefetch]); + + // ── Tree interaction ────────────────────────────────────────────────── + const _handleTreeNodeClick = useCallback((node: TreeNode) => { + if (node.type === 'folder') { + setSelectedFolderId(node.id); + } else if (node.type === 'file') { + setSelectedFolderId(node.parentId); + setHighlightedFileId(node.id); + requestAnimationFrame(() => { + const row = document.querySelector('tr[data-highlighted="true"]'); + if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }); + setTimeout(() => setHighlightedFileId(null), 2500); + } + }, []); // ── Columns ─────────────────────────────────────────────────────────── const columns = useMemo(() => { @@ -181,6 +235,7 @@ export const FilesPage: React.FC = () => { } if (fileInputRef.current) fileInputRef.current.value = ''; await _tableRefetch(); + setTreeKey(k => k + 1); if (successCount > 0) { showSuccess( t('Upload erfolgreich'), @@ -194,55 +249,6 @@ export const FilesPage: React.FC = () => { } }; - const _groupBulkActionsProvider = useCallback((groupId: string, itemIds: string[]): GroupBulkAction[] => { - return [ - { - icon: , - title: t('Scope: personal'), - onClick: async () => { - try { - await patchGroupScope(request, groupId, 'personal'); - showSuccess(t('Scope aktualisiert'), t('{n} Dateien auf personal gesetzt', { n: String(itemIds.length) })); - await _tableRefetch(); - } catch (e) { showError(t('Fehler'), String(e)); } - }, - }, - { - icon: , - title: t('Scope: mandate'), - onClick: async () => { - try { - await patchGroupScope(request, groupId, 'mandate'); - showSuccess(t('Scope aktualisiert'), t('{n} Dateien auf mandate gesetzt', { n: String(itemIds.length) })); - await _tableRefetch(); - } catch (e) { showError(t('Fehler'), String(e)); } - }, - }, - { - icon: , - title: t('ZIP herunterladen'), - onClick: async () => { - try { await downloadGroupZip(groupId); } - catch (e) { showError(t('Fehler'), String(e)); } - }, - disabled: itemIds.length === 0, - }, - { - icon: , - title: t('Gruppe + Dateien löschen'), - variant: 'danger' as const, - onClick: async () => { - try { - await deleteGroup(request, groupId, true); - showSuccess(t('Gelöscht'), t('Gruppe und {n} Dateien gelöscht', { n: String(itemIds.length) })); - await _tableRefetch(); - } catch (e) { showError(t('Fehler'), String(e)); } - }, - disabled: itemIds.length === 0, - }, - ]; - }, [request, showSuccess, showError, _tableRefetch, t]); - const _onRowDragStart = useCallback((e: React.DragEvent, row: UserFile) => { const isInSelection = selectedFiles.some(f => f.id === row.id); if (isInSelection && selectedFiles.length > 1) { @@ -262,7 +268,7 @@ export const FilesPage: React.FC = () => { return (
- ⚠️ + ⚠️

{t('Fehler beim Laden der Dateien: {detail}', { detail: String(error) })}

+
+ + +
-
-
- {canCreate && ( - - )} -
+
+ {/* Left panel: Tree */} + {treeVisible && ( +
+ _tableRefetch()} + /> + +
+ )} -
- setSelectedFiles(rows as UserFile[])} - rowDraggable={true} - onRowDragStart={_onRowDragStart} - actionButtons={[ - { - type: 'view' as const, - onAction: () => {}, - title: t('Vorschau'), - idField: 'id', - nameField: 'fileName', - typeField: 'mimeType', - loadingStateName: 'previewingFiles', - }, - ...(canUpdate ? [{ - type: 'edit' as const, - onAction: handleEditClick, - title: t('Bearbeiten'), - disabled: (row: UserFile) => !_isOwned(row) ? { disabled: true, message: t('Nur Eigentümer kann bearbeiten') } : false, - }] : []), - ...(canDelete ? [{ - type: 'delete' as const, - title: t('Löschen'), - loading: (row: UserFile) => deletingFiles.has(row.id), - disabled: (row: UserFile) => !_isOwned(row) ? { disabled: true, message: t('Nur Eigentümer kann löschen') } : false, - }] : []), - ]} - customActions={[ - { - id: 'download', - icon: , - onClick: handleDownload, - title: t('Herunterladen'), - loading: (row: UserFile) => downloadingFiles.has(row.id), - }, - ]} - onDelete={handleDelete} - onDeleteMultiple={handleDeleteMultiple} - hookData={{ - refetch: _tableRefetch, - pagination, - permissions, - handleDelete: handleFileDelete, - handleInlineUpdate, - updateOptimistically: updateFileOptimistically, - previewingFiles, - groupTree, + {/* Resizable divider */} + {treeVisible && tableVisible && ( +
+ > +
+
+ )} + + {/* Right panel: Table with view-mode toggle */} + {tableVisible && ( +
+
+ + + +
+ + {canCreate && ( + + )} +
+ +
+ setSelectedFiles(rows as UserFile[])} + rowDraggable={true} + onRowDragStart={_onRowDragStart} + getRowDataAttributes={(row: UserFile) => ({ + highlighted: row.id === highlightedFileId ? 'true' : 'false', + })} + actionButtons={[ + { + type: 'view' as const, + onAction: () => {}, + title: t('Vorschau'), + idField: 'id', + nameField: 'fileName', + typeField: 'mimeType', + loadingStateName: 'previewingFiles', + }, + ...(canUpdate ? [{ + type: 'edit' as const, + onAction: handleEditClick, + title: t('Bearbeiten'), + disabled: (row: UserFile) => !_isOwned(row) ? { disabled: true, message: t('Nur Eigentuemer kann bearbeiten') } : false, + }] : []), + ...(canDelete ? [{ + type: 'delete' as const, + title: t('Loeschen'), + loading: (row: UserFile) => deletingFiles.has(row.id), + disabled: (row: UserFile) => !_isOwned(row) ? { disabled: true, message: t('Nur Eigentuemer kann loeschen') } : false, + }] : []), + ]} + customActions={[ + { + id: 'download', + icon: , + onClick: handleDownload, + title: t('Herunterladen'), + loading: (row: UserFile) => downloadingFiles.has(row.id), + }, + ]} + onDelete={handleDelete} + onDeleteMultiple={handleDeleteMultiple} + hookData={{ + refetch: _tableRefetch, + pagination, + permissions, + handleDelete: handleFileDelete, + handleInlineUpdate, + updateOptimistically: updateFileOptimistically, + previewingFiles, + }} + emptyMessage={t('Keine Dateien gefunden')} + /> +
+ )}
{editingFile && ( @@ -378,7 +477,7 @@ export const FilesPage: React.FC = () => {

{t('Datei bearbeiten')}

- +
{formAttributes.length === 0 ? ( From 0055b8ce44bba10baba012762160f025362f1663 Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Sun, 3 May 2026 22:19:20 +0200 Subject: [PATCH 02/11] fixed ux for expand object scrolling --- .../FormGeneratorTree/FormGeneratorTree.tsx | 20 +++++++++++++- .../TreeNavigation/TreeNavigation.tsx | 26 ++++++++++++++----- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx index aa1bee9..e480963 100644 --- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx @@ -452,6 +452,7 @@ export function FormGeneratorTree({ const _handleToggleExpand = useCallback( async (id: string) => { + const wasExpanded = expandedIds.has(id); setExpandedIds((prev) => { const next = new Set(prev); if (next.has(id)) { @@ -463,7 +464,7 @@ export function FormGeneratorTree({ }); const node = nodes.find((n) => n.id === id); - if (node && !expandedIds.has(id)) { + if (node && !wasExpanded) { const childMap = _buildChildMap(nodes); const existingChildren = childMap.get(id); if (!existingChildren || existingChildren.length === 0) { @@ -472,11 +473,28 @@ export function FormGeneratorTree({ setNodes((prev) => [...prev, ...childNodes]); } } + setTimeout(() => { + _scrollExpandedNodeToCenter(id); + }, 50); } }, [nodes, expandedIds, provider, ownership], ); + const _scrollExpandedNodeToCenter = useCallback((nodeId: string) => { + const container = treeContentRef.current; + if (!container) return; + const el = container.querySelector(`[data-node-id="${nodeId}"]`) as HTMLElement | null; + if (!el) return; + const containerRect = container.getBoundingClientRect(); + const elRect = el.getBoundingClientRect(); + const midpoint = containerRect.top + containerRect.height / 2; + if (elRect.top > midpoint) { + const scrollTarget = container.scrollTop + (elRect.top - midpoint); + container.scrollTo({ top: scrollTarget, behavior: 'smooth' }); + } + }, []); + const _handleToggleSelect = useCallback( (id: string, e: React.MouseEvent) => { const newSelection = new Set(selectedIds); diff --git a/src/components/Navigation/TreeNavigation/TreeNavigation.tsx b/src/components/Navigation/TreeNavigation/TreeNavigation.tsx index 4b9beee..2f81d1b 100644 --- a/src/components/Navigation/TreeNavigation/TreeNavigation.tsx +++ b/src/components/Navigation/TreeNavigation/TreeNavigation.tsx @@ -10,7 +10,7 @@ * - NavLink integration with React Router */ -import React, { useState, useEffect, ReactNode } from 'react'; +import React, { useState, useEffect, useRef, useCallback, ReactNode } from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import styles from './TreeNavigation.module.css'; @@ -151,6 +151,7 @@ const TreeNode: React.FC = ({ const [isExpanded, setIsExpanded] = useState( node.defaultExpanded ?? shouldAutoExpand ?? false ); + const containerRef = useRef(null); // Auto-expand when path becomes active useEffect(() => { @@ -159,6 +160,16 @@ const TreeNode: React.FC = ({ } }, [currentPath, autoExpandActive, node]); + const _scrollAfterExpand = useCallback(() => { + const el = containerRef.current; + if (!el) return; + const rect = el.getBoundingClientRect(); + const viewportMid = window.innerHeight / 2; + if (rect.top > viewportMid) { + el.scrollIntoView({ block: 'center', behavior: 'smooth' }); + } + }, []); + // Check if this node is active (exact match or ancestor of active path) const isActive = node.path ? currentPath === node.path || currentPath.startsWith(node.path + '/') : false; // Differentiate: leaf active (strong highlight) vs group active (subtle text only) @@ -179,12 +190,13 @@ const TreeNode: React.FC = ({ } if (isExpandable && !node.path) { - // If only expandable (no path), toggle expand - setIsExpanded(!isExpanded); + const willExpand = !isExpanded; + setIsExpanded(willExpand); + if (willExpand) setTimeout(_scrollAfterExpand, 50); } else if (isExpandable && node.path) { - // If both expandable and has path, expand on click but allow navigation if (!isExpanded) { setIsExpanded(true); + setTimeout(_scrollAfterExpand, 50); } } @@ -197,7 +209,9 @@ const TreeNode: React.FC = ({ const handleToggleClick = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); - setIsExpanded(!isExpanded); + const willExpand = !isExpanded; + setIsExpanded(willExpand); + if (willExpand) setTimeout(_scrollAfterExpand, 50); }; // Render the node content (actions are rendered outside to avoid button-in-button nesting) @@ -255,7 +269,7 @@ const TreeNode: React.FC = ({ const canRenderChildren = maxDepth === 0 || level < maxDepth; return ( -
+
{nodeElement} {node.actions && ( e.stopPropagation()}> From 1219d616d427dc2f94991fa7adc7ed3db369f451 Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Sun, 3 May 2026 22:24:47 +0200 Subject: [PATCH 03/11] fix import --- src/components/UnifiedDataBar/FilesTab.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/UnifiedDataBar/FilesTab.tsx b/src/components/UnifiedDataBar/FilesTab.tsx index 388ce93..43a20e4 100644 --- a/src/components/UnifiedDataBar/FilesTab.tsx +++ b/src/components/UnifiedDataBar/FilesTab.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useRef, useMemo, useState } from 'react'; -import { FaFileImport } from 'react-icons/fa'; import type { UdbContext } from './UnifiedDataBar'; import api from '../../api'; import { useApiRequest } from '../../hooks/useApi'; From 930a34662da5d70f14709cba6282437fe4edf255 Mon Sep 17 00:00:00 2001 From: Ida Date: Mon, 4 May 2026 17:29:11 +0200 Subject: [PATCH 04/11] fix: falsche gruppierung entfernt, gruppierung richtig implementiert --- src/api/billingApi.ts | 49 +- src/api/connectionApi.ts | 33 +- src/api/fileApi.ts | 37 +- src/api/mandateApi.ts | 6 +- src/api/promptApi.ts | 12 +- src/api/tableViewApi.ts | 59 + src/api/userApi.ts | 6 +- .../FormGeneratorControls.tsx | 30 +- .../FormGeneratorTable.module.css | 159 ++ .../FormGeneratorTable/FormGeneratorTable.tsx | 1589 +++++++++-------- .../GroupingManager/GroupRow.tsx | 7 +- .../TableViewsBar/TableViewsBar.module.css | 286 +++ .../TableViewsBar/TableViewsBar.tsx | 337 ++++ .../FormGenerator/TableViewsBar/index.ts | 1 + src/hooks/useBilling.ts | 44 +- src/hooks/useConnections.ts | 85 +- src/hooks/useFiles.ts | 95 +- src/hooks/usePrompts.ts | 83 +- src/pages/basedata/ConnectionsPage.tsx | 13 +- src/pages/basedata/FilesPage.tsx | 45 +- src/pages/basedata/PromptsPage.tsx | 13 +- src/pages/billing/Billing.module.css | 25 +- src/pages/billing/BillingDataView.tsx | 125 +- src/pages/billing/BillingTransactions.tsx | 277 +-- src/pages/views/workspace/WorkspacePage.tsx | 36 +- 25 files changed, 2398 insertions(+), 1054 deletions(-) create mode 100644 src/api/tableViewApi.ts create mode 100644 src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css create mode 100644 src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx create mode 100644 src/components/FormGenerator/TableViewsBar/index.ts diff --git a/src/api/billingApi.ts b/src/api/billingApi.ts index cc05e44..8094658 100644 --- a/src/api/billingApi.ts +++ b/src/api/billingApi.ts @@ -36,6 +36,29 @@ export interface BillingTransaction { userName?: string; } +/** Pagination request for GET /api/billing/transactions with `pagination` JSON (table + grouping). */ +export interface BillingTransactionsPaginationParams { + page?: number; + pageSize?: number; + sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; + filters?: Record; + search?: string; + viewKey?: string; + groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>; +} + +export interface BillingTransactionsPaginatedResponse { + items: BillingTransaction[]; + pagination?: { + currentPage: number; + pageSize: number; + totalItems: number; + totalPages: number; + }; + groupLayout?: import('./connectionApi').GroupLayout; + appliedView?: { viewKey?: string; displayName?: string }; +} + export interface BillingSettings { id: string; mandateId: string; @@ -135,7 +158,31 @@ export async function fetchBalanceForMandate( } /** - * Fetch transaction history + * Fetch transaction history (table UI: pagination, filters, sort, saved views, grouping). + * Endpoint: GET /api/billing/transactions?pagination=... + */ +export async function fetchTransactionsPaginated( + request: ApiRequestFunction, + params?: BillingTransactionsPaginationParams +): Promise { + const paginationObj: Record = {}; + if (params?.page !== undefined) paginationObj.page = params.page; + if (params?.pageSize !== undefined) paginationObj.pageSize = params.pageSize; + if (params?.sort?.length) paginationObj.sort = params.sort; + if (params?.filters && Object.keys(params.filters).length > 0) paginationObj.filters = params.filters; + if (params?.search) paginationObj.search = params.search; + if (params?.viewKey) paginationObj.viewKey = params.viewKey; + if (params?.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels; + + return await request({ + url: '/api/billing/transactions', + method: 'get', + params: { pagination: JSON.stringify(paginationObj) }, + }); +} + +/** + * Fetch transaction history (legacy array window) * Endpoint: GET /api/billing/transactions */ export async function fetchTransactions( diff --git a/src/api/connectionApi.ts b/src/api/connectionApi.ts index 41a79e4..8c47c6d 100644 --- a/src/api/connectionApi.ts +++ b/src/api/connectionApi.ts @@ -55,19 +55,22 @@ export interface PaginationParams { sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; filters?: Record; search?: string; - /** Scope request to items of this group (resolved server-side to itemIds IN-filter). */ - groupId?: string; - /** If set, persist this group tree on the backend before fetching (optimistic save). */ - saveGroupTree?: TableGroupNode[]; + /** Key of a saved view to apply (server loads groupByLevels, filters, sort from DB). */ + viewKey?: string; + /** Explicit grouping levels; when sent (incl. []), overrides the view for this request. */ + groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>; } -export interface TableGroupNode { - id: string; - name: string; - itemIds: string[]; - subGroups: TableGroupNode[]; - order: number; - isExpanded: boolean; +export interface GroupBand { + path: string[]; + label: string; + startRowIndex: number; + rowCount: number; +} + +export interface GroupLayout { + levels: string[]; + bands: GroupBand[]; } export interface PaginatedResponse { @@ -78,8 +81,8 @@ export interface PaginatedResponse { totalItems: number; totalPages: number; }; - /** Current group tree for this (user, contextKey) pair — undefined if no grouping configured. */ - groupTree?: TableGroupNode[]; + groupLayout?: GroupLayout; + appliedView?: { viewKey?: string; displayName?: string }; } export interface CreateConnectionData { @@ -138,8 +141,8 @@ export async function fetchConnections( if (params.sort) paginationObj.sort = params.sort; if (params.filters) paginationObj.filters = params.filters; if (params.search) paginationObj.search = params.search; - if (params.groupId) paginationObj.groupId = params.groupId; - if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree; + if (params.viewKey) paginationObj.viewKey = params.viewKey; + if (params.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels; if (Object.keys(paginationObj).length > 0) { requestParams.pagination = JSON.stringify(paginationObj); diff --git a/src/api/fileApi.ts b/src/api/fileApi.ts index 7e2c67a..75151c3 100644 --- a/src/api/fileApi.ts +++ b/src/api/fileApi.ts @@ -34,8 +34,8 @@ export interface PaginationParams { sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; filters?: Record; search?: string; - groupId?: string; - saveGroupTree?: any[]; + viewKey?: string; + groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>; } export interface PaginatedResponse { @@ -46,6 +46,8 @@ export interface PaginatedResponse { totalItems: number; totalPages: number; }; + groupLayout?: import('./connectionApi').GroupLayout; + appliedView?: { viewKey?: string; displayName?: string }; } // Type for the request function passed to API functions @@ -105,9 +107,9 @@ export async function fetchFiles( if (params.sort) paginationObj.sort = params.sort; if (params.filters) paginationObj.filters = params.filters; if (params.search) paginationObj.search = params.search; - if (params.groupId) paginationObj.groupId = params.groupId; - if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree; - + if (params.viewKey) paginationObj.viewKey = params.viewKey; + if (params.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels; + if (Object.keys(paginationObj).length > 0) { requestParams.pagination = JSON.stringify(paginationObj); } @@ -249,28 +251,13 @@ export async function deleteGroup( }); } -/** Collect all file IDs belonging to a group recursively (client-side, from known groupTree) */ +/** @deprecated Group tree removed — use view-based grouping (viewKey). Returns empty array. */ export function collectGroupItemIds( - groupTree: Array<{ id: string; itemIds: string[]; subGroups: any[] }>, - groupId: string + _groupTree: Array<{ id: string; itemIds: string[]; subGroups: any[] }>, + _groupId: string ): string[] { - const collect = (nodes: Array<{ id: string; itemIds: string[]; subGroups: any[] }>): string[] | null => { - for (const node of nodes) { - if (node.id === groupId) { - const ids: string[] = [...node.itemIds]; - const sub = (n: { id: string; itemIds: string[]; subGroups: any[] }) => { - ids.push(...n.itemIds); - n.subGroups.forEach(sub); - }; - node.subGroups.forEach(sub); - return ids; - } - const found = collect(node.subGroups); - if (found) return found; - } - return null; - }; - return collect(groupTree) ?? []; + const collect = (): string[] | null => null; + return collect() ?? []; } // Note: The following operations require special handling (FormData, blob responses) diff --git a/src/api/mandateApi.ts b/src/api/mandateApi.ts index 7946395..24aee62 100644 --- a/src/api/mandateApi.ts +++ b/src/api/mandateApi.ts @@ -46,8 +46,7 @@ export interface PaginationParams { sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; filters?: Record; search?: string; - groupId?: string; - saveGroupTree?: any[]; + viewKey?: string; } export interface PaginatedResponse { @@ -86,8 +85,7 @@ export async function fetchMandates( if (params.sort) paginationObj.sort = params.sort; if (params.filters) paginationObj.filters = params.filters; if (params.search) paginationObj.search = params.search; - if (params.groupId) paginationObj.groupId = params.groupId; - if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree; + if (params.viewKey) paginationObj.viewKey = params.viewKey; if (Object.keys(paginationObj).length > 0) { requestParams.pagination = JSON.stringify(paginationObj); diff --git a/src/api/promptApi.ts b/src/api/promptApi.ts index e735ae0..164a633 100644 --- a/src/api/promptApi.ts +++ b/src/api/promptApi.ts @@ -49,8 +49,8 @@ export interface PaginationParams { sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; filters?: Record; search?: string; - groupId?: string; - saveGroupTree?: any[]; + viewKey?: string; + groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>; } export interface PaginatedResponse { @@ -61,6 +61,8 @@ export interface PaginatedResponse { totalItems: number; totalPages: number; }; + groupLayout?: import('./connectionApi').GroupLayout; + appliedView?: { viewKey?: string; displayName?: string }; } export interface CreatePromptData { @@ -112,9 +114,9 @@ export async function fetchPrompts( if (params.sort) paginationObj.sort = params.sort; if (params.filters) paginationObj.filters = params.filters; if (params.search) paginationObj.search = params.search; - if (params.groupId) paginationObj.groupId = params.groupId; - if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree; - + if (params.viewKey) paginationObj.viewKey = params.viewKey; + if (params.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels; + if (Object.keys(paginationObj).length > 0) { requestParams.pagination = JSON.stringify(paginationObj); } diff --git a/src/api/tableViewApi.ts b/src/api/tableViewApi.ts new file mode 100644 index 0000000..08039e8 --- /dev/null +++ b/src/api/tableViewApi.ts @@ -0,0 +1,59 @@ +import api from '../api'; + +export interface TableListViewRow { + id: string; + userId?: string; + mandateId?: string | null; + contextKey: string; + viewKey: string; + displayName: string; + config: TableViewConfig; + updatedAt?: number; +} + +export interface TableViewConfig { + schemaVersion?: number; + filters?: Record; + sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; + groupByLevels?: Array<{ field: string; nullLabel?: string }>; + /** Section mode (`tableGroupLayoutMode="sections"`): stable keys (`sk`) of collapsed sections. */ + collapsedSectionKeys?: string[]; + /** Inline `groupLayout` bands: keys are `band.path.join('///')`. */ + collapsedGroupKeys?: string[]; +} + +export async function listTableViews(contextKey: string): Promise { + const { data } = await api.get('/api/table-views', { + params: { contextKey }, + }); + return Array.isArray(data) ? data : []; +} + +export async function getTableView(contextKey: string, viewKey: string): Promise { + const { data } = await api.get(`/api/table-views/${encodeURIComponent(viewKey)}`, { + params: { contextKey }, + }); + return data; +} + +export async function createTableView(payload: { + contextKey: string; + viewKey: string; + displayName: string; + config: TableViewConfig; +}): Promise { + const { data } = await api.post('/api/table-views', payload); + return data; +} + +export async function updateTableView( + viewId: string, + updates: { displayName?: string; viewKey?: string; config?: TableViewConfig }, +): Promise { + const { data } = await api.put(`/api/table-views/${encodeURIComponent(viewId)}`, updates); + return data; +} + +export async function deleteTableView(viewId: string): Promise { + await api.delete(`/api/table-views/${encodeURIComponent(viewId)}`); +} diff --git a/src/api/userApi.ts b/src/api/userApi.ts index 98dd7a2..3615375 100644 --- a/src/api/userApi.ts +++ b/src/api/userApi.ts @@ -48,8 +48,7 @@ export interface PaginationParams { sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; filters?: Record; search?: string; - groupId?: string; - saveGroupTree?: any[]; + viewKey?: string; } export interface PaginatedResponse { @@ -154,8 +153,7 @@ export async function fetchUsers( if (params.sort) paginationObj.sort = params.sort; if (params.filters) paginationObj.filters = params.filters; if (params.search) paginationObj.search = params.search; - if (params.groupId) paginationObj.groupId = params.groupId; - if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree; + if (params.viewKey) paginationObj.viewKey = params.viewKey; if (Object.keys(paginationObj).length > 0) { requestParams.pagination = JSON.stringify(paginationObj); diff --git a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx index 8b43b01..e57fce2 100644 --- a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx +++ b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx @@ -4,7 +4,7 @@ import { useLanguage } from '../../../providers/language/LanguageContext'; import styles from './FormGeneratorControls.module.css'; import { Button } from '../../UiComponents/Button'; import { IoIosRefresh } from "react-icons/io"; -import { FaTrash, FaDownload, FaLayerGroup } from "react-icons/fa"; +import { FaTrash, FaDownload } from "react-icons/fa"; import type { AttributeType } from '../../../utils/attributeTypeMapper'; // Generic field/column config interface @@ -77,10 +77,6 @@ export interface FormGeneratorControlsProps { onSelectAllFiltered?: () => void; selectAllFilteredActive?: boolean; selectAllFilteredLoading?: boolean; - // Grouping - groupingEnabled?: boolean; - onCreateGroup?: () => void; - activeGroupId?: string | null; } export function FormGeneratorControls({ @@ -114,9 +110,6 @@ export function FormGeneratorControls({ onSelectAllFiltered, selectAllFilteredActive = false, selectAllFilteredLoading = false, - groupingEnabled = false, - onCreateGroup, - activeGroupId, }: FormGeneratorControlsProps) { const { t } = useLanguage(); @@ -186,9 +179,15 @@ export function FormGeneratorControls({
)} - {/* Search Controls with Pagination - Hide when items are selected */} - {searchable && selectedCount === 0 && ( + {/* Toolbar: optional search + filters badge + CSV + pagination (search is optional) */} + {selectedCount === 0 && + (searchable || + (pagination && supportsBackendPagination) || + !!onCsvExport || + !!onRefresh || + activeFiltersCount > 0) && (
+ {searchable && (
+ )} {activeFiltersCount > 0 && ( {activeFiltersCount} {t('Filter')} @@ -219,16 +219,6 @@ export function FormGeneratorControls({ {csvExporting ? t('Exportiere...') : 'CSV'} )} - {groupingEnabled && onCreateGroup && ( - - )} {onRefresh && ( + {!sectionCollapsed && ( + + key={`${sk}-r${refreshNonce}-${JSON.stringify(filters)}-${JSON.stringify(sortConfigs)}-${activeViewKey ?? ''}`} + className={styles.groupSectionTableWrap} + columns={providedColumns} + data={[]} + searchable={false} + filterable={filterable} + sortable={sortable} + resizable={resizable} + pagination={pagination} + pageSize={pageSize} + pageSizeOptions={pageSizeOptions} + showPageSizeSelector={showPageSizeSelector} + selectable={selectable} + isRowSelectable={isRowSelectable} + inlineEditable={inlineEditable} + onInlineUpdate={onInlineUpdate} + inlineEditingRows={inlineEditingRows} + idField={idField} + actionButtons={actionButtons} + customActions={customActions} + onDelete={onDelete} + onDeleteMultiple={onDeleteMultiple} + batchActions={batchActions} + onRowClick={onRowClick} + onRowSelect={onRowSelect} + onSelectionChange={onSelectionChange} + getRowDataAttributes={getRowDataAttributes} + rowDraggable={rowDraggable} + onRowDragStart={onRowDragStart} + compact={compact} + localDataMode + viewKeyForQueries={activeViewKey} + initialSearchTerm={debouncedSearchTerm} + initialFilters={filters} + initialSort={sortConfigs} + apiEndpoint={apiEndpoint} + csvExportQueryParams={hookDataProp?.csvExportQueryParams} + csvExportContextFilters={sectionFilter} + csvExportFilenameSuffix={sk} + hookData={{ + ...hookDataProp, + refetch: async (p: any) => { + if (!hookDataProp?.refetchForSection) { + return { items: [], pagination: null }; + } + return hookDataProp.refetchForSection(p, sectionFilter, filters); + }, + ...(hookDataProp?.fetchFilterValues && typeof hookDataProp.fetchFilterValues === 'function' + ? { + fetchFilterValues: async (columnKey: string, crossFilters?: Record) => { + const merged: Record = { + ...filters, + ...(crossFilters || {}), + ...sectionFilter, + }; + return hookDataProp.fetchFilterValues(columnKey, merged); + }, + } + : {}), + }} + emptyMessage={emptyMessage} + /> + )} +
+ ); + })} +
+ + )}
); diff --git a/src/components/FormGenerator/GroupingManager/GroupRow.tsx b/src/components/FormGenerator/GroupingManager/GroupRow.tsx index 10f77ca..f48da2e 100644 --- a/src/components/FormGenerator/GroupingManager/GroupRow.tsx +++ b/src/components/FormGenerator/GroupingManager/GroupRow.tsx @@ -4,7 +4,12 @@ import { useLanguage } from '../../../providers/language/LanguageContext'; import { useConfirm } from '../../../hooks/useConfirm'; import styles from './GroupRow.module.css'; import fgTableCss from '../FormGeneratorTable/FormGeneratorTable.module.css'; -import type { TableGroupNode } from '../FormGeneratorTable/FormGeneratorTable'; + +/** Legacy folder-tree row model (client-side group tree); kept for GroupFolderRow typings. */ +export interface TableGroupNode { + name: string; + itemIds: string[]; +} import { FaFolder, FaFolderOpen, FaList, FaPen, FaPlus } from 'react-icons/fa'; // --------------------------------------------------------------------------- diff --git a/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css b/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css new file mode 100644 index 0000000..090715d --- /dev/null +++ b/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css @@ -0,0 +1,286 @@ +.toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px 14px; + padding: 8px 0 12px; + border-bottom: 1px solid var(--color-border, #e2e8f0); + margin-bottom: 8px; +} + +.popoverAnchor { + position: relative; +} + +.groupTrigger { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 10px; + border-radius: 8px; + border: 1px solid var(--color-border, #cbd5e1); + background: var(--color-bg, #fff); + color: var(--color-text, #0f172a); + cursor: pointer; + transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; +} + +.groupIcon { + display: block; + font-size: 16px; + opacity: 0.9; +} + +.groupTrigger:hover { + background: var(--bg-hover, rgba(15, 23, 42, 0.04)); + border-color: var(--color-primary, #64748b); +} + +.groupTriggerOpen { + border-color: var(--color-primary, #4a6fa5); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #4a6fa5) 25%, transparent); +} + +.popover { + position: absolute; + top: calc(100% + 6px); + left: 0; + z-index: 4200; + min-width: min(360px, calc(100vw - 24px)); + padding: 14px 14px 12px; + border-radius: 12px; + border: 1px solid var(--color-border, #e2e8f0); + background: var(--color-bg, #ffffff); + color: var(--color-text, #0f172a); + box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12); +} + +.popoverTitle { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-secondary, #94a3b8); + margin: 0 0 6px; +} + +.popoverHint { + margin: 0 0 12px; + font-size: 12px; + line-height: 1.45; + color: var(--text-muted, #64748b); +} + +.levelList { + display: flex; + flex-direction: column; + gap: 8px; +} + +.levelRow { + display: grid; + grid-template-columns: 1fr 118px 36px; + gap: 8px; + align-items: center; +} + +.select, +.selectOrder { + padding: 8px 10px; + font-size: 13px; + border-radius: 8px; + border: 1px solid var(--color-border, #cbd5e1); + background: var(--color-bg, #fff); + color: var(--color-text, #0f172a); + box-sizing: border-box; + width: 100%; + min-width: 0; +} + +.select:disabled, +.selectOrder:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.iconBtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: none; + border-radius: 8px; + background: transparent; + color: var(--text-secondary, #94a3b8); + cursor: pointer; +} + +.iconBtn:hover:not(:disabled) { + color: #fecaca; + background: rgba(239, 68, 68, 0.12); +} + +.iconBtn:disabled { + opacity: 0.25; + cursor: not-allowed; +} + +.addLevelBtn { + margin-top: 12px; + width: 100%; + padding: 8px 10px; + font-size: 12px; + font-weight: 600; + border-radius: 8px; + border: 1px dashed var(--color-border, #475569); + background: transparent; + color: var(--text-secondary, #94a3b8); + cursor: pointer; +} + +.addLevelBtn:hover { + border-color: var(--color-primary, #4a6fa5); + color: var(--color-primary, #7dd3fc); +} + +.activeSummary { + font-size: 12px; + color: var(--text-secondary, #64748b); + max-width: 220px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.viewBlock { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + margin-left: auto; +} + +.viewLabel { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-secondary, #64748b); +} + +.viewSelect { + min-width: 160px; + padding: 6px 10px; + font-size: 13px; + border-radius: 8px; + border: 1px solid var(--color-border, #cbd5e1); + background: var(--color-bg, #fff); + color: var(--color-text, #0f172a); +} + +.btnGhost { + padding: 6px 12px; + font-size: 12px; + font-weight: 600; + border-radius: 8px; + border: 1px solid var(--color-border, #cbd5e1); + background: transparent; + color: var(--color-text, #334155); + cursor: pointer; +} + +.btnGhost:hover { + background: var(--bg-hover, #f1f5f9); +} + +.btnDangerGhost { + padding: 6px 12px; + font-size: 12px; + border-radius: 8px; + border: 1px solid #fecaca; + background: transparent; + color: #b91c1c; + cursor: pointer; +} + +.btnDangerGhost:hover { + background: #fef2f2; +} + +.btnPrimary { + padding: 8px 16px; + font-size: 13px; + font-weight: 600; + border-radius: 8px; + border: none; + background: var(--color-primary, #4a6fa5); + color: #fff; + cursor: pointer; +} + +.btnPrimary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.modalBackdrop { + position: fixed; + inset: 0; + background: rgba(15, 23, 42, 0.5); + z-index: 4500; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; +} + +.modal { + background: var(--color-bg, #fff); + color: var(--color-text, #0f172a); + border-radius: 12px; + padding: 20px 22px; + max-width: 420px; + width: 100%; + box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2); +} + +.modal h3 { + margin: 0 0 8px; + font-size: 17px; +} + +.modalHint { + margin: 0 0 14px; + font-size: 13px; + color: var(--text-secondary, #64748b); + line-height: 1.45; +} + +.modalField { + margin-bottom: 12px; +} + +.modalField label { + display: block; + font-size: 12px; + font-weight: 600; + margin-bottom: 4px; + color: var(--text-secondary, #64748b); +} + +.modalField input { + width: 100%; + padding: 8px 10px; + font-size: 14px; + border: 1px solid var(--color-border, #cbd5e1); + border-radius: 8px; + box-sizing: border-box; +} + +.modalActions { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-top: 18px; +} diff --git a/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx b/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx new file mode 100644 index 0000000..e59743c --- /dev/null +++ b/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx @@ -0,0 +1,337 @@ +import { useState, useMemo, useCallback, useRef, useEffect } from 'react'; +import { FaLayerGroup, FaTrash } from 'react-icons/fa'; +import { useLanguage } from '../../../providers/language/LanguageContext'; +import styles from './TableViewsBar.module.css'; + +export interface TableViewOption { + id: string; + viewKey: string; + displayName: string; +} + +/** One grouping level (ClickUp-style): column + band order for that level. */ +export interface GroupByLevelSpec { + field: string; + direction: 'asc' | 'desc'; +} + +export interface TableViewsBarProps { + views: TableViewOption[]; + loadingViews: boolean; + activeViewKey: string | null; + activeViewId: string | null; + groupByLevels: GroupByLevelSpec[]; + onGroupByLevelsChange: (levels: GroupByLevelSpec[]) => void; + onSelectView: (viewKey: string | null) => void; + columnOptions: Array<{ key: string; label: string }>; + onCreateView: (displayName: string, viewKey: string) => void | Promise; + /** When a saved view is active, overwrite its config (filters, sort, grouping, folds). Optional. */ + onSaveActiveView?: () => void | Promise; + onUpdateViewGrouping: (viewId: string, levels: GroupByLevelSpec[]) => void | Promise; + onDeleteView?: (viewId: string) => void | Promise; + onReloadViews: () => void; +} + +function slugify(name: string): string { + return name + .trim() + .toLowerCase() + .replace(/\s+/g, '-') + .replace(/[^a-z0-9-_]/g, '') + .replace(/-+/g, '-') + .replace(/^-|-$/g, '') || 'view'; +} + +export function groupLevelsToApiPayload(levels: GroupByLevelSpec[]) { + return levels + .filter((l) => l.field) + .map((l) => ({ field: l.field, nullLabel: '—', direction: l.direction })); +} + +function commitLevels( + next: GroupByLevelSpec[], + activeViewId: string | null, + onGroupByLevelsChange: (l: GroupByLevelSpec[]) => void, + onUpdateViewGrouping: (id: string, l: GroupByLevelSpec[]) => void | Promise, +) { + onGroupByLevelsChange(next); + if (activeViewId) { + void Promise.resolve(onUpdateViewGrouping(activeViewId, next)); + } +} + +export function TableViewsBar({ + views, + loadingViews, + activeViewKey, + activeViewId, + groupByLevels, + onGroupByLevelsChange, + onSelectView, + columnOptions, + onCreateView, + onSaveActiveView, + onUpdateViewGrouping, + onDeleteView, + onReloadViews, +}: TableViewsBarProps) { + const { t } = useLanguage(); + const [groupMenuOpen, setGroupMenuOpen] = useState(false); + const wrapRef = useRef(null); + const [saveOpen, setSaveOpen] = useState(false); + const [newName, setNewName] = useState(''); + const [saving, setSaving] = useState(false); + + useEffect(() => { + if (!groupMenuOpen) return; + const onDoc = (e: MouseEvent) => { + const el = wrapRef.current; + if (el && !el.contains(e.target as Node)) setGroupMenuOpen(false); + }; + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') setGroupMenuOpen(false); + }; + document.addEventListener('mousedown', onDoc); + document.addEventListener('keydown', onKey); + return () => { + document.removeEventListener('mousedown', onDoc); + document.removeEventListener('keydown', onKey); + }; + }, [groupMenuOpen]); + + const levelsForUi = useMemo( + () => (groupByLevels.length > 0 ? groupByLevels : [{ field: '', direction: 'asc' as const }]), + [groupByLevels], + ); + + const usedFields = useMemo( + () => new Set(groupByLevels.map((l) => l.field).filter(Boolean)), + [groupByLevels], + ); + + const columnsForRow = useCallback( + (_rowIdx: number, currentField: string) => + columnOptions.filter((c) => c.key === currentField || !usedFields.has(c.key) || !c.key), + [columnOptions, usedFields], + ); + + const [overwriteSaving, setOverwriteSaving] = useState(false); + + const _onClickSave = useCallback(async () => { + if (activeViewId && onSaveActiveView) { + setOverwriteSaving(true); + try { + await onSaveActiveView(); + await onReloadViews(); + } catch (e) { + console.error('Save active view failed', e); + } finally { + setOverwriteSaving(false); + } + return; + } + setSaveOpen(true); + setNewName(''); + }, [activeViewId, onSaveActiveView, onReloadViews]); + + const _saveNew = async () => { + const name = newName.trim(); + const slug = slugify(name); + if (!name || !slug) return; + setSaving(true); + try { + await onCreateView(name, slug); + setSaveOpen(false); + setNewName(''); + await onReloadViews(); + } finally { + setSaving(false); + } + }; + + const updateLevel = (idx: number, patch: Partial) => { + const working = levelsForUi.map((l, i) => (i === idx ? { ...l, ...patch } : l)); + const normalized = working.filter((l) => l.field); + commitLevels(normalized, activeViewId, onGroupByLevelsChange, onUpdateViewGrouping); + }; + + const addLevelRow = () => { + commitLevels( + [...groupByLevels, { field: '', direction: 'asc' }], + activeViewId, + onGroupByLevelsChange, + onUpdateViewGrouping, + ); + }; + + const removeLevel = (idx: number) => { + const working = levelsForUi.filter((_, i) => i !== idx); + const normalized = working.filter((l) => l.field); + commitLevels(normalized, activeViewId, onGroupByLevelsChange, onUpdateViewGrouping); + }; + + const summary = + groupByLevels.length === 0 + ? t('Keine') + : groupByLevels + .filter((l) => l.field) + .map((l) => columnOptions.find((c) => c.key === l.field)?.label ?? l.field) + .join(' › '); + + return ( +
+
+ + {groupMenuOpen && ( +
+
{t('Gruppieren nach')}
+

{t('Wählen Sie eine Spalte und die Reihenfolge der Gruppen.')}

+
+ {levelsForUi.map((level, idx) => ( +
+ + + +
+ ))} +
+ +
+ )} +
+ + + {groupByLevels.filter((l) => l.field).length === 0 + ? t('Nicht gruppiert') + : `${t('Aktiv')}: ${summary}`} + + +
+ {t('Ansicht')} + + + {activeViewId && onDeleteView && ( + + )} +
+ + {saveOpen && ( +
{ + if (e.target === e.currentTarget) setSaveOpen(false); + }} + > +
e.stopPropagation()}> +

{t('Neue Ansicht')}

+

{t('Übernimmt Filter, Sortierung und Gruppierung.')}

+
+ + setNewName(e.target.value)} + placeholder={t('z. B. Nach Status')} + autoFocus + /> +
+
+ + +
+
+
+ )} +
+ ); +} diff --git a/src/components/FormGenerator/TableViewsBar/index.ts b/src/components/FormGenerator/TableViewsBar/index.ts new file mode 100644 index 0000000..da9924b --- /dev/null +++ b/src/components/FormGenerator/TableViewsBar/index.ts @@ -0,0 +1 @@ +export { TableViewsBar, groupLevelsToApiPayload, type TableViewsBarProps, type TableViewOption, type GroupByLevelSpec } from './TableViewsBar'; diff --git a/src/hooks/useBilling.ts b/src/hooks/useBilling.ts index de8eb7d..8be65d9 100644 --- a/src/hooks/useBilling.ts +++ b/src/hooks/useBilling.ts @@ -11,6 +11,7 @@ import { fetchBalances, fetchBalanceForMandate, fetchTransactions, + fetchTransactionsPaginated, fetchStatistics, fetchAllowedProviders, fetchSettingsAdmin, @@ -31,7 +32,9 @@ import { type MandateUserSummary, type StatisticsRangeRequest, type BillingBucketSize, + type BillingTransactionsPaginationParams, } from '../api/billingApi'; +import type { GroupLayout } from '../api/connectionApi'; // Re-export types export type { @@ -47,7 +50,7 @@ export type { BillingBucketSize, }; -export type { TransactionType, ReferenceType } from '../api/billingApi'; +export type { TransactionType, ReferenceType, BillingTransactionsPaginationParams } from '../api/billingApi'; /** * Hook for user billing operations @@ -55,6 +58,17 @@ export type { TransactionType, ReferenceType } from '../api/billingApi'; export function useBilling() { const [balances, setBalances] = useState([]); const [transactions, setTransactions] = useState([]); + const [transactionsPagination, setTransactionsPagination] = useState<{ + currentPage: number; + pageSize: number; + totalItems: number; + totalPages: number; + } | null>(null); + const [transactionsGroupLayout, setTransactionsGroupLayout] = useState(null); + const [transactionsAppliedView, setTransactionsAppliedView] = useState<{ + viewKey?: string; + displayName?: string; + } | null>(null); const [statistics, setStatistics] = useState(null); const [allowedProviders, setAllowedProviders] = useState([]); const { request, isLoading: loading, error } = useApiRequest(); @@ -87,14 +101,38 @@ export function useBilling() { try { const data = await fetchTransactions(request, limit, offset); setTransactions(Array.isArray(data) ? data : []); + setTransactionsPagination(null); + setTransactionsGroupLayout(null); + setTransactionsAppliedView(null); return data; } catch (err) { console.error('Error loading transactions:', err); setTransactions([]); + setTransactionsPagination(null); + setTransactionsGroupLayout(null); + setTransactionsAppliedView(null); return []; } }, [request]); + const refetchTransactions = useCallback(async (params?: BillingTransactionsPaginationParams) => { + try { + const data = await fetchTransactionsPaginated(request, params); + setTransactions(Array.isArray(data.items) ? data.items : []); + setTransactionsPagination(data.pagination ?? null); + setTransactionsGroupLayout(data.groupLayout ?? null); + setTransactionsAppliedView(data.appliedView ?? null); + return data; + } catch (err) { + console.error('Error loading transactions:', err); + setTransactions([]); + setTransactionsPagination(null); + setTransactionsGroupLayout(null); + setTransactionsAppliedView(null); + return null; + } + }, [request]); + const loadStatistics = useCallback(async (range: StatisticsRangeRequest) => { try { const data = await fetchStatistics(request, range); @@ -129,6 +167,9 @@ export function useBilling() { return { balances, transactions, + transactionsPagination, + transactionsGroupLayout, + transactionsAppliedView, statistics, allowedProviders, loading, @@ -136,6 +177,7 @@ export function useBilling() { loadBalances, loadBalanceForMandate, loadTransactions, + refetchTransactions, loadStatistics, loadAllowedProviders, refetch: loadBalances, diff --git a/src/hooks/useConnections.ts b/src/hooks/useConnections.ts index b3b43d7..299480c 100644 --- a/src/hooks/useConnections.ts +++ b/src/hooks/useConnections.ts @@ -17,12 +17,13 @@ import { type AttributeDefinition, type PaginationParams, type CreateConnectionData, - type ConnectResponse + type ConnectResponse, + type PaginatedResponse, + type GroupLayout, } from '../api/connectionApi'; // Re-export types for backward compatibility export type { Connection, AttributeDefinition, PaginationParams, CreateConnectionData, ConnectResponse }; -export type { TableGroupNode } from '../api/connectionApi'; // Hook for managing connections export function useConnections() { @@ -35,7 +36,8 @@ export function useConnections() { totalItems: number; totalPages: number; } | null>(null); - const [groupTree, setGroupTree] = useState([]); + const [groupLayout, setGroupLayout] = useState(null); + const [appliedView, setAppliedView] = useState<{ viewKey?: string; displayName?: string } | null>(null); const [isConnecting, setIsConnecting] = useState(false); const [connectError, setConnectError] = useState(null); const { request, isLoading, error } = useApiRequest(); @@ -91,6 +93,69 @@ export function useConnections() { } }, [checkPermission]); + const fetchGroupSectionSummaries = useCallback( + async (base: { + search?: string; + filters?: Record; + sort?: Array<{ field: string; direction: string }>; + viewKey?: string | null; + groupField: string; + groupDirection?: 'asc' | 'desc'; + }) => { + const pObj: Record = { + page: 1, + pageSize: 25, + groupByLevels: [ + { + field: base.groupField, + nullLabel: '—', + direction: base.groupDirection || 'asc', + }, + ], + }; + if (base.search) (pObj as { search?: string }).search = base.search; + if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters; + if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort; + if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey; + const { data } = await api.get('/api/connections/', { + params: { mode: 'groupSummary', pagination: JSON.stringify(pObj) }, + }); + return Array.isArray(data?.groups) ? data.groups : []; + }, + [], + ); + + const refetchForSection = useCallback( + async ( + paginationParams: any, + sectionFilter: Record, + parentColumnFilters?: Record, + ) => { + const mergedFilters = { + ...(parentColumnFilters || {}), + ...(paginationParams.filters || {}), + ...sectionFilter, + }; + const pObj: Record = { + page: paginationParams.page, + pageSize: paginationParams.pageSize, + filters: mergedFilters, + groupByLevels: [], + }; + if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort; + if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search; + if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey; + const { data } = await api.get('/api/connections/', { + params: { pagination: JSON.stringify(pObj) }, + }); + if (data && typeof data === 'object' && 'items' in data) { + return { items: data.items, pagination: data.pagination }; + } + return { items: [], pagination: null }; + }, + [], + ); + // Fetch connections with pagination support const fetchConnections = useCallback(async (params?: PaginationParams): Promise => { try { @@ -103,14 +168,15 @@ export function useConnections() { if (data.pagination) { setPagination(data.pagination); } - if (Array.isArray(data.groupTree)) { - setGroupTree(data.groupTree); - } + setGroupLayout((data as PaginatedResponse).groupLayout ?? null); + setAppliedView((data as PaginatedResponse).appliedView ?? null); } else { // Handle non-paginated response (backward compatibility) const items = Array.isArray(data) ? data : []; setConnections(items); setPagination(null); + setGroupLayout(null); + setAppliedView(null); } return Array.isArray(data) ? data : (data?.items || []); @@ -118,6 +184,8 @@ export function useConnections() { console.error('Error fetching connections:', error); setConnections([]); setPagination(null); + setGroupLayout(null); + setAppliedView(null); throw error; } }, [request]); @@ -824,6 +892,8 @@ export function useConnections() { attributes, permissions, pagination, + groupLayout, + appliedView, generateEditFieldsFromAttributes, ensureAttributesLoaded, fetchAttributes, @@ -832,7 +902,8 @@ export function useConnections() { updateOptimistically, handleInlineUpdate, fetchConnectionById, - groupTree, + fetchGroupSectionSummaries, + refetchForSection, }; } diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts index 72d390d..a770388 100644 --- a/src/hooks/useFiles.ts +++ b/src/hooks/useFiles.ts @@ -22,7 +22,6 @@ import { moveFiles as moveFilesApi, type FolderInfo, } from '../api/fileApi'; -import type { TableGroupNode } from '../api/connectionApi'; export interface FilePreviewResult { success: boolean; @@ -69,6 +68,7 @@ export interface PaginationParams { sort?: Array<{ field: string; direction: 'asc' | 'desc' }>; filters?: Record; search?: string; + viewKey?: string; } // Files list hook @@ -82,7 +82,8 @@ export function useUserFiles() { totalItems: number; totalPages: number; } | null>(null); - const [groupTree, setGroupTree] = useState([]); + const [groupLayout, setGroupLayout] = useState(null); + const [appliedView, setAppliedView] = useState<{ viewKey?: string; displayName?: string } | null>(null); const { request, isLoading: loading, error } = useApiRequest(); const { checkPermission } = usePermissions(); @@ -140,6 +141,69 @@ export function useUserFiles() { } }, [checkPermission]); + const fetchGroupSectionSummaries = useCallback( + async (base: { + search?: string; + filters?: Record; + sort?: Array<{ field: string; direction: string }>; + viewKey?: string | null; + groupField: string; + groupDirection?: 'asc' | 'desc'; + }) => { + const pObj: Record = { + page: 1, + pageSize: 25, + groupByLevels: [ + { + field: base.groupField, + nullLabel: '—', + direction: base.groupDirection || 'asc', + }, + ], + }; + if (base.search) (pObj as { search?: string }).search = base.search; + if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters; + if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort; + if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey; + const { data } = await api.get('/api/files/list', { + params: { mode: 'groupSummary', pagination: JSON.stringify(pObj) }, + }); + return Array.isArray(data?.groups) ? data.groups : []; + }, + [], + ); + + const refetchForSection = useCallback( + async ( + paginationParams: PaginationParams & { page: number; pageSize: number }, + sectionFilter: Record, + parentColumnFilters?: Record, + ) => { + const mergedFilters = { + ...(parentColumnFilters || {}), + ...(paginationParams.filters || {}), + ...sectionFilter, + }; + const pObj: Record = { + page: paginationParams.page, + pageSize: paginationParams.pageSize, + filters: mergedFilters, + groupByLevels: [], + }; + if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort; + if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search; + if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey; + const { data } = await api.get('/api/files/list', { + params: { pagination: JSON.stringify(pObj) }, + }); + if (data && typeof data === 'object' && 'items' in data) { + return { items: data.items, pagination: data.pagination }; + } + return { items: [], pagination: null }; + }, + [], + ); + const fetchFiles = useCallback(async (params?: PaginationParams) => { // Check if user is authenticated before fetching files const cachedUser = getUserDataCache(); @@ -182,28 +246,20 @@ export function useUserFiles() { if (data.pagination) { setPagination(data.pagination); } - if (Array.isArray((data as any).groupTree)) { - setGroupTree((data as any).groupTree); - } + setGroupLayout((data as any).groupLayout ?? null); + setAppliedView((data as any).appliedView ?? null); } else { - // Handle non-paginated response (backward compatibility) - console.log('📋 Processing non-paginated response:', { - isArray: Array.isArray(data), - dataLength: Array.isArray(data) ? data.length : 'not an array', - firstItemRaw: Array.isArray(data) && data.length > 0 ? data[0] : null, - allDataRaw: data - }); - - // Use backend data directly - no mapping needed, just like prompts const items = Array.isArray(data) ? data : []; - console.log('📊 Final files array (non-paginated, using backend data directly):', items); setFiles(items); setPagination(null); + setGroupLayout(null); + setAppliedView(null); } } catch (error: any) { - // Error is already handled by useApiRequest setFiles([]); setPagination(null); + setGroupLayout(null); + setAppliedView(null); } }, [request]); @@ -338,10 +394,13 @@ export function useUserFiles() { attributes, permissions, pagination, - groupTree, + groupLayout, + appliedView, fetchFileById, generateEditFieldsFromAttributes, - ensureAttributesLoaded + ensureAttributesLoaded, + fetchGroupSectionSummaries, + refetchForSection, }; } diff --git a/src/hooks/usePrompts.ts b/src/hooks/usePrompts.ts index 20870e7..26cef0b 100644 --- a/src/hooks/usePrompts.ts +++ b/src/hooks/usePrompts.ts @@ -13,7 +13,6 @@ import { type AttributeDefinition, type PaginationParams } from '../api/promptApi'; -import type { TableGroupNode } from '../api/connectionApi'; // Re-export types for backward compatibility export type { Prompt, AttributeDefinition, PaginationParams }; @@ -35,7 +34,8 @@ export function usePrompts() { totalItems: number; totalPages: number; } | null>(null); - const [groupTree, setGroupTree] = useState([]); + const [groupLayout, setGroupLayout] = useState(null); + const [appliedView, setAppliedView] = useState<{ viewKey?: string; displayName?: string } | null>(null); const { request, isLoading: loading, error } = useApiRequest(); const { checkPermission } = usePermissions(); @@ -90,6 +90,69 @@ export function usePrompts() { } }, [checkPermission]); + const fetchGroupSectionSummaries = useCallback( + async (base: { + search?: string; + filters?: Record; + sort?: Array<{ field: string; direction: string }>; + viewKey?: string | null; + groupField: string; + groupDirection?: 'asc' | 'desc'; + }) => { + const pObj: Record = { + page: 1, + pageSize: 25, + groupByLevels: [ + { + field: base.groupField, + nullLabel: '—', + direction: base.groupDirection || 'asc', + }, + ], + }; + if (base.search) (pObj as { search?: string }).search = base.search; + if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters; + if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort; + if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey; + const { data } = await api.get('/api/prompts', { + params: { mode: 'groupSummary', pagination: JSON.stringify(pObj) }, + }); + return Array.isArray(data?.groups) ? data.groups : []; + }, + [], + ); + + const refetchForSection = useCallback( + async ( + paginationParams: any, + sectionFilter: Record, + parentColumnFilters?: Record, + ) => { + const mergedFilters = { + ...(parentColumnFilters || {}), + ...(paginationParams.filters || {}), + ...sectionFilter, + }; + const pObj: Record = { + page: paginationParams.page, + pageSize: paginationParams.pageSize, + filters: mergedFilters, + groupByLevels: [], + }; + if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort; + if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search; + if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey; + const { data } = await api.get('/api/prompts', { + params: { pagination: JSON.stringify(pObj) }, + }); + if (data && typeof data === 'object' && 'items' in data) { + return { items: data.items, pagination: data.pagination }; + } + return { items: [], pagination: null }; + }, + [], + ); + const fetchPrompts = useCallback(async (params?: PaginationParams) => { try { const data = await fetchPromptsApi(request, params); @@ -101,19 +164,22 @@ export function usePrompts() { if (data.pagination) { setPagination(data.pagination); } - if (Array.isArray((data as any).groupTree)) { - setGroupTree((data as any).groupTree); - } + setGroupLayout(data.groupLayout ?? null); + setAppliedView(data.appliedView ?? null); } else { // Handle non-paginated response (backward compatibility) const items = Array.isArray(data) ? data : []; setPrompts(items); setPagination(null); + setGroupLayout(null); + setAppliedView(null); } } catch (error: any) { // Error is already handled by useApiRequest setPrompts([]); setPagination(null); + setGroupLayout(null); + setAppliedView(null); } }, [request]); @@ -459,11 +525,14 @@ export function usePrompts() { attributes, permissions, pagination, - groupTree, + groupLayout, + appliedView, fetchPromptById, generateEditFieldsFromAttributes, generateCreateFieldsFromAttributes, - ensureAttributesLoaded + ensureAttributesLoaded, + fetchGroupSectionSummaries, + refetchForSection, }; } diff --git a/src/pages/basedata/ConnectionsPage.tsx b/src/pages/basedata/ConnectionsPage.tsx index 39673ca..64e7826 100644 --- a/src/pages/basedata/ConnectionsPage.tsx +++ b/src/pages/basedata/ConnectionsPage.tsx @@ -30,11 +30,15 @@ export const ConnectionsPage: React.FC = () => { attributes, permissions, pagination, + groupLayout, + appliedView, loading, error, refetch, fetchConnectionById, updateOptimistically, + fetchGroupSectionSummaries, + refetchForSection, deleteConnection, handleInlineUpdate, createConnectionAndAuth, @@ -44,7 +48,6 @@ export const ConnectionsPage: React.FC = () => { refreshMicrosoftToken, refreshGoogleToken, isConnecting, - groupTree, } = useConnections(); const [editingConnection, setEditingConnection] = useState(null); @@ -415,6 +418,8 @@ export const ConnectionsPage: React.FC = () => { data={connections} columns={columns} apiEndpoint="/api/connections/" + tableContextKey="connections" + tableGroupLayoutMode="sections" loading={loading} pagination={true} pageSize={25} @@ -467,12 +472,14 @@ export const ConnectionsPage: React.FC = () => { refetch, permissions, pagination, + groupLayout, + appliedView, handleDelete: deleteConnection, handleInlineUpdate, updateOptimistically, - groupTree, + fetchGroupSectionSummaries, + refetchForSection, }} - groupingConfig={{ contextKey: 'connections', enabled: true }} emptyMessage={t('Keine Verbindungen gefunden')} />
diff --git a/src/pages/basedata/FilesPage.tsx b/src/pages/basedata/FilesPage.tsx index d1d019e..97b6b85 100644 --- a/src/pages/basedata/FilesPage.tsx +++ b/src/pages/basedata/FilesPage.tsx @@ -8,7 +8,7 @@ */ import React, { useState, useMemo, useEffect, useRef, useCallback, type PointerEvent as RPointerEvent } from 'react'; -import { useUserFiles, useFileOperations } from '../../hooks/useFiles'; +import { useUserFiles, useFileOperations, type PaginationParams } from '../../hooks/useFiles'; import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable'; import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm'; import { FormGeneratorTree } from '../../components/FormGenerator/FormGeneratorTree'; @@ -50,8 +50,12 @@ export const FilesPage: React.FC = () => { error, refetch: tableRefetch, pagination, + groupLayout, + appliedView, fetchFileById, updateFileOptimistically, + fetchGroupSectionSummaries: fetchGroupSectionSummariesFromHook, + refetchForSection: refetchForSectionFromHook, } = useUserFiles(); const { @@ -108,6 +112,39 @@ export const FilesPage: React.FC = () => { await tableRefetch(nextParams); }, [tableRefetch, selectedFolderId, viewMode]); + const fetchGroupSectionSummaries = useCallback( + async (base: { + search?: string; + filters?: Record; + sort?: Array<{ field: string; direction: string }>; + viewKey?: string | null; + groupField: string; + groupDirection?: 'asc' | 'desc'; + }) => { + const filters = { ...(base.filters || {}) }; + if (viewMode === 'folder' && selectedFolderId) { + filters.folderId = selectedFolderId; + } + return fetchGroupSectionSummariesFromHook({ ...base, filters }); + }, + [fetchGroupSectionSummariesFromHook, viewMode, selectedFolderId], + ); + + const refetchForSection = useCallback( + async ( + paginationParams: PaginationParams & { page: number; pageSize: number }, + sectionFilter: Record, + parentColumnFilters?: Record, + ) => { + const merged = { ...(parentColumnFilters || {}) }; + if (viewMode === 'folder' && selectedFolderId) { + merged.folderId = selectedFolderId; + } + return refetchForSectionFromHook(paginationParams, sectionFilter, merged); + }, + [refetchForSectionFromHook, viewMode, selectedFolderId], + ); + const _refreshAll = useCallback(async () => { await _tableRefetch({ page: 1, pageSize: 25 }); setTreeKey(k => k + 1); @@ -409,6 +446,8 @@ export const FilesPage: React.FC = () => { data={tableFiles || []} columns={columns} apiEndpoint="/api/files/list" + tableContextKey="files/list" + tableGroupLayoutMode="sections" loading={tableLoading} pagination={true} pageSize={25} @@ -459,11 +498,15 @@ export const FilesPage: React.FC = () => { hookData={{ refetch: _tableRefetch, pagination, + groupLayout, + appliedView, permissions, handleDelete: handleFileDelete, handleInlineUpdate, updateOptimistically: updateFileOptimistically, previewingFiles, + fetchGroupSectionSummaries, + refetchForSection, }} emptyMessage={t('Keine Dateien gefunden')} /> diff --git a/src/pages/basedata/PromptsPage.tsx b/src/pages/basedata/PromptsPage.tsx index 86eba34..3cbc1fa 100644 --- a/src/pages/basedata/PromptsPage.tsx +++ b/src/pages/basedata/PromptsPage.tsx @@ -31,12 +31,15 @@ export const PromptsPage: React.FC = () => { attributes, permissions, pagination, + groupLayout, + appliedView, loading, error, refetch, - groupTree, fetchPromptById, updateOptimistically, + fetchGroupSectionSummaries, + refetchForSection, } = usePrompts(); // Operations hook @@ -205,6 +208,8 @@ export const PromptsPage: React.FC = () => { data={prompts} columns={columns} apiEndpoint="/api/prompts" + tableContextKey="prompts" + tableGroupLayoutMode="sections" loading={loading} pagination={true} pageSize={25} @@ -234,12 +239,14 @@ export const PromptsPage: React.FC = () => { refetch: _tableRefetch, permissions, pagination, + groupLayout, + appliedView, handleDelete: handlePromptDelete, handleInlineUpdate, updateOptimistically, - groupTree, + fetchGroupSectionSummaries, + refetchForSection, }} - groupingConfig={{ contextKey: 'prompts', enabled: true }} emptyMessage={t('Keine Prompts gefunden')} />
diff --git a/src/pages/billing/Billing.module.css b/src/pages/billing/Billing.module.css index 23bb649..de49b0a 100644 --- a/src/pages/billing/Billing.module.css +++ b/src/pages/billing/Billing.module.css @@ -6,13 +6,36 @@ .billingDashboard { padding: 1.5rem; - height: 100%; + /* Fill MainLayout outletShell (flex column); height:100% alone does not grow the flex item */ + flex: 1; + min-height: 0; width: 100%; display: flex; flex-direction: column; + overflow-x: hidden; overflow-y: auto; } +/* Flex host for tab panels so the transactions tab can grow to the viewport */ +.billingTabBody { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + /* Overview/Diagramme: scroll; Transaktionen: single flex child fills height */ + overflow-x: hidden; + overflow-y: auto; +} + +/* Transactions tab: consume remaining viewport so nested tables can flex */ +.transactionsTabLayout { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} + .pageHeader { margin-bottom: 2rem; } diff --git a/src/pages/billing/BillingDataView.tsx b/src/pages/billing/BillingDataView.tsx index 0dd3caf..ade7771 100644 --- a/src/pages/billing/BillingDataView.tsx +++ b/src/pages/billing/BillingDataView.tsx @@ -19,6 +19,7 @@ import type { AttributeDefinition } from '../../api/attributesApi'; import { resolveColumnTypes } from '../../utils/columnTypeResolver'; import { useBilling, type BillingBucketSize } from '../../hooks/useBilling'; import { UserTransaction } from '../../api/billingApi'; +import type { GroupLayout } from '../../api/connectionApi'; import { formatBinaryDataSizeFromMebibytes } from '../../utils/formatDataSize'; import { useLanguage } from '../../providers/language/LanguageContext'; import { @@ -343,6 +344,11 @@ export const BillingDataView: React.FC = () => { const [transactionsLoading, setTransactionsLoading] = useState(false); const [transactionsError, setTransactionsError] = useState(null); const [transactionsPagination, setTransactionsPagination] = useState(null); + const [transactionsGroupLayout, setTransactionsGroupLayout] = useState(null); + const [transactionsAppliedView, setTransactionsAppliedView] = useState<{ + viewKey?: string; + displayName?: string; + } | null>(null); useEffect(() => { fetchAttributes(request, 'BillingTransactionView') @@ -479,6 +485,8 @@ export const BillingDataView: React.FC = () => { if (paginationParams.sort) pObj.sort = paginationParams.sort; if (paginationParams.filters) pObj.filters = paginationParams.filters; if (paginationParams.search) pObj.search = paginationParams.search; + if (paginationParams.viewKey) pObj.viewKey = paginationParams.viewKey; + if (paginationParams.groupByLevels !== undefined) pObj.groupByLevels = paginationParams.groupByLevels; if (Object.keys(pObj).length > 0) { params.pagination = JSON.stringify(pObj); } @@ -489,20 +497,96 @@ export const BillingDataView: React.FC = () => { if (data && typeof data === 'object' && 'items' in data) { setTransactions(Array.isArray(data.items) ? data.items : []); - if (data.pagination) { - setTransactionsPagination(data.pagination); - } + setTransactionsPagination(data.pagination ?? null); + setTransactionsGroupLayout(data.groupLayout ?? null); + setTransactionsAppliedView(data.appliedView ?? null); + return data; } else { setTransactions(Array.isArray(data) ? data : []); + setTransactionsPagination(null); + setTransactionsGroupLayout(null); + setTransactionsAppliedView(null); + return data; } } catch (err: any) { console.error('Failed to load transactions:', err); setTransactionsError(err.response?.data?.detail || err.message || t('Fehler beim Laden der Transaktionen')); + setTransactionsGroupLayout(null); + setTransactionsAppliedView(null); } finally { setTransactionsLoading(false); } + return null; }, [_scopeParams, t]); + const fetchGroupSectionSummaries = useCallback( + async (base: { + search?: string; + filters?: Record; + sort?: Array<{ field: string; direction: string }>; + viewKey?: string | null; + groupField: string; + groupDirection?: 'asc' | 'desc'; + }) => { + const pObj: Record = { + page: 1, + pageSize: 25, + groupByLevels: [ + { + field: base.groupField, + nullLabel: '—', + direction: base.groupDirection || 'asc', + }, + ], + }; + if (base.search) (pObj as { search?: string }).search = base.search; + if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters; + if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort; + if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey; + const params: Record = { + ..._scopeParams, + mode: 'groupSummary', + pagination: JSON.stringify(pObj), + }; + const { data } = await api.get('/api/billing/view/users/transactions', { params }); + return Array.isArray(data?.groups) ? data.groups : []; + }, + [_scopeParams], + ); + + const refetchForSection = useCallback( + async ( + paginationParams: any, + sectionFilter: Record, + parentColumnFilters?: Record, + ) => { + const mergedFilters = { + ...(parentColumnFilters || {}), + ...(paginationParams.filters || {}), + ...sectionFilter, + }; + const pObj: Record = { + page: paginationParams.page, + pageSize: paginationParams.pageSize, + filters: mergedFilters, + groupByLevels: [], + }; + if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort; + if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search; + if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey; + const params: Record = { + ..._scopeParams, + pagination: JSON.stringify(pObj), + }; + const { data } = await api.get('/api/billing/view/users/transactions', { params }); + if (data && typeof data === 'object' && 'items' in data) { + return { items: data.items, pagination: data.pagination }; + } + return { items: [], pagination: null }; + }, + [_scopeParams], + ); + const _fetchTransactionFilterValues = useCallback(async ( columnKey: string, crossFilters?: Record, @@ -518,11 +602,28 @@ export const BillingDataView: React.FC = () => { return Array.isArray(resp.data) ? resp.data : []; }, [_scopeParams]); - const transactionsHookData = useMemo(() => ({ - refetch: _loadTransactions, - pagination: transactionsPagination || undefined, - fetchFilterValues: _fetchTransactionFilterValues, - }), [_loadTransactions, transactionsPagination, _fetchTransactionFilterValues]); + const transactionsHookData = useMemo( + () => ({ + refetch: _loadTransactions, + pagination: transactionsPagination || undefined, + groupLayout: transactionsGroupLayout ?? undefined, + appliedView: transactionsAppliedView ?? undefined, + fetchFilterValues: _fetchTransactionFilterValues, + fetchGroupSectionSummaries, + refetchForSection, + csvExportQueryParams: _scopeParams, + }), + [ + _loadTransactions, + transactionsPagination, + transactionsGroupLayout, + transactionsAppliedView, + _fetchTransactionFilterValues, + fetchGroupSectionSummaries, + refetchForSection, + _scopeParams, + ], + ); const _rawTransactionColumns: ColumnConfig[] = useMemo(() => [ { key: 'sysCreatedAt', label: t('Datum'), sortable: true, width: 160 }, @@ -635,6 +736,7 @@ export const BillingDataView: React.FC = () => {
)} +
{/* ================================================================ */} {/* Tab: Übersicht (KPI overview) */} {/* ================================================================ */} @@ -722,7 +824,7 @@ export const BillingDataView: React.FC = () => { {/* Tab: Transaktionen */} {/* ================================================================ */} {activeTab === 'transactions' && ( -
+
{transactionsError && (
{transactionsError} @@ -734,6 +836,8 @@ export const BillingDataView: React.FC = () => { data={transactions} columns={columns} apiEndpoint="/api/billing/view/users/transactions" + tableContextKey="billing/view/users/transactions" + tableGroupLayoutMode="sections" loading={transactionsLoading} pagination={true} pageSize={25} @@ -742,12 +846,13 @@ export const BillingDataView: React.FC = () => { sortable={true} selectable={false} emptyMessage={t('Keine Transaktionen vorhanden')} - onRefresh={_loadTransactions} hookData={transactionsHookData} />
)} +
+
); }; diff --git a/src/pages/billing/BillingTransactions.tsx b/src/pages/billing/BillingTransactions.tsx index b176ff8..3e862cf 100644 --- a/src/pages/billing/BillingTransactions.tsx +++ b/src/pages/billing/BillingTransactions.tsx @@ -1,149 +1,178 @@ /** * Billing Transactions Page - * - * Zeigt die Transaktionshistorie für den Benutzer. + * + * Transaktionshistorie mit FormGeneratorTable (Suche, Filter, Sortierung, Ansichten, Gruppierung). */ -import React, { useEffect, useState } from 'react'; +import React, { useMemo } from 'react'; import { useBilling, type BillingTransaction } from '../../hooks/useBilling'; import { BillingNav } from './BillingNav'; import styles from './Billing.module.css'; - +import { FormGeneratorTable, type ColumnConfig } from '../../components/FormGenerator/FormGeneratorTable'; import { useLanguage } from '../../providers/language/LanguageContext'; -// ============================================================================ -// TRANSACTION ROW COMPONENT -// ============================================================================ - -interface TransactionRowProps { - transaction: BillingTransaction; +function typePillClass(type: string): string { + switch (type) { + case 'CREDIT': + return styles.credit; + case 'DEBIT': + return styles.debit; + case 'ADJUSTMENT': + return styles.adjustment; + default: + return ''; + } } -const TransactionRow: React.FC = ({ transaction }) => { - const formatCurrency = (amount: number) => { - return new Intl.NumberFormat('de-CH', { - style: 'currency', - currency: 'CHF' - }).format(amount); - }; - - const formatDate = (dateString?: string) => { - if (!dateString) return '-'; - return new Date(dateString).toLocaleString('de-CH', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit' - }); - }; - - const getTypeClass = (type: string) => { - switch (type) { - case 'CREDIT': return styles.credit; - case 'DEBIT': return styles.debit; - case 'ADJUSTMENT': return styles.adjustment; - default: return ''; - } - }; - - const getTypeLabel = (type: string) => { - switch (type) { - case 'CREDIT': return 'Gutschrift'; - case 'DEBIT': return 'Belastung'; - case 'ADJUSTMENT': return 'Korrektur'; - default: return type; - } - }; - - return ( - - {formatDate(transaction.sysCreatedAt)} - {transaction.mandateName || '-'} - - - {getTypeLabel(transaction.transactionType)} - - - {transaction.description} - {transaction.aicoreProvider || '-'} - {transaction.aicoreModel || '-'} - {transaction.featureCode || '-'} - - {transaction.transactionType === 'DEBIT' ? '-' : '+'}{formatCurrency(transaction.amount)} - - - ); -}; - -// ============================================================================ -// MAIN COMPONENT -// ============================================================================ +function typeLabel(type: string, t: (k: string) => string): string { + switch (type) { + case 'CREDIT': + return t('Gutschrift'); + case 'DEBIT': + return t('Belastung'); + case 'ADJUSTMENT': + return t('Korrektur'); + default: + return type; + } +} export const BillingTransactions: React.FC = () => { const { t } = useLanguage(); - const { transactions, loading, loadTransactions } = useBilling(); - const [limit, setLimit] = useState(50); - - useEffect(() => { - loadTransactions(limit); - }, [limit, loadTransactions]); - - const handleLoadMore = () => { - setLimit(prev => prev + 50); - }; - + const { + transactions, + loading, + refetchTransactions, + transactionsPagination, + transactionsGroupLayout, + transactionsAppliedView, + } = useBilling(); + + const columns = useMemo((): ColumnConfig[] => { + const fmtChf = (amount: number) => + new Intl.NumberFormat('de-CH', { style: 'currency', currency: 'CHF' }).format(amount); + + return [ + { + key: 'sysCreatedAt', + label: t('Datum'), + type: 'date', + sortable: true, + filterable: false, + searchable: true, + width: 170, + }, + { + key: 'mandateName', + label: t('Mandant'), + type: 'string', + sortable: true, + filterable: true, + searchable: true, + width: 160, + }, + { + key: 'transactionType', + label: t('Typ'), + type: 'string', + sortable: true, + filterable: true, + searchable: true, + width: 130, + formatter: (_v, row: BillingTransaction) => ( + + {typeLabel(row.transactionType, t)} + + ), + }, + { + key: 'description', + label: t('Beschreibung'), + type: 'string', + sortable: true, + filterable: true, + searchable: true, + minWidth: 180, + }, + { + key: 'aicoreProvider', + label: t('Anbieter'), + type: 'string', + sortable: true, + filterable: true, + searchable: true, + width: 120, + }, + { + key: 'aicoreModel', + label: t('Modell'), + type: 'string', + sortable: true, + filterable: true, + searchable: true, + width: 120, + }, + { + key: 'featureCode', + label: t('Feature'), + type: 'string', + sortable: true, + filterable: true, + searchable: true, + width: 110, + }, + { + key: 'amount', + label: t('Betrag'), + type: 'number', + sortable: true, + filterable: true, + width: 120, + formatter: (v, row: BillingTransaction) => { + const n = Number(v); + const abs = fmtChf(Math.abs(n)); + const prefix = row.transactionType === 'DEBIT' ? '-' : '+'; + return ( + + {prefix} + {abs} + + ); + }, + }, + ]; + }, [t]); + return (

{t('Transaktionen')}

{t('Übersicht aller Kontobewegungen')}

- + - +
- {loading && transactions.length === 0 ? ( -
{t('Transaktionen laden')}
- ) : transactions.length === 0 ? ( -
{t('Keine Transaktionen vorhanden')}
- ) : ( - <> -
- - - - - - - - - - - - - - - {transactions.map((transaction) => ( - - ))} - -
Datum{t('Mandant')}Typ{t('Beschreibung')}AnbieterModellFeature{t('Betrag')}
-
- - {transactions.length >= limit && ( -
- -
- )} - - )} + + data={transactions} + columns={columns} + apiEndpoint="/api/billing/transactions" + tableContextKey="billing/transactions" + loading={loading} + pagination={true} + pageSize={25} + searchable={true} + filterable={true} + sortable={true} + selectable={false} + hookData={{ + refetch: refetchTransactions, + pagination: transactionsPagination ?? undefined, + groupLayout: transactionsGroupLayout ?? undefined, + appliedView: transactionsAppliedView ?? undefined, + }} + emptyMessage={t('Keine Transaktionen vorhanden')} + />
); diff --git a/src/pages/views/workspace/WorkspacePage.tsx b/src/pages/views/workspace/WorkspacePage.tsx index 05f526a..bda2dba 100644 --- a/src/pages/views/workspace/WorkspacePage.tsx +++ b/src/pages/views/workspace/WorkspacePage.tsx @@ -20,8 +20,6 @@ import { ToolActivityLog } from './ToolActivityLog'; import { UnifiedDataBar } from '../../../components/UnifiedDataBar'; import type { UdbContext, UdbTab, AddToChat_FileItem, AddToChat_FeatureSource } from '../../../components/UnifiedDataBar'; import api from '../../../api'; -import { collectGroupItemIds } from '../../../api/fileApi'; -import type { TableGroupNode } from '../../../api/connectionApi'; import { _defaultProviderSelection, _toBackendProviders } from '../../../components/ProviderSelector'; import type { ProviderSelection } from '../../../components/ProviderSelector'; import { useBilling } from '../../../hooks/useBilling'; @@ -83,8 +81,6 @@ export const WorkspacePage: React.FC = ({ persistentInstance const [udbTab, setUdbTab] = useState('chats'); const [selectedFileId, setSelectedFileId] = useState(null); const workspaceInputRef = useRef(null); - /** Persisted grouping tree from /api/files/list — resolves dropped groups → file IDs */ - const [filesListGroupTree, setFilesListGroupTree] = useState([]); const [providerSelection, setProviderSelection] = useState(_defaultProviderSelection()); const { allowedProviders } = useBilling(); const [isDragOver, setIsDragOver] = useState(false); @@ -115,27 +111,6 @@ export const WorkspacePage: React.FC = ({ persistentInstance } }, [isMobile]); - const _pullFilesGroupTree = useCallback(async (): Promise => { - if (!instanceId) return []; - try { - const res = await api.get<{ groupTree?: TableGroupNode[] }>('/api/files/list', { - params: { page: 1, pageSize: 1 }, - }); - const gt = res.data?.groupTree; - const list = Array.isArray(gt) ? gt : []; - setFilesListGroupTree(list); - return list; - } catch { - setFilesListGroupTree([]); - return []; - } - }, [instanceId]); - - useEffect(() => { - _pullFilesGroupTree(); - }, [_pullFilesGroupTree]); - - useEffect(() => { if (autoStartHandled.current || !instanceId || workspace.isProcessing) return; const prompt = searchParams.get('prompt'); @@ -153,20 +128,15 @@ export const WorkspacePage: React.FC = ({ persistentInstance }, [instanceId, searchParams, setSearchParams, workspace, providerSelection, allowedProviders]); const _resolveTreeItemsToFileIds = useCallback(async (items: TreeItemDrop[]) => { - let tree = filesListGroupTree; - if (items.some(i => i.type === 'group')) { - tree = await _pullFilesGroupTree(); - } const out: string[] = []; for (const it of items) { - if (it.type === 'group') { - out.push(...collectGroupItemIds(tree, it.id)); - } else { + // Group drops are no longer supported — groups are now presentation-only (view-based) + if (it.type !== 'group') { out.push(it.id); } } return [...new Set(out)]; - }, [filesListGroupTree, _pullFilesGroupTree]); + }, []); const _uploadAndAttach = useCallback(async (file: File) => { const result = await fileOps.handleFileUpload(file, undefined, instanceId); From 25b56f585eaa44783b8bf14ee0397c4655ade3b5 Mon Sep 17 00:00:00 2001 From: Ida Date: Wed, 6 May 2026 08:19:37 +0200 Subject: [PATCH 05/11] fix: readded new folder button to folder tree component --- .../FormGeneratorTree/FormGeneratorTree.tsx | 62 +++++++++ .../__tests__/FormGeneratorTree.test.tsx | 122 ++++++++++++++++-- .../FormGeneratorTree/__tests__/dnd.test.tsx | 6 + .../providers/FolderFileProvider.tsx | 6 +- .../FormGenerator/FormGeneratorTree/types.ts | 2 + src/pages/basedata/FilesPage.tsx | 1 + 6 files changed, 186 insertions(+), 13 deletions(-) diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx index e480963..5b9f92e 100644 --- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx @@ -3,7 +3,9 @@ import { FaChevronRight, FaUnlink, FaSyncAlt, + FaFolderPlus, } from 'react-icons/fa'; +import { usePrompt } from '../../../hooks/usePrompt'; import type { TreeNode, TreeNodeProvider, @@ -81,6 +83,15 @@ function _flatten( return result; } +function _resolveNewFolderParentId(selectedIds: Set, nodes: TreeNode[]): string | null { + if (selectedIds.size !== 1) return null; + const id = [...selectedIds][0]; + const node = nodes.find((n) => n.id === id); + if (!node) return null; + if (node.type === 'folder') return node.id; + return node.parentId ?? null; +} + function _collectDescendantIds(nodeId: string, nodes: TreeNode[]): string[] { const childMap = _buildChildMap(nodes); const result: string[] = []; @@ -390,8 +401,10 @@ export function FormGeneratorTree({ onSelectionChange, onRefresh, onSendToChat, + allowCreateFolder = true, className, }: FormGeneratorTreeProps) { + const { prompt, PromptDialog } = usePrompt(); const [nodes, setNodes] = useState[]>([]); const [expandedIds, setExpandedIds] = useState>(new Set()); const [selectedIds, setSelectedIds] = useState>(new Set()); @@ -577,6 +590,32 @@ export function FormGeneratorTree({ onRefresh?.(); }, [_loadRoot, _updateSelection, onRefresh]); + const _handleNewFolder = useCallback(async () => { + if (ownership !== 'own' || !provider.createChild || !allowCreateFolder) return; + const parentId = _resolveNewFolderParentId(selectedIds, nodes); + if (provider.canCreate && !provider.canCreate(parentId)) return; + const name = await prompt('Neuer Ordnername:', { title: 'Neuer Ordner', placeholder: 'Ordnername' }); + const trimmed = name?.trim(); + if (!trimmed) return; + try { + const newNode = await provider.createChild(parentId, trimmed); + setNodes((prev) => [...prev, newNode]); + if (parentId) { + setExpandedIds((prev) => new Set(prev).add(parentId)); + } + } catch { + await _handleRefresh(); + } + }, [ + ownership, + provider, + allowCreateFolder, + selectedIds, + nodes, + prompt, + _handleRefresh, + ]); + const _handleDelete = useCallback( async (id: string) => { const node = nodes.find((n) => n.id === id); @@ -801,6 +840,13 @@ export function FormGeneratorTree({ const totalNodeCount = nodes.filter((n) => n.parentId === null).length; + const showNewFolderButton = + Boolean(title) && + ownership === 'own' && + allowCreateFolder && + Boolean(provider.createChild) && + (provider.canCreate?.(_resolveNewFolderParentId(selectedIds, nodes)) ?? true); + const wrapperClasses = [ styles.formGeneratorTree, compact && styles.compactMode, @@ -825,6 +871,20 @@ export function FormGeneratorTree({ )} {title} {totalNodeCount} + {showNewFolderButton && ( + + )}
)} +
); } diff --git a/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx b/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx index 1835c9e..11a8252 100644 --- a/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx @@ -2,11 +2,21 @@ // All rights reserved. import { describe, expect, it, vi, beforeEach } from 'vitest'; -import { render, screen, waitFor, within } from '@testing-library/react'; +import { render, screen, waitFor, within, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { FormGeneratorTree } from '../FormGeneratorTree'; import type { TreeNode, TreeNodeProvider, TreeBatchAction } from '../types'; +const { mockPrompt } = vi.hoisted(() => ({ + mockPrompt: vi.fn(() => Promise.resolve('NeuOrdner')), +})); + +vi.mock('../../../../hooks/usePrompt', () => ({ + usePrompt: () => ({ + prompt: mockPrompt, + PromptDialog: () => null, + }), +})); // --------------------------------------------------------------------------- // Fixtures // --------------------------------------------------------------------------- @@ -90,6 +100,11 @@ function _createMockProvider(nodes: TreeNode[]): TreeNodeProvider { describe('FormGeneratorTree', () => { describe('Rendering', () => { + beforeEach(() => { + mockPrompt.mockClear(); + mockPrompt.mockResolvedValue('NeuOrdner'); + }); + it('renders tree with title and node count', async () => { const provider = _createMockProvider([_ownFolder]); render( @@ -174,6 +189,85 @@ describe('FormGeneratorTree', () => { }); }); + // --------------------------------------------------------------------------- + // New folder + // --------------------------------------------------------------------------- + + describe('New folder', () => { + beforeEach(() => { + mockPrompt.mockClear(); + mockPrompt.mockResolvedValue('NeuOrdner'); + }); + + it('shows header button when titled own tree has createChild', async () => { + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + expect(screen.getByTitle('Neuer Ordner')).toBeInTheDocument(); + }); + + it('does not show new folder for shared tree', async () => { + const provider = _createMockProvider([_sharedFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('Shared Folder')).toBeInTheDocument(); + }); + expect(screen.queryByTitle('Neuer Ordner')).not.toBeInTheDocument(); + }); + + it('calls createChild at root when nothing selected', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + await user.click(screen.getByTitle('Neuer Ordner')); + + await waitFor(() => { + expect(provider.createChild).toHaveBeenCalledWith(null, 'NeuOrdner'); + }); + }); + + it('calls createChild under selected folder', async () => { + const user = userEvent.setup(); + const provider = _createMockProvider([_ownFolder]); + render(); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); + await user.click(screen.getByTitle('Neuer Ordner')); + + await waitFor(() => { + expect(provider.createChild).toHaveBeenCalledWith('f1', 'NeuOrdner'); + }); + }); + + it('hides button when allowCreateFolder is false', async () => { + const provider = _createMockProvider([_ownFolder]); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText('My Folder')).toBeInTheDocument(); + }); + expect(screen.queryByTitle('Neuer Ordner')).not.toBeInTheDocument(); + }); + }); + // --------------------------------------------------------------------------- // Selection // --------------------------------------------------------------------------- @@ -228,8 +322,8 @@ describe('FormGeneratorTree', () => { expect(screen.getByText('My Folder')).toBeInTheDocument(); }); - await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); - await user.click(screen.getByRole('treeitem', { name: /Other Folder/i }), { + fireEvent.click(screen.getByRole('treeitem', { name: /My Folder/i })); + fireEvent.click(screen.getByRole('treeitem', { name: /Other Folder/i }), { ctrlKey: true, }); @@ -238,7 +332,7 @@ describe('FormGeneratorTree', () => { expect(lastCall.has('f2')).toBe(true); }); - it('click on selected folder cascades deselect of descendants (own)', async () => { + it('second click on folder with cascaded child selection keeps cascaded selection (own)', async () => { const user = userEvent.setup(); const onSelectionChange = vi.fn(); const provider = _createMockProvider([_ownFolder, _ownFile]); @@ -270,12 +364,11 @@ describe('FormGeneratorTree', () => { expect(lastCall.has('f1')).toBe(true); expect(lastCall.has('file1')).toBe(true); - // Click again to deselect await user.click(screen.getByRole('treeitem', { name: /My Folder/i })); lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set; - expect(lastCall.has('f1')).toBe(false); - expect(lastCall.has('file1')).toBe(false); + expect(lastCall.has('f1')).toBe(true); + expect(lastCall.has('file1')).toBe(true); }); it('selection in shared tree does NOT cascade to children', async () => { @@ -455,6 +548,13 @@ describe('FormGeneratorTree', () => { // --------------------------------------------------------------------------- describe('Delete', () => { + beforeEach(() => { + vi.spyOn(window, 'confirm').mockReturnValue(true); + }); + afterEach(() => { + vi.restoreAllMocks(); + }); + it('delete button calls provider.deleteNodes', async () => { const user = userEvent.setup(); const provider = _createMockProvider([_ownFolder]); @@ -465,7 +565,7 @@ describe('FormGeneratorTree', () => { }); const row = screen.getByRole('treeitem', { name: /My Folder/i }); - const deleteBtn = within(row).getByTitle('Delete'); + const deleteBtn = within(row).getByTitle('Loeschen'); await user.click(deleteBtn); await waitFor(() => { @@ -482,7 +582,7 @@ describe('FormGeneratorTree', () => { }); const row = screen.getByRole('treeitem', { name: /Shared Folder/i }); - expect(within(row).queryByTitle('Delete')).not.toBeInTheDocument(); + expect(within(row).queryByTitle('Loeschen')).not.toBeInTheDocument(); }); }); @@ -541,7 +641,7 @@ describe('FormGeneratorTree', () => { expect(screen.getByText('My Folder')).toBeInTheDocument(); }); - const neutralizeBtn = screen.getByTitle('Not neutralized'); + const neutralizeBtn = screen.getByTitle('Nicht neutralisiert'); await user.click(neutralizeBtn); await waitFor(() => { @@ -562,7 +662,7 @@ describe('FormGeneratorTree', () => { expect(screen.getByText('Shared Folder')).toBeInTheDocument(); }); - const neutralizeBtn = screen.getByTitle('Not neutralized'); + const neutralizeBtn = screen.getByTitle('Nicht neutralisiert'); await user.click(neutralizeBtn); expect(provider.patchNeutralize).not.toHaveBeenCalled(); diff --git a/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx b/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx index d40ff0c..b15e01d 100644 --- a/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx @@ -6,6 +6,12 @@ import { render, screen, waitFor, fireEvent } from '@testing-library/react'; import { FormGeneratorTree } from '../FormGeneratorTree'; import type { TreeNode, TreeNodeProvider } from '../types'; +vi.mock('../../../../hooks/usePrompt', () => ({ + usePrompt: () => ({ + prompt: vi.fn(() => Promise.resolve('x')), + PromptDialog: () => null, + }), +})); // --------------------------------------------------------------------------- // Fixtures // --------------------------------------------------------------------------- diff --git a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx index ad8899b..7e8b6f7 100644 --- a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx @@ -108,7 +108,7 @@ export function createFolderFileProvider(): TreeNodeProvider { return nodes; }, - canCreate() { + canCreate(_parentId: string | null) { return true; }, @@ -137,7 +137,9 @@ export function createFolderFileProvider(): TreeNodeProvider { async createChild(parentId, name) { const res = await api.post('/api/files/folders', { name, parentId }); - return _mapFolderToNode(res.data, 'own'); + const node = _mapFolderToNode(res.data, 'own'); + typeMap.set(node.id, 'folder'); + return node; }, async renameNode(id, newName) { diff --git a/src/components/FormGenerator/FormGeneratorTree/types.ts b/src/components/FormGenerator/FormGeneratorTree/types.ts index 12c1d47..d715033 100644 --- a/src/components/FormGenerator/FormGeneratorTree/types.ts +++ b/src/components/FormGenerator/FormGeneratorTree/types.ts @@ -60,5 +60,7 @@ export interface FormGeneratorTreeProps { onSelectionChange?: (selectedIds: Set) => void; onRefresh?: () => void; onSendToChat?: (node: TreeNode) => void; + /** When false, hides "Neuer Ordner" (e.g. map from table file permissions). Default true. */ + allowCreateFolder?: boolean; className?: string; } diff --git a/src/pages/basedata/FilesPage.tsx b/src/pages/basedata/FilesPage.tsx index 97b6b85..5e69bd1 100644 --- a/src/pages/basedata/FilesPage.tsx +++ b/src/pages/basedata/FilesPage.tsx @@ -370,6 +370,7 @@ export const FilesPage: React.FC = () => { ownership="own" title={t('Eigene')} showFilter={true} + allowCreateFolder={canCreate} onNodeClick={_handleTreeNodeClick} onRefresh={() => _tableRefetch()} /> From 877b4fec7e53e8cab671cc0a55935fb167fa99d1 Mon Sep 17 00:00:00 2001 From: Ida Date: Wed, 6 May 2026 08:40:33 +0200 Subject: [PATCH 06/11] fix: when moving folders the targetParentId was always missing, resulting in the folder not being moved --- .../FormGeneratorTree/providers/FolderFileProvider.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx index 7e8b6f7..268b862 100644 --- a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx @@ -161,7 +161,9 @@ export function createFolderFileProvider(): TreeNodeProvider { await Promise.all( ids.map((id) => { if (_isFile(id)) return api.put(`/api/files/${id}`, { folderId: targetParentId }); - return api.post(`/api/files/folders/${id}/move`, { targetParentId }); + return api.post(`/api/files/folders/${id}/move`, { + parentId: targetParentId, + }); }), ); }, From a912db3feedf4b5b57e0e9cdf3a56bc56f030318 Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Wed, 6 May 2026 23:28:15 +0200 Subject: [PATCH 07/11] refactored comcoach und teamsbot --- src/App.tsx | 7 +- src/api/commcoachApi.ts | 158 +++-- src/api/teamsbotApi.ts | 46 ++ .../FormGeneratorTree.module.css | 29 +- .../FormGeneratorTree/FormGeneratorTree.tsx | 87 +-- src/components/UnifiedDataBar/FilesTab.tsx | 12 +- .../UnifiedDataBar/UnifiedDataBar.tsx | 2 +- src/hooks/useCommcoach.ts | 30 + src/hooks/useTtsPlayback.ts | 5 +- src/layouts/MainLayout.tsx | 2 +- src/pages/FeatureView.tsx | 14 +- .../views/commcoach/Commcoach.module.css | 349 ++++++++++ .../commcoach/CommcoachAssistantView.tsx | 175 +++++ .../commcoach/CommcoachDashboardView.tsx | 31 +- .../commcoach/CommcoachDossierView.module.css | 20 +- .../views/commcoach/CommcoachDossierView.tsx | 44 +- .../views/commcoach/CommcoachKeepAlive.tsx | 21 +- .../views/commcoach/CommcoachModulesView.tsx | 293 +++++++++ .../views/commcoach/CommcoachSessionView.tsx | 610 ++++++++++++++++++ .../CommcoachSettingsView.module.css | 132 ++++ .../views/commcoach/CommcoachSettingsView.tsx | 359 +++++++++-- src/pages/views/commcoach/index.ts | 3 + src/pages/views/teamsbot/Teamsbot.module.css | 355 +++++++++- .../views/teamsbot/TeamsbotAssistantView.tsx | 190 ++++++ .../views/teamsbot/TeamsbotDashboardView.tsx | 7 +- .../views/teamsbot/TeamsbotModulesView.tsx | 189 ++++++ .../views/teamsbot/TeamsbotSessionView.tsx | 181 ++++-- src/types/mandate.ts | 9 +- 28 files changed, 3131 insertions(+), 229 deletions(-) create mode 100644 src/pages/views/commcoach/Commcoach.module.css create mode 100644 src/pages/views/commcoach/CommcoachAssistantView.tsx create mode 100644 src/pages/views/commcoach/CommcoachModulesView.tsx create mode 100644 src/pages/views/commcoach/CommcoachSessionView.tsx create mode 100644 src/pages/views/teamsbot/TeamsbotAssistantView.tsx create mode 100644 src/pages/views/teamsbot/TeamsbotModulesView.tsx diff --git a/src/App.tsx b/src/App.tsx index aac8210..c81e8fb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -179,12 +179,15 @@ function App() { } /> } /> + {/* Shared: assistant + modules routes (ComCoach + TeamsBot) */} + } /> + } /> + {/* Neutralization Feature Views */} } /> {/* CommCoach Feature Views */} - } /> - } /> + } /> {/* Redmine Feature Views */} } /> diff --git a/src/api/commcoachApi.ts b/src/api/commcoachApi.ts index df0ed6c..5d758a1 100644 --- a/src/api/commcoachApi.ts +++ b/src/api/commcoachApi.ts @@ -109,8 +109,8 @@ export interface CoachingUserProfile { } export interface DashboardData { - totalContexts: number; - activeContexts: number; + totalModules: number; + activeModules: number; totalSessions: number; totalMinutes: number; streakDays: number; @@ -122,7 +122,11 @@ export interface DashboardData { goalProgress?: number; badges?: CoachingBadge[]; level?: { number: number; label: string; totalSessions: number }; - contexts: Array<{ id: string; title: string; category: string; sessionCount: number; lastSessionAt?: string; goalProgress?: number }>; + modules: Array<{ id: string; title: string; moduleType: string; sessionCount: number; lastSessionAt?: string; goalProgress?: number }>; + /** @deprecated Use totalModules/activeModules/modules instead */ + totalContexts?: number; + activeContexts?: number; + contexts?: Array<{ id: string; title: string; category: string; sessionCount: number; lastSessionAt?: string; goalProgress?: number }>; } export interface SSEEvent { @@ -133,31 +137,73 @@ export interface SSEEvent { export type ApiRequestFunction = (options: ApiRequestOptions) => Promise; +export function getApiRequest(): ApiRequestFunction { + return async (options: ApiRequestOptions) => { + const response = await api(options); + return response.data; + }; +} + // ============================================================================ -// Context API +// Module API (TrainingModule — replaces Context API) +// ============================================================================ + +export async function listModulesApi(request: ApiRequestFunction, instanceId: string): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'get' }); + return data.modules || []; +} + +export async function createModuleApi(request: ApiRequestFunction, instanceId: string, body: { + title: string; moduleType?: string; goals?: string; personaId?: string; kpiTargets?: string; +}): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'post', data: body }); + return data.module; +} + +export async function getModuleDetailApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}`, method: 'get' }); + return data; +} + +export async function updateModuleApi(request: ApiRequestFunction, instanceId: string, moduleId: string, body: any): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}`, method: 'put', data: body }); + return data.module; +} + +export async function deleteModuleApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise { + await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}`, method: 'delete' }); +} + +export async function listSessionsApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}/sessions`, method: 'get' }); + return data.sessions || []; +} + +// ============================================================================ +// Context / Module API (uses /modules/ endpoints) // ============================================================================ export async function getContextsApi(request: ApiRequestFunction, instanceId: string): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts`, method: 'get' }); - return data.contexts || []; + const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'get' }); + return data.modules || []; } export async function createContextApi(request: ApiRequestFunction, instanceId: string, body: { title: string; description?: string; category?: string; goals?: string[]; }): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts`, method: 'post', data: body }); - return data.context; + const data = await request({ url: `/api/commcoach/${instanceId}/modules`, method: 'post', data: body }); + return data.module; } export async function getContextDetailApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<{ context: CoachingContext; tasks: CoachingTask[]; scores: CoachingScore[]; sessions: CoachingSession[]; }> { const data = await request({ - url: `/api/commcoach/${instanceId}/contexts/${contextId}`, + url: `/api/commcoach/${instanceId}/modules/${contextId}`, method: 'get', params: { _t: Date.now() }, }); - const ctx = data?.context ?? data; + const ctx = data?.module ?? data; return { context: ctx, tasks: data?.tasks ?? [], @@ -167,22 +213,22 @@ export async function getContextDetailApi(request: ApiRequestFunction, instanceI } export async function updateContextApi(request: ApiRequestFunction, instanceId: string, contextId: string, body: any): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}`, method: 'put', data: body }); - return data.context; + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}`, method: 'put', data: body }); + return data.module; } export async function deleteContextApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise { - await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}`, method: 'delete' }); + await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}`, method: 'delete' }); } export async function archiveContextApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/archive`, method: 'post' }); - return data.context; + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/archive`, method: 'post' }); + return data.module; } export async function activateContextApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/activate`, method: 'post' }); - return data.context; + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/activate`, method: 'post' }); + return data.module; } // ============================================================================ @@ -192,7 +238,7 @@ export async function activateContextApi(request: ApiRequestFunction, instanceId export async function startSessionApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise<{ session: CoachingSession; messages: CoachingMessage[]; resumed: boolean; }> { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/sessions/start`, method: 'post' }); + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/sessions/start`, method: 'post' }); return data; } @@ -207,7 +253,7 @@ export async function startSessionStreamApi( try { const baseURL = api.defaults.baseURL || ''; const personaParam = personaId ? `?personaId=${encodeURIComponent(personaId)}` : ''; - const url = `${baseURL}/api/commcoach/${instanceId}/contexts/${contextId}/sessions/start${personaParam}`; + const url = `${baseURL}/api/commcoach/${instanceId}/modules/${contextId}/sessions/start${personaParam}`; const headers: Record = { 'Content-Type': 'application/json' }; const authToken = localStorage.getItem('authToken'); @@ -243,14 +289,11 @@ export async function startSessionStreamApi( for (const line of lines) { if (line.startsWith('data: ')) { - try { - const jsonStr = line.slice(6); - if (jsonStr.trim()) { - const event: SSEEvent = JSON.parse(jsonStr); - onEvent(event); - } - } catch { - // skip malformed lines + const jsonStr = line.slice(6); + if (jsonStr.trim()) { + let event: SSEEvent; + try { event = JSON.parse(jsonStr); } catch { continue; } + onEvent(event); } } } @@ -348,14 +391,11 @@ export async function sendMessageStreamApi( for (const line of lines) { if (line.startsWith('data: ')) { - try { - const jsonStr = line.slice(6); - if (jsonStr.trim()) { - const event: SSEEvent = JSON.parse(jsonStr); - onEvent(event); - } - } catch { - // skip malformed lines + const jsonStr = line.slice(6); + if (jsonStr.trim()) { + let event: SSEEvent; + try { event = JSON.parse(jsonStr); } catch { continue; } + onEvent(event); } } } @@ -424,10 +464,12 @@ export async function sendAudioStreamApi( for (const line of lines) { if (line.startsWith('data: ')) { - try { - const jsonStr = line.slice(6); - if (jsonStr.trim()) onEvent(JSON.parse(jsonStr)); - } catch { /* skip */ } + const jsonStr = line.slice(6); + if (jsonStr.trim()) { + let event: SSEEvent; + try { event = JSON.parse(jsonStr); } catch { continue; } + onEvent(event); + } } } } @@ -446,14 +488,14 @@ export async function sendAudioStreamApi( // ============================================================================ export async function getTasksApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/tasks`, method: 'get' }); + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/tasks`, method: 'get' }); return data.tasks || []; } export async function createTaskApi(request: ApiRequestFunction, instanceId: string, contextId: string, body: { title: string; description?: string; priority?: string; dueDate?: string; }): Promise { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/tasks`, method: 'post', data: body }); + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/tasks`, method: 'post', data: body }); return data.task; } @@ -500,7 +542,14 @@ export async function updateProfileApi(request: ApiRequestFunction, instanceId: export async function getPersonasApi(request: ApiRequestFunction, instanceId: string): Promise { const data = await request({ url: `/api/commcoach/${instanceId}/personas`, method: 'get' }); - return data.personas || []; + return data.items || data.personas || []; +} + +export async function fetchPersonasPaginated(request: ApiRequestFunction, instanceId: string, params?: any): Promise { + const queryParams: Record = {}; + if (params) queryParams.pagination = JSON.stringify(params); + const data = await request({ url: `/api/commcoach/${instanceId}/personas`, method: 'get', params: queryParams }); + return data; } export async function createPersonaApi(request: ApiRequestFunction, instanceId: string, body: { @@ -510,10 +559,31 @@ export async function createPersonaApi(request: ApiRequestFunction, instanceId: return data.persona; } +export async function updatePersonaApi(request: ApiRequestFunction, instanceId: string, personaId: string, body: { + label?: string; description?: string; gender?: string; systemPromptOverride?: string; isActive?: boolean; +}): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/personas/${personaId}`, method: 'put', data: body }); + return data.persona; +} + export async function deletePersonaApi(request: ApiRequestFunction, instanceId: string, personaId: string): Promise { await request({ url: `/api/commcoach/${instanceId}/personas/${personaId}`, method: 'delete' }); } +// ============================================================================ +// Module-Persona Mapping API +// ============================================================================ + +export async function getModulePersonasApi(request: ApiRequestFunction, instanceId: string, moduleId: string): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}/personas`, method: 'get' }); + return data.personaIds || []; +} + +export async function setModulePersonasApi(request: ApiRequestFunction, instanceId: string, moduleId: string, personaIds: string[]): Promise { + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${moduleId}/personas`, method: 'put', data: { personaIds } }); + return data.personaIds || []; +} + // ============================================================================ // Badge API (Iteration 2) // ============================================================================ @@ -529,7 +599,7 @@ export async function getBadgesApi(request: ApiRequestFunction, instanceId: stri export function getDossierExportUrl(instanceId: string, contextId: string, format: string = 'md'): string { const baseURL = api.defaults.baseURL || ''; - return `${baseURL}/api/commcoach/${instanceId}/contexts/${contextId}/export?format=${format}`; + return `${baseURL}/api/commcoach/${instanceId}/modules/${contextId}/export?format=${format}`; } export function getSessionExportUrl(instanceId: string, sessionId: string, format: string = 'md'): string { @@ -544,6 +614,6 @@ export function getSessionExportUrl(instanceId: string, sessionId: string, forma export async function getScoreHistoryApi(request: ApiRequestFunction, instanceId: string, contextId: string): Promise>> { - const data = await request({ url: `/api/commcoach/${instanceId}/contexts/${contextId}/scores/history`, method: 'get' }); + const data = await request({ url: `/api/commcoach/${instanceId}/modules/${contextId}/scores/history`, method: 'get' }); return data.history || {}; } diff --git a/src/api/teamsbotApi.ts b/src/api/teamsbotApi.ts index 462268d..3918f7c 100644 --- a/src/api/teamsbotApi.ts +++ b/src/api/teamsbotApi.ts @@ -9,6 +9,7 @@ export interface TeamsbotSession { id: string; instanceId: string; mandateId: string; + moduleId?: string; meetingLink: string; botName: string; status: 'pending' | 'joining' | 'active' | 'leaving' | 'ended' | 'error'; @@ -574,3 +575,48 @@ export async function deleteDirectorPrompt( ); return response.data; } + + +// ============================================================================ +// Meeting Module API +// ============================================================================ + +export interface MeetingModule { + id: string; + instanceId: string; + mandateId: string; + ownerUserId: string; + title: string; + seriesType: string; + defaultBotId?: string; + defaultDirectorPrompts?: string; + goals?: string; + kpiTargets?: string; + status: string; +} + +export async function listModules(instanceId: string): Promise { + const response = await api.get(`/api/teamsbot/${instanceId}/modules`); + return response.data?.modules || []; +} + +export async function createModule(instanceId: string, body: { + title: string; seriesType?: string; defaultBotId?: string; goals?: string; kpiTargets?: string; +}): Promise { + const response = await api.post(`/api/teamsbot/${instanceId}/modules`, body); + return response.data?.module; +} + +export async function getModuleDetail(instanceId: string, moduleId: string): Promise<{ module: MeetingModule; sessions: TeamsbotSession[] }> { + const response = await api.get(`/api/teamsbot/${instanceId}/modules/${moduleId}`); + return response.data; +} + +export async function updateModule(instanceId: string, moduleId: string, body: Partial): Promise { + const response = await api.put(`/api/teamsbot/${instanceId}/modules/${moduleId}`, body); + return response.data?.module; +} + +export async function deleteModule(instanceId: string, moduleId: string): Promise { + await api.delete(`/api/teamsbot/${instanceId}/modules/${moduleId}`); +} diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css index 97a8592..e0ab989 100644 --- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css +++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.module.css @@ -352,10 +352,18 @@ min-width: 0; } +/* File size + hover actions group (overlapping layout to save width) */ +.nodeSizeGroup { + position: relative; + flex-shrink: 0; + width: 52px; + display: flex; + align-items: center; + justify-content: flex-end; +} + /* File size column */ .nodeSize { - width: 52px; - flex-shrink: 0; font-size: 10px; color: var(--color-text-muted, #94a3b8); text-align: right; @@ -388,20 +396,29 @@ min-width: 0; } -/* Hover action icons (download, delete) -- only visible on hover, left of persistent */ +/* Hover action icons -- overlay on top of file size to save width */ .nodeActionsHover { + position: absolute; + right: 0; + top: 0; + bottom: 0; display: flex; align-items: center; + justify-content: flex-end; gap: 2px; - flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease; + z-index: 1; } .nodeRow:hover .nodeActionsHover { opacity: 1; } +.nodeRow:hover .nodeSize { + visibility: hidden; +} + /* Persistent action icons (scope, neutralize) -- always visible, right-aligned */ .nodeActionsPersistent { display: flex; @@ -626,6 +643,10 @@ .nodeActionsHover { opacity: 1; } + + .nodeSize { + visibility: hidden; + } } /* Accessibility */ diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx index e480963..189a0f0 100644 --- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx +++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx @@ -12,6 +12,8 @@ import type { ScopeValue, TreeBatchAction, } from './types'; +import { useConfirm } from '../../../hooks/useConfirm'; +import { useLanguage } from '../../../providers/language/LanguageContext'; import styles from './FormGeneratorTree.module.css'; const INDENT_PX = 24; @@ -290,43 +292,45 @@ const TreeNodeRow = React.memo(function TreeNodeRow({ )} - - {node.sizeBytes != null ? _formatSize(node.sizeBytes) : ''} - +
+ + {node.sizeBytes != null ? _formatSize(node.sizeBytes) : ''} + -
- {canRename && ( - - )} +
+ {canRename && ( + + )} - {node.type !== 'folder' && ( - - )} + {node.type !== 'folder' && ( + + )} - {canDelete && ( - - )} + {canDelete && ( + + )} +
@@ -392,6 +396,8 @@ export function FormGeneratorTree({ onSendToChat, className, }: FormGeneratorTreeProps) { + const { t } = useLanguage(); + const { confirm, ConfirmDialog } = useConfirm(); const [nodes, setNodes] = useState[]>([]); const [expandedIds, setExpandedIds] = useState>(new Set()); const [selectedIds, setSelectedIds] = useState>(new Set()); @@ -581,7 +587,11 @@ export function FormGeneratorTree({ async (id: string) => { const node = nodes.find((n) => n.id === id); const label = node?.name ?? id; - if (!window.confirm(`"${label}" wirklich loeschen?`)) return; + const ok = await confirm( + t('"{label}" wirklich loeschen?', { label }), + { confirmLabel: t('Loeschen'), variant: 'danger' }, + ); + if (!ok) return; await provider.deleteNodes?.([id]); setNodes((prev) => { const toRemove = new Set([id, ..._collectDescendantIds(id, prev)]); @@ -811,6 +821,7 @@ export function FormGeneratorTree({ return (
+ {title && (
({ className={`${styles.batchButton} ${action.danger ? styles.batchButtonDanger : ''}`} onClick={async () => { if (action.danger) { - if (!window.confirm(`${ids.length} ${action.label} wirklich loeschen?`)) return; + const ok = await confirm( + t('{count} {label} wirklich loeschen?', { count: String(ids.length), label: action.label }), + { confirmLabel: t('Loeschen'), variant: 'danger' }, + ); + if (!ok) return; } await action.onClick(ids); await _handleRefresh(); diff --git a/src/components/UnifiedDataBar/FilesTab.tsx b/src/components/UnifiedDataBar/FilesTab.tsx index 43a20e4..eb9f713 100644 --- a/src/components/UnifiedDataBar/FilesTab.tsx +++ b/src/components/UnifiedDataBar/FilesTab.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef, useMemo, useState } from 'react'; +import React, { useCallback, useRef, useMemo, useState, useEffect } from 'react'; import type { UdbContext } from './UnifiedDataBar'; import api from '../../api'; import { useApiRequest } from '../../hooks/useApi'; @@ -45,6 +45,12 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat setSharedTreeKey(k => k + 1); }, []); + useEffect(() => { + const _onFileUploaded = () => _handleRefresh(); + window.addEventListener('fileUploaded', _onFileUploaded); + return () => window.removeEventListener('fileUploaded', _onFileUploaded); + }, [_handleRefresh]); + const _uploadFiles = useCallback(async (fileList: FileList | File[]) => { if (!context.instanceId || uploading) return; setUploading(true); @@ -76,7 +82,9 @@ const FilesTab: React.FC = ({ context, onFileSelect, onSendToChat const _handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); - setIsDragOver(false); + if (!e.relatedTarget || !(e.currentTarget as Node).contains(e.relatedTarget as Node)) { + setIsDragOver(false); + } }, []); const _handleDrop = useCallback((e: React.DragEvent) => { diff --git a/src/components/UnifiedDataBar/UnifiedDataBar.tsx b/src/components/UnifiedDataBar/UnifiedDataBar.tsx index bc7f0a4..4eaf16a 100644 --- a/src/components/UnifiedDataBar/UnifiedDataBar.tsx +++ b/src/components/UnifiedDataBar/UnifiedDataBar.tsx @@ -64,7 +64,7 @@ interface UnifiedDataBarProps { function _tabLabel(tab: UdbTab, t: (k: string) => string): string { switch (tab) { - case 'chats': return t('Chatverläufe'); + case 'chats': return t('Dossiers'); case 'files': return t('Dateien'); case 'sources': return t('Quellen'); default: return tab; diff --git a/src/hooks/useCommcoach.ts b/src/hooks/useCommcoach.ts index 62ec296..6c49a67 100644 --- a/src/hooks/useCommcoach.ts +++ b/src/hooks/useCommcoach.ts @@ -289,6 +289,16 @@ export function useCommcoach(instanceIdOverride?: string): CommcoachHookReturn { setTasks(prev => [eventData, ...prev]); } else if (eventType === 'documentCreated' && eventData) { onDocumentCreatedRef.current?.(eventData); + const docMsg: CoachingMessage = { + id: `doc-${Date.now()}`, + sessionId: session.id, + contextId: session.contextId, + role: 'assistant', + content: `📄 **Dokument erstellt:** ${eventData.fileName || 'Dokument'}\n\n_Das Dokument ist in der Seitenleiste unter "Dateien" verfuegbar._`, + contentType: 'systemNote', + createdAt: new Date().toISOString(), + }; + setMessages(prev => [...prev, docMsg]); } else if (eventType === 'error' && eventData) { setError(eventData.message || 'Stream-Fehler'); } @@ -397,6 +407,16 @@ export function useCommcoach(instanceIdOverride?: string): CommcoachHookReturn { setTasks(prev => [eventData, ...prev]); } else if (eventType === 'documentCreated' && eventData) { onDocumentCreatedRef.current?.(eventData); + const docMsg: CoachingMessage = { + id: `doc-${Date.now()}`, + sessionId: session.id, + contextId: session.contextId, + role: 'assistant', + content: `📄 **Dokument erstellt:** ${eventData.fileName || 'Dokument'}\n\n_Das Dokument ist in der Seitenleiste unter "Dateien" verfuegbar._`, + contentType: 'systemNote', + createdAt: new Date().toISOString(), + }; + setMessages(prev => [...prev, docMsg]); } else if (eventType === 'scoreUpdate') { // Will refresh on complete } else if (eventType === 'error' && eventData) { @@ -474,6 +494,16 @@ export function useCommcoach(instanceIdOverride?: string): CommcoachHookReturn { setTasks(prev => [eventData, ...prev]); } else if (eventType === 'documentCreated' && eventData) { onDocumentCreatedRef.current?.(eventData); + const docMsg: CoachingMessage = { + id: `doc-${Date.now()}`, + sessionId: session.id, + contextId: session.contextId, + role: 'assistant', + content: `📄 **Dokument erstellt:** ${eventData.fileName || 'Dokument'}\n\n_Das Dokument ist in der Seitenleiste unter "Dateien" verfuegbar._`, + contentType: 'systemNote', + createdAt: new Date().toISOString(), + }; + setMessages(prev => [...prev, docMsg]); } else if (eventType === 'error' && eventData) { setError(eventData.message || 'Audio-Fehler'); } diff --git a/src/hooks/useTtsPlayback.ts b/src/hooks/useTtsPlayback.ts index ecb3edd..cbb3d99 100644 --- a/src/hooks/useTtsPlayback.ts +++ b/src/hooks/useTtsPlayback.ts @@ -41,8 +41,11 @@ export function useTtsPlayback(callbacks?: TtsPlaybackCallbacks): TtsPlaybackApi const stop = useCallback(() => { if (audioRef.current) { - audioRef.current.pause(); + const audio = audioRef.current; + audio.onpause = null; + audio.onended = null; audioRef.current = null; + audio.pause(); } setIsPlaying(false); setIsPaused(false); diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index 2f96ac0..880c702 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -19,7 +19,7 @@ import styles from './MainLayout.module.css'; import { useLanguage } from '../providers/language/LanguageContext'; const _WORKSPACE_ROUTE_RE = /\/mandates\/[^/]+\/workspace\/[^/]+\/dashboard/; -const _COMMCOACH_ROUTE_RE = /\/mandates\/[^/]+\/commcoach\/[^/]+\/(?:coaching|dossier)/; +const _COMMCOACH_ROUTE_RE = /\/mandates\/[^/]+\/commcoach\/[^/]+\/session/; const _GE_EDITOR_ROUTE_RE = /\/mandates\/[^/]+\/graphicalEditor\/[^/]+\/editor/; const _ADMIN_LANGUAGES_RE = /\/admin\/languages(?:$|\/)/; diff --git a/src/pages/FeatureView.tsx b/src/pages/FeatureView.tsx index 7fb75e3..8497fee 100644 --- a/src/pages/FeatureView.tsx +++ b/src/pages/FeatureView.tsx @@ -39,6 +39,8 @@ import { WorkspaceRagInsightsPage } from './views/workspace/WorkspaceRagInsights // Teamsbot Views import { TeamsbotDashboardView } from './views/teamsbot/TeamsbotDashboardView'; +import { TeamsbotAssistantView } from './views/teamsbot/TeamsbotAssistantView'; +import { TeamsbotModulesView } from './views/teamsbot/TeamsbotModulesView'; import { TeamsbotSessionView } from './views/teamsbot/TeamsbotSessionView'; import { TeamsbotSettingsView } from './views/teamsbot/TeamsbotSettingsView'; @@ -46,7 +48,7 @@ import { TeamsbotSettingsView } from './views/teamsbot/TeamsbotSettingsView'; import { NeutralizationView } from './views/neutralization'; // CommCoach Views -import { CommcoachDashboardView, CommcoachDossierView, CommcoachSettingsView } from './views/commcoach'; +import { CommcoachDashboardView, CommcoachAssistantView, CommcoachModulesView, CommcoachSessionView, CommcoachDossierView, CommcoachSettingsView } from './views/commcoach'; // Redmine Views import { RedmineSettingsView, RedmineStatsView, RedmineBrowserView } from './views/redmine'; @@ -158,6 +160,8 @@ const VIEW_COMPONENTS: Record> = { }, teamsbot: { dashboard: TeamsbotDashboardView, + assistant: TeamsbotAssistantView, + modules: TeamsbotModulesView, sessions: TeamsbotSessionView, settings: TeamsbotSettingsView, }, @@ -167,7 +171,9 @@ const VIEW_COMPONENTS: Record> = { }, commcoach: { dashboard: CommcoachDashboardView, - coaching: CommcoachDossierView, + assistant: CommcoachAssistantView, + modules: CommcoachModulesView, + session: CommcoachSessionView, dossier: CommcoachDossierView, settings: CommcoachSettingsView, }, @@ -228,8 +234,8 @@ export const FeatureViewPage: React.FC = ({ view }) => { return null; } - // CommCoach coaching/dossier is rendered persistently by CommcoachKeepAlive at MainLayout level. - if (featureCode === 'commcoach' && (view === 'coaching' || view === 'dossier')) { + // CommCoach session is rendered persistently by CommcoachKeepAlive at MainLayout level. + if (featureCode === 'commcoach' && view === 'session') { return null; } diff --git a/src/pages/views/commcoach/Commcoach.module.css b/src/pages/views/commcoach/Commcoach.module.css new file mode 100644 index 0000000..4101cbf --- /dev/null +++ b/src/pages/views/commcoach/Commcoach.module.css @@ -0,0 +1,349 @@ +/* CommCoach Shared Styles — Assistant, Modules, Session views */ + +.assistantContainer, +.modulesContainer { + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1rem; + height: 100%; + overflow-y: auto; +} + +.wizardHeader { + display: flex; + align-items: center; + justify-content: space-between; +} + +.stepIndicator { + display: flex; + gap: 0.5rem; +} + +.stepDot { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--border-color, #ccc); +} + +.stepActive { + background: var(--primary-color, #F25843); +} + +.wizardContent { + flex: 1; + display: flex; + flex-direction: column; +} + +.wizardStep { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.typeGrid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 1rem; +} + +.typeCard { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 1.25rem; + border-radius: 12px; + border: 2px solid var(--border-color, #ddd); + background: var(--bg-card, #fff); + color: var(--text-primary, #333); + cursor: pointer; + transition: border-color 0.15s; +} + +.typeCard:hover { + border-color: var(--primary-color, #F25843); +} + +.typeCardActive { + border-color: var(--primary-color, #F25843); + background: rgba(242, 88, 67, 0.06); +} + +.typeIcon { + font-size: 2rem; +} + +.wizardInput { + padding: 0.75rem; + border-radius: 8px; + border: 1px solid var(--border-color, #ddd); + background: var(--bg-input, #fff); + color: var(--text-primary, #333); + font-size: 1rem; +} + +.wizardTextarea { + padding: 0.75rem; + border-radius: 8px; + border: 1px solid var(--border-color, #ddd); + background: var(--bg-input, #fff); + color: var(--text-primary, #333); + font-size: 1rem; + resize: vertical; +} + +.wizardActions { + display: flex; + gap: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--border-color, #e0e0e0); +} + +.wizardHint { + color: var(--text-secondary, #666); + font-size: 0.9rem; +} + +.confirmSummary { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; + background: var(--surface-color, #f5f5f5); + border-radius: 8px; +} + +.errorBanner { + background: rgba(241, 76, 76, 0.1); + color: #f14c4c; + padding: 0.75rem 1rem; + border-radius: 8px; +} + +.modulesHeader { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} + +.modulesFilters { + display: flex; + gap: 0.5rem; +} + +.modulesFilters select { + padding: 0.4rem 0.75rem; + border-radius: 6px; + border: 1px solid var(--border-color, #ddd); + background: var(--bg-input, #fff); + color: var(--text-primary, #333); + font-size: 0.85rem; +} + +.modulesList { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.moduleCard { + background: var(--bg-card, #fff); + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--border-color, #e0e0e0); +} + +.moduleExpanded { + border-color: var(--primary-color, #F25843); +} + +.moduleHighlighted { + box-shadow: 0 0 0 2px var(--primary-color, #F25843); +} + +.moduleRow { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem 1rem; + cursor: pointer; +} + +.moduleRow:hover { + background: var(--bg-hover, #f5f5f5); +} + +.moduleType { + font-size: 0.75rem; + padding: 0.2rem 0.5rem; + border-radius: 4px; + background: rgba(242, 88, 67, 0.1); + color: var(--primary-color, #F25843); + white-space: nowrap; +} + +.moduleTitle { + flex: 1; + font-weight: 500; +} + +.moduleStatus { + font-size: 0.8rem; + color: var(--text-secondary, #666); +} + +.moduleSessions { + font-size: 0.85rem; + color: var(--text-secondary, #666); +} + +.moduleActions { + display: flex; + gap: 0.5rem; +} + +.sessionList { + padding: 0.5rem 0 0 1rem; + border-top: 1px solid var(--border-color, #e0e0e0); +} + +.sessionRow { + display: flex; + gap: 1rem; + padding: 0.4rem 0; + font-size: 0.9rem; +} + +.sessionStatus { + font-size: 0.8rem; + color: var(--text-secondary, #666); +} + +.sessionDate { + font-size: 0.8rem; + color: var(--text-secondary, #666); +} + +.noSessions { + color: var(--text-secondary, #666); + font-style: italic; + font-size: 0.9rem; + padding: 0.5rem 0; +} + +.confirmOverlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.confirmDialog, +.editDialog { + background: var(--bg-card, #fff); + border: 1px solid var(--border-color, #e0e0e0); + border-radius: 12px; + padding: 1.5rem; + max-width: 400px; + width: 90%; + display: flex; + flex-direction: column; + gap: 1rem; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); +} + +.confirmActions { + display: flex; + gap: 0.75rem; + justify-content: flex-end; +} + +.btnPrimary { + padding: 0.6rem 1.2rem; + border-radius: 8px; + border: none; + background: var(--primary-color, #F25843); + color: #fff; + font-weight: 500; + cursor: pointer; +} + +.btnPrimary:hover:not(:disabled) { filter: brightness(1.08); } +.btnPrimary:disabled { + background: var(--color-medium-gray, #ccc); + color: var(--text-secondary, #888); + cursor: not-allowed; + opacity: 0.8; +} + +.btnSecondary { + padding: 0.6rem 1.2rem; + border-radius: 8px; + border: 1px solid var(--border-color, #ddd); + background: transparent; + color: var(--text-primary, #333); + cursor: pointer; +} + +.btnSecondary:hover:not(:disabled) { background: var(--hover-bg, #f5f5f5); border-color: var(--primary-color, #F25843); color: var(--primary-color, #F25843); } + +.btnDanger { + padding: 0.6rem 1.2rem; + border-radius: 8px; + border: none; + background: #f14c4c; + color: #fff; + font-weight: 500; + cursor: pointer; +} + +.btnDanger:hover:not(:disabled) { filter: brightness(1.08); } + +.btnSmall { + padding: 0.3rem 0.7rem; + border-radius: 4px; + border: 1px solid var(--border-color, #ddd); + background: transparent; + color: var(--text-primary, #333); + font-size: 0.8rem; + cursor: pointer; +} + +.btnSmall:hover:not(:disabled) { border-color: var(--primary-color, #F25843); color: var(--primary-color, #F25843); } + +.btnSmall.btnSmallActive { + background: var(--primary-color, #F25843); + border-color: var(--primary-color, #F25843); + color: #fff; +} + +.btnSmall.btnSmallActive:hover:not(:disabled) { filter: brightness(1.08); color: #fff; } + +.btnSmallDanger { + padding: 0.3rem 0.7rem; + border-radius: 4px; + border: 1px solid #f14c4c; + background: transparent; + color: #f14c4c; + font-size: 0.8rem; + cursor: pointer; +} + +.btnSmallDanger:hover:not(:disabled) { background: var(--error-color, #dc2626); color: #fff; } + +.loading { + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; + color: var(--text-secondary, #666); +} diff --git a/src/pages/views/commcoach/CommcoachAssistantView.tsx b/src/pages/views/commcoach/CommcoachAssistantView.tsx new file mode 100644 index 0000000..c0352e9 --- /dev/null +++ b/src/pages/views/commcoach/CommcoachAssistantView.tsx @@ -0,0 +1,175 @@ +/** + * CommCoach Assistant View + * + * Wizard flow: Module type → Topic → Persona → KPIs → "Start first session" + */ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useCurrentInstance } from '../../../hooks/useCurrentInstance'; +import * as commcoachApi from '../../../api/commcoachApi'; +import { useLanguage } from '../../../providers/language/LanguageContext'; +import styles from './Commcoach.module.css'; + +type WizardStep = 'type' | 'topic' | 'persona' | 'kpis' | 'confirm'; + +const STEPS: WizardStep[] = ['type', 'topic', 'persona', 'kpis', 'confirm']; + +const MODULE_TYPES = [ + { value: 'coaching', label: 'Coaching', icon: '🎯' }, + { value: 'training', label: 'Training', icon: '📚' }, + { value: 'exam', label: 'Prüfung', icon: '✍️' }, + { value: 'elearning', label: 'E-Learning', icon: '💻' }, +]; + +export const CommcoachAssistantView: React.FC = () => { + const { t } = useLanguage(); + const { instance, mandateId } = useCurrentInstance(); + const instanceId = instance?.id || ''; + const navigate = useNavigate(); + + const [step, setStep] = useState('type'); + const [moduleType, setModuleType] = useState('coaching'); + const [title, setTitle] = useState(''); + const [goals, setGoals] = useState(''); + const [personaId, setPersonaId] = useState(null); + const [personas, setPersonas] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const stepIdx = STEPS.indexOf(step); + + const _handleNext = () => { + const nextIdx = stepIdx + 1; + if (nextIdx < STEPS.length) setStep(STEPS[nextIdx]); + }; + + const _handleBack = () => { + const prevIdx = stepIdx - 1; + if (prevIdx >= 0) setStep(STEPS[prevIdx]); + }; + + const _handleCreate = async () => { + if (!title.trim()) { + setError(t('Bitte einen Titel eingeben')); + return; + } + setLoading(true); + setError(null); + try { + const params = new URLSearchParams(window.location.search); + const apiRequest = commcoachApi.getApiRequest(); + const module = await commcoachApi.createModuleApi(apiRequest, instanceId, { + title: title.trim(), + moduleType, + goals: goals.trim() || undefined, + personaId: personaId || undefined, + }); + navigate(`/mandates/${mandateId}/commcoach/${instanceId}/session?moduleId=${module.id}`); + } catch (err: any) { + setError(err?.message || t('Fehler beim Erstellen')); + } finally { + setLoading(false); + } + }; + + return ( +
+
+

{t('Neues Modul erstellen')}

+
+ {STEPS.map((s, i) => ( +
+ ))} +
+
+ + {error &&
{error}
} + +
+ {step === 'type' && ( +
+

{t('Modul-Typ wählen')}

+
+ {MODULE_TYPES.map(mt => ( + + ))} +
+
+ )} + + {step === 'topic' && ( +
+

{t('Thema & Titel')}

+ setTitle(e.target.value)} + autoFocus + /> +