120 lines
4.5 KiB
Markdown
120 lines
4.5 KiB
Markdown
# Debugging Custom Recipients Feature
|
|
|
|
## Changes Made to Fix Checkbox Toggle
|
|
|
|
### Issue
|
|
The "Allow Custom Recipients" checkbox wasn't showing/hiding the custom recipients management section when clicked.
|
|
|
|
### Root Causes
|
|
1. **Event Listener Timing**: Original code tried to attach event listeners during `init()`, but the edit form elements didn't exist yet
|
|
2. **Not Following Best Practices**: Wasn't using event delegation pattern as required by `instruct.md`
|
|
|
|
### Solution
|
|
Switched to **event delegation** pattern using a single document-level listener:
|
|
|
|
```javascript
|
|
// OLD (didn't work - elements didn't exist yet):
|
|
const editCheckbox = document.getElementById('edit-allow-custom-recipients');
|
|
if (editCheckbox) {
|
|
editCheckbox.addEventListener('change', handler);
|
|
}
|
|
|
|
// NEW (works with event delegation):
|
|
document.addEventListener('change', (e) => {
|
|
if (e.target.id === 'edit-allow-custom-recipients') {
|
|
// Handle the change
|
|
}
|
|
});
|
|
```
|
|
|
|
### Benefits of Event Delegation
|
|
1. ✅ Works regardless of when elements are added to DOM
|
|
2. ✅ Follows `instruct.md` rules about using `addEventListener`
|
|
3. ✅ No need to reattach listeners when switching tabs
|
|
4. ✅ Single listener handles all checkbox changes efficiently
|
|
|
|
### Console Logs Added for Debugging
|
|
The following console logs were added to help trace execution:
|
|
|
|
1. **admin.js init()**: "AdminPanel init started" and "AdminPanel init completed"
|
|
2. **custom-recipients.js load**: "Custom Recipients module loading..." and "Custom Recipients module initialized"
|
|
3. **setupCustomRecipientsHandlers()**: "Setting up custom recipients handlers" and "Custom recipients handlers set up with event delegation"
|
|
4. **Checkbox change**: "Custom recipients checkbox changed: true/false"
|
|
5. **Module init**: "Initializing CustomRecipients module for campaign: [slug]"
|
|
6. **toggleCustomRecipientsSection()**: "Toggling custom recipients section: true/false" and "Section display set to: block/none"
|
|
|
|
### Testing Steps
|
|
|
|
1. **Open Browser Console** (F12)
|
|
2. **Navigate to Admin Panel** → Look for "AdminPanel init started"
|
|
3. **Look for Module Load** → "Custom Recipients module loading..."
|
|
|
|
**Test Create Form:**
|
|
4. **Switch to Create Tab** → Click "Create New Campaign"
|
|
5. **Check the Checkbox** → "Allow Custom Recipients"
|
|
6. **Verify Info Section Appears** → Should see: "Custom recipients can only be added after the campaign is created"
|
|
7. **Console Should Show**: "Create form: Custom recipients checkbox changed: true"
|
|
|
|
**Test Edit Form:**
|
|
8. **Switch to Edit Tab** → Select a campaign
|
|
9. **Check the Checkbox** → "Allow Custom Recipients"
|
|
10. **You Should See**:
|
|
- "Custom recipients checkbox changed: true"
|
|
- "Toggling custom recipients section: true"
|
|
- "Section display set to: block"
|
|
- "Initializing CustomRecipients module for campaign: [slug]"
|
|
11. **Verify Section Appears** → The "Manage Custom Recipients" section with forms should now be visible
|
|
|
|
### If It Still Doesn't Work
|
|
|
|
Check the following in browser console:
|
|
|
|
1. **Are scripts loading?**
|
|
```
|
|
Look for: "Custom Recipients module loading..."
|
|
If missing: Check network tab for 404 errors on custom-recipients.js
|
|
```
|
|
|
|
2. **Is event delegation working?**
|
|
```
|
|
Look for: "Custom recipients handlers set up with event delegation"
|
|
If missing: Check if setupCustomRecipientsHandlers() is being called
|
|
```
|
|
|
|
3. **Is checkbox being detected?**
|
|
```
|
|
Click checkbox and look for: "Custom recipients checkbox changed: true"
|
|
If missing: Check if checkbox ID is correct in HTML
|
|
```
|
|
|
|
4. **Is section element found?**
|
|
```
|
|
Look for: "section found: [object HTMLDivElement]"
|
|
If it says "section found: null": Check if section ID matches in HTML
|
|
```
|
|
|
|
5. **Manual test in console:**
|
|
```javascript
|
|
// Check if checkbox exists
|
|
document.getElementById('edit-allow-custom-recipients')
|
|
|
|
// Check if section exists
|
|
document.getElementById('edit-custom-recipients-section')
|
|
|
|
// Check if module loaded
|
|
window.CustomRecipients
|
|
|
|
// Manually toggle section
|
|
document.getElementById('edit-custom-recipients-section').style.display = 'block';
|
|
```
|
|
|
|
### Files Modified
|
|
- ✅ `app/public/js/admin.js` - Changed to event delegation pattern, added logging
|
|
- ✅ `app/public/js/custom-recipients.js` - Added loading logs
|
|
- ✅ No changes needed to HTML (already correct)
|
|
|
|
### Next Steps After Confirming It Works
|
|
1. Remove excessive console.log statements (or convert to debug mode)
|
|
2. Test full workflow: add recipient, edit, delete, bulk import
|
|
3. Proceed with dashboard.html integration
|