374 lines
13 KiB
TypeScript
374 lines
13 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
||
import ReactDOM from 'react-dom';
|
||
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';
|
||
import { FaFolder, FaFolderOpen, FaList, FaPen, FaPlus } from 'react-icons/fa';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Types
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export interface GroupBulkAction {
|
||
icon?: React.ReactNode;
|
||
title?: string;
|
||
variant?: 'default' | 'danger';
|
||
onClick: () => void;
|
||
disabled?: boolean;
|
||
}
|
||
|
||
/** Horizontal shift per nesting level — keep in sync with item rows (`FormGeneratorTable`). */
|
||
export const GROUP_TREE_INDENT_STEP_PX = 20;
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// GroupFolderRow
|
||
// ---------------------------------------------------------------------------
|
||
|
||
/** Folder row: optional select column, then one merged cell for folder UI (spans actions + data cols — no blank actions column). */
|
||
export interface GroupFolderTableCells {
|
||
showSelect: boolean;
|
||
/** `<td colSpan>` for folder strip = `detectedColumns.length` + (1 if table has an actions column). */
|
||
dataColumnsCount: number;
|
||
selectClassName: string;
|
||
selectTdStyle?: React.CSSProperties;
|
||
}
|
||
|
||
interface GroupFolderRowProps {
|
||
node: TableGroupNode;
|
||
depth: number;
|
||
/** Checkbox for “whole subtree”: select / clear all selectable visible items under this folder. */
|
||
subtreeSelect?: {
|
||
checked: boolean;
|
||
indeterminate: boolean;
|
||
disabled: boolean;
|
||
onToggle: () => void;
|
||
};
|
||
/** When set, use split `<td>` layout; omit single-cell colspan. */
|
||
tableCells?: GroupFolderTableCells;
|
||
/** Legacy single spanning cell — only used when `tableCells` is omitted. */
|
||
colSpan?: number;
|
||
visibleCount: number;
|
||
isExpanded: boolean;
|
||
isEditing: boolean;
|
||
/** True while an ITEM is dragged over this row (drop item into group). */
|
||
isDragOver: boolean;
|
||
/** True while a GROUP is dragged over this row (nest group inside). */
|
||
isDragOverFromGroup: boolean;
|
||
bulkActions?: GroupBulkAction[];
|
||
onToggle: () => void;
|
||
onEditCommit: (name: string) => void;
|
||
onEditCancel: () => void;
|
||
onRename: () => void;
|
||
onAddSub: () => void;
|
||
// Item drag-drop
|
||
onItemDragOver: (e: React.DragEvent) => void;
|
||
onItemDrop: (e: React.DragEvent) => void;
|
||
onItemDragLeave: () => void;
|
||
// Group drag (this row is draggable)
|
||
onGroupDragStart: (e: React.DragEvent) => void;
|
||
onGroupDragEnd: () => void;
|
||
onGroupDrag?: (e: React.DragEvent) => void;
|
||
/** True while this group is being dragged leftward to pop out one level */
|
||
isDraggingOut?: boolean;
|
||
/** Hide this row via display:none (keeps it in DOM so drag operations don't break) */
|
||
hidden?: boolean;
|
||
// Group drop (another group dropped onto this)
|
||
onGroupDragOver: (e: React.DragEvent) => void;
|
||
onGroupDrop: (e: React.DragEvent) => void;
|
||
onGroupDragLeave: () => void;
|
||
}
|
||
|
||
export function GroupFolderRow({
|
||
node,
|
||
depth,
|
||
subtreeSelect,
|
||
tableCells,
|
||
colSpan,
|
||
visibleCount,
|
||
isExpanded,
|
||
isEditing,
|
||
isDragOver,
|
||
isDragOverFromGroup,
|
||
isDraggingOut,
|
||
hidden,
|
||
bulkActions = [],
|
||
onToggle,
|
||
onEditCommit,
|
||
onEditCancel,
|
||
onRename,
|
||
onAddSub,
|
||
onItemDragOver,
|
||
onItemDrop,
|
||
onItemDragLeave,
|
||
onGroupDragStart,
|
||
onGroupDragEnd,
|
||
onGroupDrag,
|
||
onGroupDragOver,
|
||
onGroupDrop,
|
||
onGroupDragLeave,
|
||
}: GroupFolderRowProps) {
|
||
const { t } = useLanguage();
|
||
const { ConfirmDialog } = useConfirm();
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
const subtreeCbRef = useRef<HTMLInputElement>(null);
|
||
const totalCount = node.itemIds.length;
|
||
|
||
useEffect(() => {
|
||
const el = subtreeCbRef.current;
|
||
if (!el || !subtreeSelect) return;
|
||
el.indeterminate = subtreeSelect.indeterminate;
|
||
}, [subtreeSelect?.indeterminate, subtreeSelect?.checked, subtreeSelect]);
|
||
|
||
useEffect(() => {
|
||
if (isEditing && inputRef.current) {
|
||
inputRef.current.focus();
|
||
inputRef.current.select();
|
||
}
|
||
}, [isEditing]);
|
||
|
||
const indentPx = depth * GROUP_TREE_INDENT_STEP_PX;
|
||
|
||
const _rowClass = [
|
||
styles.groupFolderRow,
|
||
tableCells ? fgTableCss.treeRowIndented : '',
|
||
isDragOver ? styles.dragOver : '',
|
||
isDragOverFromGroup ? styles.dragOverGroup : '',
|
||
isDraggingOut ? styles.draggingOut : '',
|
||
subtreeSelect?.checked && !subtreeSelect?.disabled ? styles.folderRowSubtreeFull : '',
|
||
subtreeSelect?.indeterminate && !subtreeSelect?.checked ? styles.folderRowSubtreePartial : '',
|
||
].filter(Boolean).join(' ');
|
||
|
||
const mergedColSpan =
|
||
tableCells
|
||
? tableCells.dataColumnsCount
|
||
: (colSpan ?? 1);
|
||
|
||
const folderStripStyle =
|
||
({
|
||
'--group-indent': `${indentPx}px`,
|
||
...(tableCells
|
||
? { ['--row-tree-indent' as string]: `${depth * GROUP_TREE_INDENT_STEP_PX}px` }
|
||
: {}),
|
||
}) as React.CSSProperties;
|
||
|
||
const guardDragDecor = (
|
||
e: React.DragEvent,
|
||
relay: React.DragEventHandler | undefined,
|
||
) => {
|
||
const el = e.target as HTMLElement;
|
||
if (el.closest('input, button, textarea, label')) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
return;
|
||
}
|
||
relay?.(e);
|
||
};
|
||
|
||
const folderCells = (
|
||
<>
|
||
{typeof document !== 'undefined' && ReactDOM.createPortal(<ConfirmDialog />, document.body)}
|
||
|
||
<tr
|
||
className={_rowClass}
|
||
style={{ ...folderStripStyle, display: hidden ? 'none' : undefined } as React.CSSProperties}
|
||
draggable={!isEditing}
|
||
onDragStart={(e) => guardDragDecor(e, onGroupDragStart)}
|
||
onDrag={(e) => guardDragDecor(e, onGroupDrag)}
|
||
onDragEnd={(e) => guardDragDecor(e, onGroupDragEnd)}
|
||
// item drag-over
|
||
onDragOver={(e) => {
|
||
// distinguish item vs group drag via dataTransfer type
|
||
if (e.dataTransfer.types.includes('application/porta-group')) {
|
||
onGroupDragOver(e);
|
||
} else {
|
||
onItemDragOver(e);
|
||
}
|
||
}}
|
||
onDrop={(e) => {
|
||
if (e.dataTransfer.types.includes('application/porta-group')) {
|
||
onGroupDrop(e);
|
||
} else {
|
||
onItemDrop(e);
|
||
}
|
||
}}
|
||
onDragLeave={() => { onItemDragLeave(); onGroupDragLeave(); }}
|
||
onDragEnter={(e) => e.preventDefault()}
|
||
>
|
||
{tableCells?.showSelect && (
|
||
<td className={tableCells.selectClassName} style={tableCells.selectTdStyle}>
|
||
{subtreeSelect && (
|
||
<input
|
||
ref={subtreeCbRef}
|
||
type="checkbox"
|
||
checked={subtreeSelect.checked}
|
||
disabled={subtreeSelect.disabled}
|
||
onChange={(e) => { e.stopPropagation(); subtreeSelect.onToggle(); }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
title={node.name ? t('Auswahl unter „{name}“', { name: node.name }) : t('Auswahl dieser Gruppe')}
|
||
aria-label={node.name ? t('Alle sichtbaren Einträge in „{name}“ auswählen', { name: node.name }) : t('Alle sichtbaren Einträge in dieser Gruppe auswählen')}
|
||
/>
|
||
)}
|
||
</td>
|
||
)}
|
||
<td colSpan={tableCells ? mergedColSpan : (colSpan ?? 1)} className={styles.folderCell}>
|
||
<div className={styles.folderInner}>
|
||
{/* Indent */}
|
||
{indentPx > 0 && <span className={styles.indent} style={{ width: indentPx }} />}
|
||
|
||
{/* Chevron */}
|
||
<button
|
||
className={`${styles.chevronBtn} ${isExpanded ? styles.chevronOpen : ''}`}
|
||
type="button"
|
||
onClick={(e) => { e.stopPropagation(); onToggle(); }}
|
||
title={isExpanded ? t('Zuklappen') : t('Aufklappen')}
|
||
tabIndex={-1}
|
||
>
|
||
<span className={styles.chevronArrow} />
|
||
</button>
|
||
|
||
{/* Folder icon */}
|
||
<span className={styles.folderIcon}>
|
||
{isExpanded ? <FaFolderOpen /> : <FaFolder />}
|
||
</span>
|
||
|
||
{/* Name / inline input */}
|
||
{isEditing ? (
|
||
<input
|
||
ref={inputRef}
|
||
defaultValue={node.name}
|
||
className={styles.nameInput}
|
||
placeholder={t('Gruppenname…')}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') onEditCommit(e.currentTarget.value);
|
||
if (e.key === 'Escape') onEditCancel();
|
||
}}
|
||
onBlur={(e) => onEditCommit(e.target.value)}
|
||
/>
|
||
) : (
|
||
<span className={styles.groupName} onClick={(e) => { e.stopPropagation(); onToggle(); }}>
|
||
{node.name || <em className={styles.unnamed}>{t('(Unbenannt)')}</em>}
|
||
</span>
|
||
)}
|
||
|
||
{/* Item count badge */}
|
||
{!isEditing && (
|
||
<span className={styles.badge}>
|
||
{visibleCount < totalCount && totalCount > 0
|
||
? `${visibleCount} / ${totalCount}`
|
||
: String(totalCount)}
|
||
</span>
|
||
)}
|
||
|
||
{/* Drop hint */}
|
||
{(isDragOver || isDragOverFromGroup) && (
|
||
<span className={styles.dropHint}>
|
||
{isDragOverFromGroup ? t('Als Untergruppe ablegen') : t('Hierher ziehen')}
|
||
</span>
|
||
)}
|
||
|
||
{/* ── Bulk actions (delete all, custom batch) right after badge ── */}
|
||
{!isEditing && bulkActions.length > 0 && (
|
||
<>
|
||
<span className={styles.separator} />
|
||
<span className={styles.actions}>
|
||
{bulkActions.map((action, i) => (
|
||
<button
|
||
key={i}
|
||
type="button"
|
||
className={`${styles.actionBtn} ${action.variant === 'danger' ? styles.actionBtnDanger : ''}`}
|
||
title={action.title}
|
||
disabled={!!action.disabled}
|
||
onClick={(e) => { e.stopPropagation(); if (!action.disabled) action.onClick(); }}
|
||
>
|
||
{action.icon}
|
||
</button>
|
||
))}
|
||
</span>
|
||
</>
|
||
)}
|
||
|
||
{/* ── Group management: rename / add-subgroup ── */}
|
||
{!isEditing && (
|
||
<span className={styles.mgmtActions}>
|
||
<button type="button" onClick={(e) => { e.stopPropagation(); onRename(); }} title={t('Umbenennen')} className={styles.mgmtBtn}><FaPen /></button>
|
||
<button type="button" onClick={(e) => { e.stopPropagation(); onAddSub(); }} title={t('Untergruppe erstellen')} className={styles.mgmtBtn}><FaPlus /></button>
|
||
</span>
|
||
)}
|
||
|
||
<span style={{ flex: 1 }} />
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</>
|
||
);
|
||
|
||
return folderCells;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// BreadcrumbRow
|
||
// ---------------------------------------------------------------------------
|
||
|
||
interface BreadcrumbRowProps {
|
||
groupName: string;
|
||
totalItems: number;
|
||
colSpan: number;
|
||
onBack: () => void;
|
||
}
|
||
|
||
export function BreadcrumbRow({ groupName, totalItems, colSpan, onBack }: BreadcrumbRowProps) {
|
||
const { t } = useLanguage();
|
||
return (
|
||
<tr className={styles.breadcrumbRow}>
|
||
<td colSpan={colSpan} className={styles.breadcrumbCell}>
|
||
<div className={styles.breadcrumbInner}>
|
||
<button className={styles.backButton} onClick={onBack}>
|
||
← {t('Alle anzeigen')}
|
||
</button>
|
||
<span className={styles.breadcrumbSep}>›</span>
|
||
<span className={styles.breadcrumbCurrent}>{groupName}</span>
|
||
{totalItems > 0 && (
|
||
<span style={{ color: 'var(--color-text-secondary, #94a3b8)', fontSize: '11px' }}>
|
||
({totalItems} {t('Einträge')})
|
||
</span>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// UngroupedRow — also a drop zone for removing items/groups from groups
|
||
// ---------------------------------------------------------------------------
|
||
|
||
interface UngroupedRowProps {
|
||
count: number;
|
||
colSpan: number;
|
||
isDragOver?: boolean;
|
||
onDragOver?: (e: React.DragEvent) => void;
|
||
onDrop?: (e: React.DragEvent) => void;
|
||
onDragLeave?: () => void;
|
||
}
|
||
|
||
export function UngroupedRow({ count, colSpan, isDragOver, onDragOver, onDrop, onDragLeave }: UngroupedRowProps) {
|
||
const { t } = useLanguage();
|
||
return (
|
||
<tr
|
||
className={`${styles.ungroupedRow} ${isDragOver ? styles.ungroupedDragOver : ''}`}
|
||
onDragOver={onDragOver}
|
||
onDrop={onDrop}
|
||
onDragLeave={onDragLeave}
|
||
onDragEnter={(e) => e.preventDefault()}
|
||
>
|
||
<td colSpan={colSpan} className={styles.ungroupedCell}>
|
||
<span className={styles.folderIcon}><FaList /></span>
|
||
{t('Nicht zugeordnet')}
|
||
<span className={styles.badge}>{count}</span>
|
||
{isDragOver && <span className={styles.dropHint}>{t('Aus Gruppe entfernen')}</span>}
|
||
</td>
|
||
</tr>
|
||
);
|
||
}
|