63 lines
1.8 KiB
React
63 lines
1.8 KiB
React
|
import { Link } from 'react-router-dom'
|
|||
|
|
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
|
|||
|
|
import { initiativeCatalogPath, scopedPath } from '../utils/routes.js'
|
|||
|
|
|
|||
|
|
export function ProgramScopeBar() {
|
|||
|
|
const {
|
|||
|
|
initiativeId,
|
|||
|
|
projectId,
|
|||
|
|
initiativeTitle,
|
|||
|
|
projectTitle,
|
|||
|
|
clearScope,
|
|||
|
|
setScope,
|
|||
|
|
} = useProgramScope()
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="program-scope-bar" aria-label="Programm-Scope">
|
|||
|
|
<span className="program-scope-bar__label">Scope</span>
|
|||
|
|
<nav className="program-scope-bar__trail">
|
|||
|
|
<Link
|
|||
|
|
to={scopedPath('/cockpit')}
|
|||
|
|
className={
|
|||
|
|
'program-scope-bar__crumb' +
|
|||
|
|
(!initiativeId ? ' program-scope-bar__crumb--active' : '')
|
|||
|
|
}
|
|||
|
|
onClick={() => clearScope()}
|
|||
|
|
>
|
|||
|
|
Portfolio
|
|||
|
|
</Link>
|
|||
|
|
{initiativeId && (
|
|||
|
|
<>
|
|||
|
|
<span className="program-scope-bar__sep" aria-hidden="true">
|
|||
|
|
›
|
|||
|
|
</span>
|
|||
|
|
<Link
|
|||
|
|
to={scopedPath('/control/status', { initiativeId })}
|
|||
|
|
className={
|
|||
|
|
'program-scope-bar__crumb' +
|
|||
|
|
(!projectId ? ' program-scope-bar__crumb--active' : '')
|
|||
|
|
}
|
|||
|
|
onClick={() => setScope({ projectId: '', clearProject: true })}
|
|||
|
|
>
|
|||
|
|
{initiativeTitle || 'Vorhaben'}
|
|||
|
|
</Link>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{projectId && (
|
|||
|
|
<>
|
|||
|
|
<span className="program-scope-bar__sep" aria-hidden="true">
|
|||
|
|
›
|
|||
|
|
</span>
|
|||
|
|
<span className="program-scope-bar__crumb program-scope-bar__crumb--active">
|
|||
|
|
{projectTitle || 'Projekt'}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</nav>
|
|||
|
|
<Link to={initiativeCatalogPath()} className="program-scope-bar__catalog link-inline">
|
|||
|
|
Vorhaben-Katalog
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|