fix: Stilrichtungen → Fokusbereich Zuordnung (focus_area_id)
Some checks failed
Deploy Development / deploy (push) Successful in 35s
Test Suite / lint-backend (push) Successful in 0s
Test Suite / build-frontend (push) Successful in 5s
Test Suite / playwright-tests (push) Failing after 1m54s

Problem: Stilrichtungen-Tab zeigte falsches Feld 'Übergeordneter Stil' (parent_style_id)
Lösung: Fokusbereich-Dropdown (focus_area_id) für Hierarchie

Backend (catalogs.py):
- INSERT: focus_area_id Parameter hinzugefügt
- UPDATE: focus_area_id Parameter hinzugefügt
- SELECT: LEFT JOIN focus_areas für focus_area_name + icon
- Response enriched mit focus_area_name/icon

Frontend (AdminCatalogsPage.jsx):
- newTS State: parent_style_id → focus_area_id
- Create Form: Fokusbereich-Dropdown statt 'Übergeordneter Stil'
- Edit Form: Fokusbereich-Dropdown mit focusAreas
- Display: Zeigt Fokusbereich-Icon + Name (accent color)
- parent_style_id bleibt für optionale Stil-Hierarchien

Jetzt kann Hierarchie korrekt angelegt werden:
 Karate → Goju-Ryu
 Karate → Shotokan
 Gewaltschutz → (eigene Stilrichtungen)

version: 0.5.0
module: catalogs 1.5.0, AdminCatalogsPage 2.2.0

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-04-23 14:36:02 +02:00
parent 377f365473
commit 9f44cff77b
2 changed files with 32 additions and 21 deletions

View File

@ -141,9 +141,10 @@ def list_training_styles(
cur = get_cursor(conn)
query = """
SELECT ts.*, ps.name as parent_style_name
SELECT ts.*, ps.name as parent_style_name, fa.name as focus_area_name, fa.icon as focus_area_icon
FROM style_directions ts
LEFT JOIN style_directions ps ON ts.parent_style_id = ps.id
LEFT JOIN focus_areas fa ON ts.focus_area_id = fa.id
"""
params = []
@ -173,13 +174,14 @@ def create_training_style(data: dict, session=Depends(require_auth)):
cur = get_cursor(conn)
cur.execute("""
INSERT INTO style_directions (name, abbreviation, description, parent_style_id, sort_order, status)
VALUES (%s, %s, %s, %s, %s, %s)
INSERT INTO style_directions (name, abbreviation, description, focus_area_id, parent_style_id, sort_order, status)
VALUES (%s, %s, %s, %s, %s, %s, %s)
RETURNING id
""", (
name,
data.get('abbreviation'),
data.get('description'),
data.get('focus_area_id'),
data.get('parent_style_id'),
data.get('sort_order', 99),
data.get('status', 'active')
@ -189,9 +191,10 @@ def create_training_style(data: dict, session=Depends(require_auth)):
conn.commit()
cur.execute("""
SELECT ts.*, ps.name as parent_style_name
SELECT ts.*, ps.name as parent_style_name, fa.name as focus_area_name, fa.icon as focus_area_icon
FROM style_directions ts
LEFT JOIN style_directions ps ON ts.parent_style_id = ps.id
LEFT JOIN focus_areas fa ON ts.focus_area_id = fa.id
WHERE ts.id = %s
""", (style_id,))
return r2d(cur.fetchone())
@ -212,6 +215,7 @@ def update_training_style(style_id: int, data: dict, session=Depends(require_aut
name = %s,
abbreviation = %s,
description = %s,
focus_area_id = %s,
parent_style_id = %s,
sort_order = %s,
status = %s,
@ -221,6 +225,7 @@ def update_training_style(style_id: int, data: dict, session=Depends(require_aut
data.get('name'),
data.get('abbreviation'),
data.get('description'),
data.get('focus_area_id'),
data.get('parent_style_id'),
data.get('sort_order'),
data.get('status'),
@ -230,9 +235,10 @@ def update_training_style(style_id: int, data: dict, session=Depends(require_aut
conn.commit()
cur.execute("""
SELECT ts.*, ps.name as parent_style_name
SELECT ts.*, ps.name as parent_style_name, fa.name as focus_area_name, fa.icon as focus_area_icon
FROM style_directions ts
LEFT JOIN style_directions ps ON ts.parent_style_id = ps.id
LEFT JOIN focus_areas fa ON ts.focus_area_id = fa.id
WHERE ts.id = %s
""", (style_id,))
return r2d(cur.fetchone())

View File

@ -11,10 +11,10 @@ export default function AdminCatalogsPage() {
const [editingFA, setEditingFA] = useState(null)
const [newFA, setNewFA] = useState({ name: '', description: '', color: '#1D9E75', icon: '' })
// Training Styles
// Style Directions (Stilrichtungen)
const [trainingStyles, setTrainingStyles] = useState([])
const [editingTS, setEditingTS] = useState(null)
const [newTS, setNewTS] = useState({ name: '', description: '', parent_style_id: null })
const [newTS, setNewTS] = useState({ name: '', description: '', focus_area_id: null })
// Training Characters
const [trainingCharacters, setTrainingCharacters] = useState([])
@ -139,7 +139,7 @@ export default function AdminCatalogsPage() {
async function createStyleDirection() {
try {
await api.createStyleDirection(newTS)
setNewTS({ name: '', description: '', parent_style_id: null })
setNewTS({ name: '', description: '', focus_area_id: null })
loadData()
} catch (e) {
setError(e.message)
@ -497,15 +497,15 @@ export default function AdminCatalogsPage() {
/>
</div>
<div className="form-row">
<label className="form-label">Übergeordneter Stil (optional)</label>
<label className="form-label">Fokusbereich</label>
<select
className="form-input"
value={newTS.parent_style_id || ''}
onChange={e => setNewTS({ ...newTS, parent_style_id: e.target.value ? parseInt(e.target.value) : null })}
value={newTS.focus_area_id || ''}
onChange={e => setNewTS({ ...newTS, focus_area_id: e.target.value ? parseInt(e.target.value) : null })}
>
<option value="">- Kein -</option>
{trainingStyles.map(ts => (
<option key={ts.id} value={ts.id}>{ts.name}</option>
<option value="">- Fokusbereich auswählen -</option>
{focusAreas.map(fa => (
<option key={fa.id} value={fa.id}>{fa.icon} {fa.name}</option>
))}
</select>
</div>
@ -535,15 +535,15 @@ export default function AdminCatalogsPage() {
/>
</div>
<div className="form-row">
<label className="form-label">Übergeordneter Stil</label>
<label className="form-label">Fokusbereich</label>
<select
className="form-input"
value={editingTS.parent_style_id || ''}
onChange={e => setEditingTS({ ...editingTS, parent_style_id: e.target.value ? parseInt(e.target.value) : null })}
value={editingTS.focus_area_id || ''}
onChange={e => setEditingTS({ ...editingTS, focus_area_id: e.target.value ? parseInt(e.target.value) : null })}
>
<option value="">- Kein -</option>
{trainingStyles.filter(x => x.id !== ts.id).map(x => (
<option key={x.id} value={x.id}>{x.name}</option>
<option value="">- Fokusbereich auswählen -</option>
{focusAreas.map(fa => (
<option key={fa.id} value={fa.id}>{fa.icon} {fa.name}</option>
))}
</select>
</div>
@ -555,9 +555,14 @@ export default function AdminCatalogsPage() {
) : (
<div>
<h3>{ts.name}</h3>
{ts.focus_area_name && (
<p style={{ margin: '4px 0', color: 'var(--accent)', fontSize: '14px', fontWeight: 500 }}>
{ts.focus_area_icon} {ts.focus_area_name}
</p>
)}
{ts.parent_style_name && (
<p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
{ts.parent_style_name}
Untergeordnet: {ts.parent_style_name}
</p>
)}
<p style={{ margin: '8px 0', color: 'var(--text2)' }}>{ts.description}</p>