78 lines
2.4 KiB
React
78 lines
2.4 KiB
React
|
|
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>
|
||
|
|
)
|
||
|
|
}
|