feat(approvals): t-paliad-216 — approval edit modal component
New module: frontend/src/client/components/approval-edit-modal.ts.
The approver clicks "Änderungen vorschlagen" on a pending update-lifecycle
row; this modal opens with the requester's original payload pre-populated
in editable date inputs (per entity_type allowlist):
- deadline: due_date, original_due_date, warning_date
- appointment: start_at, end_at
The pre_image value for each field renders as a "Vorher" hint so the
approver sees what's being changed before they commit a counter.
A free-text "Vorschlagskommentar" textarea sits below the inputs. The
submit button stays disabled until the form is dirty OR the note has
non-whitespace content — mirrors the server's ErrSuggestionRequiresChange
no-op guard so the user doesn't bounce off a server-side 400.
API: openApprovalEditModal({entityType, lifecycleEvent, payload,
preImage}) returns Promise<{counterPayload, note} | null>. null = user
cancelled (ESC, overlay click, Cancel button). counterPayload contains
only fields that the user changed; unchanged keys are omitted (the
server's buildRevertSetClauses ignores absent keys cleanly).
Lifecycles other than "update" are guarded with an alert + resolve null —
shape-list.ts hides the button for them, but the modal is defence-in-
depth.
This commit is contained in:
255
frontend/src/client/components/approval-edit-modal.ts
Normal file
255
frontend/src/client/components/approval-edit-modal.ts
Normal file
@@ -0,0 +1,255 @@
|
||||
// t-paliad-216 Slice B — modal for the "Suggest changes" approval action.
|
||||
//
|
||||
// The approver authors a counter-proposal: edits any of the date-allowlist
|
||||
// fields (per entity_type) AND/OR leaves a free-text note. On submit the
|
||||
// caller POSTs to /api/approval-requests/{id}/suggest-changes, which closes
|
||||
// the OLD row as `changes_requested` and spawns a NEW pending row authored
|
||||
// by the approver carrying counter_payload as its payload.
|
||||
//
|
||||
// Scope (v1):
|
||||
// - update-lifecycle only — the suggest_changes button is hidden for
|
||||
// create / complete / delete lifecycles in shape-list.ts, so the modal
|
||||
// never opens on them. If callers somehow trigger it on an unsupported
|
||||
// lifecycle, openApprovalEditModal() resolves with null (cancel) after
|
||||
// surfacing the unsupported-lifecycle copy.
|
||||
// - Hard-coded fields per entity_type. We deliberately don't build a
|
||||
// generic field-editor framework — only two entity_types exist and
|
||||
// both have small fixed allowlists.
|
||||
//
|
||||
// API:
|
||||
// const result = await openApprovalEditModal({
|
||||
// entityType: "deadline",
|
||||
// lifecycleEvent: "update",
|
||||
// payload: {...}, // requester's original proposed values
|
||||
// preImage: {...}, // pre-mutation values (for diff display)
|
||||
// });
|
||||
// if (result) {
|
||||
// // result.counterPayload + result.note ready to POST
|
||||
// } else {
|
||||
// // user cancelled
|
||||
// }
|
||||
|
||||
import { t } from "../i18n";
|
||||
|
||||
export interface ApprovalEditModalArgs {
|
||||
entityType: "deadline" | "appointment";
|
||||
lifecycleEvent: string;
|
||||
payload: Record<string, unknown> | null;
|
||||
preImage: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
export interface ApprovalEditModalResult {
|
||||
counterPayload: Record<string, unknown>;
|
||||
note: string;
|
||||
}
|
||||
|
||||
// Per-entity-type editable field allowlist. Matches buildRevertSetClauses
|
||||
// in internal/services/approval_service.go — the server side rejects any
|
||||
// key outside this set anyway. Keeping the UI list in sync is a
|
||||
// safety-vs-confusion trade-off: a stray key here would be silently
|
||||
// dropped server-side, so it's harmless but misleading.
|
||||
const DEADLINE_FIELDS: ReadonlyArray<{ key: string; type: "date" }> = [
|
||||
{ key: "due_date", type: "date" },
|
||||
{ key: "original_due_date", type: "date" },
|
||||
{ key: "warning_date", type: "date" },
|
||||
];
|
||||
|
||||
const APPOINTMENT_FIELDS: ReadonlyArray<{ key: string; type: "datetime-local" }> = [
|
||||
{ key: "start_at", type: "datetime-local" },
|
||||
{ key: "end_at", type: "datetime-local" },
|
||||
];
|
||||
|
||||
export function openApprovalEditModal(
|
||||
args: ApprovalEditModalArgs,
|
||||
): Promise<ApprovalEditModalResult | null> {
|
||||
return new Promise((resolve) => {
|
||||
if (args.lifecycleEvent !== "update") {
|
||||
// Defence-in-depth: shape-list.ts hides the button for non-update
|
||||
// lifecycles, but if some caller bypasses that gate, fail cleanly.
|
||||
window.alert(t("approvals.suggest.unsupported_lifecycle"));
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById("approval-edit-modal")?.remove();
|
||||
|
||||
const fields = args.entityType === "deadline" ? DEADLINE_FIELDS : APPOINTMENT_FIELDS;
|
||||
const original = (args.payload ?? {}) as Record<string, unknown>;
|
||||
const preImage = (args.preImage ?? {}) as Record<string, unknown>;
|
||||
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "approval-edit-modal";
|
||||
overlay.className = "modal-overlay";
|
||||
overlay.innerHTML = renderShell(args, fields, original, preImage);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
const close = (result: ApprovalEditModalResult | null) => {
|
||||
overlay.remove();
|
||||
document.removeEventListener("keydown", onKey);
|
||||
resolve(result);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") close(null);
|
||||
};
|
||||
document.addEventListener("keydown", onKey);
|
||||
|
||||
overlay.querySelectorAll("[data-suggest-cancel]").forEach((el) =>
|
||||
el.addEventListener("click", () => close(null)),
|
||||
);
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (e.target === overlay) close(null);
|
||||
});
|
||||
|
||||
const submitBtn = overlay.querySelector<HTMLButtonElement>("[data-suggest-submit]");
|
||||
const noteEl = overlay.querySelector<HTMLTextAreaElement>("[data-suggest-note]");
|
||||
const inputs = Array.from(
|
||||
overlay.querySelectorAll<HTMLInputElement>("[data-suggest-field]"),
|
||||
);
|
||||
|
||||
const refreshSubmit = () => {
|
||||
if (!submitBtn) return;
|
||||
const dirty = inputs.some((el) => {
|
||||
const orig = formatFieldForInput(original[el.dataset.suggestField || ""]);
|
||||
return el.value !== orig;
|
||||
});
|
||||
const hasNote = !!(noteEl && noteEl.value.trim());
|
||||
submitBtn.disabled = !(dirty || hasNote);
|
||||
submitBtn.title = submitBtn.disabled
|
||||
? t("approvals.suggest.submit_disabled_hint")
|
||||
: "";
|
||||
};
|
||||
inputs.forEach((el) => el.addEventListener("input", refreshSubmit));
|
||||
noteEl?.addEventListener("input", refreshSubmit);
|
||||
refreshSubmit();
|
||||
|
||||
const form = overlay.querySelector<HTMLFormElement>("[data-suggest-form]");
|
||||
form?.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
if (submitBtn?.disabled) return;
|
||||
// Build counter_payload from inputs that differ from original.
|
||||
// Fields unchanged stay out of the payload — the server's
|
||||
// buildRevertSetClauses only writes the keys it sees, so we don't
|
||||
// need to send untouched fields.
|
||||
const counterPayload: Record<string, unknown> = {};
|
||||
for (const el of inputs) {
|
||||
const key = el.dataset.suggestField || "";
|
||||
const orig = formatFieldForInput(original[key]);
|
||||
if (el.value !== orig) {
|
||||
counterPayload[key] = formatFieldForServer(el.value, el.type);
|
||||
}
|
||||
}
|
||||
close({
|
||||
counterPayload,
|
||||
note: (noteEl?.value ?? "").trim(),
|
||||
});
|
||||
});
|
||||
|
||||
// Focus first input (or note if no fields).
|
||||
(inputs[0] ?? noteEl)?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function renderShell(
|
||||
args: ApprovalEditModalArgs,
|
||||
fields: ReadonlyArray<{ key: string; type: string }>,
|
||||
original: Record<string, unknown>,
|
||||
preImage: Record<string, unknown>,
|
||||
): string {
|
||||
const entityLabel = esc(t(("approvals.entity." + args.entityType) as never));
|
||||
const fieldRows = fields
|
||||
.map((f) => {
|
||||
const label = fieldLabel(args.entityType, f.key);
|
||||
const value = esc(formatFieldForInput(original[f.key]));
|
||||
const preVal = formatFieldForInput(preImage[f.key]);
|
||||
const preHint = preVal
|
||||
? `<span class="suggest-field-prehint">${esc(t("approvals.diff.before"))}: ${esc(preVal)}</span>`
|
||||
: "";
|
||||
return `
|
||||
<label class="suggest-field">
|
||||
<span class="suggest-field-label">${esc(label)}</span>
|
||||
<input type="${esc(f.type)}" data-suggest-field="${esc(f.key)}" value="${value}" />
|
||||
${preHint}
|
||||
</label>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
return `
|
||||
<div class="modal modal-approval-suggest" role="dialog" aria-modal="true" aria-labelledby="approval-suggest-title">
|
||||
<header class="modal-header">
|
||||
<h2 id="approval-suggest-title">${esc(t("approvals.suggest.modal_title"))} — ${entityLabel}</h2>
|
||||
<button type="button" class="modal-close" data-suggest-cancel aria-label="${esc(t("approvals.suggest.cancel"))}">×</button>
|
||||
</header>
|
||||
<form data-suggest-form>
|
||||
<div class="modal-body">
|
||||
<p class="suggest-intro muted">${esc(t("approvals.suggest.intro"))}</p>
|
||||
<div class="suggest-fields">${fieldRows}</div>
|
||||
<label class="suggest-note">
|
||||
<span class="suggest-field-label">${esc(t("approvals.suggest.note_label"))}</span>
|
||||
<textarea data-suggest-note rows="3" placeholder="${esc(t("approvals.suggest.note_placeholder"))}"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<footer class="modal-footer">
|
||||
<button type="button" class="btn btn-ghost" data-suggest-cancel>${esc(t("approvals.suggest.cancel"))}</button>
|
||||
<button type="submit" class="btn btn-primary" data-suggest-submit disabled>${esc(t("approvals.suggest.submit"))}</button>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// fieldLabel — pick the user-facing label for a given (entity_type, key)
|
||||
// tuple. Reuses existing entity-field i18n where it exists so the same
|
||||
// label that's used on the deadline / appointment edit forms also shows
|
||||
// in this modal.
|
||||
function fieldLabel(entityType: string, key: string): string {
|
||||
const lookups: Record<string, string> = {
|
||||
"deadline.due_date": t("deadlines.field.due" as never) || "Fälligkeitsdatum",
|
||||
"deadline.original_due_date": "Ursprüngliches Fälligkeitsdatum",
|
||||
"deadline.warning_date": "Warndatum",
|
||||
"appointment.start_at": t("appointments.field.start" as never) || "Beginn",
|
||||
"appointment.end_at": t("appointments.field.end" as never) || "Ende",
|
||||
};
|
||||
return lookups[`${entityType}.${key}`] || key;
|
||||
}
|
||||
|
||||
// formatFieldForInput — convert a server-side payload value to the format
|
||||
// the <input> wants. Dates round-trip cleanly as YYYY-MM-DD; datetime-local
|
||||
// wants YYYY-MM-DDTHH:MM. Server returns ISO 8601 / RFC 3339 timestamps,
|
||||
// we trim to the local-input shape.
|
||||
function formatFieldForInput(v: unknown): string {
|
||||
if (v == null) return "";
|
||||
const s = String(v);
|
||||
// Pure date: keep first 10 chars.
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
|
||||
// ISO timestamp: keep YYYY-MM-DDTHH:MM (drop seconds + tz).
|
||||
const m = s.match(/^(\d{4}-\d{2}-\d{2})[T\s](\d{2}:\d{2})/);
|
||||
if (m) return `${m[1]}T${m[2]}`;
|
||||
return s;
|
||||
}
|
||||
|
||||
// formatFieldForServer — convert the input element's string value back to
|
||||
// a server-friendly shape. Date inputs send YYYY-MM-DD; datetime-local
|
||||
// sends YYYY-MM-DDTHH:MM (we let the server interpret as local time, same
|
||||
// as the existing entity-edit forms — there's no tz-shift specific to
|
||||
// suggest-changes).
|
||||
function formatFieldForServer(value: string, inputType: string): unknown {
|
||||
if (!value) return null;
|
||||
if (inputType === "date") return value; // YYYY-MM-DD
|
||||
if (inputType === "datetime-local") return value; // YYYY-MM-DDTHH:MM
|
||||
return value;
|
||||
}
|
||||
|
||||
// HTML-escape helper. Local to this module so the modal doesn't bring in a
|
||||
// utility from elsewhere.
|
||||
function esc(s: string): string {
|
||||
return s.replace(/[&<>"]/g, (c) => {
|
||||
switch (c) {
|
||||
case "&": return "&";
|
||||
case "<": return "<";
|
||||
case ">": return ">";
|
||||
case '"': return """;
|
||||
default: return c;
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user