A R R R Associates
108 lines
2.9 KiB
JavaScript
108 lines
2.9 KiB
JavaScript
(() => {
|
|
"use strict";
|
|
|
|
const ROOT_SELECTOR = "[data-partner-client-list]";
|
|
|
|
function initialiseRoot(root) {
|
|
if (!(root instanceof Element) || root.dataset.liveFilterReady === "1") {
|
|
return;
|
|
}
|
|
|
|
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]"));
|
|
|
|
if (!search || !status || !clear || !count) {
|
|
return;
|
|
}
|
|
|
|
root.dataset.liveFilterReady = "1";
|
|
let debounceTimer = null;
|
|
|
|
function applyFilter() {
|
|
const term = String(search.value || "").trim().toLocaleLowerCase();
|
|
const wantedStatus = String(status.value || "").trim().toLocaleLowerCase();
|
|
let visible = 0;
|
|
|
|
rows.forEach((row) => {
|
|
const searchable = String(row.dataset.search || "").toLocaleLowerCase();
|
|
const rowStatus = String(row.dataset.status || "").toLocaleLowerCase();
|
|
const matchesText = !term || searchable.includes(term);
|
|
const matchesStatus = !wantedStatus || rowStatus === wantedStatus;
|
|
const shouldShow = matchesText && matchesStatus;
|
|
|
|
row.hidden = !shouldShow;
|
|
if (shouldShow) {
|
|
visible += 1;
|
|
}
|
|
});
|
|
|
|
count.textContent = `${visible} ${visible === 1 ? "client" : "clients"}`;
|
|
|
|
if (empty) {
|
|
empty.hidden = visible !== 0;
|
|
}
|
|
|
|
if (scroll) {
|
|
scroll.scrollTop = 0;
|
|
}
|
|
}
|
|
|
|
search.addEventListener("input", () => {
|
|
window.clearTimeout(debounceTimer);
|
|
debounceTimer = window.setTimeout(applyFilter, 200);
|
|
});
|
|
|
|
status.addEventListener("change", applyFilter);
|
|
|
|
clear.addEventListener("click", () => {
|
|
window.clearTimeout(debounceTimer);
|
|
search.value = "";
|
|
status.value = "active";
|
|
applyFilter();
|
|
search.focus();
|
|
});
|
|
|
|
applyFilter();
|
|
}
|
|
|
|
function initialiseWithin(scope = document) {
|
|
if (scope instanceof Element && scope.matches(ROOT_SELECTOR)) {
|
|
initialiseRoot(scope);
|
|
}
|
|
|
|
if (typeof scope.querySelectorAll === "function") {
|
|
scope.querySelectorAll(ROOT_SELECTOR).forEach(initialiseRoot);
|
|
}
|
|
}
|
|
|
|
function start() {
|
|
initialiseWithin(document);
|
|
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
mutation.addedNodes.forEach((node) => {
|
|
if (node instanceof Element) {
|
|
initialiseWithin(node);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
observer.observe(document.documentElement, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", start, { once: true });
|
|
} else {
|
|
start();
|
|
}
|
|
})();
|