Tabify object add/edit views

netbox/templates/generic/object_edit.html

@@ -18,79 +18,92 @@
   {% endif %}
 {% endblock controls %}
 
-{% block content %}
-  <form action="" method="post" enctype="multipart/form-data">
-    {% csrf_token %}
-    {% for field in form.hidden_fields %}{{ field }}{% endfor %}
-
-    <div class="row">
-      <div class="col col-md-12 col-lg-10 offset-lg-1">
-        {% block tabs %}{% endblock %}
-        {% block form %}
-          {% if form.Meta.fieldsets %}
-
-            {# Render grouped fields according to Form #}
-            {% for group, fields in form.Meta.fieldsets %}
-              <div class="field-group">
-                <h5 class="text-center">{{ group }}</h5>
-                {% for name in fields %}
-                    {% render_field form|getfield:name %}
+{% block tabs %}
+  <ul class="nav nav-tabs px-3">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
+        {% if obj.pk %}Edit{% else %}Create{% endif %}
+      </button>
+    </li>
+  </ul>
+{% endblock tabs %}
+
+{% block content-wrapper %}
+  <div class="tab-content">
+    <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
+      <form action="" method="post" enctype="multipart/form-data">
+        {% csrf_token %}
+        {% for field in form.hidden_fields %}{{ field }}{% endfor %}
+
+        <div class="row">
+          <div class="col col-md-12 col-lg-10 offset-lg-1">
+            {% block form %}
+              {% if form.Meta.fieldsets %}
+
+                {# Render grouped fields according to Form #}
+                {% for group, fields in form.Meta.fieldsets %}
+                  <div class="field-group">
+                    <h5 class="text-center">{{ group }}</h5>
+                    {% for name in fields %}
+                        {% render_field form|getfield:name %}
+                    {% endfor %}
+                  </div>
                 {% endfor %}
-              </div>
-            {% endfor %}
-
-            {% if form.custom_fields %}
-              <div class="field-group">
-                <h5 class="text-center">Custom Fields</h5>
-                {% render_custom_fields form %}
-              </div>
-            {% endif %}
-
-            {% if form.comments %}
-              <div class="field-group">
-                {% render_field form.comments label='Comments' %}
-              </div>
-            {% endif %}
-
-          {% else %} 
-            {# Render all fields in a single group #}
-            <div class="field-group">
-              <h5 class="text-center">{{ obj_type|capfirst }}</h5>
-              {% block form_fields %}{% render_form form %}{% endblock %}
-            </div>
-          {% endif %}
-
-        {% endblock form %}
-      </div>
-    </div>
-
-    <div class="row my-3">
-      <div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
-        {% block buttons %}
-          <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
-
-          {% if obj.pk %}
-            <button type="submit" name="_update" class="btn btn-primary">
-              Save
-            </button>
 
-          {% else %}
-            <button type="submit" name="_addanother" class="btn btn-outline-primary">
-              Create & Add Another
-            </button>
-            <button type="submit" name="_create" class="btn btn-primary">
-              Create
-            </button>
-
-          {% endif %}
-
-        {% endblock buttons %}
-      </div>
+                {% if form.custom_fields %}
+                  <div class="field-group">
+                    <h5 class="text-center">Custom Fields</h5>
+                    {% render_custom_fields form %}
+                  </div>
+                {% endif %}
+
+                {% if form.comments %}
+                  <div class="field-group">
+                    {% render_field form.comments label='Comments' %}
+                  </div>
+                {% endif %}
+
+              {% else %}
+                {# Render all fields in a single group #}
+                <div class="field-group">
+                  <h5 class="text-center">{{ obj_type|capfirst }}</h5>
+                  {% block form_fields %}{% render_form form %}{% endblock %}
+                </div>
+              {% endif %}
+
+            {% endblock form %}
+          </div>
+        </div>
+
+        <div class="row my-3">
+          <div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
+            {% block buttons %}
+              <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
+
+              {% if obj.pk %}
+                <button type="submit" name="_update" class="btn btn-primary">
+                  Save
+                </button>
+
+              {% else %}
+                <button type="submit" name="_addanother" class="btn btn-outline-primary">
+                  Create & Add Another
+                </button>
+                <button type="submit" name="_create" class="btn btn-primary">
+                  Create
+                </button>
+
+              {% endif %}
+
+            {% endblock buttons %}
+          </div>
+        </div>
+      </form>
     </div>
-  </form>
+  </div>
 
-{% if obj and settings.DOCS_ROOT %} 
-  {% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
-{% endif %}
+  {% if obj and settings.DOCS_ROOT %}
+    {% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
+  {% endif %}
 
-{% endblock content %}
+{% endblock content-wrapper %}

netbox/templates/ipam/inc/ipadress_edit_header.html

@@ -1,31 +1,31 @@
 {% load helpers %}
 
-<ul class="nav nav-pills justify-content-center border-bottom-0 mb-1">
-    <li class="nav-item">
-        <a 
-            class="nav-link {% if active_tab == 'add' %}active{% endif %}"
-            href="{% url 'ipam:ipaddress_add' %}{% querystring request %}"
-        >
-            New IP
-        </a>
-    </li>
-    {% if 'interface' in request.GET or 'vminterface' in request.GET %}
-    <li class="nav-item">
-        <a
-            class="nav-link {% if active_tab == 'assign' %}active{% endif %}"
-            href="{% url 'ipam:ipaddress_assign' %}{% querystring request %}"
-        >
-            Assign IP
-        </a>
-    </li>
-    {% else %}
-    <li class="nav-item">
-        <a
-            class="nav-link {% if active_tab == 'bulk_add' %}active{% endif %}"
-            href="{% url 'ipam:ipaddress_bulk_add' %}{% querystring request %}"
-        >
-            Bulk Create
-        </a>
-    </li>
-    {% endif %}
+<ul class="nav nav-tabs px-3">
+  <li class="nav-item">
+      <a
+          class="nav-link {% if active_tab == 'add' %}active{% endif %}"
+          href="{% url 'ipam:ipaddress_add' %}{% querystring request %}"
+      >
+          {% if obj.pk %}Edit{% else %}Create{% endif %}
+      </a>
+  </li>
+  {% if 'interface' in request.GET or 'vminterface' in request.GET %}
+  <li class="nav-item">
+      <a
+          class="nav-link {% if active_tab == 'assign' %}active{% endif %}"
+          href="{% url 'ipam:ipaddress_assign' %}{% querystring request %}"
+      >
+          Assign IP
+      </a>
+  </li>
+  {% else %}
+  <li class="nav-item">
+      <a
+          class="nav-link {% if active_tab == 'bulk_add' %}active{% endif %}"
+          href="{% url 'ipam:ipaddress_bulk_add' %}{% querystring request %}"
+      >
+          Bulk Create
+      </a>
+  </li>
+  {% endif %}
 </ul>

netbox/templates/ipam/ipaddress_assign.html

@@ -5,6 +5,10 @@
 
 {% block title %}Assign an IP Address{% endblock title %}
 
+{% block tabs %}
+  {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='assign' %}
+{% endblock %}
+
 {% block content %}
     <form action="{% querystring request %}" method="post" class="form form-horizontal">
         {% csrf_token %}

netbox/templates/ipam/ipaddress_bulk_add.html

@@ -4,8 +4,11 @@
 
 {% block title %}Bulk Add IP Addresses{% endblock %}
 
+{% block tabs %}
+  {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='bulk_add' %}
+{% endblock %}
+
 {% block form %}
-{% include 'ipam/inc/ipadress_edit_header.html' with active_tab='bulk_add' %}
     <div class="field-group">
         <h5 class="text-center">IP Addresses</h5>
         {% render_field form.pattern %}

netbox/templates/ipam/ipaddress_edit.html

@@ -3,10 +3,11 @@
 {% load form_helpers %}
 {% load helpers %}
 
+{% block tabs %}
+  {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='add' %}
+{% endblock tabs %}
+
 {% block form %}
-{% if not obj.pk %}
-    {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='add' %}
-{% endif %}
     <div class="field-group">
         <h4 class="mb-3">IP Address</h4>
         {% render_field form.address %}