From 80986735b5b0bae24f72e44f2bbb67a259806d36 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 24 Apr 2026 08:39:48 +0200
Subject: [PATCH] feat: complete admin hierarchy - create + reassign functions

Create Functions:
- '+ Neu' buttons for Style Directions and Training Types
- Create forms with focus area context
- Auto-assigns to parent focus area
- Loading states + validation

Reassignment:
- Focus area dropdown in edit forms
- Move style directions between focus areas
- Move training types between focus areas
- Updates hierarchy immediately after save

Full CRUD now complete:
- Create: new elements under focus area
- Read: tree view with nested elements
- Update: edit + reassign to different focus area
- Delete: with confirmation dialogs

Mobile + Desktop responsive design maintained.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 frontend/src/pages/AdminHierarchyPage.jsx | 254 +++++++++++++++++++---
 1 file changed, 220 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/AdminHierarchyPage.jsx b/frontend/src/pages/AdminHierarchyPage.jsx
index 54e424f..ebdf7de 100644
--- a/frontend/src/pages/AdminHierarchyPage.jsx
+++ b/frontend/src/pages/AdminHierarchyPage.jsx
@@ -136,7 +136,7 @@ function AdminHierarchyPage() {
             >
               ← Zurück zur Übersicht
             </button>
-            <DetailPanel item={selectedItem} onUpdate={loadHierarchy} />
+            <DetailPanel item={selectedItem} onUpdate={loadHierarchy} focusAreas={hierarchy} />
           </div>
         )}
       </div>
@@ -183,38 +183,54 @@ function FocusAreaNode({ focusArea, expanded, onToggle, onSelect, selectedId, se
       {isExpanded && (
         <div style={{ marginLeft: '28px', marginTop: '8px' }}>
           {/* Style Directions Section */}
-          {focusArea.style_directions && focusArea.style_directions.length > 0 && (
-            <div style={{ marginBottom: '12px' }}>
-              <div style={{ fontSize: '12px', color: 'var(--text3)', marginBottom: '6px', textTransform: 'uppercase' }}>
-                Stilrichtungen
-              </div>
-              {focusArea.style_directions.map(sd => (
-                <StyleDirectionNode
-                  key={sd.id}
-                  styleDirection={sd}
-                  onSelect={onSelect}
-                  isSelected={selectedType === 'style_direction' && selectedId === sd.id}
-                />
-              ))}
+          <div style={{ marginBottom: '12px' }}>
+            <div style={{ fontSize: '12px', color: 'var(--text3)', marginBottom: '6px', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <span>Stilrichtungen</span>
+              <button
+                className="btn"
+                style={{ fontSize: '11px', padding: '4px 8px' }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onSelect({ _createType: 'style_direction', focus_area_id: focusArea.id, focus_area_name: focusArea.name }, 'create_style_direction')
+                }}
+              >
+                + Neu
+              </button>
             </div>
-          )}
+            {focusArea.style_directions && focusArea.style_directions.map(sd => (
+              <StyleDirectionNode
+                key={sd.id}
+                styleDirection={sd}
+                onSelect={onSelect}
+                isSelected={selectedType === 'style_direction' && selectedId === sd.id}
+              />
+            ))}
+          </div>
 
           {/* Training Types Section */}
-          {focusArea.training_types && focusArea.training_types.length > 0 && (
-            <div>
-              <div style={{ fontSize: '12px', color: 'var(--text3)', marginBottom: '6px', textTransform: 'uppercase' }}>
-                Trainingstypen
-              </div>
-              {focusArea.training_types.map(tt => (
-                <TrainingTypeNode
-                  key={tt.id}
-                  trainingType={tt}
-                  onSelect={onSelect}
-                  isSelected={selectedType === 'training_type' && selectedId === tt.id}
-                />
-              ))}
+          <div>
+            <div style={{ fontSize: '12px', color: 'var(--text3)', marginBottom: '6px', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <span>Trainingstypen</span>
+              <button
+                className="btn"
+                style={{ fontSize: '11px', padding: '4px 8px' }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onSelect({ _createType: 'training_type', focus_area_id: focusArea.id, focus_area_name: focusArea.name }, 'create_training_type')
+                }}
+              >
+                + Neu
+              </button>
             </div>
-          )}
+            {focusArea.training_types && focusArea.training_types.map(tt => (
+              <TrainingTypeNode
+                key={tt.id}
+                trainingType={tt}
+                onSelect={onSelect}
+                isSelected={selectedType === 'training_type' && selectedId === tt.id}
+              />
+            ))}
+          </div>
         </div>
       )}
     </div>
@@ -278,7 +294,7 @@ function TrainingTypeNode({ trainingType, onSelect, isSelected }) {
 // Detail Panel (Edit Forms)
 // ============================================================================
 
-function DetailPanel({ item, onUpdate }) {
+function DetailPanel({ item, onUpdate, focusAreas }) {
   if (!item) return null
 
   const type = item._type
@@ -286,9 +302,13 @@ function DetailPanel({ item, onUpdate }) {
   if (type === 'focus_area') {
     return <FocusAreaDetail focusArea={item} onUpdate={onUpdate} />
   } else if (type === 'style_direction') {
-    return <StyleDirectionDetail styleDirection={item} onUpdate={onUpdate} />
+    return <StyleDirectionDetail styleDirection={item} onUpdate={onUpdate} focusAreas={focusAreas} />
   } else if (type === 'training_type') {
-    return <TrainingTypeDetail trainingType={item} onUpdate={onUpdate} />
+    return <TrainingTypeDetail trainingType={item} onUpdate={onUpdate} focusAreas={focusAreas} />
+  } else if (type === 'create_style_direction') {
+    return <CreateStyleDirectionForm context={item} onUpdate={onUpdate} />
+  } else if (type === 'create_training_type') {
+    return <CreateTrainingTypeForm context={item} onUpdate={onUpdate} />
   }
 
   return null
@@ -360,7 +380,7 @@ function FocusAreaDetail({ focusArea, onUpdate }) {
   )
 }
 
-function StyleDirectionDetail({ styleDirection, onUpdate }) {
+function StyleDirectionDetail({ styleDirection, onUpdate, focusAreas }) {
   const [editing, setEditing] = useState(false)
   const [form, setForm] = useState({
     name: styleDirection.name,
@@ -445,6 +465,19 @@ function StyleDirectionDetail({ styleDirection, onUpdate }) {
           rows={4}
         />
       </div>
+      <div className="form-row">
+        <label className="form-label">Fokusbereich (Zuordnung ändern)</label>
+        <select
+          className="form-input"
+          value={form.focus_area_id || ''}
+          onChange={e => setForm({ ...form, focus_area_id: parseInt(e.target.value) })}
+        >
+          <option value="">- Fokusbereich auswählen -</option>
+          {focusAreas && focusAreas.map(fa => (
+            <option key={fa.id} value={fa.id}>{fa.icon} {fa.name}</option>
+          ))}
+        </select>
+      </div>
       <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
         <button className="btn btn-primary" onClick={handleSave}>Speichern</button>
         <button className="btn" onClick={() => setEditing(false)}>Abbrechen</button>
@@ -453,7 +486,7 @@ function StyleDirectionDetail({ styleDirection, onUpdate }) {
   )
 }
 
-function TrainingTypeDetail({ trainingType, onUpdate }) {
+function TrainingTypeDetail({ trainingType, onUpdate, focusAreas }) {
   const [editing, setEditing] = useState(false)
   const [form, setForm] = useState({
     name: trainingType.name,
@@ -525,6 +558,19 @@ function TrainingTypeDetail({ trainingType, onUpdate }) {
           rows={4}
         />
       </div>
+      <div className="form-row">
+        <label className="form-label">Fokusbereich (Zuordnung ändern)</label>
+        <select
+          className="form-input"
+          value={form.focus_area_id || ''}
+          onChange={e => setForm({ ...form, focus_area_id: parseInt(e.target.value) })}
+        >
+          <option value="">- Fokusbereich auswählen -</option>
+          {focusAreas && focusAreas.map(fa => (
+            <option key={fa.id} value={fa.id}>{fa.icon} {fa.name}</option>
+          ))}
+        </select>
+      </div>
       <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
         <button className="btn btn-primary" onClick={handleSave}>Speichern</button>
         <button className="btn" onClick={() => setEditing(false)}>Abbrechen</button>
@@ -533,4 +579,144 @@ function TrainingTypeDetail({ trainingType, onUpdate }) {
   )
 }
 
+// ============================================================================
+// Create Forms
+// ============================================================================
+
+function CreateStyleDirectionForm({ context, onUpdate }) {
+  const [form, setForm] = useState({
+    name: '',
+    abbreviation: '',
+    description: '',
+    focus_area_id: context.focus_area_id
+  })
+  const [loading, setLoading] = useState(false)
+
+  async function handleCreate() {
+    if (!form.name) {
+      alert('Name ist erforderlich')
+      return
+    }
+    setLoading(true)
+    try {
+      await api.createStyleDirection(form)
+      onUpdate()
+    } catch (e) {
+      alert('Fehler: ' + e.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <h2>Neue Stilrichtung für {context.focus_area_name}</h2>
+      <div className="form-row">
+        <label className="form-label">Name *</label>
+        <input
+          className="form-input"
+          value={form.name}
+          onChange={e => setForm({ ...form, name: e.target.value })}
+          placeholder="z.B. Shotokan"
+        />
+      </div>
+      <div className="form-row">
+        <label className="form-label">Kürzel</label>
+        <input
+          className="form-input"
+          value={form.abbreviation}
+          onChange={e => setForm({ ...form, abbreviation: e.target.value })}
+          placeholder="z.B. SKA"
+        />
+      </div>
+      <div className="form-row">
+        <label className="form-label">Beschreibung</label>
+        <textarea
+          className="form-input"
+          value={form.description}
+          onChange={e => setForm({ ...form, description: e.target.value })}
+          rows={4}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+        <button
+          className="btn btn-primary"
+          onClick={handleCreate}
+          disabled={loading}
+        >
+          {loading ? 'Erstelle...' : 'Erstellen'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function CreateTrainingTypeForm({ context, onUpdate }) {
+  const [form, setForm] = useState({
+    name: '',
+    abbreviation: '',
+    description: '',
+    focus_area_id: context.focus_area_id
+  })
+  const [loading, setLoading] = useState(false)
+
+  async function handleCreate() {
+    if (!form.name) {
+      alert('Name ist erforderlich')
+      return
+    }
+    setLoading(true)
+    try {
+      await api.createTrainingType(form)
+      onUpdate()
+    } catch (e) {
+      alert('Fehler: ' + e.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <h2>Neuer Trainingstyp für {context.focus_area_name}</h2>
+      <div className="form-row">
+        <label className="form-label">Name *</label>
+        <input
+          className="form-input"
+          value={form.name}
+          onChange={e => setForm({ ...form, name: e.target.value })}
+          placeholder="z.B. Breitensport"
+        />
+      </div>
+      <div className="form-row">
+        <label className="form-label">Kürzel</label>
+        <input
+          className="form-input"
+          value={form.abbreviation}
+          onChange={e => setForm({ ...form, abbreviation: e.target.value })}
+          placeholder="z.B. BS"
+        />
+      </div>
+      <div className="form-row">
+        <label className="form-label">Beschreibung</label>
+        <textarea
+          className="form-input"
+          value={form.description}
+          onChange={e => setForm({ ...form, description: e.target.value })}
+          rows={4}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+        <button
+          className="btn btn-primary"
+          onClick={handleCreate}
+          disabled={loading}
+        >
+          {loading ? 'Erstelle...' : 'Erstellen'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
 export default AdminHierarchyPage