Lars
0e0b709768
Split 1200+ line file into clean modular architecture: - FocusAreaNode.jsx - Tree nodes with nested style directions + training types - HierarchyTab.jsx - Tab 1 with tree view and detail panel - CatalogsTab.jsx - Tab 2 with global catalogs (Target Groups, Skill Categories, Training Characters) - AssignmentsTab.jsx - Tab 3 with M:N checkbox matrix (Style Directions ↔ Target Groups) - DetailPanel.jsx - All edit forms (Focus Area, Style Direction, Training Type) + create forms Fixes ESBuild parser error from large file size. Implements full CRUD: create, edit, delete, reassign focus areas. Responsive design with mobile/desktop layouts.
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import FocusAreaNode from './FocusAreaNode'
|
|
import DetailPanel from './DetailPanel'
|
|
|
|
function HierarchyTab({ hierarchy, expandedNodes, selectedItem, loading, error, onToggleNode, onSelectItem, onUpdate }) {
|
|
if (loading && hierarchy.length === 0) {
|
|
return <div style={{ textAlign: 'center', padding: '40px' }}><div className="spinner"></div></div>
|
|
}
|
|
|
|
return (
|
|
<div className="admin-hierarchy-container">
|
|
{/* Tree View */}
|
|
<div
|
|
className="admin-tree-view"
|
|
style={{
|
|
display: selectedItem ? 'none' : 'block',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '12px',
|
|
padding: '16px',
|
|
background: 'var(--surface)'
|
|
}}
|
|
>
|
|
<h2 style={{ marginTop: 0 }}>Katalog-Hierarchie</h2>
|
|
{error && <div style={{ color: 'var(--danger)', marginBottom: '16px' }}>{error}</div>}
|
|
|
|
{hierarchy.map(fa => (
|
|
<FocusAreaNode
|
|
key={fa.id}
|
|
focusArea={fa}
|
|
expanded={expandedNodes}
|
|
onToggle={onToggleNode}
|
|
onSelect={onSelectItem}
|
|
selectedId={selectedItem?.id}
|
|
selectedType={selectedItem?._type}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Detail Panel */}
|
|
{selectedItem && (
|
|
<div
|
|
style={{
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '12px',
|
|
padding: '20px',
|
|
background: 'var(--surface)'
|
|
}}
|
|
>
|
|
<button
|
|
className="btn admin-back-button"
|
|
onClick={() => onSelectItem(null)}
|
|
style={{ marginBottom: '16px' }}
|
|
>
|
|
← Zurück zur Übersicht
|
|
</button>
|
|
<DetailPanel item={selectedItem} onUpdate={onUpdate} focusAreas={hierarchy} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HierarchyTab
|