triv: added modal view for action and selection action, inlines adding to top of the stack, added several blocks

Author: oko-x

src/django_smartbase_admin/engine/modal_view.py

@@ -0,0 +1,61 @@
+from django.http import HttpResponse
+from django.views.generic import FormView
+from django_htmx.http import trigger_client_event
+from django_smartbase_admin.actions.admin_action_list import SBAdminListAction
+
+
+class ActionModalView(FormView):
+    template_name = "sb_admin/partials/modal/modal_content.html"
+    form_class = None
+    modal_title = ""
+
+    def process_form_valid(self, request, form):
+        response = HttpResponse()
+        trigger_client_event(response, "hideModal", {})
+        trigger_client_event(
+            response,
+            "SBAdminReloadTableData",
+            {},
+        )
+        return response
+
+    def post(self, request, *args, **kwargs):
+        form = self.get_form()
+        if form.is_valid():
+            return self.process_form_valid(request, form)
+        else:
+            return self.form_invalid(form)
+
+    def get_modal_title(self):
+        return self.modal_title
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["modal_title"] = self.get_modal_title()
+        return context
+
+
+class ListActionModalView(ActionModalView):
+    view = None
+
+    def __init__(self, view=None, *args, **kwargs):
+        self.view = view
+        super().__init__(*args, **kwargs)
+
+    def process_form_valid(self, request, form):
+        response = super().process_form_valid(request, form)
+        self.process_form_valid_list_selection_queryset(
+            request, form, self.get_selection_queryset(request, form)
+        )
+        return response
+
+    def get_selection_queryset(self, request, form):
+        list_action = SBAdminListAction(self.view, request)
+        return list_action.get_data_queryset().filter(
+            list_action.get_selection_queryset()
+        )
+
+    def process_form_valid_list_selection_queryset(
+        self, request, form, selection_queryset
+    ):
+        pass

src/django_smartbase_admin/static/sb_admin/src/js/main.js

@@ -40,6 +40,9 @@ class Main {
         document.addEventListener('formset:added', (e) => {
             this.initDropdowns(e.target)
             this.initFileInputs(e.target)
+            if (e.target !== e.target.parentNode.firstChild) {
+                e.target.parentNode.insertBefore(e.target, e.target.parentNode.firstChild)
+            }
         })
         document.addEventListener('openUrl', (e) => {
             window.open(e.detail.url, e.detail?.target || '_blank')

src/django_smartbase_admin/templates/sb_admin/actions/change_form.html

@@ -7,6 +7,8 @@
     {{ media }}
 {% endblock %}
 
+{% block view_class %}change-form{% endblock %}
+
 {% block js %}
     {{ block.super }}
     <script type="text/javascript"

src/django_smartbase_admin/templates/sb_admin/actions/list.html

@@ -1,6 +1,8 @@
 {% extends list_base_template|default:"sb_admin/sb_admin_base.html" %}
 {% load sb_admin_tags i18n static %}
 
+{% block view_class %}change-list{% endblock %}
+
 {% block content %}
     {% block form_modal %}
         {% include 'sb_admin/partials/modal/modal.html' %}
@@ -113,7 +115,7 @@ <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1
                                 class="btn btn-empty btn-small">{% trans 'Select none' %}
                         </button>
                         {% for list_selection_action in content_context.list_selection_actions %}
-                            <button {% if list_action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' with action=list_action %} hx-vals="js:{params: window.SBAdminTable['{{ view_id }}'].getAllUrlParams()}" {% else %}onclick="window.location.href='{{ list_selection_action.url }}' + window.SBAdminTable['{{ view_id }}'].getUrlParamsString()"{% endif %}
+                            <button {% if list_selection_action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' with action=list_selection_action %} hx-vals="js:{params: window.SBAdminTable['{{ view_id }}'].getAllUrlParams()}" {% else %}onclick="window.location.href='{{ list_selection_action.url }}' + window.SBAdminTable['{{ view_id }}'].getUrlParamsString()"{% endif %}
                                     class="btn btn-small {{ list_selection_action.css_class|default_if_none:'' }}">{{ list_selection_action.title }}
                             </button>
                         {% endfor %}

src/django_smartbase_admin/templates/sb_admin/includes/table_inline_delete_button.html

@@ -0,0 +1,25 @@
+{% load widget_tweaks %}
+{% if inline_admin_formset.formset.can_delete %}
+    {% if inline_admin_form.original %}
+        <td class="w-40">
+            <div class="relative min-h-40 flex items-center delete djn-delete-handler {{ inline_admin_formset.handler_classes|join:" " }}">
+                {% render_field inline_admin_form.deletion_field.field class="checkbox checkbox-delete" %}
+                <label for="{{ inline_admin_form.deletion_field.field.auto_id }}">
+                    <svg class="w-20 h-20">
+                        <use xlink:href="#Delete"></use>
+                    </svg>
+                </label>
+            </div>
+        </td>
+    {% else %}
+        <td class="delete w-40">
+            <a
+                    class="flex-center h-40 inline-deletelink djn-remove-handler {{ inline_admin_formset.handler_classes|join:" " }}"
+                    href="javascript:void(0)">
+                <svg class="w-20 h-20 text-dark-300 hover:text-dark-400">
+                    <use xlink:href="#Delete"></use>
+                </svg>
+            </a>
+        </td>
+    {% endif %}
+{% endif %}

src/django_smartbase_admin/templates/sb_admin/inlines/table_inline.html

@@ -136,6 +136,9 @@
                                             {% endspaceless %}
                                         </td>
 
+                                        {% block table_inline_after_sortable %}
+                                        {% endblock %}
+
                                         {% for fieldset in inline_admin_form %}
                                             {% for line in fieldset %}
                                                 {% for field in line %}
@@ -154,25 +157,9 @@
                                                 {% endfor %}
                                             {% endfor %}
                                         {% endfor %}
-                                        {% if inline_admin_formset.formset.can_delete %}
-                                            {% if inline_admin_form.original %}
-                                                <td>
-                                                    <div class="relative min-h-40 flex items-center delete djn-delete-handler {{ inline_admin_formset.handler_classes|join:" " }}">
-                                                        {% render_field inline_admin_form.deletion_field.field class="checkbox checkbox-delete" %}
-                                                        <label for="{{ inline_admin_form.deletion_field.field.auto_id }}">
-                                                            <svg class="w-20 h-20"><use xlink:href="#Delete"></use></svg>
-                                                        </label>
-                                                    </div>
-                                                </td>
-                                            {% else %}
-                                                <td class="delete">
-                                                    <a
-                                                    class="flex-center h-40 inline-deletelink djn-remove-handler {{ inline_admin_formset.handler_classes|join:" " }}"
-                                                    href="javascript:void(0)"><svg class="w-20 h-20 text-dark-300 hover:text-dark-400"><use xlink:href="#Delete"></use></svg></a>
-                                                </td>
-                                            {% endif %}
-                                        {% endif %}
-
+                                        {% block table_inline_delete_button %}
+                                            {% include "sb_admin/includes/table_inline_delete_button.html" %}
+                                        {% endblock %}
                                     </tr>
 
                                     {% if inline_admin_form.form.inlines %}

src/django_smartbase_admin/templates/sb_admin/partials/modal/modal_content.html

@@ -0,0 +1,36 @@
+{% load i18n %}
+
+{% block content %}
+    <div class="modal-dialog">
+        <div class="modal-content">
+            {% include 'sb_admin/includes/loading_absolute.html' with additional_class="sb-admin-modal-loading" %}
+            {% block modal_content %}
+                <div class="modal-header">
+                    {% block modal_header %}
+                        <h3 class="text-dark-900 text-18 font-semibold leading-28">{% block modal_title %}{{ modal_title }}{% endblock %}</h3>
+                        <svg data-bs-dismiss="modal" aria-label="Close"
+                             class="w-24 h-24 absolute top-16 right-16 cursor-pointer transition-transform hover:rotate-90">
+                            <use xlink:href="#Close-small"></use>
+                        </svg>
+                    {% endblock %}
+                </div>
+                <div class="modal-body">
+                    {% block modal_body %}
+                        {{ form.non_field_errors }}
+                        <form id="sb-admin-modal-form" hx-indicator=".sb-admin-modal-loading" hx-target="#sb-admin-modal" hx-post="{{ request.get_full_path }}" action="{{ request.get_full_path }}" method="post">
+                            {% block modal_form_body %}
+                                {{ form.as_p }}
+                            {% endblock %}
+                        </form>
+                    {% endblock %}
+                </div>
+                <div class="modal-footer">
+                    {% block modal_footer %}
+                        <button form="sb-admin-modal-form" type="button" class="btn btn-destructive mr-10" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+                        <button form="sb-admin-modal-form" type="submit" class="btn btn-primary">{% trans 'Continue' %}</button>
+                    {% endblock %}
+                </div>
+            {% endblock %}
+        </div>
+    </div>
+{% endblock %}

src/django_smartbase_admin/templates/sb_admin/sb_admin_base.html

@@ -3,7 +3,7 @@
 {% block main_wrapper %}
     <div class="w-full h-full min-h-full xl:pl-260">
         {% include 'sb_admin/navigation.html' %}
-        <div class="min-h-screen sm:p-24 relative flex flex-col">
+        <div class="min-h-screen sm:p-24 relative flex flex-col {% block view_class %}{% endblock %}">
             {% include "sb_admin/includes/loading.html" %}
             {% include "sb_admin/includes/notifications.html" %}
 
@@ -12,4 +12,4 @@
             {{ inner_content }}
         </div>
     </div>
-{% endblock %}
+{% endblock %}

src/django_smartbase_admin/templates/sb_admin/widgets/autocomplete.html

@@ -7,12 +7,14 @@
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                     data-bs-offset="[0, 8]"
-                    class="btn px-10 font-normal w-full"
+                    class="autocomplete-button btn px-10 font-normal w-full"
             >
-                <span id="{{ widget.attrs.id }}-value">{{ widget.form_field.empty_label }}</span>
-                <svg class="ml-8">
-                    <use xlink:href="#Down"></use>
-                </svg>
+                {% block autocomplete_button_text %}
+                    <span id="{{ widget.attrs.id }}-value">{{ widget.form_field.empty_label }}</span>
+                    <svg class="ml-8">
+                        <use xlink:href="#Down"></use>
+                    </svg>
+                {% endblock %}
             </button>
             <div class="dropdown-menu max-h-none w-248">
                 <div class="px-12 pt-8">
@@ -33,7 +35,7 @@
                     </div>
                 {% endif %}
                 {% if widget.form_field.required %}
-                        <div class="pb-8"></div>
+                    <div class="pb-8"></div>
                 {% else %}
                     <div class="relative px-12 py-8 flex">
                         <button type="button"