django-smartbase-admin 0.2.87__py3-none-any.whl → 0.2.89__py3-none-any.whl

django_smartbase_admin/static/sb_admin/src/css/_components.css

@@ -467,4 +467,30 @@
     .dropdown-menu {
         @apply py-0;
     }
+
+    .sticky-table-head,
+    .sticky-table-col {
+        position: sticky !important;
+        right: 0;
+        z-index: 1;
+        @apply overflow-hidden !border-l-0 pl-8;
+        &:before {
+            content: '';
+            box-shadow: 0 0 8px 0 rgba(17, 24, 39, 0.16);
+            @apply absolute inset-0 transition-colors ml-8;
+        }
+    }
+
+    .sticky-table-head {
+        @apply bg-transparent !important;
+        &:before {
+            @apply bg-dark-50;
+        }
+    }
+
+    .sticky-table-col {
+        &:before {
+            @apply bg-light;
+        }
+    }
 }

django_smartbase_admin/static/sb_admin/src/css/_datepicker.css

@@ -617,6 +617,9 @@ span.flatpickr-weekday {
 .flatpickr-shortcuts {
     @apply pt-4 mb-16;
 
+    input[type="radio"] {
+        @apply hidden;
+    }
     & > label {
         @apply p-0;
     }

django_smartbase_admin/static/sb_admin/src/css/_inlines.css

@@ -9,6 +9,7 @@
     min-width: 100%;
     @apply h-full;
     > .djn-thead {
+        @apply bg-dark-50;
         th {
             @apply p-8 h-48;
             @apply transition-colors;

django_smartbase_admin/static/sb_admin/src/css/components/_query-builder.css

@@ -1,5 +1,6 @@
 .query-builder {
-    select:not(.select2-hidden-accessible), input:not(.checkbox):not(.choices__input) {
+    select:not(.select2-hidden-accessible),
+    input:not(.checkbox):not(.radio):not(.choices__input) {
         @apply !w-full input;
     }
 

django_smartbase_admin/static/sb_admin/src/js/datepicker.js

@@ -1,6 +1,10 @@
 import flatpickr from "flatpickr"
 import {createIcon} from "./utils"
-import {customActionsPlugin, HIDE_CALENDAR_CLASS, monthYearViewsPlugin} from "./datepicker_plugins"
+import {
+    createRadioInput,
+    customActionsPlugin,
+    monthYearViewsPlugin
+} from "./datepicker_plugins"
 
 
 export default class Datepicker {
@@ -28,20 +32,38 @@ export default class Datepicker {
         if(datePickerEl.dataset.sbadminDatepicker) {
             sbadminDatepickerData = JSON.parse(datePickerEl.dataset.sbadminDatepicker)
         }
+
         flatpickr(datePickerEl, {
             onReady: (selectedDates, dateStr, instance) => {
-                const isInTable = datePickerEl.closest('[data-filter-input-name]')
-                if(!isInTable) {
-                    this.createClear(instance)
-                }
                 instance.nextMonthNav?.replaceChildren(createIcon('Right-small'))
                 instance.prevMonthNav?.replaceChildren(createIcon('Left-small'))
-                datePickerEl.addEventListener('clear', () => {
+
+                const isInTable = datePickerEl.closest('[data-filter-input-name]')
+
+                // real input element should be present only in filters
+                const realInput = document.getElementById(datePickerEl.dataset.sbadminDatepickerRealInputId)
+                const mainInput = realInput || datePickerEl
+                mainInput.addEventListener('clear', () => {
                     instance.clear()
                 })
-                if(datePickerEl.classList.contains(HIDE_CALENDAR_CLASS)) {
-                    instance.monthNav.classList.add('!hidden')
-                    instance.innerContainer.classList.add('!hidden')
+
+
+                if(!isInTable){
+                    this.createClear(instance)
+                }
+
+                if(isInTable && realInput) {
+                    // set initial value from real input to flatpickr
+                    realInput.addEventListener('SBTableFilterFormLoad', () => {
+                        if(!datePickerEl.value) {
+                            instance.setDate(realInput.value, false, instance.config.dateFormat)
+                        }
+                    })
+                    return
+                }
+                if(realInput) {
+                    // advanced filters
+                    instance.setDate(realInput.value, false, instance.config.dateFormat)
                 }
             },
             onClose: function(selectedDates, dateStr, instance) {
@@ -50,12 +72,52 @@ export default class Datepicker {
                     instance.setDate([selectedDates[0],selectedDates[0]], true)
                 }
             },
+            onChange: function(selectedDates, dateStr) {
+                const realInput = document.getElementById(datePickerEl.dataset.sbadminDatepickerRealInputId)
+                if(realInput) {
+                    realInput.value = dateStr
+                    realInput.removeAttribute('data-label')
+                    realInput.dispatchEvent(new Event('change'))
+                }
+            },
             ...options,
             ...sbadminDatepickerData.flatpickrOptions,
             ...optionsOverride
         })
     }
 
+    initShortcutsDropdown(datePickerEl) {
+        const realInput = document.getElementById(datePickerEl.dataset.sbadminDatepickerRealInputId)
+        const baseId = realInput.id
+        const baseValue = realInput.value
+        const el = document.createElement('div')
+        const shortcuts = JSON.parse(datePickerEl.dataset.sbadminDatepickerShortcuts)
+        el.classList.add('flatpickr-shortcuts', 'dropdown-menu')
+        el.addEventListener('change', (e) => {
+            realInput.value = e.target.value
+            datePickerEl.value = e.target.nextElementSibling.innerText
+        })
+
+        shortcuts.forEach((shortcut, idx) => {
+            const checked = JSON.stringify(shortcut.value) === baseValue
+            if(checked) {
+                datePickerEl.value = shortcut.label
+            }
+            el.append(createRadioInput(
+                `${baseId}_range${idx}`,
+                `${baseId}_shortcut`,
+                JSON.stringify(shortcut.value),
+                shortcut.label,
+                checked,
+                idx
+            ))
+        })
+        datePickerEl.parentElement.append(el)
+        datePickerEl.readOnly = true
+        datePickerEl.dataset['bsToggle'] = "dropdown"
+        new window.bootstrap5.Dropdown(datePickerEl)
+    }
+
     initWidgets(parentEl=null) {
         const datePickerSelector = {
             '.js-datepicker': {

django_smartbase_admin/static/sb_admin/src/js/datepicker_plugins.js

@@ -249,74 +249,100 @@ export const monthYearViewsPlugin = (fp) => {
     }
 }
 
+export const createRadioInput = (id, name, value, label, checked, index) => {
+    const inputWrapperEl = document.createElement('label')
+    inputWrapperEl.classList.add('relative', 'block', 'px-12', 'py-8')
+    inputWrapperEl.setAttribute('for', id)
+    const labelEl = document.createElement('label')
+    labelEl.innerText = label
+    labelEl.setAttribute('for', id)
+    const inputEl = document.createElement('input')
+    inputEl.id = id
+    inputEl.name = name
+    inputEl.value = value
+    inputEl.type = 'radio'
+    inputEl.classList.add('radio', 'flatpickr-shortcut')
+    inputEl.checked = checked
+    inputEl.dataset["index"] = index
+    inputWrapperEl.append(inputEl)
+    inputWrapperEl.append(labelEl)
+    return inputWrapperEl
+}
+
 // eslint-disable-next-line no-unused-vars
 export const customActionsPlugin = (fp) => {
-
-    const createRadioInput = (id, name, value, label, checked) => {
-        const inputWrapperEl = document.createElement('label')
-        inputWrapperEl.classList.add('relative', 'block', 'px-12', 'py-8')
-        inputWrapperEl.setAttribute('for', id)
-        const labelEl = document.createElement('label')
-        labelEl.innerText = label
-        labelEl.setAttribute('for', id)
-        const inputEl = document.createElement('input')
-        inputEl.id = id
-        inputEl.name = name
-        inputEl.value = value
-        inputEl.type = 'radio'
-        inputEl.classList.add('radio')
-        inputEl.checked = checked
-        inputWrapperEl.append(inputEl)
-        inputWrapperEl.append(labelEl)
-        return inputWrapperEl
-    }
-
-    const dateTimeReviver = (key, value) => {
-        if (key === 'value') {
-            const newValue = []
-            value.forEach((val) => {
-                newValue.push(new Date(val))
-            })
-            return newValue
-        }
-        return value
-    }
-
     const createShortcuts = () => {
-        const baseId = fp.element.id
-        const baseValue = fp.element.value
+        const realInput = document.getElementById(fp.element.dataset.sbadminDatepickerRealInputId)
+        const baseId = realInput.id
+        const baseValue = realInput.value
         const el = document.createElement('div')
-        const shortcuts = JSON.parse(fp.element.dataset.sbadminDatepickerShortcuts, dateTimeReviver)
+        const shortcuts = JSON.parse(fp.element.dataset.sbadminDatepickerShortcuts)
         el.classList.add('flatpickr-shortcuts')
         el.addEventListener('change', (e) => {
+            // on shortcut click/change set new value and label to real input element
             const value = e.target.value
-            fp.setDate(shortcuts[value].value, true, fp.config.dateFormat)
+            realInput.value = value
+            realInput.dataset['label'] = e.target.nextElementSibling.innerText
+            realInput.dispatchEvent(new Event('change'))
+
+            // parse new value and set it to flatpicker
+            const shortcutValue = shortcuts[e.target.dataset.index].value
+            const from = new Date()
+            from.setDate(from.getDate() + shortcutValue[0])
+
+            const to = new Date()
+            to.setDate(to.getDate() + shortcutValue[1])
+
+            fp.setDate([from, to], false, fp.config.dateFormat)
         })
 
         shortcuts.forEach((shortcut, idx) => {
-            const fromDateFormatted = fp.formatDate(shortcut.value[0], fp.config.dateFormat)
-            const toDateFormatted = fp.formatDate(shortcut.value[1], fp.config.dateFormat)
-            let shortcutValueStr
-            if (fromDateFormatted === toDateFormatted) {
-                shortcutValueStr = fromDateFormatted
-            } else {
-                shortcutValueStr = fromDateFormatted + fp.config.locale.rangeSeparator + toDateFormatted
+            const checked = JSON.stringify(shortcut.value) === baseValue
+            if(checked) {
+                realInput.dataset['label'] = shortcut.label
             }
             el.append(createRadioInput(
                 `${baseId}_range${idx}`,
                 `${baseId}_shortcut`,
-                idx,
+                JSON.stringify(shortcut.value),
                 shortcut.label,
-                baseValue === shortcutValueStr
+                checked,
+                idx
             ))
         })
         fp.calendarContainer.prepend(el)
+
+        realInput.addEventListener('SBTableFilterFormLoad', () => {
+            try {
+                const shortcutValue = JSON.parse(realInput.value)
+                const from = new Date()
+                from.setDate(from.getDate() + shortcutValue[0])
+
+                const to = new Date()
+                to.setDate(to.getDate() + shortcutValue[1])
+                fp.setDate([from, to], false, fp.config.dateFormat)
+
+                shortcuts.forEach((shortcut, idx) => {
+                    if(JSON.stringify(shortcut.value) === realInput.value) {
+                        document.getElementById(`${baseId}_range${idx}`).checked = true
+                        realInput.dataset['label'] = shortcut.label
+                    }
+                })
+            }
+            catch {
+                fp.setDate(realInput.value, false, fp.config.dateFormat)
+            }
+        })
     }
 
 
     return {
         onReady: createShortcuts,
+        onChange: (selectedDates, dateStr, instance) => {
+            const checkedShortcut = instance.element.parentElement.querySelector('input.flatpickr-shortcut:checked')
+            if(checkedShortcut){
+                checkedShortcut.checked = false
+            }
+        }
     }
 }
-
-export const HIDE_CALENDAR_CLASS = 'hide-calendar' // used for hiding calendar and only use shortcuts

django_smartbase_admin/static/sb_admin/src/js/table_modules/advanced_filter_module.js

@@ -1,6 +1,6 @@
 import { SBAdminTableModule } from "./base_module"
 import { filterInputValueChangedUtil, filterInputValueChangeListener } from "../utils"
-import {customActionsPlugin, HIDE_CALENDAR_CLASS, monthYearViewsPlugin} from "../datepicker_plugins"
+import {customActionsPlugin, monthYearViewsPlugin} from "../datepicker_plugins"
 
 export class AdvancedFilterModule extends SBAdminTableModule {
     constructor(table) {
@@ -104,6 +104,16 @@ export class AdvancedFilterModule extends SBAdminTableModule {
             widgetEl._flatpickr.calendarContainer?.remove()
             widgetEl._flatpickr.clear()
             widgetEl._flatpickr.destroy()
+            widgetEl._flatpickr = undefined
+            return
+        }
+        const dropdownInstance = window.bootstrap5.Dropdown.getInstance(widgetEl)
+        if(dropdownInstance) {
+            dropdownInstance.dispose()
+            widgetEl.removeAttribute('data-bs-toggle')
+            widgetEl.nextElementSibling?.remove()
+            widgetEl.readOnly = false
+            widgetEl.value = ""
         }
     }
 
@@ -120,17 +130,14 @@ export class AdvancedFilterModule extends SBAdminTableModule {
         if (["between", "not_between", "in_the_last", "in_the_next"].includes(rule.operator.type)) {
             optionsOverride["mode"] = "range"
         }
+        this.destroyDatePicker(widgetEl)
+        const shortcuts = JSON.parse(widgetEl.dataset.sbadminDatepickerShortcutsDict)
+        widgetEl.dataset.sbadminDatepickerShortcuts = JSON.stringify(shortcuts[rule.operator.type] || [])
         if (["in_the_last", "in_the_next"].includes(rule.operator.type)) {
-            // this option does work but there is a bug in certain cases
-            // optionsOverride["noCalendar"] = true
-            widgetEl.classList.add(HIDE_CALENDAR_CLASS)
+            window.SBAdmin.datepicker.initShortcutsDropdown(widgetEl, {}, optionsOverride)
         }
         else {
-            widgetEl.classList.remove(HIDE_CALENDAR_CLASS)
+            window.SBAdmin.datepicker.initFlatPickr(widgetEl, {}, optionsOverride)
         }
-        this.destroyDatePicker(widgetEl)
-        const shortcuts = JSON.parse(widgetEl.dataset.sbadminDatepickerShortcutsDict)
-        widgetEl.dataset.sbadminDatepickerShortcuts = JSON.stringify(shortcuts[rule.operator.type] || [])
-        window.SBAdmin.datepicker.initFlatPickr(widgetEl, {}, optionsOverride)
     }
 }

django_smartbase_admin/static/sb_admin/src/js/utils.js

@@ -73,6 +73,11 @@ export const filterInputValueChangedUtil = (field) => {
     if(!valueElem) {
         return
     }
+    const label = field.dataset.label
+    if(label) {
+        valueElem.innerHTML = label
+        return valueElem
+    }
     const valueOrObject = getObjectOrValue(field.value)
     if ((field.value === "" || field.value === "[]")) {
         if(field.dataset.emptyLabel) {

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

@@ -1,10 +1,17 @@
 <div class="relative">
     <input
-        type="text"
+        type="hidden"
         autocomplete="off"
-        class="input pl-10 js-datepicker-dynamic"
         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 }}"
     >

django_smartbase_admin/templates/sb_admin/filter_widgets/date_field.html

@@ -1,12 +1,22 @@
 <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 }}"
+        <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 }}"{% 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 }}"
-               {% if not all_filters_visible %}disabled{% endif %}{% if filter_widget.get_default_value %}
-               value="{{ filter_widget.get_default_value }}"{% endif %}>
+               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/includes/inline_fieldset.html

@@ -23,7 +23,7 @@
             <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 %} hidden{% endif %}">
+            <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 %}

django_smartbase_admin/templates/sb_admin/includes/table_inline_delete_button.html

@@ -1,7 +1,7 @@
 {% load widget_tweaks %}
 {% if inline_admin_formset.formset.can_delete %}
     {% if inline_admin_form.original %}
-        <td class="w-40">
+        <td class="w-40{% if sticky %} sticky-table-col{% endif %}">
             <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 }}">
@@ -12,10 +12,9 @@
             </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)">
+        <td class="delete w-40{% if sticky %} sticky-table-col{% endif %}">
+            <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>

django_smartbase_admin/templates/sb_admin/inlines/table_inline.html

@@ -70,8 +70,11 @@
                                                 </th>
                                             {% endif %}
                                         {% endfor %}
-                                        {% if inline_admin_formset.formset.can_delete %}
-                                            <th class="djn-th" style="min-width: 54px; width: 54px;"></th>{% endif %}
+                                        {% block table_inline_delete_table_head %}
+                                            {% if inline_admin_formset.formset.can_delete %}
+                                                <th class="djn-th sticky-table-head" style="min-width: 54px; width: 54px;"></th>
+                                            {% endif %}
+                                        {% endblock %}
                                     </tr>
                                 </thead>
 
@@ -163,7 +166,7 @@
                                             {% endfor %}
                                         {% endfor %}
                                         {% block table_inline_delete_button %}
-                                            {% include "sb_admin/includes/table_inline_delete_button.html" %}
+                                            {% include "sb_admin/includes/table_inline_delete_button.html" with sticky=True %}
                                         {% endblock %}
                                     </tr>
                                     {% block table_inline_after_line %}{% endblock %}
@@ -183,6 +186,21 @@
                             {% endblock %}
                         </table>
 
+                        {% block table_script %}
+                            <script>
+                                {# move all non initial lines to the top of the table to maintain original order #}
+                                {# this should happen only during validation error #}
+                                (function(){
+                                    const group = document.getElementById('{{ inline_admin_formset.formset.prefix }}-group');
+                                    const table = group.querySelector('.djn-table');
+                                    const bodies_to_move = Array.from(group.querySelectorAll('.djn-tbody[data-is-initial="false"]'));
+                                    if(bodies_to_move) {
+                                        table.prepend(...bodies_to_move.reverse());
+                                    }
+                                }());
+                            </script>
+                        {% endblock %}
+
                     </fieldset>
                 </div>
 

django_smartbase_admin/views/translations_view.py

@@ -161,7 +161,7 @@ class ModelTranslationView(SBAdminView, SBAdminBaseListView):
                     annotate=Case(
                         When(
                             **{
-                                f"{annotate_name}_count": F(
+                                f"{annotate_name}_count__gte": F(
                                     f"{main_lang_annotate_name}_count"
                                 ),
                                 "then": Value(self.TRANSLATION_TRANSLATED),

{django_smartbase_admin-0.2.87.dist-info → django_smartbase_admin-0.2.89.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: django-smartbase-admin
-Version: 0.2.87
+Version: 0.2.89
 Summary: 
 Author: SmartBase
 Author-email: info@smartbase.sk