django-smartbase-admin 1.0.14__py3-none-any.whl → 1.0.15__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,22 @@ class Main {
         this.handleLocationHashFromTabs()
     }
 
+    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)
+                this.switchCKEditorTheme(e.target.value)
+                return
+            }
+            document.documentElement.removeAttribute('data-theme')
+        })
+        this.switchCKEditorTheme(document.documentElement.dataset.theme)
+    }
+
     initInlines(target) {
         target = target || document
         const inlineGroups = target.querySelectorAll('.inline-group')
@@ -173,7 +190,7 @@ class Main {
             } else {
                 offset = [0, 8]
             }
-            return new Dropdown(dropdownToggleEl, {
+            const dropdown = new Dropdown(dropdownToggleEl, {
                 autoClose: 'outside',
                 offset: offset,
                 popperConfig(defaultBsPopperConfig) {
@@ -184,6 +201,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 +329,46 @@ 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(colorScheme) {
+        if(!window.CKEDITOR) {
+            return
+        }
+        let dark = colorScheme === 'dark'
+        if(colorScheme === 'auto') {
+            dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        }
+        if(dark) {
+            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/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/navigation.html

@@ -148,16 +148,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_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"/>