docs: add comprehensive UI/UX enhancement requirements for event creation form

- Added responsive field grouping requirements (same row -> columns)
- Rich text editor specifications for event description
- Featured image upload with preview/replace capabilities
- Virtual event toggle functionality
- Enhanced toggle controls for RSVP/Ticketing sections
- Advanced multi-select components for organizer/categories
- Single-select searchable venue field
- Modal popup forms for creating new entities
- Fixed missing form field labels documentation
- Implementation priority and technical considerations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ben 2025-09-25 16:09:40 -03:00
parent c0175f51e3
commit 7010b8a30e

View file

@ -336,5 +336,99 @@ class HVAC_TEC_Tickets {
4. Form maintains existing functionality while adding new features 4. Form maintains existing functionality while adding new features
5. Integration works seamlessly with existing TEC Community Events 5. Integration works seamlessly with existing TEC Community Events
## Additional UI/UX Enhancement Requirements (September 2025)
### Form Layout Improvements
#### Field Grouping and Responsive Design
- **Same Row Fields (Desktop) → Column Layout (Mobile):**
- Ticket Price ($) & Ticket Capacity
- Ticket Sales Start & Ticket Sales End
- Start Date & Time & End Date & Time
#### Text Editor Enhancement
- **Event Description Field:**
- Increase size to 3x current dimensions
- Add rich text editing toolbar (bold, italic, lists, links)
- Support for formatted text input
#### Form Field Issues
- **Missing Label Issues:** Fix blank/unlabeled form sections:
- Blank box above "Enable Ticketing"
- Blank box above "Ticket Name"
- Two blank boxes above "Start Date & Time"
### New Feature Requirements
#### Featured Image Upload
- **Image Upload Component:**
- File upload interface with drag-and-drop
- Image preview functionality
- Replace/remove image capabilities
- Proper image optimization and sizing
#### Virtual Event Capability
- **Virtual Event Toggle:**
- Enable/disable virtual event mode
- When enabled, show virtual event specific fields
- Integration with existing venue system
#### Enhanced Toggle Controls
- **Interactive Toggles (show/hide subsections):**
- Virtual Event toggle → Virtual event configuration fields
- Enable RSVP toggle → RSVP configuration options
- Enable Ticketing toggle → Ticketing subsection fields
#### Advanced Selection Components
##### Multi-Select with Dynamic Search
- **Organizer Field:**
- Text input with autocomplete
- Dynamic dropdown showing all available options on focus
- Multi-select capability (up to 3 items)
- "Create New Organizer" option → Modal popup with organizer creation form
- **Categories Field (New):**
- Same functionality as Organizer field
- Text input with autocomplete search
- Multi-select up to 3 categories
- "Create New Category" option → Modal popup for category creation
##### Single-Select with Search
- **Venue Field Enhancement:**
- Convert to searchable single-select
- Text input with autocomplete
- Dynamic dropdown on focus
- Single selection only
- "Create New Venue" option → Modal popup with venue creation form
#### Modal Creation Forms
- **New Organizer Modal:**
- Name, email, phone, organization fields
- Save and apply to event functionality
- **New Category Modal:**
- Category name, description, parent category
- Save and apply to event functionality
- **New Venue Modal:**
- Venue name, address, capacity, facilities
- Save and apply to event functionality
### Implementation Priority
1. **Phase 1:** Fix existing form issues (missing labels, layout)
2. **Phase 2:** Implement responsive field grouping
3. **Phase 3:** Add rich text editor and featured image upload
4. **Phase 4:** Implement toggle controls and virtual event features
5. **Phase 5:** Create advanced selection components and modal forms
### Technical Considerations
- Maintain existing security measures and validation
- Ensure mobile responsiveness across all new components
- Integrate seamlessly with current TEC ticketing system
- Preserve existing template and autosave functionality
- Follow WordPress coding standards and accessibility guidelines
--- ---
*Implementation plan generated during TEC integration and template system improvement project* *Implementation plan generated during TEC integration and template system improvement project*
*Updated September 2025 with comprehensive UI/UX enhancement requirements*