Designer ergonomics: background picker, quick-add, slugify, live status#15
Open
ArneeMe wants to merge 5 commits into
Open
Designer ergonomics: background picker, quick-add, slugify, live status#15ArneeMe wants to merge 5 commits into
ArneeMe wants to merge 5 commits into
Conversation
Why: getting from "blank white page" to "this looks like a real cert" used to require uploading a custom PDF — a hard step for admins who don't already have one. Now they click a colored circle and the page has a tone (cream / mynte / lyseblå / etc.). Implementation: a full-page rectangle field with name __background__ inserted at index 0 of the schemas so other fields render on top. Wired through pdfme's rectangle plugin in the Designer, the production generator, and the preview generator. The picker also shows a transparent "✕" swatch to clear the background, plus a visual ring on whichever color is active. Lives entirely in the schemas jsonb — no new column, no basePdf upload required, survives template save/load round-trip. https://claude.ai/code/session_0142AspkipemJMg1ggSqfQzg
Why: every admin who places a qr_code / qr_info / qr_page / today /
signature_date field in the designer ends up wiring it to the
matching system slot via the bindings editor. It's tedious, error-
prone (you can pick the wrong slot), and there's only one right
answer. fromPdfmeTemplate now does it automatically at save:
- If a pdfme field name matches one of the known system slot names
AND the admin hasn't already configured a binding for it, the
save layer fills in `{ source: 'system', system: <slot> }` for
them.
- Existing bindings are never overwritten — manual configuration
always wins.
Result: admins drop a qr_code field, hit save, and the cert URL is
already wired up. One fewer thing to think about for the common
case; bindings editor is still there for everything else.
https://claude.ai/code/session_0142AspkipemJMg1ggSqfQzg
Why: admins shouldn't have to think about internal field keys. They
type the label they want their volunteers to see ("Mottakers navn")
and the key fills itself in ("mottakers_navn") — lowercase ASCII,
underscores for spaces, Norwegian characters de-accented (æ→a,
ø→o, å→a, é→e). The Etikett field now comes BEFORE Nøkkel in the
row so the natural typing order matches.
Sticky-edit rule: as soon as the admin hand-edits the key, an
`autoKey: false` flag flips on for that field and subsequent label
edits no longer overwrite. So one-off renames don't get clobbered;
admins who want full control just type a key once and that's that.
Side effect: typing in the key field also runs the slugifier, so
spaces and special characters can't sneak into keys via direct
input either.
https://claude.ai/code/session_0142AspkipemJMg1ggSqfQzg
Why: admins kept landing in the bindings editor right after placing a field, because every QR / signature / logo / body-text needs exactly the same wiring every time. Bundle the placement + wiring into one click, and leverage what they've already uploaded as default org assets: - "+ QR-kode" drops a qrcode field already bound to system: qr_code. - "+ Signatur" drops a 3-field block (photo / name / role) all bound to asset_default kind=signature at the next free position. Clicking again gives you a second signature next to the first — no manual position math. - "+ Logo" drops an image bound to default logo. - "+ Tekstblokk" drops a text region bound to default body_text. - "+ attester.no-merke" drops the brand text the save guard requires (idempotent — no-op if already present). Position cascades on repeated clicks of the same button so fields don't stack on top of each other. Admin still drags to fine-tune, but the starting point is much closer to done. When no default asset of that kind exists yet the field still gets added — it just renders empty until the admin uploads one in Innhold. That's a feature, not a bug: it visualises the slot so the admin knows what to upload. https://claude.ai/code/session_0142AspkipemJMg1ggSqfQzg
Four ergonomic wins for the create-template flow:
- Live "ready to save" chip in the toolbar: green ✓ "Klar til lagring"
when validateTemplateForSave passes, orange ⚠ with the specific
reason ("Mangler QR-kode" / "Mangler attester.no-tekst") otherwise.
Admin no longer finds out at save time that something's missing —
feedback is continuous as they design. Save button also shows " *"
when there are unsaved changes.
- beforeunload prompt if the admin has unsaved schema / bindings /
form changes and tries to close the tab or hit refresh. Standard
browser confirm; prevents lost work after 20 minutes of layout
iteration. Dirty flag flips off on save and on load (loading a
starter or existing template isn't an edit).
- Up/down reorder buttons next to each row in SchemaEditor. Reordering
used to require delete-and-re-add; now it's two clicks. Buttons
disable at the edges so admins can't move past the ends.
- "Ingen standard signatur / logo / tekstblokk satt opp enda" hint
under the quick-add buttons when the org's Innhold is missing those
defaults. Explains upfront why clicking "+ Signatur" might drop an
empty placeholder, and links to Innhold to fix it.
https://claude.ai/code/session_0142AspkipemJMg1ggSqfQzg
Deploying inf319-certificate with
|
| Latest commit: |
7839735
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://10ffb9ec.inf319-certificate.pages.dev |
| Branch Preview URL: | https://claude-multi-org-support-jub.inf319-certificate.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Five small, focused improvements to the template-creation flow, on top of #14. The theme is let admins ship a usable cert PDF with fewer manual steps, leveraging org_assets defaults so the designer's outputs are wired up the moment a field hits the canvas.
Commits
qr_code/qr_info/qr_page/today/signature_datefields auto-wire themselves to the matching system slot on save. Manual configuration always wins — only fills gaps. One fewer bindings-editor visit for the most common case.mottakers_navn(ASCII, underscores, Norwegian accents folded). Sticky-edit: hand-editing the key flipsautoKey: falseso subsequent label edits don't clobber. Field labels also come before keys in the row now.Test plan
qr_codefield via pdfme's left panel (no manual binding), save, reopen — the binding showssystem: qr_code.fodt_ar. Hand-edit the key → subsequent label edits no longer overwrite.Mangler QR-kode · Mangler attester.no-tekst. Add QR → chip updates to justMangler attester.no-tekst. Add brand → green ✓.Out of scope (still queued)
Visual binding badge per pdfme field, asset thumbnails in BindingsEditor, inline lookup-list add, starter gallery preview cards, drag-to-reorder (we shipped up/down arrows instead).
Generated by Claude Code