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

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

@@ -3,9 +3,16 @@ import Collapse from 'bootstrap/js/dist/collapse'
 import Tab from 'bootstrap/js/dist/tab'
 import Modal from 'bootstrap/js/dist/modal'
 import Tooltip from 'bootstrap/js/dist/tooltip'
+import debounce from 'lodash/debounce'
 
 // remove Modal focus trap to fix interaction with fields in modals inside another modal
-Modal.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } }
+Modal.prototype._initializeFocusTrap = function () {
+    return {
+        activate: function () {
+        }, deactivate: function () {
+        }
+    }
+}
 
 window.bootstrap5 = {
     Modal: Modal,
@@ -21,17 +28,19 @@ 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"
+import Radio from "./radio"
 
 class Main {
     constructor() {
         document.body.classList.add('js-ready')
+        this.handleColorSchemeChange()
 
         const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         tooltipTriggerList.map((tooltipTriggerEl) => {
             const tooltipEl = tooltipTriggerEl.closest('.js-tooltip')
-            if(tooltipEl) {
+            if (tooltipEl) {
                 return new Tooltip(tooltipTriggerEl, {container: tooltipEl})
             }
             return null
@@ -41,35 +50,124 @@ class Main {
         document.addEventListener('formset:added', (e) => {
             this.initDropdowns(e.target)
             this.initFileInputs(e.target)
+            this.switchCKEditorTheme(e.target)
             if (e.target !== e.target.parentNode.firstChild) {
                 e.target.parentNode.insertBefore(e.target, e.target.parentNode.firstChild)
             }
+            window.htmx.process(e.target)
         })
         document.addEventListener('openUrl', (e) => {
             window.open(e.detail.url, e.detail?.target || '_blank')
         })
 
+        if (window.htmx) {
+            const shouldProcessAfterSwap = (detail) => {
+                const requestEl = detail.detail.requestConfig.elt.closest('[hx-swap]')
+                if (requestEl && requestEl.getAttribute('hx-swap') === "none") {
+                    // do not process afterSwap if none swap is performed
+                    // this should prevent double processing of afterSwap for first oob-swapped element
+                    // which in case of hx-swap=none is returned here in the detail.target
+                    return false
+                }
+                return true
+            }
+
+            window.htmx.on("htmx:afterSwap", (detail) => {
+                if(!shouldProcessAfterSwap(detail)) {
+                    return
+                }
+                this.initFileInputs(detail.target)
+                this.initDropdowns(detail.target)
+                this.initInputs(detail.target)
+                this.autocomplete.handleDynamiclyAddedAutocomplete(detail.target)
+                this.initInlines(detail.target)
+            })
+
+            window.htmx.on("htmx:afterSettle", (detail) => {
+                if(!shouldProcessAfterSwap(detail)) {
+                    return
+                }
+                this.switchCKEditorTheme(detail.target)
+            })
+        }
+
         new Sidebar()
-        this.datepicker = new Datepicker()
-        this.range = new Range()
+        this.initInputs()
         new Sorting()
         this.autocomplete = new Autocomplete()
         new ChoicesJS()
-        this.multiselect = new Multiselect()
         document.addEventListener('click', (e) => {
             this.closeAlert(e)
             this.selectAll(e)
             this.saveState(e)
             this.fileDownload(e)
             this.passwordToggleFnc(e)
+            this.collapseStackedInlineButtons(e)
         })
         this.initFileInputs()
         this.initAliasName()
         this.handleLocationHashFromTabs()
+        this.initCollapseEventListeners()
+    }
+
+    isDarkMode() {
+        const colorScheme = document.documentElement.dataset.theme
+        let isDark = colorScheme === 'dark'
+        if(!colorScheme || colorScheme === 'auto') {
+            isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        }
+        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)
+                this.switchBodyColorSchemeClass(true)
+                this.switchCKEditorTheme()
+                return
+            }
+            document.documentElement.removeAttribute('data-theme')
+        })
+        this.switchBodyColorSchemeClass()
+        this.switchCKEditorTheme()
+    }
+
+    switchBodyColorSchemeClass(fireEvents = false) {
+        if(this.isDarkMode()) {
+            document.body.classList.add('dark')
+            if(fireEvents) {
+                document.body.dispatchEvent(new CustomEvent('color-scheme-change', {detail: 'dark'}))
+            }
+            return
+        }
+        document.body.classList.remove('dark')
+        if(fireEvents) {
+            document.body.dispatchEvent(new CustomEvent('color-scheme-change', {detail: 'light'}))
+        }
+    }
+
+    initInlines(target) {
+        target = target || document
+        const inlineGroups = target.querySelectorAll('.inline-group')
+        inlineGroups.forEach(group => {
+            window.django.jQuery(group).djangoFormset()
+        })
+    }
+
+    initInputs(target) {
+        this.datepicker = new Datepicker(target)
+        this.range = new Range(null, null, target)
+        this.multiselect = new Multiselect(null, null, target)
+        this.radio = new Radio(null, target)
     }
 
     handleLocationHashFromTabs() {
-        if(window.location.hash) {
+        if (window.location.hash) {
             document.querySelector(`#tab_${window.location.hash.slice(1)}`)?.click()
         }
         const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]:not([data-bs-disable-history])')
@@ -102,7 +200,7 @@ class Main {
 
     fileDownload(event) {
         const button = event.target.closest('.js-file-button')
-        if(button) {
+        if (button) {
             event.preventDefault()
             event.stopPropagation()
             const download_window = window.open(button.getAttribute("href"))
@@ -118,34 +216,45 @@ class Main {
         const dropdowns = [].slice.call(target.querySelectorAll('[data-bs-toggle="dropdown"]'))
         dropdowns.map((dropdownToggleEl) => {
             let offset = dropdownToggleEl.dataset['bsOffset']
-            if(offset) {
+            if (offset) {
                 offset = JSON.parse(dropdownToggleEl.dataset['bsOffset'])
+            } else {
+                offset = [0, 8]
             }
-            else {
-                offset = [0,8]
-            }
-            return new Dropdown(dropdownToggleEl, {
+            const dropdown = new Dropdown(dropdownToggleEl, {
                 autoClose: 'outside',
                 offset: offset,
                 popperConfig(defaultBsPopperConfig) {
                     const elementConf = {}
-                    if(dropdownToggleEl.dataset['bsPopperPlacement']) {
+                    if (dropdownToggleEl.dataset['bsPopperPlacement']) {
                         elementConf['placement'] = dropdownToggleEl.dataset['bsPopperPlacement']
                     }
-                    return { ...defaultBsPopperConfig, ...elementConf, strategy: 'fixed' }
+                    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
         })
     }
 
     initAliasName() {
+        if(!window.sb_admin_const) {
+            return
+        }
         const aliasGroup = document.getElementById(window.sb_admin_const.GLOBAL_FILTER_ALIAS_WIDGET_ID)
-        if(!aliasGroup) {
+        if (!aliasGroup) {
             return
         }
 
         const changeAliasName = () => {
-            const currentAlias = aliasGroup.querySelector('input[name="alias"]:checked')
+            const currentAlias = aliasGroup.querySelector('input.js-alias-domain-name-value:checked') ||
+                aliasGroup.querySelector('input[name="alias"]:checked')
             if (!currentAlias) {
                 return
             }
@@ -165,9 +274,9 @@ class Main {
         const saveStateEl = event.target.closest('.js-save-state')
         if (saveStateEl) {
             const isBsToggle = saveStateEl.dataset['bsToggle']
-            if(isBsToggle === 'collapse') {
+            if (isBsToggle === 'collapse') {
                 const expanded = saveStateEl.getAttribute('aria-expanded') === 'true'
-                setCookie(saveStateEl.id, expanded, expanded?1:0)
+                setCookie(saveStateEl.id, expanded, expanded ? 1 : 0)
             }
         }
     }
@@ -181,7 +290,7 @@ class Main {
     selectAll(event) {
         const wrapper = event.target.closest('.js-select-all-wrapper')
 
-        if(wrapper) {
+        if (wrapper) {
             const selectAll = event.target.closest('.js-select-all')
             const clearAll = event.target.closest('.js-clear-all')
             if (selectAll) {
@@ -216,17 +325,28 @@ class Main {
             const input = fileInput.querySelector('input[type="file"]')
             const delete_checkbox = fileInput.querySelector('input[type="checkbox"]')
             input?.addEventListener('change', e => {
-                if(delete_checkbox) {
+                if (delete_checkbox) {
                     delete_checkbox.checked = false
                 }
-                if(e.target.files[0]) {
+                if (e.target.files[0]) {
                     fileInput.classList.add('filled')
                     fileInput.querySelectorAll('.js-input-file-image').forEach(el => {
-                        el.src = URL.createObjectURL(e.target.files[0])
+                        const nameSplit= e.target.files[0].name.split('.')
+                        const extension = nameSplit[nameSplit.length - 1]
+                        if(['jpg', 'jpeg', 'png', 'svg', 'webp'].includes(extension)) {
+                            el.src = URL.createObjectURL(e.target.files[0])
+                            el.classList.add('border')
+                            return
+                        }
+                        el.classList.remove('border')
+                        if(window.sb_admin_const.SUPPORTED_FILE_TYPE_ICONS.includes(extension)) {
+                            el.src =  `${window.sb_admin_const.STATIC_BASE_PATH}/images/file_types/file-${extension}.svg`
+                            return
+                        }
+                        el.src =  `${window.sb_admin_const.STATIC_BASE_PATH}/images/file_types/file-other.svg`
                     })
                     fileInput.querySelector('.js-input-file-filename').innerHTML = e.target.files[0].name
-                }
-                else {
+                } else {
                     fileInput.classList.remove('filled')
                     fileInput.querySelector('.js-input-file-filename').innerHTML = ""
                 }
@@ -236,13 +356,51 @@ class Main {
             deleteButton?.addEventListener('click', () => {
                 input.value = ""
                 input.dispatchEvent(new Event('change'))
-                if(delete_checkbox) {
+                if (delete_checkbox) {
                     delete_checkbox.checked = true
                 }
             })
         })
     }
 
+    initCKEditor(target, config, force=false) {
+        if (!window.CKEDITOR) {
+            return
+        }
+        target = target || document
+        target.querySelectorAll('textarea[data-type="ckeditortype"]').forEach((textarea) => {
+            if( force || textarea.getAttribute("data-processed") == "0") {
+                if(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(target) {
+        if(!window.CKEDITOR) {
+            return
+        }
+        if(this.isDarkMode()) {
+            this.initCKEditor(target, {'contentsCss': '/static/sb_admin/css/ckeditor/ckeditor_content_dark.css', uiColor: '#000000'}, true)
+            return
+        }
+        this.initCKEditor(target, {'contentsCss':window.CKEDITOR.config.contentsCss}, true)
+    }
+
     clearFilter(inputId) {
         const fieldElem = document.querySelector(`#${inputId}`)
         fieldElem.value = ''
@@ -250,11 +408,119 @@ class Main {
         fieldElem.dispatchEvent(new CustomEvent('clear', {detail: {refresh: true}}))
     }
 
-    executeListAction(table_id, action_url, no_params) {
-        if(window.SBAdminTable && window.SBAdminTable[table_id]){
-            window.SBAdminTable[table_id].executeListAction(action_url, no_params)
-        } else{
-            window.location.href = action_url
+
+
+    executeListAction(table_id, action_url, no_params, open_in_new_tab = false) {
+        if (window.SBAdminTable && window.SBAdminTable[table_id]) {
+            window.SBAdminTable[table_id].executeListAction(action_url, no_params, open_in_new_tab)
+        } else {
+            if (open_in_new_tab) {
+                window.open(action_url, '_blank')
+            } else {
+                window.location.href = action_url
+            }
+        }
+    }
+    isCurrentlyCollapsed(parentWrapper) {
+        const collapseElements = parentWrapper.querySelectorAll('.collapse')
+        return Array.from(collapseElements).every(el => {
+            if(el.closest('.djn-empty-form')) {
+                return true
+            }
+            return !el.classList.contains('show')
+        })
+    }
+
+    updateCollapseAllButton(parentWrapper) {
+        const collapseAll = parentWrapper.querySelector('.collapse-all-stacked-inlines')
+        if (!collapseAll) return
+
+        const isCollapsed = this.isCurrentlyCollapsed(parentWrapper)
+        const expandText = `<svg class="mr-8"><use xlink:href="#View-grid-list"></use></svg><span>${window.sb_admin_translation_strings["expand"]}</span>`
+        const collapseText = `<svg class="mr-8"><use xlink:href="#List-checkbox"></use></svg><span>${window.sb_admin_translation_strings["collapse"]}</span>`
+
+        if (isCollapsed) {
+            collapseAll.classList.add('collapsed')
+            collapseAll.innerHTML = expandText
+        } else {
+            collapseAll.classList.remove('collapsed')
+            collapseAll.innerHTML = collapseText
+        }
+    }
+
+    initCollapseEventListeners() {
+        this.initCollapseAllButtons()
+
+        const debouncedUpdateCollapseAllButton = debounce((parentWrapper) => {
+            this.updateCollapseAllButton(parentWrapper)
+        }, 50)
+
+        document.addEventListener('shown.bs.collapse', (e) => {
+            const parentWrapper = e.target.closest('.djn-fieldset')
+            if (parentWrapper) {
+                debouncedUpdateCollapseAllButton(parentWrapper)
+            }
+        })
+        
+        document.addEventListener('hidden.bs.collapse', (e) => {
+            const parentWrapper = e.target.closest('.djn-fieldset')
+            if (parentWrapper) {
+                debouncedUpdateCollapseAllButton(parentWrapper)
+            }
+        })
+    }
+
+
+
+    initCollapseAllButtons() {
+        const collapseAllButtons = document.querySelectorAll('.collapse-all-stacked-inlines')
+        collapseAllButtons.forEach(button => {
+            const parentWrapper = button.closest('.djn-fieldset')
+            if (parentWrapper) {
+                this.updateCollapseAllButton(parentWrapper)
+            }
+        })
+    }
+
+    collapseStackedInlineButtons(event) {
+        const collapseStackedInline = event.target.closest('.js-collapse-stacked-inline')
+        if(collapseStackedInline) {
+            const collapseEl = event.target.closest('.djn-inline-form').querySelector('.collapse')
+            const instance = Collapse.getOrCreateInstance(collapseEl)
+            instance.toggle()
+            collapseStackedInline.setAttribute('aria-expanded', collapseStackedInline.getAttribute('aria-expanded') !== 'true')
+        }
+
+        const collapseAll = event.target.closest('.collapse-all-stacked-inlines')
+        if (collapseAll) {
+            event.preventDefault()
+            const parentWrapper = collapseAll.closest('.djn-fieldset')
+            const collapseElements = parentWrapper.querySelectorAll('.collapse')
+            const collapseTriggers = parentWrapper.querySelectorAll('.js-collapse-stacked-inline')
+            const isCurrentlyCollapsed = this.isCurrentlyCollapsed(parentWrapper)
+
+            collapseTriggers.forEach(el => {
+                if(el.closest('.djn-empty-form')) {
+                    return
+                }
+                if (isCurrentlyCollapsed) {
+                    el.setAttribute('aria-expanded', 'true')
+                } else {
+                    el.setAttribute('aria-expanded', 'false')
+                }
+            })
+
+            collapseElements.forEach(el => {
+                if(el.closest('.djn-empty-form')) {
+                    return
+                }
+                const instance = Collapse.getOrCreateInstance(el)
+                if (isCurrentlyCollapsed) {
+                    instance.show()
+                } else {
+                    instance.hide()
+                }
+            })
         }
     }
 }
@@ -262,3 +528,12 @@ class Main {
 window.addEventListener('DOMContentLoaded', () => {
     window.SBAdmin = new Main()
 })
+
+document.body.addEventListener('sbadmin:modal-change-form-response', function (event) {
+    if (event.detail.reload) {
+        window.location.reload()
+    }
+    if (event.detail.loadUrl) {
+        window.location.href = event.detail.loadUrl
+    }
+})

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

@@ -1,37 +1,61 @@
+import {setDropdownLabel} from "./utils"
+
 export default class Multiselect {
-    constructor(selector_override, options_override) {
+    constructor(selector_override, options_override, target) {
+        target = target || document
         const selector = selector_override || '.js-simple-multiselect'
         const selectorDetail = '.js-simple-multiselect-detail'
+        const selectAllClass = 'js-simple-multiselect-all'
         this.wrapperSelector = '.js-simple-multiselect-wrapper'
-        document.addEventListener('change', e => {
-            const wrapperEl = e.target.closest(this.wrapperSelector)
-            const multiselectInput = wrapperEl?.querySelector(selector)
-            const isCheckboxClicked = e.target.type === 'checkbox'
-            if (multiselectInput && isCheckboxClicked) {
-                let checked = []
-                this.getCheckboxes(multiselectInput).forEach(el => {
-                    if (el.checked) {
-                        checked.push({
-                            value: el.value,
-                            label: el.dataset.label,
+        if(target === document) {
+            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(isCheckboxClicked) {
+                    const checkboxes = Array.from(this.getCheckboxes(multiselectInput))
+                    if(e.target.classList.contains(selectAllClass)) {
+                        checkboxes.forEach(el => {
+                            el.checked = e.target.checked
                         })
+                    } else {
+                        if(selectAllEl) {
+                            selectAllEl.checked = false
+                        }
+                    }
+                    if(selectAllEl && !checkboxes.some(el => el.checked)) {
+                        selectAllEl.checked = true
                     }
+                    let checked = []
+                    checkboxes.forEach(el => {
+                        if(el.checked) {
+                            checked.push({
+                                value: el.value,
+                                label: el.dataset.label,
+                            })
+                        }
+                    })
+                    multiselectInput.value = JSON.stringify(checked)
+                    multiselectInput.dispatchEvent(new Event('change', {bubbles: true}))
+                }
+            })
+            document.addEventListener('formset:added', (event) => {
+                event.target.querySelectorAll(selectorDetail).forEach(el => {
+                    this.initDetailMultiselect(el)
                 })
-                multiselectInput.value = JSON.stringify(checked)
-                multiselectInput.dispatchEvent(new Event('change', {bubbles: true}))
-            }
-        })
-        document.querySelectorAll(selector).forEach(el => {
+            })
+        }
+        target.querySelectorAll(selector).forEach(el => {
             this.initMultiselect(el, options_override)
         })
-        document.querySelectorAll(selectorDetail).forEach(el => {
+        target.querySelectorAll(selectorDetail).forEach(el => {
             this.initDetailMultiselect(el)
         })
-        document.addEventListener('formset:added', (event) => {
-            event.target.querySelectorAll(selectorDetail).forEach(el => {
-                this.initDetailMultiselect(el)
-            })
-        })
     }
 
     getCheckboxes(base_input) {
@@ -61,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/radio.js

@@ -0,0 +1,31 @@
+export default class Radio {
+    constructor(selector_override, target) {
+        target = target || document
+        const selector = selector_override || '.js-radio-choice-widget'
+        this.wrapperSelector = '.js-radio-choice-widget-wrapper'
+
+        target.querySelectorAll(selector).forEach(el => {
+            this.initRadio(el)
+        })
+    }
+
+    getRadios(base_input) {
+        return base_input.closest(this.wrapperSelector)?.querySelectorAll("input[type='radio']")
+    }
+
+    initRadio(base_input) {
+        base_input.addEventListener('SBTableFilterFormLoad', () => {
+            if (!base_input.value) {
+                return
+            }
+            this.getRadios(base_input).forEach(el => {
+                if(el.value === base_input.value) {
+                    el.checked = true
+                }
+            })
+        })
+        base_input.addEventListener('clear', () => {
+            base_input.closest(this.wrapperSelector)?.querySelectorAll("input[type='radio']").forEach(el => el.checked = false)
+        })
+    }
+}

django_smartbase_admin/static/sb_admin/src/js/range.js

@@ -1,9 +1,10 @@
 
 export default class Range {
-    constructor(selector_override, options_override) {
+    constructor(selector_override, options_override, target) {
+        target = target || document
         const selector = selector_override || '.js-range'
         this.separator = ' - '
-        document.querySelectorAll(selector).forEach(el => {
+        target.querySelectorAll(selector).forEach(el => {
             this.initRange(el, options_override)
         })
     }