First version of working filter.

app/Support/Request/ConvertsDataTypes.php

@@ -200,8 +200,8 @@ trait ConvertsDataTypes
         $validParameters = config(sprintf('firefly.allowed_filter_parameters.%s', $shortClass));
         $return = [];
         foreach($parameter as $key => $search) {
-            if(in_array($key, $validParameters) && strlen($search) <= 50) {
-                $return[$key] = trim($search);
+            if(in_array($key, $validParameters) && strlen((string)$search) <= 50) {
+                $return[$key] = trim((string)$search);
             }
         }
         return $return;

resources/assets/v3/js/pages/accounts/index.js

@@ -74,12 +74,12 @@ let index = function () {
         updateHistory() {
             if (history.pushState) {
 // TODO fix this.
-let obj = {
-    page: this.page,
-    column: this.sortColumn,
-    direction: this.sortDirection,
-    filter: this.filter
-};
+                let obj = {
+                    page: this.page,
+                    column: this.sortColumn,
+                    direction: this.sortDirection,
+                    filter: this.filter
+                };
                 let string = new URLSearchParams(obj).toString();
                 string = this.objectToQueryString(obj);
                 let newUrl =
@@ -87,11 +87,17 @@ let obj = {
                     "//" +
                     window.location.host +
                     window.location.pathname +
-                    "?" +string;
+                    "?" + string;
                 window.history.pushState({path: newUrl}, "", newUrl);
                 window.store.set(this.storageKey, {column: this.sortColumn, direction: this.sortDirection});
             }
         },
+        updateFilterValue(field, newValue) {
+            console.log('Update', field, newValue);
+            this.filter[field] = newValue;
+            this.updateHistory();
+            this.downloadAccounts();
+        },
         init() {
             this.anonymous = window.store.get("anonymous");
             this.handleFunc = this.handlePageClick.bind(this);
@@ -164,7 +170,7 @@ let obj = {
 
                 // add filterable click events.
                 document.querySelectorAll("table.sortable .search-button").forEach((el) => {
-                        el.addEventListener("click", () => {
+                    el.addEventListener("click", () => {
                         let column = el.dataset.column;
                         // hide search buttons etc.
                         el.classList.add('d-none');

resources/views/accounts/index.blade.php

@@ -18,11 +18,7 @@
                                                   :linkTitle="__('firefly.make_new_'. $objectType . '_account')"/>
                 <div class="card-body p-0">
                     <x-elements.alpine.page-navigation/>
-                    <div class="p-3 text-center" x-show="true === loadingNewSort">
-                        <div class="spinner-border spinner-border-sm" role="status">
-                            <span class="visually-hidden">{{ __('firefly.thinking') }}</span>
-                        </div>
-                    </div>
+
                     <table class="table table-valign-middle table-sm table-hover sortable">
                         <thead>
                         <tr>
@@ -35,7 +31,7 @@
                                 <span data-column="name" class="title">{{ trans('list.name') }}</span>
                                 <span data-column="name" class="search-spacer">&nbsp;</span><em data-column="name" class="search-button search-button-name bi bi-search"></em>
                                 <div data-column="name" class="search-filter search-filter-name d-none input-group">
-                                    <input type="search" x-model="filter.name" class="form-control form-control-sm" placeholder="Filter name...">
+                                    <input type="search" x-model="filter.name" x-init="$watch('filter.name', (value) => updateFilterValue('name', value))" class="filter-input form-control form-control-sm" placeholder="Filter name...">
                                     <button class="btn btn-outline-secondary btn-sm hide-button" data-column="name" type="button"><em class="bi bi-x text-danger"></em></button>
                                 </div>
                             </th>
@@ -83,6 +79,15 @@
                                 :class="{'w-15': true,'text-end': true, 'd-lg-table-cell': true, 'd-none': true, 'sortable': true, 'sortable_sorted': 'balance_difference' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('list.balanceDiff') }}</span></th>
                             <th>&nbsp;</th>
                         </tr>
+                        <tr x-show="true === loadingNewSort">
+                            <th colspan="12">
+                                <div class="p-3 text-center">
+                                    <div class="spinner-border spinner-border-sm" role="status">
+                                        <span class="visually-hidden">{{ __('firefly.thinking') }}</span>
+                                    </div>
+                                </div>
+                            </th>
+                        </tr>
                         </thead>
                         <tbody>
                         <template x-for="account in accounts" :key="account.id">