Show positions that do not exist yet, and let them be corrected
Two gaps in the positions view, both reported from use.
A position dated into the future was invisible. loadOpenPositions required
valid_from <= today, so a position decided now and effective at the quarter
boundary appeared nowhere until the day it began. The database already held
one — 60000824 "Neue Position", effective 01.09. — created through the
application and shown on no screen since.
Future positions now have their own section rather than joining the vacancy
list. They are a different statement: "nobody is here" and "this does not
exist yet" should not be counted together, and a position starting 01.10.
read as a vacancy nobody was filling.
Positions could only be created and deleted. Fixing a typo in the job title
meant deleting and recreating — with a new position number, which appears in
job postings, budgets and audit entries, and whose trail then breaks.
update_position keeps the number and records old and new values per field,
using the audit detail added earlier today.
Three things it refuses, as guards rather than remarks:
- Moving an occupied position to another unit. That is a transfer, with
history and reporting line, and belongs to the person — otherwise
someone changes department silently.
- Ending an occupied position, which would leave an assignment without
one.
- A second chief position in a unit, or an end before the start.
Verified against the live database, all rolled back: each guard fires with
its own message, the permitted edits go through, the audit entry carries the
changed fields. Open positions stay at 9 and the future one now appears in
its own section.
ESLint caught me priming the dialog's fields from an effect. Replaced by a
key on the component, so React rebuilds it per position and the fields
initialise from props — which also removes the flash of the previous
position's values on second open.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
138
components/positions/EditPositionModal.tsx
Normal file
138
components/positions/EditPositionModal.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { updatePosition } from "@/actions/positions";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { SelectField, TextField } from "@/components/ui/Field";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { useToast } from "@/components/ui/Toast";
|
||||
import type { OpenPositionResolved } from "@/lib/positions";
|
||||
import type { UnitOption } from "./CreatePositionModal";
|
||||
|
||||
// Ändern statt löschen und neu anlegen.
|
||||
//
|
||||
// Die Planstellennummer steht in Ausschreibungen, Budgets und
|
||||
// Protokolleinträgen. Wer wegen eines Tippfehlers in der Tätigkeit eine neue
|
||||
// Nummer vergibt, macht die alten Bezüge wertlos — deshalb gibt es diesen
|
||||
// Dialog.
|
||||
|
||||
/**
|
||||
* Erwartet eine Planstelle, keine „vielleicht keine".
|
||||
*
|
||||
* Die aufrufende Seite hängt einen `key` mit der Kennung daran und rendert
|
||||
* ihn nur, solange etwas bearbeitet wird. Dadurch baut React den Dialog je
|
||||
* Planstelle neu auf, und die Felder lassen sich direkt aus den Eigenschaften
|
||||
* vorbelegen — statt sie in einem Effekt nachzuziehen, der beim zweiten
|
||||
* Öffnen kurz die Werte der vorigen Stelle zeigt.
|
||||
*/
|
||||
export function EditPositionModal({
|
||||
position,
|
||||
units,
|
||||
onClose,
|
||||
}: {
|
||||
position: OpenPositionResolved;
|
||||
units: UnitOption[];
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const { showToast } = useToast();
|
||||
const router = useRouter();
|
||||
const [jobTitle, setJobTitle] = useState(position.title);
|
||||
const [orgUnitId, setOrgUnitId] = useState(position.org_unit_id);
|
||||
const [isChief, setIsChief] = useState(position.is_chief);
|
||||
const [validFrom, setValidFrom] = useState(position.valid_from);
|
||||
const [validTo, setValidTo] = useState(position.valid_to ?? "");
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
const unit = units.find((u) => u.id === orgUnitId);
|
||||
// Die eigene Leitung zählt nicht als Hindernis für sich selbst.
|
||||
const chiefTaken = Boolean(unit?.hasChief) && !(position.is_chief && orgUnitId === position.org_unit_id);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!jobTitle.trim() || !orgUnitId || !validFrom) {
|
||||
showToast("Tätigkeit, Einheit und Gültigkeitsbeginn sind Pflicht.", "error");
|
||||
return;
|
||||
}
|
||||
setPending(true);
|
||||
const result = await updatePosition({
|
||||
position_id: position.id,
|
||||
org_unit_id: orgUnitId,
|
||||
job_title: jobTitle.trim(),
|
||||
is_chief: isChief && !chiefTaken,
|
||||
valid_from: validFrom,
|
||||
valid_to: validTo || null,
|
||||
});
|
||||
setPending(false);
|
||||
if (result.success) {
|
||||
showToast("Planstelle geändert.");
|
||||
router.refresh();
|
||||
onClose();
|
||||
} else {
|
||||
// Die Meldungen der Datenbankfunktion sind für die Oberfläche
|
||||
// geschrieben („Diese Planstelle ist vergeben …“) und werden gezeigt.
|
||||
showToast(result.error ?? "Die Änderung war nicht möglich.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
onClose={onClose}
|
||||
title={`Planstelle ${position.position_number}`}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} pending={pending}>
|
||||
Speichern
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<TextField label="Tätigkeit" required value={jobTitle} onChange={setJobTitle} />
|
||||
|
||||
<SelectField
|
||||
label="Organisationseinheit"
|
||||
required
|
||||
value={orgUnitId}
|
||||
onChange={setOrgUnitId}
|
||||
placeholder="Bitte wählen…"
|
||||
options={units.map((u) => ({
|
||||
value: u.id,
|
||||
label: `${" ".repeat(u.depth)}${u.name} (${u.unit_type})`,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<TextField label="Gültig ab" required type="date" value={validFrom} onChange={setValidFrom} />
|
||||
<TextField label="Gültig bis" type="date" value={validTo} onChange={setValidTo} />
|
||||
</div>
|
||||
|
||||
<label className="flex items-start gap-2 text-sm text-ink-body">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-0.5 h-4 w-4 rounded border-border text-brand-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
||||
checked={isChief && !chiefTaken}
|
||||
disabled={chiefTaken}
|
||||
onChange={(e) => setIsChief(e.target.checked)}
|
||||
/>
|
||||
<span>
|
||||
Leitungsplanstelle
|
||||
{chiefTaken && (
|
||||
<span className="block text-xs text-ink-muted">
|
||||
Für {unit?.name} besteht bereits eine Leitungsplanstelle.
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<p className="rounded-md bg-surface px-3 py-2 text-xs leading-relaxed text-ink-muted">
|
||||
Die Planstellennummer bleibt. Ist die Stelle vergeben, lassen sich Einheit und Gültigkeitsende nicht ändern —
|
||||
ein Wechsel der Einheit ist eine Versetzung und gehört zur Person, nicht zur Stelle.
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -6,9 +6,10 @@ import { useState } from "react";
|
||||
import { deletePosition } from "@/actions/positions";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { useToast } from "@/components/ui/Toast";
|
||||
import { fmtDate, todayIso } from "@/lib/format";
|
||||
import { fmtDate } from "@/lib/format";
|
||||
import type { OpenPositionResolved } from "@/lib/positions";
|
||||
import { CreatePositionModal, type UnitOption } from "./CreatePositionModal";
|
||||
import { EditPositionModal } from "./EditPositionModal";
|
||||
|
||||
type OpenPositionWithDays = OpenPositionResolved & { daysOpen: number };
|
||||
|
||||
@@ -21,8 +22,14 @@ export function PositionsPageClient({ openPositions, units }: PositionsPageClien
|
||||
const { showToast } = useToast();
|
||||
const router = useRouter();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<OpenPositionWithDays | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const today = todayIso();
|
||||
|
||||
// Getrennt, weil es zwei verschiedene Aussagen sind: „hier fehlt jemand"
|
||||
// und „das entsteht erst". In einer Liste vermischt liest sich eine
|
||||
// Planstelle zum 01.10. wie eine Vakanz, um die sich niemand kümmert.
|
||||
const offen = openPositions.filter((p) => !p.future);
|
||||
const kuenftig = openPositions.filter((p) => p.future);
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
setDeletingId(id);
|
||||
@@ -36,53 +43,86 @@ export function PositionsPageClient({ openPositions, units }: PositionsPageClien
|
||||
}
|
||||
}
|
||||
|
||||
function Karte({ p }: { p: OpenPositionWithDays }) {
|
||||
return (
|
||||
<div className="relative flex flex-col rounded border border-border transition-colors focus-within:border-brand-500 hover:border-brand-500">
|
||||
{/* Die ganze Karte öffnet den Änderungsdialog; der Papierkorb liegt
|
||||
absolut darüber. Ein Knopf im Knopf wäre ungültiges HTML und mit
|
||||
der Tastatur nicht erreichbar. */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditing(p)}
|
||||
aria-label={`Planstelle ${p.position_number} (${p.title}) ändern`}
|
||||
className="flex flex-col items-start rounded p-3 pr-10 text-left
|
||||
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
||||
>
|
||||
<span className="text-sm font-semibold text-ink">{p.title}</span>
|
||||
<span className="text-xs text-ink-muted">
|
||||
{p.position_number} · {p.orgLabel}
|
||||
</span>
|
||||
<span className="mt-1 text-xs text-ink-muted">
|
||||
{p.is_chief ? "Leitungsplanstelle · " : ""}
|
||||
{p.future ? `gültig ab ${fmtDate(p.valid_from)}` : `seit ${p.daysOpen} Tagen unbesetzt`}
|
||||
</span>
|
||||
{p.valid_to && <span className="text-xs font-semibold text-warning-text">endet am {fmtDate(p.valid_to)}</span>}
|
||||
{p.managerName && <span className="text-xs text-ink-muted">berichtet an {p.managerName}</span>}
|
||||
</button>
|
||||
|
||||
<Button
|
||||
variant="icon"
|
||||
onClick={() => handleDelete(p.id)}
|
||||
pending={deletingId === p.id}
|
||||
aria-label={`Planstelle ${p.position_number} (${p.title}) entfernen`}
|
||||
className="absolute right-2 top-2 hover:!text-danger-solid"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<section className="rounded border border-border bg-white p-4">
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 className="text-sm font-bold text-ink">Unbesetzte Planstellen ({openPositions.length})</h2>
|
||||
<h2 className="text-sm font-bold text-ink">Unbesetzte Planstellen ({offen.length})</h2>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Planstelle anlegen
|
||||
</Button>
|
||||
</div>
|
||||
{openPositions.length === 0 ? (
|
||||
<p className="text-sm text-ink-muted">Derzeit ist jede Planstelle besetzt.</p>
|
||||
{offen.length === 0 ? (
|
||||
<p className="text-sm text-ink-muted">Derzeit ist jede geltende Planstelle besetzt oder vergeben.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{openPositions.map((p) => {
|
||||
const notYetValid = p.valid_from > today;
|
||||
return (
|
||||
<div key={p.id} className="flex flex-col rounded border border-border p-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="text-sm font-semibold text-ink">{p.title}</div>
|
||||
<Button
|
||||
variant="icon"
|
||||
onClick={() => handleDelete(p.id)}
|
||||
pending={deletingId === p.id}
|
||||
aria-label={`Planstelle ${p.position_number} (${p.title}) entfernen`}
|
||||
className="-mr-1 -mt-1 hover:!text-danger-solid"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-xs text-ink-muted">
|
||||
{p.position_number} · {p.orgLabel}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-ink-muted">
|
||||
{p.is_chief ? "Leitungsplanstelle · " : ""}
|
||||
seit {p.daysOpen} Tagen unbesetzt
|
||||
</div>
|
||||
{p.managerName && <div className="text-xs text-ink-muted">berichtet an {p.managerName}</div>}
|
||||
{notYetValid && <div className="mt-1 text-xs font-semibold text-warning-text">Gültig ab {fmtDate(p.valid_from)}</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{offen.map((p) => (
|
||||
<Karte key={p.id} p={p} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{kuenftig.length > 0 && (
|
||||
<section className="rounded border border-border bg-white p-4">
|
||||
<h2 className="text-sm font-bold text-ink">Künftige Planstellen ({kuenftig.length})</h2>
|
||||
<p className="mb-3 mt-1 text-xs text-ink-muted">
|
||||
Beschlossen, aber noch nicht gültig. Sie zählen nicht als Vakanz und lassen sich bis zum Beginn ändern.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{kuenftig.map((p) => (
|
||||
<Karte key={p.id} p={p} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<CreatePositionModal open={createOpen} onClose={() => setCreateOpen(false)} units={units} />
|
||||
{/* `key` sorgt dafür, dass React je Planstelle einen frischen Dialog
|
||||
baut — sonst blieben beim zweiten Öffnen die Werte des ersten
|
||||
stehen. */}
|
||||
{editing && (
|
||||
<EditPositionModal key={editing.id} position={editing} units={units} onClose={() => setEditing(null)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user