Compare commits

..

No commits in common. "1e2fdeeb0f11ba85dc8c898951da9a47a22d7aeb" and "7450c269a54cf51714108febec643e8cafd0c5af" have entirely different histories.

32 changed files with 214 additions and 1683 deletions

View File

@ -1,144 +0,0 @@
# Navigation — Return-Kontext (Rücksprung)
**Stand:** 2026-05-20
**Status:** Spezifikation + Phase 12 umgesetzt
**Ziel:** In der PWA (ohne Browser-Back) zuverlässig an den fachlichen Ausgangspunkt zurückkehren — inkl. sinnvollem Label und optional UI-State.
---
## Problem
Viele Flows navigieren von Kontext A zu Editor/Detail B (z.B. Übungsliste → Modulbearbeitung). Die Zielseite kennt A nicht und bietet nur einen **fest verdrahteten** Zurück-Link (z.B. immer „Modul-Bibliothek“). In der installierten PWA fehlt zusätzlich die Browser-Chrome.
Betroffen u.a.:
- Übungsliste → Modul anlegen/bearbeiten
- Planung → Einheiten-Editor (teilweise gelöst via `planningReturn`)
- Modals mit Speichern + Redirect auf Vollseite
---
## Strategie (Hybrid)
| Mechanismus | Wann |
|-------------|------|
| **Expliziter Return-Kontext** (`appReturn` in Router-State) | Seitenwechsel, bei denen das Ziel einen fachlichen Rücksprung anbieten soll |
| **History-Back** (`navigate(-1)`) | Fallback, wenn kein Kontext gesetzt ist und History-Eintrag existiert |
| **Default-Pfad** | Fallback der Zielseite (z.B. Modul-Bibliothek) |
| **Modal schließen** | Overlays/Peek — kein Routing-Return |
**Nicht** als alleinige Lösung: reines Browser-Back (History durch `replace`, Deep Links, Reload unzuverlässig).
---
## Datenmodell
Router-State-Schlüssel: **`appReturn`**
```javascript
{
v: 1, // Schema-Version
path: '/exercises', // Ziel-URL (inkl. Query, falls nötig)
label: 'Zurück zur Übungsliste', // Anzeige im UI (vollständiger Satz)
kind: 'exerciseList', // optional: Typ für erweiterte Wiederherstellung
payload: { ... } // optional: kind-spezifische Daten
}
```
### `kind`-Werte (erweiterbar)
| kind | payload | path-Ableitung |
|------|---------|----------------|
| `exerciseList` | — | `/exercises` (Filter/Auswahl via sessionStorage) |
| `planningHub` | `buildPlanningHubReturnState(...)` | `planningHubPathFromReturnState(payload)` |
| `trainingModulesList` | — | `/planning/training-modules` |
| `planTemplatesList` | — | `/planning/plan-templates` |
| `frameworkProgramsList` | — | `/planning/framework-programs` |
| `settings` | — | `/settings` |
| `dashboard` | — | `/` |
| `mediaLibrary` | — | `/media` |
| `trainingRun` | `{ unitId }` | `/planning/run/:unitId` |
| `currentLocation` | — | aktuelle Route (z.B. Einheiten-Editor) |
| (frei) | — | `path` direkt gesetzt |
### Legacy-Kompatibilität
Bestehendes Feld **`planningReturn`** (Planung ↔ Einheiten-Editor) wird beim Lesen in `appReturn` **bridged** — keine Big-Bang-Migration nötig.
---
## API (Frontend)
Zentrale Datei: `frontend/src/utils/navReturnContext.js`
| Funktion | Zweck |
|----------|--------|
| `buildNavReturnContext({ path, label, kind?, payload? })` | Kontext-Objekt erzeugen |
| `buildExercisesListReturnContext()` | Standard-Rückkehr Übungsliste |
| `buildPlanningHubReturnContext(hubState)` | Planungs-Hub inkl. Filter-Query |
| `buildTrainingModulesListReturnContext()` | Modul-Bibliothek |
| `readNavReturnFromLocation(location)` | Kontext aus `location.state` (+ Legacy) |
| `resolveNavReturnTarget(location, fallback)` | `{ path, label }` für UI |
| `goNavReturn(navigate, location, fallback?)` | Programmatischer Rücksprung (priorisiert: Kontext → History → Fallback) |
| `navigateWithAppReturn(navigate, to, returnContext, options?)` | Navigation mit gesetztem `appReturn` |
| `preserveAppReturnOnNavigate(navigate, location, to, options?)` | Weiterleiten, bestehenden Kontext behalten (z.B. nach `replace`) |
UI-Komponente: **`PageReturnButton`** — app-typischer Zurück-Schalter (Button mit Pfeil, kein Router-Link).
Links **zum** Ziel: **`NavStateLink`** mit `returnContext` der Quellseite.
### Editor-Aktionen
Auf Vollseiten-Editoren mit **`FormActionBar`** (`placement="bottom"`) oder **`PageFormEditorChrome`**:
- **Kein** separater Zurück-Link/Button oben (wirkt in der App redundant)
- **Abbrechen**`goBack()` / `goNavReturn(...)` (Einsprungspunkt)
- **Speichern & Schließen** → nach erfolgreichem Save ebenfalls `goBack()`
- Sticky Action Bar unten nutzen
**PageReturnButton** nur auf **Leseseiten** ohne Editor-Leiste (z.B. Übungsdetail, Einstellungen-Unterseiten, Trainingsablauf).
---
## Regeln für Entwickler
1. **Jede Navigation** von Kontext A zu Editor B, wo der Nutzer „weitermachen“ soll, setzt `appReturn` (oder nutzt `navigateWithAppReturn`).
2. **Zielseite** zeigt `PageReturnButton` mit sinnvollem **Default-Fallback** (Bibliothek/Hub).
3. **Nach Create + `replace: true`:** Return-Kontext mit `preserveAppReturnOnNavigate` erhalten.
4. **Modals:** Schließen reicht; Redirect nach Speichern = Seiten-Navigation → Return setzen.
5. **Kein Return-Kontext** in `location.state` für interne Bibliothek → Detail → Bearbeiten, wenn Herkunft = offensichtliche Elternliste (Default-Fallback genügt).
6. **UI-State** (Filter, Auswahl): weiter über bestehende Session-Mechanismen (z.B. `exerciseListSessionState`), nicht im Return-Payload duplizieren, außer kind erfordert Query-Reconstruction (Planung).
---
## Umsetzungsstand
### Phase 1 (Pilot)
- [x] Spec + Utility + Tests
- [x] `PageReturnButton` (ersetzt Link-Variante)
- [x] Übungsliste → Modul speichern → Modul-Editor
- [x] Planung: `SaveExercisesAsModuleModal` leitet Return-Kontext weiter
- [x] `TrainingUnitEditPage`: `goBack` über `goNavReturn` (Legacy-bridge)
### Phase 2 (Flows verbinden)
- [x] Listen → Editoren: Übungen, Module, Vorlagen, Rahmenprogramme
- [x] Dashboard → Übung bearbeiten / Trainingsablauf / Einheit bearbeiten
- [x] Einstellungen-Unterseiten (Rechtliches, Systeminfo)
- [x] Trainingsablauf + Coach-Modus (`trainingRun`, Planungs-Fallback)
- [x] Medienbibliothek → verknüpfte Übungen/Einheiten
- [x] `ExercisePeekModal` → Vollseite mit Return
- [x] Editoren: Abbrechen + Speichern & Schließen → Einsprungspunkt
### Optional (später)
- Globaler Zurück-Button in App-Chrome (Mobile)
- Nach Speichern: explizite Aktion „Zurück zum Ausgang“ im Toast
---
## Referenzen
- Bestehend: `frontend/src/utils/planningUnitRoutes.js` (`planningReturn`)
- Session Übungsliste: `frontend/src/utils/exerciseListSessionState.js`
- PWA-Kontext: `docs/FACHLICHE_NUTZERFUNKTIONEN.md`, App-Shell in `App.jsx`

View File

@ -1459,36 +1459,6 @@ html.modal-scroll-locked .app-main {
.page-form-editor__intro {
min-width: 0;
}
.page-return-link {
display: inline-block;
margin-bottom: 0.75rem;
color: var(--accent-dark);
font-weight: 600;
text-decoration: none;
}
.page-return-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 0.75rem;
max-width: 100%;
}
.page-return-btn__icon {
flex-shrink: 0;
}
.page-return-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-return-link:hover {
text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
.page-return-link {
color: var(--accent);
}
}
.page-form-editor__back {
display: inline-block;
margin-bottom: 0.35rem;
@ -2979,66 +2949,15 @@ html.modal-scroll-locked .app-main {
flex-shrink: 0;
accent-color: var(--accent);
}
.exercise-card--selection-pinned {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.exercise-card__selection-badge {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 7px;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--accent-dark);
background: var(--accent-soft);
vertical-align: middle;
}
.exercises-selection-section {
margin-bottom: 1rem;
}
.exercises-selection-section__head {
margin-bottom: 0.65rem;
}
.exercises-selection-section__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--text1);
}
.exercises-selection-section__hint {
margin: 4px 0 0;
font-size: 0.85rem;
color: var(--text3);
line-height: 1.45;
}
.exercises-list-grid--selection {
margin-bottom: 0.25rem;
}
.exercise-card-body-flex {
flex: 1;
min-width: 0;
}
.exercise-card__body--clickable {
cursor: pointer;
}
.exercise-card__body--clickable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 8px;
}
.exercise-card-title {
margin: 0 0 8px;
font-size: 1.05rem;
line-height: 1.3;
font-weight: 700;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
}
.exercise-card-title a {
color: inherit;

View File

@ -5,7 +5,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { Link } from 'react-router-dom'
import api from '../utils/api'
import NavStateLink from './NavStateLink'
import ExerciseRichTextBlock from './ExerciseRichTextBlock'
import CombinationPlanBracket from './CombinationPlanBracket'
import { effectiveComboMethodProfile } from '../utils/comboPlanningMethodProfile'
@ -37,8 +36,6 @@ export default function ExercisePeekModal({
titleFallback,
/** Nur Planung: effektives method_profile aus Zeilen-Katalog + Planungs-Override */
peekExtras,
/** Rücksprung-Kontext für „Vollständige Übungsseite“ */
returnContext,
}) {
const [loading, setLoading] = useState(false)
const [err, setErr] = useState(null)
@ -258,24 +255,13 @@ export default function ExercisePeekModal({
</div>
{top?.exerciseId != null ? (
<div style={{ padding: '0 1rem 1rem', flexShrink: 0 }}>
{returnContext ? (
<NavStateLink
to={`/exercises/${top.exerciseId}`}
returnContext={returnContext}
className="btn btn-secondary"
style={{ width: '100%', textDecoration: 'none', textAlign: 'center', display: 'block' }}
>
Vollständige Übungsseite öffnen
</NavStateLink>
) : (
<Link
to={`/exercises/${top.exerciseId}`}
className="btn btn-secondary"
style={{ width: '100%', textDecoration: 'none', textAlign: 'center', display: 'block' }}
>
Vollständige Übungsseite öffnen
</Link>
)}
<Link
to={`/exercises/${top.exerciseId}`}
className="btn btn-secondary"
style={{ width: '100%', textDecoration: 'none', textAlign: 'center', display: 'block' }}
>
Vollständige Übungsseite öffnen
</Link>
</div>
) : null}
</div>

View File

@ -1,12 +0,0 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { linkStateWithAppReturn } from '../utils/navReturnContext'
/** Router-Link mit appReturn im State (Rücksprung vom Zielscreen). */
export default function NavStateLink({ to, returnContext, state, children, ...rest }) {
return (
<Link to={to} state={linkStateWithAppReturn(returnContext, state)} {...rest}>
{children}
</Link>
)
}

View File

@ -1,31 +1,27 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { useFormEditorActions } from '../context/FormEditorActionsContext'
import PageReturnButton from './PageReturnButton'
/**
* Vollseiten-Editor: optional Zurück oben; FormActionBar fix unten (FormEditorBottomSlot).
* Mit actionConfig ist showReturn standardmäßig aus Rücksprung über Abbrechen / Speichern & Schließen.
* Vollseiten-Editor: Zurück/Titel oben; FormActionBar fix unten (alle Viewports via FormEditorBottomSlot).
*/
export default function PageFormEditorChrome({
title,
fallbackPath,
fallbackLabel,
backTo,
backLabel = 'Zurück',
actionConfig,
children,
testId,
showReturn = false,
}) {
useFormEditorActions(actionConfig)
return (
<div className="page-form-editor" data-testid={testId}>
<header className="page-form-editor__header">
{showReturn && fallbackPath && fallbackLabel ? (
<PageReturnButton
fallbackPath={fallbackPath}
fallbackLabel={fallbackLabel}
className="page-return-btn page-form-editor__back btn btn-secondary btn-small"
/>
{backTo ? (
<Link to={backTo} className="page-form-editor__back">
{backLabel}
</Link>
) : null}
<h1 className="page-form-editor__title">{title}</h1>
</header>

View File

@ -1,30 +0,0 @@
import React, { useMemo } from 'react'
import { ArrowLeft } from 'lucide-react'
import { useNavReturn } from '../hooks/useNavReturn'
/**
* App-typischer Zurück-Schalter (kein Router-Link) nutzt appReturn / History / Fallback.
*/
export default function PageReturnButton({
fallbackPath,
fallbackLabel,
className = 'page-return-btn btn btn-secondary btn-small',
}) {
const fallback = useMemo(
() =>
fallbackPath && fallbackLabel
? { path: fallbackPath, label: fallbackLabel }
: null,
[fallbackPath, fallbackLabel]
)
const { goBack, target } = useNavReturn(fallback)
if (!target?.label) return null
return (
<button type="button" className={className} onClick={goBack} aria-label={target.label}>
<ArrowLeft size={16} strokeWidth={2.25} className="page-return-btn__icon" aria-hidden />
<span>{target.label}</span>
</button>
)
}

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react'
import { useNavigate, useParams, Link, useLocation } from 'react-router-dom'
import { useNavigate, useParams, Link } from 'react-router-dom'
import api, { buildExerciseApiPayload } from '../../utils/api'
import { resolveExerciseMediaFileUrl, resolveMediaAssetFileUrl } from '../../utils/exerciseMediaUrl'
import RichTextEditor from '../RichTextEditor'
@ -27,14 +27,6 @@ import { readSlotProfilesV1, normalizeAdvanceMode, parseComboRepSeriesCountUi }
import { GripVertical } from 'lucide-react'
import UnsavedChangesPrompt from '../UnsavedChangesPrompt'
import PageFormEditorChrome from '../PageFormEditorChrome'
import { useNavReturn } from '../../hooks/useNavReturn'
import {
EXERCISES_LIST_PATH,
buildCurrentLocationReturnContext,
buildExercisesListReturnContext,
linkStateWithAppReturn,
preserveAppReturnOnNavigate,
} from '../../utils/navReturnContext'
import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../../hooks/useUnsavedChangesBlocker'
const INTENSITY_OPTIONS = [
@ -477,9 +469,6 @@ function MultiAssocBlock({ title, rows, setRows, options, idKey, emptyLabel }) {
function ExerciseFormPageRoot() {
const { id: routeId } = useParams()
const navigate = useNavigate()
const location = useLocation()
const exercisesListReturn = useMemo(() => buildExercisesListReturnContext(), [])
const { goBack } = useNavReturn(exercisesListReturn)
const { user } = useAuth()
const isSuperadmin = user?.role === 'superadmin'
const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
@ -952,16 +941,16 @@ function ExerciseFormPageRoot() {
setVariants((ex.variants || []).map(apiVariantToRow))
setFormDirty(false)
toast.success('Gespeichert.')
if (closeAfter) goBack()
if (closeAfter) navigate('/exercises')
return true
}
const created = await api.createExercise(payload)
setFormDirty(false)
toast.success('Übung angelegt.')
if (closeAfter) {
goBack()
navigate('/exercises')
} else if (!fromUnsavedDialog) {
preserveAppReturnOnNavigate(navigate, location, `/exercises/${created.id}/edit`, { replace: true })
navigate(`/exercises/${created.id}/edit`, { replace: true })
}
return true
} catch (err) {
@ -971,7 +960,7 @@ function ExerciseFormPageRoot() {
setSaving(false)
}
},
[exerciseId, formData, isEdit, navigate, location, toast, goBack],
[exerciseId, formData, isEdit, navigate, toast],
)
const handleSubmit = useCallback(
@ -990,6 +979,10 @@ function ExerciseFormPageRoot() {
[performSaveAttempt],
)
const goBackToList = useCallback(() => {
navigate('/exercises')
}, [navigate])
const actionConfig = useMemo(
() => ({
formId: 'exercise-form',
@ -997,11 +990,11 @@ function ExerciseFormPageRoot() {
isNew: !isEdit,
onSave: handleSubmit,
onSaveAndClose: handleSaveAndClose,
onCancel: goBack,
onCancel: goBackToList,
showSave: true,
showSaveAndClose: true,
}),
[saving, isEdit, handleSubmit, handleSaveAndClose, goBack],
[saving, isEdit, handleSubmit, handleSaveAndClose, goBackToList],
)
const handleUnsavedDialogSave = async () => {
@ -1205,17 +1198,15 @@ function ExerciseFormPageRoot() {
<PageFormEditorChrome
testId="exercise-form-page"
title={isEdit ? 'Übung bearbeiten' : 'Neue Übung'}
fallbackPath={EXERCISES_LIST_PATH}
fallbackLabel="Zurück zur Übungsliste"
backTo="/exercises"
backLabel="Übersicht"
actionConfig={actionConfig}
>
{isEdit ? (
<p style={{ margin: '0 0 12px' }}>
<Link
to={`/exercises/${exerciseId}`}
state={linkStateWithAppReturn(
buildCurrentLocationReturnContext(location, 'Zurück zur Bearbeitung')
)}
state={{ fromExerciseEdit: true }}
className="btn btn-secondary"
style={{ fontSize: '0.875rem' }}
>

View File

@ -5,7 +5,6 @@ export default function ExerciseListBulkToolbar({
bulkMaxIds,
onClearSelection,
onOpenBulkModal,
onOpenSaveModuleModal,
}) {
if (selectedCount < 1) return null
@ -15,9 +14,6 @@ export default function ExerciseListBulkToolbar({
<button type="button" className="btn btn-secondary btn-small" onClick={onClearSelection}>
Auswahl aufheben
</button>
<button type="button" className="btn btn-secondary btn-small" onClick={onOpenSaveModuleModal}>
Als Modul speichern
</button>
<button type="button" className="btn btn-primary btn-small" onClick={onOpenBulkModal}>
Massenänderung
</button>

View File

@ -1,10 +1,5 @@
import React, { useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import NavStateLink from '../NavStateLink'
import {
buildExercisesListReturnContext,
navigateWithAppReturn,
} from '../../utils/navReturnContext'
import React from 'react'
import { Link } from 'react-router-dom'
import {
Eye,
Pencil,
@ -136,75 +131,23 @@ function ExerciseCardScopeStatus({ exercise }) {
/**
* Kartenzeile in der Übungsliste (Fokus/Planung keine Virtualisierung im Grid, dafür content-visibility in app.css).
*/
export default function ExerciseListCard({
exercise,
user,
selectedIds,
toggleSelect,
onDelete,
onPeek,
selectionPinned = false,
}) {
const navigate = useNavigate()
const listReturn = useMemo(() => buildExercisesListReturnContext(), [])
export default function ExerciseListCard({ exercise, user, selectedIds, toggleSelect, onDelete }) {
const focusNames = exerciseFocusNames(exercise)
const styleNames = coerceApiNameList(exercise.style_direction_names)
const typeNames = coerceApiNameList(exercise.training_type_names)
const titleText = (exercise.title || 'Übung').replace(/"/g, '')
const openExercisePage = () =>
navigateWithAppReturn(navigate, `/exercises/${exercise.id}`, listReturn)
const handleBodyClick = (e) => {
if (e.target.closest('a, button, input, textarea, select, label, [role="button"]')) return
openExercisePage()
}
const handleBodyKeyDown = (e) => {
if (e.key !== 'Enter' && e.key !== ' ') return
if (e.target.closest('a, button, input, textarea, select, label, [role="button"]')) return
e.preventDefault()
openExercisePage()
}
return (
<div
className={[
exerciseCardClassName(exercise, user?.id),
selectionPinned ? 'exercise-card--selection-pinned' : '',
]
.filter(Boolean)
.join(' ')}
>
<div className={exerciseCardClassName(exercise, user?.id)}>
<div className="exercise-card-layout exercise-card-layout--grow">
<input
type="checkbox"
checked={selectedIds.has(Number(exercise.id))}
onChange={() => toggleSelect(exercise)}
aria-label={`${titleText}“ auswählen`}
onChange={() => toggleSelect(exercise.id)}
aria-label={`${(exercise.title || 'Übung').replace(/"/g, '')}“ auswählen`}
className="exercise-card-layout__check"
/>
<div
className="exercise-card__body exercise-card-body-flex exercise-card__body--clickable"
role="link"
tabIndex={0}
onClick={handleBodyClick}
onKeyDown={handleBodyKeyDown}
aria-label={`${titleText}“ öffnen`}
>
<div className="exercise-card__body exercise-card-body-flex">
<h3 className="exercise-card-title">
<NavStateLink
to={`/exercises/${exercise.id}`}
returnContext={listReturn}
onClick={(e) => e.stopPropagation()}
>
{exercise.title}
</NavStateLink>
{selectionPinned ? (
<span className="exercise-card__selection-badge" title="In Modul-Auswahl">
Auswahl
</span>
) : null}
<Link to={`/exercises/${exercise.id}`}>{exercise.title}</Link>
</h3>
<div className="exercise-card-tags">
{focusNames.map((name) => (
@ -248,24 +191,22 @@ export default function ExerciseListCard({
<ExerciseCardContentStats exercise={exercise} />
</div>
<div className="exercise-card__actions exercise-card__actions--icons">
<button
type="button"
<Link
to={`/exercises/${exercise.id}`}
className="exercise-card__icon-btn"
title="Vorschau"
aria-label={`${titleText}“ in Vorschau anzeigen`}
onClick={() => onPeek?.(exercise)}
title="Ansehen"
aria-label={`${(exercise.title || 'Übung').replace(/"/g, '')}“ ansehen`}
>
<Eye size={18} strokeWidth={2} aria-hidden />
</button>
<NavStateLink
</Link>
<Link
to={`/exercises/${exercise.id}/edit`}
returnContext={listReturn}
className="exercise-card__icon-btn"
title="Bearbeiten"
aria-label={`${titleText}“ bearbeiten`}
aria-label={`${(exercise.title || 'Übung').replace(/"/g, '')}“ bearbeiten`}
>
<Pencil size={18} strokeWidth={2} aria-hidden />
</NavStateLink>
</Link>
{canUserRequestExerciseDelete(user, exercise) ? (
<button
type="button"

View File

@ -1,4 +1,5 @@
import React, { useState, useEffect, useMemo, useCallback, useRef, lazy, Suspense } from 'react'
import { Link } from 'react-router-dom'
import api from '../../utils/api'
import { useAuth } from '../../context/AuthContext'
import { activeClubMemberships, getTenantClubDependencyKey } from '../../utils/activeClub'
@ -8,18 +9,8 @@ import ExerciseListFilterModal from './ExerciseListFilterModal'
import ExerciseListBulkModal from './ExerciseListBulkModal'
import ExerciseListSearchBar from './ExerciseListSearchBar'
import ExerciseListBulkToolbar from './ExerciseListBulkToolbar'
import SaveSelectedExercisesAsModuleModal from './SaveSelectedExercisesAsModuleModal'
import ExercisePeekModal from '../ExercisePeekModal'
import NavStateLink from '../NavStateLink'
import { buildExercisesListReturnContext } from '../../utils/navReturnContext'
import { buildExerciseListFilterChips } from '../../utils/exerciseListFilterChips'
import { applyDashboardExerciseListUrl, buildExerciseListQueryBase } from '../../utils/exerciseListQuery'
import { readExerciseListSessionState, writeExerciseListSessionState } from '../../utils/exerciseListSessionState'
import {
mergeSelectedWithListEntries,
normalizeSelectedEntries,
snapshotExerciseForSelection,
} from '../../utils/exerciseListSelection'
import { useExerciseListCatalogsAndQuery } from '../../hooks/useExerciseListCatalogsAndQuery'
import {
INITIAL_EXERCISE_LIST_FILTERS,
@ -60,7 +51,7 @@ function ExercisesListPageRoot() {
const [pageTab, setPageTab] = useState('list')
const prefsAppliedRef = useRef(false)
const [selectedEntries, setSelectedEntries] = useState(() => [])
const [selectedIds, setSelectedIds] = useState(() => new Set())
const [bulkModalOpen, setBulkModalOpen] = useState(false)
const [bulkVisibility, setBulkVisibility] = useState('')
const [bulkStatus, setBulkStatus] = useState('')
@ -75,22 +66,12 @@ function ExercisesListPageRoot() {
const [bulkTrainingTypeIds, setBulkTrainingTypeIds] = useState([])
const [bulkPatchTargetGroups, setBulkPatchTargetGroups] = useState(false)
const [bulkTargetGroupIds, setBulkTargetGroupIds] = useState([])
const [peekExercise, setPeekExercise] = useState(null)
const [saveModuleModalOpen, setSaveModuleModalOpen] = useState(false)
useEffect(() => {
if (!user?.id) return
if (prefsAppliedRef.current) return
const session = readExerciseListSessionState()
const merged = mergeExerciseListPrefsFromApi(user.exercise_list_prefs)
const filtersFromSession = session?.filters
setFilters(applyDashboardExerciseListUrl(filtersFromSession ?? merged))
if (session) {
setSearchInput(session.searchInput || '')
setAiSearchInput(session.aiSearchInput || '')
setMineOnly(session.mineOnly)
setSelectedEntries(normalizeSelectedEntries(session.selectedEntries))
}
setFilters(applyDashboardExerciseListUrl(merged))
try {
const sp = new URLSearchParams(window.location.search)
if (sp.get('mine') === '1' || sp.get('created_by_me') === '1') setMineOnly(true)
@ -100,17 +81,6 @@ function ExercisesListPageRoot() {
prefsAppliedRef.current = true
}, [user?.id, user?.exercise_list_prefs])
useEffect(() => {
if (!prefsAppliedRef.current) return
writeExerciseListSessionState({
filters,
searchInput,
aiSearchInput,
mineOnly,
selectedEntries,
})
}, [filters, searchInput, aiSearchInput, mineOnly, selectedEntries])
useEffect(() => {
if (!user?.id) prefsAppliedRef.current = false
}, [user?.id])
@ -150,20 +120,9 @@ function ExercisesListPageRoot() {
loadMore,
} = useExerciseListCatalogsAndQuery({ queryBase, pageTab, tenantClubDepKey })
const selectedIds = useMemo(
() => new Set(selectedEntries.map((e) => Number(e.id)).filter((id) => Number.isFinite(id) && id > 0)),
[selectedEntries]
)
const selectedExercisesDisplay = useMemo(
() => mergeSelectedWithListEntries(selectedEntries, exercises),
[selectedEntries, exercises]
)
const filterResultExercises = useMemo(
() => exercises.filter((e) => !selectedIds.has(Number(e.id))),
[exercises, selectedIds]
)
useEffect(() => {
setSelectedIds(new Set())
}, [queryBase])
const focusOptions = useMemo(
() =>
@ -256,49 +215,38 @@ function ExercisesListPageRoot() {
? Number(user.active_club_id)
: null
const toggleSelect = useCallback((exercise) => {
const snap = snapshotExerciseForSelection(exercise)
if (!snap) return
setSelectedEntries((prev) => {
const idx = prev.findIndex((e) => Number(e.id) === snap.id)
if (idx >= 0) return prev.filter((_, i) => i !== idx)
return [...prev, snap]
const toggleSelect = useCallback((id) => {
setSelectedIds((prev) => {
const n = new Set(prev)
const nid = Number(id)
if (Number.isNaN(nid)) return prev
if (n.has(nid)) n.delete(nid)
else n.add(nid)
return n
})
}, [])
const clearSelection = useCallback(() => setSelectedEntries([]), [])
const clearSelection = useCallback(() => setSelectedIds(new Set()), [])
const toggleSelectAllPage = useCallback(() => {
setSelectedEntries((prev) => {
const ids = new Set(prev.map((e) => Number(e.id)))
const pageIds = filterResultExercises.map((e) => Number(e.id))
const allSel = pageIds.length > 0 && pageIds.every((id) => ids.has(id))
setSelectedIds((prev) => {
const n = new Set(prev)
const allSel =
exercises.length > 0 && exercises.every((e) => n.has(Number(e.id)))
if (allSel) {
const remove = new Set(pageIds)
return prev.filter((e) => !remove.has(Number(e.id)))
exercises.forEach((e) => n.delete(Number(e.id)))
} else {
exercises.forEach((e) => n.add(Number(e.id)))
}
const next = [...prev]
for (const ex of filterResultExercises) {
const snap = snapshotExerciseForSelection(ex)
if (!snap || ids.has(snap.id)) continue
ids.add(snap.id)
next.push(snap)
}
return next
return n
})
}, [filterResultExercises])
}, [exercises])
const allOnPageSelected = useMemo(
() =>
filterResultExercises.length > 0 &&
filterResultExercises.every((e) => selectedIds.has(Number(e.id))),
[filterResultExercises, selectedIds]
() => exercises.length > 0 && exercises.every((e) => selectedIds.has(Number(e.id))),
[exercises, selectedIds]
)
const selectedExercisesInListOrder = selectedExercisesDisplay
const exercisesModuleReturnContext = useMemo(() => buildExercisesListReturnContext(), [])
const bulkVisibilityOptions = useMemo(() => {
const base = [
{ id: '', label: '— nicht ändern —' },
@ -314,7 +262,6 @@ function ExercisesListPageRoot() {
try {
await api.deleteExercise(exercise.id)
setExercises((prev) => prev.filter((e) => e.id !== exercise.id))
setSelectedEntries((prev) => prev.filter((e) => Number(e.id) !== Number(exercise.id)))
} catch (err) {
alert('Fehler beim Löschen: ' + err.message)
}
@ -481,13 +428,9 @@ function ExercisesListPageRoot() {
<div className="exercises-page__header">
<h1 className="page-title exercises-page__title">Übungen</h1>
{pageTab === 'list' ? (
<NavStateLink
to="/exercises/new"
returnContext={exercisesModuleReturnContext}
className="btn btn-primary"
>
<Link to="/exercises/new" className="btn btn-primary">
+ Neu
</NavStateLink>
</Link>
) : (
<span aria-hidden="true" />
)}
@ -537,7 +480,6 @@ function ExercisesListPageRoot() {
bulkMaxIds={BULK_MAX_IDS}
onClearSelection={clearSelection}
onOpenBulkModal={openBulkModal}
onOpenSaveModuleModal={() => setSaveModuleModalOpen(true)}
/>
<ExerciseListFilterModal
@ -598,96 +540,44 @@ function ExercisesListPageRoot() {
setBulkTargetGroupIds={setBulkTargetGroupIds}
/>
<SaveSelectedExercisesAsModuleModal
open={saveModuleModalOpen}
onClose={() => setSaveModuleModalOpen(false)}
selectedExercises={selectedExercisesInListOrder}
returnContext={exercisesModuleReturnContext}
onSuccess={clearSelection}
/>
<ExercisePeekModal
open={peekExercise != null}
exerciseId={peekExercise?.id}
titleFallback={peekExercise?.title}
onClose={() => setPeekExercise(null)}
/>
{listFetching && exercises.length === 0 && selectedEntries.length === 0 ? (
{listFetching && exercises.length === 0 ? (
<div className="card empty-state" style={{ padding: '2rem 1rem' }}>
<div className="spinner" />
<p className="muted" style={{ marginTop: '12px' }}>
Lade Übungen
</p>
</div>
) : exercises.length === 0 && selectedEntries.length === 0 ? (
) : exercises.length === 0 ? (
<div className="card">
<p className="exercises-empty-text">Keine Übungen gefunden.</p>
</div>
) : (
<>
{selectedEntries.length > 0 ? (
<section className="exercises-selection-section" data-testid="exercises-selection-section">
<div className="exercises-selection-section__head">
<h2 className="exercises-selection-section__title">Auswahl ({selectedEntries.length})</h2>
<p className="exercises-selection-section__hint">
Bleibt sichtbar, auch wenn du den Filter wechselst ideal für die Modul-Zusammenstellung.
</p>
</div>
<div className="exercises-list-grid exercises-list-grid--selection">
{selectedExercisesDisplay.map((exercise) => (
<ExerciseListCard
key={`sel-${exercise.id}`}
exercise={exercise}
user={user}
selectedIds={selectedIds}
toggleSelect={toggleSelect}
onDelete={handleDelete}
onPeek={(ex) => setPeekExercise({ id: ex.id, title: ex.title })}
selectionPinned
/>
))}
</div>
</section>
{listFetching ? (
<p className="exercises-meta-line exercises-meta-line--muted">Aktualisiere Treffer</p>
) : null}
{filterResultExercises.length === 0 ? (
selectedEntries.length > 0 ? (
<p className="exercises-meta-line exercises-meta-line--muted">
Keine weiteren Treffer für den aktuellen Filter.
</p>
) : null
) : (
<>
{listFetching ? (
<p className="exercises-meta-line exercises-meta-line--muted">Aktualisiere Treffer</p>
) : null}
<p className="exercises-meta-line">
{filterResultExercises.length} Treffer
{selectedEntries.length > 0 ? ' (ohne bereits Ausgewählte)' : ''}
{hasMore ? ' · es gibt weitere Einträge' : ''}
</p>
<div className="exercises-list-grid" data-testid="exercises-list-grid">
{filterResultExercises.map((exercise) => (
<ExerciseListCard
key={exercise.id}
exercise={exercise}
user={user}
selectedIds={selectedIds}
toggleSelect={toggleSelect}
onDelete={handleDelete}
onPeek={(ex) => setPeekExercise({ id: ex.id, title: ex.title })}
/>
))}
</div>
{hasMore && (
<div className="exercises-load-more">
<button type="button" className="btn btn-secondary" disabled={loadingMore} onClick={loadMore}>
{loadingMore ? 'Laden…' : 'Mehr laden'}
</button>
</div>
)}
</>
<p className="exercises-meta-line">
{exercises.length} angezeigt
{hasMore ? ' · es gibt weitere Einträge' : ''}
</p>
<div className="exercises-list-grid" data-testid="exercises-list-grid">
{exercises.map((exercise) => (
<ExerciseListCard
key={exercise.id}
exercise={exercise}
user={user}
selectedIds={selectedIds}
toggleSelect={toggleSelect}
onDelete={handleDelete}
/>
))}
</div>
{hasMore && (
<div className="exercises-load-more">
<button type="button" className="btn btn-secondary" disabled={loadingMore} onClick={loadMore}>
{loadingMore ? 'Laden…' : 'Mehr laden'}
</button>
</div>
)}
</>
)}

View File

@ -1,408 +0,0 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import FormActionBar from '../FormActionBar'
import FormModalOverlay from '../FormModalOverlay'
import api from '../../utils/api'
import { useToast } from '../../context/ToastContext'
import { useAuth } from '../../context/AuthContext'
import { activeClubMemberships, getDefaultClubIdForGovernanceForms } from '../../utils/activeClub'
import { hydrateExercisePlanningRow } from '../../utils/trainingUnitSectionsForm'
import { buildRowsPayload, moduleItemToPayload } from '../../utils/exerciseListSelection'
import { navigateWithAppReturn } from '../../utils/navReturnContext'
/**
* Erstellt ein Trainingsmodul aus per Checkbox ausgewählten Übungen (Reihenfolge = Auswahlreihenfolge).
* Optional: Positionen an ein bestehendes Modul anfügen.
*/
export default function SaveSelectedExercisesAsModuleModal({
open,
onClose,
/** @type {Array<{ id: number, title?: string }>} */
selectedExercises,
/** Return-Kontext für Modul-Editor (z. B. Übungsliste) */
returnContext,
onSuccess,
}) {
const navigate = useNavigate()
const toast = useToast()
const { user } = useAuth()
const memberClubs = useMemo(() => activeClubMemberships(user?.clubs), [user?.clubs])
const roleLc = String(user?.role || '').toLowerCase()
const isSuperadmin = roleLc === 'superadmin'
const [loading, setLoading] = useState(false)
const [submitting, setSubmitting] = useState(false)
const [loadErr, setLoadErr] = useState('')
/** @type {[Array<object>, Function]} */
const [rows, setRows] = useState([])
const [moduleOptions, setModuleOptions] = useState([])
const [modulesLoading, setModulesLoading] = useState(false)
const [targetMode, setTargetMode] = useState('new')
const [existingModuleId, setExistingModuleId] = useState('')
const [title, setTitle] = useState('')
const [visibility, setVisibility] = useState('club')
const [clubId, setClubId] = useState('')
const resetLocal = useCallback(() => {
setLoadErr('')
setRows([])
setModuleOptions([])
setTargetMode('new')
setExistingModuleId('')
setTitle('')
setVisibility('club')
setClubId('')
}, [])
useEffect(() => {
if (!open) {
resetLocal()
return
}
const defaultClub = getDefaultClubIdForGovernanceForms(user)
if (defaultClub != null) setClubId(String(defaultClub))
else if (memberClubs.length === 1) setClubId(String(memberClubs[0].id))
const count = selectedExercises?.length || 0
setTitle(count > 0 ? `Modul · ${count} Übung${count === 1 ? '' : 'en'}` : '')
if (!count) {
setRows([])
return
}
let cancelled = false
setLoading(true)
setLoadErr('')
;(async () => {
try {
const hydrated = []
for (const ex of selectedExercises) {
const row = await hydrateExercisePlanningRow({ id: ex.id, title: ex.title })
if (row) hydrated.push(row)
}
if (cancelled) return
if (!hydrated.length) {
setLoadErr('Ausgewählte Übungen konnten nicht geladen werden.')
setRows([])
return
}
setRows(hydrated)
} catch (e) {
if (!cancelled) {
setLoadErr(e.message || 'Übungen konnten nicht geladen werden')
setRows([])
}
} finally {
if (!cancelled) setLoading(false)
}
})()
return () => {
cancelled = true
}
}, [open, selectedExercises, user, memberClubs.length, resetLocal])
useEffect(() => {
if (!open) return
let cancelled = false
setModulesLoading(true)
api
.listTrainingModules()
.then((list) => {
if (cancelled) return
setModuleOptions(Array.isArray(list) ? list : [])
})
.catch(() => {
if (!cancelled) setModuleOptions([])
})
.finally(() => {
if (!cancelled) setModulesLoading(false)
})
return () => {
cancelled = true
}
}, [open])
const updateRow = (idx, patch) => {
setRows((prev) => prev.map((row, i) => (i === idx ? { ...row, ...patch } : row)))
}
const handleSubmit = async (e) => {
e.preventDefault()
if (submitting || !rows.length) return
const newItemsPayload = buildRowsPayload(rows)
if (!newItemsPayload.length) {
toast.error('Keine gültigen Übungspositionen.')
return
}
setSubmitting(true)
try {
if (targetMode === 'append') {
const mid = parseInt(existingModuleId, 10)
if (!Number.isFinite(mid) || mid < 1) {
toast.error('Bitte ein bestehendes Modul wählen.')
return
}
const existing = await api.getTrainingModule(mid)
const existingItems = Array.isArray(existing?.items) ? existing.items : []
const merged = [
...existingItems.map((row, idx) => moduleItemToPayload(row, idx)).filter(Boolean),
...newItemsPayload.map((row, idx) => ({ ...row, order_index: existingItems.length + idx })),
]
await api.updateTrainingModule(mid, { items: merged })
toast.success(`${newItemsPayload.length} Übung(en) an Modul angefügt.`)
navigateWithAppReturn(navigate, `/planning/training-modules/${mid}`, returnContext)
onSuccess?.()
onClose()
return
}
const tit = (title || '').trim()
if (!tit) {
toast.error('Bitte einen Modultitel angeben.')
return
}
let cid = visibility === 'club' && clubId ? parseInt(clubId, 10) : null
if (visibility === 'club' && (!Number.isFinite(cid) || cid < 1)) {
const fallback = getDefaultClubIdForGovernanceForms(user)
if (Number.isFinite(fallback) && fallback > 0) cid = fallback
}
if (visibility === 'club' && (!Number.isFinite(cid) || cid < 1)) {
toast.error('Bitte einen Verein wählen (Sichtbarkeit „Verein“).')
return
}
if (visibility !== 'club') cid = null
const created = await api.createTrainingModule({
title: tit,
visibility,
club_id: cid,
items: newItemsPayload,
})
toast.success('Trainingsmodul gespeichert.')
if (created?.id) {
navigateWithAppReturn(navigate, `/planning/training-modules/${created.id}`, returnContext)
}
onSuccess?.()
onClose()
} catch (err) {
toast.error(err.message || 'Speichern fehlgeschlagen')
} finally {
setSubmitting(false)
}
}
if (!open) return null
const saveLabel = targetMode === 'append' ? 'An Modul anfügen' : 'Modul anlegen'
return (
<FormModalOverlay open={open} raised onBackdropClick={onClose}>
<div className="card modal-panel--form modal-panel--narrow">
<h2 className="modal-panel__title">Auswahl als Trainingsmodul</h2>
<p className="modal-panel__intro">
Die gewählten Übungen werden in der <strong>Reihenfolge der Auswahl</strong> übernommen. Pro Übung kann
optional eine Variante gesetzt werden.
</p>
{loading ? (
<p style={{ color: 'var(--text2)' }}>Laden </p>
) : loadErr ? (
<p style={{ color: 'var(--danger)' }}>{loadErr}</p>
) : rows.length === 0 ? (
<p style={{ color: 'var(--text2)' }}>Keine Übungen ausgewählt.</p>
) : (
<form id="save-selected-module-form" className="modal-form-shell" onSubmit={handleSubmit}>
<div className="modal-form-shell__body">
<div className="form-row" style={{ marginBottom: '1rem' }}>
<label className="form-label">Ziel</label>
<select
className="form-input"
value={targetMode}
onChange={(e) => setTargetMode(e.target.value)}
>
<option value="new">Neues Modul anlegen</option>
<option value="append">Bestehendes Modul erweitern</option>
</select>
</div>
{targetMode === 'append' ? (
<div className="form-row" style={{ marginBottom: '1rem' }}>
<label className="form-label">Bestehendes Modul</label>
{modulesLoading ? (
<p style={{ color: 'var(--text2)', margin: 0 }}>Module laden </p>
) : moduleOptions.length === 0 ? (
<p style={{ color: 'var(--text2)', margin: 0 }}>
Keine bearbeitbaren Module gefunden. Lege zuerst ein neues Modul an.
</p>
) : (
<select
className="form-input"
value={existingModuleId}
onChange={(e) => setExistingModuleId(e.target.value)}
required
>
<option value=""> Modul wählen </option>
{moduleOptions.map((m) => (
<option key={m.id} value={String(m.id)}>
{(m.title || '').trim() || `Modul #${m.id}`}
{m.items_count != null ? ` (${m.items_count} Pos.)` : ''}
</option>
))}
</select>
)}
<p style={{ margin: '6px 0 0', fontSize: '0.82rem', color: 'var(--text3)', lineHeight: 1.45 }}>
Die neuen Übungen werden <strong>ans Ende</strong> des gewählten Moduls angefügt.
</p>
</div>
) : (
<>
<div style={{ marginBottom: '1rem' }}>
<label className="form-label">Modultitel</label>
<input
className="form-input"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
placeholder="z. B. Technikblock Grundlagen"
/>
</div>
<div className="form-row" style={{ marginBottom: '0.85rem' }}>
<label className="form-label">Sichtbarkeit</label>
<select
className="form-input"
value={visibility}
onChange={(e) => {
const v = e.target.value
setVisibility(v)
if (v === 'club' && !clubId) {
const fallback = getDefaultClubIdForGovernanceForms(user)
if (fallback != null) setClubId(String(fallback))
}
}}
>
<option value="private">Privat</option>
<option value="club">Verein</option>
{isSuperadmin ? <option value="official">Offiziell</option> : null}
</select>
</div>
{visibility === 'club' ? (
<div className="form-row" style={{ marginBottom: '1rem' }}>
<label className="form-label">Verein</label>
<select className="form-input" value={clubId} onChange={(e) => setClubId(e.target.value)}>
<option value=""> Verein wählen </option>
{memberClubs.map((cl) => (
<option key={cl.id} value={String(cl.id)}>
{cl.name || `Verein #${cl.id}`}
</option>
))}
</select>
</div>
) : null}
</>
)}
<div
className="card"
style={{
marginBottom: '1rem',
padding: '10px 12px',
maxHeight: 'min(320px, 45vh)',
overflowY: 'auto',
background: 'var(--surface2)',
}}
>
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
{rows.map((row, idx) => {
const isCombo = row.exercise_kind === 'combination'
const variants = Array.isArray(row.variants) ? row.variants : []
return (
<li
key={`${row.exercise_id}-${idx}`}
style={{
padding: '10px 0',
borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
}}
>
<div style={{ fontWeight: 600, color: 'var(--text1)', fontSize: '0.92rem', marginBottom: 8 }}>
{idx + 1}. {(row.exercise_title || '').trim() || `Übung #${row.exercise_id}`}
{isCombo ? (
<span
style={{
marginLeft: 8,
fontSize: '0.75rem',
fontWeight: 600,
color: 'var(--accent-dark)',
}}
>
Kombination
</span>
) : null}
</div>
{!isCombo && variants.length > 0 ? (
<div className="form-row" style={{ marginBottom: 0 }}>
<label className="form-label" style={{ fontSize: '0.78rem' }}>
Variante
</label>
<select
className="form-input"
value={String(row.exercise_variant_id ?? '')}
onChange={(e) => updateRow(idx, { exercise_variant_id: e.target.value })}
>
<option value="">Standard (keine Variante)</option>
{variants.map((v) => (
<option key={v.id} value={String(v.id)}>
{(v.variant_name || v.name || '').trim() || `Variante #${v.id}`}
</option>
))}
</select>
</div>
) : !isCombo ? (
<div style={{ fontSize: '0.78rem', color: 'var(--text3)' }}>Keine Varianten hinterlegt</div>
) : null}
</li>
)
})}
</ul>
</div>
</div>
<FormActionBar
placement="bottom"
variant="modal"
formId="save-selected-module-form"
saving={submitting}
showSave={false}
saveAndCloseLabel={saveLabel}
saveAndCloseShortLabel={targetMode === 'append' ? 'Anfügen' : 'Anlegen'}
onCancel={onClose}
/>
</form>
)}
{loading ? (
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '1rem' }}>
<button type="button" className="btn btn-secondary" onClick={onClose}>
Abbrechen
</button>
</div>
) : null}
{!loading && (loadErr || rows.length === 0) ? (
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '1rem' }}>
<button type="button" className="btn btn-secondary" onClick={onClose}>
Schließen
</button>
</div>
) : null}
</div>
</FormModalOverlay>
)
}

View File

@ -7,7 +7,6 @@ import { useToast } from '../../context/ToastContext'
import { useAuth } from '../../context/AuthContext'
import { activeClubMemberships } from '../../utils/activeClub'
import { collectExercisePlacementsForModule } from '../../utils/trainingPlanModuleFromUnit'
import { navigateWithAppReturn } from '../../utils/navReturnContext'
/**
* Erstellt ein Trainingsmodul aus den Übungen einer gespeicherten Trainingseinheit (Mehrfachauswahl).
@ -17,7 +16,6 @@ export default function SaveExercisesAsModuleModal({
onClose,
unitId,
planningModalClubId,
returnContext,
onSuccess,
}) {
const navigate = useNavigate()
@ -136,7 +134,7 @@ export default function SaveExercisesAsModuleModal({
})
toast.success('Trainingsmodul gespeichert.')
if (created?.id) {
navigateWithAppReturn(navigate, `/planning/training-modules/${created.id}`, returnContext)
navigate(`/planning/training-modules/${created.id}`)
}
onSuccess?.()
onClose()

View File

@ -6,7 +6,6 @@ import api from '../../utils/api'
import { useToast } from '../../context/ToastContext'
import { useAuth } from '../../context/AuthContext'
import { activeClubMemberships } from '../../utils/activeClub'
import { navigateWithAppReturn } from '../../utils/navReturnContext'
/**
* Übernimmt den gespeicherten Ablauf einer geplanten Trainingseinheit in ein Rahmenprogramm (neu oder bestehend, Slot wählbar).
@ -16,7 +15,6 @@ export default function TrainingPublishToFrameworkModal({
onClose,
unitId,
planningModalClubId,
returnContext,
onSuccess,
}) {
const navigate = useNavigate()
@ -133,7 +131,7 @@ export default function TrainingPublishToFrameworkModal({
})
toast.success('Ablauf wurde im Rahmenprogramm gespeichert.')
if (created?.id) {
navigateWithAppReturn(navigate, `/planning/framework-programs/${created.id}`, returnContext)
navigate(`/planning/framework-programs/${created.id}`)
}
onSuccess?.()
resetAndClose()
@ -179,7 +177,7 @@ export default function TrainingPublishToFrameworkModal({
const updated = await api.publishTrainingUnitToFramework(unitId, payload)
toast.success('Ablauf wurde im Rahmenprogramm gespeichert.')
if (updated?.id) {
navigateWithAppReturn(navigate, `/planning/framework-programs/${updated.id}`, returnContext)
navigate(`/planning/framework-programs/${updated.id}`)
}
onSuccess?.()
resetAndClose()

View File

@ -1,19 +0,0 @@
import { useCallback, useMemo } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { goNavReturn, resolveNavReturnTarget } from '../utils/navReturnContext'
/**
* @param {{ path: string, label: string } | null | undefined} fallback
*/
export function useNavReturn(fallback) {
const location = useLocation()
const navigate = useNavigate()
const target = useMemo(
() => resolveNavReturnTarget(location, fallback),
[location, fallback]
)
const goBack = useCallback(() => {
goNavReturn(navigate, location, fallback)
}, [navigate, location, fallback])
return { goBack, target }
}

View File

@ -1,14 +1,9 @@
import React, { useState, useEffect, useMemo } from 'react'
import { Link } from 'react-router-dom'
import { CalendarCheck, ClipboardList, FilePenLine, Library } from 'lucide-react'
import NavStateLink from '../components/NavStateLink'
import { useAuth } from '../context/AuthContext'
import api from '../utils/api'
import { getTenantClubDependencyKey } from '../utils/activeClub'
import {
buildDashboardReturnContext,
buildTrainingRunReturnContext,
} from '../utils/navReturnContext'
import EmailVerificationBanner from '../components/EmailVerificationBanner'
import DashboardTrainingVisibilityWidget from '../components/DashboardTrainingVisibilityWidget'
import DashboardOrgInboxWidget from '../components/DashboardOrgInboxWidget'
@ -31,7 +26,6 @@ function Dashboard() {
const [dashboardKpisErr, setDashboardKpisErr] = useState(null)
const { user, loading: authLoading } = useAuth()
const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
const dashboardReturn = useMemo(() => buildDashboardReturnContext(), [])
useEffect(() => {
if (!user?.id) {
@ -172,20 +166,14 @@ function Dashboard() {
<ul className="dashboard-preview-card__list">
{phase0Stats.draftPreview.map((ex) => (
<li key={ex.id}>
<NavStateLink
to={`/exercises/${ex.id}/edit`}
returnContext={dashboardReturn}
className="dashboard-preview-card__link"
>
<Link to={`/exercises/${ex.id}/edit`} className="dashboard-preview-card__link">
{ex.title}
</NavStateLink>
</Link>
</li>
))}
</ul>
<p style={{ margin: '0.75rem 0 0', fontSize: '0.86rem' }}>
<NavStateLink to={draftsHref} returnContext={dashboardReturn}>
Alle Entwürfe in der Übersicht
</NavStateLink>
<Link to={draftsHref}>Alle Entwürfe in der Übersicht</Link>
</p>
</div>
) : null}
@ -217,13 +205,9 @@ function Dashboard() {
<ul className="dashboard-preview-card__list">
{trainingHome.upcoming.map((u) => (
<li key={u.id}>
<NavStateLink
to={`/planning/run/${u.id}`}
returnContext={buildTrainingRunReturnContext(u.id) || dashboardReturn}
className="dashboard-preview-card__link"
>
<Link to={`/planning/run/${u.id}`} className="dashboard-preview-card__link">
{unitWhenLabel(u)}
</NavStateLink>
</Link>
{u.group_name ? (
<span className="dashboard-preview-card__meta">{`${u.group_name}`}</span>
) : null}
@ -253,13 +237,9 @@ function Dashboard() {
const snippet = (u.trainer_notes || u.notes || '').trim().slice(0, 120)
return (
<li key={`n-${u.id}`}>
<NavStateLink
to={`/planning/run/${u.id}`}
returnContext={buildTrainingRunReturnContext(u.id) || dashboardReturn}
className="dashboard-preview-card__link"
>
<Link to={`/planning/run/${u.id}`} className="dashboard-preview-card__link">
{unitWhenLabel(u)}
</NavStateLink>
</Link>
{u.group_name ? (
<span className="dashboard-preview-card__meta">{` · ${u.group_name}`}</span>
) : null}
@ -286,13 +266,9 @@ function Dashboard() {
<ul className="dashboard-preview-card__list">
{trainingHome.reviewPending.map((u) => (
<li key={`r-${u.id}`}>
<NavStateLink
to={`/planning/units/${u.id}/edit`}
returnContext={dashboardReturn}
className="dashboard-preview-card__link"
>
<Link to={`/planning/units/${u.id}/edit`} className="dashboard-preview-card__link">
{(u.actual_date || u.planned_date || '').toString().slice(0, 10) || 'Datum'}
</NavStateLink>
</Link>
{u.group_name ? (
<span className="dashboard-preview-card__meta">{`${u.group_name}`}</span>
) : null}

View File

@ -1,12 +1,6 @@
import React, { useEffect, useMemo, useState } from 'react'
import { useParams, useLocation } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'
import api from '../utils/api'
import PageReturnButton from '../components/PageReturnButton'
import NavStateLink from '../components/NavStateLink'
import {
EXERCISES_LIST_PATH,
buildCurrentLocationReturnContext,
} from '../utils/navReturnContext'
import ExerciseRichTextBlock from '../components/ExerciseRichTextBlock'
import ExerciseAttachmentMediaStrip from '../components/ExerciseAttachmentMediaStrip'
import CombinationPlanBracket from '../components/CombinationPlanBracket'
@ -60,11 +54,8 @@ function metaParts(exercise) {
function ExerciseDetailPage() {
const { id } = useParams()
const navigate = useNavigate()
const location = useLocation()
const editReturnContext = useMemo(
() => buildCurrentLocationReturnContext(location, 'Zurück zur Übung'),
[location]
)
const [exercise, setExercise] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
@ -107,10 +98,9 @@ function ExerciseDetailPage() {
<div className="card">
<h2>Übung</h2>
<p style={{ color: 'var(--danger)' }}>{msg}</p>
<PageReturnButton
fallbackPath={EXERCISES_LIST_PATH}
fallbackLabel="Zurück zur Übungsliste"
/>
<button type="button" className="btn btn-secondary" onClick={() => navigate('/exercises')}>
Zur Übersicht
</button>
</div>
</div>
)
@ -119,6 +109,7 @@ function ExerciseDetailPage() {
if (!exercise) return null
const meta = metaParts(exercise)
const fromExerciseEdit = location.state?.fromExerciseEdit === true
const isCombinationDetail =
(exercise.exercise_kind || '').toLowerCase().trim() === 'combination' &&
@ -140,19 +131,13 @@ function ExerciseDetailPage() {
onClose={() => setEmbeddedPeekExerciseId(null)}
/>
<div style={{ marginBottom: '12px', display: 'flex', justifyContent: 'space-between', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
<PageReturnButton
fallbackPath={EXERCISES_LIST_PATH}
fallbackLabel="Zurück zur Übungsliste"
className="page-return-btn btn btn-secondary btn-small"
/>
<button type="button" className="btn btn-secondary" onClick={() => navigate('/exercises')}>
Übersicht
</button>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: 'auto' }}>
<NavStateLink
to={`/exercises/${exercise.id}/edit`}
returnContext={editReturnContext}
className="btn btn-primary"
>
Bearbeiten
</NavStateLink>
<Link to={`/exercises/${exercise.id}/edit`} className="btn btn-primary">
{fromExerciseEdit ? 'Zurück zur Bearbeitung' : 'Bearbeiten'}
</Link>
</div>
</div>

View File

@ -1,7 +1,5 @@
import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
import { Link } from 'react-router-dom'
import NavStateLink from '../components/NavStateLink'
import { buildMediaLibraryReturnContext } from '../utils/navReturnContext'
import {
LayoutGrid,
List,
@ -110,23 +108,21 @@ function parseTagsInput(s) {
.filter(Boolean)
}
function MediaUsageBlock({ usage, compact, returnContext }) {
function MediaUsageBlock({ usage, compact }) {
const u = usage || { exercises: [], training_units: [] }
const ex = u.exercises || []
const tus = u.training_units || []
if (!ex.length && !tus.length)
return <span className="media-library__hint">{compact ? '—' : 'Noch in keiner Übung / Einheit verknüpft.'}</span>
const LinkOrNav = returnContext ? NavStateLink : Link
const linkExtra = returnContext ? { returnContext } : {}
return (
<div className="media-library__usage-links">
{ex.length ? (
<div>
<strong>Übungen</strong>{' '}
{ex.map((e) => (
<LinkOrNav key={e.id} to={`/exercises/${e.id}`} title={e.title} {...linkExtra}>
<Link key={e.id} to={`/exercises/${e.id}`} title={e.title}>
{e.title.length > (compact ? 18 : 40) ? `${e.title.slice(0, compact ? 18 : 40)}` : e.title}
</LinkOrNav>
</Link>
))}
</div>
) : null}
@ -138,9 +134,9 @@ function MediaUsageBlock({ usage, compact, returnContext }) {
[t.planned_date, (t.group_name || '').trim()].filter(Boolean).join(' · ') || `Einheit #${t.id}`
const short = label.length > (compact ? 20 : 36) ? `${label.slice(0, compact ? 20 : 36)}` : label
return (
<LinkOrNav key={t.id} to={`/planning/units/${t.id}/edit`} title={label} {...linkExtra}>
<Link key={t.id} to={`/planning/units/${t.id}/edit`} title={label}>
{short}
</LinkOrNav>
</Link>
)
})}
</div>
@ -301,7 +297,6 @@ export default function MediaLibraryPage() {
const isSuperadmin = user?.role === 'superadmin'
const hasClubOrgAdmin = activeClubMemberships(user?.clubs).some((c) => (c.roles || []).includes('club_admin'))
const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
const mediaLibraryReturn = useMemo(() => buildMediaLibraryReturnContext(), [])
const archiveVisOptions = useMemo(
() => VIS_OPTIONS.filter((o) => o.value !== 'official' || isSuperadmin),
@ -1009,7 +1004,7 @@ export default function MediaLibraryPage() {
))}
</div>
) : null}
<MediaUsageBlock usage={it.usage} compact returnContext={mediaLibraryReturn} />
<MediaUsageBlock usage={it.usage} compact />
{(it.lifecycle_state || 'active') === 'active' && !it.legal_hold_active && (
<button
type="button"
@ -1079,7 +1074,7 @@ export default function MediaLibraryPage() {
{(it.tags || []).length ? (it.tags || []).join(', ') : '—'}
</td>
<td className="media-library__td-usage media-library__td-sub">
<MediaUsageBlock usage={it.usage} compact returnContext={mediaLibraryReturn} />
<MediaUsageBlock usage={it.usage} compact />
</td>
{viewer?.show_club_meta ? (
<td className="media-library__td-sub">{it.club_name || it.club_id || '—'}</td>
@ -1338,7 +1333,7 @@ export default function MediaLibraryPage() {
<div className="media-library__meta-block">
<span className="media-library__meta-k">Verwendung</span>
<div className="media-library__meta-v">
<MediaUsageBlock usage={modal.usage} compact={false} returnContext={mediaLibraryReturn} />
<MediaUsageBlock usage={modal.usage} compact={false} />
</div>
</div>

View File

@ -1,7 +1,5 @@
import { Link } from 'react-router-dom'
import { Scale } from 'lucide-react'
import PageReturnButton from '../components/PageReturnButton'
import { SETTINGS_PATH } from '../utils/navReturnContext'
const LEGAL_LINKS = [
{ to: '/impressum', label: 'Impressum', description: 'Angaben zum Betreiber und Verantwortlichen' },
@ -14,7 +12,9 @@ function SettingsLegalPage() {
return (
<div className="page-padding app-page" style={{ padding: '1rem' }}>
<p style={{ marginBottom: '0.75rem' }}>
<PageReturnButton fallbackPath={SETTINGS_PATH} fallbackLabel="Zurück zu Einstellungen" />
<Link to="/settings" style={{ fontSize: '0.9rem' }}>
Zurück zu Einstellungen
</Link>
</p>
<h1 style={{ marginBottom: '0.35rem', fontSize: '1.5rem' }}>Rechtliches</h1>

View File

@ -1,8 +1,7 @@
import { useState, useEffect } from 'react'
import PageReturnButton from '../components/PageReturnButton'
import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import api from '../utils/api'
import { SETTINGS_PATH } from '../utils/navReturnContext'
/**
* Technische System- und Build-Infos (ehemals Dashboard) unter Einstellungen für Betrieb/Diagnose.
@ -34,7 +33,9 @@ function SettingsSystemInfoPage() {
return (
<div className="page-padding app-page" style={{ padding: '1rem' }}>
<p style={{ marginBottom: '0.75rem' }}>
<PageReturnButton fallbackPath={SETTINGS_PATH} fallbackLabel="Zurück zu Einstellungen" />
<Link to="/settings" style={{ fontSize: '0.9rem' }}>
Zurück zu Einstellungen
</Link>
</p>
<h1 style={{ marginBottom: '0.35rem', fontSize: '1.5rem' }}>Systeminformationen</h1>
<p

View File

@ -6,11 +6,6 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import api from '../utils/api'
import ExerciseFullContent from '../components/ExerciseFullContent'
import ExercisePeekModal from '../components/ExercisePeekModal'
import PageReturnButton from '../components/PageReturnButton'
import {
buildPlanningHubFallbackReturnContext,
buildTrainingRunReturnContext,
} from '../utils/navReturnContext'
import {
COACH_ENTRY_BRANCH_GATE,
buildCoachSavePlanPayload,
@ -189,8 +184,6 @@ export default function TrainingCoachPage() {
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams()
const idNum = unitId ? parseInt(unitId, 10) : NaN
const planningReturn = useMemo(() => buildPlanningHubFallbackReturnContext(), [])
const runReturn = useMemo(() => buildTrainingRunReturnContext(unitId), [unitId])
const coachFocusResetRef = useRef(null)
@ -674,11 +667,9 @@ export default function TrainingCoachPage() {
return (
<div className="card" style={{ margin: '1rem', padding: '1.5rem' }}>
<p style={{ marginBottom: '1rem' }}>{loadError || 'Nicht gefunden.'}</p>
<PageReturnButton
fallbackPath={planningReturn.path}
fallbackLabel={planningReturn.label}
className="page-return-btn btn btn-secondary btn-small"
/>
<button type="button" className="btn btn-secondary" onClick={() => navigate('/planning')}>
Zur Planung
</button>
</div>
)
}
@ -689,7 +680,6 @@ export default function TrainingCoachPage() {
key={candidatePeekId != null ? String(candidatePeekId) : 'coach-peek-closed'}
open={candidatePeekId != null}
exerciseId={candidatePeekId}
returnContext={runReturn}
onClose={() => setCandidatePeekId(null)}
/>
<nav
@ -707,11 +697,9 @@ export default function TrainingCoachPage() {
<button type="button" className="btn btn-secondary" onClick={() => navigate(`/planning/run/${unitId}`)}>
Zur Planansicht
</button>
<PageReturnButton
fallbackPath={planningReturn.path}
fallbackLabel={planningReturn.label}
className="page-return-btn btn btn-secondary btn-small"
/>
<button type="button" className="btn btn-secondary" onClick={() => navigate('/planning')}>
Planung
</button>
{streamFocusOptions.length > 0 ? (
<label
className="no-print"

View File

@ -7,12 +7,6 @@ import TrainingUnitSectionsEditor from '../components/TrainingUnitSectionsEditor
import PageSectionNav from '../components/PageSectionNav'
import FormActionBar from '../components/FormActionBar'
import { useToast } from '../context/ToastContext'
import { useNavReturn } from '../hooks/useNavReturn'
import {
FRAMEWORK_PROGRAMS_LIST_PATH,
buildFrameworkProgramsListReturnContext,
preserveAppReturnOnNavigate,
} from '../utils/navReturnContext'
import UnsavedChangesPrompt from '../components/UnsavedChangesPrompt'
import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../hooks/useUnsavedChangesBlocker'
import {
@ -218,8 +212,6 @@ export default function TrainingFrameworkProgramEditPage() {
const { id: idParam } = useParams()
const location = useLocation()
const navigate = useNavigate()
const frameworkListReturn = useMemo(() => buildFrameworkProgramsListReturnContext(), [])
const { goBack } = useNavReturn(frameworkListReturn)
/** Route `…/framework-programs/new` hat kein dynamisches `:id` — useParams ist dann leer. */
const isNew = /\/framework-programs\/new\/?$/.test(location.pathname)
@ -336,7 +328,7 @@ export default function TrainingFrameworkProgramEditPage() {
}
const fid = parseInt(idParam, 10)
if (Number.isNaN(fid)) {
navigate(FRAMEWORK_PROGRAMS_LIST_PATH, { replace: true })
navigate('/planning/framework-programs', { replace: true })
return
}
setLoading(true)
@ -350,7 +342,7 @@ export default function TrainingFrameworkProgramEditPage() {
setForm(next)
} catch (e) {
toast.error(e.message || 'Laden fehlgeschlagen')
goBack()
navigate('/planning/framework-programs')
} finally {
if (!cancelled) setLoading(false)
}
@ -458,11 +450,9 @@ export default function TrainingFrameworkProgramEditPage() {
const created = await api.createTrainingFrameworkProgram(payload)
toast.success('Rahmenprogramm angelegt.')
if (closeAfter) {
goBack()
navigate('/planning/framework-programs')
} else if (!fromUnsavedDialog) {
preserveAppReturnOnNavigate(navigate, location, `/planning/framework-programs/${created.id}`, {
replace: true,
})
navigate(`/planning/framework-programs/${created.id}`, { replace: true })
}
return true
}
@ -476,7 +466,7 @@ export default function TrainingFrameworkProgramEditPage() {
setBypassDirty(false)
setBaselineReady(true)
toast.success('Gespeichert.')
if (closeAfter) goBack()
if (closeAfter) navigate('/planning/framework-programs')
return true
} catch (e) {
toast.error(e.message || 'Speichern fehlgeschlagen')
@ -505,7 +495,7 @@ export default function TrainingFrameworkProgramEditPage() {
if (!confirm('Dieses Rahmenprogramm wirklich löschen?')) return
try {
await api.deleteTrainingFrameworkProgram(fid)
goBack()
navigate('/planning/framework-programs')
} catch (e) {
toast.error(e.message || 'Löschen fehlgeschlagen')
}
@ -856,6 +846,12 @@ export default function TrainingFrameworkProgramEditPage() {
return (
<div className="app-page">
<div className="framework-edit">
<p style={{ marginBottom: '0.75rem' }}>
<Link to="/planning/framework-programs" style={{ color: 'var(--accent-dark)' }}>
Alle Rahmenprogramme
</Link>
</p>
<h1 style={{ marginBottom: '0.75rem' }}>{isNew ? 'Neues Rahmenprogramm' : 'Rahmenprogramm bearbeiten'}</h1>
<details className="framework-edit-intro">
@ -1267,7 +1263,7 @@ export default function TrainingFrameworkProgramEditPage() {
saving={saving}
onSave={handleSave}
onSaveAndClose={handleSaveAndClose}
onCancel={goBack}
onCancel={() => navigate('/planning/framework-programs')}
cancelLabel="Abbrechen"
/>
{!isNew ? (

View File

@ -1,9 +1,8 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import api from '../utils/api'
import NavStateLink from '../components/NavStateLink'
import { useAuth } from '../context/AuthContext'
import { getTenantClubDependencyKey } from '../utils/activeClub'
import { buildFrameworkProgramsListReturnContext } from '../utils/navReturnContext'
function dashIfEmpty(val) {
const s = (val ?? '').toString().trim()
@ -60,7 +59,6 @@ function FrameworkSummaryMeta({ r }) {
export default function TrainingFrameworkProgramsListPage() {
const { user } = useAuth()
const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
const frameworkListReturn = useMemo(() => buildFrameworkProgramsListReturnContext(), [])
const [rows, setRows] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
@ -121,14 +119,13 @@ export default function TrainingFrameworkProgramsListPage() {
</div>
</details>
</div>
<NavStateLink
<Link
to="/planning/framework-programs/new"
returnContext={frameworkListReturn}
className="btn btn-primary"
style={{ textDecoration: 'none', whiteSpace: 'nowrap' }}
>
Rahmenprogramm anlegen
</NavStateLink>
</Link>
</div>
{error && (
@ -148,14 +145,13 @@ export default function TrainingFrameworkProgramsListPage() {
Noch kein Rahmenprogramm gespeichert. Lege ein neues an mit Titel, mindestens einem Ziel und optional
Slots samt Übungen.
</p>
<NavStateLink
<Link
to="/planning/framework-programs/new"
returnContext={frameworkListReturn}
className="btn btn-primary btn-full"
style={{ textDecoration: 'none' }}
>
Rahmenprogramm anlegen
</NavStateLink>
</Link>
</div>
) : (
<ul className="framework-programs-list">
@ -171,13 +167,12 @@ export default function TrainingFrameworkProgramsListPage() {
}}
>
<div style={{ minWidth: 0, flex: '1 1 220px' }}>
<NavStateLink
<Link
to={`/planning/framework-programs/${r.id}`}
returnContext={frameworkListReturn}
style={{ fontWeight: 600, fontSize: '1.05rem', color: 'var(--text1)' }}
>
{r.title || `Rahmen #${r.id}`}
</NavStateLink>
</Link>
<div style={{ fontSize: '0.85rem', color: 'var(--text2)', marginTop: '0.35rem' }}>
<span>
{(r.goals_count ?? '—') + ' Ziele · '}
@ -187,14 +182,13 @@ export default function TrainingFrameworkProgramsListPage() {
<FrameworkSummaryMeta r={r} />
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
<NavStateLink
<Link
to={`/planning/framework-programs/${r.id}`}
returnContext={frameworkListReturn}
className="btn btn-secondary"
style={{ textDecoration: 'none' }}
>
Bearbeiten
</NavStateLink>
</Link>
<button type="button" className="btn btn-secondary" onClick={() => handleDelete(r.id, r.title)}>
Löschen
</button>

View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { Link, useNavigate, useParams } from 'react-router-dom'
import api from '../utils/api'
import ExercisePickerModal from '../components/ExercisePickerModal'
import FormActionBar from '../components/FormActionBar'
@ -9,11 +9,6 @@ import { useToast } from '../context/ToastContext'
import UnsavedChangesPrompt from '../components/UnsavedChangesPrompt'
import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../hooks/useUnsavedChangesBlocker'
import { activeClubMemberships, getDefaultClubIdForGovernanceForms, getTenantClubDependencyKey } from '../utils/activeClub'
import {
buildTrainingModulesListReturnContext,
goNavReturn,
preserveAppReturnOnNavigate,
} from '../utils/navReturnContext'
function moduleFormSnapshot({
title,
@ -67,7 +62,6 @@ function swapItems(arr, i, j) {
export default function TrainingModuleEditPage() {
const { id: routeId } = useParams()
const navigate = useNavigate()
const location = useLocation()
const isNew = !routeId || routeId === 'new'
const moduleId = !isNew ? parseInt(routeId, 10) : NaN
@ -308,12 +302,6 @@ export default function TrainingModuleEditPage() {
}
}
const moduleListReturn = useMemo(() => buildTrainingModulesListReturnContext(), [])
const goBack = useCallback(() => {
goNavReturn(navigate, location, moduleListReturn)
}, [navigate, location, moduleListReturn])
const performModuleSave = async ({ fromUnsavedDialog = false, closeAfter = false } = {}) => {
if (!title.trim()) {
toast.error('Titel ist Pflicht.')
@ -327,11 +315,9 @@ export default function TrainingModuleEditPage() {
const created = await api.createTrainingModule(body)
toast.success('Trainingsmodul angelegt.')
if (closeAfter) {
goBack()
navigate('/planning/training-modules')
} else if (!fromUnsavedDialog) {
preserveAppReturnOnNavigate(navigate, location, `/planning/training-modules/${created.id}`, {
replace: true,
})
navigate(`/planning/training-modules/${created.id}`, { replace: true })
}
return true
}
@ -339,7 +325,7 @@ export default function TrainingModuleEditPage() {
baselineRef.current = moduleFormSnapshot(latestFormRef.current)
setBypassDirty(false)
toast.success('Gespeichert.')
if (closeAfter) goBack()
if (closeAfter) navigate('/planning/training-modules')
return true
} catch (err) {
const msg = err.message || 'Speichern fehlgeschlagen'
@ -375,6 +361,11 @@ export default function TrainingModuleEditPage() {
return (
<div className="app-page">
<p style={{ marginBottom: '0.75rem' }}>
<Link to="/planning/training-modules" style={{ color: 'var(--accent-dark)', fontWeight: 600 }}>
Zurück zur ModulBibliothek
</Link>
</p>
<h1 className="page-title">{isNew ? 'Neues Trainingsmodul' : 'Trainingsmodul bearbeiten'}</h1>
<p style={{ color: 'var(--text2)', fontSize: '0.95rem', marginBottom: '1.25rem', maxWidth: '40rem' }}>
Reihenfolge der Positionen entspricht der späteren Übernahme in einen Abschnitt der Einheit (Kopie).
@ -679,7 +670,7 @@ export default function TrainingModuleEditPage() {
saving={saving}
onSave={() => handleSave()}
onSaveAndClose={handleSaveAndClose}
onCancel={goBack}
onCancel={() => navigate('/planning/training-modules')}
cancelLabel="Abbrechen"
/>
</form>

View File

@ -1,14 +1,12 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import api from '../utils/api'
import NavStateLink from '../components/NavStateLink'
import { useAuth } from '../context/AuthContext'
import { getTenantClubDependencyKey } from '../utils/activeClub'
import { buildTrainingModulesListReturnContext } from '../utils/navReturnContext'
export default function TrainingModulesListPage() {
const { user } = useAuth()
const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
const modulesListReturn = useMemo(() => buildTrainingModulesListReturnContext(), [])
const [rows, setRows] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
@ -62,14 +60,9 @@ export default function TrainingModulesListPage() {
lokale Kopie (mit Herkunftsmarkierung).
</p>
</div>
<NavStateLink
to="/planning/training-modules/new"
returnContext={modulesListReturn}
className="btn btn-primary"
style={{ textDecoration: 'none' }}
>
<Link to="/planning/training-modules/new" className="btn btn-primary" style={{ textDecoration: 'none' }}>
Neues Modul
</NavStateLink>
</Link>
</div>
{error ? (
@ -95,9 +88,8 @@ export default function TrainingModulesListPage() {
}}
>
<div style={{ flex: '1 1 220px', minWidth: 0 }}>
<NavStateLink
<Link
to={`/planning/training-modules/${r.id}`}
returnContext={modulesListReturn}
style={{
fontWeight: 700,
fontSize: '1.05rem',
@ -107,7 +99,7 @@ export default function TrainingModulesListPage() {
}}
>
{(r.title || '').trim() || `Modul #${r.id}`}
</NavStateLink>
</Link>
<p style={{ margin: '0.35rem 0 0', fontSize: '0.88rem', color: 'var(--text2)', lineHeight: 1.45 }}>
{(r.summary || '').trim() || '—'}{' '}
<span style={{ color: 'var(--text3)' }}>

View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Link, useNavigate, useParams } from 'react-router-dom'
import api from '../utils/api'
import TrainingUnitSectionsEditor from '../components/TrainingUnitSectionsEditor'
import FormActionBar from '../components/FormActionBar'
@ -7,10 +7,6 @@ import UnsavedChangesPrompt from '../components/UnsavedChangesPrompt'
import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../hooks/useUnsavedChangesBlocker'
import { useAuth } from '../context/AuthContext'
import { useToast } from '../context/ToastContext'
import { useNavReturn } from '../hooks/useNavReturn'
import {
buildPlanTemplatesListReturnContext,
} from '../utils/navReturnContext'
import {
defaultSection,
formSectionsFromPlanTemplateRows,
@ -35,8 +31,6 @@ function templateFormSnapshot({ name, description, visibility, clubIdField, sect
export default function TrainingPlanTemplateEditPage() {
const { id: routeId } = useParams()
const navigate = useNavigate()
const templatesListReturn = useMemo(() => buildPlanTemplatesListReturnContext(), [])
const { goBack } = useNavReturn(templatesListReturn)
const templateId = parseInt(routeId, 10)
const toast = useToast()
const { user } = useAuth()
@ -189,7 +183,7 @@ export default function TrainingPlanTemplateEditPage() {
baselineRef.current = templateFormSnapshot(latestFormRef.current)
setBypassDirty(false)
toast.success('Vorlage gespeichert.')
if (closeAfter) goBack()
if (closeAfter) navigate('/planning/plan-templates')
return true
} catch (err) {
const msg = err.message || 'Speichern fehlgeschlagen'
@ -226,6 +220,12 @@ export default function TrainingPlanTemplateEditPage() {
return (
<div className="app-page">
<p style={{ marginBottom: '0.75rem' }}>
<Link to="/planning/plan-templates" style={{ color: 'var(--accent-dark)', fontWeight: 600 }}>
Zurück zu Vorlagen
</Link>
</p>
<h1 className="page-title" style={{ marginBottom: '0.35rem' }}>
Trainingsvorlage bearbeiten
</h1>
@ -321,7 +321,7 @@ export default function TrainingPlanTemplateEditPage() {
variant="page"
formId="plan-template-form"
saving={saving}
onCancel={goBack}
onCancel={() => navigate('/planning/plan-templates')}
onSaveAndClose={handleSaveAndClose}
/>
</form>

View File

@ -1,12 +1,11 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import api from '../utils/api'
import NavStateLink from '../components/NavStateLink'
import { useAuth } from '../context/AuthContext'
import { useToast } from '../context/ToastContext'
import { getTenantClubDependencyKey } from '../utils/activeClub'
import { canDeleteLibraryContent, canEditLibraryContent } from '../utils/libraryContentPermissions'
import PlanTemplateStructurePreview from '../components/planning/PlanTemplateStructurePreview'
import { buildPlanTemplatesListReturnContext } from '../utils/navReturnContext'
function visibilityLabel(v) {
const x = String(v || 'club').toLowerCase()
@ -17,7 +16,6 @@ function visibilityLabel(v) {
export default function TrainingPlanTemplatesListPage() {
const { user } = useAuth()
const templatesListReturn = useMemo(() => buildPlanTemplatesListReturnContext(), [])
const toast = useToast()
const tenantClubDepKey = useMemo(() => getTenantClubDependencyKey(user), [user])
const [rows, setRows] = useState([])
@ -115,9 +113,8 @@ export default function TrainingPlanTemplatesListPage() {
>
<div style={{ minWidth: 0, flex: '1 1 240px' }}>
{canEdit ? (
<NavStateLink
<Link
to={`/planning/plan-templates/${t.id}`}
returnContext={templatesListReturn}
style={{
fontWeight: 700,
fontSize: '1rem',
@ -127,7 +124,7 @@ export default function TrainingPlanTemplatesListPage() {
}}
>
{(t.name || '').trim() || `Vorlage #${t.id}`}
</NavStateLink>
</Link>
) : (
<strong style={{ color: 'var(--text1)', fontSize: '1rem', wordBreak: 'break-word' }}>
{(t.name || '').trim() || `Vorlage #${t.id}`}
@ -160,14 +157,13 @@ export default function TrainingPlanTemplatesListPage() {
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', flexShrink: 0 }}>
{canEdit ? (
<NavStateLink
<Link
className="btn btn-secondary"
style={{ textDecoration: 'none' }}
to={`/planning/plan-templates/${t.id}`}
returnContext={templatesListReturn}
>
Bearbeiten
</NavStateLink>
</Link>
) : (
<span style={{ fontSize: '0.82rem', color: 'var(--text3)', alignSelf: 'center' }}>
nur Lesen

View File

@ -32,12 +32,7 @@ import {
import PageFormEditorChrome from '../components/PageFormEditorChrome'
import UnsavedChangesPrompt from '../components/UnsavedChangesPrompt'
import { useBeforeUnloadWhen, useUnsavedChangesBlocker } from '../hooks/useUnsavedChangesBlocker'
import { buildPlanUnitEditPath } from '../utils/planningUnitRoutes'
import {
PLANNING_HUB_PATH,
buildCurrentLocationReturnContext,
goNavReturn,
} from '../utils/navReturnContext'
import { buildPlanUnitEditPath, planningHubPathFromReturnState } from '../utils/planningUnitRoutes'
export default function TrainingUnitEditPage() {
const { id: routeId } = useParams()
@ -124,16 +119,8 @@ export default function TrainingUnitEditPage() {
const [saveModuleOpen, setSaveModuleOpen] = useState(false)
const goBack = useCallback(() => {
goNavReturn(navigate, location, {
path: PLANNING_HUB_PATH,
label: 'Zurück zur Planung',
})
}, [location, navigate])
const moduleSaveReturnContext = useMemo(
() => buildCurrentLocationReturnContext(location, 'Zurück zur Trainingseinheit'),
[location]
)
navigate(planningHubPathFromReturnState(location.state?.planningReturn))
}, [location.state, navigate])
const planningClubId = useMemo(() => {
const gid = Number(formData.group_id)
@ -530,7 +517,7 @@ export default function TrainingUnitEditPage() {
[saving, editingUnit, handleSubmit, goBack]
)
const hubBackPath = PLANNING_HUB_PATH
const hubBackPath = planningHubPathFromReturnState(location.state?.planningReturn)
const pageTitle = editingUnit ? 'Trainingseinheit bearbeiten' : 'Neue Trainingseinheit'
const handleSaveAsTemplate = async (opts = {}) => {
@ -663,8 +650,8 @@ export default function TrainingUnitEditPage() {
<PageFormEditorChrome
testId="planning-unit-form"
title={pageTitle}
fallbackPath={hubBackPath}
fallbackLabel="Zurück zur Planung"
backTo={hubBackPath}
backLabel="Trainingsplanung"
actionConfig={actionConfig}
>
<TrainingUnitFormShell
@ -736,7 +723,6 @@ export default function TrainingUnitEditPage() {
onSuccess={() => setPublishFrameworkOpen(false)}
unitId={editingUnit?.id}
planningModalClubId={planningClubId}
returnContext={moduleSaveReturnContext}
/>
<SaveExercisesAsModuleModal
@ -745,7 +731,6 @@ export default function TrainingUnitEditPage() {
onSuccess={() => setSaveModuleOpen(false)}
unitId={editingUnit?.id}
planningModalClubId={planningClubId}
returnContext={moduleSaveReturnContext}
/>
<ExercisePickerModal

View File

@ -3,16 +3,10 @@
* Phasen: Ganzgruppe vs. Split (planLoc); Druck mit optional getrennten Breakout-Seiten.
*/
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { Link, useNavigate, useParams } from 'react-router-dom'
import api from '../utils/api'
import ExercisePeekModal from '../components/ExercisePeekModal'
import PageReturnButton from '../components/PageReturnButton'
import NavStateLink from '../components/NavStateLink'
import CombinationPlanBracket from '../components/CombinationPlanBracket'
import {
buildPlanningHubFallbackReturnContext,
buildTrainingRunReturnContext,
} from '../utils/navReturnContext'
import {
buildPlanRunViewModelFromSections,
itemStableKey,
@ -40,9 +34,8 @@ function statusLabel(s) {
export default function TrainingUnitRunPage() {
const { unitId } = useParams()
const navigate = useNavigate()
const idNum = unitId ? parseInt(unitId, 10) : NaN
const planningReturn = useMemo(() => buildPlanningHubFallbackReturnContext(), [])
const runReturn = useMemo(() => buildTrainingRunReturnContext(unitId), [unitId])
const [unit, setUnit] = useState(null)
const [loadError, setLoadError] = useState(null)
@ -344,13 +337,12 @@ export default function TrainingUnitRunPage() {
>
Katalog (Popup)
</button>
<NavStateLink
<Link
to={`/exercises/${it.exercise_id}`}
returnContext={runReturn}
style={{ fontSize: '0.82rem', color: 'var(--accent)' }}
>
Vollständige Seite öffnen
</NavStateLink>
</Link>
</div>
)}
</span>
@ -376,11 +368,9 @@ export default function TrainingUnitRunPage() {
return (
<div className="card" style={{ margin: '1rem', padding: '1.5rem' }}>
<p style={{ marginBottom: '1rem' }}>{loadError || 'Trainingseinheit nicht gefunden.'}</p>
<PageReturnButton
fallbackPath={planningReturn.path}
fallbackLabel={planningReturn.label}
className="page-return-btn btn btn-secondary btn-small"
/>
<button type="button" className="btn btn-secondary" onClick={() => navigate('/planning')}>
Zur Planung
</button>
</div>
)
}
@ -392,7 +382,6 @@ export default function TrainingUnitRunPage() {
exerciseId={peekCtx?.exerciseId}
variantId={peekCtx?.variantId ?? undefined}
peekExtras={peekCtx?.peekExtras ?? undefined}
returnContext={runReturn}
onClose={() => setPeekCtx(null)}
/>
@ -406,14 +395,11 @@ export default function TrainingUnitRunPage() {
alignItems: 'center',
}}
>
<PageReturnButton
fallbackPath={planningReturn.path}
fallbackLabel={planningReturn.label}
className="page-return-btn btn btn-secondary btn-small"
/>
<NavStateLink
<button type="button" className="btn btn-secondary" onClick={() => navigate('/planning')}>
Zur Planung
</button>
<Link
to={`/planning/run/${unitId}/coach`}
returnContext={runReturn}
className="btn btn-primary"
style={{
textDecoration: 'none',
@ -423,7 +409,7 @@ export default function TrainingUnitRunPage() {
}}
>
Im Training (Coach)
</NavStateLink>
</Link>
<button type="button" className="btn btn-secondary" onClick={() => window.print()}>
Drucken / PDF
</button>

View File

@ -1,90 +0,0 @@
/** Minimaler Snapshot einer Übung für die modulübergreifende Auswahl (filterunabhängig). */
export function snapshotExerciseForSelection(exercise) {
if (!exercise || exercise.id == null) return null
const id = Number(exercise.id)
if (!Number.isFinite(id) || id < 1) return null
return {
id,
title: exercise.title || '',
summary: exercise.summary || '',
visibility: exercise.visibility,
status: exercise.status,
exercise_kind: exercise.exercise_kind,
created_by: exercise.created_by,
focus_area: exercise.focus_area,
focus_area_names: exercise.focus_area_names,
style_direction_names: exercise.style_direction_names,
training_type_names: exercise.training_type_names,
media_count: exercise.media_count,
variant_count: exercise.variant_count,
media: Array.isArray(exercise.media) ? exercise.media : [],
}
}
export function normalizeSelectedEntries(raw) {
if (!Array.isArray(raw)) return []
const out = []
const seen = new Set()
for (const item of raw) {
const snap = snapshotExerciseForSelection(item)
if (!snap || seen.has(snap.id)) continue
seen.add(snap.id)
out.push(snap)
}
return out
}
export function mergeSelectedWithListEntries(selectedEntries, exercises) {
const byId = new Map()
for (const e of exercises || []) {
const id = Number(e?.id)
if (Number.isFinite(id) && id > 0) byId.set(id, e)
}
return (selectedEntries || []).map((entry) => byId.get(Number(entry.id)) || entry)
}
export function moduleItemToPayload(row, orderIndex) {
if ((row?.item_type || 'exercise') === 'note') {
return {
item_type: 'note',
order_index: orderIndex,
note_body: row.note_body ?? '',
}
}
const eid = Number(row.exercise_id)
if (!Number.isFinite(eid) || eid < 1) return null
const vidRaw = row.exercise_variant_id
const vid =
vidRaw === '' || vidRaw == null || row.exercise_kind === 'combination'
? null
: Number(vidRaw)
return {
item_type: 'exercise',
order_index: orderIndex,
exercise_id: eid,
exercise_variant_id: Number.isFinite(vid) && vid > 0 ? vid : null,
planned_duration_min:
row.planned_duration_min !== '' && row.planned_duration_min != null
? Number(row.planned_duration_min)
: null,
notes: row.notes != null && String(row.notes).trim() ? String(row.notes).trim() : null,
}
}
export function buildRowsPayload(rows) {
return rows
.map((row, idx) =>
moduleItemToPayload(
{
...row,
exercise_id: row.exercise_id,
exercise_variant_id: row.exercise_variant_id,
planned_duration_min: row.planned_duration_min,
notes: row.notes,
exercise_kind: row.exercise_kind,
},
idx
)
)
.filter(Boolean)
}

View File

@ -1,51 +0,0 @@
import { INITIAL_EXERCISE_LIST_FILTERS, mergeExerciseListPrefsFromApi } from '../constants/exerciseListFilters'
import { normalizeSelectedEntries } from './exerciseListSelection'
const STORAGE_KEY = 'shinkan.exerciseList.session.v1'
function safeParse(raw) {
if (!raw) return null
try {
return JSON.parse(raw)
} catch {
return null
}
}
/** @returns {{ filters: object, searchInput: string, aiSearchInput: string, mineOnly: boolean, selectedEntries: object[] } | null} */
export function readExerciseListSessionState() {
if (typeof sessionStorage === 'undefined') return null
const parsed = safeParse(sessionStorage.getItem(STORAGE_KEY))
if (!parsed || typeof parsed !== 'object') return null
const filters =
parsed.filters && typeof parsed.filters === 'object'
? mergeExerciseListPrefsFromApi(parsed.filters)
: { ...INITIAL_EXERCISE_LIST_FILTERS }
return {
filters,
searchInput: typeof parsed.searchInput === 'string' ? parsed.searchInput : '',
aiSearchInput: typeof parsed.aiSearchInput === 'string' ? parsed.aiSearchInput : '',
mineOnly: !!parsed.mineOnly,
selectedEntries: normalizeSelectedEntries(parsed.selectedEntries),
}
}
export function writeExerciseListSessionState(state) {
if (typeof sessionStorage === 'undefined' || !state || typeof state !== 'object') return
try {
sessionStorage.setItem(
STORAGE_KEY,
JSON.stringify({
filters: state.filters ?? { ...INITIAL_EXERCISE_LIST_FILTERS },
searchInput: typeof state.searchInput === 'string' ? state.searchInput : '',
aiSearchInput: typeof state.aiSearchInput === 'string' ? state.aiSearchInput : '',
mineOnly: !!state.mineOnly,
selectedEntries: normalizeSelectedEntries(state.selectedEntries),
})
)
} catch {
/* quota / private mode */
}
}

View File

@ -1,215 +0,0 @@
/**
* Einheitlicher Rücksprung-Kontext für PWA-Navigation (siehe NAV_RETURN_CONTEXT_SPEC.md).
*/
import {
buildPlanningHubReturnState,
PLANNING_HUB_PATH,
planningHubPathFromReturnState,
} from './planningUnitRoutes'
export { PLANNING_HUB_PATH }
export const NAV_RETURN_STATE_KEY = 'appReturn'
export const EXERCISES_LIST_PATH = '/exercises'
export const TRAINING_MODULES_LIST_PATH = '/planning/training-modules'
export const PLAN_TEMPLATES_LIST_PATH = '/planning/plan-templates'
export const FRAMEWORK_PROGRAMS_LIST_PATH = '/planning/framework-programs'
export const SETTINGS_PATH = '/settings'
export const DASHBOARD_PATH = '/'
export function buildNavReturnContext(opts) {
const path = String(opts?.path || '').trim()
const label = String(opts?.label || '').trim()
if (!path || !label) return null
const ctx = { v: 1, path, label }
if (opts?.kind) ctx.kind = opts.kind
if (opts?.payload && typeof opts.payload === 'object') {
ctx.payload = opts.payload
}
return ctx
}
export function buildExercisesListReturnContext() {
return buildNavReturnContext({
path: EXERCISES_LIST_PATH,
label: 'Zurück zur Übungsliste',
kind: 'exerciseList',
})
}
export function buildTrainingModulesListReturnContext() {
return buildNavReturnContext({
path: TRAINING_MODULES_LIST_PATH,
label: 'Zurück zur Modul-Bibliothek',
kind: 'trainingModulesList',
})
}
export function buildPlanTemplatesListReturnContext() {
return buildNavReturnContext({
path: PLAN_TEMPLATES_LIST_PATH,
label: 'Zurück zu Vorlagen',
kind: 'planTemplatesList',
})
}
export function buildFrameworkProgramsListReturnContext() {
return buildNavReturnContext({
path: FRAMEWORK_PROGRAMS_LIST_PATH,
label: 'Zurück zu Rahmenprogrammen',
kind: 'frameworkProgramsList',
})
}
export function buildSettingsReturnContext() {
return buildNavReturnContext({
path: SETTINGS_PATH,
label: 'Zurück zu Einstellungen',
kind: 'settings',
})
}
export function buildDashboardReturnContext() {
return buildNavReturnContext({
path: DASHBOARD_PATH,
label: 'Zurück zur Übersicht',
kind: 'dashboard',
})
}
export const MEDIA_LIBRARY_PATH = '/media'
export function buildMediaLibraryReturnContext() {
return buildNavReturnContext({
path: MEDIA_LIBRARY_PATH,
label: 'Zurück zur Medienbibliothek',
kind: 'mediaLibrary',
})
}
export function buildTrainingRunReturnContext(unitId) {
const id = String(unitId || '').trim()
if (!id) return null
return buildNavReturnContext({
path: `/planning/run/${id}`,
label: 'Zurück zum Trainingsablauf',
kind: 'trainingRun',
payload: { unitId: id },
})
}
export function buildPlanningHubFallbackReturnContext() {
return buildNavReturnContext({
path: PLANNING_HUB_PATH,
label: 'Zurück zur Planung',
kind: 'planningHub',
})
}
/** Router-Link state mit appReturn (optional zusätzlicher State). */
export function linkStateWithAppReturn(returnContext, extraState) {
const state = { ...(extraState || {}) }
if (returnContext) state[NAV_RETURN_STATE_KEY] = returnContext
return Object.keys(state).length > 0 ? state : undefined
}
/**
* Rücksprung zur aktuellen Route (z. B. Einheiten-Editor).
*/
export function buildCurrentLocationReturnContext(location, label) {
const path = `${location?.pathname || ''}${location?.search || ''}`.trim()
if (!path) return null
return buildNavReturnContext({
path,
label: String(label || 'Zurück').trim(),
kind: 'currentLocation',
})
}
/** @param {ReturnType<typeof buildPlanningHubReturnState>|object} hubState */
export function buildPlanningHubReturnContext(hubState = {}) {
const payload = buildPlanningHubReturnState(hubState)
return buildNavReturnContext({
path: planningHubPathFromReturnState(payload),
label: 'Zurück zur Planung',
kind: 'planningHub',
payload,
})
}
/** Legacy planningReturn → appReturn */
export function appReturnFromPlanningReturn(planningReturn) {
if (!planningReturn || planningReturn.v !== 1) return null
return buildPlanningHubReturnContext(planningReturn)
}
/**
* @param {import('react-router-dom').Location|{ state?: object }|null|undefined} location
*/
export function readNavReturnFromLocation(location) {
const state = location?.state
if (!state || typeof state !== 'object') return null
const raw = state[NAV_RETURN_STATE_KEY]
if (raw?.v === 1 && raw.path && raw.label) return raw
if (state.planningReturn) return appReturnFromPlanningReturn(state.planningReturn)
return null
}
/**
* @param {import('react-router-dom').Location|{ state?: object }|null|undefined} location
* @param {{ path: string, label: string }|null|undefined} fallback
*/
export function resolveNavReturnTarget(location, fallback) {
const ctx = readNavReturnFromLocation(location)
if (ctx?.path && ctx?.label) {
return { path: ctx.path, label: ctx.label, fromContext: true }
}
if (fallback?.path && fallback?.label) {
return { path: fallback.path, label: fallback.label, fromContext: false }
}
return null
}
/**
* @param {import('react-router-dom').NavigateFunction} navigate
* @param {import('react-router-dom').Location|{ state?: object }|null|undefined} location
* @param {{ path?: string, label?: string }|null|undefined} fallback
*/
export function goNavReturn(navigate, location, fallback) {
const target = resolveNavReturnTarget(location, fallback)
if (target?.fromContext && target.path) {
navigate(target.path)
return
}
if (typeof window !== 'undefined' && window.history.length > 1) {
navigate(-1)
return
}
if (fallback?.path) {
navigate(fallback.path)
return
}
navigate('/')
}
/**
* @param {import('react-router-dom').NavigateFunction} navigate
* @param {string} to
* @param {ReturnType<typeof buildNavReturnContext>|null|undefined} returnContext
* @param {object} [options]
*/
export function navigateWithAppReturn(navigate, to, returnContext, options = {}) {
const state = { ...(options.state || {}) }
if (returnContext) state[NAV_RETURN_STATE_KEY] = returnContext
navigate(to, { ...options, state })
}
/**
* Bestehenden appReturn (oder Legacy planningReturn) beim Weiterleiten erhalten.
*/
export function preserveAppReturnOnNavigate(navigate, location, to, options = {}) {
const existing = readNavReturnFromLocation(location)
const state = { ...(options.state || {}) }
if (existing) state[NAV_RETURN_STATE_KEY] = existing
navigate(to, { ...options, state })
}

View File

@ -1,100 +0,0 @@
import { describe, expect, it, vi } from 'vitest'
import {
appReturnFromPlanningReturn,
buildExercisesListReturnContext,
buildMediaLibraryReturnContext,
buildNavReturnContext,
buildPlanningHubReturnContext,
buildTrainingRunReturnContext,
goNavReturn,
readNavReturnFromLocation,
resolveNavReturnTarget,
} from './navReturnContext.js'
describe('navReturnContext', () => {
it('buildNavReturnContext requires path and label', () => {
expect(buildNavReturnContext({ path: '/x', label: 'Zurück' })).toEqual({
v: 1,
path: '/x',
label: 'Zurück',
})
expect(buildNavReturnContext({ path: '', label: 'X' })).toBeNull()
})
it('buildExercisesListReturnContext', () => {
const ctx = buildExercisesListReturnContext()
expect(ctx.path).toBe('/exercises')
expect(ctx.kind).toBe('exerciseList')
})
it('readNavReturnFromLocation prefers appReturn', () => {
const ctx = buildExercisesListReturnContext()
expect(readNavReturnFromLocation({ state: { appReturn: ctx } })).toEqual(ctx)
})
it('readNavReturnFromLocation bridges planningReturn', () => {
const loc = {
state: {
planningReturn: {
v: 1,
selectedGroupId: '3',
planView: 'list',
calendarMonthStr: '',
startDate: '',
endDate: '',
planScope: 'group',
assignedToMeOnly: false,
},
},
}
const ctx = readNavReturnFromLocation(loc)
expect(ctx?.kind).toBe('planningHub')
expect(ctx?.path).toContain('/planning')
expect(ctx?.label).toBe('Zurück zur Planung')
})
it('appReturnFromPlanningReturn', () => {
const ctx = appReturnFromPlanningReturn({
v: 1,
selectedGroupId: '',
planView: 'calendar',
calendarMonthStr: '2026-05',
startDate: '',
endDate: '',
planScope: 'group',
assignedToMeOnly: false,
})
expect(ctx?.path).toContain('month=2026-05')
})
it('resolveNavReturnTarget uses fallback when no state', () => {
const fb = { path: '/planning/training-modules', label: 'Zurück zur Modul-Bibliothek' }
expect(resolveNavReturnTarget({ state: null }, fb)).toEqual({ ...fb, fromContext: false })
})
it('goNavReturn navigates to context path first', () => {
const navigate = vi.fn()
const ctx = buildExercisesListReturnContext()
goNavReturn(navigate, { state: { appReturn: ctx } }, null)
expect(navigate).toHaveBeenCalledWith('/exercises')
})
it('buildPlanningHubReturnContext', () => {
const ctx = buildPlanningHubReturnContext({ selectedGroupId: '7', planView: 'list' })
expect(ctx?.path).toContain('group=7')
expect(ctx?.kind).toBe('planningHub')
})
it('buildTrainingRunReturnContext', () => {
const ctx = buildTrainingRunReturnContext(42)
expect(ctx?.path).toBe('/planning/run/42')
expect(ctx?.kind).toBe('trainingRun')
expect(buildTrainingRunReturnContext('')).toBeNull()
})
it('buildMediaLibraryReturnContext', () => {
const ctx = buildMediaLibraryReturnContext()
expect(ctx?.path).toBe('/media')
expect(ctx?.kind).toBe('mediaLibrary')
})
})