Adding Region Data Attributes to TeamLead Options in ModelChoiceField

To implement the behavior where an Agent's region is automatically populated based on the selected TeamLead, you can customize the ModelChoiceField to include data attributes for each option in the dropdown. This approach will allow you to access the TeamLead's region via JavaScript when a selection is made.

Step 1: Create a Custom Widget

First, create a custom widget that adds the region as a data attribute to each option:

PYTHONCopied
from django.forms.widgets import Select

class TeamLeadSelectWidget(Select):
    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        option = super().create_option(name, value, label, selected, index, subindex, attrs)
        
        if value:
            # Get the TeamLead instance
            team_lead = self.choices.queryset.get(pk=value)
            # Add the region as a data attribute
            option['attrs']['data-region'] = team_lead.region
        
        return option

Step 2: Create a Custom ModelChoiceField

Next, create a custom ModelChoiceField that uses your widget:

PYTHONCopied
from django import forms

class TeamLeadModelChoiceField(forms.ModelChoiceField):
    widget = TeamLeadSelectWidget
    
    def label_from_instance(self, obj):
        # Customize how each TeamLead appears in the dropdown
        return f"{obj.first_name} {obj.last_name} ({obj.region})"

Step 3: Use the Custom Field in Your Form

Now, use this custom field in your form:

PYTHONCopied
class AgentForm(forms.ModelForm):
    team_leader = TeamLeadModelChoiceField(
        queryset=TeamLead.objects.all(),
        label="Team Leader",
        required=True,
    )
    
    class Meta:
        model = FieldOfficer
        fields = ['first_name', 'last_name', 'team_leader', 'region']
        
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # Make region read-only or hidden if you want it to be auto-populated
        self.fields['region'].widget.attrs['readonly'] = True

Step 4: Add JavaScript to Update the Region Field

Add JavaScript to your template to update the region field when a TeamLead is selected:

HTMLCopied
<script>
document.addEventListener('DOMContentLoaded', function() {
    const teamLeadSelect = document.getElementById('id_team_leader');
    const regionField = document.getElementById('id_region');
    
    // Set initial value if a TeamLead is already selected
    if (teamLeadSelect.value) {
        const selectedOption = teamLeadSelect.options[teamLeadSelect.selectedIndex];
        regionField.value = selectedOption.getAttribute('data-region');
    }
    
    // Update region when TeamLead selection changes
    teamLeadSelect.addEventListener('change', function() {
        const selectedOption = teamLeadSelect.options[teamLeadSelect.selectedIndex];
        regionField.value = selectedOption.getAttribute('data-region');
    });
});
</script>

Alternative Approach: Server-Side Validation

If you prefer to handle this on the server side without JavaScript, you can override the form's clean method:

PYTHONCopied
class AgentForm(forms.ModelForm):
    # ... other form code ...
    
    def clean(self):
        cleaned_data = super().clean()
        team_leader = cleaned_data.get('team_leader')
        
        if team_leader:
            # Auto-set the region based on the selected TeamLead
            cleaned_data['region'] = team_leader.region
        
        return cleaned_data

This approach ensures that the region is always set correctly, even if JavaScript is disabled in the browser.

By implementing these changes, you'll ensure that an Agent's region always matches their TeamLead's region, either through client-side updates or server-side validation.