Use HTMXSelect widget for A/B type selection

netbox/dcim/forms/connections.py

@@ -1,4 +1,5 @@
 from django import forms
+from django.contrib.contenttypes.models import ContentType
 from django.utils.translation import gettext_lazy as _
 
 from circuits.models import Circuit, CircuitTermination
@@ -82,14 +83,22 @@ def get_cable_form(a_type, b_type):
 
     class _CableForm(CableForm, metaclass=FormMetaclass):
 
-        def __init__(self, *args, **kwargs):
+        def __init__(self, *args, initial=None, **kwargs):
+
+            initial = initial or {}
+            if a_type:
+                ct = ContentType.objects.get_for_model(a_type)
+                initial['a_terminations_type'] = f'{ct.app_label}.{ct.model}'
+            if b_type:
+                ct = ContentType.objects.get_for_model(b_type)
+                initial['b_terminations_type'] = f'{ct.app_label}.{ct.model}'
 
             # TODO: Temporary hack to work around list handling limitations with utils.normalize_querydict()
             for field_name in ('a_terminations', 'b_terminations'):
-                if field_name in kwargs.get('initial', {}) and type(kwargs['initial'][field_name]) is not list:
-                    kwargs['initial'][field_name] = [kwargs['initial'][field_name]]
+                if field_name in initial and type(initial[field_name]) is not list:
+                    initial[field_name] = [initial[field_name]]
 
-            super().__init__(*args, **kwargs)
+            super().__init__(*args, initial=initial, **kwargs)
 
             if self.instance and self.instance.pk:
                 # Initialize A/B terminations when modifying an existing Cable instance

netbox/dcim/forms/model_forms.py

@@ -616,14 +616,36 @@ class ModuleForm(ModuleCommonForm, NetBoxModelForm):
             self.fields['adopt_components'].disabled = True
 
 
+def get_termination_type_choices():
+    return [
+        (None, '---------'),
+        *[
+            (f'{ct.app_label}.{ct.model}', ct.model_class()._meta.verbose_name.title())
+            for ct in ContentType.objects.filter(CABLE_TERMINATION_MODELS)
+        ]
+    ]
+
+
 class CableForm(TenancyForm, NetBoxModelForm):
+    a_terminations_type = forms.ChoiceField(
+        choices=get_termination_type_choices,
+        required=False,
+        widget=HTMXSelect(),
+        label=_('Type')
+    )
+    b_terminations_type = forms.ChoiceField(
+        choices=get_termination_type_choices,
+        required=False,
+        widget=HTMXSelect(),
+        label=_('Type')
+    )
     comments = CommentField()
 
     class Meta:
         model = Cable
         fields = [
-            'type', 'status', 'tenant_group', 'tenant', 'label', 'color', 'length', 'length_unit', 'description',
-            'comments', 'tags',
+            'a_terminations_type', 'b_terminations_type', 'type', 'status', 'tenant_group', 'tenant', 'label', 'color',
+            'length', 'length_unit', 'description', 'comments', 'tags',
         ]
         error_messages = {
             'length': {

netbox/templates/dcim/htmx/cable_edit.html

@@ -9,6 +9,7 @@
   <div class="row mb-2">
     <h5 class="offset-sm-3">{% trans "A Side" %}</h5>
   </div>
+  {% render_field form.a_terminations_type %}
   {% if 'termination_a_device' in form.fields %}
     {% render_field form.termination_a_device %}
   {% endif %}
@@ -20,19 +21,6 @@
   {% endif %}
   {% if 'a_terminations' in form.fields %}
     {% render_field form.a_terminations %}
-  {% else %}
-    <div class="row mb-3">
-      <label for="a_termination_type" class="col-sm-3 col-form-label text-lg-end">{% trans "Termination Type" %}</label>
-      <div class="col" hx-select="#a_termination_block" hx-target="#a_termination_block" hx-trigger="changed">
-        <select class="netbox-static-select" hx-get name="a_terminations_type">
-            <option selected>----</option>
-            <option value="dcim.interface">{% trans "Interface" %}</option>
-            <option value="dcim.frontport">{% trans "Front Port" %}</option>
-            <option value="dcim.rearport">{% trans "Rear Port" %}</option>
-            <option value="circuits.circuittermination">{% trans "Circuit Termination" %}</option>
-        </select>
-      </div>
-    </div>
   {% endif %}
 </div>
 
@@ -41,6 +29,7 @@
   <div class="row mb-2">
     <h5 class="offset-sm-3">{% trans "B Side" %}</h5>
   </div>
+  {% render_field form.b_terminations_type %}
   {% if 'termination_b_device' in form.fields %}
     {% render_field form.termination_b_device %}
   {% endif %}
@@ -52,19 +41,6 @@
   {% endif %}
   {% if 'b_terminations' in form.fields %}
     {% render_field form.b_terminations %}
-  {% else %}
-    <div class="row mb-3">
-      <label for="b_termination_type" class="col-sm-3 col-form-label text-lg-end">{% trans "Termination Type" %}</label>
-      <div class="col" hx-select="#b_termination_block" hx-target="#b_termination_block" hx-trigger="changed">
-        <select class="netbox-static-select" hx-get name="b_terminations_type">
-            <option selected>----</option>
-            <option value="dcim.interface">{% trans "Interface" %}</option>
-            <option value="dcim.frontport">{% trans "Front Port" %}</option>
-            <option value="dcim.rearport">{% trans "Rear Port" %}</option>
-            <option value="circuits.circuittermination">{% trans "Circuit Termination" %}</option>
-        </select>
-      </div>
-    </div>
   {% endif %}
 </div>