fix: make requests table filter case-insensitive

This commit is contained in:
mahdahar 2026-04-07 10:25:58 +07:00
parent 2aa2ef50f2
commit cec2289105
2 changed files with 18 additions and 3 deletions

View File

@ -137,13 +137,13 @@ $canUnval = $userLevel <= 1;
</tbody> </tbody>
</table> </table>
</template> </template>
<template x-if="!isLoading && !rows.length"> <template x-if="!isLoading && !filteredRows.length">
<div class="text-center py-10"> <div class="text-center py-10">
<i class="fa fa-inbox text-4xl mb-2 opacity-50"></i> <i class="fa fa-inbox text-4xl mb-2 opacity-50"></i>
<p>No records found</p> <p>No records found</p>
</div> </div>
</template> </template>
<template x-if="!isLoading && rows.length"> <template x-if="!isLoading && filteredRows.length">
<table class="table table-xs table-zebra w-full"> <table class="table table-xs table-zebra w-full">
<thead class="bg-base-100 sticky top-0 z-10"> <thead class="bg-base-100 sticky top-0 z-10">
<tr> <tr>
@ -204,7 +204,7 @@ $canUnval = $userLevel <= 1;
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<template x-for="req in rows" :key="req.SP_ACCESSNUMBER"> <template x-for="req in filteredRows" :key="req.SP_ACCESSNUMBER">
<tr class="hover:bg-base-300"> <tr class="hover:bg-base-300">
<td x-text="req.REQDATE" :class="statusRowBg[req.STATS]"></td> <td x-text="req.REQDATE" :class="statusRowBg[req.STATS]"></td>
<td x-text="req.Name" :class="statusRowBg[req.STATS]"></td> <td x-text="req.Name" :class="statusRowBg[req.STATS]"></td>

View File

@ -4,6 +4,7 @@ document.addEventListener('alpine:init', () => {
today: "", today: "",
filter: { date1: "", date2: "" }, filter: { date1: "", date2: "" },
rows: [], rows: [],
filteredRows: [],
isLoading: false, isLoading: false,
counters: { Pend: 0, Coll: 0, Recv: 0, Inc: 0, Fin: 0, Total: 0 }, counters: { Pend: 0, Coll: 0, Recv: 0, Inc: 0, Fin: 0, Total: 0 },
totalRows: 0, totalRows: 0,
@ -91,6 +92,19 @@ document.addEventListener('alpine:init', () => {
this.fetchList(); this.fetchList();
}, },
computeFilteredRows() {
const searchTerm = this.filterTable.trim().toLowerCase();
if (!searchTerm) {
this.filteredRows = this.rows;
return;
}
this.filteredRows = this.rows.filter(item =>
Object.values(item).some(value =>
String(value).toLowerCase().includes(searchTerm)
)
);
},
init() { init() {
this.today = new Date().toISOString().slice(0, 10); this.today = new Date().toISOString().slice(0, 10);
this.filter.date1 = this.today; this.filter.date1 = this.today;
@ -129,6 +143,7 @@ document.addEventListener('alpine:init', () => {
if (token !== this._fetchToken) return; if (token !== this._fetchToken) return;
this.rows = data.data ?? []; this.rows = data.data ?? [];
this.computeFilteredRows();
this.counters = data.counters ?? { Pend: 0, Coll: 0, Recv: 0, Inc: 0, Fin: 0, Total: 0 }; this.counters = data.counters ?? { Pend: 0, Coll: 0, Recv: 0, Inc: 0, Fin: 0, Total: 0 };
this.validatedCount = Number(data.validatedCount ?? 0); this.validatedCount = Number(data.validatedCount ?? 0);
const pagination = data.pagination ?? {}; const pagination = data.pagination ?? {};