Fix live search on Partner Dashboard clients

This commit is contained in:
A R R R Associates
2026-07-31 15:19:19 +05:30
parent f5bfdda775
commit a9bcaf7f0b
2 changed files with 124 additions and 38 deletions
@@ -45,7 +45,9 @@
<tbody class="divide-y divide-slate-100 bg-white">
{% for c in clients %}
{% set row_status = (c.status or 'active')|lower %}
<tr data-client-row data-search="{{ (c.client_code ~ ' ' ~ c.client_name ~ ' ' ~ (c.pan or '') ~ ' ' ~ (c.gstin or ''))|lower|e }}" data-status="{{ row_status|e }}">
<tr data-client-row
data-search="{{ (c.client_code ~ ' ' ~ c.client_name ~ ' ' ~ (c.pan or '') ~ ' ' ~ (c.gstin or ''))|lower|e }}"
data-status="{{ row_status|e }}">
<td class="whitespace-nowrap px-4 py-3 text-sm font-semibold text-slate-900">{{ c.client_code }}</td>
<td class="px-4 py-3 text-sm text-slate-800">{{ c.client_name }}</td>
<td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ c.pan or c.gstin or '-' }}</td>
@@ -53,49 +55,26 @@
<td class="px-4 py-3 text-center text-sm text-slate-700">{{ c.task_count }}</td>
<td class="px-4 py-3 text-center text-sm {% if c.overdue_count > 0 %}font-semibold text-red-700{% else %}text-slate-700{% endif %}">{{ c.overdue_count }}</td>
<td class="whitespace-nowrap px-4 py-3 text-sm">
{% if row_status == 'active' %}<span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700">Active</span>
{% elif row_status == 'archived' %}<span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Archived</span>
{% else %}<span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-medium text-slate-700">Inactive</span>{% endif %}
{% if row_status == 'active' %}
<span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700">Active</span>
{% elif row_status == 'archived' %}
<span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Archived</span>
{% else %}
<span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-medium text-slate-700">Inactive</span>
{% endif %}
</td>
<td class="whitespace-nowrap px-4 py-3 text-right">
<a href="{{ c.href }}" class="text-sm font-medium text-brand-700 hover:underline">Open</a>
</td>
<td class="whitespace-nowrap px-4 py-3 text-right"><a href="{{ c.href }}" class="text-sm font-medium text-brand-700 hover:underline">Open</a></td>
</tr>
{% else %}
<tr><td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No assigned clients found.</td></tr>
{% endfor %}
<tr data-no-results hidden><td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No clients match the search.</td></tr>
<tr data-no-results hidden>
<td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No clients match the search.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
(function () {
const root = document.querySelector('[data-partner-client-list]');
if (!root || root.dataset.ready === '1') return;
root.dataset.ready = '1';
const search = root.querySelector('[data-client-search]');
const status = root.querySelector('[data-client-status]');
const clear = root.querySelector('[data-client-clear]');
const scroll = root.querySelector('[data-client-scroll]');
const count = root.querySelector('[data-visible-count]');
const empty = root.querySelector('[data-no-results]');
const rows = Array.from(root.querySelectorAll('[data-client-row]'));
let timer;
function apply() {
const term = (search.value || '').trim().toLowerCase();
const wantedStatus = status.value;
let visible = 0;
rows.forEach((row) => {
const show = (!term || row.dataset.search.includes(term)) && (!wantedStatus || row.dataset.status === wantedStatus);
row.hidden = !show;
if (show) visible += 1;
});
count.textContent = visible + (visible === 1 ? ' client' : ' clients');
empty.hidden = visible !== 0;
scroll.scrollTop = 0;
}
search.addEventListener('input', () => { window.clearTimeout(timer); timer = window.setTimeout(apply, 250); });
status.addEventListener('change', apply);
clear.addEventListener('click', () => { search.value = ''; status.value = 'active'; apply(); search.focus(); });
apply();
})();
</script>
<script src="/static/js/partner_dashboard_clients.js" defer></script>