Merge branch 'main' into sb/memory-cid-storesb/memory-cid-store

1 files changed, 62 insertions, 2 deletions

diff --git a/src/zenserver/frontend/html/util/widgets.js b/src/zenserver/frontend/html/util/widgets.js
index 33d6755ac..b8fc720c1 100644
--- a/src/zenserver/frontend/html/util/widgets.js
+++ b/src/zenserver/frontend/html/util/widgets.js
@@ -6,6 +6,14 @@ import { Component } from "./component.js"
 import { Friendly } from "../util/friendly.js"
 
 ////////////////////////////////////////////////////////////////////////////////
+export function flash_highlight(element)
+{
+	if (!element) { return; }
+	element.classList.add("pager-search-highlight");
+	setTimeout(() => { element.classList.remove("pager-search-highlight"); }, 1500);
+}
+
+////////////////////////////////////////////////////////////////////////////////
 class Widget extends Component
 {
 }
@@ -404,12 +412,14 @@ export class ProgressBar extends Widget
 ////////////////////////////////////////////////////////////////////////////////
 export class Pager
 {
-	constructor(section, page_size, on_change)
+	constructor(section, page_size, on_change, search_fn)
 	{
 		this._page = 0;
 		this._page_size = page_size;
 		this._total = 0;
 		this._on_change = on_change;
+		this._search_fn = search_fn || null;
+		this._search_input = null;
 
 		const pager = section.tag().classify("module-pager").inner();
 		this._btn_prev = document.createElement("button");
@@ -422,6 +432,23 @@ export class Pager
 		this._btn_next.className = "module-pager-btn";
 		this._btn_next.textContent = "Next \u2192";
 		this._btn_next.addEventListener("click", () => this._go_page(this._page + 1));
+
+		if (this._search_fn)
+		{
+			this._search_input = document.createElement("input");
+			this._search_input.type = "text";
+			this._search_input.className = "module-pager-search";
+			this._search_input.placeholder = "Search\u2026";
+			this._search_input.addEventListener("keydown", (e) =>
+			{
+				if (e.key === "Enter")
+				{
+					this._do_search(this._search_input.value.trim());
+				}
+			});
+			pager.appendChild(this._search_input);
+		}
+
 		pager.appendChild(this._btn_prev);
 		pager.appendChild(this._label);
 		pager.appendChild(this._btn_next);
@@ -432,7 +459,8 @@ export class Pager
 
 	prepend(element)
 	{
-		this._pager.insertBefore(element, this._btn_prev);
+		const ref = this._search_input || this._btn_prev;
+		this._pager.insertBefore(element, ref);
 	}
 
 	set_total(n)
@@ -461,6 +489,23 @@ export class Pager
 		this._on_change();
 	}
 
+	_do_search(term)
+	{
+		if (!term || !this._search_fn)
+		{
+			return;
+		}
+		const result = this._search_fn(term);
+		if (!result)
+		{
+			this._search_input.style.outline = "2px solid var(--theme_fail)";
+			setTimeout(() => { this._search_input.style.outline = ""; }, 1000);
+			return;
+		}
+		this._go_page(Math.floor(result.index / this._page_size));
+		flash_highlight(this._pager.parentNode.querySelector(`[zs_name="${CSS.escape(result.name)}"]`));
+	}
+
 	_update_ui()
 	{
 		const total = this._total;
@@ -474,6 +519,21 @@ export class Pager
 			? "No items"
 			: `${start}\u2013${end} of ${total}`;
 	}
+
+	static make_search_fn(get_data, get_key)
+	{
+		return (term) => {
+			const t = term.toLowerCase();
+			const data = get_data();
+			const i = data.findIndex(item => get_key(item).toLowerCase().includes(t));
+			return i < 0 ? null : { index: i, name: get_key(data[i]) };
+		};
+	}
+
+	static loading(section)
+	{
+		return section.tag().classify("pager-loading").text("Loading\u2026").inner();
+	}
 }