94 lines
3.5 KiB
Markdown
94 lines
3.5 KiB
Markdown
# Survey Mapping Edit Modal Fix
|
|
|
|
## Summary
|
|
|
|
Fixed the edit modal functionality in the Survey Template Mappings settings page. The edit button was not properly populating the form fields due to a timing issue with the survey template dropdown.
|
|
|
|
## Problem
|
|
|
|
When clicking the "Edit" button on a survey mapping:
|
|
1. The hospital dropdown would change to trigger loading survey templates
|
|
2. The survey template dropdown value was being set BEFORE the dropdown was populated with options
|
|
3. This resulted in the survey template dropdown being empty and the form not displaying the current mapping
|
|
|
|
## Root Cause
|
|
|
|
**Timing Issue**: The JavaScript was setting the survey template value immediately, then triggering the hospital change event to load the templates. The fetch operation is asynchronous, so the value was being set to an empty dropdown.
|
|
|
|
## Solution
|
|
|
|
Implemented a **pending value pattern** using `dataset.pendingValue`:
|
|
|
|
1. When edit button is clicked, store the survey template ID in `surveyTemplateSelect.dataset.pendingValue`
|
|
2. When hospital changes, populate the dropdown with options
|
|
3. After loading completes, check if there's a pending value and set it
|
|
4. Clear the pending value after setting
|
|
|
|
## Changes Made
|
|
|
|
### File: `templates/integrations/survey_mapping_settings.html`
|
|
|
|
**Modified JavaScript:**
|
|
|
|
1. **Hospital Change Event Handler:**
|
|
- Added `surveyTemplateSelect.dataset.pendingValue = ''` initialization
|
|
- Added code to set pending value after loading templates:
|
|
```javascript
|
|
if (surveyTemplateSelect.dataset.pendingValue) {
|
|
surveyTemplateSelect.value = surveyTemplateSelect.dataset.pendingValue;
|
|
surveyTemplateSelect.dataset.pendingValue = '';
|
|
}
|
|
```
|
|
|
|
2. **Edit Button Event Handler:**
|
|
- Removed immediate survey template value setting
|
|
- Added pending value storage:
|
|
```javascript
|
|
const surveyTemplateId = this.dataset.surveyTemplate;
|
|
const surveyTemplateSelect = document.getElementById('surveyTemplate');
|
|
surveyTemplateSelect.dataset.pendingValue = surveyTemplateId;
|
|
```
|
|
|
|
## How It Works
|
|
|
|
The fix ensures proper sequencing:
|
|
|
|
1. Edit button clicked → Store survey template ID in pending value
|
|
2. Hospital dropdown changed → Clear dropdown, reset pending value
|
|
3. Fetch survey templates → Populate dropdown with options
|
|
4. After fetch completes → Check pending value and set dropdown value
|
|
5. Dropdown now shows the correct survey template
|
|
|
|
## Testing
|
|
|
|
To verify the fix:
|
|
|
|
1. Navigate to Survey Template Mappings settings page
|
|
2. Click "Edit" on an existing mapping
|
|
3. Verify all fields are populated correctly:
|
|
- Hospital dropdown shows correct hospital
|
|
- Survey template dropdown shows correct template (previously empty)
|
|
- Patient type shows correct value
|
|
- Active checkbox shows correct state
|
|
4. Modify values and save
|
|
5. Verify the mapping is updated successfully
|
|
|
|
## Technical Details
|
|
|
|
- **Pattern**: Asynchronous callback with pending state
|
|
- **DOM API**: `dataset` property for storing temporary state
|
|
- **Event Flow**: Change event → Async fetch → Callback sets value
|
|
- **Browser Compatibility**: Modern browsers with `dataset` support (IE11+)
|
|
|
|
## Related Files
|
|
|
|
- `apps/integrations/ui_views.py` - ViewSet for survey template mappings
|
|
- `apps/integrations/serializers.py` - Serializers for survey template mappings
|
|
- `apps/integrations/models.py` - SurveyTemplateMapping model
|
|
|
|
## Notes
|
|
|
|
- The fix maintains backward compatibility
|
|
- No server-side changes required
|
|
- Pure client-side JavaScript solution
|
|
- Works with both array and paginated API response formats |