diff --git a/documentation/MODULE__AE_Events_Badges.md b/documentation/MODULE__AE_Events_Badges.md index 01692868..e9206878 100644 --- a/documentation/MODULE__AE_Events_Badges.md +++ b/documentation/MODULE__AE_Events_Badges.md @@ -3,7 +3,8 @@ **Module Path:** `src/routes/events/[event_id]/(badges)/badges/` **API Module:** `src/lib/ae_events/ae_events__event_badge.ts` **Database:** `db_events.badge` (Dexie IndexedDB table) -**Last Updated:** 2026-02-27 (rev 5) +**Last Updated:** 2026-02-27 (rev 6) +**Related Docs:** `documentation/PROJECT__AE_Events_Badges_Review_Print.md` (implementation guide) --- @@ -16,6 +17,8 @@ The Badges module manages event attendee badges with support for: - **QR code generation** for badge scanning - **Print tracking** (count, first/last print datetime) - **Advanced search and filtering** +- **HTML rendering** in display fields for rich text formatting +- **Accessibility features** (text enlargement toggle) --- @@ -44,6 +47,19 @@ UI Display Logic: 3. ELSE → Display placeholder/empty ``` +**HTML Rendering (implemented 2026-02-27):** + +Certain fields support HTML markup for rich text formatting. When viewing (not editing), these fields use Svelte's `{@html}` directive to render the markup: +- `full_name` / `full_name_override` +- `professional_title` / `professional_title_override` +- `affiliations` / `affiliations_override` +- `location` / `location_override` + +This allows for formatting like: +- Bold/italic: `Dr. Jane Smith` or `Chief Medical Officer` +- Line breaks: `Hospital Name
Department Name` +- Special characters and entities + **Example — Full Name:** ```typescript // API imports from iMIS @@ -51,34 +67,38 @@ badge.given_name = "Robert" badge.family_name = "Smith" badge.full_name = "Robert Smith" // Auto-computed -// Staff edits to preferred name -badge.full_name_override = "Bob Smith" +// Staff edits to preferred name with HTML +badge.full_name_override = "Bob Smith" -// Display in UI -display_name = badge.full_name_override || badge.full_name || "-- no name --" -// Result: "Bob Smith" +// Display in UI (review form) +{@html badge.full_name_override || badge.full_name || "— no name —"} +// Result: **Bob** Smith (bold rendered) + +// Edit mode shows raw HTML + +// Shows: Bob Smith (editable as text) // Next cron sync from iMIS // ✅ badge.full_name updated to "Robert J. Smith" (middle initial added) -// ✅ badge.full_name_override remains "Bob Smith" (PROTECTED) -// ✅ Display still shows "Bob Smith" +// ✅ badge.full_name_override remains "Bob Smith" (PROTECTED) +// ✅ Display still shows **Bob** Smith (bold rendered) ``` ### Override Fields -| Regular Field | Override Field | Purpose | Editable By | -|---|---|---|---| -| `pronouns` | `pronouns_override` | Preferred pronouns | Staff, Attendee | -| `professional_title` | `professional_title_override` | Job title display | Staff, Attendee | -| `full_name` | `full_name_override` | Preferred name display | Staff, Attendee | -| `affiliations` | `affiliations_override` | Organization display | Staff, Attendee | -| `phone` | `phone_override` | Phone number | Staff, Attendee | -| `email` | `email_override` | Contact email override | Staff only | -| `location` | `location_override` | City/State/Country display | Staff, Attendee | -| `badge_type` | `badge_type_override` | Badge category label text | Staff only | -| `badge_type_code` | `badge_type_code_override` | Badge access level code | Staff only | -| `registration_type` | `registration_type_override` | Registration category label text | Staff only | -| `registration_type_code` | `registration_type_code_override` | Registration category code | Staff only | +| Regular Field | Override Field | Purpose | Editable By | HTML Rendering | +|---|---|---|---|---| +| `pronouns` | `pronouns_override` | Preferred pronouns | Staff, Attendee | No | +| `professional_title` | `professional_title_override` | Job title display | Staff, Attendee | ✅ Yes | +| `full_name` | `full_name_override` | Preferred name display | Staff, Attendee | ✅ Yes | +| `affiliations` | `affiliations_override` | Organization display | Staff, Attendee | ✅ Yes | +| `phone` | `phone_override` | Phone number | Staff, Attendee | No | +| `email` | `email_override` | Contact email override | Staff only | No | +| `location` | `location_override` | City/State/Country display | Staff, Attendee | ✅ Yes | +| `badge_type` | `badge_type_override` | Badge category label text | Staff only | No | +| `badge_type_code` | `badge_type_code_override` | Badge access level code | Staff only | No | +| `registration_type` | `registration_type_override` | Registration category label text | Staff only | No | +| `registration_type_code` | `registration_type_code_override` | Registration category code | Staff only | No | > **Note:** `phone`, `phone_override`, `pronouns_override`, `registration_type`, `registration_type_code`, `registration_type_override`, `registration_type_code_override` may need to be confirmed against the DB schema via `ae_describe event_badge` and added to `properties_to_save` in `ae_events__event_badge.ts` if not already present. @@ -204,11 +224,29 @@ editable_badge_type_code: string | null #### Badge Review Form (`ae_comp__badge_review_form.svelte`) Form-based review (NOT a badge render). Used by the `/review` page. + +**Props:** - `can_edit_fields: string[]` prop controls which fields are editable per user level - `['*']` = administrator (all fields) -- `is_staff: boolean` prop shows/hides the source-data panel +- `is_staff: boolean` prop shows/hides the staff-only fields - Fields show "(overridden)" label when an override value differs from the base field +**Features (implemented 2026-02-27):** +- **HTML Rendering**: `full_name_override`, `professional_title_override`, `affiliations_override`, and `location_override` fields render HTML markup using `{@html}` directive when viewing (not when editing) +- **Accessibility**: Text enlargement toggle button switches between text-2xl (normal) and text-4xl (enlarged) for improved readability +- **Help Modal**: Flowbite Modal component with 6 help sections (Reviewing Badge, Editing Info, Accessibility, QR Code, Lead Scanning, Assistance) +- **QR Code Display**: Generates QR code using `core_func.js_generate_qr_code()` with badge ID, supports hover zoom and click-to-expand +- **Print Status**: Shows print count, first print datetime, and last print datetime at top of form +- **Local Edit Mode**: Independent `local_edit_active` state (never writes to `$ae_loc.edit_mode`) +- **Save/Cancel**: Only changed fields sent to API; revert button for override fields + +**Editable Fields:** +- Pronouns, Full Name, Professional Title, Affiliations, Phone, Location (all with override support) +- Allow Tracking checkbox (lead scanning permission) +- Staff-only: Email, Badge Type, Registration Type, Hide, Priority, Notes +- Staff-only: Options (`other_1_code` through `other_8_code`) and Tickets (`ticket_1_code` through `ticket_8_code`) +- Agree to Terms & Conditions checkbox (attendee-visible when in can_edit_fields) + #### Badge Review Page — Header Buttons (implemented 2026-02-27) | Button | Visible To | Behavior | @@ -227,14 +265,17 @@ Form-based review (NOT a badge render). Used by the `/review` page. | Review (Eye icon) | Trusted + Edit Mode only | `` nav link | | Email Link (Mail icon) | All if not printed; Trusted+Edit if printed | Placeholder `alert()` — email API pending | -#### Badge Review Page — Display Sections (planned, not yet built) +#### Badge Review Page — Display Sections (implemented 2026-02-27) -In addition to the editable form, the review page will display: +The review form (`ae_comp__badge_review_form.svelte`) displays: -1. **Print status** — print count + first/last print timestamps (read-only) -2. **QR Code** — the attendee's badge QR code for scanning at the badge kiosk (for automatic badge search + print flow). QR generation code may be recoverable from the legacy AE Badge version. -3. **Options** (`other_1_code` through `other_8_code`) — shown as `[✓] Option X` if the field has a value; hidden if empty -4. **Tickets** (`ticket_1_code` through `ticket_8_code`) — shown as `[✓] Ticket X` if the field has a value; hidden if empty +1. **Print status** ✅ — print count + first/last print timestamps (read-only, hidden if never printed) +2. **QR Code** ✅ — the attendee's badge QR code for scanning at the badge kiosk (for automatic badge search + print flow). Generated using `core_func.js_generate_qr_code()` with `obj_type: 'event_badge'` and badge ID. Supports hover zoom overlay and click-to-expand. +3. **Editable Fields** ✅ — all fields with access-level gating, override support, and HTML rendering for display fields +4. **Options** ✅ (`other_1_code` through `other_8_code`) — Staff: editable text inputs; Attendees: shown as `[✓] Option X` checkmark display only when value exists +5. **Tickets** ✅ (`ticket_1_code` through `ticket_8_code`) — Staff: editable text inputs; Attendees: shown as `[✓] Ticket X` checkmark display only when value exists +6. **Accessibility Toggle** ✅ — Font size enlargement button in sticky header (text-2xl ↔ text-4xl) +7. **Help Modal** ✅ — Attendee guidance modal with 6 sections explaining the review process, editing, QR codes, and lead scanning #### Default Field Permissions (hardcoded for now — Axonius first show, mid-April 2026) @@ -723,9 +764,12 @@ None — all current badge tests passing as of 2026-02-26 (f5e98b8c). - ✅ Settings UI for `edit_permissions` per event (`ae_comp__event_settings_badges_form.svelte`) - ✅ All badge module icons converted to Lucide (Font Awesome removed from badge routes) +### Recently Completed (2026-02-27) +- ✅ **Badge Review Form** — `ae_comp__badge_review_form.svelte` fully implemented (fields, QR, save/cancel, options/tickets, accessibility, help modal) +- ✅ **Print font size controls (v1)** — Screen-only `[−]/[+]/[↺]` panel on print page; 4 px props added to `ae_comp__badge_obj_view.svelte`; auto-sizing unchanged when props absent +- ✅ **Bug fix** — `default_authenticated_fields` / `default_trusted_fields` in `review/+page.svelte` corrected (wrong field names caused silent save drops) + ### Still Needed — HIGH PRIORITY (first show: April 2026) -1. **Badge Review Form — actual fields:** `ae_comp__badge_review_form.svelte` is a stub. Needs full field rendering, edit inputs, save/cancel, and the display-only sections (QR code, print status, option/ticket checkmarks). See `PROJECT__AE_Events_Badges_Review_Print.md` for full spec. -2. **Badge Print Page — font size controls:** Screen-only controls to adjust font size for name, professional title, affiliations, and location sections before printing. See project brief. ### Still Needed — MEDIUM PRIORITY 1. **Email API for review links:** `send_review_email()` is a placeholder `alert()`. Needs actual email send endpoint. diff --git a/documentation/PROJECT__AE_Events_Badges_Review_Print.md b/documentation/PROJECT__AE_Events_Badges_Review_Print.md index b503707d..09f167a9 100644 --- a/documentation/PROJECT__AE_Events_Badges_Review_Print.md +++ b/documentation/PROJECT__AE_Events_Badges_Review_Print.md @@ -1,22 +1,75 @@ # PROJECT: AE Events Badges — Review Form & Print Font Controls **Created:** 2026-02-27 +**Last Updated:** 2026-02-27 **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 + +--- + +## Implementation Status (2026-02-27) + +### ✅ TASK 1: Badge Review Form — COMPLETE + +The badge review form (`ae_comp__badge_review_form.svelte`) is now fully functional with: +- ✅ All editable fields with access-level gating +- ✅ Print status display section +- ✅ QR code generation and display (hover zoom + click expand) +- ✅ Options and Tickets fields (staff edit / attendee view) +- ✅ Save/Cancel with change detection +- ✅ Override field revert buttons +- ✅ **HTML rendering** for full_name, professional_title, affiliations, location +- ✅ **Accessibility toggle** for text enlargement (text-2xl ↔ text-4xl) +- ✅ **Help modal** with 6 sections of attendee guidance (Flowbite Modal component) +- ✅ Local edit mode (never writes to `$ae_loc.edit_mode`) + +**Bug fixed (2026-02-27):** `default_authenticated_fields` and `default_trusted_fields` in +`review/+page.svelte` had incorrect field names causing `can_edit()` to silently drop saves. +Fixed to use exact names matching the form's `can_edit()` checks. + +### ✅ TASK 2: Badge Print Font Controls — COMPLETE (v1) + +Implemented in commit `3d7279da`. This is a **first draft** — auto font scaling using +mm/inch units is planned as a future iteration. + +**What was built:** +- `ae_comp__badge_obj_view.svelte`: 4 new optional props (`font_size_name`, `font_size_title`, + `font_size_affiliations`, `font_size_location`, all `number` in px). When provided, replaces + auto inch-based Tailwind class sizing with an inline `font-size: Npx` style. Existing + auto-sizing behavior is completely unchanged when props are absent. +- `print/+page.svelte`: Screen-only (`print:hidden`) control panel with 4 rows, one per field. + Each row: label, `[−]` button, value display (`58px` or `Auto`), `[+]` button, `[↺]` reset. + Step: 2px. `null` state = auto (uses existing inch-based auto-sizing). First `+` click + activates at a sensible default that approximates the current auto inch values. + +**Default px values when first activated (≈ inch equivalents at 96dpi):** + +| Field | Default px | Approx. inch | Range | +|--------------|------------|--------------|----------| +| Name | 58px | ≈ .60in | 20–80px | +| Title | 34px | ≈ .35in | 14–56px | +| Affiliations | 38px | ≈ .40in | 14–60px | +| Location | 34px | ≈ .35in | 14–56px | + +**Future:** Auto font scaling using mm/inch units (physical paper stock measurements). +Will likely need to revisit the inch ↔ mm conversion and potentially expose the auto-sizing +logic as adjustable rather than replacing it with px overrides. --- ## Context The Events Badges module is mostly complete for navigation and search. Two key pieces of -functional UI remain unbuilt and are needed before the first show: +functional UI were needed before the first show: -1. **Badge Review Form** — `ae_comp__badge_review_form.svelte` is currently a stub. It - needs actual field rendering, edit inputs gated by access level, save/cancel API calls, - and display-only sections (QR code, print status, option/ticket checkmarks). +1. **Badge Review Form** ✅ — `ae_comp__badge_review_form.svelte` now has complete field + rendering, edit inputs gated by access level, save/cancel API calls, and display-only + sections (QR code, print status, option/ticket checkmarks). Also includes accessibility + features (text enlargement) and help modal for attendee guidance. -2. **Badge Print Font Controls** — The print page header needs screen-only controls +2. **Badge Print Font Controls** ⏳ — The print page header needs screen-only controls (hidden during `window.print()`) to bump font sizes for the name, professional title, affiliations, and location sections before printing. These only affect the `ae_comp__badge_obj_view.svelte` render — not the page layout/template structural dimensions. @@ -107,7 +160,7 @@ and can be used as reference. --- -### Section 1: Display-Only Status Bar (all access levels) +### Section 1: Display-Only Status Bar (all access levels) ✅ IMPLEMENTED Always show at top of form. Read-only. No edit controls. @@ -115,27 +168,35 @@ Always show at top of form. Read-only. No edit controls. Print Status: [Not yet printed] OR [Printed 3× — first: Jan 5 2026, last: Jan 5 2026] ``` -Use `$lq__event_badge_obj.print_count`, `print_first_datetime`, `print_last_datetime`. +**Implemented:** Shows print count with first/last print datetimes. Hidden if `print_count < 1`. +Uses `$lq__event_badge_obj.print_count`, `print_first_datetime`, `print_last_datetime`. Format datetimes with `ae_util.iso_datetime_formatter(dt, 'datetime_iso_12_no_seconds')`. Import `ae_util` from `$lib/ae_utils/ae_utils`. --- -### Section 2: QR Code (all access levels) +### Section 2: QR Code (all access levels) ✅ IMPLEMENTED Display the attendee's badge QR code. This is the same QR code shown on the printed badge itself — scanning it at the badge station triggers automatic badge search and print. -**Check the legacy AE Badge version for existing QR generation code.** Look in: -- `src/lib/ae_events/` for any QR-related utilities -- `ae_comp__badge_obj_view.svelte` — the badge render component almost certainly generates - a QR code already for the printed badge. Reuse that logic/component if possible. +**Implemented using `core_func.js_generate_qr_code()`:** +```typescript +qr_data_url = await core_func.js_generate_qr_code('obj', { + obj_type: 'event_badge', + obj_id: event_badge_id +}); +``` -The QR code value should encode the badge ID or a URL that resolves to the badge. +**Features:** +- Hover: Zoom overlay effect (`qr_hovered` state) +- Click: Expand/collapse that pushes content down (`qr_expanded` state) +- Displays as data URL image from QR code generation +- Reactive: automatically regenerates when `event_badge_id` changes --- -### Section 3: Editable Fields +### Section 3: Editable Fields ✅ IMPLEMENTED Render each field as: read-only display when `!can_edit(field)`, or an `` / `