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/chart.js

@@ -24,31 +24,16 @@ class SBAdminChart {
     }
 
     initChart() {
+        this.options.formId = this.options.formId || `${this.options.widgetId}-filter-form`
         const ctx = document.getElementById(`${this.options.widgetId}-chart`)
         this.chart = new Chart(ctx, {
             type: this.options.chartType,
             data: {},
-            options: {
-                scales: {
-                    x: {
-                        ticks: {
-                            font: {
-                                weight: 600,
-                            }
-                        }
-                    },
-                    y: {
-                        ticks: {
-                            font: {
-                                weight: 600,
-                            }
-                        }
-                    }
-                }
-            }
+            options: this.options.chartOptions || {},
+            plugins: this.options.chartPlugins || []
         })
         this.refreshData()
-        document.addEventListener("SBAdminReloadTableData", () => {
+        document.addEventListener(window.sb_admin_const.TABLE_RELOAD_DATA_EVENT_NAME, () => {
             this.refreshData()
         })
     }
@@ -63,7 +48,7 @@ class SBAdminChart {
     }
 
     refreshData() {
-        const filterForm = document.querySelector(`#${this.options.widgetId}-filter-form`)
+        const filterForm = document.getElementById(this.options.formId)
         const filterData = new FormData(filterForm).entries()
         const filterDataNotEmpty = {}
         for (const [key, value] of filterData) {
@@ -81,7 +66,7 @@ class SBAdminChart {
             .then(res => {
                 this.chart.data.labels = res.data.main.labels
                 this.chart.data.datasets = this.processDatasets(res.data.main.datasets)
-                if (this.chart.data.labels.length > 1) {
+                if (this.chart.data.labels.length >= 1) {
                     this.chart.canvas.classList.remove('!hidden')
                 } else {
                     this.chart.canvas.classList.add('!hidden')
@@ -112,11 +97,12 @@ class SBAdminChart {
                         }
                     })
                 }
+                this.chart.canvas.dispatchEvent(new CustomEvent('chartDataLoaded'))
             })
     }
 
     initFilters() {
-        filterInputValueChangeListener(`[form="${this.options.widgetId}-filter-form"]`, (event) => {
+        filterInputValueChangeListener(`[form="${this.options.formId}"]`, (event) => {
             this.refreshData()
             filterInputValueChangedUtil(event.target)
         })

django_smartbase_admin/static/sb_admin/src/js/choices.js

@@ -49,16 +49,29 @@ export const choicesJSOptions = (choiceInput) => ({
 })
 
 
+const getChoiceValueForInput = (currentValue) => {
+    let value = {
+        'value': currentValue.value,
+        'label': currentValue.label,
+    }
+    if(currentValue.customProperties?.create){
+        value['create'] = true
+    }
+    return value
+}
+
 export const choicesJSListeners = {
+    'selectItem': (item, inputEl) => {
+        if (!item) return
+        const choiceValue = [getChoiceValueForInput(item)]
+        inputEl.value = JSON.stringify(choiceValue)
+    },
     'addItem': (choicesJS, inputEl) => {
         const choiceValue = []
         let choicesJSValue = choicesJS.getValue()
         choicesJSValue = Array.isArray(choicesJSValue) ? choicesJSValue : [choicesJSValue]
         choicesJSValue.forEach(function (currentValue) {
-            choiceValue.push({
-                'value': currentValue.value,
-                'label': currentValue.label,
-            })
+            choiceValue.push(getChoiceValueForInput(currentValue))
         })
         inputEl.value = JSON.stringify(choiceValue)
     },
@@ -68,10 +81,7 @@ export const choicesJSListeners = {
         if (choicesJSValue !== undefined) {
             choicesJSValue = Array.isArray(choicesJSValue) ? choicesJSValue : [choicesJSValue]
             choicesJSValue.forEach(function (currentValue) {
-                choiceValue.push({
-                    'value': currentValue.value,
-                    'label': currentValue.label,
-                })
+                choiceValue.push(getChoiceValueForInput(currentValue))
             })
         }
         inputEl.value = JSON.stringify(choiceValue)

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

@@ -1,357 +1,133 @@
 import flatpickr from "flatpickr"
-import {monthToStr} from "flatpickr/dist/esm/utils/formatting"
 import {createIcon} from "./utils"
-// eslint-disable-next-line no-unused-vars
-const monthYearViewsPlugin = (fp) => {
-    const customViewsWrapper = document.createElement('div')
-    customViewsWrapper.classList.add('flatpickr-custom-views-wrapper')
+import {
+    createRadioInput,
+    customActionsPlugin,
+    monthYearViewsPlugin
+} from "./datepicker_plugins"
 
-    const customMonthsView = document.createElement('div')
-    customMonthsView.classList.add('flatpickr-custom-months-view', 'hidden')
 
-    const customYearsView = document.createElement('div')
-    customYearsView.classList.add('flatpickr-custom-years-view', 'hidden')
-
-    customViewsWrapper.append(customMonthsView)
-    customViewsWrapper.append(customYearsView)
-
-    const yearElHeight = 48
-    const yearScrollToElement = 106
-
-    let currentYearEl = null
-
-    const changeActiveView = (view) => {
-        switch (view) {
-            case 'months':
-                customMonthsView.classList.remove('hidden')
-                customYearsView.classList.add('hidden')
-                break
-            case 'years':
-                customMonthsView.classList.add('hidden')
-                customYearsView.classList.remove('hidden')
-                currentYearEl.parentNode.scrollTop = yearElHeight * yearScrollToElement
-                break
-            default:
-                customMonthsView.classList.add('hidden')
-                customYearsView.classList.add('hidden')
-        }
-    }
-
-    const selectMonth = (e) => {
-        fp.changeMonth(parseInt(e.target.dataset.month), false)
-        buildMonths()
-        buildYears()
-        changeActiveView()
-    }
-
-    const selectYear = (e) => {
-        fp.changeYear(parseInt(e.target.dataset.year), false)
-        buildMonths()
-        buildYears()
-        changeActiveView("months")
-    }
-
-    const yearInRange = (year, selectedYears) => {
-        if (selectedYears[0] && selectedYears[1]) {
-            return selectedYears[0] <= year && year <= selectedYears[1]
-        }
-        return selectedYears[0] === year
-    }
-
-    const monthInRange = (monthIndex, selectedMonths, selectedYears) => {
-        //range
-        if (selectedYears[0] && selectedYears[1]) {
-            if (selectedYears[0] === selectedYears[1]) {
-                if (selectedYears[0] === fp.currentYear) {
-                    return selectedMonths[0] <= monthIndex && monthIndex <= selectedMonths[1]
-                }
-                return false
-            }
-            if (selectedYears[0] === fp.currentYear && monthIndex >= selectedMonths[0]) {
-                return true
-            }
-            if (selectedYears[0] < fp.currentYear && fp.currentYear < selectedYears[1]) {
-                return true
-            }
-            if (selectedYears[1] === fp.currentYear && monthIndex <= selectedMonths[1]) {
-                return true
-            }
-            return false
+export default class Datepicker {
+    constructor(target) {
+        target = target || document
+        let documentLocale = document.documentElement.lang || 'default'
+        documentLocale = documentLocale.split('-')[0]
+        if (documentLocale === 'en') {
+            documentLocale = 'default'
         }
-
-        //single value
-        if (selectedYears[0] && !selectedYears[1]) {
-            if (selectedYears[0] === fp.currentYear && monthIndex === selectedMonths[0]) {
-                return true
-            }
+        flatpickr.localize(this.getLocale(documentLocale))
+        this.initWidgets(target)
+        if(target === document) {
+            document.addEventListener('formset:added', (e) => {
+                this.initWidgets(e.target)
+            })
         }
-
-        return false
     }
 
-    const buildBackButton = (backToView) => {
-        const back = document.createElement('div')
-        back.classList.add('flatpickr-back')
-        back.textContent = "Back"
-        fp._bind(back, 'click', (e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            changeActiveView(backToView)
-        })
-        return back
+    getLocale(locale) {
+        // eslint-disable-next-line no-undef
+        const l = require(`flatpickr/dist/l10n/${locale}.js`)
+        return l.default[locale]
     }
 
-    const buildMonths = () => {
-        customMonthsView.innerHTML = ''
-        const monthsHeader = fp.monthNav.cloneNode(true)
-        const yearEl = monthsHeader.querySelector('.flatpickr-current-month')
-        yearEl.innerHTML = fp.currentYear
-        fp._bind(yearEl, 'click', () => {
-            changeActiveView('years')
-        })
-
-        const prevYear = monthsHeader.querySelector('.flatpickr-prev-month')
-        const nextYear = monthsHeader.querySelector('.flatpickr-next-month')
-
-        prevYear.replaceChildren(createIcon('Left-small'))
-        nextYear.replaceChildren(createIcon('Right-small'))
-
-        fp._bind(prevYear, 'click', (e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            fp.changeYear(fp.currentYear - 1)
-            buildMonths()
-            buildYears()
-        })
-        fp._bind(nextYear, 'click', (e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            fp.changeYear(fp.currentYear + 1)
-            buildMonths()
-            buildYears()
-        })
-
-
-        const monthsContent = fp.innerContainer.cloneNode(true)
-        monthsContent.querySelector('.flatpickr-weekdays').remove()
-        const monthsContainer = monthsContent.querySelector('.dayContainer')
-        monthsContainer.innerHTML = ''
-
-        const selectedMonths = fp.selectedDates.map(date => {
-            return date.getMonth()
-        })
-        const selectedYears = fp.selectedDates.map(date => {
-            return date.getFullYear()
-        })
-
-        for (let i = 0; i < 12; i++) {
-            const month = document.createElement('span')
-            month.classList.add('flatpickr-day', 'flatpickr-month')
-            if (i === fp.now.getMonth() && fp.currentYear === fp.now.getFullYear()) {
-                month.classList.add('today')
-            }
-
-            if (monthInRange(i, selectedMonths, selectedYears)) {
-                month.classList.add('selected')
-            }
-
-            month.textContent = monthToStr(i, fp.shorthand, fp.l10n)
-            month.dataset.month = i.toString()
-            month.addEventListener("click", selectMonth)
-            monthsContainer.appendChild(month)
+    initFlatPickr(datePickerEl, options={}, optionsOverride={}) {
+        let sbadminDatepickerData = {}
+        if(datePickerEl.dataset.sbadminDatepicker) {
+            sbadminDatepickerData = JSON.parse(datePickerEl.dataset.sbadminDatepicker)
         }
 
-        customMonthsView.append(monthsHeader)
-        customMonthsView.append(monthsContent)
-        customMonthsView.append(buildBackButton())
-    }
-
-    const buildYears = () => {
-        customYearsView.innerHTML = ''
-        const yearsHeader = fp.monthNav.cloneNode(true)
-        const yearEl = yearsHeader.querySelector('.flatpickr-current-month')
-        yearEl.innerHTML = fp.currentYear
-
-        yearsHeader.querySelector('.flatpickr-prev-month').remove()
-        yearsHeader.querySelector('.flatpickr-next-month').remove()
-
-
-        const yearsContent = fp.innerContainer.cloneNode(true)
-        yearsContent.querySelector('.flatpickr-weekdays').remove()
-        yearsContent.querySelector('.flatpickr-days').classList.add('h-full', '-mr-8')
-
-        const yearsContainer = yearsContent.querySelector('.dayContainer')
-        yearsContainer.classList.add('overflow-auto', 'custom-scrollbar')
-        yearsContainer.innerHTML = ''
-
-        const currentYear = fp.now.getFullYear()
-        const selectedYears = fp.selectedDates.map(date => {
-            return date.getFullYear()
-        })
+        flatpickr(datePickerEl, {
+            onReady: (selectedDates, dateStr, instance) => {
+                instance.nextMonthNav?.replaceChildren(createIcon('Right-small'))
+                instance.prevMonthNav?.replaceChildren(createIcon('Left-small'))
 
-        for (let i = currentYear - 100; i <= currentYear + 100; i++) {
-            const year = document.createElement('span')
-            year.classList.add('flatpickr-day', 'flatpickr-year')
+                const isInTable = datePickerEl.closest('[data-filter-input-name]')
 
-            if (i === fp.now.getFullYear()) {
-                year.classList.add('today')
-                currentYearEl = year
-            }
-
-            if (yearInRange(i, selectedYears)) {
-                year.classList.add('selected')
-            }
-
-            year.textContent = i.toString()
-            year.dataset.year = i.toString()
-            year.addEventListener("click", selectYear)
-            yearsContainer.appendChild(year)
-        }
+                // 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()
+                })
 
-        customYearsView.append(yearsHeader)
-        customYearsView.append(yearsContent)
-        customYearsView.append(buildBackButton("months"))
-    }
 
-    const replaceOriginalMonths = () => {
-        const currentMonth = fp.monthNav.querySelector('.flatpickr-current-month')
-        currentMonth.innerHTML = ''
-        currentMonth.textContent = `${monthToStr(fp.currentMonth, fp.shorthand, fp.l10n)} ${fp.currentYear}`
-        return currentMonth
-    }
-
-    const build = () => {
-        fp.monthNav.parentNode.insertBefore(customViewsWrapper, fp.monthNav)
+                if(!isInTable){
+                    this.createClear(instance)
+                }
 
-        fp._bind(replaceOriginalMonths(), "click", (e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            changeActiveView('months')
+                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) {
+                // fix single day range
+                if(instance.config.mode === "range" && selectedDates.length === 1){
+                    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
         })
-
-        buildMonths()
-        buildYears()
-    }
-
-    return {
-        onReady: build,
-        onChange: [
-            replaceOriginalMonths,
-            buildMonths,
-            buildYears,
-        ],
-        onMonthChange: replaceOriginalMonths,
-        onYearChange: replaceOriginalMonths
-    }
-}
-
-// eslint-disable-next-line no-unused-vars
-const customActionsPlugin = (fp) => {
-
-    const dateFormat = 'd/m/Y'
-    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
+    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(fp.element.dataset.sbadminDatepicker, dateTimeReviver).shortcuts
-        el.classList.add('flatpickr-shortcuts')
+        const shortcuts = JSON.parse(datePickerEl.dataset.sbadminDatepickerShortcuts)
+        el.classList.add('flatpickr-shortcuts', 'dropdown-menu')
         el.addEventListener('change', (e) => {
-            const value = e.target.value
-            fp.setDate(shortcuts[value].value, true, dateFormat)
+            realInput.value = e.target.value
+            datePickerEl.value = e.target.nextElementSibling.innerText
         })
 
         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) {
+                datePickerEl.value = 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)
-    }
-
-
-    return {
-        onReady: createShortcuts,
-    }
-}
-
-
-export default class Datepicker {
-    constructor() {
-        let documentLocale = document.documentElement.lang || 'default'
-        if (documentLocale === 'en') {
-            documentLocale = 'default'
-        }
-        flatpickr.localize(this.getLocale(documentLocale))
-        this.initWidgets()
-
-        document.addEventListener('formset:added', () => {
-            this.initWidgets()
-        })
-    }
-
-    getLocale(locale) {
-        // eslint-disable-next-line no-undef
-        const l = require(`flatpickr/dist/l10n/${locale}.js`)
-        return l.default[locale]
+        datePickerEl.parentElement.append(el)
+        datePickerEl.readOnly = true
+        datePickerEl.dataset['bsToggle'] = "dropdown"
+        new window.bootstrap5.Dropdown(datePickerEl)
     }
 
     initWidgets(parentEl=null) {
         const datePickerSelector = {
             '.js-datepicker': {
-                dateFormat: "d.m.Y",
-                allowInput: true,
-                plugins: [
-                    monthYearViewsPlugin,
-                ]
-            },
-            '.js-datepicker-not-inline': {
-                mode: "range",
                 allowInput: true,
                 plugins: [
                     monthYearViewsPlugin,
-                ]
+                ],
             },
             '.js-datepicker-range': {
                 inline: true,
@@ -360,14 +136,14 @@ export default class Datepicker {
                 plugins: [
                     monthYearViewsPlugin,
                     customActionsPlugin
-                ]
+                ],
             },
             '.js-timepicker': {
                 enableTime: true,
                 noCalendar: true,
                 dateFormat: "H:i",
                 allowInput: true,
-                time_24hr: true
+                time_24hr: true,
             },
             '.js-datetimepicker': {
                 enableTime: true,
@@ -376,7 +152,7 @@ export default class Datepicker {
                 time_24hr: true,
                 plugins: [
                     monthYearViewsPlugin,
-                ]
+                ],
             }
         }
         if(!parentEl) {
@@ -384,26 +160,11 @@ export default class Datepicker {
         }
 
         Object.keys(datePickerSelector).forEach(selector => {
-            parentEl.querySelectorAll(selector).forEach(datePickerEl => {
-                let sbadminDatepickerData = {}
-                if(datePickerEl.dataset.sbadminDatepicker) {
-                    sbadminDatepickerData = JSON.parse(datePickerEl.dataset.sbadminDatepicker)
+            parentEl.querySelectorAll(`${selector}:not([type="hidden"])`).forEach(datePickerEl => {
+                if(datePickerEl.closest('.djn-empty-form')){
+                    return
                 }
-                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', () => {
-                            instance.clear()
-                        })
-                    },
-                    ...datePickerSelector[selector],
-                    ...sbadminDatepickerData.flatpickrOptions
-                })
+                this.initFlatPickr(datePickerEl, datePickerSelector[selector])
             })
         })
     }