From 14cefb9495d2babc5a0bdd84762128e77a69b2c7 Mon Sep 17 00:00:00 2001 From: Pinga <121483313+getpinga@users.noreply.github.com> Date: Sun, 3 Dec 2023 21:22:00 +0200 Subject: [PATCH] Refactored domains page for huge sets of data --- cp/resources/views/admin/domains/view.twig | 8 +- cp/resources/views/partials/js-domains.twig | 90 ++++++++++++++++----- 2 files changed, 76 insertions(+), 22 deletions(-) diff --git a/cp/resources/views/admin/domains/view.twig b/cp/resources/views/admin/domains/view.twig index 914df3e..d14ad00 100644 --- a/cp/resources/views/admin/domains/view.twig +++ b/cp/resources/views/admin/domains/view.twig @@ -45,10 +45,10 @@
- - - - + + + +
Search: diff --git a/cp/resources/views/partials/js-domains.twig b/cp/resources/views/partials/js-domains.twig index 65dcde8..9299902 100644 --- a/cp/resources/views/partials/js-domains.twig +++ b/cp/resources/views/partials/js-domains.twig @@ -39,14 +39,79 @@ } return ""; } + + var searchTerm = ""; // global variable to hold the search term + + function updateSearchTerm(term) { + searchTerm = term; + table.replaceData(); + } table = new Tabulator("#domainTable", { - ajaxURL:"/api/records/domain?join=contact&join=domain_status", // Set the URL for your JSON data - ajaxConfig:"GET", - pagination:"local", - paginationSize:10, - ajaxResponse:function(url, params, response){ - return response.records; + pagination: true, + paginationMode: "remote", + paginationSize: 10, + ajaxURL: "/api/records/domain", + ajaxParams: { + join: "contact", + join: "domain_status" + }, + ajaxURLGenerator: function(url, config, params) { + var queryParts = ["join=contact", "join=domain_status"]; + + // Handle search term + if (searchTerm) { + queryParts.push("filter1=name,cs," + encodeURIComponent(searchTerm)); + queryParts.push("filter2=crdate,cs," + encodeURIComponent(searchTerm)); + queryParts.push("filter3=exdate,cs," + encodeURIComponent(searchTerm)); + } + + // Handle sorting + if (params.sorters && params.sorters.length) { + params.sorters.forEach(function(sorter) { + queryParts.push("order=" + sorter.field + "," + sorter.dir); + }); + } else { + queryParts.push("order=id"); // default sorting + } + + // Include pagination parameters + if (params.page) { + queryParts.push("page=" + params.page + "," + params.size); + } + + return url + "?" + queryParts.join("&"); + }, + ajaxResponse: function(url, params, response) { + if (response && Array.isArray(response.records) && typeof response.results === 'number') { + var lastPage = Math.ceil(response.results / this.options.paginationSize); + return { + last_page: lastPage, // Calculated total number of pages + data: response.records, // Data for the current page + }; + } else { + console.error('Unexpected response format', response); + return { last_page: 1, data: [] }; + } + }, + dataReceiveParams: { + "last_page": "results", // Mapping 'results' to 'last_page' + }, + sortMode: "remote", + columnSorted:function(column, dir, sorters){ + table.setData(); + }, + headerSortElement: function(column, dir){ + switch(dir){ + case "asc": + return ''; + break; + case "desc": + return ''; + break; + default: + return ''; + } }, layout:"fitDataFill", responsiveLayout: "collapse", @@ -67,18 +132,7 @@ }); var searchInput = document.getElementById("search-input"); searchInput.addEventListener("input", function () { - var term = searchInput.value; - - table.setFilter(function (data) { - // Convert data fields to strings and check if they include the term - return ( - String(data.name).toLowerCase().includes(term.toLowerCase()) || - String(data['registrant.identifier']).toLowerCase().includes(term.toLowerCase()) || - String(data.crdate).toLowerCase().includes(term.toLowerCase()) || - String(data.exdate).toLowerCase().includes(term.toLowerCase()) || - String(data.domain_status).toLowerCase().includes(term.toLowerCase()) - ); - }); + updateSearchTerm(searchInput.value); }); });