feat(badges): implement badge print controls panel and refine badge overrides
- Create ae_comp__badge_print_controls.svelte: A fixed-right-edge panel for per-field accordion controls, font size adjustments, and inline editing. - Refactor print/+page.svelte to integrate the new controls panel and standardize font size state management via $bindable() props. - Update ae_comp__badge_obj_view.svelte and ae_comp__badge_review_form.svelte to correctly sync badge_type_code_override and badge_type_override. - Improve badge_type_name derivation logic to prioritize staff overrides. - Hide unused receipt/ticket sections in badge view pending future redesign. - Update documentation (PROJECT and TODO) to reflect completion of Task 3.
This commit is contained in:
Scott Idem
@@ -1,15 +1,96 @@
|
||||
# PROJECT: AE Events Badges — Review Form & Print Font Controls
|
||||
|
||||
**Created:** 2026-02-27
|
||||
**Last Updated:** 2026-02-27
|
||||
**Last Updated:** 2026-03-02
|
||||
**Branch:** `ae_app_3x_llm`
|
||||
**Priority:** HIGH — first live event is Axonius, NYC, mid-April 2026
|
||||
**Owner:** Scott Idem / One Sky IT
|
||||
**Status:** ✅ TASK 1 (Badge Review Form) COMPLETE | ✅ TASK 2 (Print Font Controls) COMPLETE — v1
|
||||
**Status:** ✅ TASK 1 COMPLETE | ✅ TASK 2 COMPLETE | ✅ TASK 3 COMPLETE | ⏳ TASK 4 NEXT UP
|
||||
|
||||
---
|
||||
|
||||
## Implementation Status (2026-02-27)
|
||||
## Next Up for Badges (TASK 4)
|
||||
|
||||
### 1. QR Code on Badge Front — `ae_comp__badge_obj_view.svelte`
|
||||
The badge template has a `show_qr` flag (or similar). When toggled on, the QR code should
|
||||
appear on the front face of the printed badge. Currently QR is only shown on the review form.
|
||||
|
||||
- Check the badge template fields for the QR toggle field name (`show_qr`, `qr_enabled`, etc.)
|
||||
via `ae_describe event_badge_template` and inspect `ae_comp__badge_obj_view.svelte`.
|
||||
- The QR code data URL is generated with:
|
||||
```typescript
|
||||
qr_data_url = await core_func.js_generate_qr_code('obj', {
|
||||
obj_type: 'event_badge',
|
||||
obj_id: event_badge_id
|
||||
});
|
||||
```
|
||||
See `ae_comp__badge_review_form.svelte` for the working pattern.
|
||||
- Position on badge: typically bottom-right corner of the badge face, sized to fit within
|
||||
the template's layout constraints. Do NOT alter structural badge dimensions.
|
||||
- Must be hidden on `ae_comp__badge_obj_view.svelte` when `show_qr` is falsy.
|
||||
|
||||
### 2. Badge Print Controls — UX Improvements (ae_comp__badge_print_controls.svelte)
|
||||
- Scott has identified areas for improvement — TBD next session
|
||||
- Consider: keyboard shortcuts (+ / -) for font sizing while a field is active
|
||||
- Consider: "Apply to all badges" workflow for font size presets
|
||||
|
||||
### 3. Leads Module
|
||||
Next major work after badge polish. See `documentation/MODULE__AE_Events_Leads.md` (if it
|
||||
exists) for context. Exhibitor lead scanning via QR code.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Status
|
||||
|
||||
### ✅ TASK 3: Badge Print Controls Panel — COMPLETE (2026-03-02)
|
||||
|
||||
**Files created/modified:**
|
||||
- `ae_comp__badge_print_controls.svelte` — NEW. Right-edge control panel with per-field
|
||||
accordion sections. Font size controls + inline edit forms gated by access level.
|
||||
- `print/+page.svelte` — layout changed from `flex-row` to fixed right panel.
|
||||
|
||||
**Design decisions:**
|
||||
- Controls panel is `position: fixed right-0 top-20 bottom-0 w-64` — out of normal flow,
|
||||
always visible regardless of viewport width. `top-20` (80px) clears the page header.
|
||||
- Badge area gets `pr-64` to prevent content from hiding under the fixed panel.
|
||||
`print:pr-0` and `print:hidden` on the panel restore a clean print layout.
|
||||
- `bg-white dark:bg-zinc-900` gives the panel a solid background to prevent bleed-through.
|
||||
|
||||
**Per-field accordion structure (one open at a time):**
|
||||
|
||||
| Field | Access | Font Controls |
|
||||
| --- | --- | --- |
|
||||
| Name | Trusted+ edit | ✅ |
|
||||
| Professional Title | All auth edit | ✅ |
|
||||
| Affiliations | All auth edit (textarea) | ✅ |
|
||||
| Location | All auth edit | ✅ |
|
||||
| Lead Scanning (allow_tracking) | All auth edit | — |
|
||||
| Pronouns | Trusted+ edit | — |
|
||||
| Badge Type | Trusted+, only when template has badge_type_list | — |
|
||||
|
||||
**Access level note:**
|
||||
`is_trusted = $derived($ae_loc.trusted_access === true)` — covers Trusted, Administrator,
|
||||
Manager, Super (cascade). No need to OR in `administrator_access`.
|
||||
|
||||
**badge_type_override coupling:**
|
||||
When badge type is changed via dropdown, both `badge_type_code_override` AND
|
||||
`badge_type_override` are saved together (name comes from template list). Same behavior in
|
||||
`ae_comp__badge_obj_view.svelte` and `ae_comp__badge_review_form.svelte`.
|
||||
Edge case: custom names (e.g. code=`member`, name=`"Life Member"`) must be set manually in DB.
|
||||
|
||||
**Font size config (moved from print page to controls component):**
|
||||
|
||||
| Field | Default px | Range | Step |
|
||||
|--------------|------------|----------|------|
|
||||
| Name | 58px | 20–80px | 2px |
|
||||
| Title | 34px | 14–56px | 2px |
|
||||
| Affiliations | 38px | 14–60px | 2px |
|
||||
| Location | 34px | 14–56px | 2px |
|
||||
|
||||
Font sizes flow back to the parent via `$bindable()` props so `ae_comp__badge_obj_view`
|
||||
stays in sync without prop-drilling through a third component.
|
||||
|
||||
---
|
||||
|
||||
### ✅ TASK 1: Badge Review Form — COMPLETE
|
||||
|
||||
@@ -245,6 +326,13 @@ This allows for rich text formatting (bold, italic, line breaks, etc.) in badge
|
||||
|---|---|---|
|
||||
| `email_override` | email input | Fallback display: `email` |
|
||||
| `badge_type_code_override` | select | Options: member, non-member, guest, exhibitor, staff, test; also updates `badge_type_override` text |
|
||||
|
||||
> **Edge case — custom badge type name:** If an attendee needs a standard badge type code (for
|
||||
> CSS styling) but a slightly different displayed name (e.g. code=`member`, name=`"Life Member"`),
|
||||
> set `badge_type_override` directly in the DB. Do **not** use the dropdown — selecting from the
|
||||
> dropdown in the UI overwrites `badge_type_override` with the standard name from the template
|
||||
> list. This is an intentional trade-off: coded for the normal case (dropdown keeps both fields in
|
||||
> sync), special cases handled manually by Scott in the DB.
|
||||
| `registration_type_code_override` | select | Same options as badge_type for now; also updates `registration_type_override` |
|
||||
| `hide` | checkbox | Label: "Hidden from search results" |
|
||||
| `priority` | number input | |
|
||||
@@ -380,7 +468,9 @@ $ae_loc.administrator_access // true = administrator and above
|
||||
$ae_loc.edit_mode // boolean — user preference toggle (NEVER write to this from components)
|
||||
```
|
||||
|
||||
`is_staff` prop on the review form = `administrator_access || trusted_access`.
|
||||
`is_staff` prop on the review form = `$ae_loc.trusted_access`.
|
||||
`trusted_access` is `true` for Trusted and every level above it (Administrator, Manager, Super)
|
||||
— no need to OR in `administrator_access` since it's already implied by the cascade.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -8,17 +8,37 @@
|
||||
- [ ] **Step 3:** Implement formal error boundaries for 403/401 API responses to provide user-friendly "Session Expired" or "Access Denied" UI.
|
||||
|
||||
## 🚧 Upcoming High Priority
|
||||
|
||||
### [Badges] Remaining badge work before first live event
|
||||
- **QR code on badge front:** `ae_comp__badge_obj_view.svelte` — display QR on the printed
|
||||
face when template has `show_qr` (or equivalent) toggled on. Use same QR generation as
|
||||
review form (`core_func.js_generate_qr_code`). See TASK 4 in `PROJECT__AE_Events_Badges_Review_Print.md`.
|
||||
- **Badge print controls UX polish:** Scott has improvements in mind — TBD next session.
|
||||
File: `ae_comp__badge_print_controls.svelte`.
|
||||
|
||||
### [Leads] Exhibitor Lead Scanning — NEXT MAJOR FEATURE
|
||||
QR code scan at exhibitor booth → capture attendee badge data. Gated by `allow_tracking` on
|
||||
the badge. Check if `documentation/MODULE__AE_Events_Leads.md` exists for full spec.
|
||||
Key questions before starting: which routes, does the Electron app scan, what does the
|
||||
lead record look like in the DB?
|
||||
|
||||
### [General]
|
||||
- **CRUD v2 Refactor:** Finalize retirement of `Element_ae_crud_v2.svelte` in favor of V3 Editor.
|
||||
- **Temp Cleanup:** Auto-removal of native `.tmp` files older than 24h.
|
||||
- **`window.print()` for badge print button:** Wire the existing `handle_print_badge()` to trigger `window.print()`. Browser print works well across Chrome/Chromium/Firefox — no Electron needed.
|
||||
- **Input Field Audit:** Several input fields are missing `name`/`id` attributes or `data-testid`. Known examples: badge override fields in `ae_comp__badge_obj_view.svelte`; template name input in `ae_comp__badge_template_form.svelte`. Matters for: accessibility, autofill, label associations, and test targeting. (For tests, use `getByLabel()` rather than `input[value*=...]` which only checks the HTML attribute, not the Svelte-bound DOM property.)
|
||||
|
||||
## ✅ Completed Recently
|
||||
- [x] **[Badges]** **Badge Print Controls Panel:** New `ae_comp__badge_print_controls.svelte` — per-field accordion with inline edit forms, font size controls, access-level gating. Fixed-right-edge layout replaces collapsed `flex-1` panel. (2026-03-02, branch `ae_app_3x_llm`)
|
||||
- [x] **[Badges]** **badge_type_override coupling:** Selecting badge type from dropdown now saves both `badge_type_code_override` AND `badge_type_override` in `ae_comp__badge_obj_view.svelte`, `ae_comp__badge_review_form.svelte`, and `ae_comp__badge_print_controls.svelte`.
|
||||
- [x] **[Badges]** **Layout CSS system:** `data-layout` attribute, `@page` injection, `style_href` for per-template CSS files. Two templates: `badge_layout_epson_4x5_fanfold.css`, `badge_layout_zebra_zc10l_pvc.css`.
|
||||
- [x] **[Badges]** **Duplex field wiring:** Badge back hidden for single-sided templates.
|
||||
- [x] **[Badges]** **Badge Review Form:** Complete with QR code, field edits, access-level gating, accessibility toggle, help modal. (`ae_comp__badge_review_form.svelte`)
|
||||
- [x] **[API]** **V3 Lookup System Integration:** Implemented standardized `/v3/lookup/` endpoints for Countries, Subdivisions, and Time Zones. Added support for `only_priority` filtering in IDAA editors.
|
||||
- [x] **[UI]** **Events Launcher Location Fix:** Resolved room select list issues by ensuring all enabled/hidden locations are proactively loaded and synced.
|
||||
- [x] **[API]** **Event File V3 Mapping:** Implemented `inc_hosted_file` support and mapped prefixed backend fields (`hosted_file_hash_sha256`, etc.) to flat properties.
|
||||
- [x] **[UI]** **Badge Rendering Fix:** Refactored `badge_template` lookup to use V3 Triple ID pattern.
|
||||
- [x] **[API]** **event_session Search Fix:** Resolved 400 error (`Unauthorized search field 'account_id'`) via backend update.
|
||||
- [x] **[API]** **event_session Search Fix:** Resolved 400 error (`Unauthorized search field ‘account_id’`) via backend update.
|
||||
- [x] **[Security]** Purged redundant `x-aether-api-token` from frontend and notified backend.
|
||||
- [x] **[Security]** Fixed misplaced `Access-Control-Allow-Origin` request headers.
|
||||
- [x] **[Security]** Implemented "Account ID Scavenging" to fix hydration race conditions.
|
||||
|
||||
Reference in New Issue
Block a user