admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): reusable list-search JS + fp_portal_list_controls macro

Browse Source 
Adds the shared infrastructure for real-time multi-keyword search on
portal list pages:

- static/src/js/fp_portal_list_search.js — vanilla-JS IIFE that wires
  every input.o_fp_list_search to the container at the selector in
  its data-fp-target. On every keystroke, walks the container's
  direct children and toggles display: none based on whether each
  row's textContent contains all whitespace-tokenised keywords. Also
  wires .o_fp_sort_select dropdowns on every page EXCEPT Account
  Summary (scoped by .o_fp_account_summary closest-ancestor check) so
  the existing fp_portal_account_summary.js handler isn't doubled up.

- views/fp_portal_macros.xml — new t-call macro
  fusion_plating_portal.fp_portal_list_controls that renders the
  filter pills + search input + sort dropdown strip in one block.
  Callers pass filters, sorts, active_filter, active_sort, search,
  url, extra_qs, target, result_total, clipped via t-set.

- __manifest__.py — registers the new JS in web.assets_frontend
  (after fp_portal_account_summary.js). Version bumps 19.0.4.0.0 ->
  19.0.4.1.0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-18 00:06:02 -04:00
parent 281941c7ee
commit d9bdbd8e18
3 changed files with 149 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml
View File

@@ -201,6 +201,61 @@
</div>
</template>
<!-- ================================================================== -->
<!-- Reusable filter-pill + search + sort strip for portal list pages. -->
<!-- Render with t-call="fusion_plating_portal.fp_portal_list_controls" -->
<!-- and t-set the following vars in the call: -->
<!-- filters : list of (key, label) tuples for the pills -->
<!-- active_filter : the current filter key -->
<!-- sorts : list of (key, label) tuples for the sort dropdown-->
<!-- active_sort : the current sort key -->
<!-- search : current search string (for prefilling the input) -->
<!-- url : base path (e.g. '/my/jobs') -->
<!-- extra_qs : optional extra query-string suffix -->
<!-- target : CSS selector of the data-fp-filterable container -->
<!-- result_total : total record count (for the ">500" clip notice) -->
<!-- clipped : True if results were capped at 500 -->
<!-- ================================================================== -->
<template id="fp_portal_list_controls" name="FP Portal List Controls">
<div class="d-flex flex-wrap align-items-center gap-3 mb-3 o_fp_list_controls">
<!-- Filter pills -->
<div class="d-flex align-items-center gap-2" t-if="filters">
<span class="text-muted small">Showing:</span>
<t t-foreach="filters" t-as="f">
<a t-attf-href="#{url}?filter_state=#{f[0]}&amp;sortby=#{active_sort}#{extra_qs or ''}"
t-attf-class="o_fp_filter_pill #{'o_fp_filter_pill_active' if active_filter == f[0] else ''}"
t-out="f[1]"/>
</t>
</div>
<!-- Search input — real-time client-side filtering, no submit -->
<div class="ms-auto d-flex align-items-center gap-2"
t-att-style="'flex: 1 1 auto; max-width: 360px;' + ('' if filters else 'margin-left: 0 !important')">
<input type="search"
class="form-control form-control-sm o_fp_list_search"
placeholder="Search…"
t-att-value="search or ''"
t-att-data-fp-target="target"
autocomplete="off"/>
</div>
<!-- Sort dropdown — navigates on change (wired by fp_portal_list_search.js) -->
<select class="form-select form-select-sm o_fp_sort_select" style="max-width: 180px" t-if="sorts">
<t t-foreach="sorts" t-as="s">
<option t-att-value="url + '?filter_state=' + (active_filter or 'all') + '&amp;sortby=' + s[0] + (extra_qs or '')"
t-att-selected="active_sort == s[0]"
t-out="s[1]"/>
</t>
</select>
</div>
<!-- Clip notice: shown server-side when >500 records were found -->
<div class="o_fp_list_search_meta small text-muted mb-2" t-if="clipped">
Showing latest 500 of <span t-out="result_total"/> — refine your filter to narrow further.
</div>
<!-- Live count: shown by JS while the user is typing in the search box -->
<div class="o_fp_list_search_count small text-muted mb-2 d-none"/>
</template>
<!-- ================================================================== -->
<!-- Doc group (detail page) — pass label + docs list of dicts: -->
<!-- {label, sub, url, icon_class, pending} -->