From c78dd9c2e78d463b9353ef730329cc7626eb7fcd Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Wed, 6 Nov 2024 16:06:31 +0000
Subject: [PATCH 1/5] wip

---
 src/app/View/Components/FiltersNavbar.php     |  27 ++++
 .../views/crud/inc/datatables_logic.blade.php |  39 ++++-
 .../views/crud/inc/filters_navbar.blade.php   |  32 ++---
 src/resources/views/crud/list.blade.php       |   2 +-
 .../ui/components/filters-navbar.blade.php    | 133 ++++++++++++++++++
 5 files changed, 210 insertions(+), 23 deletions(-)
 create mode 100644 src/app/View/Components/FiltersNavbar.php
 create mode 100644 src/resources/views/ui/components/filters-navbar.blade.php

diff --git a/src/app/View/Components/FiltersNavbar.php b/src/app/View/Components/FiltersNavbar.php
new file mode 100644
index 0000000000..c628213651
--- /dev/null
+++ b/src/app/View/Components/FiltersNavbar.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Backpack\CRUD\app\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class FiltersNavbar extends Component
+{
+    public $crud;
+    /**
+     * Create a new component instance.
+     */
+    public function __construct($crud)
+    {
+        $this->crud = $crud;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return backpack_view('components.filters-navbar');
+    }
+}
diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php
index befd31c474..e8bbdf1a9c 100644
--- a/src/resources/views/crud/inc/datatables_logic.blade.php
+++ b/src/resources/views/crud/inc/datatables_logic.blade.php
@@ -281,10 +281,47 @@ functionsToRunOnDataTablesDrawEvent: [],
             "<'table-footer row mt-2 d-print-none align-items-center '<'col-sm-12 col-md-4'l><'col-sm-0 col-md-4 text-center'B><'col-sm-12 col-md-4 'p>>",
       }
   }
-  </script>
+  </script> 
   @include('crud::inc.export_buttons')
 
   <script type="text/javascript">
+    // listen to `Backpack:filters-cleared` event
+    document.addEventListener('Backpack:filters-cleared', function (event) {
+        // behaviour for ajax table
+        var new_url = '{{ url($crud->getOperationSetting("datatablesUrl").'/search') }}';
+        var ajax_table = $("#crudTable").DataTable();
+
+        // replace the datatables ajax url with new_url and reload it
+        ajax_table.ajax.url(new_url).load();
+
+        // clear all filters
+        $(".navbar-filters li[filter-name]").trigger('filter:clear');
+
+        // remove filters from URL
+        crud.updateUrl(new_url);
+    });
+
+    document.addEventListener('Backpack:filter-changed', function (event) {
+        let filterName = event.detail.filterName;
+        let filterValue = event.detail.filterValue;
+        let shouldUpdateUrl = event.detail.shouldUpdateUrl;
+        let debounce = event.detail.debounce;
+        let afterUpdateCallback = event.detail.afterUpdateCallback;
+
+        let new_url = updateDatatablesOnFilterChange(filterName, filterValue, filterValue || shouldUpdateUrl, debounce);
+
+        let extraOptions = Object.keys(event.detail).reduce((obj, key) => {
+            if (!['filterName', 'filterValue', 'shouldUpdateUrl', 'debounce', 'afterUpdateCallback'].includes(key)) {
+                obj[key] = event.detail[key];
+            }
+            return obj;
+        }, {});
+
+        if (afterUpdateCallback) {
+            afterUpdateCallback(new_url, extraOptions);
+        }
+    });
+
     jQuery(document).ready(function($) {
 
       window.crud.table = $("#crudTable").DataTable(window.crud.dataTableConfiguration);
diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php
index 1b629ba199..f4d3ceeff5 100644
--- a/src/resources/views/crud/inc/filters_navbar.blade.php
+++ b/src/resources/views/crud/inc/filters_navbar.blade.php
@@ -49,19 +49,19 @@ function addOrUpdateUriParameter(uri, parameter, value) {
 
             $('#remove_filters_button').toggleClass('invisible', !new_url.query());
 
-        return new_url.toString();
+        return normalizeAmpersand(new_url.toString());
+      }
 
+      function updatePageUrl(filterName, filterValue, currentUrl = null) {
+        currentUrl = currentUrl || window.location.href;
+        let newUrl = addOrUpdateUriParameter(window.location.href, filterName, filterValue);
+        crud.updateUrl(newUrl);
+        return newUrl;
       }
 
       function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) {
-        // behaviour for ajax table
-        var current_url = crud.table.ajax.url();
-        var new_url = addOrUpdateUriParameter(current_url, filterName, filterValue);
-
-        new_url = normalizeAmpersand(new_url);
-
-        // add filter to URL
-        crud.updateUrl(new_url);
+        // behaviour for ajax tables
+        var new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
         crud.table.ajax.url(new_url);
 
         // when we are clearing ALL filters, we would not update the table url here, because this is done PER filter
@@ -112,18 +112,8 @@ function normalizeAmpersand(string) {
       	$("#remove_filters_button").click(function(e) {
       		e.preventDefault();
 
-		    	// behaviour for ajax table
-		    	var new_url = '{{ url($crud->getOperationSetting("datatablesUrl").'/search') }}';
-		    	var ajax_table = $("#crudTable").DataTable();
-
-  				// replace the datatables ajax url with new_url and reload it
-  				ajax_table.ajax.url(new_url).load();
-
-  				// clear all filters
-  				$(".navbar-filters li[filter-name]").trigger('filter:clear');
-
-          // remove filters from URL
-          crud.updateUrl(new_url);
+		    	// emit a new custom Backpack:filter-removed event
+          document.dispatchEvent(new CustomEvent('Backpack:filters-cleared'));       
       	});
 
         // hide the Remove filters button when no filter is active
diff --git a/src/resources/views/crud/list.blade.php b/src/resources/views/crud/list.blade.php
index c0d3333dec..20773d54f7 100644
--- a/src/resources/views/crud/list.blade.php
+++ b/src/resources/views/crud/list.blade.php
@@ -51,7 +51,7 @@
 
         {{-- Backpack List Filters --}}
         @if ($crud->filtersEnabled())
-          @include('crud::inc.filters_navbar')
+          <x-backpack::filters-navbar :crud="$crud"/>
         @endif
 
         <div class="{{ backpack_theme_config('classes.tableWrapper') }}">
diff --git a/src/resources/views/ui/components/filters-navbar.blade.php b/src/resources/views/ui/components/filters-navbar.blade.php
new file mode 100644
index 0000000000..6b3388a457
--- /dev/null
+++ b/src/resources/views/ui/components/filters-navbar.blade.php
@@ -0,0 +1,133 @@
+<nav class="navbar navbar-expand-lg navbar-filters mb-0 py-0 shadow-none">
+    {{-- Brand and toggle get grouped for better mobile display --}}
+    <a class="nav-item d-none d-lg-block my-auto"><span class="la la-filter"></span></a>
+    <button class="navbar-toggler ms-3"
+            type="button"
+            data-toggle="collapse"  {{-- for Bootstrap v4 --}}
+            data-target="#bp-filters-navbar" {{-- for Bootstrap v4 --}}
+            data-bs-toggle="collapse"   {{-- for Bootstrap v5 --}}
+            data-bs-target="#bp-filters-navbar"   {{-- for Bootstrap v5 --}}
+            aria-controls="bp-filters-navbar"
+            aria-expanded="false"
+            aria-label="{{ trans('backpack::crud.toggle_filters') }}">
+        <span class="la la-filter"></span> {{ trans('backpack::crud.filters') }}
+    </button>
+
+    {{-- Collect the nav links, forms, and other content for toggling --}}
+    <div class="collapse navbar-collapse" id="bp-filters-navbar">
+        <ul class="nav navbar-nav">
+        {{-- THE ACTUAL FILTERS --}}
+                @foreach ($crud->filters() as $filter)
+                    @includeFirst($filter->getNamespacedViewWithFallbacks())
+                @endforeach
+        <li class="nav-item"><a href="#" id="remove_filters_button" class="nav-link {{ count(Request::input()) != 0 ? '' : 'invisible' }}"><i class="la la-eraser"></i> {{ trans('backpack::crud.remove_filters') }}</a></li>
+        </ul>
+    </div>{{-- /.navbar-collapse --}}
+</nav>
+  
+@push('crud_list_scripts')
+    @basset('https://unpkg.com/urijs@1.19.11/src/URI.min.js')
+    <script>
+    function addOrUpdateUriParameter(uri, parameter, value) {
+            var new_url = normalizeAmpersand(uri);
+
+            new_url = URI(new_url).normalizeQuery();
+
+            // this param is only needed in datatables persistent url redirector
+            // not when applying filters so we remove it.
+            if (new_url.hasQuery('persistent-table')) {
+                new_url.removeQuery('persistent-table');
+            }
+
+            if (new_url.hasQuery(parameter)) {
+            new_url.removeQuery(parameter);
+            }
+
+            if (value !== '' && value != null) {
+            new_url = new_url.addQuery(parameter, value);
+            }
+
+            $('#remove_filters_button').toggleClass('invisible', !new_url.query());
+
+        return normalizeAmpersand(new_url.toString());
+    }
+
+    function updatePageUrl(filterName, filterValue, currentUrl = null) {
+        currentUrl = currentUrl || window.location.href;
+        let newUrl = addOrUpdateUriParameter(window.location.href, filterName, filterValue);
+        crud.updateUrl(newUrl);
+        return newUrl;
+    }
+
+    function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) {
+        // behaviour for ajax tables
+        var new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
+        crud.table.ajax.url(new_url);
+
+        // 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) }, debounce, 'refreshDatatablesOnFilterChange');
+        }
+
+        return new_url;
+    }
+
+    /**
+     * calls the function func once within the within time window.
+     * this is a debounce function which actually calls the func as
+     * opposed to returning a function that would call func.
+     * 
+     * @param func    the function to call
+     * @param within  the time window in milliseconds, defaults to 300
+     * @param timerId an optional key, defaults to func
+     * 
+     * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery
+     */
+    function callFunctionOnce(func, within = 300, timerId = null) {
+        window.callOnceTimers = window.callOnceTimers || {};
+        timerId = timerId || func;
+        if (window.callOnceTimers[timerId]) {
+            clearTimeout(window.callOnceTimers[timerId]);
+        }
+        window.callOnceTimers[timerId] = setTimeout(func, within);
+    }
+
+    function refreshDatatablesOnFilterChange(url)
+    {
+        // replace the datatables ajax url with new_url and reload it
+        crud.table.ajax.url(url).load();
+    }
+
+
+    function normalizeAmpersand(string) {
+        return string.replace(/&amp;/g, "&").replace(/amp%3B/g, "");
+    }
+
+    // button to remove all filters
+    jQuery(document).ready(function($) {
+        $("#remove_filters_button").click(function(e) {
+            e.preventDefault();
+
+                // emit a new custom Backpack:filter-removed event
+        document.dispatchEvent(new CustomEvent('Backpack:filters-cleared'));       
+        });
+
+        // hide the Remove filters button when no filter is active
+        $(".navbar-filters li[filter-name]").on('filter:clear', function() {
+        var anyActiveFilters = false;
+        $(".navbar-filters li[filter-name]").each(function () {
+            if ($(this).hasClass('active')) {
+            anyActiveFilters = true;
+            // console.log('ACTIVE FILTER');
+            }
+        });
+
+        if (anyActiveFilters == false) {
+            $('#remove_filters_button').addClass('invisible');
+        }
+        });
+    });
+    </script>
+@endpush 
\ No newline at end of file

From 6c6dbafaefedcf10805e5f7379f07a4f5a898e7f Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Wed, 6 Nov 2024 16:40:29 +0000
Subject: [PATCH 2/5] wip

---
 .../ui/components/filters-navbar.blade.php    | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/resources/views/ui/components/filters-navbar.blade.php b/src/resources/views/ui/components/filters-navbar.blade.php
index 6b3388a457..7395f90d71 100644
--- a/src/resources/views/ui/components/filters-navbar.blade.php
+++ b/src/resources/views/ui/components/filters-navbar.blade.php
@@ -25,50 +25,50 @@
     </div>{{-- /.navbar-collapse --}}
 </nav>
   
-@push('crud_list_scripts')
+@push('after_scripts')
     @basset('https://unpkg.com/urijs@1.19.11/src/URI.min.js')
     <script>
     function addOrUpdateUriParameter(uri, parameter, value) {
-            var new_url = normalizeAmpersand(uri);
+        var new_url = normalizeAmpersand(uri);
 
-            new_url = URI(new_url).normalizeQuery();
+        new_url = URI(new_url).normalizeQuery();
 
-            // this param is only needed in datatables persistent url redirector
-            // not when applying filters so we remove it.
-            if (new_url.hasQuery('persistent-table')) {
-                new_url.removeQuery('persistent-table');
-            }
+        // this param is only needed in datatables persistent url redirector
+        // not when applying filters so we remove it.
+        if (new_url.hasQuery('persistent-table')) {
+            new_url.removeQuery('persistent-table');
+        }
 
-            if (new_url.hasQuery(parameter)) {
+        if (new_url.hasQuery(parameter)) {
             new_url.removeQuery(parameter);
-            }
+        }
 
-            if (value !== '' && value != null) {
+        if (value !== '' && value != null) {
             new_url = new_url.addQuery(parameter, value);
-            }
+        }
 
-            $('#remove_filters_button').toggleClass('invisible', !new_url.query());
+        $('#remove_filters_button').toggleClass('invisible', !new_url.query());
 
         return normalizeAmpersand(new_url.toString());
     }
 
     function updatePageUrl(filterName, filterValue, currentUrl = null) {
         currentUrl = currentUrl || window.location.href;
-        let newUrl = addOrUpdateUriParameter(window.location.href, filterName, filterValue);
+        let newUrl = addOrUpdateUriParameter(currentUrl, filterName, filterValue);
         crud.updateUrl(newUrl);
         return newUrl;
     }
 
     function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) {
         // behaviour for ajax tables
-        var new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
+        let new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
         crud.table.ajax.url(new_url);
 
         // 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) }, debounce, 'refreshDatatablesOnFilterChange');
+            // replace the datatables ajax url with new_url and reload it
+            callFunctionOnce(function() { refreshDatatablesOnFilterChange(new_url) }, debounce, 'refreshDatatablesOnFilterChange');
         }
 
         return new_url;
@@ -110,8 +110,8 @@ function normalizeAmpersand(string) {
         $("#remove_filters_button").click(function(e) {
             e.preventDefault();
 
-                // emit a new custom Backpack:filter-removed event
-        document.dispatchEvent(new CustomEvent('Backpack:filters-cleared'));       
+            // emit a new custom Backpack:filter-removed event
+            document.dispatchEvent(new CustomEvent('Backpack:filters-cleared'));       
         });
 
         // hide the Remove filters button when no filter is active
@@ -119,8 +119,7 @@ function normalizeAmpersand(string) {
         var anyActiveFilters = false;
         $(".navbar-filters li[filter-name]").each(function () {
             if ($(this).hasClass('active')) {
-            anyActiveFilters = true;
-            // console.log('ACTIVE FILTER');
+                anyActiveFilters = true;
             }
         });
 

From a719f19691b61eaf46fd1eb0e76d87ed6e718567 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Wed, 6 Nov 2024 16:40:52 +0000
Subject: [PATCH 3/5] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/View/Components/FiltersNavbar.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/View/Components/FiltersNavbar.php b/src/app/View/Components/FiltersNavbar.php
index c628213651..0505d29fd1 100644
--- a/src/app/View/Components/FiltersNavbar.php
+++ b/src/app/View/Components/FiltersNavbar.php
@@ -9,6 +9,7 @@
 class FiltersNavbar extends Component
 {
     public $crud;
+
     /**
      * Create a new component instance.
      */

From 8f0f4f65f746f1f7da1a283ce5a2fb0b71698294 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 10 Dec 2024 17:02:35 +0000
Subject: [PATCH 4/5] wip

---
 src/app/View/Components/FiltersNavbar.php     |   7 +-
 .../views/crud/inc/datatables_logic.blade.php |  30 +--
 .../views/crud/inc/filters_navbar.blade.php   | 135 ------------
 .../ui/components/filters-navbar.blade.php    | 198 ++++++++++++------
 4 files changed, 144 insertions(+), 226 deletions(-)
 delete mode 100644 src/resources/views/crud/inc/filters_navbar.blade.php

diff --git a/src/app/View/Components/FiltersNavbar.php b/src/app/View/Components/FiltersNavbar.php
index 0505d29fd1..c6272efe17 100644
--- a/src/app/View/Components/FiltersNavbar.php
+++ b/src/app/View/Components/FiltersNavbar.php
@@ -2,20 +2,23 @@
 
 namespace Backpack\CRUD\app\View\Components;
 
+use Backpack\CRUD\app\Library\CrudPanel\CrudPanel;
 use Closure;
 use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
 class FiltersNavbar extends Component
 {
-    public $crud;
+    public CrudPanel $crud;
+    public string $id;
 
     /**
      * Create a new component instance.
      */
-    public function __construct($crud)
+    public function __construct($crud, $id = null)
     {
         $this->crud = $crud;
+        $this->id = $id ?? 'filters-navbar-' . uniqid();
     }
 
     /**
diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php
index e8bbdf1a9c..68efb36a23 100644
--- a/src/resources/views/crud/inc/datatables_logic.blade.php
+++ b/src/resources/views/crud/inc/datatables_logic.blade.php
@@ -285,47 +285,31 @@ functionsToRunOnDataTablesDrawEvent: [],
   @include('crud::inc.export_buttons')
 
   <script type="text/javascript">
-    // listen to `Backpack:filters-cleared` event
-    document.addEventListener('Backpack:filters-cleared', function (event) {
+    // TODO: this needs to be agnostic per filter navbar as in the future hopefully we can have more than one 
+    // table in the same page and setup filters for each one.
+    document.addEventListener('backpack:filters:cleared', function (event) {       
         // behaviour for ajax table
         var new_url = '{{ url($crud->getOperationSetting("datatablesUrl").'/search') }}';
-        var ajax_table = $("#crudTable").DataTable();
+        var ajax_table = new DataTable('#crudTable');
 
         // replace the datatables ajax url with new_url and reload it
         ajax_table.ajax.url(new_url).load();
 
-        // clear all filters
-        $(".navbar-filters li[filter-name]").trigger('filter:clear');
-
         // remove filters from URL
-        crud.updateUrl(new_url);
+        crud.updateUrl(new_url);       
     });
 
-    document.addEventListener('Backpack:filter-changed', function (event) {
+    document.addEventListener('backpack:filter:changed', function (event) {
         let filterName = event.detail.filterName;
         let filterValue = event.detail.filterValue;
         let shouldUpdateUrl = event.detail.shouldUpdateUrl;
         let debounce = event.detail.debounce;
-        let afterUpdateCallback = event.detail.afterUpdateCallback;
-
-        let new_url = updateDatatablesOnFilterChange(filterName, filterValue, filterValue || shouldUpdateUrl, debounce);
-
-        let extraOptions = Object.keys(event.detail).reduce((obj, key) => {
-            if (!['filterName', 'filterValue', 'shouldUpdateUrl', 'debounce', 'afterUpdateCallback'].includes(key)) {
-                obj[key] = event.detail[key];
-            }
-            return obj;
-        }, {});
-
-        if (afterUpdateCallback) {
-            afterUpdateCallback(new_url, extraOptions);
-        }
+        updateDatatablesOnFilterChange(filterName, filterValue, filterValue || shouldUpdateUrl, debounce);
     });
 
     jQuery(document).ready(function($) {
 
       window.crud.table = $("#crudTable").DataTable(window.crud.dataTableConfiguration);
-
       window.crud.updateUrl(location.href);
 
       // move search bar
diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php
deleted file mode 100644
index f4d3ceeff5..0000000000
--- a/src/resources/views/crud/inc/filters_navbar.blade.php
+++ /dev/null
@@ -1,135 +0,0 @@
-<nav class="navbar navbar-expand-lg navbar-filters mb-0 py-0 shadow-none">
-      {{-- Brand and toggle get grouped for better mobile display --}}
-      <a class="nav-item d-none d-lg-block my-auto"><span class="la la-filter"></span></a>
-      <button class="navbar-toggler ms-3"
-              type="button"
-              data-toggle="collapse"  {{-- for Bootstrap v4 --}}
-              data-target="#bp-filters-navbar" {{-- for Bootstrap v4 --}}
-              data-bs-toggle="collapse"   {{-- for Bootstrap v5 --}}
-              data-bs-target="#bp-filters-navbar"   {{-- for Bootstrap v5 --}}
-              aria-controls="bp-filters-navbar"
-              aria-expanded="false"
-              aria-label="{{ trans('backpack::crud.toggle_filters') }}">
-        <span class="la la-filter"></span> {{ trans('backpack::crud.filters') }}
-      </button>
-
-      {{-- Collect the nav links, forms, and other content for toggling --}}
-      <div class="collapse navbar-collapse" id="bp-filters-navbar">
-        <ul class="nav navbar-nav">
-          {{-- THE ACTUAL FILTERS --}}
-    			@foreach ($crud->filters() as $filter)
-    				@includeFirst($filter->getNamespacedViewWithFallbacks())
-    			@endforeach
-          <li class="nav-item"><a href="#" id="remove_filters_button" class="nav-link {{ count(Request::input()) != 0 ? '' : 'invisible' }}"><i class="la la-eraser"></i> {{ trans('backpack::crud.remove_filters') }}</a></li>
-        </ul>
-      </div>{{-- /.navbar-collapse --}}
-  </nav>
-
-@push('crud_list_scripts')
-    @basset('https://unpkg.com/urijs@1.19.11/src/URI.min.js')
-    <script>
-      function addOrUpdateUriParameter(uri, parameter, value) {
-            var new_url = normalizeAmpersand(uri);
-
-            new_url = URI(new_url).normalizeQuery();
-
-            // this param is only needed in datatables persistent url redirector
-            // not when applying filters so we remove it.
-            if (new_url.hasQuery('persistent-table')) {
-                new_url.removeQuery('persistent-table');
-            }
-
-            if (new_url.hasQuery(parameter)) {
-              new_url.removeQuery(parameter);
-            }
-
-            if (value !== '' && value != null) {
-              new_url = new_url.addQuery(parameter, value);
-            }
-
-            $('#remove_filters_button').toggleClass('invisible', !new_url.query());
-
-        return normalizeAmpersand(new_url.toString());
-      }
-
-      function updatePageUrl(filterName, filterValue, currentUrl = null) {
-        currentUrl = currentUrl || window.location.href;
-        let newUrl = addOrUpdateUriParameter(window.location.href, filterName, filterValue);
-        crud.updateUrl(newUrl);
-        return newUrl;
-      }
-
-      function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) {
-        // behaviour for ajax tables
-        var new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
-        crud.table.ajax.url(new_url);
-
-        // 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) }, debounce, 'refreshDatatablesOnFilterChange');
-        }
-
-        return new_url;
-      }
-
-      /**
-       * calls the function func once within the within time window.
-       * this is a debounce function which actually calls the func as
-       * opposed to returning a function that would call func.
-       * 
-       * @param func    the function to call
-       * @param within  the time window in milliseconds, defaults to 300
-       * @param timerId an optional key, defaults to func
-       * 
-       * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery
-       */
-      if(typeof callFunctionOnce !== 'function') {
-        function callFunctionOnce(func, within = 300, timerId = null) {
-          window.callOnceTimers = window.callOnceTimers || {};
-          timerId = timerId || func;
-          if (window.callOnceTimers[timerId]) {
-            clearTimeout(window.callOnceTimers[timerId]);
-          }
-          window.callOnceTimers[timerId] = setTimeout(func, within);
-        }
-      }
-
-      function refreshDatatablesOnFilterChange(url)
-      {
-        // replace the datatables ajax url with new_url and reload it
-        crud.table.ajax.url(url).load();
-      }
-
-
-      function normalizeAmpersand(string) {
-        return string.replace(/&amp;/g, "&").replace(/amp%3B/g, "");
-      }
-
-      // button to remove all filters
-      jQuery(document).ready(function($) {
-      	$("#remove_filters_button").click(function(e) {
-      		e.preventDefault();
-
-		    	// emit a new custom Backpack:filter-removed event
-          document.dispatchEvent(new CustomEvent('Backpack:filters-cleared'));       
-      	});
-
-        // hide the Remove filters button when no filter is active
-        $(".navbar-filters li[filter-name]").on('filter:clear', function() {
-          var anyActiveFilters = false;
-          $(".navbar-filters li[filter-name]").each(function () {
-            if ($(this).hasClass('active')) {
-              anyActiveFilters = true;
-              // console.log('ACTIVE FILTER');
-            }
-          });
-
-          if (anyActiveFilters == false) {
-            $('#remove_filters_button').addClass('invisible');
-          }
-        });
-      });
-    </script>
-@endpush
diff --git a/src/resources/views/ui/components/filters-navbar.blade.php b/src/resources/views/ui/components/filters-navbar.blade.php
index 7395f90d71..10a9d46a50 100644
--- a/src/resources/views/ui/components/filters-navbar.blade.php
+++ b/src/resources/views/ui/components/filters-navbar.blade.php
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-filters mb-0 py-0 shadow-none">
+<nav class="navbar navbar-expand-lg navbar-filters mb-0 py-0 shadow-none" id="{{ $id }}">
     {{-- Brand and toggle get grouped for better mobile display --}}
     <a class="nav-item d-none d-lg-block my-auto"><span class="la la-filter"></span></a>
     <button class="navbar-toggler ms-3"
@@ -20,7 +20,7 @@
                 @foreach ($crud->filters() as $filter)
                     @includeFirst($filter->getNamespacedViewWithFallbacks())
                 @endforeach
-        <li class="nav-item"><a href="#" id="remove_filters_button" class="nav-link {{ count(Request::input()) != 0 ? '' : 'invisible' }}"><i class="la la-eraser"></i> {{ trans('backpack::crud.remove_filters') }}</a></li>
+        <li class="nav-item"><a href="#" class="nav-link remove_filters_button {{ count(Request::input()) != 0 ? '' : 'invisible' }}"><i class="la la-eraser"></i> {{ trans('backpack::crud.remove_filters') }}</a></li>
         </ul>
     </div>{{-- /.navbar-collapse --}}
 </nav>
@@ -28,50 +28,54 @@
 @push('after_scripts')
     @basset('https://unpkg.com/urijs@1.19.11/src/URI.min.js')
     <script>
-    function addOrUpdateUriParameter(uri, parameter, value) {
-        var new_url = normalizeAmpersand(uri);
+    if(typeof addOrUpdateUriParameter !== 'function') {
+        function addOrUpdateUriParameter(uri, parameter, value) {
+            let new_url = URI(uri).normalizeQuery();
+
+            // this param is only needed in datatables persistent url redirector
+            // not when applying filters so we remove it.
+            if (new_url.hasQuery('persistent-table')) {
+                new_url.removeQuery('persistent-table');
+            }
 
-        new_url = URI(new_url).normalizeQuery();
+            if (new_url.hasQuery(parameter)) {
+                new_url.removeQuery(parameter);
+            }
 
-        // this param is only needed in datatables persistent url redirector
-        // not when applying filters so we remove it.
-        if (new_url.hasQuery('persistent-table')) {
-            new_url.removeQuery('persistent-table');
-        }
+            if (value !== '' && value != null) {
+                new_url = new_url.addQuery(parameter, value);
+            }
 
-        if (new_url.hasQuery(parameter)) {
-            new_url.removeQuery(parameter);
-        }
+            $('#remove_filters_button').toggleClass('invisible', !new_url.query());
 
-        if (value !== '' && value != null) {
-            new_url = new_url.addQuery(parameter, value);
+            return new_url.normalizeQuery().toString();
         }
-
-        $('#remove_filters_button').toggleClass('invisible', !new_url.query());
-
-        return normalizeAmpersand(new_url.toString());
     }
 
-    function updatePageUrl(filterName, filterValue, currentUrl = null) {
-        currentUrl = currentUrl || window.location.href;
-        let newUrl = addOrUpdateUriParameter(currentUrl, filterName, filterValue);
-        crud.updateUrl(newUrl);
-        return newUrl;
+    if(typeof updatePageUrl !== 'function') {
+        function updatePageUrl(filterName, filterValue, currentUrl = null) {
+            currentUrl = currentUrl || window.location.href;
+            let newUrl = addOrUpdateUriParameter(currentUrl, filterName, filterValue);
+            crud.updateUrl(newUrl);
+            return newUrl;
+        }
     }
 
-    function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) {
-        // behaviour for ajax tables
-        let new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
-        crud.table.ajax.url(new_url);
+    if(typeof updateDatatablesOnFilterChange !== 'function') {
+        function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) {
+            // behaviour for ajax tables
+            let new_url = updatePageUrl(filterName, filterValue, crud.table.ajax.url());
+            crud.table.ajax.url(new_url);
+
+            // 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) }, debounce, 'refreshDatatablesOnFilterChange');
+            }
 
-        // 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) }, debounce, 'refreshDatatablesOnFilterChange');
+            return new_url;
         }
-
-        return new_url;
     }
 
     /**
@@ -85,47 +89,109 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa
      * 
      * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery
      */
-    function callFunctionOnce(func, within = 300, timerId = null) {
-        window.callOnceTimers = window.callOnceTimers || {};
-        timerId = timerId || func;
-        if (window.callOnceTimers[timerId]) {
-            clearTimeout(window.callOnceTimers[timerId]);
+    if(typeof callFunctionOnce !== 'function') {
+        function callFunctionOnce(func, within = 300, timerId = null) {
+            window.callOnceTimers = window.callOnceTimers || {};
+            timerId = timerId || func;
+            if (window.callOnceTimers[timerId]) {
+                clearTimeout(window.callOnceTimers[timerId]);
+            }
+            window.callOnceTimers[timerId] = setTimeout(func, within);
         }
-        window.callOnceTimers[timerId] = setTimeout(func, within);
     }
 
-    function refreshDatatablesOnFilterChange(url)
-    {
-        // replace the datatables ajax url with new_url and reload it
-        crud.table.ajax.url(url).load();
-    }
+    if(typeof refreshDatatablesOnFilterChange !== 'function') {
+        function refreshDatatablesOnFilterChange(url)
+        {
+            // replace the datatables ajax url with new_url and reload it
+            crud.table.ajax.url(url).load();
+        }
+    }   
 
+    // button to remove all filters
+    document.addEventListener('DOMContentLoaded', function () {
 
-    function normalizeAmpersand(string) {
-        return string.replace(/&amp;/g, "&").replace(/amp%3B/g, "");
-    }
+        // find all nav.navbar-filters
+        let filtersNavbar = document.querySelectorAll('.navbar-filters');
 
-    // button to remove all filters
-    jQuery(document).ready(function($) {
-        $("#remove_filters_button").click(function(e) {
-            e.preventDefault();
+        // if there are no navbars, return
+        if (!filtersNavbar.length) {
+            return;
+        }
 
-            // emit a new custom Backpack:filter-removed event
-            document.dispatchEvent(new CustomEvent('Backpack:filters-cleared'));       
-        });
+        // run the init function for each filter
+        filtersNavbar.forEach(function(navbar) {   
+            let filters = navbar.querySelectorAll('li[filter-init-function]');
 
-        // hide the Remove filters button when no filter is active
-        $(".navbar-filters li[filter-name]").on('filter:clear', function() {
-        var anyActiveFilters = false;
-        $(".navbar-filters li[filter-name]").each(function () {
-            if ($(this).hasClass('active')) {
-                anyActiveFilters = true;
+            if(filters.length === 0) {
+                return;
             }
-        });
 
-        if (anyActiveFilters == false) {
-            $('#remove_filters_button').addClass('invisible');
-        }
+            document.addEventListener('backpack:filter:changed', function(event) {
+
+                // check if any of the filters are active
+                let anyActiveFilters = false;
+
+                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');
+                }
+            });
+            
+            filters.forEach(function(filter) {
+                let initFunction = filter.getAttribute('filter-init-function');
+                if (window[initFunction]) {
+                    window[initFunction](filter, navbar);
+                }
+            });
+
+            if(filtersNavbar.length === 0) {
+                return;
+            }
+
+            let removeFiltersButton = navbar.querySelector('.remove_filters_button');
+            if (removeFiltersButton) {
+                removeFiltersButton.addEventListener('click', function(e) {
+                    e.preventDefault();
+
+                    document.dispatchEvent(new Event('backpack:filters:cleared', {
+                            detail: {
+                                navbar: navbar,
+                                filters: filters,
+                        }
+                    }));
+
+                    filters.forEach(function(filter) {
+                        filter.dispatchEvent(new CustomEvent('backpack:filter:clear', {
+                            detail: {
+                                clearAllFilters: true,
+                            }
+                        }));
+                    });
+                });
+            }
+
+            filters.forEach(function(filter) {
+                filter.addEventListener('backpack:filter:clear', function() {
+                    let anyActiveFilters = false;
+                    filters.forEach(function (filterInstance) {
+                        if (filterInstance.classList.contains('active')) {
+                            anyActiveFilters = true;
+                        }
+                    });
+
+                    if (anyActiveFilters === false) {
+                        removeFiltersButton?.classList.add('invisible');
+                    }
+                });
+            });
         });
     });
     </script>

From 49d8f33f98c42f4f922b699796b76dbc56f79a1e Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Fri, 13 Dec 2024 10:11:27 +0000
Subject: [PATCH 5/5] Apply fixes from StyleCI

[ci skip] [skip ci]
---
 src/app/View/Components/FiltersNavbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/View/Components/FiltersNavbar.php b/src/app/View/Components/FiltersNavbar.php
index c6272efe17..ebd1d9e689 100644
--- a/src/app/View/Components/FiltersNavbar.php
+++ b/src/app/View/Components/FiltersNavbar.php
@@ -18,7 +18,7 @@ class FiltersNavbar extends Component
     public function __construct($crud, $id = null)
     {
         $this->crud = $crud;
-        $this->id = $id ?? 'filters-navbar-' . uniqid();
+        $this->id = $id ?? 'filters-navbar-'.uniqid();
     }
 
     /**