django-smartbase-admin 1.0.14__py3-none-any.whl → 1.0.16__py3-none-any.whl

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

@@ -27,12 +27,13 @@ import Range from "./range"
 import Sorting from "./sorting"
 import Autocomplete from "./autocomplete"
 import ChoicesJS from "./choices"
-import {setCookie} from "./utils"
+import {setCookie, setDropdownLabel} from "./utils"
 import Multiselect from "./multiselect"
 
 class Main {
     constructor() {
         document.body.classList.add('js-ready')
+        this.handleColorSchemeChange()
 
         const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         tooltipTriggerList.map((tooltipTriggerEl) => {
@@ -104,6 +105,38 @@ class Main {
         this.handleLocationHashFromTabs()
     }
 
+    isDarkMode(colorScheme) {
+        let isDark = colorScheme === 'dark'
+        if(colorScheme === 'auto') {
+            isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        }
+        if(isDark) {
+            document.body.classList.add('dark')
+        }
+        else {
+            document.body.classList.remove('dark')
+        }
+        return isDark
+    }
+
+    handleColorSchemeChange() {
+        const picker = document.querySelector('.js-color-scheme-picker')
+        if(!picker) {
+            return
+        }
+        picker.addEventListener('change', (e)=>{
+            if(e.target.value) {
+                document.documentElement.setAttribute('data-theme', e.target.value)
+                const isDarkMode = this.isDarkMode(e.target.value)
+                this.switchCKEditorTheme(isDarkMode)
+                return
+            }
+            document.documentElement.removeAttribute('data-theme')
+        })
+        const isDarkMode = this.isDarkMode(document.documentElement.dataset.theme)
+        this.switchCKEditorTheme(isDarkMode)
+    }
+
     initInlines(target) {
         target = target || document
         const inlineGroups = target.querySelectorAll('.inline-group')
@@ -173,7 +206,7 @@ class Main {
             } else {
                 offset = [0, 8]
             }
-            return new Dropdown(dropdownToggleEl, {
+            const dropdown = new Dropdown(dropdownToggleEl, {
                 autoClose: 'outside',
                 offset: offset,
                 popperConfig(defaultBsPopperConfig) {
@@ -184,6 +217,14 @@ class Main {
                     return {...defaultBsPopperConfig, ...elementConf, strategy: 'fixed'}
                 }
             })
+            const dropdownWrapper = dropdownToggleEl.closest('.js-dropdown-wrapper')
+            if(dropdownWrapper) {
+                const dropdownLabelEl = dropdownWrapper.querySelector('.js-dropdown-label')
+                dropdown._menu.addEventListener('change', ()=>{
+                    setDropdownLabel(dropdown._menu, dropdownLabelEl)
+                })
+            }
+            return dropdown
         })
     }
 
@@ -304,28 +345,43 @@ class Main {
         })
     }
 
-    initCKEditor(target) {
+    initCKEditor(target, config, force=false) {
         if (!window.CKEDITOR) {
             return
         }
         target = target || document
         target.querySelectorAll('textarea[data-type="ckeditortype"]').forEach((textarea) => {
-            const id = textarea.id
-            if (!id) {
-                return
-            }
-            if(
-                textarea.getAttribute("data-processed") == "0" &&
-                textarea.id.indexOf("__prefix__") == -1
-            ) {
-                if(window.CKEDITOR.instances[id]) {
-                    window.CKEDITOR.instances[id].destroy(true)
-                }
-                window.CKEDITOR.replace(id, JSON.parse(textarea.getAttribute("data-config")))
+            if( force || (textarea.getAttribute("data-processed") == "0" && textarea.id.indexOf("__prefix__") == -1)) {
+                this.reinitCKEditor(textarea, config)
             }
         })
     }
 
+    reinitCKEditor(textarea, config) {
+        const id = textarea.id
+        if (!id) {
+            return
+        }
+        if(window.CKEDITOR.instances[id]) {
+            window.CKEDITOR.instances[id].destroy(true)
+        }
+        config = config || {}
+        const new_config = {...JSON.parse(textarea.getAttribute("data-config")), ...config}
+        window.CKEDITOR.replace(id, new_config)
+    }
+
+    switchCKEditorTheme(isDarkMode) {
+        if(!window.CKEDITOR) {
+            return
+        }
+
+        if(isDarkMode) {
+            this.initCKEditor(document, {'contentsCss': '/static/sb_admin/css/ckeditor/ckeditor_content_dark.css', uiColor: '#000000'}, true)
+            return
+        }
+        this.initCKEditor(document, {'contentsCss':window.CKEDITOR.config.contentsCss}, true)
+    }
+
     clearFilter(inputId) {
         const fieldElem = document.querySelector(`#${inputId}`)
         fieldElem.value = ''

django_smartbase_admin/static/sb_admin/src/js/multiselect.js

@@ -1,3 +1,5 @@
+import {setDropdownLabel} from "./utils"
+
 export default class Multiselect {
     constructor(selector_override, options_override, target) {
         target = target || document
@@ -9,9 +11,13 @@ export default class Multiselect {
             document.addEventListener('change', e => {
                 const wrapperEl = e.target.closest(this.wrapperSelector)
                 const multiselectInput = wrapperEl?.querySelector(selector)
+                if(!wrapperEl || !multiselectInput) {
+                    // not filter widget
+                    return
+                }
                 const isCheckboxClicked = e.target.type === 'checkbox'
                 const selectAllEl = wrapperEl?.querySelector(`.${selectAllClass}`)
-                if(multiselectInput && isCheckboxClicked) {
+                if(isCheckboxClicked) {
                     const checkboxes = Array.from(this.getCheckboxes(multiselectInput))
                     if(e.target.classList.contains(selectAllClass)) {
                         checkboxes.forEach(el => {
@@ -79,35 +85,20 @@ export default class Multiselect {
         })
     }
 
-
-    setLabel(wrapper, valueEl) {
-        let labels = []
-        wrapper.querySelectorAll('input[type="checkbox"]').forEach(el => {
-            if (el.checked) {
-                labels.push(document.querySelector(`label[for="${el.id}"]`).innerText)
-            }
-        })
-        valueEl.innerHTML = labels.join(',')
-    }
-
     clearAll(wrapper, valueEl) {
         wrapper.querySelectorAll('input[type="checkbox"]').forEach(el => {
             el.checked = false
         })
-        this.setLabel(wrapper, valueEl)
+        setDropdownLabel(wrapper, valueEl)
     }
 
 
     initDetailMultiselect(wrapper) {
-        const valueEl = wrapper.querySelector('.js-value')
         const clearEl = wrapper.querySelector('.js-clear')
 
-        wrapper.addEventListener('change', () => {
-            this.setLabel(wrapper, valueEl)
-        })
         clearEl?.addEventListener('click', () => {
-            this.clearAll(wrapper, valueEl)
+            this.clearAll(wrapper)
         })
-        this.setLabel(wrapper, valueEl)
+        setDropdownLabel(wrapper)
     }
 }

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

@@ -66,6 +66,52 @@ export const filterInputValueChangeListener = (inputSelector, callbackFunction)
     })
 }
 
+const getResultLabel = (valueOrObject, separator=', ') => {
+    const labelArray = []
+    const entries = Object.values(valueOrObject)
+    let hasMaxEntries = false
+    for (let [index, item] of entries.entries()) {
+        if (index === window.sb_admin_const.MULTISELECT_FILTER_MAX_CHOICES_SHOWN) {
+            break
+        }
+        if(entries.length > 1 && item.value === window.sb_admin_const.SELECT_ALL_KEYWORD) {
+            continue
+        }
+        if (index === window.sb_admin_const.MULTISELECT_FILTER_MAX_CHOICES_SHOWN - 2 && entries[index + 2]) {
+            labelArray.push(item.label)
+            hasMaxEntries = true
+            break
+        }
+        labelArray.push(item.label)
+    }
+    let resultLabel = labelArray.join(separator)
+    if(hasMaxEntries) {
+        resultLabel = resultLabel.substring(0, resultLabel.length)
+        resultLabel += `... +${entries.length - window.sb_admin_const.MULTISELECT_FILTER_MAX_CHOICES_SHOWN + 1}`
+    }
+    return resultLabel
+}
+
+export const setDropdownLabel = (dropdownMenuEl, dropdownLabelEl) => {
+    if(!dropdownMenuEl) {
+        return
+    }
+    if(!dropdownLabelEl) {
+        dropdownLabelEl = dropdownMenuEl.querySelector('.js-dropdown-label')
+    }
+    if(!dropdownLabelEl) {
+        return
+    }
+    const fields = Array.from(dropdownMenuEl.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked')).map(el => {
+        const label = el.parentElement.querySelector(`label[for="${el.id}"]`)
+        return {
+            'value': el.value,
+            'label': label?label.innerHTML:''
+        }
+    })
+    dropdownLabelEl.innerHTML = getResultLabel(fields)
+}
+
 export const filterInputValueChangedUtil = (field) => {
     const filterId = field.dataset.filterId || field.id
     const separator = field.dataset.labelSeparator || ', '
@@ -88,29 +134,7 @@ export const filterInputValueChangedUtil = (field) => {
         return valueElem
     }
     if (typeof valueOrObject === 'object') {
-        const labelArray = []
-        const entries = Object.values(valueOrObject)
-        let hasMaxEntries = false
-        for (let [index, item] of entries.entries()) {
-            if (index === window.sb_admin_const.MULTISELECT_FILTER_MAX_CHOICES_SHOWN) {
-                break
-            }
-            if(entries.length > 1 && item.value === window.sb_admin_const.SELECT_ALL_KEYWORD) {
-                continue
-            }
-            if (index === window.sb_admin_const.MULTISELECT_FILTER_MAX_CHOICES_SHOWN - 2 && entries[index + 2]) {
-                labelArray.push(item.label)
-                hasMaxEntries = true
-                break
-            }
-            labelArray.push(item.label)
-        }
-        let resultLabel = labelArray.join(separator)
-        if(hasMaxEntries) {
-            resultLabel = resultLabel.substring(0, resultLabel.length)
-            resultLabel += `... +${entries.length - window.sb_admin_const.MULTISELECT_FILTER_MAX_CHOICES_SHOWN + 1}`
-        }
-        valueElem.innerHTML = resultLabel
+        valueElem.innerHTML = getResultLabel(valueOrObject, separator)
     } else {
         try {
             // select

django_smartbase_admin/templates/sb_admin/actions/change_form.html

@@ -223,9 +223,9 @@
                         <button
                                 form="{% if sbadmin_is_modal %}modal_{% endif %}{{ opts.model_name }}_form"
                                 hx-post="{{ post_url }}"
-                                hx-target="#sb-admin-modal .modal-content"
+                                hx-target="#sb-admin-modal"
                                 hx-swap="innerHTML"
-                                hx-select="#content"
+                                hx-select="#modal-content"
                                 hx-encoding="multipart/form-data"
                                 hx-vals='{
                                     "sbadmin_is_modal": 1,

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/radio_choice_field.html

@@ -7,7 +7,7 @@
         {% 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 }}_{{ choice.0 }}" {% if filter_widget.get_default_value == choice.0 %} checked{% endif %} data-label="{{ choice.1 }}">
+                    <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>

django_smartbase_admin/templates/sb_admin/inlines/table_inline.html

@@ -30,8 +30,8 @@
                                         data-bs-toggle="modal"
                                         data-bs-target="#sb-admin-modal"
                                         hx-get="{{ context_data.add_url }}?_popup=1&sbadmin_is_modal=1&sbadmin_reload_on_save=1&sbadmin_parent_instance_field=modal_{{ context_data.parent_data.sbadmin_parent_instance_field }}&sbadmin_parent_instance_pk={{ context_data.parent_data.sbadmin_parent_instance_pk }}&sbadmin_parent_instance_label={{ context_data.parent_data.sbadmin_parent_instance_label }}"
-                                        hx-target="#sb-admin-modal .modal-content"
-                                        hx-select="#content"
+                                        hx-target="#sb-admin-modal"
+                                        hx-select="#modal-content"
                                         hx-swap="innerHTML"
                                 >
                                     <svg class="w-20 h-20 md:mr-8">

django_smartbase_admin/templates/sb_admin/navigation.html

@@ -17,7 +17,9 @@
         <nav class="w-260 xl:fixed top-0 bottom-0 left-0 max-lg:sidebar border-r border-dark-200 overflow-hidden flex flex-col relative bg-dark-50 z-1"
              id="main-navigation">
             <header class="px-24 py-32 hidden xl:!block">
-                <img src="{{ LAZY_LOAD_DEFAULT_IMAGE }}" data-src="{% static 'sb_admin/images/logo.svg' %}" class="lazyload h-32 w-auto"
+                <img src="{{ LAZY_LOAD_DEFAULT_IMAGE }}" data-src="{% static 'sb_admin/images/logo.svg' %}" class="lazyload h-32 w-auto dark:hidden"
+                     alt="SBAdmin" width="133" height="20">
+                <img src="{{ LAZY_LOAD_DEFAULT_IMAGE }}" data-src="{% static 'sb_admin/images/logo_light.svg' %}" class="lazyload h-32 w-auto hidden dark:block"
                      alt="SBAdmin" width="133" height="20">
             </header>
             <header class="px-16 py-8 flex items-center xl:hidden border-b border-dark-200 bg-light min-h-56">
@@ -148,16 +150,18 @@
                                 </svg>
                                 {% trans 'Change password' %}
                             </li>
-                            {% if request_data.global_filter_instance %}
-                                <li class="p-12 text-dark-900">
-                                    {% trans 'Choose domain' %}
+                            {% block color_scheme %}
+                                <li class="border-t border-dark-100 pt-8">
+                                    <form hx-post="{% url 'sb_admin:color_scheme' %}" hx-trigger="change" hx-swap="none" id="color-schema-form" class="js-color-scheme-picker">
+                                        {{ color_scheme_form.color_scheme }}
+                                    </form>
                                 </li>
-                                <li>
+                            {% endblock %}
+                            {% if request_data.global_filter_instance %}
+                                <li class="border-t border-dark-100 pt-8">
                                     <form hx-post="{% url 'sb_admin:global_filter' %}" hx-trigger="change" hx-swap="none" id="global_filter_form">
                                         {% for field in request_data.global_filter_instance %}
-                                            <div class="relative">
-                                                {{ field }}
-                                            </div>
+                                            {{ field }}
                                             {{ field.errors }}
                                         {% endfor %}
                                     </form>

django_smartbase_admin/templates/sb_admin/sb_admin_base.html

@@ -5,6 +5,12 @@
     {% get_item request.META 'HTTP_SEC_FETCH_SITE' as sec_fetch_site %}
     <div class="w-full h-full min-h-full{% if not sec_fetch_site or request.META.HTTP_SEC_FETCH_DEST == 'document' %} xl:pl-260{% endif %}">
         {% include 'sb_admin/navigation.html' %}
+
+        {% if sbadmin_is_modal %}
+            <div id="modal-content" class="modal-dialog">
+                <div class="modal-content">
+        {% endif %}
+
         <div id="content" class="relative flex flex-col{% if sbadmin_is_modal %} min-h-0 h-full{% else %} min-h-screen sm:p-24 {% block view_class %}{% endblock %}{% endif %}">
             {% if sbadmin_is_modal %}
                 {# load media which are missing #}
@@ -45,5 +51,10 @@
             {% endblock %}
             {{ inner_content }}
         </div>
+
+        {% if sbadmin_is_modal %}
+                </div>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}

django_smartbase_admin/templates/sb_admin/sb_admin_base_no_sidebar.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 <!DOCTYPE html>
-<html lang="{{ request.LANGUAGE_CODE }}" data-theme="light" data-color-scheme="light">
+<html lang="{{ request.LANGUAGE_CODE }}" data-theme="{{ user_config.color_scheme }}">
 <head>
     {% include 'sb_admin/fonts.html' %}
     <meta name="robots" content="noindex"/>