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>
This commit is contained in:
parent
af89546022
commit
80986735b5
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user