triv: tabs are independent of each other and other tabs gets cleared, refactor

oko-x · oko-x · commit 05284e607606 · 2024-06-05T13:07:01.000+02:00
diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-smartbase-admin"
-version = "0.2.39"
+version = "0.2.40"
 description = ""
 authors = ["SmartBase <info@smartbase.sk>"]
 readme = "README.md"
diff --git a/src/django_smartbase_admin/engine/admin_base_view.py b/src/django_smartbase_admin/engine/admin_base_view.py
@@ -393,7 +393,7 @@ def get_tabulator_definition(self, request):
                 [
                     "advancedFilterModule",
                     "fullTextSearchModule",
-                    "filterOptionsModule",
+                    "headerTabsModule",
                 ]
             )
         return tabulator_definition
diff --git a/src/django_smartbase_admin/static/sb_admin/src/js/table.js b/src/django_smartbase_admin/static/sb_admin/src/js/table.js
@@ -9,7 +9,7 @@ import {AdvancedFilterModule} from "./table_modules/advanced_filter_module"
 import {MovableColumnsModule} from "./table_modules/movable_columns_module"
 import {DataEditModule} from "./table_modules/data_edit_module"
 import {FullTextSearchModule} from "./table_modules/full_text_search_module"
-import { FilterOptionsModule } from "./table_modules/filter_options_module"
+import { HeaderTabsModule } from "./table_modules/header_tabs_module"
 
 
 class SBAdminTable {
@@ -88,6 +88,7 @@ class SBAdminTable {
 
     refreshTableDataIfNotUrlLoad() {
         if (!this.loadingFromUrl) {
+            this.callModuleAction('beforeRefreshTableDataIfNotUrlLoad')
             // apply fixed height to prevent loosing scroll position
             this.tabulator.element.style.height = `${this.tabulator.element.offsetHeight}px`
             this.tabulator.setData().finally(() => {
@@ -285,5 +286,5 @@ window.SBAdminTableModulesClass = {
     'movableColumnsModule': MovableColumnsModule,
     'dataEditModule': DataEditModule,
     'fullTextSearchModule': FullTextSearchModule,
-    'filterOptionsModule': FilterOptionsModule,
+    'headerTabsModule': HeaderTabsModule,
 }
diff --git a/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/base_module.js b/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/base_module.js
@@ -27,6 +27,9 @@ export class SBAdminTableModule {
     getUrlParams() {
     }
 
+    beforeRefreshTableDataIfNotUrlLoad() {
+    }
+
     modifyTabulatorOptions(tabulatorOptions) {
         return tabulatorOptions
     }
diff --git a/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/filter_module.js b/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/filter_module.js
@@ -17,8 +17,8 @@ export class FilterModule extends SBAdminTableModule {
         const params = this.table.getParamsFromUrl()
         const filterData = params[this.table.constants.FILTER_DATA_NAME]
         document.querySelector(`#${this.table.filterFormId}`).reset()
-        document.querySelectorAll(`.filter-wrapper`).forEach((el)=>{
-            if(!el.hasAttribute('data-all-filters-visible')) {
+        document.querySelectorAll(`.filter-wrapper`).forEach((el) => {
+            if (!el.hasAttribute('data-all-filters-visible')) {
                 this.hideFilter(el.getAttribute('data-filter-input-name'))
             }
         })
@@ -41,15 +41,15 @@ export class FilterModule extends SBAdminTableModule {
 
     filterInputValueChanged(field) {
         const valueElem = filterInputValueChangedUtil(field)
-        if(!valueElem) {
+        if (!valueElem) {
             return
         }
         this.changeFilterButtonState(valueElem)
     }
 
     changeFilterButtonState(valueElem) {
         const dropdownButton = valueElem.closest('button')
-        if(valueElem.innerHTML) {
+        if (valueElem.innerHTML) {
             dropdownButton.classList.remove('empty')
             return
         }
@@ -71,13 +71,13 @@ export class FilterModule extends SBAdminTableModule {
     }
 
     focusOnFilterInput(filterElem) {
-        setTimeout(()=>{
+        setTimeout(() => {
             filterElem.children[0].click()
             filterElem.querySelector('input:not([type="hidden"])')?.focus()
-        },100)
+        }, 100)
     }
 
-    showFilter(field, focus=true) {
+    showFilter(field, focus = true) {
         const fieldElem = this.getFormField(field)
         const filterElem = document.querySelector(`#${this.table.viewId}-${field}-wrapper`)
         if (!filterElem) {
@@ -90,7 +90,7 @@ export class FilterModule extends SBAdminTableModule {
         }
         fieldElem.disabled = false
         filterElem.classList.remove('hidden')
-        if(focus){
+        if (focus) {
             this.focusOnFilterInput(filterElem)
         }
         this.table.refreshTableDataIfNotUrlLoad()
diff --git a/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/filter_options_module.js b/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/filter_options_module.js
diff --git a/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/header_tabs_module.js b/src/django_smartbase_admin/static/sb_admin/src/js/table_modules/header_tabs_module.js
@@ -0,0 +1,63 @@
+import {SBAdminTableModule} from "./base_module"
+import {filterInputValueChangedUtil} from "../utils"
+
+
+export class HeaderTabsModule extends SBAdminTableModule {
+    afterInit() {
+        const filterOptionsWrapper = document.querySelector(".js-filters-options")
+        const targetInput = document.querySelector(`[name=${this.table.constants.TABLE_PARAMS_SELECTED_FILTER_TYPE}]`)
+        if (!filterOptionsWrapper || !targetInput) {
+            return
+        }
+        filterOptionsWrapper.querySelectorAll('[data-bs-toggle]').forEach(el => {
+            el.addEventListener("show.bs.tab", (event) => {
+                const targetId = event.target.id
+                if (targetId !== 'tab_saved_views') {
+                    targetInput.value = event.target.id
+                }
+            })
+        })
+    }
+
+    beforeRefreshTableDataIfNotUrlLoad() {
+        const tabs = document.querySelectorAll('.tabulator-custom-header .tab-pane')
+        const tabSelectInput = document.querySelector(`[name=${this.table.constants.TABLE_PARAMS_SELECTED_FILTER_TYPE}]`)
+        tabs.forEach((tab) => {
+            if (tabSelectInput.value !== tab.getAttribute('aria-labelledby')) {
+                tab.querySelectorAll(`[form=${this.table.filterFormId}]`).forEach((input) => {
+                    if (input !== tabSelectInput) {
+                        input.value = ''
+                        filterInputValueChangedUtil(input)
+                        input.dispatchEvent(new CustomEvent('clearSelectedItems'))
+                    }
+                })
+            }
+        })
+        if (tabSelectInput.value !== "tab_advanced_filters") {
+            const queryBuilder = document.querySelector(`#${this.table.advancedFilterId}`)
+            const emptyRules = {
+                "condition": "AND",
+                "rules": [{empty: true}]
+            }
+            $(queryBuilder).queryBuilder("setRules", emptyRules)
+        }
+    }
+
+
+    loadFromUrlAfterInit() {
+        const targetInput = document.querySelector(`[name=${this.table.constants.TABLE_PARAMS_SELECTED_FILTER_TYPE}]`)
+        if (!targetInput) {
+            return
+        }
+        if (targetInput.value === "") {
+            const filterOptionsWrapper = document.querySelector(".js-filters-options")
+            targetInput.value = filterOptionsWrapper.querySelector('[data-bs-toggle="tab"]').id
+        }
+        const params = this.table.getParamsFromUrl()
+        const targetTabValue = params[this.table.constants.FILTER_DATA_NAME]?.[this.table.constants.TABLE_PARAMS_SELECTED_FILTER_TYPE]
+        if (targetTabValue) {
+            targetInput.value = targetTabValue
+        }
+        document.getElementById(targetInput.value).click()
+    }
+}
diff --git a/src/django_smartbase_admin/templates/sb_admin/components/filters_v2.html b/src/django_smartbase_admin/templates/sb_admin/components/filters_v2.html
@@ -43,7 +43,6 @@
                         operators: {{ content_context.advanced_filters_data.all_operators|safe }},
                         templates: {
                             group: function({ group_id, level, conditions, icons, settings, translate, builder }) {
-                                console.log(group_id, level, conditions, icons, settings, translate, builder)
                                 return `
                             <div id="${group_id}" class="rules-group-container">
                               <div class="rules-group-header">
@@ -108,4 +107,4 @@
             })
         </script>
     </div>
-{% endblock %}
+{% endblock %}

Original file line number	Diff line number	Diff line change
`@@ -393,7 +393,7 @@ def get_tabulator_definition(self, request):`
`393`	`393`	`[`
`394`	`394`	`"advancedFilterModule",`
`395`	`395`	`"fullTextSearchModule",`
`396`		`- "filterOptionsModule",`
	`396`	`+ "headerTabsModule",`
`397`	`397`	`]`
`398`	`398`	`)`
`399`	`399`	`return tabulator_definition`
Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,9 @@ export class SBAdminTableModule {`
`27`	`27`	`getUrlParams() {`
`28`	`28`	`}`
`29`	`29`
	`30`	`+ beforeRefreshTableDataIfNotUrlLoad() {`
	`31`	`+ }`
	`32`	`+`
`30`	`33`	`modifyTabulatorOptions(tabulatorOptions) {`
`31`	`34`	`return tabulatorOptions`
`32`	`35`	`}`