Merge pull request #5847 from Laravel-Backpack/fix-filters

fix filter usage

Author: pxpm

src/resources/views/crud/components/datatable/datatable.blade.php

@@ -49,7 +49,7 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h
       data-persistent-table-duration="{{ $crud->getPersistentTableDuration() ?: '' }}"
       data-subheading="{{ $crud->getSubheading() ? 'true' : 'false' }}"
       data-reset-button="{{ ($crud->getOperationSetting('resetButton') ?? true) ? 'true' : 'false' }}"
-      data-modifies-url="{{ var_export($modifiesUrl ?? false) }}"
+      data-modifies-url="{{ ($modifiesUrl ?? false) ? 'true' : 'false' }}"
       data-has-export-buttons="{{ var_export($crud->get('list.exportButtons') ?? false) }}"
       data-default-page-length="{{ $crud->getDefaultPageLength() }}"
       data-page-length-menu="{{ json_encode($crud->getPageLengthMenu()) }}"

src/resources/views/crud/components/datatable/datatable_logic.blade.php

@@ -784,6 +784,7 @@ function resizeCrudTableColumnWidths() {
 document.addEventListener('backpack:filters:cleared', function (event) {       
     // Get the table ID from the event detail or default to the current table ID
     const tableId = event.detail && event.detail.tableId ? event.detail.tableId : 'crudTable';
+    
     if (!window.crud.tableConfigs[tableId]) return;
     
     const config = window.crud.tableConfigs[tableId];
@@ -835,9 +836,10 @@ function updateDatatablesOnFilterChange(filterName, filterValue, shouldUpdateUrl
     // Set the new URL for the table
     table.ajax.url(newUrl);
     
-    // Update the browser URL if needed
+    // Update the browser URL if needed - use browser URL, not AJAX URL
     if (shouldUpdateUrl) {
-        window.crud.updateUrl(newUrl);
+        let browserUrl = addOrUpdateUriParameter(window.location.href, filterName, filterValue);
+        tableConfig.updateUrl(browserUrl);
     }
     
     // Reload the table with the new URL if needed

src/resources/views/crud/inc/filters_navbar.blade.php

@@ -46,7 +46,10 @@ function addOrUpdateUriParameter(uri, parameter, value) {
                 new_url = new_url.addQuery(parameter, value);
             }
 
-            $('#remove_filters_button').toggleClass('invisible', !new_url.query());
+            // Update all remove filter buttons visibility
+            document.querySelectorAll('.remove_filters_button').forEach(function(button) {
+                button.classList.toggle('invisible', !new_url.query());
+            });
 
             return new_url.normalizeQuery().toString();
         }
@@ -66,18 +69,28 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa
             // Get the table instance based on the tableId
             let table = window.crud.tables[tableId] || window.crud.table;
             
+            if (!table) {
+                console.error('No table found for tableId:', tableId);
+                return;
+            }
+            
             // behaviour for ajax tables
-            let new_url = updatePageUrl(filterName, filterValue, table.ajax.url());
-            table.ajax.url(new_url);
+            let currentAjaxUrl = table.ajax.url();
+            let new_ajax_url = addOrUpdateUriParameter(currentAjaxUrl, filterName, filterValue);
+            
+            // Update the table's ajax URL
+            table.ajax.url(new_ajax_url);
+
+            let browser_url = updatePageUrl(filterName, filterValue, window.location.href);
 
             // when we are clearing ALL filters, we would not update the table url here, because this is done PER filter
             // and we have a function that will do this update for us after all filters had been cleared.
             if(update_url) {
-                // replace the datatables ajax url with new_url and reload it
-                callFunctionOnce(function() { refreshDatatablesOnFilterChange(new_url, tableId) }, debounce, 'refreshDatatablesOnFilterChange_' + tableId);
+                // replace the datatables ajax url with new_ajax_url and reload it
+                callFunctionOnce(function() { refreshDatatablesOnFilterChange(new_ajax_url, tableId) }, debounce, 'refreshDatatablesOnFilterChange_' + tableId);
             }
 
-            return new_url;
+            return new_ajax_url;
         }
     }
 
@@ -109,6 +122,11 @@ function refreshDatatablesOnFilterChange(url, tableId = 'crudTable')
             // Get the table instance based on the tableId
             let table = window.crud.tables[tableId] || window.crud.table;
             
+            if (!table) {
+                console.error('No table found for refresh, tableId:', tableId);
+                return;
+            }
+            
             // replace the datatables ajax url with new_url and reload it
             table.ajax.url(url).load();
         }
@@ -133,23 +151,27 @@ function refreshDatatablesOnFilterChange(url, tableId = 'crudTable')
                 return;
             }
 
-            document.addEventListener('backpack:filter:changed', function(event) {
+            // Add event listener only once per navbar to avoid duplication
+            if (!navbar.hasAttribute('data-filter-events-bound')) {
+                navbar.setAttribute('data-filter-events-bound', 'true');
+                
+                document.addEventListener('backpack:filter:changed', function(event) {
+                    // check if any of the filters are active
+                    let anyActiveFilters = false;
 
-                // check if any of the filters are active
-                let anyActiveFilters = false;
+                    filters.forEach(function(filter) {
+                        if (filter.classList.contains('active')) {
+                            anyActiveFilters = true;
+                        }
+                    });
 
-                filters.forEach(function(filter) {
-                    if (filter.classList.contains('active')) {
-                        anyActiveFilters = true;
+                    if(anyActiveFilters === true) {
+                        navbar.querySelector('.remove_filters_button').classList.remove('invisible');
+                    }else{
+                        navbar.querySelector('.remove_filters_button').classList.add('invisible');
                     }
                 });
-
-                if(anyActiveFilters === true) {
-                    navbar.querySelector('.remove_filters_button').classList.remove('invisible');
-                }else{
-                    navbar.querySelector('.remove_filters_button').classList.add('invisible');
-                }
-            });
+            }
             
             filters.forEach(function(filter) {
                 let initFunction = filter.getAttribute('filter-init-function');
@@ -200,6 +222,26 @@ function refreshDatatablesOnFilterChange(url, tableId = 'crudTable')
                             }
                         }));
                     });
+
+                    // After clearing filters, re-initialize them to ensure proper state
+                    setTimeout(function() {
+                        filters.forEach(function(filter) {
+                            let initFunction = filter.getAttribute('filter-init-function');
+                            if (window[initFunction]) {
+                                window[initFunction](filter, navbar);
+                            }
+                        });
+                    }, 50);
+
+                    // Force update the URL to remove all filter parameters after a short delay
+                    // to ensure all filters have processed the clear event
+                    setTimeout(function() {
+                        let currentUrl = window.location.href;
+                        let cleanUrl = URI(currentUrl).search('').toString();
+                        if (window.crud && window.crud.updateUrl) {
+                            window.crud.updateUrl(cleanUrl);
+                        }
+                    }, 100);
                 });
             }