Sequenz / Reihe anlegen
diff --git a/frontend/src/components/SkillTreeMultiSelect.jsx b/frontend/src/components/SkillTreeMultiSelect.jsx
index 98dc4c0..8e0187a 100644
--- a/frontend/src/components/SkillTreeMultiSelect.jsx
+++ b/frontend/src/components/SkillTreeMultiSelect.jsx
@@ -1,7 +1,12 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
import { collectSkillLeavesFromTree, buildSkillCatalogTree } from '../utils/skillCatalogTree'
import SkillTreePickerPanel from './SkillTreePickerPanel'
+const PANEL_MAX_HEIGHT = 360
+const PANEL_MIN_HEIGHT = 140
+const PANEL_Z_INDEX = 1100
+
function normId(id) {
return String(id)
}
@@ -17,11 +22,15 @@ export default function SkillTreeMultiSelect({
browseLabel = '▼ Katalog',
emptyHint = 'Keine Treffer',
className = '',
+ usePortal = true,
}) {
const [query, setQuery] = useState('')
const [open, setOpen] = useState(false)
const [browseTree, setBrowseTree] = useState(false)
+ const [panelStyle, setPanelStyle] = useState(null)
const rootRef = useRef(null)
+ const fieldRef = useRef(null)
+ const panelRef = useRef(null)
const tree = useMemo(() => buildSkillCatalogTree(skills), [skills])
const selectedSet = useMemo(() => new Set(value.map(normId)), [value])
@@ -56,17 +65,99 @@ export default function SkillTreeMultiSelect({
useEffect(() => {
const onDoc = (e) => {
- if (!rootRef.current?.contains(e.target)) {
- setOpen(false)
- setBrowseTree(false)
- }
+ const t = e.target
+ if (rootRef.current?.contains(t) || panelRef.current?.contains(t)) return
+ setOpen(false)
+ setBrowseTree(false)
}
document.addEventListener('mousedown', onDoc)
return () => document.removeEventListener('mousedown', onDoc)
}, [])
+ const updatePanelPosition = useCallback(() => {
+ const anchor = fieldRef.current
+ if (!anchor) return
+ const rect = anchor.getBoundingClientRect()
+ const gap = 4
+ const margin = 12
+ const spaceBelow = window.innerHeight - rect.bottom - gap - margin
+ const spaceAbove = rect.top - gap - margin
+ const openUp = spaceBelow < PANEL_MIN_HEIGHT && spaceAbove > spaceBelow
+ const available = Math.max(0, openUp ? spaceAbove : spaceBelow)
+ const maxHeight = Math.min(PANEL_MAX_HEIGHT, Math.max(PANEL_MIN_HEIGHT, available))
+ const top = openUp ? Math.max(margin, rect.top - gap - maxHeight) : rect.bottom + gap
+
+ setPanelStyle({
+ position: 'fixed',
+ left: rect.left,
+ width: rect.width,
+ top,
+ maxHeight,
+ zIndex: PANEL_Z_INDEX,
+ })
+ }, [])
+
+ useLayoutEffect(() => {
+ if (!open || !usePortal) {
+ setPanelStyle(null)
+ return undefined
+ }
+ updatePanelPosition()
+ window.addEventListener('resize', updatePanelPosition)
+ window.addEventListener('scroll', updatePanelPosition, true)
+ return () => {
+ window.removeEventListener('resize', updatePanelPosition)
+ window.removeEventListener('scroll', updatePanelPosition, true)
+ }
+ }, [open, usePortal, updatePanelPosition, query, browseTree, value.length])
+
const showTree = browseTree || !query.trim()
+ const panelContent = showTree ? (
+ addId(id)}
+ pickMode="multi"
+ />
+ ) : (
+
+ {leaves.filter((l) => l.pathLabel.toLowerCase().includes(query.trim().toLowerCase())).length === 0 ? (
+ - {emptyHint}
+ ) : (
+ leaves
+ .filter((l) => l.pathLabel.toLowerCase().includes(query.trim().toLowerCase()))
+ .map((l) => (
+ -
+
+
+ ))
+ )}
+
+ )
+
+ const dropdownPanel =
+ open && (usePortal ? panelStyle : true) ? (
+
+ {panelContent}
+
+ ) : null
+
return (
@@ -85,7 +176,7 @@ export default function SkillTreeMultiSelect({
))}
-
+
- {open ? (
-
- {showTree ? (
-
addId(id)}
- pickMode="multi"
- />
- ) : (
-
- {leaves.filter((l) => l.pathLabel.toLowerCase().includes(query.trim().toLowerCase())).length ===
- 0 ? (
- - {emptyHint}
- ) : (
- leaves
- .filter((l) => l.pathLabel.toLowerCase().includes(query.trim().toLowerCase()))
- .map((l) => (
- -
-
-
- ))
- )}
-
- )}
-
- ) : null}
+ {!usePortal && dropdownPanel}
+ {usePortal && dropdownPanel ? createPortal(dropdownPanel, document.body) : null}
)
}
diff --git a/frontend/src/components/planning/FrameworkProgramListCard.jsx b/frontend/src/components/planning/FrameworkProgramListCard.jsx
index 2ccd4ed..1fbf549 100644
--- a/frontend/src/components/planning/FrameworkProgramListCard.jsx
+++ b/frontend/src/components/planning/FrameworkProgramListCard.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import NavStateLink from '../NavStateLink'
+import SkillProfileCompact from '../skills/SkillProfileCompact'
import {
frameworkSessionDurationLabel,
splitFrameworkCommaAgg,
@@ -26,7 +27,16 @@ function CatalogGroup({ label, items, variant }) {
/**
* Einzelkarte für die Rahmenprogramm-Bibliothek.
*/
-export default function FrameworkProgramListCard({ row, returnContext, onDelete }) {
+export default function FrameworkProgramListCard({
+ row,
+ returnContext,
+ onDelete,
+ skillSummary = null,
+ skillSummaryLoading = false,
+ skillFilterIds = [],
+ skillDisplayLimit = 6,
+ onShowSkillProfile,
+}) {
const title = (row.title || '').trim() || `Rahmen #${row.id}`
const description = (row.description || '').trim()
const durationLabel = frameworkSessionDurationLabel(row)
@@ -112,6 +122,28 @@ export default function FrameworkProgramListCard({ row, returnContext, onDelete
) : null}
+
+
+
Fähigkeiten
+ {onShowSkillProfile ? (
+
+ ) : null}
+
+
+
+