GovOPlaN/govoplan-committee
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 10:42:51 +02:00
parent 1351338590
commit 0e03f6a70c
3 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/committee/CommitteeRecordDialog.tsx
+13 -13
View File
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from "react";
import {
import { FormGrid,
Button,
ConfirmDialog,
Dialog,
@@ -176,7 +176,7 @@ export default function CommitteeRecordDialog({
<div className="committee-record-form">
<div className="committee-dialog-help"><DocumentationHelpLink reference={COMMITTEE_FIELD_DOCUMENTATION} /></div>
{error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
<div className="committee-form-grid">
<FormGrid columns={2} gap="compact" collapseAt="narrow">
<FormField label="Title" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
<input
value={draft.title}
@@ -194,7 +194,7 @@ export default function CommitteeRecordDialog({
{stateOptions.map((state) => <option key={state} value={state}>{stateLabel(state)}</option>)}
</select>
</FormField>
</div>
</FormGrid>
{kind === "body" ? (
<FormField label="Responsible organization unit ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
@@ -207,19 +207,19 @@ export default function CommitteeRecordDialog({
) : null}
{kind === "meeting" ? (
<div className="committee-form-grid">
<FormGrid columns={2} gap="compact" collapseAt="narrow">
<FormField label="Starts">
<input type="datetime-local" value={draft.startsAt} disabled={busy} onChange={(event) => setDraft({ ...draft, startsAt: event.target.value })} />
</FormField>
<FormField label="Ends">
<input type="datetime-local" value={draft.endsAt} disabled={busy} onChange={(event) => setDraft({ ...draft, endsAt: event.target.value })} />
</FormField>
</div>
</FormGrid>
) : null}
{kind === "agenda_item" ? (
<>
<div className="committee-form-grid committee-form-grid-three">
<FormGrid columns={3} gap="compact" collapseAt="narrow">
<FormField label="Position">
<input type="number" min="1" value={draft.position} disabled={busy} onChange={(event) => setDraft({ ...draft, position: event.target.value })} />
</FormField>
@@ -234,7 +234,7 @@ export default function CommitteeRecordDialog({
<FormField label="Subject ID">
<input value={draft.subjectId} disabled={busy} onChange={(event) => setDraft({ ...draft, subjectId: event.target.value })} />
</FormField>
</div>
</FormGrid>
{draft.state === "decided" ? (
<FormField label="Formal Decision ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
<input value={draft.decisionId} disabled={busy} onChange={(event) => setDraft({ ...draft, decisionId: event.target.value })} />
@@ -245,7 +245,7 @@ export default function CommitteeRecordDialog({
{kind === "vote" ? (
<>
<div className="committee-form-grid committee-form-grid-three">
<FormGrid columns={3} gap="compact" collapseAt="narrow">
<FormField label="Method">
<select value={draft.method} disabled={busy} onChange={(event) => setDraft({ ...draft, method: event.target.value })}>
<option value="recorded">Recorded</option>
@@ -259,7 +259,7 @@ export default function CommitteeRecordDialog({
<FormField label="Ballot provider (optional)" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
<input value={draft.providerId} disabled={busy} onChange={(event) => setDraft({ ...draft, providerId: event.target.value })} />
</FormField>
</div>
</FormGrid>
<FormField label="Voting ballot ID (optional)" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
<input value={draft.votingBallotId} disabled={busy} onChange={(event) => setDraft({ ...draft, votingBallotId: event.target.value })} />
</FormField>
@@ -268,7 +268,7 @@ export default function CommitteeRecordDialog({
</FormField>
{draft.state === "closed" ? (
<div className="committee-vote-result-fields">
<div className="committee-form-grid">
<FormGrid columns={2} gap="compact" collapseAt="narrow">
<FormField label="Votes cast">
<input type="number" min="0" value={draft.castCount} disabled={busy} onChange={(event) => setDraft({ ...draft, castCount: event.target.value })} />
</FormField>
@@ -278,7 +278,7 @@ export default function CommitteeRecordDialog({
<option value="not-met">Not met</option>
</select>
</FormField>
</div>
</FormGrid>
<div className="committee-count-grid">
{choices.map((choice) => (
<FormField key={choice} label={`${choice} votes`}>
@@ -344,14 +344,14 @@ export default function CommitteeRecordDialog({
function EvidenceFields({ draft, busy, setDraft }: { draft: Draft; busy: boolean; setDraft: (draft: Draft) => void }) {
return (
<div className="committee-form-grid">
<FormGrid columns={2} gap="compact" collapseAt="narrow">
<FormField label="Approval ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
<input value={draft.approvalId} disabled={busy} onChange={(event) => setDraft({ ...draft, approvalId: event.target.value })} />
</FormField>
<FormField label="Evidence record ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
<input value={draft.evidenceId} disabled={busy} onChange={(event) => setDraft({ ...draft, evidenceId: event.target.value })} />
</FormField>
</div>
</FormGrid>
);
}