From 613fedfaff433ca7f31c416dc66edd7e6abd073a Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 15 May 2026 08:02:18 +0200
Subject: [PATCH] Refactor training phase handling in backend and enhance
 TrainingUnitSectionsEditor

- Updated the backend logic to ensure strict ordering of phase indices, preventing UNIQUE constraint violations when phases are duplicated.
- Enhanced the TrainingUnitSectionsEditor component with new state management for editing phase titles and stream names, improving user interaction.
- Implemented conditional rendering for input fields to facilitate inline editing of phase titles and stream names, streamlining the editing process.
---
 backend/routers/training_planning.py          |   8 +-
 .../components/TrainingUnitSectionsEditor.jsx | 202 ++++++++++++++----
 2 files changed, 167 insertions(+), 43 deletions(-)

diff --git a/backend/routers/training_planning.py b/backend/routers/training_planning.py
index 69cf66d..acd9449 100644
--- a/backend/routers/training_planning.py
+++ b/backend/routers/training_planning.py
@@ -1261,9 +1261,9 @@ def _replace_unit_phases(
                 status_code=400,
                 detail="phase_kind muss whole_group oder parallel sein",
             )
-        p_oix = ph.get("order_index")
-        if p_oix is None:
-            p_oix = pi
+        # Reihenfolge strikt aus der Liste (pi): vermeidet UNIQUE(tu, order_index)-Kollisionen,
+        # wenn der Client dieselbe phase_order_index mehrfach trägt (z. B. nach Zuordnungswechseln).
+        p_oix = int(pi)
         cur.execute(
             """
             INSERT INTO training_unit_phases (training_unit_id, order_index, phase_kind, title, guidance_notes)
@@ -1272,7 +1272,7 @@ def _replace_unit_phases(
             """,
             (
                 unit_id,
-                int(p_oix),
+                p_oix,
                 kind,
                 ph.get("title"),
                 ph.get("guidance_notes"),
diff --git a/frontend/src/components/TrainingUnitSectionsEditor.jsx b/frontend/src/components/TrainingUnitSectionsEditor.jsx
index 8785f7f..6f45923 100644
--- a/frontend/src/components/TrainingUnitSectionsEditor.jsx
+++ b/frontend/src/components/TrainingUnitSectionsEditor.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GripVertical, Pencil, X } from 'lucide-react'
 import CombinationMethodProfileEditor from './CombinationMethodProfileEditor'
 import CombinationPlanBracket from './CombinationPlanBracket'
@@ -532,6 +532,13 @@ export default function TrainingUnitSectionsEditor({
   const [dropSectionBand, setDropSectionBand] = useState(null)
   /** Aktiver Reiter pro paralleler Phase (phaseOrder → streamOrder). */
   const [parallelStreamTabByPhase, setParallelStreamTabByPhase] = useState({})
+  /** `${phaseOrder}:${streamOrder}` während Stream-Name bearbeitet wird */
+  const [streamNameEditKey, setStreamNameEditKey] = useState(null)
+  const [streamNameDraft, setStreamNameDraft] = useState('')
+  const [phaseTitleEditPo, setPhaseTitleEditPo] = useState(null)
+  const [phaseTitleDraft, setPhaseTitleDraft] = useState('')
+  const skipStreamNameBlurSave = useRef(false)
+  const skipPhaseTitleBlurSave = useRef(false)
   /** { slot: number, beforeIdx: number } */
 
   useEffect(() => {
@@ -1054,19 +1061,69 @@ export default function TrainingUnitSectionsEditor({
                   >
                     Phase
                   </label>
-                  <input
-                    className="form-input"
-                    style={{ flex: '2 1 160px', maxWidth: '280px', marginBottom: 0 }}
-                    value={
-                      (() => {
-                        const hi = firstSectionIndexByParallelPhase.get(parallelPhaseOrder)
-                        const t = hi != null ? list[hi]?.planLoc?.phaseTitle : null
-                        return t != null ? String(t) : ''
-                      })()
-                    }
-                    onChange={(e) => updateParallelPhaseTitleAll(parallelPhaseOrder, e.target.value)}
-                    placeholder={`Bezeichnung (z. B. Drill runden · Phase ${parallelPhaseOrder})`}
-                  />
+                  {(() => {
+                    const hi = firstSectionIndexByParallelPhase.get(parallelPhaseOrder)
+                    const phaseTitleStr =
+                      hi != null && list[hi]?.planLoc?.phaseTitle != null
+                        ? String(list[hi].planLoc.phaseTitle)
+                        : ''
+                    const editingPhase = phaseTitleEditPo === parallelPhaseOrder
+                    return editingPhase ? (
+                      <input
+                        className="form-input"
+                        style={{ flex: '2 1 200px', maxWidth: '320px', marginBottom: 0 }}
+                        autoFocus
+                        value={phaseTitleDraft}
+                        onChange={(e) => setPhaseTitleDraft(e.target.value)}
+                        onBlur={() => {
+                          if (!skipPhaseTitleBlurSave.current) {
+                            updateParallelPhaseTitleAll(parallelPhaseOrder, phaseTitleDraft)
+                          }
+                          skipPhaseTitleBlurSave.current = false
+                          setPhaseTitleEditPo(null)
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') e.currentTarget.blur()
+                          if (e.key === 'Escape') {
+                            skipPhaseTitleBlurSave.current = true
+                            setPhaseTitleEditPo(null)
+                            e.currentTarget.blur()
+                          }
+                        }}
+                        placeholder="Bezeichnung der Phase (z. B. Drill-Runde)"
+                      />
+                    ) : (
+                      <>
+                        <span
+                          style={{
+                            flex: '2 1 200px',
+                            maxWidth: '320px',
+                            fontSize: '0.86rem',
+                            fontWeight: 600,
+                            color: 'var(--text1)',
+                            lineHeight: 1.35,
+                            padding: '6px 4px',
+                          }}
+                        >
+                          {(phaseTitleStr || '').trim() ||
+                            `Phase ${parallelPhaseOrder} · Namen per Stift bearbeiten`}
+                        </span>
+                        <button
+                          type="button"
+                          className="tu-icon-btn"
+                          style={{ padding: '6px', color: 'var(--text2)' }}
+                          aria-label="Phasen-Bezeichnung bearbeiten"
+                          title="Namen bearbeiten"
+                          onClick={() => {
+                            setPhaseTitleEditPo(parallelPhaseOrder)
+                            setPhaseTitleDraft(phaseTitleStr)
+                          }}
+                        >
+                          <Pencil size={16} strokeWidth={2} aria-hidden />
+                        </button>
+                      </>
+                    )
+                  })()}
                   <button
                     type="button"
                     className="btn btn-secondary framework-ctrl framework-ctrl--xs"
@@ -1105,46 +1162,104 @@ export default function TrainingUnitSectionsEditor({
                     const si = sectionIndicesForParallelStream(list, parallelPhaseOrder, so)
                     const titleSource = si.length ? list[si[0]]?.planLoc?.streamTitle : null
                     const streamName = titleSource != null ? String(titleSource) : ''
+                    const editKey = `${parallelPhaseOrder}:${so}`
+                    const editingStream = streamNameEditKey === editKey
                     return (
                       <div
                         key={`p${parallelPhaseOrder}-chip-s${so}`}
-                        role="tab"
-                        aria-selected={sel}
-                        className={sel ? 'tu-stream-chip tu-stream-chip--active' : 'tu-stream-chip'}
                         style={{
                           display: 'inline-flex',
                           alignItems: 'center',
-                          gap: '6px',
+                          gap: '4px',
                           padding: '4px 6px 4px 8px',
                           borderRadius: '999px',
-                          cursor: 'pointer',
                           border: sel ? `2px solid ${pv.border}` : `1px solid ${pv.border}`,
                           background: sel ? pv.tabBgActive : pv.tabBg,
                           maxWidth: '100%',
                         }}
-                        onClick={() =>
-                          setParallelStreamTabByPhase((prev) => ({ ...prev, [parallelPhaseOrder]: so }))
-                        }
                       >
-                        <input
-                          className="form-input"
+                        {editingStream ? (
+                          <input
+                            className="form-input"
+                            autoFocus
+                            style={{
+                              minWidth: '7rem',
+                              maxWidth: '12rem',
+                              margin: 0,
+                              padding: '4px 8px',
+                              fontSize: '0.8rem',
+                              borderRadius: '8px',
+                            }}
+                            value={streamNameDraft}
+                            onChange={(e) => setStreamNameDraft(e.target.value)}
+                            onBlur={() => {
+                              if (!skipStreamNameBlurSave.current) {
+                                updateParallelStreamTitleAll(parallelPhaseOrder, so, streamNameDraft)
+                              }
+                              skipStreamNameBlurSave.current = false
+                              setStreamNameEditKey(null)
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') e.currentTarget.blur()
+                              if (e.key === 'Escape') {
+                                skipStreamNameBlurSave.current = true
+                                setStreamNameEditKey(null)
+                                e.currentTarget.blur()
+                              }
+                            }}
+                            onClick={(e) => e.stopPropagation()}
+                            placeholder={`Gruppe ${so + 1}`}
+                            aria-label={`Name Gruppe ${so + 1}`}
+                          />
+                        ) : (
+                          <button
+                            type="button"
+                            role="tab"
+                            aria-selected={sel}
+                            style={{
+                              flex: '1 1 auto',
+                              minWidth: '5.5rem',
+                              maxWidth: '12rem',
+                              margin: 0,
+                              padding: '6px 10px',
+                              fontSize: '0.85rem',
+                              fontWeight: sel ? 600 : 500,
+                              border: 'none',
+                              background: 'transparent',
+                              color: 'var(--text1)',
+                              textAlign: 'left',
+                              cursor: 'pointer',
+                              borderRadius: '8px',
+                            }}
+                            onClick={() =>
+                              setParallelStreamTabByPhase((prev) => ({
+                                ...prev,
+                                [parallelPhaseOrder]: so,
+                              }))
+                            }
+                          >
+                            {(streamName || '').trim() || `Gruppe ${so + 1}`}
+                          </button>
+                        )}
+                        <button
+                          type="button"
+                          className="tu-icon-btn"
                           style={{
-                            minWidth: '5.5rem',
-                            maxWidth: '11rem',
-                            margin: 0,
-                            padding: '4px 8px',
-                            fontSize: '0.8rem',
+                            flex: '0 0 auto',
+                            padding: '4px',
+                            color: 'var(--text2)',
                             borderRadius: '8px',
-                            flex: '1 1 auto',
                           }}
-                          value={streamName}
-                          onChange={(e) =>
-                            updateParallelStreamTitleAll(parallelPhaseOrder, so, e.target.value)
-                          }
-                          onClick={(e) => e.stopPropagation()}
-                          placeholder={`Gruppe ${so + 1}`}
-                          aria-label={`Name Stream ${so + 1}`}
-                        />
+                          title="Gruppennamen bearbeiten"
+                          aria-label="Gruppennamen bearbeiten"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setStreamNameEditKey(editKey)
+                            setStreamNameDraft(streamName)
+                          }}
+                        >
+                          <Pencil size={15} strokeWidth={2} aria-hidden />
+                        </button>
                         <button
                           type="button"
                           className="tu-icon-btn"
@@ -1871,8 +1986,17 @@ export default function TrainingUnitSectionsEditor({
               type="button"
               className="btn btn-secondary framework-ctrl framework-ctrl--xs"
               onClick={addParallelPhaseTwoStreams}
+              disabled={
+                list.length > 0 &&
+                list[list.length - 1]?.planLoc?.phaseKind === 'parallel'
+              }
+              title={
+                list.length > 0 && list[list.length - 1]?.planLoc?.phaseKind === 'parallel'
+                  ? 'Splitten direkt nach einem parallelen Block ist un\u00fcblich. Zuerst eine Ganzgruppen-Phase oder einen Ganzgruppen-Abschnitt anf\u00fcgen, dann erneut splitten.'
+                  : 'Zwei parallele Gruppen mit je einem Abschnitt anlegen'
+              }
             >
-              Zwei Gruppen parallel
+              Gruppen splitten
             </button>
             <button
               type="button"