feat: inline tabs

README.md

@@ -31,6 +31,7 @@ Did you decide to start using Unfold but you don't have time to make the switch
 - **Array widget:** built-in widget for `django.contrib.postgres.fields.ArrayField`
 - **Filters:** custom dropdown, numeric, datetime, and text fields
 - **Dashboard:** custom components for rapid dashboard development
+- **Inline tabs:** group inlines to tab navigation in changeform
 - **Model tabs:** define custom tab navigations for models
 - **Fieldset tabs:** merge several fielsets into tabs in change form
 - **Colors:** possibility to override default color scheme
@@ -883,6 +884,19 @@ class MyModelAdmin(ModelAdmin):
     )
 ```
 
+Inlines can be grouped into tab navigation by specifying `tab` attribute in the inline class.
+
+```python
+# admin.py
+
+from unfold.admin import TabularInline
+
+
+class MyInline(TabularInline):
+    model = User
+    tab = True
+```
+
 ## Third party packages
 
 ### django-celery-beat

src/unfold/templates/admin/base.html

@@ -41,9 +41,9 @@
             <div class="px-4 pb-12 lg:px-12">
                 <div id="content" class="container mx-auto {% block coltype %}colM{% endblock %}">
                     {% if cl %}
-                        {% tab_list cl.opts %}
+                        {% tab_list "changelist" cl.opts %}
                     {% elif opts %}
-                        {% tab_list opts %}
+                        {% tab_list "changeform" opts %}
                     {% endif %}
 
                     {% block content %}

src/unfold/templates/admin/edit_inline/stacked.html

@@ -1,8 +1,8 @@
 {% load admin_urls i18n unfold %}
 
-<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group" data-inline-type="stacked" data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
+<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group" data-inline-type="stacked" data-inline-formset="{{ inline_admin_formset.inline_formset_data }}" {% if inline_admin_formset.opts.tab %}x-show="activeTab == '{{ inline_admin_formset.opts.verbose_name|slugify }}'"{% else %}x-show="activeTab == 'general'"{% endif %}>
     <fieldset class="module {{ inline_admin_formset.classes }}">
-        <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200">
+        <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200 {% if inline_admin_formset.opts.tab %}hidden{% endif %}">
             {% if inline_admin_formset.formset.max_num == 1 %}
                 {{ inline_admin_formset.opts.verbose_name|capfirst }}
             {% else %}

src/unfold/templates/admin/edit_inline/tabular.html

@@ -1,11 +1,11 @@
 {% load admin_modify admin_urls i18n static unfold %}
 
-<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group" data-inline-type="tabular" data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
+<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group" data-inline-type="tabular" data-inline-formset="{{ inline_admin_formset.inline_formset_data }}" {% if inline_admin_formset.opts.tab %}x-show="activeTab == '{{ inline_admin_formset.opts.verbose_name|slugify }}'"{% else %}x-show="activeTab == 'general'"{% endif %}>
     <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
         {{ inline_admin_formset.formset.management_form }}
 
         <fieldset class="module {{ inline_admin_formset.classes }} min-w-0">
-            <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200">
+            <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200 {% if inline_admin_formset.opts.tab %}hidden{% endif %}">
                 {% if inline_admin_formset.formset.max_num == 1 %}
                     {{ inline_admin_formset.opts.verbose_name|capfirst }}
                 {% else %}

src/unfold/templates/admin/includes/fieldset.html

@@ -1,6 +1,6 @@
 {% load unfold %}
 
-<fieldset class="module{% if fieldset.classes %} {{ fieldset.classes }}{% endif %}">
+<fieldset class="module{% if fieldset.classes %} {{ fieldset.classes }}{% endif %}" {% if stacked != 1 %}x-show="activeTab == 'general'"{% endif %}>
     {% if fieldset.name and "tab" not in fieldset.classes %}
         <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-700 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200">
             {{ fieldset.name }}

src/unfold/templates/unfold/helpers/tab_list.html

@@ -1,9 +1,11 @@
+{% load i18n %}
+
 {% if not is_popup %}
-    {% if tab_list or actions_list or actions_detail or actions_items or nav_global %}
+    {% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
         <div class="flex items-start flex-col mb-4 text-gray-500 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end dark:text-gray-400">
-            {% if tab_list %}
+            {% if inlines_list or tabs_list %}
                 <ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
-                    {% for item in tab_list %}
+                    {% for item in tabs_list %}
                         {% if item.has_permission %}
                             <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                                 <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}" class="block px-3 py-2 {% if item.active %} border-b md:border-primary-500 dark:md:border-primary-600 font-medium -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500{% else %} hover:text-gray-700 dark:hover:text-gray-200{% endif %} md:py-4 md:px-0 dark:border-gray-800">
@@ -12,6 +14,26 @@
                             </li>
                         {% endif %}
                     {% endfor %}
+
+                    {% if inlines_list %}
+                        <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
+                            <a class="block cursor-pointer px-3 py-2 hover:text-gray-700 dark:hover:text-gray-200  md:py-4 md:px-0 dark:border-gray-800" x-on:click="activeTab = 'general'" x-bind:class="{'border-b md:border-primary-500 dark:md:border-primary-600 font-medium -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500': activeTab == 'general'}">
+                                {% trans "General" %}
+                            </a>
+                        </li>
+
+                        {% for inline in inlines_list %}
+                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
+                                <a class="block cursor-pointer px-3 py-2 hover:text-gray-700 dark:hover:text-gray-200  md:py-4 md:px-0 dark:border-gray-800"  x-on:click="activeTab = '{{ inline.opts.verbose_name|slugify }}'" x-bind:class="{'border-b md:border-primary-500 dark:md:border-primary-600 font-medium -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}'}">
+                                    {% if inline.formset.max_num == 1 %}
+                                        {{ inline.opts.verbose_name|capfirst }}
+                                    {% else %}
+                                        {{ inline.opts.verbose_name_plural|capfirst }}
+                                    {% endif %}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    {% endif %}
                 </ul>
             {% endif %}
 

src/unfold/templates/unfold/layouts/skeleton.html

@@ -64,7 +64,7 @@
     {% endif %}
 </head>
 
-<body class="antialiased bg-white font-sans text-gray-500 dark:bg-gray-900 dark:text-gray-400 {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }">
+<body class="antialiased bg-white font-sans text-gray-500 dark:bg-gray-900 dark:text-gray-400 {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }">
     {% block base %}{% endblock %}
 
     <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>

src/unfold/templatetags/unfold.py

@@ -12,25 +12,37 @@
 
 
 @register.simple_tag(name="tab_list", takes_context=True)
-def tab_list(context, opts) -> str:
-    tabs = None
+def tab_list(context, page, opts) -> str:
+    tabs_list = []
+    inlines_list = []
+
+    data = {
+        "nav_global": context.get("nav_global"),
+        "actions_detail": context.get("actions_detail"),
+        "actions_list": context.get("actions_list"),
+        "actions_items": context.get("actions_items"),
+        "is_popup": context.get("is_popup"),
+    }
 
     for tab in context.get("tab_list", []):
         if str(opts) in tab["models"]:
-            tabs = tab["items"]
+            tabs_list = tab["items"]
             break
 
+    if page == "changelist":
+        data["tabs_list"] = tabs_list
+
+    for inline in context.get("inline_admin_formsets", []):
+        if hasattr(inline.opts, "tab"):
+            inlines_list.append(inline)
+
+    if page == "changeform" and len(inlines_list) > 0:
+        data["inlines_list"] = inlines_list
+
     return render_to_string(
         "unfold/helpers/tab_list.html",
-        request=context.request,
-        context={
-            "tab_list": tabs,
-            "nav_global": context.get("nav_global"),
-            "actions_detail": context.get("actions_detail"),
-            "actions_list": context.get("actions_list"),
-            "actions_items": context.get("actions_items"),
-            "is_popup": context.get("is_popup"),
-        },
+        request=context["request"],
+        context=data,
     )