corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

table filters and sorts functional

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-07-31 10:15:36 +01:00
parent 3909c08113
commit 6a09385dc4
5 changed files with 68 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/static/js/api.js
View File

@ -24,8 +24,8 @@ async function ajaxRequest(url, method, data) {
}
function makeQuerystring(filters, sort) {
console.log(JSON.stringify(filters, null, 4))
let querystring = "?";
console.log(JSON.stringify(filters), null, 4)
for (key in filters) {
querystring += `${key}=${filters[key]}&`;
}
@ -144,11 +144,9 @@ async function getFilterOptions() {
// Tracked Content
async function getTrackedContent(guildId, subscriptionId=null, page=1, pageSize=10, search="") {
var url = `/api/tracked-content/?subscription__guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}&ordering=-creation_datetime`;
if (subscriptionId)
url += `&subscription=${subscriptionId}`;
async function getTrackedContent(filters, sort) {
let querystring = makeQuerystring(filters, sort);
url = `/api/tracked-content/${querystring}`;
return await ajaxRequest(url, "GET");
}

35
apps/static/js/home/content.js
View File

@ -8,6 +8,7 @@ async function initContentTable() {
contentTable = $("#contentTable").DataTable({
info: false,
paging: false,
ordering: false,
searching: false,
autoWidth: false,
order: [],
@ -174,33 +175,39 @@ $("#contentTabPane").on("click", ".table-refresh-btn", async function() {
loadContent(getCurrentlyActiveServer().guild_id);
});
async function loadContent(guildId, page=1, pageSize=null, search=null) {
async function loadContent(guildId) {
if (!guildId)
return;
if (!pageSize)
pageSize = $("#contentTablePageSize").val();
if (!search)
search = $("#contentTabPane .table-searchbar").val();
setTableFilter("contentTable", "subscription__guild_id", guildId);
ensureTablePagination("contentTable");
$("#contentTabPane .table-del-btn").prop("disabled", true);
clearExistingContentRows();
try {
const content = await getTrackedContent(guildId, null, page, pageSize, search);
var content = await getTrackedContent(tableFilters["contentTable"], tableSorts["contentTable"]);
contentTable.rows.add(content.results).draw(false);
updateTablePagination("#contentTabPane .table-pagination", page, pageSize, content.count, content.next, content.previous);
updateTablePaginationInfo("#contentTabPane .table-page-info", content.results.length, content.count);
$("#contentTable thead .table-select-all").prop("disabled", content.results.length === 0);
}
catch (err) {
console.error(JSON.stringify(err, null, 4));
showToast("danger", `Error loading Tracked Content: HTTP ${err.status}`, err.responseJSON.message, 15000);
console.error(err);
showToast("danger", `Error loading Tracked Content: HTTP ${err.status}`, err, 15000);
return;
}
updateTableContainer(
"contentTabPane",
tableFilters["contentTable"]["page"],
tableFilters["contentTable"]["page_size"],
content.results.length,
content.count,
content.next,
content.previous
);
$("#contentTable thead .table-select-all").prop("disabled", content.results.length === 0);
console.debug(`loaded filters, ${content.results.length} found`)
}
$(document).on("selectedServerChange", async function() {

21
apps/static/js/home/filters.js
View File

@ -9,6 +9,7 @@ async function initFiltersTable() {
filtersTable = $("#filtersTable").DataTable({
info: false,
paging: false,
ordering: false,
searching: false,
autoWidth: false,
order: [],
@ -177,12 +178,12 @@ async function loadFilters(guildId) {
return;
setTableFilter("filtersTable", "guild_id", guildId);
ensureTablePagination("filtersTable");
$("#filtersTabPane .table-del-btn").prop("disabled", true);
clearExistingFilterRows();
try {
alert(JSON.stringify(tableFilters["filtersTable"], null, 4))
var contentFilters = await getFilters(tableFilters["filtersTable"], tableSorts["filtersTable"]);
filtersTable.rows.add(contentFilters.results).draw(false);
}
@ -192,16 +193,14 @@ async function loadFilters(guildId) {
return;
}
// shorthand
let filters = tableFilters["filtersTable"];
updateTablePagination(
"#filtersTabPane .table-pagination",
filters["page"], filters["page_size"], contentFilters.count, contentFilters.next, contentFilters.previous
);
updateTablePaginationInfo(
"#filtersTabPane .table-page-info",
contentFilters.results.length, contentFilters.count
updateTableContainer(
"filtersTabPane",
tableFilters["filtersTable"]["page"],
tableFilters["filtersTable"]["page_size"],
contentFilters.results.length,
contentFilters.count,
contentFilters.next,
contentFilters.previous
);
$("#filtersTable thead .table-select-all").prop("disabled", contentFilters.results.length === 0);

5
apps/static/js/home/subscriptions.js
View File

@ -339,12 +339,12 @@ async function loadSubscriptions(guildId) {
return;
setTableFilter("subTable", "guild_id", guildId);
ensureTablePagination("subTable");
$("#subscriptionsTabPane .table-del-btn").prop("disabled", true);
clearExistingSubRows();
try {
alert(JSON.stringify(tableFilters["subTable"], null, 4))
var subs = await getSubscriptions(tableFilters["subTable"], tableSorts["subTable"]);
subTable.rows.add(subs.results).draw(false);
}
@ -355,6 +355,7 @@ async function loadSubscriptions(guildId) {
}
updateTableContainer(
"subscriptionsTabPane",
tableFilters["subTable"]["page"],
tableFilters["subTable"]["page_size"],
subs.results.length,
@ -528,7 +529,7 @@ async function loadFilterOptions(guildId) {
$("#subFilters").val("").change();
try {
const filters = await getFilters(guildId);
const filters = await getFilters({guild_id: guildId});
console.log(JSON.stringify(filters));
filters.results.forEach(filter => {

34
apps/static/js/table.js
View File

@ -19,6 +19,17 @@ function setTableSorts(tableId, value) {
tableSorts[tableId] = value;
}
function ensureTablePagination(tableId) {
if (!tableFilters[tableId])
throw new Error(`${tableId} isn't a valid table ID`);
if (!tableFilters[tableId]["page"])
setTableFilter(tableId, "page", "1");
if (!tableFilters[tableId]["page_size"])
setTableFilter(tableId, "page_size", $(`#${tableId}`).closest(".tab-pane").find(".table-page-sizer").val());
}
async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc, deleteSelectedFunc, options=null) {
let pageSizeId = tableId + "PageSize";
searchId = tableId + "SearchBar";
@ -235,6 +246,7 @@ async function bindSearchBar(tableId, searchBarSelector, loadDataFunc) {
async function bindFilterDropdown(tableId, filterDropdownId, loadDataFunc) {
$(`#${filterDropdownId} .dropdown-menu`).on("change", "input", async function() {
setTableFilter(tableId, $(this).attr("data-key"), $(this).data("state"));
setTableFilter(tableId, "page", "1");
await loadDataFunc(getCurrentlyActiveServer().guild_id);
});
}
@ -298,9 +310,23 @@ function createTableControls(containingSelector, pageSizeId) {
});
}
function updateTableContainer(containerSelector, page, pageSize, itemsCount, totalItemsCount, nextExists, prevExists) {
updateTablePagination(containerSelector, page, pageSize, totalItemsCount, nextExists, prevExists);
updateTablePaginationInfo(containerSelector, itemsCount, totalItemsCount);
function updateTableContainer(containerId, page, pageSize, itemsCount, totalItemsCount, nextExists, prevExists) {
if (!page || !pageSize)
throw new Error(`Missing page data '${containerId}': page=${page} pageSize=${pageSize}`);
updateTablePagination(
`#${containerId} .table-pagination`,
page,
pageSize,
totalItemsCount,
nextExists,
prevExists
);
updateTablePaginationInfo(
`#${containerId} .table-page-info`,
itemsCount,
totalItemsCount
);
}
// Updates the pagination text for a given pageInfoId
@ -409,7 +435,7 @@ async function bindTablePagination(tableId, pageControlsId, dataLoadFunc) {
// Bind the table pagination page resizer control
async function bindTablePaginationResizer(tableId, resizerControlId, dataLoadFunc) {
$(resizerControlId).on("change", async function() {
setTableFilter(tableId, "page", 1);
setTableFilter(tableId, "page", "1");
setTableFilter(tableId, "page_size", $(this).val());
await dataLoadFunc(getCurrentlyActiveServer().guild_id);