add pagination of cooked projects and caches on dashboard front page (#922)

1 files changed, 77 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/util/widgets.js b/src/zenserver/frontend/html/util/widgets.js
index 17bd2fde7..33d6755ac 100644
--- a/src/zenserver/frontend/html/util/widgets.js
+++ b/src/zenserver/frontend/html/util/widgets.js
@@ -402,6 +402,83 @@ export class ProgressBar extends Widget
 
 
 ////////////////////////////////////////////////////////////////////////////////
+export class Pager
+{
+	constructor(section, page_size, on_change)
+	{
+		this._page = 0;
+		this._page_size = page_size;
+		this._total = 0;
+		this._on_change = on_change;
+
+		const pager = section.tag().classify("module-pager").inner();
+		this._btn_prev = document.createElement("button");
+		this._btn_prev.className = "module-pager-btn";
+		this._btn_prev.textContent = "\u2190 Prev";
+		this._btn_prev.addEventListener("click", () => this._go_page(this._page - 1));
+		this._label = document.createElement("span");
+		this._label.className = "module-pager-label";
+		this._btn_next = document.createElement("button");
+		this._btn_next.className = "module-pager-btn";
+		this._btn_next.textContent = "Next \u2192";
+		this._btn_next.addEventListener("click", () => this._go_page(this._page + 1));
+		pager.appendChild(this._btn_prev);
+		pager.appendChild(this._label);
+		pager.appendChild(this._btn_next);
+		this._pager = pager;
+
+		this._update_ui();
+	}
+
+	prepend(element)
+	{
+		this._pager.insertBefore(element, this._btn_prev);
+	}
+
+	set_total(n)
+	{
+		this._total = n;
+		const max_page = Math.max(0, Math.ceil(n / this._page_size) - 1);
+		if (this._page > max_page)
+		{
+			this._page = max_page;
+		}
+		this._update_ui();
+	}
+
+	page_range()
+	{
+		const start = this._page * this._page_size;
+		const end = Math.min(start + this._page_size, this._total);
+		return { start, end };
+	}
+
+	_go_page(n)
+	{
+		const max = Math.max(0, Math.ceil(this._total / this._page_size) - 1);
+		this._page = Math.max(0, Math.min(n, max));
+		this._update_ui();
+		this._on_change();
+	}
+
+	_update_ui()
+	{
+		const total = this._total;
+		const page_count = Math.max(1, Math.ceil(total / this._page_size));
+		const start = this._page * this._page_size + 1;
+		const end = Math.min(start + this._page_size - 1, total);
+
+		this._btn_prev.disabled = this._page === 0;
+		this._btn_next.disabled = this._page >= page_count - 1;
+		this._label.textContent = total === 0
+			? "No items"
+			: `${start}\u2013${end} of ${total}`;
+	}
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////////
 export class WidgetHost
 {
 	constructor(parent, depth=1)