upskill-event-manager/docs/EDIT-PAGE-REFACTORING-ANALYSIS.md

Event Edit Page Refactoring Analysis

Date: September 27, 2025 Analysis Tool: Zen Refactor with GLM-4.5 Scope: Modernization of trainer/event/edit/?event_id=6420 to match create page patterns

---

Executive Summary

The event edit page uses a legacy iframe-based architecture that lacks feature parity with the modernized create page. A comprehensive architectural overhaul is required to achieve consistency and provide users with the same advanced functionality across both create and edit workflows.

Total Issues Identified: 14 refactoring opportunities Severity Breakdown: 4 Critical, 5 High Priority, 4 Medium Priority, 1 Low Priority

---

Current Architecture Comparison

Edit Page (Legacy - REQUIRES REFACTORING)

// page-tec-edit-event.php - Current Implementation
- Uses iframe embedding: `/events/network/edit/{id}/`
- No native form control
- Limited validation and error handling
- Cross-origin iframe limitations
- Basic styling and UX

Create Page (Modern - TARGET PATTERN)

// page-tec-create-event.php - Target Implementation
- Native HVAC_Event_Form_Builder integration
- HVAC_Event_Form_Handler for processing
- WordPress TinyMCE rich text editor
- AI-powered content generation
- Featured image upload with wp.media
- Searchable selectors with autocomplete
- Advanced options toggle functionality
- Modal venue/organizer creation

---

Critical Issues (Immediate Action Required)

🚨 Issue #1: Missing Edit Methods

File: includes/class-hvac-event-form-builder.php Problem: Only has create_event_form() method, no edit capability Solution: Add edit_event_form($event_id, $config = []) method Impact: Blocks native form implementation for editing

🚨 Issue #2: Missing Update Methods

File: includes/class-hvac-event-form-handler.php Problem: Only has create_event() method, no update functionality Solution: Add update_event($event_id, $form_data) method Impact: Cannot process edit form submissions

🚨 Issue #3: Legacy Architecture

File: templates/page-tec-edit-event.php Problem: Uses iframe embedding instead of native form builder Solution: Replace with native HVAC form builder integration Impact: Prevents access to modern features and causes UX inconsistencies

🚨 Issue #4: No Data Pre-population

Files: Form builder and handler classes Problem: Cannot load existing event data into form fields Solution: Implement event data loading and field pre-population Impact: Users cannot see current values when editing

---

High Priority Feature Gaps

⚠️ Issue #5: No AI Assistance

Missing: AI-powered content generation for event descriptions Implementation: Integrate hvac-ai-assist.js with edit mode

⚠️ Issue #6: No Featured Images

Missing: Featured image editing capability Implementation: Add wp.media integration for image uploads

⚠️ Issue #7: No Searchable Selectors

Missing: Autocomplete for venues/organizers/categories Implementation: Add searchable selector components with pre-selected values

⚠️ Issue #8: No Advanced Options

Missing: Timezone, capacity, cost toggle functionality Implementation: Add advanced options toggle with field visibility controls

⚠️ Issue #9: No Modal Creation

Missing: Inline venue/organizer creation Implementation: Add modal forms for creating new entities during editing

---

Medium Priority UX Consistency Issues

📋 Issue #10: No TinyMCE Editor

Current: Basic textarea for descriptions Target: WordPress TinyMCE rich text editor with formatting

📋 Issue #11: No Form Validation

Current: Basic validation via iframe Target: Comprehensive input validation with real-time feedback

📋 Issue #12: No Error Handling

Current: Basic error display Target: Comprehensive error handling with user-friendly messages

📋 Issue #13: Inconsistent Styling

Current: Different CSS patterns between create and edit pages Target: Unified styling system across both pages

---

Implementation Strategy

Phase 1: Extend Core Classes (Week 1)

1.1 Extend HVAC_Event_Form_Builder

// Add to class-hvac-event-form-builder.php
public function edit_event_form(int $event_id, array $config = []): self
public function load_event_data(int $event_id): array
public function populate_form_fields(array $event_data): self

1.2 Extend HVAC_Event_Form_Handler

// Add to class-hvac-event-form-handler.php
public static function update_event(int $event_id, array $form_data): int|WP_Error
public static function validate_update_permissions(int $event_id, int $user_id): bool
public static function get_event_data_for_editing(int $event_id): array|WP_Error

Phase 2: Template Modernization (Week 2)

2.1 Replace iframe Architecture

• Remove iframe embedding from page-tec-edit-event.php
• Implement native form builder integration
• Add form submission processing

2.2 Add Modern Features

• AI assistance integration
• Featured image editing
• Searchable selectors with pre-selected values
• Advanced options toggle
• Modal creation forms

2.3 Ensure Feature Parity

• TinyMCE rich text editor
• Comprehensive validation
• Error handling and user feedback
• Consistent styling

Phase 3: Integration & Testing (Week 3)

3.1 URL Compatibility

• Maintain existing URL structure: trainer/event/edit/?event_id=6420
• Ensure backward compatibility with bookmarks and links

3.2 TEC Integration

• Verify tribe_events post type compatibility
• Test event metadata preservation
• Validate venue/organizer associations

3.3 User Experience Testing

• Test complete edit workflow
• Verify form validation and error handling
• Confirm feature parity with create page

---

Technical Requirements

Form Builder Extensions

// Required methods for edit functionality
- edit_event_form(int $event_id, array $config = []): self
- load_event_data(int $event_id): array
- populate_form_fields(array $event_data): self
- set_edit_mode(bool $is_edit): self
- get_form_mode(): string

Form Handler Extensions

// Required methods for update processing
- update_event(int $event_id, array $form_data): int|WP_Error
- validate_update_permissions(int $event_id, int $user_id): bool
- get_event_data_for_editing(int $event_id): array|WP_Error
- validate_and_sanitize_update(array $form_data, int $event_id): array|WP_Error

Template Requirements

• Native form builder integration
• Event data pre-population
• Form submission handling
• Success/error feedback
• Modern feature integration (AI, featured images, etc.)

---

Success Criteria

Technical Metrics

• Native form builder replaces iframe approach
• Complete feature parity with create page
• All 14 identified issues resolved
• Backward URL compatibility maintained
• TEC integration preserved

User Experience Metrics

• Consistent editing workflow with creation
• AI assistance available for content editing
• Featured image editing capability
• Advanced options accessible via toggle
• Real-time validation and error feedback

Performance Metrics

• No iframe cross-origin limitations
• Faster form loading and interaction
• Reduced complexity in form submission

---

Risk Assessment

Low Risk ✅

• Form Builder Extension: Well-established patterns from create page
• Template Modernization: Clear target implementation exists
• Feature Integration: All components already functional on create page

Medium Risk ⚠️

• Data Migration: Ensuring all existing event data loads correctly
• URL Compatibility: Maintaining backward compatibility during transition
• User Training: Users familiar with iframe approach may need guidance

High Risk 🚨

• TEC Integration: Must preserve all event metadata and associations
• Permission Validation: Ensuring secure edit access controls
• Data Integrity: Preventing data loss during edit operations

---

Implementation Priority

1. Phase 1 (Critical): Extend form builder and handler classes
2. Phase 2 (High): Replace template architecture and add modern features
3. Phase 3 (Medium): Integration testing and URL compatibility

Estimated Timeline: 3 weeks Resource Requirements: 1 developer, access to staging environment Dependencies: Completion of create page modernization (✅ Complete)

---

This analysis provides the complete roadmap for modernizing the event edit page to achieve feature parity with the create page while maintaining backward compatibility and TEC integration.