103 lines
2.9 KiB
React
103 lines
2.9 KiB
React
|
import { useState } from 'react'
|
||
|
|
import {
|
||
|
|
BLOCKER_STATUSES,
|
||
|
|
BLOCKER_STATUS_LABELS,
|
||
|
|
} from '../constants/status.js'
|
||
|
|
import { StatusBadge } from './StatusBadge.jsx'
|
||
|
|
import { EmptyState } from './EmptyState.jsx'
|
||
|
|
|
||
|
|
export function BlockersSection({
|
||
|
|
blockers,
|
||
|
|
canManage,
|
||
|
|
onCreate,
|
||
|
|
onUpdateStatus,
|
||
|
|
onDelete,
|
||
|
|
busy,
|
||
|
|
}) {
|
||
|
|
const [title, setTitle] = useState('')
|
||
|
|
const [showForm, setShowForm] = useState(false)
|
||
|
|
|
||
|
|
async function handleSubmit(e) {
|
||
|
|
e.preventDefault()
|
||
|
|
if (!title.trim()) return
|
||
|
|
await onCreate({ title: title.trim() })
|
||
|
|
setTitle('')
|
||
|
|
setShowForm(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="card">
|
||
|
|
<div className="section-header">
|
||
|
|
<h2>Blocker</h2>
|
||
|
|
{canManage && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-primary btn-block-mobile"
|
||
|
|
onClick={() => setShowForm((v) => !v)}
|
||
|
|
>
|
||
|
|
{showForm ? 'Abbrechen' : 'Blocker melden'}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{showForm && canManage && (
|
||
|
|
<form className="inline-form-block" onSubmit={handleSubmit}>
|
||
|
|
<label>
|
||
|
|
Titel
|
||
|
|
<input
|
||
|
|
value={title}
|
||
|
|
onChange={(e) => setTitle(e.target.value)}
|
||
|
|
maxLength={255}
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<button type="submit" className="btn btn-primary" disabled={busy}>
|
||
|
|
Anlegen
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{blockers.length === 0 && <EmptyState message="Keine Blocker." />}
|
||
|
|
|
||
|
|
<ul className="item-list">
|
||
|
|
{blockers.map((blocker) => (
|
||
|
|
<li key={blocker.id} className="list-item card-list-item">
|
||
|
|
<div className="list-item-main">
|
||
|
|
<strong>{blocker.title}</strong>
|
||
|
|
{blocker.description && (
|
||
|
|
<p className="list-item-desc">{blocker.description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="list-item-meta action-controls">
|
||
|
|
<StatusBadge kind="blocker" status={blocker.status} />
|
||
|
|
{canManage && (
|
||
|
|
<>
|
||
|
|
<select
|
||
|
|
className="inline-select"
|
||
|
|
value={blocker.status}
|
||
|
|
onChange={(e) => onUpdateStatus(blocker.id, e.target.value)}
|
||
|
|
aria-label="Blocker-Status"
|
||
|
|
>
|
||
|
|
{BLOCKER_STATUSES.map((s) => (
|
||
|
|
<option key={s} value={s}>
|
||
|
|
{BLOCKER_STATUS_LABELS[s]}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-secondary"
|
||
|
|
onClick={() => onDelete(blocker.id)}
|
||
|
|
>
|
||
|
|
Löschen
|
||
|
|
</button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|