IntenseFinance/firefly-iii
3
0 Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2026-11-03 04:40:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add and remove search input.

Browse Source
This commit is contained in:
James Cole committed 2026-09-28 08:13:35 +02:00
1 parent 31de53e21e
commit 085f79d7a9
3 files changed
+71 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/assets/v3/js/pages/accounts/index.js
+48 -10
View File
@@ -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;
resources/assets/v3/sass/app.scss
+4 -1
View File
@@ -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 {
resources/views/accounts/index.blade.php
+19 -11
View File
@@ -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>