Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(badges): mark Task 2 complete, document font controls and bug fix

Browse Source 
- PROJECT doc: Task 2 status → complete (v1); added implementation
  details, default px values table, and note on future mm/inch iteration
- PROJECT doc: noted the review page field list bug fix (commit 011fc19a)
- MODULE doc: added "Recently Completed" section above Still Needed;
  cleared Badge Review Form and Print Font Controls from HIGH PRIORITY list

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-02-27 18:58:59 -05:00
parent 3d7279da4c
commit 4b17ca9f59
2 changed files with 179 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
documentation/PROJECT__AE_Events_Badges_Review_Print.md
View File

@@ -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 `<input>` /
`<select>` / `<textarea>` when `can_edit(field)`.
@@ -143,20 +204,42 @@ Render each field as: read-only display when `!can_edit(field)`, or an `<input>`
Show `(overridden)` label next to override fields when the override value differs from
the base field value.
**HTML Rendering (implemented 2026-02-27):**
The following fields render HTML markup using `{@html}` when viewing (not when editing):
- `full_name_override` / `full_name`
- `professional_title_override` / `professional_title`
- `affiliations_override` / `affiliations`
- `location_override` / `location`
This allows for rich text formatting (bold, italic, line breaks, etc.) in badge displays.
**Accessibility Features (implemented 2026-02-27):**
- Text enlargement toggle button in sticky header
- Normal size: `text-2xl` on field values
- Enlarged size: `text-4xl` on field values
- Button shows visual feedback (gray → blue, "Larger" → "Normal" label)
- Applied consistently across all text fields
**Help Modal (implemented 2026-02-27):**
- Flowbite Modal component with 6 sections
- Sections: Reviewing Badge, Editing Info, Accessibility, QR Code, Lead Scanning, Assistance
- Triggered by Help button (BadgeQuestionMark icon) in sticky header
- Currently has placeholder text — can be customized per event/client
#### Attendee-Editable Fields (shown to all access levels with link)
| Field | Input Type | Notes |
|---|---|---|
| `pronouns_override` | text input | Fallback display: `pronouns` |
| `full_name_override` | text input | Fallback display: `full_name` |
| `professional_title_override` | text input | Fallback display: `professional_title` |
| `affiliations_override` | textarea | Fallback display: `affiliations` |
| `full_name_override` | text input | Fallback display: `full_name`; **renders HTML** when viewing |
| `professional_title_override` | text input | Fallback display: `professional_title`; **renders HTML** when viewing |
| `affiliations_override` | textarea | Fallback display: `affiliations`; **renders HTML** when viewing |
| `phone_override` | text input (tel) | Fallback display: `phone` |
| `location_override` | text input | Fallback display: `location` |
| `location_override` | text input | Fallback display: `location`; **renders HTML** when viewing |
| `allow_tracking` | checkbox | Label: "Allow exhibitor lead scanning" |
| `agree_to_tc` | checkbox | Label: "I agree to the Terms and Conditions" + placeholder T&C text block |
#### Staff-Only Additional Fields (shown when `is_staff === true`)
#### Staff-Only Additional Fields (shown when `is_staff === true`) ✅ IMPLEMENTED
| Field | Input Type | Notes |
|---|---|---|
@@ -167,7 +250,7 @@ the base field value.
| `priority` | number input | |
| `notes` | textarea | |
#### Staff-Only: Options & Tickets (read-edit, shown when `is_staff === true`)
#### Staff-Only: Options & Tickets (read-edit, shown when `is_staff === true`) ✅ IMPLEMENTED
**Other/Options** (`other_1_code` through `other_8_code`):
- If field has a value: show as editable text input with label "Option X"
@@ -177,14 +260,14 @@ the base field value.
**Tickets** (`ticket_1_code` through `ticket_8_code`):
- Same pattern as options above, label "Ticket X"
#### Attendee-Only: Options & Tickets (display only)
#### Attendee-Only: Options & Tickets (display only) ✅ IMPLEMENTED
When `!is_staff` and the field has a value: show `[✓] Option X` or `[✓] Ticket X`.
When the field is empty: hide entirely (attendees don't see empty slots).
---
### Section 4: Terms & Conditions Block (all, only when `agree_to_tc` in can_edit_fields)
### Section 4: Terms & Conditions Block (all, only when `agree_to_tc` in can_edit_fields) ✅ IMPLEMENTED
Placeholder text for now:
```