From 085f79d7a9d582a221ecf5dbf8348e90b151820c Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Mon, 28 Sep 2026 08:13:35 +0200
Subject: [PATCH] Add and remove search input.

---
 .../assets/v3/js/pages/accounts/index.js      | 58 +++++++++++++++----
 resources/assets/v3/sass/app.scss             |  5 +-
 resources/views/accounts/index.blade.php      | 30 ++++++----
 3 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/resources/assets/v3/js/pages/accounts/index.js b/resources/assets/v3/js/pages/accounts/index.js
index c74782a4d8..c64c223626 100644
--- a/resources/assets/v3/js/pages/accounts/index.js
+++ b/resources/assets/v3/js/pages/accounts/index.js
@@ -22,14 +22,14 @@ import "../../boot/bootstrap.js";
 import sidebar from "../shared/sidebar.js";
 import dates from "../shared/dates.js";
 import Alpine from "alpinejs";
-import { getVariable } from "../../store/get-variable.js";
+import {getVariable} from "../../store/get-variable.js";
 import Put from "../../api/model/account/put.js";
 import Get from "../../api/model/account/get.js";
-import { format } from "date-fns";
+import {format} from "date-fns";
 import formatMoney from "../../util/format-money.js";
 import i18next from "i18next";
-import { addDrag } from "../shared/drag-and-droppable-rows.js";
-import { nextTick } from "alpinejs/src/nextTick.js";
+import {addDrag} from "../shared/drag-and-droppable-rows.js";
+import {nextTick} from "alpinejs/src/nextTick.js";
 
 window.enableDates = false;
 
@@ -67,8 +67,8 @@ let index = function () {
                     this.sortColumn +
                     "&direction=" +
                     this.sortDirection;
-                window.history.pushState({ path: newUrl }, "", newUrl);
-                window.store.set(this.storageKey, { column: this.sortColumn, direction: this.sortDirection });
+                window.history.pushState({path: newUrl}, "", newUrl);
+                window.store.set(this.storageKey, {column: this.sortColumn, direction: this.sortDirection});
             }
         },
         init() {
@@ -105,9 +105,11 @@ let index = function () {
             this.downloadAccounts();
             // get accounts by initial sort.
             document.addEventListener("alpine:initialized", () => {
-                document.querySelectorAll("table.sortable th.sortable").forEach((el) => {
+                // add sortable click events.
+                document.querySelectorAll("table.sortable th.sortable span.title").forEach((el) => {
                     el.addEventListener("click", (event) => {
-                        let newColumn = event.currentTarget.dataset.column;
+                        let parent = event.currentTarget.parentNode;
+                        let newColumn = parent.dataset.column;
                         if (newColumn === this.sortColumn) {
                             this.sortDirection = "asc" === this.sortDirection ? "desc" : "asc";
                         }
@@ -119,7 +121,43 @@ let index = function () {
                         this.downloadAccounts();
                     });
                 });
+
+                // hide search again
+                document.querySelectorAll("table.sortable .hide-button").forEach((el) => {
+                    el.addEventListener("click", (event) => {
+                        let column = el.dataset.column;
+                        // show search input again
+                        document.querySelector(`span.title[data-column="${column}"]`).classList.remove('d-none');
+                        document.querySelector(`span.search-spacer[data-column="${column}"]`).classList.remove('d-none');
+                        document.querySelector(`em.search-button[data-column="${column}"]`).classList.remove('d-none');
+                        document.querySelector(`div.search-filter[data-column="${column}"] input`).value = '';
+
+                        let input = document.querySelector(`div.search-filter[data-column="${column}"]`);
+                        input.classList.add('d-none');
+
+                        // TODO also clear the search filter!!!!
+                    });
+                });
+
+                // add filterable click events.
+                document.querySelectorAll("table.sortable .search-button").forEach((el) => {
+                        el.addEventListener("click", (event) => {
+                        let column = el.dataset.column;
+                        // hide search buttons etc.
+                        el.classList.add('d-none');
+                        document.querySelector(`span.title[data-column="${column}"]`).classList.add('d-none');
+                        document.querySelector(`span.search-spacer[data-column="${column}"]`).classList.add('d-none');
+
+                        // show search input
+                        let input = document.querySelector(`div.search-filter[data-column="${column}"]`);
+                        input.classList.remove('d-none');
+                        input.querySelector('input').focus();
+                    });
+                });
+
             });
+
+
             getVariable("listPageSize").then((listPageSize) => {
                 this.listPageSize = listPageSize;
                 addDrag();
@@ -129,7 +167,7 @@ let index = function () {
                             let item = e.detail[i];
                             if (item.order !== item.currentOrder) {
                                 // PUT new order to system.
-                                new Put().put({ order: item.order }, { id: item.id });
+                                new Put().put({order: item.order}, {id: item.id});
                                 // save new order as current order in the row.
                                 document
                                     .querySelector(`tr[data-id="${item.id}"]`)
@@ -292,7 +330,7 @@ let index = function () {
             if (null === date) {
                 return "";
             }
-            return format(new Date(date), i18next.t("config.date_time_fns_short", { lng: window.store.get("locale") }));
+            return format(new Date(date), i18next.t("config.date_time_fns_short", {lng: window.store.get("locale")}));
         },
         handlePageClick(e) {
             let link = e.currentTarget;
diff --git a/resources/assets/v3/sass/app.scss b/resources/assets/v3/sass/app.scss
index 9e45472206..50b9ce0a8e 100644
--- a/resources/assets/v3/sass/app.scss
+++ b/resources/assets/v3/sass/app.scss
@@ -52,7 +52,10 @@ $primary: #1e6581; // original
 @import "shepherd.js/dist/css/shepherd.css";
 
 // for sortable tables
-table.sortable thead th.sortable {
+table.sortable thead th.sortable span {
+    cursor: pointer;
+}
+.search-button {
     cursor: pointer;
 }
 table.sortable th.sortable.sortable_sorted.sortable_sorted_asc:after {
diff --git a/resources/views/accounts/index.blade.php b/resources/views/accounts/index.blade.php
index 7ea08cdf36..2a234449a2 100644
--- a/resources/views/accounts/index.blade.php
+++ b/resources/views/accounts/index.blade.php
@@ -28,39 +28,47 @@
                         <tr>
                             <th data-column="order"
                                 :class="{'w-5' : true,'sortable': true, 'sortable_sorted': 'order' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">
-                                &nbsp;
+                                <span>&nbsp;</span>
                             </th>
                             <th data-column="name"
-                                :class="{'w-20' : true,'sortable': true, 'sortable_sorted': 'name' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('list.name') }}</th>
+                                :class="{'w-20' : true,'sortable': true, 'sortable_sorted': 'name' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">
+                                <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" class="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>
+
                             <template x-if="'asset' === objectType">
                                 {{-- hide on LG and smaller. --}}
                                 <th data-column="role"
-                                    :class="{'d-lg-table-cell': true, 'd-none': true,'sortable': true, 'sortable_sorted': 'role' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('list.role') }}</th>
+                                    :class="{'d-lg-table-cell': true, 'd-none': true,'sortable': true, 'sortable_sorted': 'role' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('list.role') }}</span></th>
                             </template>
                             <template x-if="'liabilities' === objectType">
                                 <th data-column="account_type_id"
-                                    :class="{'sortable': true, 'sortable_sorted': 'account_type_id' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('list.liability_type') }}</th>
+                                    :class="{'sortable': true, 'sortable_sorted': 'account_type_id' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('list.liability_type') }}</span></th>
                             </template>
                             <template x-if="'liabilities' === objectType">
                                 <th data-column="liability_direction"
-                                    :class="{'sortable': true, 'sortable_sorted': 'liability_direction' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('form.liability_direction') }}</th>
+                                    :class="{'sortable': true, 'sortable_sorted': 'liability_direction' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('form.liability_direction') }}</span></th>
                             </template>
                             <template x-if="'liabilities' === objectType">
                                 <th data-column="liability_interest"
-                                    :class="{'sortable': true, 'sortable_sorted': 'liability_interest' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('list.interest') }}
+                                    :class="{'sortable': true, 'sortable_sorted': 'liability_interest' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('list.interest') }}</span>
                                     ({{ trans('list.interest_period') }})
                                 </th>
                             </template>
                             <th data-column="account_number_and_iban"
-                                :class="{'sortable': true, 'sortable_sorted': 'account_number_and_iban' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('form.account_number') }}</th>
+                                :class="{'sortable': true, 'sortable_sorted': 'account_number_and_iban' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('form.account_number') }}</span></th>
                             <template x-if="'liabilities' !== objectType">
                                 <th data-column="current_balance"
-                                    :class="{'text-end': true, 'sortable': true, 'sortable_sorted': 'current_balance' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('list.currentBalance') }}</th>
+                                    :class="{'text-end': true, 'sortable': true, 'sortable_sorted': 'current_balance' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('list.currentBalance') }}</span></th>
                             </template>
                             <template x-if="'liabilities' === objectType">
                                 <th data-column="debt_amount"
                                     :class="{'text-end': true, 'sortable': true, 'sortable_sorted': 'debt_amount' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">
-                                    {{ trans('firefly.left_in_debt') }}
+                                    <span class="title">{{ trans('firefly.left_in_debt') }}</span>
                                 </th>
                             </template>
                             <th {{-- hide on SM --}} class="d-md-table-cell d-none">{{ trans('list.active') }}</th>
@@ -68,11 +76,11 @@
                             <template x-if="'liabilities' !== objectType">
                                 {{-- hide on LG and smaller. --}}
                                 <th data-column="last_activity"
-                                    :class="{'d-lg-table-cell': true, 'd-none': true, 'sortable': true, 'sortable_sorted': 'last_activity' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }">{{ trans('list.lastActivity') }}</th>
+                                    :class="{'d-lg-table-cell': true, 'd-none': true, 'sortable': true, 'sortable_sorted': 'last_activity' === sortColumn, 'sortable_sorted_asc': 'asc' === sortDirection, 'sortable_sorted_desc': 'desc' === sortDirection }"><span class="title">{{ trans('list.lastActivity') }}</span></th>
                             </template>
                             {{-- hide on SM --}}
                             <th data-column="balance_difference"
-                                :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 }">{{ trans('list.balanceDiff') }}</th>
+                                :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>
                         </thead>