Lars
657f73d2c5
Some checks failed
Deploy Development / deploy (push) Successful in 36s
Test Suite / pytest-backend (push) Successful in 7s
Test Suite / lint-backend (push) Successful in 0s
Test Suite / build-frontend (push) Successful in 6s
Test Suite / playwright-tests (push) Failing after 27s
- Added new CSS styles for admin catalog sections, improving layout and responsiveness. - Implemented icon support for catalog section titles, enhancing visual clarity. - Refactored loading and error states for better user experience in the CatalogsTab and HierarchyTab components. - Updated AdminCatalogsPage to utilize new styles and improve tab navigation. - Enhanced accessibility with appropriate ARIA roles and attributes for better usability.
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import { ArrowLeft } from 'lucide-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 className="empty-state" style={{ padding: '2.5rem' }}>
|
|
<div className="spinner" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="admin-hierarchy-container admin-hierarchy-layout">
|
|
<div className="admin-hierarchy-pane admin-hierarchy-pane--tree" hidden={!!selectedItem}>
|
|
<h2 className="admin-hierarchy-pane__title">Katalog-Hierarchie</h2>
|
|
{error && <div className="admin-matrix-alert">{error}</div>}
|
|
|
|
{hierarchy.map((fa) => (
|
|
<FocusAreaNode
|
|
key={fa.id}
|
|
focusArea={fa}
|
|
expanded={expandedNodes}
|
|
onToggle={onToggleNode}
|
|
onSelect={onSelectItem}
|
|
selectedId={selectedItem?.id}
|
|
selectedType={selectedItem?._type}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{selectedItem && (
|
|
<div className="admin-hierarchy-pane admin-hierarchy-pane--detail">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary btn-small admin-hierarchy-back"
|
|
onClick={() => onSelectItem(null)}
|
|
>
|
|
<ArrowLeft size={16} strokeWidth={2} aria-hidden />
|
|
Zurück zur Übersicht
|
|
</button>
|
|
<DetailPanel item={selectedItem} onUpdate={onUpdate} focusAreas={hierarchy} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HierarchyTab
|