2325 lines
89 KiB
TypeScript
2325 lines
89 KiB
TypeScript
/**
|
||
* SourcesTab – Full data-source management inside the Unified Data Bar.
|
||
*
|
||
* Tree structure (Browse Sources):
|
||
* UserConnection (Level 1, loaded on mount)
|
||
* └─ Service (Level 2, loaded when connection expanded)
|
||
* └─ Folder / Site / File (Level 3+, loaded when service/folder expanded)
|
||
*
|
||
* Feature Data tree (catalog-driven, supports recursive nesting):
|
||
* MandateGroup
|
||
* └─ FeatureConnection (feature instance)
|
||
* ├─ Group (categorical folder, isGroup=true)
|
||
* │ └─ ParentGroup or Table
|
||
* ├─ ParentGroup (table with isParent=true) → records
|
||
* │ └─ Record → child tables (which can themselves be ParentGroups → recursion)
|
||
* └─ Table (standalone)
|
||
*
|
||
* Path-aware state-keys (segments joined by '|', prefixed by featureInstanceId):
|
||
* g:<objectKey> - categorical group folder
|
||
* p:<tableName> - parent group (record list of that table)
|
||
* r:<tableName>:<id> - specific record (its child tables rendered when expanded)
|
||
*
|
||
* Active Sources sections show scope-cycling and neutralize-toggle buttons.
|
||
*/
|
||
|
||
import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
|
||
import type { UdbContext } from './UnifiedDataBar';
|
||
import api from '../../api';
|
||
import { getPageIcon } from '../../config/pageRegistry';
|
||
import styles from './SourcesTab.module.css';
|
||
|
||
import { useLanguage } from '../../providers/language/LanguageContext';
|
||
|
||
/* ─── Types (inline, no external imports) ────────────────────────────── */
|
||
|
||
interface UdbDataSource {
|
||
id: string;
|
||
connectionId: string;
|
||
sourceType: string;
|
||
path: string;
|
||
label: string;
|
||
displayPath?: string;
|
||
scope: string;
|
||
neutralize: boolean;
|
||
}
|
||
|
||
interface UdbFeatureDataSource {
|
||
id: string;
|
||
featureInstanceId: string;
|
||
featureCode: string;
|
||
tableName: string;
|
||
objectKey: string;
|
||
label: string;
|
||
scope: string;
|
||
neutralize: boolean;
|
||
neutralizeFields?: string[];
|
||
recordFilter?: Record<string, string>;
|
||
}
|
||
|
||
interface TreeNode {
|
||
key: string;
|
||
label: string;
|
||
icon: string;
|
||
type: 'connection' | 'service' | 'folder' | 'file';
|
||
expanded: boolean;
|
||
loading: boolean;
|
||
children: TreeNode[] | null;
|
||
connectionId: string;
|
||
service?: string;
|
||
path?: string;
|
||
displayPath?: string;
|
||
authority?: string;
|
||
}
|
||
|
||
interface FeatureConnectionNode {
|
||
featureInstanceId: string;
|
||
featureCode: string;
|
||
mandateId?: string;
|
||
label: string;
|
||
icon: string;
|
||
tableCount: number;
|
||
expanded: boolean;
|
||
loading: boolean;
|
||
tables: FeatureTableNode[] | null;
|
||
}
|
||
|
||
interface MandateGroupNode {
|
||
mandateId: string;
|
||
mandateLabel: string;
|
||
expanded: boolean;
|
||
featureConnections: FeatureConnectionNode[];
|
||
}
|
||
|
||
interface FeatureTableNode {
|
||
objectKey: string;
|
||
tableName: string;
|
||
label: string;
|
||
fields: string[];
|
||
isParent?: boolean;
|
||
parentTable?: string | null;
|
||
parentKey?: string | null;
|
||
displayFields?: string[];
|
||
isGroup?: boolean;
|
||
group?: string | null;
|
||
}
|
||
|
||
interface ParentRecordNode {
|
||
id: string;
|
||
displayLabel: string;
|
||
fields: Record<string, any>;
|
||
tableName: string;
|
||
}
|
||
|
||
/* ─── Props ──────────────────────────────────────────────────────────── */
|
||
|
||
interface SourcesTabProps {
|
||
context: UdbContext;
|
||
onSourcesChanged?: () => void;
|
||
onSendToChat_FeatureSource?: (params: { featureInstanceId: string; featureCode: string; tableName?: string; objectKey: string; label: string; fieldName?: string }) => void;
|
||
onAttachDataSource?: (dsId: string) => void;
|
||
}
|
||
|
||
/* ─── Icons ──────────────────────────────────────────────────────────── */
|
||
|
||
const _AUTHORITY_ICONS: Record<string, string> = {
|
||
msft: '\uD83D\uDFE6',
|
||
google: '\uD83D\uDFE9',
|
||
clickup: '\uD83D\uDCCB',
|
||
'local:ftp': '\uD83D\uDD17',
|
||
'local:jira': '\uD83D\uDD27',
|
||
};
|
||
|
||
const _SERVICE_ICONS: Record<string, string> = {
|
||
sharepoint: '\uD83D\uDCC1',
|
||
onedrive: '\u2601\uFE0F',
|
||
outlook: '\uD83D\uDCE7',
|
||
teams: '\uD83D\uDCAC',
|
||
drive: '\uD83D\uDCC2',
|
||
gmail: '\uD83D\uDCE8',
|
||
files: '\uD83D\uDCC2',
|
||
};
|
||
|
||
/* ─── Source colors & icons ──────────────────────────────────────────── */
|
||
|
||
const _SOURCE_COLORS: Record<string, string> = {
|
||
sharepointFolder: '#0078d4',
|
||
sharepoint: '#0078d4',
|
||
onedriveFolder: '#0078d4',
|
||
onedrive: '#0078d4',
|
||
outlookFolder: '#0078d4',
|
||
outlook: '#0078d4',
|
||
googleDriveFolder: '#34a853',
|
||
drive: '#34a853',
|
||
gmailFolder: '#ea4335',
|
||
gmail: '#ea4335',
|
||
ftpFolder: '#795548',
|
||
files: '#795548',
|
||
'local:ftp': '#795548',
|
||
'local:jira': '#0052CC',
|
||
clickup: '#7b68ee',
|
||
};
|
||
|
||
function _getSourceColor(sourceType: string): string {
|
||
return _SOURCE_COLORS[sourceType] || '#F25843';
|
||
}
|
||
|
||
/* ─── Scope / Neutralize constants ───────────────────────────────────── */
|
||
|
||
const _SCOPE_ORDER: string[] = ['personal', 'featureInstance', 'mandate'];
|
||
|
||
const _SCOPE_ICONS: Record<string, string> = {
|
||
personal: '\uD83D\uDC64',
|
||
featureInstance: '\uD83D\uDC65',
|
||
mandate: '\uD83C\uDFE2',
|
||
global: '\uD83C\uDF10',
|
||
};
|
||
|
||
function _nextScope(current: string): string {
|
||
const idx = _SCOPE_ORDER.indexOf(current);
|
||
if (idx === -1) return _SCOPE_ORDER[0];
|
||
return _SCOPE_ORDER[(idx + 1) % _SCOPE_ORDER.length];
|
||
}
|
||
|
||
const _SERVICE_TO_SOURCE_TYPE: Record<string, string> = {
|
||
sharepoint: 'sharepointFolder',
|
||
onedrive: 'onedriveFolder',
|
||
outlook: 'outlookFolder',
|
||
drive: 'googleDriveFolder',
|
||
gmail: 'gmailFolder',
|
||
files: 'ftpFolder',
|
||
};
|
||
|
||
/* ─── Tree helpers ───────────────────────────────────────────────────── */
|
||
|
||
function _mapTree(nodes: TreeNode[], key: string, updater: (n: TreeNode) => TreeNode): TreeNode[] {
|
||
return nodes.map(n => {
|
||
if (n.key === key) return updater(n);
|
||
if (n.children) return { ...n, children: _mapTree(n.children, key, updater) };
|
||
return n;
|
||
});
|
||
}
|
||
|
||
function _mapFeatureTreeUpdate(
|
||
prev: MandateGroupNode[],
|
||
featureInstanceId: string,
|
||
updater: (n: FeatureConnectionNode) => FeatureConnectionNode,
|
||
): MandateGroupNode[] {
|
||
return prev.map(g => ({
|
||
...g,
|
||
featureConnections: g.featureConnections.map(n =>
|
||
n.featureInstanceId === featureInstanceId ? updater(n) : n
|
||
),
|
||
}));
|
||
}
|
||
|
||
function _findTableFields(
|
||
groups: MandateGroupNode[],
|
||
featureInstanceId: string,
|
||
tableName: string,
|
||
): string[] {
|
||
for (const g of groups) {
|
||
const fc = g.featureConnections.find(f => f.featureInstanceId === featureInstanceId);
|
||
if (fc?.tables) {
|
||
const tbl = fc.tables.find(t => t.tableName === tableName);
|
||
if (tbl) return tbl.fields;
|
||
}
|
||
}
|
||
return [];
|
||
}
|
||
|
||
/* ─── Feature tree builder (catalog → renderable items) ──────────────── */
|
||
|
||
type FeatureItem =
|
||
| { kind: 'group'; objectKey: string; label: string; items: FeatureItem[] }
|
||
| { kind: 'parentGroup'; table: FeatureTableNode }
|
||
| { kind: 'table'; table: FeatureTableNode };
|
||
|
||
/**
|
||
* Build the top-level feature tree from the flat catalog table list.
|
||
*
|
||
* - Items with `isGroup: true` become categorical group folders.
|
||
* - Items with `group: <objectKey>` are placed inside the corresponding group.
|
||
* - Items with `parentTable` set are NOT rendered at top level — they are
|
||
* rendered dynamically when a parent record is expanded.
|
||
* - Items with `isParent: true` (and no parentTable) become top-level parent groups.
|
||
* - Everything else renders as a standalone table.
|
||
*
|
||
* Catalog declaration order is preserved; group children appear nested under
|
||
* the group folder in the order they were declared.
|
||
*/
|
||
function _buildTopFeatureTree(tables: FeatureTableNode[]): FeatureItem[] {
|
||
const groupChildren: Record<string, FeatureItem[]> = {};
|
||
for (const t of tables) {
|
||
if (t.isGroup) groupChildren[t.objectKey] = [];
|
||
}
|
||
|
||
const result: FeatureItem[] = [];
|
||
for (const t of tables) {
|
||
if (t.isGroup) {
|
||
result.push({ kind: 'group', objectKey: t.objectKey, label: t.label, items: groupChildren[t.objectKey] });
|
||
} else if (t.parentTable) {
|
||
// Skip — child tables are rendered when their parent record is expanded.
|
||
continue;
|
||
} else if (t.group && groupChildren[t.group]) {
|
||
const item: FeatureItem = t.isParent
|
||
? { kind: 'parentGroup', table: t }
|
||
: { kind: 'table', table: t };
|
||
groupChildren[t.group].push(item);
|
||
} else if (t.isParent) {
|
||
result.push({ kind: 'parentGroup', table: t });
|
||
} else {
|
||
result.push({ kind: 'table', table: t });
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* Children of a parent record: child tables (where parentTable === recordTableName)
|
||
* rendered as parentGroup or standalone table (recursion enables N-level nesting).
|
||
*/
|
||
function _childrenForRecord(allTables: FeatureTableNode[], parentTableName: string): FeatureItem[] {
|
||
return allTables
|
||
.filter(t => t.parentTable === parentTableName)
|
||
.map<FeatureItem>(t => t.isParent
|
||
? { kind: 'parentGroup', table: t }
|
||
: { kind: 'table', table: t });
|
||
}
|
||
|
||
function _pathKey(featureInstanceId: string, segments: string[]): string {
|
||
return [featureInstanceId, ...segments].join('|');
|
||
}
|
||
|
||
/** Walks back through a path to find the closest preceding `r:<table>:<id>` segment. */
|
||
function _closestRecordSegment(segments: string[]): { tableName: string; recordId: string } | null {
|
||
for (let i = segments.length - 1; i >= 0; i--) {
|
||
const seg = segments[i];
|
||
if (seg.startsWith('r:')) {
|
||
const rest = seg.slice(2);
|
||
const sepIdx = rest.indexOf(':');
|
||
if (sepIdx > 0) {
|
||
return { tableName: rest.slice(0, sepIdx), recordId: rest.slice(sepIdx + 1) };
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/* ─── Data fetching (module-level) ───────────────────────────────────── */
|
||
|
||
async function _loadServices(instanceId: string, connectionId: string): Promise<TreeNode[]> {
|
||
const res = await api.get(`/api/workspace/${instanceId}/connections/${connectionId}/services`);
|
||
const services = res.data.services || [];
|
||
return services.map((s: any) => ({
|
||
key: `svc-${connectionId}-${s.service}`,
|
||
label: s.label || s.service,
|
||
icon: _SERVICE_ICONS[s.service] || '\uD83D\uDCC2',
|
||
type: 'service' as const,
|
||
expanded: false,
|
||
loading: false,
|
||
children: null,
|
||
connectionId,
|
||
service: s.service,
|
||
path: '/',
|
||
displayPath: s.label || s.service,
|
||
}));
|
||
}
|
||
|
||
async function _browseService(
|
||
instanceId: string,
|
||
connectionId: string,
|
||
service: string,
|
||
path: string,
|
||
parentDisplayPath: string | undefined,
|
||
): Promise<TreeNode[]> {
|
||
const res = await api.get(`/api/workspace/${instanceId}/connections/${connectionId}/browse`, {
|
||
params: { service, path },
|
||
});
|
||
const items = res.data.items || [];
|
||
return items.map((entry: any, idx: number) => {
|
||
const seg = entry.name || '';
|
||
const displayPath = parentDisplayPath
|
||
? `${parentDisplayPath} / ${seg}`
|
||
: seg;
|
||
return {
|
||
key: `item-${connectionId}-${service}-${entry.path || idx}`,
|
||
label: entry.name,
|
||
icon: entry.isFolder ? '\uD83D\uDCC1' : _fileIcon(entry.name),
|
||
type: entry.isFolder ? 'folder' as const : 'file' as const,
|
||
expanded: false,
|
||
loading: false,
|
||
children: entry.isFolder ? null : [],
|
||
connectionId,
|
||
service,
|
||
path: entry.path,
|
||
displayPath,
|
||
};
|
||
});
|
||
}
|
||
|
||
function _fileIcon(name: string): string {
|
||
const ext = name.split('.').pop()?.toLowerCase() || '';
|
||
const map: Record<string, string> = {
|
||
pdf: '\uD83D\uDCC4', doc: '\uD83D\uDCDD', docx: '\uD83D\uDCDD',
|
||
xls: '\uD83D\uDCCA', xlsx: '\uD83D\uDCCA', csv: '\uD83D\uDCCA',
|
||
ppt: '\uD83D\uDCC8', pptx: '\uD83D\uDCC8',
|
||
txt: '\uD83D\uDCC4', json: '\uD83D\uDCCB',
|
||
png: '\uD83D\uDDBC\uFE0F', jpg: '\uD83D\uDDBC\uFE0F', jpeg: '\uD83D\uDDBC\uFE0F',
|
||
zip: '\uD83D\uDCE6', rar: '\uD83D\uDCE6',
|
||
mp3: '\uD83C\uDFB5', wav: '\uD83C\uDFB5',
|
||
mp4: '\uD83C\uDFAC', mov: '\uD83C\uDFAC',
|
||
};
|
||
return map[ext] || '\uD83D\uDCC4';
|
||
}
|
||
|
||
/* ─── Spinner (inline) ───────────────────────────────────────────────── */
|
||
|
||
function _Spinner(): React.ReactElement {
|
||
return (
|
||
<span style={{
|
||
display: 'inline-block', width: 10, height: 10,
|
||
border: '1.5px solid var(--border-color, #ccc)', borderTopColor: 'var(--primary-color, #F25843)',
|
||
borderRadius: '50%',
|
||
animation: 'spin 0.6s linear infinite',
|
||
}} />
|
||
);
|
||
}
|
||
|
||
/* ─── Component ──────────────────────────────────────────────────────── */
|
||
|
||
const SourcesTab: React.FC<SourcesTabProps> = ({ context, onSourcesChanged, onSendToChat_FeatureSource, onAttachDataSource }) => {
|
||
const { t } = useLanguage();
|
||
const _scopeLabel = (scope: string) => ({
|
||
personal: t('Persönlich'),
|
||
featureInstance: t('Feature-Instanz'),
|
||
mandate: t('Mandant'),
|
||
global: t('Global'),
|
||
} as Record<string, string>)[scope] || scope;
|
||
const _scopeCycleTitle = (scope: string) =>
|
||
`${t('Bereich')}: ${_scopeLabel(scope)} → ${_scopeLabel(_nextScope(scope))}`;
|
||
const instanceId = context.instanceId;
|
||
|
||
/* ── Active sources (fetched internally) ── */
|
||
const [dataSources, setDataSources] = useState<UdbDataSource[]>([]);
|
||
const [featureDataSources, setFeatureDataSources] = useState<UdbFeatureDataSource[]>([]);
|
||
|
||
/* ── Browse tree state ── */
|
||
const [tree, setTree] = useState<TreeNode[]>([]);
|
||
const [loadingRoot, setLoadingRoot] = useState(false);
|
||
const [addingPath, setAddingPath] = useState<string | null>(null);
|
||
|
||
/* ── Feature tree state ── */
|
||
const [featureTree, setFeatureTree] = useState<MandateGroupNode[]>([]);
|
||
const [loadingFeatures, setLoadingFeatures] = useState(false);
|
||
const [addingFeatureKey, setAddingFeatureKey] = useState<string | null>(null);
|
||
|
||
/* ── Path-aware feature node state (groups, parent groups, records) ── */
|
||
const [featureExpandedPaths, setFeatureExpandedPaths] = useState<Set<string>>(new Set());
|
||
const [featureRecordsByPath, setFeatureRecordsByPath] = useState<Record<string, ParentRecordNode[]>>({});
|
||
const [featureLoadingPath, setFeatureLoadingPath] = useState<string | null>(null);
|
||
const [addingRecordPath, setAddingRecordPath] = useState<string | null>(null);
|
||
|
||
/* ── Multi-selection state for Browse-Tree ── */
|
||
const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
|
||
const lastClickedKeyRef = useRef<string | null>(null);
|
||
|
||
const _flattenVisibleKeys = useCallback((nodes: TreeNode[]): string[] => {
|
||
const result: string[] = [];
|
||
for (const n of nodes) {
|
||
result.push(n.key);
|
||
if (n.expanded && n.children) {
|
||
result.push(..._flattenVisibleKeys(n.children));
|
||
}
|
||
}
|
||
return result;
|
||
}, []);
|
||
|
||
const _handleNodeSelect = useCallback((node: TreeNode, e: React.MouseEvent) => {
|
||
if (e.ctrlKey || e.metaKey) {
|
||
setSelectedKeys(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(node.key)) next.delete(node.key); else next.add(node.key);
|
||
return next;
|
||
});
|
||
lastClickedKeyRef.current = node.key;
|
||
} else if (e.shiftKey && lastClickedKeyRef.current) {
|
||
const visible = _flattenVisibleKeys(tree);
|
||
const a = visible.indexOf(lastClickedKeyRef.current);
|
||
const b = visible.indexOf(node.key);
|
||
if (a !== -1 && b !== -1) {
|
||
const [start, end] = a < b ? [a, b] : [b, a];
|
||
setSelectedKeys(new Set(visible.slice(start, end + 1)));
|
||
}
|
||
} else {
|
||
setSelectedKeys(new Set([node.key]));
|
||
lastClickedKeyRef.current = node.key;
|
||
}
|
||
}, [tree, _flattenVisibleKeys]);
|
||
|
||
const mountedRef = useRef(true);
|
||
useEffect(() => { mountedRef.current = true; return () => { mountedRef.current = false; }; }, []);
|
||
|
||
/* ── Fetch active personal data sources ── */
|
||
const _fetchDataSources = useCallback(() => {
|
||
if (!instanceId) return;
|
||
api.get(`/api/workspace/${instanceId}/datasources`)
|
||
.then(res => {
|
||
if (!mountedRef.current) return;
|
||
const list: UdbDataSource[] = (res.data.dataSources || res.data || []).map((d: any) => ({
|
||
id: d.id,
|
||
connectionId: d.connectionId,
|
||
sourceType: d.sourceType,
|
||
path: d.path,
|
||
label: d.label,
|
||
displayPath: d.displayPath,
|
||
scope: d.scope || 'personal',
|
||
neutralize: d.neutralize ?? false,
|
||
}));
|
||
setDataSources(list);
|
||
})
|
||
.catch(() => { if (mountedRef.current) setDataSources([]); });
|
||
}, [instanceId]);
|
||
|
||
/* ── Fetch active feature data sources ── */
|
||
const _fetchFeatureDataSources = useCallback(() => {
|
||
if (!instanceId) return;
|
||
api.get(`/api/workspace/${instanceId}/feature-datasources`)
|
||
.then(res => {
|
||
if (!mountedRef.current) return;
|
||
const list: UdbFeatureDataSource[] = (res.data.featureDataSources || res.data || []).map((d: any) => ({
|
||
id: d.id,
|
||
featureInstanceId: d.featureInstanceId,
|
||
featureCode: d.featureCode,
|
||
tableName: d.tableName,
|
||
objectKey: d.objectKey,
|
||
label: d.label,
|
||
scope: d.scope || 'personal',
|
||
neutralize: d.neutralize ?? false,
|
||
neutralizeFields: d.neutralizeFields || undefined,
|
||
recordFilter: d.recordFilter || undefined,
|
||
}));
|
||
setFeatureDataSources(list);
|
||
})
|
||
.catch(() => { if (mountedRef.current) setFeatureDataSources([]); });
|
||
}, [instanceId]);
|
||
|
||
useEffect(() => { _fetchDataSources(); }, [_fetchDataSources]);
|
||
useEffect(() => { _fetchFeatureDataSources(); }, [_fetchFeatureDataSources]);
|
||
|
||
/* ── Load Level 1: UserConnections ── */
|
||
const _loadConnections = useCallback(() => {
|
||
if (!instanceId) return;
|
||
setLoadingRoot(true);
|
||
api.get(`/api/workspace/${instanceId}/connections`)
|
||
.then(res => {
|
||
if (!mountedRef.current) return;
|
||
const conns = res.data.connections || [];
|
||
const nodes: TreeNode[] = conns
|
||
.filter((c: any) => c.status === 'active')
|
||
.map((c: any) => ({
|
||
key: `conn-${c.id}`,
|
||
label: c.externalEmail || c.externalUsername || c.authority,
|
||
icon: _AUTHORITY_ICONS[c.authority] || '\uD83D\uDD17',
|
||
type: 'connection' as const,
|
||
expanded: false,
|
||
loading: false,
|
||
children: null,
|
||
connectionId: c.id,
|
||
authority: c.authority,
|
||
}));
|
||
setTree(nodes);
|
||
})
|
||
.catch(() => { if (mountedRef.current) setTree([]); })
|
||
.finally(() => { if (mountedRef.current) setLoadingRoot(false); });
|
||
}, [instanceId]);
|
||
|
||
useEffect(() => { _loadConnections(); }, [_loadConnections]);
|
||
|
||
/* ── Generic tree update helper ── */
|
||
const _updateNode = useCallback((key: string, updater: (node: TreeNode) => TreeNode) => {
|
||
setTree(prev => _mapTree(prev, key, updater));
|
||
}, []);
|
||
|
||
/* ── Toggle expand/collapse ── */
|
||
const _toggleNode = useCallback(async (node: TreeNode) => {
|
||
if (node.expanded) {
|
||
_updateNode(node.key, n => ({ ...n, expanded: false }));
|
||
return;
|
||
}
|
||
|
||
if (node.children !== null) {
|
||
_updateNode(node.key, n => ({ ...n, expanded: true }));
|
||
return;
|
||
}
|
||
|
||
_updateNode(node.key, n => ({ ...n, loading: true, expanded: true }));
|
||
|
||
try {
|
||
let children: TreeNode[] = [];
|
||
|
||
if (node.type === 'connection') {
|
||
children = await _loadServices(instanceId, node.connectionId);
|
||
} else if (node.type === 'service' || node.type === 'folder') {
|
||
children = await _browseService(
|
||
instanceId,
|
||
node.connectionId,
|
||
node.service!,
|
||
node.path || '/',
|
||
node.displayPath || node.label,
|
||
);
|
||
}
|
||
|
||
if (mountedRef.current) {
|
||
_updateNode(node.key, n => ({ ...n, loading: false, children }));
|
||
}
|
||
} catch {
|
||
if (mountedRef.current) {
|
||
_updateNode(node.key, n => ({ ...n, loading: false, children: [] }));
|
||
}
|
||
}
|
||
}, [instanceId, _updateNode]);
|
||
|
||
/* ── Add as DataSource ── */
|
||
const _addAsDataSource = useCallback(async (node: TreeNode): Promise<string | null> => {
|
||
if (!node.connectionId) return null;
|
||
const sourceType = node.service
|
||
? (_SERVICE_TO_SOURCE_TYPE[node.service] || node.service)
|
||
: (node.authority || node.type);
|
||
setAddingPath(node.key);
|
||
try {
|
||
const res = await api.post(`/api/workspace/${instanceId}/datasources`, {
|
||
connectionId: node.connectionId,
|
||
sourceType,
|
||
path: node.path || '/',
|
||
label: node.label,
|
||
displayPath: node.displayPath || node.label,
|
||
});
|
||
_fetchDataSources();
|
||
onSourcesChanged?.();
|
||
return res.data?.id || res.data?.dataSource?.id || null;
|
||
} catch (err) {
|
||
console.error('Failed to add data source:', err);
|
||
return null;
|
||
} finally {
|
||
if (mountedRef.current) setAddingPath(null);
|
||
}
|
||
}, [instanceId, _fetchDataSources, onSourcesChanged]);
|
||
|
||
/* ── Check if a path is already added ── */
|
||
const _isAdded = useCallback((connectionId: string, service: string | undefined, path: string | undefined): boolean => {
|
||
const expectedSourceType = service ? (_SERVICE_TO_SOURCE_TYPE[service] || service) : undefined;
|
||
return dataSources.some(ds =>
|
||
ds.connectionId === connectionId &&
|
||
ds.path === (path || '/') &&
|
||
(!expectedSourceType || ds.sourceType === expectedSourceType),
|
||
);
|
||
}, [dataSources]);
|
||
|
||
/* ── Send node to chat: ensure DataSource exists, then attach ── */
|
||
const _sendNodeToChat = useCallback(async (params: { connectionId: string; sourceType: string; path: string; label: string; displayPath?: string }) => {
|
||
if (!onAttachDataSource) return;
|
||
const expectedSourceType = params.sourceType;
|
||
let ds = dataSources.find(d =>
|
||
d.connectionId === params.connectionId &&
|
||
d.path === (params.path || '/') &&
|
||
d.sourceType === expectedSourceType,
|
||
);
|
||
if (ds) {
|
||
onAttachDataSource(ds.id);
|
||
return;
|
||
}
|
||
try {
|
||
const res = await api.post(`/api/workspace/${instanceId}/datasources`, {
|
||
connectionId: params.connectionId,
|
||
sourceType: params.sourceType,
|
||
path: params.path || '/',
|
||
label: params.label,
|
||
displayPath: params.displayPath || params.label,
|
||
});
|
||
const newId = res.data?.id || res.data?.dataSource?.id;
|
||
if (newId) {
|
||
onAttachDataSource(newId);
|
||
_fetchDataSources();
|
||
onSourcesChanged?.();
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to send data source to chat:', err);
|
||
}
|
||
}, [instanceId, dataSources, onAttachDataSource, _fetchDataSources, onSourcesChanged]);
|
||
|
||
/* ── Scope change (personal data source, optimistic) ── */
|
||
const _cyclePersonalScope = useCallback(async (ds: UdbDataSource) => {
|
||
const newScope = _nextScope(ds.scope);
|
||
setDataSources(prev => prev.map(d => d.id === ds.id ? { ...d, scope: newScope } : d));
|
||
try {
|
||
await api.patch(`/api/datasources/${ds.id}/scope`, { scope: newScope });
|
||
} catch {
|
||
setDataSources(prev => prev.map(d => d.id === ds.id ? { ...d, scope: ds.scope } : d));
|
||
}
|
||
}, []);
|
||
|
||
/* ── Neutralize toggle (personal data source, optimistic) ── */
|
||
const _togglePersonalNeutralize = useCallback(async (ds: UdbDataSource) => {
|
||
const newValue = !ds.neutralize;
|
||
setDataSources(prev => prev.map(d => d.id === ds.id ? { ...d, neutralize: newValue } : d));
|
||
try {
|
||
await api.patch(`/api/datasources/${ds.id}/neutralize`, { neutralize: newValue });
|
||
} catch {
|
||
setDataSources(prev => prev.map(d => d.id === ds.id ? { ...d, neutralize: ds.neutralize } : d));
|
||
}
|
||
}, []);
|
||
|
||
/* ── Scope change (feature data source, optimistic) ── */
|
||
const _cycleFeatureScope = useCallback(async (fds: UdbFeatureDataSource) => {
|
||
const newScope = _nextScope(fds.scope);
|
||
setFeatureDataSources(prev => prev.map(d => d.id === fds.id ? { ...d, scope: newScope } : d));
|
||
try {
|
||
await api.patch(`/api/datasources/${fds.id}/scope`, { scope: newScope });
|
||
} catch {
|
||
setFeatureDataSources(prev => prev.map(d => d.id === fds.id ? { ...d, scope: fds.scope } : d));
|
||
}
|
||
}, []);
|
||
|
||
/* ── Neutralize toggle (feature data source, optimistic) ── */
|
||
const _toggleFeatureNeutralize = useCallback(async (fds: UdbFeatureDataSource) => {
|
||
const newValue = !fds.neutralize;
|
||
setFeatureDataSources(prev => prev.map(d => d.id === fds.id ? { ...d, neutralize: newValue } : d));
|
||
try {
|
||
await api.patch(`/api/datasources/${fds.id}/neutralize`, { neutralize: newValue });
|
||
} catch {
|
||
setFeatureDataSources(prev => prev.map(d => d.id === fds.id ? { ...d, neutralize: fds.neutralize } : d));
|
||
}
|
||
}, []);
|
||
|
||
/* ── Neutralize fields toggle (field-level, optimistic) ── */
|
||
const _toggleNeutralizeField = useCallback(async (fds: UdbFeatureDataSource, fieldName: string) => {
|
||
const current = fds.neutralizeFields || [];
|
||
const updated = current.includes(fieldName)
|
||
? current.filter(f => f !== fieldName)
|
||
: [...current, fieldName];
|
||
const newFields = updated.length > 0 ? updated : undefined;
|
||
setFeatureDataSources(prev => prev.map(d => d.id === fds.id ? { ...d, neutralizeFields: newFields } : d));
|
||
try {
|
||
await api.patch(`/api/datasources/${fds.id}/neutralize-fields`, { neutralizeFields: newFields || [] });
|
||
} catch {
|
||
setFeatureDataSources(prev => prev.map(d => d.id === fds.id ? { ...d, neutralizeFields: fds.neutralizeFields } : d));
|
||
}
|
||
}, []);
|
||
|
||
/* ── Feature Connections: Load Level 1 ── */
|
||
const _loadFeatureConnections = useCallback(() => {
|
||
if (!instanceId) return;
|
||
setLoadingFeatures(true);
|
||
api.get(`/api/workspace/${instanceId}/feature-connections`)
|
||
.then(res => {
|
||
if (!mountedRef.current) return;
|
||
const groups = res.data.featureConnectionsByMandate || [];
|
||
setFeatureTree(groups.map((g: any) => ({
|
||
mandateId: g.mandateId,
|
||
mandateLabel: g.mandateLabel || g.mandateId,
|
||
expanded: true,
|
||
featureConnections: (g.featureConnections || []).map((c: any) => ({
|
||
featureInstanceId: c.featureInstanceId,
|
||
featureCode: c.featureCode,
|
||
mandateId: c.mandateId,
|
||
label: c.label,
|
||
icon: c.icon || '\uD83D\uDDC3\uFE0F',
|
||
tableCount: c.tableCount || 0,
|
||
expanded: false,
|
||
loading: false,
|
||
tables: null,
|
||
})),
|
||
})));
|
||
})
|
||
.catch(() => { if (mountedRef.current) setFeatureTree([]); })
|
||
.finally(() => { if (mountedRef.current) setLoadingFeatures(false); });
|
||
}, [instanceId]);
|
||
|
||
useEffect(() => { _loadFeatureConnections(); }, [_loadFeatureConnections]);
|
||
|
||
/* ── Feature Connections: Toggle mandate group ── */
|
||
const _toggleMandateGroup = useCallback((mandateId: string) => {
|
||
setFeatureTree(prev => prev.map(g =>
|
||
g.mandateId === mandateId ? { ...g, expanded: !g.expanded } : g
|
||
));
|
||
}, []);
|
||
|
||
/* ── Feature Connections: Toggle expand ── */
|
||
const _toggleFeatureNode = useCallback(async (node: FeatureConnectionNode) => {
|
||
if (node.expanded) {
|
||
setFeatureTree(prev => _mapFeatureTreeUpdate(prev, node.featureInstanceId, n => ({ ...n, expanded: false })));
|
||
return;
|
||
}
|
||
|
||
if (node.tables !== null) {
|
||
setFeatureTree(prev => _mapFeatureTreeUpdate(prev, node.featureInstanceId, n => ({ ...n, expanded: true })));
|
||
return;
|
||
}
|
||
|
||
setFeatureTree(prev => _mapFeatureTreeUpdate(prev, node.featureInstanceId, n => ({
|
||
...n, loading: true, expanded: true,
|
||
})));
|
||
|
||
try {
|
||
const res = await api.get(`/api/workspace/${instanceId}/feature-connections/${node.featureInstanceId}/tables`);
|
||
const tables: FeatureTableNode[] = (res.data.tables || []).map((t: any) => ({
|
||
objectKey: t.objectKey ?? '',
|
||
tableName: t.tableName ?? '',
|
||
label: t.label ?? '',
|
||
fields: t.fields ?? [],
|
||
isParent: Boolean(t.isParent),
|
||
parentTable: t.parentTable ?? null,
|
||
parentKey: t.parentKey ?? null,
|
||
displayFields: t.displayFields ?? [],
|
||
isGroup: Boolean(t.isGroup),
|
||
group: t.group ?? null,
|
||
}));
|
||
|
||
// Default-expand all categorical groups so users immediately see their content.
|
||
const defaultExpansions: string[] = tables
|
||
.filter(t => t.isGroup)
|
||
.map(t => _pathKey(node.featureInstanceId, [`g:${t.objectKey}`]));
|
||
if (defaultExpansions.length > 0) {
|
||
setFeatureExpandedPaths(prev => {
|
||
const next = new Set(prev);
|
||
for (const k of defaultExpansions) next.add(k);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
if (mountedRef.current) {
|
||
setFeatureTree(prev => _mapFeatureTreeUpdate(prev, node.featureInstanceId, n => ({
|
||
...n, loading: false, tables,
|
||
})));
|
||
}
|
||
} catch {
|
||
if (mountedRef.current) {
|
||
setFeatureTree(prev => _mapFeatureTreeUpdate(prev, node.featureInstanceId, n => ({
|
||
...n, loading: false, tables: [],
|
||
})));
|
||
}
|
||
}
|
||
}, [instanceId]);
|
||
|
||
/* ── Feature: Add table as FeatureDataSource ── */
|
||
const _addFeatureTable = useCallback(async (
|
||
node: FeatureConnectionNode,
|
||
table: FeatureTableNode,
|
||
extra?: { recordFilter?: Record<string, string>; labelOverride?: string },
|
||
): Promise<string | null> => {
|
||
const key = `${node.featureInstanceId}-${table.tableName}`;
|
||
setAddingFeatureKey(key);
|
||
try {
|
||
const res = await api.post(`/api/workspace/${instanceId}/feature-datasources`, {
|
||
featureInstanceId: node.featureInstanceId,
|
||
featureCode: node.featureCode,
|
||
tableName: table.tableName,
|
||
objectKey: table.objectKey,
|
||
label: extra?.labelOverride || table.label || table.tableName,
|
||
...(extra?.recordFilter ? { recordFilter: extra.recordFilter } : {}),
|
||
});
|
||
_fetchFeatureDataSources();
|
||
onSourcesChanged?.();
|
||
return res.data?.id || null;
|
||
} catch (err) {
|
||
console.error('Failed to add feature data source:', err);
|
||
return null;
|
||
} finally {
|
||
if (mountedRef.current) setAddingFeatureKey(null);
|
||
}
|
||
}, [instanceId, _fetchFeatureDataSources, onSourcesChanged]);
|
||
|
||
/* ── Feature: check if table already added (no record filter) ── */
|
||
const _isFeatureTableAdded = useCallback((featureInstanceId: string, tableName: string): boolean => {
|
||
return featureDataSources.some(fds =>
|
||
fds.featureInstanceId === featureInstanceId
|
||
&& fds.tableName === tableName
|
||
&& !fds.recordFilter,
|
||
);
|
||
}, [featureDataSources]);
|
||
|
||
/* ── Feature: toggle expand for a path-keyed node (group / parent group / record) ── */
|
||
const _toggleFeaturePath = useCallback((pathKey: string) => {
|
||
setFeatureExpandedPaths(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(pathKey)) next.delete(pathKey); else next.add(pathKey);
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
/**
|
||
* Load records for a parent group at a given path.
|
||
* If the path contains a preceding `r:<table>:<id>` segment, the records are
|
||
* filtered to children of that ancestor record (nested record hierarchy).
|
||
*/
|
||
const _loadRecordsAtPath = useCallback(async (
|
||
node: FeatureConnectionNode,
|
||
table: FeatureTableNode,
|
||
parentPathSegments: string[],
|
||
) => {
|
||
const segments = [...parentPathSegments, `p:${table.tableName}`];
|
||
const pathKey = _pathKey(node.featureInstanceId, segments);
|
||
|
||
if (featureRecordsByPath[pathKey]) return;
|
||
|
||
setFeatureLoadingPath(pathKey);
|
||
try {
|
||
const params: Record<string, string> = {};
|
||
const ancestor = _closestRecordSegment(parentPathSegments);
|
||
if (ancestor && table.parentKey) {
|
||
params.parentKey = table.parentKey;
|
||
params.parentValue = ancestor.recordId;
|
||
}
|
||
|
||
const res = await api.get(
|
||
`/api/workspace/${instanceId}/feature-connections/${node.featureInstanceId}/parent-objects/${table.tableName}`,
|
||
Object.keys(params).length > 0 ? { params } : undefined,
|
||
);
|
||
const records: ParentRecordNode[] = (res.data.parentObjects || []).map((r: any) => ({
|
||
id: r.id,
|
||
displayLabel: r.displayLabel || r.id,
|
||
fields: r.fields || {},
|
||
tableName: table.tableName,
|
||
}));
|
||
if (mountedRef.current) {
|
||
setFeatureRecordsByPath(prev => ({ ...prev, [pathKey]: records }));
|
||
}
|
||
} catch {
|
||
if (mountedRef.current) {
|
||
setFeatureRecordsByPath(prev => ({ ...prev, [pathKey]: [] }));
|
||
}
|
||
} finally {
|
||
if (mountedRef.current) setFeatureLoadingPath(null);
|
||
}
|
||
}, [instanceId, featureRecordsByPath]);
|
||
|
||
/**
|
||
* Add a parent record + all its DIRECT child tables as FeatureDataSources.
|
||
*
|
||
* - Parent itself: recordFilter = { id: <recordId> }
|
||
* - Each direct child table: recordFilter = { <child.parentKey>: <recordId> }
|
||
*
|
||
* Nested parent groups (e.g. CoachingSession under CoachingContext) are added
|
||
* with the FK-only filter, scoping to "all sub-records of this ancestor".
|
||
* Users can drill in further to add a specific sub-record.
|
||
*/
|
||
const _addRecordWithChildren = useCallback(async (
|
||
node: FeatureConnectionNode,
|
||
parentTable: FeatureTableNode,
|
||
record: ParentRecordNode,
|
||
pathSegments: string[],
|
||
) => {
|
||
const addKey = `${_pathKey(node.featureInstanceId, pathSegments)}|r:${parentTable.tableName}:${record.id}`;
|
||
setAddingRecordPath(addKey);
|
||
try {
|
||
const allTables = node.tables || [];
|
||
const parentLabel = `${parentTable.label || parentTable.tableName}: ${record.displayLabel}`;
|
||
await api.post(`/api/workspace/${instanceId}/feature-datasources`, {
|
||
featureInstanceId: node.featureInstanceId,
|
||
featureCode: node.featureCode,
|
||
tableName: parentTable.tableName,
|
||
objectKey: parentTable.objectKey,
|
||
label: parentLabel,
|
||
recordFilter: { id: record.id },
|
||
});
|
||
|
||
const childTables = allTables.filter(t => t.parentTable === parentTable.tableName);
|
||
for (const child of childTables) {
|
||
if (!child.parentKey) continue;
|
||
const childLabel = `${child.label || child.tableName}: ${record.displayLabel}`;
|
||
await api.post(`/api/workspace/${instanceId}/feature-datasources`, {
|
||
featureInstanceId: node.featureInstanceId,
|
||
featureCode: node.featureCode,
|
||
tableName: child.tableName,
|
||
objectKey: child.objectKey,
|
||
label: childLabel,
|
||
recordFilter: { [child.parentKey]: record.id },
|
||
});
|
||
}
|
||
|
||
_fetchFeatureDataSources();
|
||
onSourcesChanged?.();
|
||
} catch (err) {
|
||
console.error('Failed to add record sources:', err);
|
||
} finally {
|
||
if (mountedRef.current) setAddingRecordPath(null);
|
||
}
|
||
}, [instanceId, _fetchFeatureDataSources, onSourcesChanged]);
|
||
|
||
/* ── Check if a parent record is already added ── */
|
||
const _isRecordAdded = useCallback((featureInstanceId: string, parentTableName: string, recordId: string): boolean => {
|
||
return featureDataSources.some(fds =>
|
||
fds.featureInstanceId === featureInstanceId
|
||
&& fds.tableName === parentTableName
|
||
&& fds.recordFilter?.id === recordId,
|
||
);
|
||
}, [featureDataSources]);
|
||
|
||
/* ── Render ── */
|
||
|
||
return (
|
||
<div className={styles.sourcesTab} style={{ padding: 8, fontSize: 13 }}>
|
||
{/* ── Browse Sources header ── */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
|
||
<span style={{ fontSize: 11, fontWeight: 600, color: '#666', textTransform: 'uppercase' }}>
|
||
{t('Quellen durchsuchen')}
|
||
</span>
|
||
<button
|
||
onClick={_loadConnections}
|
||
disabled={loadingRoot}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--primary-color, #F25843)' }}
|
||
>
|
||
{loadingRoot ? '...' : '\u21BB'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* ── Browse Sources tree ── */}
|
||
{loadingRoot && tree.length === 0 && (
|
||
<div style={{ fontSize: 12, color: '#999', textAlign: 'center', padding: 16 }}>
|
||
{t('Verbindungen werden geladen…')}
|
||
</div>
|
||
)}
|
||
|
||
{!loadingRoot && tree.length === 0 && (
|
||
<div style={{ fontSize: 12, color: '#999', textAlign: 'center', padding: 16 }}>
|
||
{t('Keine aktiven Verbindungen.')}
|
||
</div>
|
||
)}
|
||
|
||
{tree.map(node => (
|
||
<_TreeNodeView
|
||
key={node.key}
|
||
node={node}
|
||
depth={0}
|
||
onToggle={_toggleNode}
|
||
onEnsureDs={_addAsDataSource}
|
||
isAdded={_isAdded}
|
||
addingPath={addingPath}
|
||
dataSources={dataSources}
|
||
onCycleScope={_cyclePersonalScope}
|
||
onToggleNeutralize={_togglePersonalNeutralize}
|
||
onSendToChat={_sendNodeToChat}
|
||
scopeCycleTitle={_scopeCycleTitle}
|
||
selectedKeys={selectedKeys}
|
||
onSelect={_handleNodeSelect}
|
||
/>
|
||
))}
|
||
|
||
{/* ── Divider ── */}
|
||
<div style={{ height: 1, background: 'var(--border-color, #e0e0e0)', margin: '12px 0 8px' }} />
|
||
|
||
{/* ── Feature Data header ── */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
|
||
<span style={{ fontSize: 11, fontWeight: 600, color: '#666', textTransform: 'uppercase' }}>
|
||
{t('Feature-Daten')}
|
||
</span>
|
||
<button
|
||
onClick={_loadFeatureConnections}
|
||
disabled={loadingFeatures}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, color: '#7b1fa2' }}
|
||
>
|
||
{loadingFeatures ? '...' : '\u21BB'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* ── Feature Data tree ── */}
|
||
{loadingFeatures && featureTree.length === 0 && (
|
||
<div style={{ fontSize: 12, color: '#999', textAlign: 'center', padding: 16 }}>
|
||
{t('Feature-Instanzen werden geladen…')}
|
||
</div>
|
||
)}
|
||
|
||
{!loadingFeatures && featureTree.length === 0 && (
|
||
<div style={{ fontSize: 12, color: '#999', textAlign: 'center', padding: 16 }}>
|
||
{t('Keine Feature-Instanzen gefunden.')}
|
||
</div>
|
||
)}
|
||
|
||
{featureTree.map(g => (
|
||
<_MandateGroupView
|
||
key={g.mandateId}
|
||
group={g}
|
||
onToggleGroup={_toggleMandateGroup}
|
||
onToggleFeature={_toggleFeatureNode}
|
||
onAddFeatureTable={_addFeatureTable}
|
||
isTableAdded={_isFeatureTableAdded}
|
||
addingKey={addingFeatureKey}
|
||
featureExpandedPaths={featureExpandedPaths}
|
||
featureRecordsByPath={featureRecordsByPath}
|
||
featureLoadingPath={featureLoadingPath}
|
||
addingRecordPath={addingRecordPath}
|
||
onToggleFeaturePath={_toggleFeaturePath}
|
||
onLoadRecordsAtPath={_loadRecordsAtPath}
|
||
onAddRecordWithChildren={_addRecordWithChildren}
|
||
isRecordAdded={_isRecordAdded}
|
||
onSendToChat={onSendToChat_FeatureSource}
|
||
featureDataSources={featureDataSources}
|
||
onCycleScope={_cycleFeatureScope}
|
||
onToggleNeutralize={_toggleFeatureNeutralize}
|
||
onToggleNeutralizeField={_toggleNeutralizeField}
|
||
featureTree={featureTree}
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── TreeNodeView (recursive — Browse Sources side) ─────────────────── */
|
||
|
||
function _findDs(dataSources: UdbDataSource[], node: TreeNode): UdbDataSource | undefined {
|
||
const expectedSourceType = node.service ? (_SERVICE_TO_SOURCE_TYPE[node.service] || node.service) : undefined;
|
||
return dataSources.find(ds =>
|
||
ds.connectionId === node.connectionId &&
|
||
ds.path === (node.path || '/') &&
|
||
(!expectedSourceType || ds.sourceType === expectedSourceType),
|
||
);
|
||
}
|
||
|
||
interface _TreeNodeViewProps {
|
||
node: TreeNode;
|
||
depth: number;
|
||
onToggle: (node: TreeNode) => void;
|
||
onEnsureDs: (node: TreeNode) => Promise<string | null>;
|
||
isAdded: (connectionId: string, service: string | undefined, path: string | undefined) => boolean;
|
||
addingPath: string | null;
|
||
dataSources: UdbDataSource[];
|
||
onCycleScope: (ds: UdbDataSource) => void;
|
||
onToggleNeutralize: (ds: UdbDataSource) => void;
|
||
onSendToChat?: (params: { connectionId: string; sourceType: string; path: string; label: string; displayPath?: string }) => void;
|
||
scopeCycleTitle: (scope: string) => string;
|
||
selectedKeys: Set<string>;
|
||
onSelect: (node: TreeNode, e: React.MouseEvent) => void;
|
||
inheritedScope?: string;
|
||
inheritedNeutralize?: boolean;
|
||
}
|
||
|
||
const _TreeNodeView: React.FC<_TreeNodeViewProps> = ({
|
||
node, depth, onToggle, onEnsureDs, isAdded, addingPath,
|
||
dataSources, onCycleScope, onToggleNeutralize, onSendToChat, scopeCycleTitle,
|
||
selectedKeys, onSelect, inheritedScope, inheritedNeutralize,
|
||
}) => {
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
const hasChildren = node.type !== 'file';
|
||
const chevron = hasChildren
|
||
? (node.expanded ? '\u25BE' : '\u25B8')
|
||
: '\u00A0\u00A0';
|
||
const ds = _findDs(dataSources, node);
|
||
|
||
const effectiveScope = ds?.scope ?? inheritedScope;
|
||
const effectiveNeutralize = ds?.neutralize ?? inheritedNeutralize ?? false;
|
||
const childInheritedScope = ds?.scope ?? inheritedScope;
|
||
const childInheritedNeutralize = ds?.neutralize ?? inheritedNeutralize;
|
||
|
||
const _dragPayload = {
|
||
connectionId: node.connectionId,
|
||
sourceType: node.service ? (_SERVICE_TO_SOURCE_TYPE[node.service] || node.service) : node.authority || '',
|
||
path: node.path || '/',
|
||
label: node.label,
|
||
displayPath: node.displayPath || node.label,
|
||
nodeType: node.type,
|
||
};
|
||
|
||
const _chatPayload = {
|
||
connectionId: node.connectionId,
|
||
sourceType: node.service ? (_SERVICE_TO_SOURCE_TYPE[node.service] || node.service) : node.authority || '',
|
||
path: node.path || '/',
|
||
label: node.label,
|
||
displayPath: node.displayPath || node.label,
|
||
};
|
||
|
||
const connColor = ds ? _getSourceColor(ds.sourceType) : undefined;
|
||
const isSelected = selectedKeys.has(node.key);
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onClick={(e) => {
|
||
if (e.ctrlKey || e.metaKey || e.shiftKey) {
|
||
e.stopPropagation();
|
||
onSelect(node, e);
|
||
} else if (hasChildren) {
|
||
onToggle(node);
|
||
}
|
||
}}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
if (selectedKeys.size > 1 && isSelected) {
|
||
const items = Array.from(selectedKeys).map(k => ({ key: k, ...(_dragPayload) }));
|
||
e.dataTransfer.setData('application/datasource', JSON.stringify(items));
|
||
} else {
|
||
e.dataTransfer.setData('application/datasource', JSON.stringify(_dragPayload));
|
||
}
|
||
e.dataTransfer.setData('text/plain', node.label);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 4,
|
||
// Compensate the 3px borderLeft on active rows with -3px paddingLeft so
|
||
// the row content stays at exactly the same x-position as inactive rows.
|
||
paddingLeft: (depth * 16 + 4) - (ds ? 3 : 0),
|
||
paddingRight: 4,
|
||
paddingTop: 3,
|
||
paddingBottom: 3,
|
||
cursor: hasChildren ? 'pointer' : 'default',
|
||
borderRadius: 3,
|
||
background: ds
|
||
? (hovered ? `${connColor}28` : `${connColor}10`)
|
||
: isSelected
|
||
? 'var(--selection-bg, rgba(242, 88, 67, 0.12))'
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
borderLeft: ds ? `3px solid ${connColor}` : undefined,
|
||
outline: isSelected && !ds ? '1px solid var(--primary-color, #F25843)' : undefined,
|
||
transition: 'background 0.1s',
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0 }}>
|
||
{node.loading ? _Spinner() : chevron}
|
||
</span>
|
||
<span style={{ fontSize: 14, flexShrink: 0 }}>{node.icon}</span>
|
||
<span style={{
|
||
flex: 1, minWidth: 0, overflow: 'hidden',
|
||
textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
fontSize: 12,
|
||
fontWeight: (node.type === 'connection' || ds) ? 600 : 400,
|
||
}}>
|
||
{node.label}
|
||
</span>
|
||
|
||
{/* ── Stable trio: chat | scope | neutralize (always in this order).
|
||
* No "remove from workspace" button here by design: the UDB row only
|
||
* exposes the catalog state. Detach from the *current chat* happens
|
||
* via the chip "x" in WorkspaceInput; that chip is the single source
|
||
* of truth for chat-scoped attachment lifecycle. */}
|
||
<button
|
||
onClick={e => { e.stopPropagation(); onSendToChat?.(_chatPayload); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 13, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: ds ? 0.7 : (hovered ? 0.5 : 0.25),
|
||
color: 'var(--primary-color, #F25843)',
|
||
}}
|
||
title={t('In Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (ds) { onCycleScope(ds); return; }
|
||
const newId = await onEnsureDs(node);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/scope`, { scope: _nextScope(effectiveScope || 'personal') }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: ds ? 1 : 0.35 }}
|
||
title={ds ? scopeCycleTitle(ds.scope) : (effectiveScope ? `${t('Geerbt')}: ${effectiveScope}` : t('Scope setzen'))}
|
||
>
|
||
{_SCOPE_ICONS[ds?.scope || effectiveScope || 'personal']}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (ds) { onToggleNeutralize(ds); return; }
|
||
const newId = await onEnsureDs(node);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/neutralize`, { neutralize: !effectiveNeutralize }); } catch {}
|
||
}
|
||
}}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center',
|
||
opacity: (ds?.neutralize ?? effectiveNeutralize) ? 1 : 0.35,
|
||
}}
|
||
title={(ds?.neutralize ?? effectiveNeutralize) ? t('Neutralisierung an') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
|
||
</div>
|
||
|
||
{node.expanded && node.children && node.children.length > 0 && (
|
||
<div>
|
||
{node.children.map(child => (
|
||
<_TreeNodeView
|
||
key={child.key}
|
||
node={child}
|
||
depth={depth + 1}
|
||
onToggle={onToggle}
|
||
onEnsureDs={onEnsureDs}
|
||
isAdded={isAdded}
|
||
addingPath={addingPath}
|
||
dataSources={dataSources}
|
||
onCycleScope={onCycleScope}
|
||
onToggleNeutralize={onToggleNeutralize}
|
||
onSendToChat={onSendToChat}
|
||
scopeCycleTitle={scopeCycleTitle}
|
||
selectedKeys={selectedKeys}
|
||
onSelect={onSelect}
|
||
inheritedScope={childInheritedScope}
|
||
inheritedNeutralize={childInheritedNeutralize}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{node.expanded && node.children && node.children.length === 0 && !node.loading && (
|
||
<div style={{ paddingLeft: (depth + 1) * 16 + 20, fontSize: 11, color: '#bbb', padding: '2px 0 2px ' + ((depth + 1) * 16 + 20) + 'px' }}>
|
||
{t('(leer)')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── Feature-side action props (shared) ─────────────────────────────── */
|
||
|
||
interface _FeatureActionContext {
|
||
featureExpandedPaths: Set<string>;
|
||
featureRecordsByPath: Record<string, ParentRecordNode[]>;
|
||
featureLoadingPath: string | null;
|
||
addingRecordPath: string | null;
|
||
onToggleFeaturePath: (pathKey: string) => void;
|
||
onLoadRecordsAtPath: (
|
||
node: FeatureConnectionNode,
|
||
table: FeatureTableNode,
|
||
parentPathSegments: string[],
|
||
) => void;
|
||
onAddRecordWithChildren: (
|
||
node: FeatureConnectionNode,
|
||
parentTable: FeatureTableNode,
|
||
record: ParentRecordNode,
|
||
pathSegments: string[],
|
||
) => void;
|
||
isRecordAdded: (featureInstanceId: string, parentTableName: string, recordId: string) => boolean;
|
||
onAddFeatureTable: (
|
||
node: FeatureConnectionNode,
|
||
table: FeatureTableNode,
|
||
extra?: { recordFilter?: Record<string, string>; labelOverride?: string },
|
||
) => Promise<string | null>;
|
||
isTableAdded: (featureInstanceId: string, tableName: string) => boolean;
|
||
addingKey: string | null;
|
||
onSendToChat?: (params: { featureInstanceId: string; featureCode: string; tableName?: string; objectKey: string; label: string; fieldName?: string }) => void;
|
||
featureDataSources: UdbFeatureDataSource[];
|
||
onCycleScope: (fds: UdbFeatureDataSource) => void;
|
||
onToggleNeutralize: (fds: UdbFeatureDataSource) => void;
|
||
onToggleNeutralizeField: (fds: UdbFeatureDataSource, fieldName: string) => void;
|
||
featureTree: MandateGroupNode[];
|
||
}
|
||
|
||
/* ─── MandateGroupView (mandate + feature instances) ─────────────────── */
|
||
|
||
interface _MandateGroupViewProps extends _FeatureActionContext {
|
||
group: MandateGroupNode;
|
||
onToggleGroup: (mandateId: string) => void;
|
||
onToggleFeature: (node: FeatureConnectionNode) => void;
|
||
}
|
||
|
||
const _MandateGroupView: React.FC<_MandateGroupViewProps> = (props) => {
|
||
const { group, onToggleGroup, onToggleFeature, ...ctx } = props;
|
||
const [hovered, setHovered] = useState(false);
|
||
const chevron = group.expanded ? '\u25BE' : '\u25B8';
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onClick={() => onToggleGroup(group.mandateId)}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
paddingLeft: 4, paddingRight: 4, paddingTop: 3, paddingBottom: 3,
|
||
cursor: 'pointer', borderRadius: 3,
|
||
background: hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent',
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0 }}>
|
||
{chevron}
|
||
</span>
|
||
<span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12, fontWeight: 700, color: '#555' }}>
|
||
{group.mandateLabel}
|
||
</span>
|
||
</div>
|
||
|
||
{group.expanded && (
|
||
<div style={{ paddingLeft: 10 }}>
|
||
{group.featureConnections.map(fNode => (
|
||
<_FeatureNodeView
|
||
key={fNode.featureInstanceId}
|
||
node={fNode}
|
||
onToggle={onToggleFeature}
|
||
{...ctx}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── FeatureNodeView (feature instance + recursive items) ───────────── */
|
||
|
||
interface _FeatureNodeViewProps extends _FeatureActionContext {
|
||
node: FeatureConnectionNode;
|
||
onToggle: (node: FeatureConnectionNode) => void;
|
||
}
|
||
|
||
const _FeatureNodeView: React.FC<_FeatureNodeViewProps> = (props) => {
|
||
const { node, onToggle, ...ctx } = props;
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
const chevron = node.expanded ? '\u25BE' : '\u25B8';
|
||
|
||
const wildcardFds = ctx.featureDataSources.find(
|
||
f => f.featureInstanceId === node.featureInstanceId && f.tableName === '*' && !f.recordFilter,
|
||
);
|
||
|
||
const topItems = useMemo(
|
||
() => _buildTopFeatureTree(node.tables || []),
|
||
[node.tables],
|
||
);
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onClick={() => onToggle(node)}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
const payload = JSON.stringify({
|
||
featureInstanceId: node.featureInstanceId,
|
||
featureCode: node.featureCode,
|
||
objectKey: `data.feature.${node.featureCode}.*`,
|
||
label: node.label,
|
||
});
|
||
e.dataTransfer.setData('application/feature-source', payload);
|
||
e.dataTransfer.setData('text/plain', node.label);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
// Compensate the 3px borderLeft on active wildcard rows with -3px
|
||
// paddingLeft so the row content stays at the same x-position.
|
||
paddingLeft: wildcardFds ? 1 : 4,
|
||
paddingRight: 4, paddingTop: 3, paddingBottom: 3,
|
||
cursor: 'pointer', borderRadius: 3,
|
||
background: wildcardFds
|
||
? (hovered ? '#ede7f6' : '#7b1fa208')
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
borderLeft: wildcardFds ? '3px solid #7b1fa2' : undefined,
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0 }}>
|
||
{node.loading ? _Spinner() : chevron}
|
||
</span>
|
||
<span style={{ fontSize: 13, flexShrink: 0, display: 'flex', alignItems: 'center', color: '#7b1fa2' }}>
|
||
{getPageIcon(`feature.${node.featureCode}`) || '\uD83D\uDDC3\uFE0F'}
|
||
</span>
|
||
<span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12, fontWeight: 600 }}>
|
||
{node.label}
|
||
</span>
|
||
<span style={{ fontSize: 10, color: '#999', flexShrink: 0 }}>
|
||
{node.tableCount} {t('Tabellen')}
|
||
</span>
|
||
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
ctx.onSendToChat?.({
|
||
featureInstanceId: node.featureInstanceId,
|
||
featureCode: node.featureCode,
|
||
objectKey: `data.feature.${node.featureCode}.*`,
|
||
label: node.label,
|
||
});
|
||
}}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 14, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: wildcardFds ? 0.7 : (hovered ? 0.5 : 0.25), color: '#7b1fa2',
|
||
}}
|
||
title={t('Alle Tabellen in Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (wildcardFds) { ctx.onCycleScope(wildcardFds); return; }
|
||
const newId = await ctx.onAddFeatureTable(node, { objectKey: `data.feature.${node.featureCode}.*`, tableName: '*', label: node.label, fields: [] } as FeatureTableNode);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/scope`, { scope: _nextScope('personal') }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: wildcardFds ? 1 : 0.35 }}
|
||
title={wildcardFds ? `${t('Bereich')}: ${wildcardFds.scope}` : t('Scope setzen')}
|
||
>
|
||
{_SCOPE_ICONS[wildcardFds?.scope || 'personal']}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (wildcardFds) { ctx.onToggleNeutralize(wildcardFds); return; }
|
||
const newId = await ctx.onAddFeatureTable(node, { objectKey: `data.feature.${node.featureCode}.*`, tableName: '*', label: node.label, fields: [] } as FeatureTableNode);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/neutralize`, { neutralize: true }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: wildcardFds ? (wildcardFds.neutralize ? 1 : 0.35) : 0.35 }}
|
||
title={wildcardFds?.neutralize ? t('Neutralisierung an') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
|
||
</div>
|
||
|
||
{node.expanded && topItems.length > 0 && (
|
||
<div>
|
||
{topItems.map((item, idx) => (
|
||
<_FeatureItemView
|
||
key={_itemKey(item, idx)}
|
||
featureNode={node}
|
||
item={item}
|
||
pathSegments={[]}
|
||
depth={1}
|
||
inheritedScope={wildcardFds?.scope}
|
||
inheritedNeutralize={wildcardFds?.neutralize}
|
||
{...ctx}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{node.expanded && (node.tables?.length ?? 0) === 0 && !node.loading && (
|
||
<div style={{ paddingLeft: 36, fontSize: 11, color: '#bbb', padding: '2px 0 2px 36px' }}>
|
||
{t('(keine Tabellen)')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
function _itemKey(item: FeatureItem, idx: number): string {
|
||
if (item.kind === 'group') return `g:${item.objectKey}-${idx}`;
|
||
if (item.kind === 'parentGroup') return `p:${item.table.tableName}-${idx}`;
|
||
return `t:${item.table.tableName}-${idx}`;
|
||
}
|
||
|
||
/* ─── FeatureItemView (recursive — handles group / parentGroup / table) ── */
|
||
|
||
interface _FeatureItemViewProps extends _FeatureActionContext {
|
||
featureNode: FeatureConnectionNode;
|
||
item: FeatureItem;
|
||
pathSegments: string[];
|
||
depth: number;
|
||
inheritedScope?: string;
|
||
inheritedNeutralize?: boolean;
|
||
}
|
||
|
||
const _FeatureItemView: React.FC<_FeatureItemViewProps> = (props) => {
|
||
const { featureNode, item, pathSegments, depth, inheritedScope, inheritedNeutralize, ...ctx } = props;
|
||
|
||
if (item.kind === 'group') {
|
||
return (
|
||
<_GroupFolderView
|
||
featureNode={featureNode}
|
||
objectKey={item.objectKey}
|
||
label={item.label}
|
||
items={item.items}
|
||
pathSegments={pathSegments}
|
||
depth={depth}
|
||
inheritedScope={inheritedScope}
|
||
inheritedNeutralize={inheritedNeutralize}
|
||
{...ctx}
|
||
/>
|
||
);
|
||
}
|
||
if (item.kind === 'parentGroup') {
|
||
return (
|
||
<_ParentGroupView
|
||
featureNode={featureNode}
|
||
table={item.table}
|
||
pathSegments={pathSegments}
|
||
depth={depth}
|
||
inheritedScope={inheritedScope}
|
||
inheritedNeutralize={inheritedNeutralize}
|
||
{...ctx}
|
||
/>
|
||
);
|
||
}
|
||
return (
|
||
<_FeatureTableRow
|
||
featureNode={featureNode}
|
||
table={item.table}
|
||
depth={depth}
|
||
onAddFeatureTable={ctx.onAddFeatureTable}
|
||
onSendToChat={ctx.onSendToChat}
|
||
featureDataSources={ctx.featureDataSources}
|
||
onCycleScope={ctx.onCycleScope}
|
||
onToggleNeutralize={ctx.onToggleNeutralize}
|
||
onToggleNeutralizeField={ctx.onToggleNeutralizeField}
|
||
featureTree={ctx.featureTree}
|
||
inheritedScope={inheritedScope}
|
||
inheritedNeutralize={inheritedNeutralize}
|
||
/>
|
||
);
|
||
};
|
||
|
||
/* ─── GroupFolderView (categorical folder) ───────────────────────────── */
|
||
|
||
interface _GroupFolderViewProps extends _FeatureActionContext {
|
||
featureNode: FeatureConnectionNode;
|
||
objectKey: string;
|
||
label: string;
|
||
items: FeatureItem[];
|
||
pathSegments: string[];
|
||
depth: number;
|
||
inheritedScope?: string;
|
||
inheritedNeutralize?: boolean;
|
||
}
|
||
|
||
const _GroupFolderView: React.FC<_GroupFolderViewProps> = (props) => {
|
||
const { featureNode, objectKey, label, items, pathSegments, depth, inheritedScope, inheritedNeutralize, ...ctx } = props;
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
|
||
const segments = [...pathSegments, `g:${objectKey}`];
|
||
const pathKey = _pathKey(featureNode.featureInstanceId, segments);
|
||
const expanded = ctx.featureExpandedPaths.has(pathKey);
|
||
const chevron = expanded ? '\u25BE' : '\u25B8';
|
||
|
||
// Container-wildcard objectKey: matches every record/table inside this group.
|
||
// Pattern lives in the backend workspaceContext-resolver -- the trailing `.*`
|
||
// is treated as a glob-prefix so a single FDS row drives chat/scope/neutralize
|
||
// for every child without having to add each one individually.
|
||
const containerObjectKey = `data.feature.${featureNode.featureCode}.group:${objectKey}.*`;
|
||
const wildcardFds = ctx.featureDataSources.find(
|
||
f => f.featureInstanceId === featureNode.featureInstanceId && f.objectKey === containerObjectKey,
|
||
);
|
||
const _chatPayload = {
|
||
featureInstanceId: featureNode.featureInstanceId,
|
||
featureCode: featureNode.featureCode,
|
||
objectKey: containerObjectKey,
|
||
label,
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onClick={() => ctx.onToggleFeaturePath(pathKey)}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
e.dataTransfer.setData('application/feature-source', JSON.stringify(_chatPayload));
|
||
e.dataTransfer.setData('text/plain', label);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
// Compensate the 3px border on active wildcard rows so the row
|
||
// content stays at the same x-position whether or not it's active.
|
||
paddingLeft: (depth * 16 + 4) - (wildcardFds ? 3 : 0),
|
||
paddingRight: 4, paddingTop: 3, paddingBottom: 3,
|
||
cursor: 'pointer', borderRadius: 3,
|
||
background: wildcardFds
|
||
? (hovered ? '#ede7f6' : '#7b1fa208')
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
borderLeft: wildcardFds ? '3px solid #7b1fa2' : undefined,
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0 }}>
|
||
{chevron}
|
||
</span>
|
||
<span style={{ fontSize: 13, flexShrink: 0 }}>{'\uD83D\uDCC1'}</span>
|
||
<span style={{
|
||
flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
fontSize: 12, fontWeight: 600, color: '#555',
|
||
textTransform: 'uppercase', letterSpacing: 0.3,
|
||
}}>
|
||
{label}
|
||
</span>
|
||
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); ctx.onSendToChat?.(_chatPayload); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 14, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: wildcardFds ? 0.7 : (hovered ? 0.5 : 0.25), color: '#7b1fa2',
|
||
}}
|
||
title={t('Container in Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (wildcardFds) { ctx.onCycleScope(wildcardFds); return; }
|
||
const newId = await ctx.onAddFeatureTable(
|
||
featureNode,
|
||
{ objectKey: containerObjectKey, tableName: '*', label, fields: [] } as FeatureTableNode,
|
||
);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/scope`, { scope: _nextScope(inheritedScope || 'personal') }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: wildcardFds ? 1 : 0.35 }}
|
||
title={wildcardFds ? `${t('Bereich')}: ${wildcardFds.scope}` : (inheritedScope ? `${t('Geerbt')}: ${inheritedScope}` : t('Scope setzen'))}
|
||
>
|
||
{_SCOPE_ICONS[wildcardFds?.scope || inheritedScope || 'personal']}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (wildcardFds) { ctx.onToggleNeutralize(wildcardFds); return; }
|
||
const newId = await ctx.onAddFeatureTable(
|
||
featureNode,
|
||
{ objectKey: containerObjectKey, tableName: '*', label, fields: [] } as FeatureTableNode,
|
||
);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/neutralize`, { neutralize: true }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: (wildcardFds?.neutralize ?? inheritedNeutralize) ? 1 : 0.35 }}
|
||
title={(wildcardFds?.neutralize ?? inheritedNeutralize) ? t('Neutralisierung an') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
</div>
|
||
|
||
{expanded && items.length > 0 && (
|
||
<div>
|
||
{items.map((sub, idx) => (
|
||
<_FeatureItemView
|
||
key={_itemKey(sub, idx)}
|
||
featureNode={featureNode}
|
||
item={sub}
|
||
pathSegments={segments}
|
||
depth={depth + 1}
|
||
inheritedScope={inheritedScope}
|
||
inheritedNeutralize={inheritedNeutralize}
|
||
{...ctx}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── ParentGroupView (parent table → list of records) ───────────────── */
|
||
|
||
interface _ParentGroupViewProps extends _FeatureActionContext {
|
||
featureNode: FeatureConnectionNode;
|
||
table: FeatureTableNode;
|
||
pathSegments: string[];
|
||
depth: number;
|
||
inheritedScope?: string;
|
||
inheritedNeutralize?: boolean;
|
||
}
|
||
|
||
const _ParentGroupView: React.FC<_ParentGroupViewProps> = (props) => {
|
||
const { featureNode, table, pathSegments, depth, inheritedScope, inheritedNeutralize, ...ctx } = props;
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
|
||
const segments = [...pathSegments, `p:${table.tableName}`];
|
||
const pathKey = _pathKey(featureNode.featureInstanceId, segments);
|
||
const expanded = ctx.featureExpandedPaths.has(pathKey);
|
||
const loading = ctx.featureLoadingPath === pathKey;
|
||
const records = ctx.featureRecordsByPath[pathKey];
|
||
const chevron = expanded ? '\u25BE' : '\u25B8';
|
||
|
||
const childTables = (featureNode.tables || []).filter(c => c.parentTable === table.tableName);
|
||
|
||
const _onToggle = () => {
|
||
const willExpand = !expanded;
|
||
ctx.onToggleFeaturePath(pathKey);
|
||
if (willExpand && !records) {
|
||
ctx.onLoadRecordsAtPath(featureNode, table, pathSegments);
|
||
}
|
||
};
|
||
|
||
// Container-wildcard objectKey for the parent group: matches every record in
|
||
// ``table`` so a single FDS row drives chat/scope/neutralize for the whole list.
|
||
const containerObjectKey = `data.feature.${featureNode.featureCode}.${table.tableName}.*`;
|
||
const wildcardFds = ctx.featureDataSources.find(
|
||
f => f.featureInstanceId === featureNode.featureInstanceId
|
||
&& f.tableName === table.tableName
|
||
&& !f.recordFilter
|
||
&& f.objectKey === containerObjectKey,
|
||
);
|
||
const _chatPayload = {
|
||
featureInstanceId: featureNode.featureInstanceId,
|
||
featureCode: featureNode.featureCode,
|
||
tableName: table.tableName,
|
||
objectKey: containerObjectKey,
|
||
label: table.label || table.tableName,
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onClick={_onToggle}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
e.dataTransfer.setData('application/feature-source', JSON.stringify(_chatPayload));
|
||
e.dataTransfer.setData('text/plain', _chatPayload.label);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
paddingLeft: (depth * 16 + 4) - (wildcardFds ? 3 : 0),
|
||
paddingRight: 4, paddingTop: 3, paddingBottom: 3,
|
||
cursor: 'pointer', borderRadius: 3,
|
||
background: wildcardFds
|
||
? (hovered ? '#ede7f6' : '#7b1fa208')
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
borderLeft: wildcardFds ? '3px solid #7b1fa2' : undefined,
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0 }}>
|
||
{loading ? _Spinner() : chevron}
|
||
</span>
|
||
<span style={{ fontSize: 13, flexShrink: 0 }}>{'\uD83D\uDCC2'}</span>
|
||
<span style={{
|
||
flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
fontSize: 12, fontWeight: 600, color: '#555',
|
||
}}>
|
||
{table.label || table.tableName}
|
||
</span>
|
||
{childTables.length > 0 && (
|
||
<span style={{ fontSize: 10, color: '#999', flexShrink: 0 }}>
|
||
+{childTables.length} {t('Tabellen')}
|
||
</span>
|
||
)}
|
||
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); ctx.onSendToChat?.(_chatPayload); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 14, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: wildcardFds ? 0.7 : (hovered ? 0.5 : 0.25), color: '#7b1fa2',
|
||
}}
|
||
title={t('Container in Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (wildcardFds) { ctx.onCycleScope(wildcardFds); return; }
|
||
const newId = await ctx.onAddFeatureTable(
|
||
featureNode,
|
||
{ ...table, objectKey: containerObjectKey } as FeatureTableNode,
|
||
{ labelOverride: _chatPayload.label },
|
||
);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/scope`, { scope: _nextScope(inheritedScope || 'personal') }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: wildcardFds ? 1 : 0.35 }}
|
||
title={wildcardFds ? `${t('Bereich')}: ${wildcardFds.scope}` : (inheritedScope ? `${t('Geerbt')}: ${inheritedScope}` : t('Scope setzen'))}
|
||
>
|
||
{_SCOPE_ICONS[wildcardFds?.scope || inheritedScope || 'personal']}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (wildcardFds) { ctx.onToggleNeutralize(wildcardFds); return; }
|
||
const newId = await ctx.onAddFeatureTable(
|
||
featureNode,
|
||
{ ...table, objectKey: containerObjectKey } as FeatureTableNode,
|
||
{ labelOverride: _chatPayload.label },
|
||
);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/neutralize`, { neutralize: true }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: (wildcardFds?.neutralize ?? inheritedNeutralize) ? 1 : 0.35 }}
|
||
title={(wildcardFds?.neutralize ?? inheritedNeutralize) ? t('Neutralisierung an') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
</div>
|
||
|
||
{expanded && records && records.length > 0 && (
|
||
<div>
|
||
{records.map(record => (
|
||
<_RecordRowView
|
||
key={record.id}
|
||
featureNode={featureNode}
|
||
parentTable={table}
|
||
record={record}
|
||
pathSegments={segments}
|
||
depth={depth + 1}
|
||
inheritedScope={inheritedScope}
|
||
inheritedNeutralize={inheritedNeutralize}
|
||
{...ctx}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{expanded && records && records.length === 0 && !loading && (
|
||
<div style={{
|
||
paddingLeft: (depth + 1) * 16 + 20, fontSize: 11, color: '#bbb',
|
||
padding: '2px 0 2px ' + ((depth + 1) * 16 + 20) + 'px',
|
||
}}>
|
||
{t('(keine Einträge)')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── RecordRowView (single record + recursive children when expanded) ── */
|
||
|
||
interface _RecordRowViewProps extends _FeatureActionContext {
|
||
featureNode: FeatureConnectionNode;
|
||
parentTable: FeatureTableNode;
|
||
record: ParentRecordNode;
|
||
pathSegments: string[];
|
||
depth: number;
|
||
inheritedScope?: string;
|
||
inheritedNeutralize?: boolean;
|
||
}
|
||
|
||
const _RecordRowView: React.FC<_RecordRowViewProps> = (props) => {
|
||
const { featureNode, parentTable, record, pathSegments, depth, inheritedScope, inheritedNeutralize, ...ctx } = props;
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
|
||
const segments = [...pathSegments, `r:${parentTable.tableName}:${record.id}`];
|
||
const pathKey = _pathKey(featureNode.featureInstanceId, segments);
|
||
const expanded = ctx.featureExpandedPaths.has(pathKey);
|
||
const chevron = expanded ? '\u25BE' : '\u25B8';
|
||
|
||
const fds = ctx.featureDataSources.find(
|
||
f => f.featureInstanceId === featureNode.featureInstanceId
|
||
&& f.tableName === parentTable.tableName
|
||
&& f.recordFilter?.id === record.id,
|
||
);
|
||
|
||
const childItems = useMemo(
|
||
() => _childrenForRecord(featureNode.tables || [], parentTable.tableName),
|
||
[featureNode.tables, parentTable.tableName],
|
||
);
|
||
|
||
const isAdded = ctx.isRecordAdded(featureNode.featureInstanceId, parentTable.tableName, record.id);
|
||
const addingKey = `${_pathKey(featureNode.featureInstanceId, pathSegments)}|r:${parentTable.tableName}:${record.id}`;
|
||
const isAdding = ctx.addingRecordPath === addingKey;
|
||
|
||
const _chatPayload = {
|
||
featureInstanceId: featureNode.featureInstanceId,
|
||
featureCode: featureNode.featureCode,
|
||
tableName: parentTable.tableName,
|
||
objectKey: parentTable.objectKey,
|
||
label: `${parentTable.label || parentTable.tableName}: ${record.displayLabel}`,
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onClick={() => ctx.onToggleFeaturePath(pathKey)}
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
const payload = JSON.stringify({
|
||
featureInstanceId: featureNode.featureInstanceId,
|
||
featureCode: featureNode.featureCode,
|
||
objectKey: parentTable.objectKey,
|
||
label: `${parentTable.label || parentTable.tableName}: ${record.displayLabel}`,
|
||
});
|
||
e.dataTransfer.setData('application/feature-source', payload);
|
||
e.dataTransfer.setData('text/plain', record.displayLabel);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
paddingLeft: depth * 16 + 4, paddingRight: 4, paddingTop: 3, paddingBottom: 3,
|
||
cursor: 'pointer', borderRadius: 3,
|
||
background: fds
|
||
? (hovered ? '#ede7f6' : '#7b1fa208')
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
}}
|
||
title={Object.entries(record.fields).map(([k, v]) => `${k}: ${v}`).join(', ')}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0 }}>
|
||
{chevron}
|
||
</span>
|
||
<span style={{ fontSize: 13, flexShrink: 0 }}>{'\uD83D\uDCCB'}</span>
|
||
<span style={{
|
||
flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
fontSize: 12, fontWeight: fds ? 600 : 400,
|
||
}}>
|
||
{record.displayLabel}
|
||
</span>
|
||
|
||
{/* Add record + direct children as data sources (only when not already added). */}
|
||
{!fds && !isAdded && (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
ctx.onAddRecordWithChildren(featureNode, parentTable, record, pathSegments);
|
||
}}
|
||
disabled={isAdding}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: isAdding ? 'wait' : 'pointer',
|
||
fontSize: 12, color: '#7b1fa2', padding: '0 2px', flexShrink: 0,
|
||
opacity: hovered ? 1 : 0.5,
|
||
}}
|
||
title={t('Datensatz + Kind-Tabellen als Quelle hinzufügen')}
|
||
>
|
||
{isAdding ? '\u23F3' : '+'}
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); ctx.onSendToChat?.(_chatPayload); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 13, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: fds ? 0.7 : (hovered ? 0.5 : 0.25), color: '#7b1fa2',
|
||
}}
|
||
title={t('In Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
{fds ? (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); ctx.onCycleScope(fds); }}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center' }}
|
||
title={`${t('Bereich')}: ${fds.scope}`}
|
||
>
|
||
{_SCOPE_ICONS[fds.scope] || _SCOPE_ICONS.personal}
|
||
</button>
|
||
) : (
|
||
<span
|
||
style={{ fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: 0.25, display: 'inline-block' }}
|
||
title={inheritedScope ? `${t('Geerbt')}: ${inheritedScope}` : t('Kein Scope gesetzt')}
|
||
>
|
||
{_SCOPE_ICONS[inheritedScope || 'personal']}
|
||
</span>
|
||
)}
|
||
{fds ? (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); ctx.onToggleNeutralize(fds); }}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: fds.neutralize ? 1 : 0.35 }}
|
||
title={fds.neutralize ? t('Neutralisierung an') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
) : (
|
||
<span
|
||
style={{ fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: (inheritedNeutralize ?? false) ? 0.5 : 0.15, display: 'inline-block' }}
|
||
title={(inheritedNeutralize ?? false) ? t('Neutralisierung geerbt') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{expanded && childItems.length > 0 && (
|
||
<div>
|
||
{childItems.map((sub, idx) => (
|
||
<_FeatureItemView
|
||
key={_itemKey(sub, idx)}
|
||
featureNode={featureNode}
|
||
item={sub}
|
||
pathSegments={segments}
|
||
depth={depth + 1}
|
||
inheritedScope={fds?.scope ?? inheritedScope}
|
||
inheritedNeutralize={fds?.neutralize ?? inheritedNeutralize}
|
||
{...ctx}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── FeatureTableRow (leaf table) ───────────────────────────────────── */
|
||
|
||
interface _FeatureTableRowProps {
|
||
featureNode: FeatureConnectionNode;
|
||
table: FeatureTableNode;
|
||
depth: number;
|
||
onAddFeatureTable: (
|
||
node: FeatureConnectionNode,
|
||
table: FeatureTableNode,
|
||
extra?: { recordFilter?: Record<string, string>; labelOverride?: string },
|
||
) => Promise<string | null>;
|
||
onSendToChat?: (params: { featureInstanceId: string; featureCode: string; tableName?: string; objectKey: string; label: string; fieldName?: string }) => void;
|
||
featureDataSources: UdbFeatureDataSource[];
|
||
onCycleScope: (fds: UdbFeatureDataSource) => void;
|
||
onToggleNeutralize: (fds: UdbFeatureDataSource) => void;
|
||
onToggleNeutralizeField: (fds: UdbFeatureDataSource, fieldName: string) => void;
|
||
featureTree: MandateGroupNode[];
|
||
inheritedScope?: string;
|
||
inheritedNeutralize?: boolean;
|
||
}
|
||
|
||
const _FeatureTableRow: React.FC<_FeatureTableRowProps> = ({
|
||
featureNode, table, depth, onAddFeatureTable, onSendToChat,
|
||
featureDataSources, onCycleScope, onToggleNeutralize, onToggleNeutralizeField,
|
||
featureTree, inheritedScope, inheritedNeutralize,
|
||
}) => {
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
const [fieldsExpanded, setFieldsExpanded] = useState(false);
|
||
const tableLabel = table.label || table.tableName;
|
||
|
||
const fds = featureDataSources.find(
|
||
f => f.featureInstanceId === featureNode.featureInstanceId
|
||
&& f.tableName === table.tableName
|
||
&& !f.recordFilter,
|
||
);
|
||
|
||
const effectiveScope = fds?.scope ?? inheritedScope;
|
||
const effectiveNeutralize = fds?.neutralize ?? inheritedNeutralize ?? false;
|
||
const _chatPayload = {
|
||
featureInstanceId: featureNode.featureInstanceId,
|
||
featureCode: featureNode.featureCode,
|
||
tableName: table.tableName,
|
||
objectKey: table.objectKey,
|
||
label: tableLabel,
|
||
};
|
||
|
||
const resolvedFields = featureTree
|
||
? _findTableFields(featureTree, featureNode.featureInstanceId, table.tableName)
|
||
: table.fields;
|
||
const neutralizedCount = fds?.neutralizeFields?.length ?? 0;
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
e.dataTransfer.setData('application/feature-source', JSON.stringify(_chatPayload));
|
||
e.dataTransfer.setData('text/plain', tableLabel);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
paddingLeft: depth * 16 + 4, paddingRight: 4, paddingTop: 3, paddingBottom: 3,
|
||
borderRadius: 3,
|
||
background: fds
|
||
? (hovered ? '#ede7f6' : '#7b1fa208')
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
}}
|
||
title={`${table.tableName}: ${table.fields.join(', ')}`}
|
||
>
|
||
<span
|
||
onClick={e => { e.stopPropagation(); if (resolvedFields.length > 0) setFieldsExpanded(prev => !prev); }}
|
||
style={{ fontSize: 10, color: '#888', width: 12, textAlign: 'center', flexShrink: 0, cursor: resolvedFields.length > 0 ? 'pointer' : 'default' }}
|
||
>
|
||
{resolvedFields.length > 0 ? (fieldsExpanded ? '\u25BE' : '\u25B8') : '\u00A0\u00A0'}
|
||
</span>
|
||
<span style={{ fontSize: 14, flexShrink: 0 }}>{'\uD83D\uDCC1'}</span>
|
||
<span style={{
|
||
flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
fontSize: 12, fontWeight: fds ? 600 : 400,
|
||
}}>
|
||
{tableLabel}
|
||
{neutralizedCount > 0 && (
|
||
<span style={{ fontSize: 9, color: '#7b1fa2', marginLeft: 4 }}>({neutralizedCount} {t('Felder')})</span>
|
||
)}
|
||
</span>
|
||
|
||
<button
|
||
onClick={e => { e.stopPropagation(); onSendToChat?.(_chatPayload); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 13, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: fds ? 0.7 : (hovered ? 0.5 : 0.25), color: '#7b1fa2',
|
||
}}
|
||
title={t('In Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (fds) { onCycleScope(fds); return; }
|
||
const newId = await onAddFeatureTable(featureNode, table);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/scope`, { scope: _nextScope(effectiveScope || 'personal') }); } catch {}
|
||
}
|
||
}}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: fds ? 1 : 0.35 }}
|
||
title={fds ? `${t('Bereich')}: ${fds.scope}` : (effectiveScope ? `${t('Geerbt')}: ${effectiveScope}` : t('Scope setzen'))}
|
||
>
|
||
{_SCOPE_ICONS[fds?.scope || effectiveScope || 'personal']}
|
||
</button>
|
||
<button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (fds) { onToggleNeutralize(fds); return; }
|
||
const newId = await onAddFeatureTable(featureNode, table);
|
||
if (newId) {
|
||
try { await api.patch(`/api/datasources/${newId}/neutralize`, { neutralize: !effectiveNeutralize }); } catch {}
|
||
}
|
||
}}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 12, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center',
|
||
opacity: (fds?.neutralize ?? effectiveNeutralize) ? 1 : 0.35,
|
||
}}
|
||
title={(fds?.neutralize ?? effectiveNeutralize) ? t('Neutralisierung an') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
|
||
</div>
|
||
|
||
{fieldsExpanded && resolvedFields.length > 0 && (
|
||
<div>
|
||
{resolvedFields.map(field => {
|
||
const isNeutralized = (fds?.neutralizeFields || []).includes(field);
|
||
return (
|
||
<_FeatureFieldRow
|
||
key={field}
|
||
featureNode={featureNode}
|
||
table={table}
|
||
fieldName={field}
|
||
depth={depth + 1}
|
||
isNeutralized={isNeutralized || effectiveNeutralize}
|
||
fds={fds}
|
||
onToggleNeutralizeField={onToggleNeutralizeField}
|
||
onSendToChat={onSendToChat}
|
||
inheritedScope={fds?.scope ?? inheritedScope}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* ─── FeatureFieldRow (single field under a table) ────────────────────── */
|
||
|
||
interface _FeatureFieldRowProps {
|
||
featureNode: FeatureConnectionNode;
|
||
table: FeatureTableNode;
|
||
fieldName: string;
|
||
depth: number;
|
||
isNeutralized: boolean;
|
||
fds?: UdbFeatureDataSource;
|
||
onToggleNeutralizeField?: (fds: UdbFeatureDataSource, fieldName: string) => void;
|
||
onSendToChat?: (params: { featureInstanceId: string; featureCode: string; tableName?: string; objectKey: string; label: string; fieldName?: string }) => void;
|
||
inheritedScope?: string;
|
||
}
|
||
|
||
const _FeatureFieldRow: React.FC<_FeatureFieldRowProps> = ({
|
||
featureNode, table, fieldName, depth, isNeutralized, fds, onToggleNeutralizeField, onSendToChat, inheritedScope,
|
||
}) => {
|
||
const { t } = useLanguage();
|
||
const [hovered, setHovered] = useState(false);
|
||
const _chatPayload = {
|
||
featureInstanceId: featureNode.featureInstanceId,
|
||
featureCode: featureNode.featureCode,
|
||
tableName: table.tableName,
|
||
objectKey: table.objectKey,
|
||
label: `${table.label || table.tableName}.${fieldName}`,
|
||
fieldName,
|
||
};
|
||
|
||
return (
|
||
<div
|
||
onMouseEnter={() => setHovered(true)}
|
||
onMouseLeave={() => setHovered(false)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
e.stopPropagation();
|
||
e.dataTransfer.setData('application/feature-source', JSON.stringify(_chatPayload));
|
||
e.dataTransfer.setData('text/plain', `${table.tableName}.${fieldName}`);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
}}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 4,
|
||
paddingLeft: depth * 16 + 8, paddingRight: 4, paddingTop: 2, paddingBottom: 2,
|
||
borderRadius: 3,
|
||
background: isNeutralized
|
||
? (hovered ? '#f3e5f5' : '#f3e5f508')
|
||
: (hovered ? 'var(--hover-bg, #f5f5f5)' : 'transparent'),
|
||
transition: 'background 0.1s', userSelect: 'none',
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 10, color: '#999', flexShrink: 0 }}>{'\u2514'}</span>
|
||
<span style={{
|
||
flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
fontWeight: isNeutralized ? 600 : 400,
|
||
color: isNeutralized ? '#7b1fa2' : undefined,
|
||
}}>
|
||
{fieldName}
|
||
</span>
|
||
|
||
<button
|
||
onClick={e => { e.stopPropagation(); onSendToChat?.(_chatPayload); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 11, padding: '0 2px', flexShrink: 0, lineHeight: 1, width: 22, textAlign: 'center',
|
||
opacity: fds ? 0.7 : (hovered ? 0.5 : 0.25), color: '#7b1fa2',
|
||
}}
|
||
title={t('Feld in Chat senden')}
|
||
>
|
||
{'\u{1F4AC}'}
|
||
</button>
|
||
<span
|
||
style={{ fontSize: 11, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: 0.25, display: 'inline-block' }}
|
||
title={inheritedScope ? `${t('Geerbt')}: ${inheritedScope}` : t('Kein Scope gesetzt')}
|
||
>
|
||
{_SCOPE_ICONS[inheritedScope || 'personal']}
|
||
</span>
|
||
{fds && onToggleNeutralizeField ? (
|
||
<button
|
||
onClick={e => { e.stopPropagation(); onToggleNeutralizeField(fds, fieldName); }}
|
||
style={{
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 11, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center',
|
||
opacity: isNeutralized ? 1 : 0.35,
|
||
}}
|
||
title={isNeutralized ? t('Feld-Neutralisierung an') : t('Feld-Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</button>
|
||
) : (
|
||
<span
|
||
style={{ fontSize: 11, padding: '0 2px', lineHeight: 1, flexShrink: 0, width: 22, textAlign: 'center', opacity: isNeutralized ? 0.5 : 0.15, display: 'inline-block' }}
|
||
title={isNeutralized ? t('Neutralisierung geerbt') : t('Neutralisierung aus')}
|
||
>
|
||
{'\uD83D\uDD12'}
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SourcesTab;
|