django-smartbase-admin 0.2.54__py3-none-any.whl → 1.0.38__py3-none-any.whl

django_smartbase_admin/templates/sb_admin/components/columns.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="inline-flex relative js-select-all-wrapper">
+<div id="table-columns-dropdown-wrapper" class="inline-flex relative js-select-all-wrapper">
     <button
             data-bs-toggle="dropdown"
             aria-expanded="false"

django_smartbase_admin/templates/sb_admin/components/filters_v2.html

@@ -19,92 +19,106 @@
     <div class="query-builder-wrapper p-24 flex md:flex-wrap gap-8 max-sm:overflow-x-auto">
         <div id="{{ view_id }}-advanced-filter" class="query-builder-advanced"></div>
         <script>
-            window.addEventListener("SBinitOrUpdateQueryBuilder", (event) => {
-                const SBTable = event.detail.SBTable.table;
-                const filterData = event.detail.filterData;
-                const queryBuilderEl$ = $("#{{ view_id }}-advanced-filter");
-                if (!queryBuilderEl$[0].queryBuilder) {
-                    queryBuilderEl$.on("afterCreateRuleInput.queryBuilder", function(event, rule) {
-                        setTimeout(() => {
-                            //next tick
-                            SBTable.moduleInstances.advancedFilterModule.initFilters(event, rule)
-                        }, 0)
-                    })
-                    queryBuilderEl$.on("afterUpdateRuleOperator.queryBuilder", function(event, rule, previousOperator) {
-                        setTimeout(() => {
-                            SBTable.moduleInstances.advancedFilterModule.afterUpdateRuleOperator(event, rule, previousOperator)
-                        }, 0)
-                    })
-                    let customOptions = document.getElementById('query-builder-custom-options')
-                    if(customOptions) {
-                        customOptions = JSON.parse(customOptions.textContent)
+            (function(){
+                // used to prevent calling initFilters on page load
+                // because afterUpdateRuleOperator is also called at that time
+                // and filters would be initiated twice, causing date field to have no value
+                let init = true;
+
+                window.addEventListener("SBinitOrUpdateQueryBuilder", (event) => {
+                    const SBTable = event.detail.SBTable.table;
+                    const filterData = event.detail.filterData;
+                    const queryBuilderEl$ = $("#{{ view_id }}-advanced-filter");
+                    init = true;
+                    if (!queryBuilderEl$[0].queryBuilder) {
+                        queryBuilderEl$.on("afterCreateRuleInput.queryBuilder", function(event, rule) {
+                            setTimeout(() => {
+                                //next tick
+                                SBTable.moduleInstances.advancedFilterModule.initFilters(event, rule);
+                            }, 0);
+                        })
+                        queryBuilderEl$.on("afterSetRules.queryBuilder", function(event, rule) {
+                            init = false;
+                        });
+                        queryBuilderEl$.on("afterUpdateRuleOperator.queryBuilder", function(event, rule, previousOperator) {
+                            if(init) {
+                                return;
+                            };
+                            setTimeout(() => {
+                                SBTable.moduleInstances.advancedFilterModule.afterUpdateRuleOperator(event, rule, previousOperator);
+                            }, 0);
+                        });
+                        let customOptions = document.getElementById('query-builder-custom-options');
+                        if(customOptions) {
+                            customOptions = JSON.parse(customOptions.textContent);
+                        };
+                        queryBuilderEl$.queryBuilder({
+                            operators: {{ content_context.advanced_filters_data.all_operators|safe }},
+                            templates: {
+                                group: function({ group_id, level, conditions, icons, settings, translate, builder }) {
+                                    return `
+                                <div id="${group_id}" class="rules-group-container">
+                                  <div class="rules-group-header">
+                                    <div class="btn-group group-conditions">
+                                      ${conditions.map(condition => `
+                                        <label class="btn btn-sm btn-primary">
+                                          <input type="radio" name="${group_id}_cond" value="${condition}"> ${translate("conditions", condition)}
+                                        </label>
+                                      `).join("\n")}
+                                    </div>
+                                    ${settings.display_errors ? `
+                                      <div class="error-container"><i class="${icons.error}"></i></div>
+                                    ` : ""}
+                                  </div>
+                                  <div class=rules-group-body>
+                                    <div class=rules-list></div>
+                                  </div>
+                                    <div class="btn-group float-end group-actions">
+                                      <button type="button" class="btn btn-sm btn-success" data-add="rule">
+                                        <i class="${icons.add_rule}"></i> ${translate("add_rule")}
+                                      </button>
+                                      ${settings.allow_groups === -1 || settings.allow_groups >= level ? `
+                                        <button type="button" class="btn btn-sm" data-add="group">
+                                          <i class="${icons.add_group}"></i> ${translate("add_group")}
+                                        </button>
+                                      ` : ""}
+                                      ${level > 1 ? `
+                                        <button type="button" class="btn btn-sm btn-danger" data-delete="group">
+                                          <i class="${icons.remove_group}"></i> ${translate("delete_group")}
+                                        </button>
+                                      ` : ""}
+                                      <button type="button" class="btn btn-sm btn-primary" data-execute>
+                                        ${translate("view_results")}
+                                      </button>
+                                    </div>
+                                </div>`
+                                }
+                            },
+                            allow_groups: false,
+                            allow_empty: true,
+                            filters: [
+                                {% for filter in content_context.advanced_filters_data.filters %}
+                                    {
+                                        id: '{{ filter.id }}',
+                                        field: '{{ filter.field }}',
+                                        type: '{{ filter.type }}',
+                                        label: '{{ filter.label }}',
+                                        operators: {{ filter.operators|safe }},
+                                        input: function(rule, name) {
+                                            return `{{ filter.input|safe }}`.replaceAll(
+                                                '{{ content_context.advanced_filters_data.prefix_to_replace }}',
+                                                name
+                                            )
+                                        }
+                                    },
+                                {% endfor %}
+                            ],
+                            ...customOptions
+                        })
                     }
-                    queryBuilderEl$.queryBuilder({
-                        operators: {{ content_context.advanced_filters_data.all_operators|safe }},
-                        templates: {
-                            group: function({ group_id, level, conditions, icons, settings, translate, builder }) {
-                                return `
-                            <div id="${group_id}" class="rules-group-container">
-                              <div class="rules-group-header">
-                                <div class="btn-group group-conditions">
-                                  ${conditions.map(condition => `
-                                    <label class="btn btn-sm btn-primary">
-                                      <input type="radio" name="${group_id}_cond" value="${condition}"> ${translate("conditions", condition)}
-                                    </label>
-                                  `).join("\n")}
-                                </div>
-                                ${settings.display_errors ? `
-                                  <div class="error-container"><i class="${icons.error}"></i></div>
-                                ` : ""}
-                              </div>
-                              <div class=rules-group-body>
-                                <div class=rules-list></div>
-                              </div>
-                                <div class="btn-group float-end group-actions">
-                                  <button type="button" class="btn btn-sm btn-success" data-add="rule">
-                                    <i class="${icons.add_rule}"></i> ${translate("add_rule")}
-                                  </button>
-                                  ${settings.allow_groups === -1 || settings.allow_groups >= level ? `
-                                    <button type="button" class="btn btn-sm" data-add="group">
-                                      <i class="${icons.add_group}"></i> ${translate("add_group")}
-                                    </button>
-                                  ` : ""}
-                                  ${level > 1 ? `
-                                    <button type="button" class="btn btn-sm btn-danger" data-delete="group">
-                                      <i class="${icons.remove_group}"></i> ${translate("delete_group")}
-                                    </button>
-                                  ` : ""}
-                                  <button type="button" class="btn btn-sm btn-primary" data-execute>
-                                    ${translate("view_results")}
-                                  </button>
-                                </div>
-                            </div>`
-                            }
-                        },
-                        allow_groups: false,
-                        allow_empty: true,
-                        filters: [
-                            {% for filter in content_context.advanced_filters_data.filters %}
-                                {
-                                    id: '{{ filter.id }}',
-                                    field: '{{ filter.field }}',
-                                    type: '{{ filter.type }}',
-                                    label: '{{ filter.label }}',
-                                    operators: {{ filter.operators|safe }},
-                                    input: function(rule, name) {
-                                        return `{{ filter.input|safe }}`.replaceAll(
-                                            '{{ content_context.advanced_filters_data.prefix_to_replace }}',
-                                            name
-                                        )
-                                    }
-                                },
-                            {% endfor %}
-                        ],
-                        ...customOptions
-                    })
-                }
-                queryBuilderEl$.queryBuilder("setRules", filterData)
-            })
+                    queryBuilderEl$.queryBuilder("setRules", filterData);
+                });
+            }());
         </script>
     </div>
 {% endblock %}

django_smartbase_admin/templates/sb_admin/dashboard/calendar_widget.html

@@ -0,0 +1,69 @@
+{% extends "sb_admin/dashboard/widget_base.html" %}
+{% load sb_admin_tags static i18n %}
+
+{% block filters %}{% endblock %}
+
+{% block content_inner %}
+    <div id="{{ widget_id }}" class="card p-16 pb-0 col-span-12">
+        <div class="p-8 flex items-center justify-between">
+            <div class="flex flex-col">
+                <div class="text-18 text-dark-900 font-semibold">
+                    {% trans 'Calendar' %}
+                </div>
+                <div class="text-14">
+                    <span id="{{ widget_id }}-date-from"></span>
+                    -
+                    <span id="{{ widget_id }}-date-to"></span>
+                </div>
+            </div>
+
+            <div class="flex gap-16 items-center">
+                {% include 'sb_admin/components/filters.html' with filters=settings all_filters_visible=True %}
+                <div class="btn-group">
+                    <button class="btn p-0 w-40" onclick="window.SBAdminCalendar['{{ widget_id }}'].calendar.prev();">
+                        <svg><use href="#Left-small"></use></svg>
+                    </button>
+                    <div class="btn pointer-events-none" id="{{ widget_id }}-selected-month" style="width: 150px;"></div>
+                    <button class="btn p-0 w-40" onclick="window.SBAdminCalendar['{{ widget_id }}'].calendar.next();">
+                        <svg><use href="#Right-small"></use></svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="mt-16 -mx-16">
+            <script type="text/javascript" src="{% static 'sb_admin/js/fullcalendar.min.js' %}"></script>
+            <link rel="stylesheet" href="{% static 'sb_admin/dist/calendar_style.css' %}">
+            <script type="text/javascript" src="{% static 'sb_admin/dist/calendar.js' %}"></script>
+
+            <script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    const selectedMonth = document.getElementById('{{ widget_id }}-selected-month');
+                    const dateFrom = document.getElementById('{{ widget_id }}-date-from');
+                    const dateTo = document.getElementById('{{ widget_id }}-date-to');
+
+                    window.SBAdminCalendar = window.SBAdminCalendar || {};
+                    window.SBAdminCalendar["{{ widget_id }}"] = new window.SBAdminCalendarClass({
+                        "widgetId": "{{ widget_id }}",
+                        "calendarOptions": {
+                            initialView: 'dayGridMonth',
+                            events: {
+                                url: "{{ ajax_url }}",
+                            },
+                            dayMaxEvents: 3,
+                            height: 'auto',
+                            locale: '{{request.LANGUAGE_CODE}}',
+                            headerToolbar: false,
+                            fixedWeekCount: false,
+                            datesSet: function(info) {
+                                selectedMonth.innerText = info.view.title;
+                                dateFrom.innerText = info.view.currentStart.toLocaleDateString('{{request.LANGUAGE_CODE}}', {day: 'numeric', month: 'long', year: 'numeric'});
+                                dateTo.innerText = new Date(info.view.currentStart.getFullYear(), info.view.currentStart.getMonth() + 1, 0).toLocaleDateString('{{request.LANGUAGE_CODE}}', {day: 'numeric', month: 'long', year: 'numeric'});
+                            }
+                        }
+                    });
+                });
+            </script>
+            <div id="{{ widget_id }}-calendar"></div>
+        </div>
+    </div>
+{% endblock %}

django_smartbase_admin/templates/sb_admin/dashboard/chart_widget.html

@@ -2,7 +2,7 @@
 {% load sb_admin_tags static %}
 
 {% block content_inner %}
-    <div class="card sm:mb-24 p-16">
+    <div id="{{ widget_id }}" class="card p-16 col-span-12">
         <div class="mt-16">
             <script type="text/javascript" src="{% static 'sb_admin/dist/chart.js' %}"></script>
             <div class="flex flex-wrap -m-8 mb-16">
@@ -17,9 +17,28 @@
             <script>
                 window.SBAdminChart = window.SBAdminChart || {};
                 window.SBAdminChart["{{ widget_id }}"] = new window.SBAdminChartClass({
+                    "formId": "{{ widget_id }}-filter-form",
                     "widgetId": "{{ widget_id }}",
                     "ajaxUrl": "{{ ajax_url }}",
-                    "chartType": "{{ chart_type }}"
+                    "chartType": "{{ chart_type }}",
+                    "chartOptions": {
+                        scales: {
+                            x: {
+                                ticks: {
+                                    font: {
+                                        weight: 600,
+                                    }
+                                }
+                            },
+                            y: {
+                                ticks: {
+                                    font: {
+                                        weight: 600,
+                                    }
+                                }
+                            }
+                        }
+                    }
                 });
             </script>
         </div>

django_smartbase_admin/templates/sb_admin/dashboard/list_widget.html

@@ -2,3 +2,9 @@
 
 {% block page_header %}{% endblock %}
 {% block tabulator_custom_header_controls %}{% endblock %}
+
+{% block content %}
+	<div id="{{ widget_id }}" class="col-span-12">
+        {{ block.super }}
+    </div>
+{% endblock %}

django_smartbase_admin/templates/sb_admin/dashboard/widget_base.html

@@ -3,7 +3,7 @@
     </form>
     
     {% block filters %}
-        <div class="flex max-sm:flex-wrap max-xs:py-16 sm:mb-24 gap-y-8 justify-between">
+        <div class="dashboard-filter flex max-sm:flex-wrap max-xs:pt-16 gap-y-8 justify-between col-span-12">
             <div class="min-w-0 sm:-mx-16 -my-12">
                 {% include 'sb_admin/components/filters.html' with filters=settings all_filters_visible=True default_button=True %}
             </div>

django_smartbase_admin/templates/sb_admin/filter_widgets/advanced_filters/date_field.html

@@ -1,8 +1,18 @@
-<input
-    type="text"
-    autocomplete="off"
-    class="input pl-10 js-datepicker-not-inline"
-    id="{{ filter_widget.input_id }}"
-    name="{{ filter_widget.input_name }}"
-    data-sbadmin-datepicker="{{ filter_widget.get_data }}"
->
+<div class="relative">
+    <input
+        type="hidden"
+        autocomplete="off"
+        id="{{ filter_widget.input_id }}"
+        name="{{ filter_widget.input_name }}"
+    >
+    <input
+        type="text"
+        autocomplete="off"
+        class="input pl-10 js-datepicker-dynamic"
+        id="{{ filter_widget.input_id }}_picker"
+        name="{{ filter_widget.input_name }}_picker"
+        data-sbadmin-datepicker-real-input-id="{{ filter_widget.input_id }}"
+        data-sbadmin-datepicker="{{ filter_widget.get_data }}"
+        data-sbadmin-datepicker-shortcuts-dict="{{ filter_widget.get_shortcuts_dict_data }}"
+    >
+</div>

django_smartbase_admin/templates/sb_admin/filter_widgets/advanced_filters/multiple_choice_field.html

@@ -7,7 +7,7 @@
             data-bs-auto-close="outside"
             class="btn !rounded px-10 font-normal w-full"
         >
-            <span id="{{ filter_widget.input_id }}-value" class="js-value"></span>
+            <span id="{{ filter_widget.input_id }}-value"></span>
             <svg class="ml-8">
                 <use xlink:href="#Down"></use>
             </svg>

django_smartbase_admin/templates/sb_admin/filter_widgets/advanced_filters/tree_select_filter.html

@@ -0,0 +1,2 @@
+{% include 'sb_admin/filter_widgets/tree_select_filter.html' %}
+

django_smartbase_admin/templates/sb_admin/filter_widgets/date_field.html

@@ -1,8 +1,22 @@
-<div class="dropdown-menu dropdown-menu-datepicker" style="max-width: none; width: auto; height: auto; max-height: none;">
+<div class="dropdown-menu dropdown-menu-datepicker"
+     style="max-width: none; width: auto; height: auto; max-height: none;">
     <div class="px-12 py-8">
-        <input form="{{ filter_widget.view_id }}-filter-form" type="text" class="input pl-10 js-datepicker-range"
-           id="{{ filter_widget.input_id }}" name="{{ filter_widget.input_name }}" data-sbadmin-datepicker="{{ filter_widget.get_data }}"
-           {% if not all_filters_visible %}disabled{% endif %}{% if filter_widget.get_default_value %} value="{{ filter_widget.get_default_value }}"{% endif %}>
+        <input
+            type="hidden"
+            autocomplete="off"
+            id="{{ filter_widget.input_id }}"
+            name="{{ filter_widget.input_name }}"
+            form="{{ filter_widget.view_id }}-filter-form"
+            {% if filter_widget.get_default_value %}value="{{ filter_widget.get_default_value }}" data-label="{{ filter_widget.get_default_label }}"{% endif %}
+            {% if not all_filters_visible %}disabled{% endif %}
+        >
+        <input type="text"
+               class="input pl-10 js-datepicker-range"
+               id="{{ filter_widget.input_id }}_picker"
+               name="{{ filter_widget.input_name }}_picker"
+               data-sbadmin-datepicker-real-input-id="{{ filter_widget.input_id }}"
+               data-sbadmin-datepicker="{{ filter_widget.get_data }}"
+               data-sbadmin-datepicker-shortcuts="{{ filter_widget.get_shortcuts_data }}">
     </div>
     {% include "sb_admin/filter_widgets/partials/clear.html" %}
 </div>

django_smartbase_admin/templates/sb_admin/filter_widgets/multiple_choice_field.html

@@ -6,6 +6,20 @@
                    {% if not all_filters_visible %}disabled{% endif %}{% if filter_widget.get_default_value %}
                    value="{{ filter_widget.get_default_value }}"{% endif %}>
     <ul class="relative py-8">
+        {% if filter_widget.enable_select_all %}
+            <li>
+                <div class="relative px-12 py-8">
+                    <input type="checkbox"
+                           value="{{ filter_widget.select_all_keyword }}"
+                           name="{{ filter_widget.input_name }}_dummy"
+                           class="checkbox js-simple-multiselect-all"
+                           id="{{ filter_widget.input_id }}_all" {% if filter_widget.get_default_value == filter_widget.select_all_keyword %} checked{% endif %} data-label="{{ filter_widget.select_all_label }}">
+                    <label for="{{ filter_widget.input_id }}_all">
+                        {{ filter_widget.select_all_label }}
+                    </label>
+                </div>
+            </li>
+        {% endif %}
         {% for choice in filter_widget.choices %}
             <li>
                 <div class="relative px-12 py-8">

django_smartbase_admin/templates/sb_admin/filter_widgets/partials/clear.html

@@ -8,9 +8,14 @@
             {% trans 'Remove' %}
         </button>
     {% endif %}
-    <button type="button"
-            class="text-primary ml-auto"
-            onclick="window.SBAdminTable['{{ view_id }}'].moduleInstances.filterModule.clearFilter('{{ filter_field.filter_field }}')">
-        {% trans 'Clear' %}
-    </button>
+        <button type="button"
+                class="text-primary ml-auto"
+                {% if view_id %}
+                onclick="window.SBAdminTable['{{ view_id }}'].moduleInstances.filterModule.clearFilter('{{ filter_field.filter_field }}')"
+                {% else %}
+                onclick="window.SBAdmin.clearFilter('{{ filter_field.filter_widget.input_id }}')"
+                {% endif %}
+        >
+            {% trans 'Clear' %}
+        </button>
 </div>

django_smartbase_admin/templates/sb_admin/filter_widgets/radio_choice_field.html

@@ -7,8 +7,8 @@
         {% for choice in filter_widget.choices %}
             <li>
                 <div class="relative">
-                    <input onchange="document.getElementById('{{ filter_widget.input_id }}').value = event.target.value;document.getElementById('{{ filter_widget.input_id }}').dispatchEvent(new Event('change'))" type="radio" value="{{ choice.0 }}" name="{{ filter_widget.input_name }}_dummy" class="radio" id="{{ filter_widget.input_id }}_{{ forloop.counter0 }}" {% if filter_widget.get_default_value == choice.0 %} checked{% endif %} data-label="{{ choice.1 }}">
-                    <label for="{{ filter_widget.input_id }}_{{ forloop.counter0 }}">
+                    <input onchange="document.getElementById('{{ filter_widget.input_id }}').value = event.target.value;document.getElementById('{{ filter_widget.input_id }}').dispatchEvent(new Event('change'))" type="radio" value="{{ choice.0 }}" name="{{ filter_widget.input_name }}_dummy" class="radio radio-list" id="{{ filter_widget.input_id }}_{{ choice.0 }}" {% if filter_widget.get_default_value == choice.0 %} checked{% endif %} data-label="{{ choice.1 }}">
+                    <label for="{{ filter_widget.input_id }}_{{ choice.0 }}">
                         {{ choice.1|safe }}
                     </label>
                 </div>

django_smartbase_admin/templates/sb_admin/filter_widgets/tree_select_filter.html

@@ -0,0 +1,16 @@
+{% load sb_admin_tags %}
+
+<div class="dropdown-menu max-h-none w-248">
+    <div class="px-12 pt-8 border-b border-dark-200">
+        {% with tree_widget_id=filter_widget.view_id|add:"-"|add:filter_widget.input_id|add:"_tree" %}
+            <div class="relative -mx-12">
+                <input form="{{ filter_widget.view_id }}-filter-form" type="hidden"
+                       id="{{ filter_widget.input_id }}" name="{{ filter_widget.input_name }}"
+                       {% if not all_filters_visible %}disabled{% endif %}{% if filter_widget.get_default_value %} value="{{ filter_widget.get_default_value|get_json }}"{% endif %}>
+                {% include "sb_admin/widgets/tree_base.html" with tree_additional_columns=filter_widget.additional_columns tree_strings=filter_widget.tree_strings tree_filter=True tree_value=filter_widget.get_default_value tree_multiselect=filter_widget.multiselect tree_component_id=filter_widget.input_id tree_data_url=filter_widget.to_json.autocomplete_url tree_show_checkbox=True search_wrapper_classes="pb-8 px-12" table_wrapper_classes="max-h-432 overflow-auto custom-scrollbar" %}
+            </div>
+        {% endwith %}
+    </div>
+    {% include "sb_admin/filter_widgets/partials/clear.html" %}
+</div>
+

django_smartbase_admin/templates/sb_admin/includes/change_form_title.html

@@ -1,7 +1,9 @@
 {% load i18n %}
 
 {% if add %}
-    {% blocktrans with name=opts.verbose_name %}Add {{ name }}{% endblocktrans %}
+    {% trans 'Add' %}{% if add_label %} {{ add_label }}{% endif %}
+{% elif change_label %}
+    {{ change_label }}
 {% else %}
     {{ original|truncatewords:"18" }}
 {% endif %}

django_smartbase_admin/templates/sb_admin/includes/inline_fieldset.html

@@ -1,49 +1,58 @@
-{% if fieldset.name %}
-    <header class="mb-24">
-        <span class="text-dark-900">{{ fieldset.name }}</span>
-        <div class="ml-auto flex items-center">
-            {% for action in fieldset_context.actions %}
-                <a href="{{ action.url }}" class="btn btn-small">{{ action.title }}</a>
-            {% endfor %}
-            {% if fieldset.description %}
-                <div class="js-tooltip ml-8" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ fieldset.description|safe }}">
-                    <svg class="w-20 h-20">
-                        <use xlink:href="#Help"></use>
-                    </svg>
+{% load sb_admin_tags %}
+
+{% block content %}
+	{% block header %}
+		{% if fieldset.name %}
+            <header class="mb-24 flex items-center">
+                <span class="text-dark-900">{{ fieldset.name }}</span>
+                {% block description %}
+                    {% if fieldset.description %}
+                        <div class="js-tooltip ml-8" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ fieldset.description|safe }}">
+                            <svg class="w-20 h-20">
+                                <use xlink:href="#Help"></use>
+                            </svg>
+                        </div>
+                    {% endif %}
+                {% endblock %}
+                <div class="ml-auto flex items-center gap-4">
+                    {% block actions %}
+                        {% for action in fieldset_context.actions %}
+                            <a href="{{ action.url }}" class="btn btn-small">{{ action.title }}</a>
+                        {% endfor %}
+                    {% endblock %}
                 </div>
-            {% endif %}
-        </div>
-    </header>
-{% endif %}
-{% for line in fieldset %}
-    <div class="field{% if forloop.last %} -mb-24{% endif %}{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
-        {% if line.fields|length > 1 %}
-            <div class="flex max-xs:flex-wrap gap-x-16">{% endif %}
+            </header>
+        {% endif %}
+	{% endblock %}
 
-        {% for field in line %}
-            <div class="mb-16 sm:mb-24 max-xs:w-full sm:flex-1{% if field.field.is_hidden %} hidden{% endif %}">
-                {% if field.is_readonly %}
-                    <div class="flex flex-wrap w-full">
-                        {% if field.field.label %}
-                            <label class="inline-flex text-dark-900 text-14 leading-18 font-medium mr-8">{{ field.field.label }}:</label>
+    {% block lines %}
+        {% for line in fieldset %}
+            <div class="field{% if forloop.last %} -mb-24{% endif %}{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
+                {% if line.fields|length > 1 %}
+                    <div class="flex max-xs:flex-wrap gap-x-16">{% endif %}
+
+                {% for field in line %}
+                    <div class="mb-16 sm:mb-24 max-xs:w-full sm:flex-1{% if field.field.is_hidden or field.field|is_row_class_field %} hidden{% endif %}">
+                        {% if field.is_readonly %}
+                            {% call_method field "contents" request %}
+                        {% else %}
+                            {{ field.field }}
+                            {% if not line.fields|length == 1 %}{{ field.errors }}{% endif %}
                         {% endif %}
-                        <div class="text-14 w-full break-all">{{ field.contents }}</div>
                     </div>
-                {% else %}
-                    {{ field.field }}
-                    {% if not line.fields|length == 1 %}{{ field.errors }}{% endif %}
+                {% endfor %}
+
+                {% if line.fields|length == 1 and line.errors %}
+                    <div class="-mt-16 mb-24">
+                        {{ line.errors }}
+                    </div>
                 {% endif %}
+                {% if line.fields|length > 1 %}</div>{% endif %}
             </div>
         {% endfor %}
 
-        {% if line.fields|length == 1 and line.errors %}
-            <div class="-mt-16 mb-24">
-                {{ line.errors }}
-            </div>
-        {% endif %}
-        {% if line.fields|length > 1 %}</div>{% endif %}
-    </div>
-{% endfor %}
-{% block additional_fields %}
+    {% endblock %}
+    {% block additional_fields %}
 
+    {% endblock %}
 {% endblock %}

django_smartbase_admin/templates/sb_admin/includes/notifications.html

@@ -1,4 +1,5 @@
-<div id="notification-messages" hx-swap-oob="beforeend" class="z-1000 fixed right-0 left-0 xl:left-260 mx-24">
+<div id="notification-messages" hx-swap-oob="beforeend"
+     class="messagelist z-1000 fixed right-0 left-0 xl:left-260 mx-24{% if classes %} {{ classes }}{% endif %}">
     {% for message in messages %}
         {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
             {% include 'sb_admin/partials/messages/alert_success.html' with text=message %}

django_smartbase_admin/templates/sb_admin/includes/readonly_boolean_field.html

@@ -0,0 +1,9 @@
+<div class="w-full">
+    <div class="text-14 w-full break-all">
+        <div class="relative">
+            <input type="checkbox" name="{{ field_name }}" id="id_{{ field_name }}" form="#" class="toggle"{% if value %} checked{% endif %} readonly disabled>
+            <label for="id_{{ field_name }}"></label>
+            <label for="id_{{ field_name }}">{{ field_label }}</label>
+        </div>
+    </div>
+</div>

django_smartbase_admin/templates/sb_admin/includes/readonly_field.html

@@ -0,0 +1,12 @@
+{% load sb_admin_tags %}
+
+<div class="w-full">
+    {% if field_label %}
+        <label class="inline-flex text-dark-900 text-14 leading-18 font-medium mb-8">
+            {{ field_label }}{{ field_label_suffix }}
+        </label>
+    {% endif %}
+    <div class="text-14 w-full break-all">
+        {{ readonly_content }}
+    </div>
+</div>