Kairo-Jinkendo/frontend/src/pages/WorkspacePage.jsx

78 lines
2.4 KiB
React
Raw Normal View History

import { Link } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import { useCapabilities } from '../hooks/useCapabilities.js'
import { getWidgetsForArea } from '../registry/widgetRegistry.js'
import { useSession } from '../context/SessionContext.jsx'
import { InitiativeForm } from '../components/InitiativeForm.jsx'
import { createInitiative } from '../api/initiatives.js'
import { useState } from 'react'
export function WorkspacePage() {
const navigate = useNavigate()
const { context } = useSession()
const { capabilities, hasCapability } = useCapabilities()
const widgets = getWidgetsForArea('workspace', capabilities)
const [showForm, setShowForm] = useState(false)
const [formBusy, setFormBusy] = useState(false)
const [formError, setFormError] = useState(null)
async function handleCreateInitiative(payload) {
setFormBusy(true)
setFormError(null)
try {
await createInitiative({
...payload,
owner_actor_id: context?.actor?.id,
})
setShowForm(false)
navigate('/initiatives')
} catch (err) {
setFormError(err.message)
} finally {
setFormBusy(false)
}
}
return (
<div className="page workspace-page">
<header className="page-header">
<div>
<h1>Workspace</h1>
<p className="muted">Dein Überblick über Vorhaben und Maßnahmen.</p>
</div>
{hasCapability('kairo.initiative.manage') && (
<button type="button" onClick={() => setShowForm((v) => !v)}>
{showForm ? 'Abbrechen' : 'Vorhaben anlegen'}
</button>
)}
</header>
{showForm && (
<section className="card inline-form-card">
<h2>Neues Vorhaben</h2>
{formError && <p className="error">{formError}</p>}
<InitiativeForm
onSubmit={handleCreateInitiative}
onCancel={() => setShowForm(false)}
busy={formBusy}
submitLabel="Vorhaben anlegen"
/>
</section>
)}
<div className="widget-grid">
{widgets.map((widget) => {
const Component = widget.component
return <Component key={widget.key} />
})}
</div>
{hasCapability('kairo.initiative.read') && (
<p className="page-footer-link">
<Link to="/initiatives">Zur Vorhabenliste →</Link>
</p>
)}
</div>
)
}