Module und Kombinationsübnungen in Version 0.8 #31
|
|
@ -5128,6 +5128,64 @@ a.analysis-split__nav-item {
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Einfügen zwischen Ablaufzeilen (Übung / Modul / Anmerkung) */
|
||||||
|
.tu-insert-slot {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 11px;
|
||||||
|
margin: -1px 0 3px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tu-insert-slot__btn {
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px dashed var(--border2);
|
||||||
|
background: color-mix(in srgb, var(--surface2) 90%, transparent);
|
||||||
|
color: var(--accent-dark);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 2px 9px;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.78;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tu-insert-slot__btn:hover,
|
||||||
|
.tu-insert-slot__btn:focus-visible {
|
||||||
|
opacity: 1;
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
background: color-mix(in srgb, var(--accent-light) 40%, var(--surface2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tu-insert-chooser-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tu-insert-chooser-actions__full {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tu-item-row--separator-note {
|
||||||
|
padding-top: 0.35rem;
|
||||||
|
padding-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tu-item-row__separator-line {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.2rem 0 0;
|
||||||
|
min-height: 1px;
|
||||||
|
border: none;
|
||||||
|
border-top: 2px solid var(--border);
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
|
|
||||||
.tu-item-row {
|
.tu-item-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,9 @@ import {
|
||||||
const DND_TU_ITEM = 'application/x-shinkan-training-unit-item'
|
const DND_TU_ITEM = 'application/x-shinkan-training-unit-item'
|
||||||
const DND_TU_SECTION = 'application/x-shinkan-training-section-v1'
|
const DND_TU_SECTION = 'application/x-shinkan-training-section-v1'
|
||||||
|
|
||||||
|
/** Optische Trennlinie: wird als normale Zwischen-Anmerkung gespeichert (Inhalt nur dieser Marker). */
|
||||||
|
const SECTION_INSERT_SEPARATOR_BODY = '---'
|
||||||
|
|
||||||
function normalizedPlanningModuleChainId(raw) {
|
function normalizedPlanningModuleChainId(raw) {
|
||||||
if (raw == null || raw === '') return null
|
if (raw == null || raw === '') return null
|
||||||
const n = typeof raw === 'number' ? raw : Number(raw)
|
const n = typeof raw === 'number' ? raw : Number(raw)
|
||||||
|
|
@ -48,6 +51,7 @@ export default function TrainingUnitSectionsEditor({
|
||||||
sections,
|
sections,
|
||||||
onSectionsChange,
|
onSectionsChange,
|
||||||
onRequestExercisePick,
|
onRequestExercisePick,
|
||||||
|
onRequestTrainingModulePick,
|
||||||
onPeekExercise,
|
onPeekExercise,
|
||||||
showExecutionExtras = false,
|
showExecutionExtras = false,
|
||||||
heading = 'Abschnitte & Übungen',
|
heading = 'Abschnitte & Übungen',
|
||||||
|
|
@ -58,6 +62,8 @@ export default function TrainingUnitSectionsEditor({
|
||||||
enableSectionDragReorder = true,
|
enableSectionDragReorder = true,
|
||||||
slotIndex = null,
|
slotIndex = null,
|
||||||
onMoveSectionsAcrossSlots = null,
|
onMoveSectionsAcrossSlots = null,
|
||||||
|
/** Dünnes „+“ zwischen Einträge: Popup für Typ (Übung, Modul, …) */
|
||||||
|
betweenInsertMenus = true,
|
||||||
}) {
|
}) {
|
||||||
const ensure = (prev) =>
|
const ensure = (prev) =>
|
||||||
prev && prev.length ? prev : [defaultSection()]
|
prev && prev.length ? prev : [defaultSection()]
|
||||||
|
|
@ -99,16 +105,32 @@ export default function TrainingUnitSectionsEditor({
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const insertItemAt = useCallback(
|
||||||
|
(sIdx, beforeIx, row) => {
|
||||||
|
patch((prev) =>
|
||||||
|
prev.map((s, i) => {
|
||||||
|
if (i !== sIdx) return s
|
||||||
|
const items = [...(s.items || [])]
|
||||||
|
const ix = Math.max(
|
||||||
|
0,
|
||||||
|
Math.min(Number(beforeIx) || 0, items.length)
|
||||||
|
)
|
||||||
|
items.splice(ix, 0, row)
|
||||||
|
return { ...s, items }
|
||||||
|
})
|
||||||
|
)
|
||||||
|
},
|
||||||
|
[patch]
|
||||||
|
)
|
||||||
|
|
||||||
const addItem = (sIdx, kind) => {
|
const addItem = (sIdx, kind) => {
|
||||||
patch((prev) =>
|
patch((prev) =>
|
||||||
prev.map((s, i) =>
|
prev.map((s, i) => {
|
||||||
i !== sIdx
|
if (i !== sIdx) return s
|
||||||
? s
|
const items = [...(s.items || [])]
|
||||||
: {
|
items.push(kind === 'note' ? noteRow() : exerciseRow())
|
||||||
...s,
|
return { ...s, items }
|
||||||
items: [...(s.items || []), kind === 'note' ? noteRow() : exerciseRow()],
|
})
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -149,6 +171,8 @@ export default function TrainingUnitSectionsEditor({
|
||||||
}
|
}
|
||||||
|
|
||||||
const [textEdit, setTextEdit] = useState(null)
|
const [textEdit, setTextEdit] = useState(null)
|
||||||
|
/** { sIdx: number, beforeIx: number } – Einfüge-Popup („+“ zwischen Zeilen) */
|
||||||
|
const [insertChooser, setInsertChooser] = useState(null)
|
||||||
const [draggingPos, setDraggingPos] = useState(null)
|
const [draggingPos, setDraggingPos] = useState(null)
|
||||||
const [dropTargetPos, setDropTargetPos] = useState(null)
|
const [dropTargetPos, setDropTargetPos] = useState(null)
|
||||||
|
|
||||||
|
|
@ -164,6 +188,20 @@ export default function TrainingUnitSectionsEditor({
|
||||||
return () => window.removeEventListener('keydown', onKey)
|
return () => window.removeEventListener('keydown', onKey)
|
||||||
}, [textEdit])
|
}, [textEdit])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!insertChooser) return
|
||||||
|
const onKey = (e) => {
|
||||||
|
if (e.key === 'Escape') setInsertChooser(null)
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', onKey)
|
||||||
|
return () => window.removeEventListener('keydown', onKey)
|
||||||
|
}, [insertChooser])
|
||||||
|
|
||||||
|
const closeInsertChooser = useCallback(() => setInsertChooser(null), [])
|
||||||
|
|
||||||
|
const insertSlotKeyPrefix =
|
||||||
|
slotIndex !== null && slotIndex !== undefined ? `sl${slotIndex}-` : ''
|
||||||
|
|
||||||
const clearSectionDnD = () => setDropSectionBand(null)
|
const clearSectionDnD = () => setDropSectionBand(null)
|
||||||
|
|
||||||
const onSectionDragStart = (e, sIdx) => {
|
const onSectionDragStart = (e, sIdx) => {
|
||||||
|
|
@ -351,6 +389,29 @@ export default function TrainingUnitSectionsEditor({
|
||||||
setTextEdit(null)
|
setTextEdit(null)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderBetweenInsertBand = (sIdx, beforeIx, itemCount) => {
|
||||||
|
const posLabel =
|
||||||
|
beforeIx === 0
|
||||||
|
? 'vor dem ersten Eintrag'
|
||||||
|
: beforeIx >= itemCount
|
||||||
|
? 'am Ende des Abschnitts'
|
||||||
|
: `vor Eintrag ${beforeIx + 1}`
|
||||||
|
return (
|
||||||
|
<div className="tu-insert-slot">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tu-insert-slot__btn"
|
||||||
|
aria-haspopup="dialog"
|
||||||
|
aria-label={`Inhalt einfügen (${posLabel})`}
|
||||||
|
title={`Hier einfügen (${posLabel})`}
|
||||||
|
onClick={() => setInsertChooser({ sIdx, beforeIx })}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const list = ensure(sections)
|
const list = ensure(sections)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -506,6 +567,8 @@ export default function TrainingUnitSectionsEditor({
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{betweenInsertMenus ? renderBetweenInsertBand(sIdx, 0, itemCount) : null}
|
||||||
|
|
||||||
{(sec.items || []).map((it, iIdx) => {
|
{(sec.items || []).map((it, iIdx) => {
|
||||||
const dropHere =
|
const dropHere =
|
||||||
enableItemDragReorder &&
|
enableItemDragReorder &&
|
||||||
|
|
@ -536,10 +599,11 @@ export default function TrainingUnitSectionsEditor({
|
||||||
(curMn != null ? `Modul #${curMn}` : '')
|
(curMn != null ? `Modul #${curMn}` : '')
|
||||||
|
|
||||||
if (it.item_type === 'note') {
|
if (it.item_type === 'note') {
|
||||||
|
const isSepLine = (it.note_body || '').trim() === SECTION_INSERT_SEPARATOR_BODY
|
||||||
const notePv = truncatePreview(it.note_body || '', 260)
|
const notePv = truncatePreview(it.note_body || '', 260)
|
||||||
const noteHasText = Boolean((it.note_body || '').trim())
|
const noteHasText = Boolean((it.note_body || '').trim()) && !isSepLine
|
||||||
return (
|
return (
|
||||||
<Fragment key={`it-${sIdx}-${iIdx}`}>
|
<Fragment key={`${insertSlotKeyPrefix}sec-${sIdx}-blk-${iIdx}`}>
|
||||||
{showModuleBand ? (
|
{showModuleBand ? (
|
||||||
<div
|
<div
|
||||||
className="tu-planning-module-band"
|
className="tu-planning-module-band"
|
||||||
|
|
@ -549,7 +613,13 @@ export default function TrainingUnitSectionsEditor({
|
||||||
Baustein: {modBandTitle}
|
Baustein: {modBandTitle}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<div className={`${rowCommon} tu-item-row--note`} {...dndRowProps}>
|
<div
|
||||||
|
className={
|
||||||
|
`${rowCommon} tu-item-row--note` +
|
||||||
|
(isSepLine ? ' tu-item-row--separator-note' : '')
|
||||||
|
}
|
||||||
|
{...dndRowProps}
|
||||||
|
>
|
||||||
{enableItemDragReorder ? (
|
{enableItemDragReorder ? (
|
||||||
<span
|
<span
|
||||||
className="tu-row-grip"
|
className="tu-row-grip"
|
||||||
|
|
@ -582,19 +652,29 @@ export default function TrainingUnitSectionsEditor({
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="tu-item-row__body tu-item-row__body--note">
|
<div className="tu-item-row__body tu-item-row__body--note">
|
||||||
<span className="tu-item-row__meta-label">Zwischen-Anmerkung</span>
|
<span className="tu-item-row__meta-label">
|
||||||
<p
|
{isSepLine ? 'Trennung' : 'Zwischen-Anmerkung'}
|
||||||
className={`tu-item-row__preview tu-item-row__preview--clamp${noteHasText ? '' : ' tu-item-row__preview--empty'}`}
|
</span>
|
||||||
title={noteHasText ? (it.note_body || '').trim() : undefined}
|
{isSepLine ? (
|
||||||
>
|
<div
|
||||||
{noteHasText ? notePv : '—'}
|
className="tu-item-row__separator-line"
|
||||||
</p>
|
role="separator"
|
||||||
|
aria-label="Trennlinie im Ablauf"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p
|
||||||
|
className={`tu-item-row__preview tu-item-row__preview--clamp${noteHasText ? '' : ' tu-item-row__preview--empty'}`}
|
||||||
|
title={noteHasText ? (it.note_body || '').trim() : undefined}
|
||||||
|
>
|
||||||
|
{noteHasText ? notePv : '—'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="tu-icon-btn"
|
className="tu-icon-btn"
|
||||||
title="Zwischen-Anmerkung bearbeiten"
|
title={isSepLine ? 'Trennung bearbeiten' : 'Zwischen-Anmerkung bearbeiten'}
|
||||||
aria-label="Zwischen-Anmerkung bearbeiten"
|
aria-label={isSepLine ? 'Trennung bearbeiten' : 'Zwischen-Anmerkung bearbeiten'}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
setTextEdit({
|
setTextEdit({
|
||||||
kind: 'zwischen-note',
|
kind: 'zwischen-note',
|
||||||
|
|
@ -610,12 +690,13 @@ export default function TrainingUnitSectionsEditor({
|
||||||
type="button"
|
type="button"
|
||||||
className="tu-item-row__remove"
|
className="tu-item-row__remove"
|
||||||
title="Entfernen"
|
title="Entfernen"
|
||||||
aria-label="Zwischen-Anmerkung entfernen"
|
aria-label={isSepLine ? 'Trennung entfernen' : 'Zwischen-Anmerkung entfernen'}
|
||||||
onClick={() => removeItem(sIdx, iIdx)}
|
onClick={() => removeItem(sIdx, iIdx)}
|
||||||
>
|
>
|
||||||
✗
|
✗
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
{betweenInsertMenus ? renderBetweenInsertBand(sIdx, iIdx + 1, itemCount) : null}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -632,7 +713,7 @@ export default function TrainingUnitSectionsEditor({
|
||||||
: Number(it.exercise_variant_id)
|
: Number(it.exercise_variant_id)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment key={`it-${sIdx}-${iIdx}`}>
|
<Fragment key={`${insertSlotKeyPrefix}sec-${sIdx}-blk-${iIdx}`}>
|
||||||
{showModuleBand ? (
|
{showModuleBand ? (
|
||||||
<div
|
<div
|
||||||
className="tu-planning-module-band"
|
className="tu-planning-module-band"
|
||||||
|
|
@ -820,6 +901,7 @@ export default function TrainingUnitSectionsEditor({
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
{betweenInsertMenus ? renderBetweenInsertBand(sIdx, iIdx + 1, itemCount) : null}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
@ -837,21 +919,30 @@ export default function TrainingUnitSectionsEditor({
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<div style={{ marginTop: '0.65rem', display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
|
<div style={{ marginTop: '0.65rem' }}>
|
||||||
<button
|
{betweenInsertMenus ? (
|
||||||
type="button"
|
<p style={{ margin: 0, fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.45, maxWidth: '42rem' }}>
|
||||||
className="btn btn-secondary framework-ctrl framework-ctrl--xs"
|
Über die +-Zeilen zwischen den Einträgen fügst du an der gewünschten Stelle Inhalte ein. Reihenfolge
|
||||||
onClick={() => onRequestExercisePick?.({ sectionIndex: sIdx })}
|
weiter per Ziehen oder den Pfeiltasten ändern.
|
||||||
>
|
</p>
|
||||||
+ Übung
|
) : (
|
||||||
</button>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-secondary framework-ctrl framework-ctrl--xs"
|
className="btn btn-secondary framework-ctrl framework-ctrl--xs"
|
||||||
onClick={() => addItem(sIdx, 'note')}
|
onClick={() => onRequestExercisePick?.({ sectionIndex: sIdx })}
|
||||||
>
|
>
|
||||||
+ Anmerkung
|
+ Übung
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary framework-ctrl framework-ctrl--xs"
|
||||||
|
onClick={() => addItem(sIdx, 'note')}
|
||||||
|
>
|
||||||
|
+ Anmerkung
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
@ -889,6 +980,91 @@ export default function TrainingUnitSectionsEditor({
|
||||||
+ Abschnitt hinzufügen
|
+ Abschnitt hinzufügen
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{insertChooser ? (
|
||||||
|
<div
|
||||||
|
className="tu-textedit-backdrop"
|
||||||
|
role="presentation"
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
if (e.target === e.currentTarget) closeInsertChooser()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="tu-textedit-panel"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="tu-insert-chooser-title"
|
||||||
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<h4 id="tu-insert-chooser-title" className="tu-textedit-title">
|
||||||
|
An dieser Stelle einfügen
|
||||||
|
</h4>
|
||||||
|
<p style={{ margin: '0 0 0.75rem', fontSize: '0.86rem', color: 'var(--text2)', lineHeight: 1.45 }}>
|
||||||
|
Die neue Zeile erscheint genau hier; Reihenfolge kannst du wie gewohnt per Ziehen oder Pfeilen
|
||||||
|
ändern.
|
||||||
|
</p>
|
||||||
|
<div className="tu-insert-chooser-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary tu-insert-chooser-actions__full"
|
||||||
|
onClick={() => {
|
||||||
|
const { sIdx, beforeIx } = insertChooser
|
||||||
|
closeInsertChooser()
|
||||||
|
onRequestExercisePick?.({
|
||||||
|
sectionIndex: sIdx,
|
||||||
|
insertBeforeIndex: beforeIx,
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Übung auswählen …
|
||||||
|
</button>
|
||||||
|
{onRequestTrainingModulePick ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary tu-insert-chooser-actions__full"
|
||||||
|
onClick={() => {
|
||||||
|
const ctx = { ...insertChooser }
|
||||||
|
closeInsertChooser()
|
||||||
|
onRequestTrainingModulePick({
|
||||||
|
sectionIndex: ctx.sIdx,
|
||||||
|
insertBeforeIndex: ctx.beforeIx,
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Trainingsmodul …
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary tu-insert-chooser-actions__full"
|
||||||
|
onClick={() => {
|
||||||
|
const { sIdx, beforeIx } = insertChooser
|
||||||
|
insertItemAt(sIdx, beforeIx, noteRow())
|
||||||
|
closeInsertChooser()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Zwischen-Anmerkung
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary tu-insert-chooser-actions__full"
|
||||||
|
onClick={() => {
|
||||||
|
const { sIdx, beforeIx } = insertChooser
|
||||||
|
const r = noteRow()
|
||||||
|
r.note_body = SECTION_INSERT_SEPARATOR_BODY
|
||||||
|
insertItemAt(sIdx, beforeIx, r)
|
||||||
|
closeInsertChooser()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Trennlinie
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-secondary tu-insert-chooser-actions__full" onClick={closeInsertChooser}>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{textEdit ? (
|
{textEdit ? (
|
||||||
<div
|
<div
|
||||||
className="tu-textedit-backdrop"
|
className="tu-textedit-backdrop"
|
||||||
|
|
|
||||||
|
|
@ -609,6 +609,7 @@ export default function TrainingFrameworkProgramEditPage() {
|
||||||
<TrainingUnitSectionsEditor
|
<TrainingUnitSectionsEditor
|
||||||
heading={`Ablauf · Session ${si + 1}`}
|
heading={`Ablauf · Session ${si + 1}`}
|
||||||
sections={slot.sections}
|
sections={slot.sections}
|
||||||
|
betweenInsertMenus={false}
|
||||||
showExecutionExtras={false}
|
showExecutionExtras={false}
|
||||||
wideExerciseGrid
|
wideExerciseGrid
|
||||||
slotIndex={si}
|
slotIndex={si}
|
||||||
|
|
@ -628,11 +629,15 @@ export default function TrainingFrameworkProgramEditPage() {
|
||||||
),
|
),
|
||||||
}))
|
}))
|
||||||
}}
|
}}
|
||||||
onRequestExercisePick={({ sectionIndex, itemIndex }) =>
|
onRequestExercisePick={({ sectionIndex, itemIndex, insertBeforeIndex }) =>
|
||||||
setSectionPickerCtx({
|
setSectionPickerCtx({
|
||||||
slotIdx: si,
|
slotIdx: si,
|
||||||
sectionIndex,
|
sectionIndex,
|
||||||
itemIndex: typeof itemIndex === 'number' ? itemIndex : undefined,
|
itemIndex: typeof itemIndex === 'number' ? itemIndex : undefined,
|
||||||
|
insertBeforeIndex:
|
||||||
|
typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
|
||||||
|
? insertBeforeIndex
|
||||||
|
: undefined,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
onPeekExercise={(id, variantId) =>
|
onPeekExercise={(id, variantId) =>
|
||||||
|
|
@ -1096,7 +1101,7 @@ export default function TrainingFrameworkProgramEditPage() {
|
||||||
if (row) rows.push(row)
|
if (row) rows.push(row)
|
||||||
}
|
}
|
||||||
if (!rows.length) return
|
if (!rows.length) return
|
||||||
const { slotIdx, sectionIndex: sIdx, itemIndex: iIdx } = sectionPickerCtx
|
const { slotIdx, sectionIndex: sIdx, itemIndex: iIdx, insertBeforeIndex } = sectionPickerCtx
|
||||||
setForm((prev) => ({
|
setForm((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
slots: prev.slots.map((sl, ii) => {
|
slots: prev.slots.map((sl, ii) => {
|
||||||
|
|
@ -1121,7 +1126,13 @@ export default function TrainingFrameworkProgramEditPage() {
|
||||||
if (tail.length) items.splice(iIdx + 1, 0, ...tail)
|
if (tail.length) items.splice(iIdx + 1, 0, ...tail)
|
||||||
return { ...sec, items }
|
return { ...sec, items }
|
||||||
}
|
}
|
||||||
return { ...sec, items: [...items, ...rows] }
|
const rawAt =
|
||||||
|
typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
|
||||||
|
? insertBeforeIndex
|
||||||
|
: items.length
|
||||||
|
const at = Math.max(0, Math.min(rawAt, items.length))
|
||||||
|
items.splice(at, 0, ...rows)
|
||||||
|
return { ...sec, items }
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -150,7 +150,7 @@ function TrainingPlanningPage() {
|
||||||
const [moduleApplyList, setModuleApplyList] = useState([])
|
const [moduleApplyList, setModuleApplyList] = useState([])
|
||||||
const [moduleApplyModuleId, setModuleApplyModuleId] = useState('')
|
const [moduleApplyModuleId, setModuleApplyModuleId] = useState('')
|
||||||
const [moduleApplySectionIx, setModuleApplySectionIx] = useState(0)
|
const [moduleApplySectionIx, setModuleApplySectionIx] = useState(0)
|
||||||
const [moduleApplyInsertSlot, setModuleApplyInsertSlot] = useState('__end__')
|
const [moduleApplyInsertSlot, setModuleApplyInsertSlot] = useState('before:0')
|
||||||
const [moduleApplyErr, setModuleApplyErr] = useState('')
|
const [moduleApplyErr, setModuleApplyErr] = useState('')
|
||||||
|
|
||||||
const [startDate, setStartDate] = useState(today)
|
const [startDate, setStartDate] = useState(today)
|
||||||
|
|
@ -684,10 +684,27 @@ function TrainingPlanningPage() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const openModuleApplyModal = useCallback(async () => {
|
const openModuleApplyModal = useCallback(async (placement) => {
|
||||||
setModuleApplyErr('')
|
setModuleApplyErr('')
|
||||||
setModuleApplySectionIx(0)
|
const secs = planningFormRef.current?.sections ?? []
|
||||||
setModuleApplyInsertSlot('__end__')
|
let secIx = 0
|
||||||
|
let before = 0
|
||||||
|
if (secs.length) {
|
||||||
|
if (placement && typeof placement.sectionIndex === 'number') {
|
||||||
|
secIx = Math.min(Math.max(0, placement.sectionIndex), secs.length - 1)
|
||||||
|
const items = Array.isArray(secs[secIx]?.items) ? secs[secIx].items : []
|
||||||
|
const cap = items.length
|
||||||
|
if (typeof placement.insertBeforeIndex === 'number' && Number.isFinite(placement.insertBeforeIndex)) {
|
||||||
|
before = Math.min(Math.max(0, placement.insertBeforeIndex), cap)
|
||||||
|
} else before = cap
|
||||||
|
} else {
|
||||||
|
const items = Array.isArray(secs[0]?.items) ? secs[0].items : []
|
||||||
|
before = items.length
|
||||||
|
secIx = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setModuleApplySectionIx(secIx)
|
||||||
|
setModuleApplyInsertSlot(`before:${before}`)
|
||||||
setModuleApplyOpen(true)
|
setModuleApplyOpen(true)
|
||||||
try {
|
try {
|
||||||
const list = await api.listTrainingModules()
|
const list = await api.listTrainingModules()
|
||||||
|
|
@ -716,13 +733,13 @@ function TrainingPlanningPage() {
|
||||||
}
|
}
|
||||||
if (secIx < 0 || secIx >= baseSections.length) secIx = 0
|
if (secIx < 0 || secIx >= baseSections.length) secIx = 0
|
||||||
|
|
||||||
let insertBefore = null
|
const secItems = Array.isArray(baseSections[secIx]?.items) ? baseSections[secIx].items : []
|
||||||
if (moduleApplyInsertSlot === '__end__') insertBefore = 'end'
|
const itemCap = secItems.length
|
||||||
else if (moduleApplyInsertSlot === '__start__') insertBefore = 'start'
|
let insertBefore = itemCap
|
||||||
else if (typeof moduleApplyInsertSlot === 'string' && moduleApplyInsertSlot.startsWith('before:')) {
|
if (typeof moduleApplyInsertSlot === 'string' && moduleApplyInsertSlot.startsWith('before:')) {
|
||||||
const zi = parseInt(moduleApplyInsertSlot.slice('before:'.length), 10)
|
const zi = parseInt(moduleApplyInsertSlot.slice('before:'.length), 10)
|
||||||
insertBefore = Number.isFinite(zi) ? zi : 'end'
|
if (Number.isFinite(zi)) insertBefore = Math.min(Math.max(0, zi), itemCap)
|
||||||
} else insertBefore = 'end'
|
}
|
||||||
|
|
||||||
setModuleApplyBusy(true)
|
setModuleApplyBusy(true)
|
||||||
setModuleApplyErr('')
|
setModuleApplyErr('')
|
||||||
|
|
@ -742,7 +759,7 @@ function TrainingPlanningPage() {
|
||||||
} finally {
|
} finally {
|
||||||
setModuleApplyBusy(false)
|
setModuleApplyBusy(false)
|
||||||
}
|
}
|
||||||
}, [moduleApplyModuleId, moduleApplySectionIx, moduleApplyInsertSlot, formData.sections])
|
}, [moduleApplyModuleId, moduleApplySectionIx, moduleApplyInsertSlot])
|
||||||
|
|
||||||
const handleTakeLead = async (unit) => {
|
const handleTakeLead = async (unit) => {
|
||||||
if (!user?.id) return
|
if (!user?.id) return
|
||||||
|
|
@ -1955,8 +1972,11 @@ function TrainingPlanningPage() {
|
||||||
className="form-input"
|
className="form-input"
|
||||||
value={String(moduleApplySectionIx)}
|
value={String(moduleApplySectionIx)}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setModuleApplySectionIx(parseInt(e.target.value, 10))
|
const newIx = parseInt(e.target.value, 10)
|
||||||
setModuleApplyInsertSlot('__end__')
|
setModuleApplySectionIx(newIx)
|
||||||
|
const secsNow = planningFormRef.current?.sections ?? []
|
||||||
|
const len = Array.isArray(secsNow[newIx]?.items) ? secsNow[newIx].items.length : 0
|
||||||
|
setModuleApplyInsertSlot(`before:${len}`)
|
||||||
}}
|
}}
|
||||||
disabled={moduleApplyBusy || !formData.sections?.length}
|
disabled={moduleApplyBusy || !formData.sections?.length}
|
||||||
>
|
>
|
||||||
|
|
@ -1976,8 +1996,10 @@ function TrainingPlanningPage() {
|
||||||
onChange={(e) => setModuleApplyInsertSlot(e.target.value)}
|
onChange={(e) => setModuleApplyInsertSlot(e.target.value)}
|
||||||
disabled={moduleApplyBusy || !(formData.sections?.length > 0)}
|
disabled={moduleApplyBusy || !(formData.sections?.length > 0)}
|
||||||
>
|
>
|
||||||
<option value="__end__">Ans Ende einfügen (nach allen Einträgen)</option>
|
<option value={`before:${moduleApplyTargetItems.length}`}>
|
||||||
<option value="__start__">An den Anfang (vor dem ersten Eintrag)</option>
|
Ans Ende einfügen (nach allen Einträgen)
|
||||||
|
</option>
|
||||||
|
<option value="before:0">An den Anfang (vor dem ersten Eintrag)</option>
|
||||||
{moduleApplyTargetItems.map((row, xi) => {
|
{moduleApplyTargetItems.map((row, xi) => {
|
||||||
const labelPart =
|
const labelPart =
|
||||||
row.item_type === 'note'
|
row.item_type === 'note'
|
||||||
|
|
@ -2526,14 +2548,6 @@ function TrainingPlanningPage() {
|
||||||
<button type="button" className="btn btn-secondary" onClick={handleSaveAsTemplate}>
|
<button type="button" className="btn btn-secondary" onClick={handleSaveAsTemplate}>
|
||||||
Vorlage aus Aufbau speichern
|
Vorlage aus Aufbau speichern
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-secondary"
|
|
||||||
onClick={openModuleApplyModal}
|
|
||||||
title="Modulpositionen hier einfügen (Kopie, auch ohne zwischengespeicherte Einheit)"
|
|
||||||
>
|
|
||||||
Modul einfügen…
|
|
||||||
</button>
|
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
sections={formData.sections}
|
sections={formData.sections}
|
||||||
|
|
@ -2544,10 +2558,17 @@ function TrainingPlanningPage() {
|
||||||
sections: updater(prev.sections),
|
sections: updater(prev.sections),
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
onRequestExercisePick={({ sectionIndex, itemIndex }) => {
|
onRequestTrainingModulePick={(ctx) => {
|
||||||
|
void openModuleApplyModal(ctx)
|
||||||
|
}}
|
||||||
|
onRequestExercisePick={({ sectionIndex, itemIndex, insertBeforeIndex }) => {
|
||||||
setExercisePickerTarget({
|
setExercisePickerTarget({
|
||||||
sIdx: sectionIndex,
|
sIdx: sectionIndex,
|
||||||
iIdx: typeof itemIndex === 'number' ? itemIndex : undefined,
|
iIdx: typeof itemIndex === 'number' ? itemIndex : undefined,
|
||||||
|
insertBeforeIndex:
|
||||||
|
typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
|
||||||
|
? insertBeforeIndex
|
||||||
|
: undefined,
|
||||||
})
|
})
|
||||||
setExercisePickerOpen(true)
|
setExercisePickerOpen(true)
|
||||||
}}
|
}}
|
||||||
|
|
@ -2700,7 +2721,7 @@ function TrainingPlanningPage() {
|
||||||
if (row) rows.push(row)
|
if (row) rows.push(row)
|
||||||
}
|
}
|
||||||
if (!rows.length) return
|
if (!rows.length) return
|
||||||
const { sIdx, iIdx } = exercisePickerTarget
|
const { sIdx, iIdx, insertBeforeIndex } = exercisePickerTarget
|
||||||
setFormData((prev) => ({
|
setFormData((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
sections: prev.sections.map((s, si) => {
|
sections: prev.sections.map((s, si) => {
|
||||||
|
|
@ -2720,7 +2741,13 @@ function TrainingPlanningPage() {
|
||||||
if (tail.length) items.splice(iIdx + 1, 0, ...tail)
|
if (tail.length) items.splice(iIdx + 1, 0, ...tail)
|
||||||
return { ...s, items }
|
return { ...s, items }
|
||||||
}
|
}
|
||||||
return { ...s, items: [...items, ...rows] }
|
const rawAt =
|
||||||
|
typeof insertBeforeIndex === 'number' && Number.isFinite(insertBeforeIndex)
|
||||||
|
? insertBeforeIndex
|
||||||
|
: items.length
|
||||||
|
const at = Math.max(0, Math.min(rawAt, items.length))
|
||||||
|
items.splice(at, 0, ...rows)
|
||||||
|
return { ...s, items }
|
||||||
}),
|
}),
|
||||||
}))
|
}))
|
||||||
setExercisePickerOpen(false)
|
setExercisePickerOpen(false)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user