upskill-event-manager/docs/TEC-EVENT-EDIT-COMPREHENSIVE-FIX.md

TEC Community Events - Comprehensive Event Edit Field Population Fix

Overview

Issue: The Events Calendar Community Events plugin has a systematic bug where both submission_form and edit_event views fail to populate core event fields (title, description, venue, organizer, categories, tags, etc.) when editing existing events.

Solution: Comprehensive field population system that uses WordPress/TEC APIs to properly populate ALL form fields for event editing.

Root Cause Analysis

TEC Plugin Bug Evidence

• [tribe_community_events view="submission_form"] ❌ Empty fields
• [tribe_community_events view="edit_event" id="123"] ❌ Empty fields
• Date/time meta fields ✅ Populate correctly
• Core post fields & meta ❌ Always empty

What Works vs What Doesn't

Field Type	Status	Notes
Event Title	❌ Empty	Core post field
Event Description	❌ Empty	Core post field
Start/End Date	✅ Works	Meta field
Start/End Time	✅ Works	Meta field
Venue	❌ Empty	Taxonomy/Meta
Organizer	❌ Empty	Taxonomy/Meta
Categories	❌ Empty	Taxonomy
Tags	❌ Empty	Taxonomy
Event Image	❌ Empty	Featured image
Virtual Event	❌ Empty	Meta field
Tickets/RSVP	❌ Empty	Complex meta

Technical Architecture

Current Implementation Status

• JavaScript workaround: Partially working (title/description only)
• TEC edit_event view: Confirmed broken
• Need: Comprehensive solution for ALL fields

Required Data Sources

1. Core Event Data: get_post($event_id)
2. Event Meta: get_post_meta($event_id, '_*')
3. Venues: tribe_get_venue_id($event_id) + venue data
4. Organizers: tribe_get_organizer_id($event_id) + organizer data
5. Taxonomies: wp_get_post_terms($event_id, 'tribe_events_cat')
6. Featured Image: get_post_thumbnail_id($event_id)

Implementation Strategy

1. Server-side PHP Class: Get all event data via WordPress/TEC APIs
2. Client-side JavaScript: Comprehensive field population after form load
3. Field Detection: Robust selectors for all TEC form fields
4. Data Validation: Ensure data integrity and security
5. Performance: Minimal overhead, only load on edit pages

Field Population Mapping

Core Fields

// Title
'input[name="post_title"], #post_title' → event.post_title

// Description  
'textarea[name="post_content"], #post_content' → event.post_content
// TinyMCE: tinymce.get('post_content').setContent(content)

Date/Time Fields (Working - for reference)

'input[name="EventStartDate"]' → event._EventStartDate
'input[name="EventEndDate"]' → event._EventEndDate
'input[name="EventStartHour"]' → event._EventStartHour
'input[name="EventEndHour"]' → event._EventEndHour

Venue Fields

// Venue dropdown/search
'select[name="venue[VenueID]"], input[name="venue[Venue]"]' → venue data
// Venue creation fields
'input[name="venue[Venue]"]' → venue.post_title
'textarea[name="venue[Description]"]' → venue.post_content
'input[name="venue[Address]"]' → venue._VenueAddress
'input[name="venue[City]"]' → venue._VenueCity
'input[name="venue[State]"]' → venue._VenueState
'input[name="venue[Province]"]' → venue._VenueProvince
'input[name="venue[Zip]"]' → venue._VenueZip
'input[name="venue[Country]"]' → venue._VenueCountry
'input[name="venue[Phone]"]' → venue._VenuePhone
'input[name="venue[URL]"]' → venue._VenueURL

Organizer Fields

// Organizer dropdown/search
'select[name="organizer[OrganizerID]"], input[name="organizer[Organizer]"]' → organizer data
// Organizer creation fields
'input[name="organizer[Organizer]"]' → organizer.post_title
'textarea[name="organizer[Description]"]' → organizer.post_content
'input[name="organizer[Phone]"]' → organizer._OrganizerPhone
'input[name="organizer[Website]"]' → organizer._OrganizerWebsite
'input[name="organizer[Email]"]' → organizer._OrganizerEmail

Taxonomy Fields

// Categories (checkboxes or select)
'input[name="tax_input[tribe_events_cat][]"]' → event categories
// Tags (text input or select)
'input[name="tax_input[post_tag][]"]' → event tags

Meta Fields

// Featured Image
'input[type="file"][name="featured_image"]' → featured image ID
// Virtual Event
'input[name="is_virtual"]' → _VirtualEvent meta
// External URL
'input[name="external_url"]' → _EventURL meta
// Cost
'input[name="EventCost"]' → _EventCost meta

Security Requirements

Data Validation

// Always verify user can edit event
if (!current_user_can('edit_post', $event_id) && get_post($event_id)->post_author !== get_current_user_id()) {
    wp_die('Permission denied');
}

// Sanitize all output
$event_data = array(
    'title' => sanitize_text_field($post->post_title),
    'content' => wp_kses_post($post->post_content),
    // ... etc
);

Nonce Security

// Include nonce for AJAX security
wp_localize_script('hvac-event-fix', 'hvac_event_data', array(
    'event_data' => $event_data,
    'nonce' => wp_create_nonce('hvac_event_edit_' . $event_id),
    'event_id' => $event_id
));

Implementation Files

PHP Files to Create/Modify

1. includes/class-hvac-event-edit-comprehensive.php - Main fix class
2. includes/class-hvac-event-data-provider.php - Data retrieval class
3. assets/js/hvac-event-edit-comprehensive.js - Client-side population
4. assets/css/hvac-event-edit-fixes.css - Visual feedback styles

WordPress/TEC API Usage

// Core event data
$event = get_post($event_id);
$event_meta = get_post_meta($event_id);

// TEC-specific data
$venue_id = tribe_get_venue_id($event_id);
$venue_data = $venue_id ? get_post($venue_id) : null;
$organizer_id = tribe_get_organizer_id($event_id);
$organizer_data = $organizer_id ? get_post($organizer_id) : null;

// Taxonomies
$categories = wp_get_post_terms($event_id, 'tribe_events_cat');
$tags = wp_get_post_terms($event_id, 'post_tag');

// Featured image
$featured_image_id = get_post_thumbnail_id($event_id);

WordPress CLI Integration

Test Data Creation

# Create test events with full data
wp eval '
$event_id = tribe_create_event(array(
    "post_title" => "Test Event with Full Data",
    "post_content" => "Complete event description",
    "_EventStartDate" => "2025-08-15",
    "_EventVenueID" => 123,
    "_EventOrganizerID" => 456
));
echo "Created event: " . $event_id;
'

# Verify event data
wp eval 'var_dump(tribe_get_event(6078));'

Data Verification

# Check event meta fields
wp post meta list 6078

# Check venue association
wp eval 'echo "Venue ID: " . tribe_get_venue_id(6078);'

# Check organizer association  
wp eval 'echo "Organizer ID: " . tribe_get_organizer_id(6078);'

Testing Strategy

Test Cases

1. Empty Form Fix - Verify all fields populate from existing event data
2. Partial Data - Handle events with missing venue/organizer gracefully
3. Security - Ensure only authorized users can edit events
4. Performance - Minimal impact on page load times
5. Cross-browser - Test in Safari, Chrome, Firefox
6. Mobile - Responsive design for mobile editing

Test Events Required

# Complete event (all fields)
wp eval 'echo tribe_create_event(array("post_title" => "Complete Test Event"));'

# Minimal event (title only)
wp eval 'echo tribe_create_event(array("post_title" => "Minimal Test Event"));'

# Event with venue/organizer
wp eval 'echo tribe_create_event(array("post_title" => "Event with Associations"));'

User Experience

Visual Feedback

• Green borders on successfully populated fields
• Success notification showing field count populated
• Loading indicator during population process
• Error handling for failed field population

Fallback Behavior

• If field population fails, form remains functional
• Console logging for debugging
• Graceful degradation for missing data

Deployment Steps

1. Create comprehensive PHP class with all TEC API calls
2. Build robust JavaScript with field detection and population
3. Add security validation and error handling
4. Deploy to staging and test with real event data
5. Verify all field types populate correctly
6. Test user permissions and security
7. Performance test page load times
8. Deploy to production after full verification

Success Criteria

Functional Requirements

• ✅ All event fields populate correctly when editing
• ✅ Works with all TEC event types (standard, virtual, recurring)
• ✅ Handles missing data gracefully
• ✅ Security validated (user permissions, nonces)
• ✅ Performance impact < 100ms additional load time

User Experience

• ✅ Visual confirmation of field population
• ✅ No JavaScript errors in console
• ✅ Form remains fully functional
• ✅ Works across all supported browsers
• ✅ Mobile-responsive

Environment Variables

From .env file:

# WordPress/TEC access for testing
UPSKILL_STAGING_IP=146.190.76.204
UPSKILL_STAGING_SSH_USER=roodev
UPSKILL_STAGING_PATH=/home/974670.cloudwaysapps.com/uberrxmprk/public_html

Known Limitations

1. TEC Plugin Dependency - Requires TEC Community Events to be active
2. JavaScript Dependency - Won't work with JS disabled (acceptable trade-off)
3. Complex Fields - Some advanced TEC fields may require special handling
4. Performance - Additional API calls on edit page load

Maintenance Notes

• Monitor TEC updates - Plugin updates may fix or break field population
• Test after WordPress updates - Core WP changes may affect field selectors
• Performance monitoring - Watch for increased page load times
• User feedback - Monitor for issues with specific event types or browsers