HH/SURVEY_MAPPING_EDIT_MODAL_FIX.md

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:

   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:

   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