diff --git a/apps/static/js/api.js b/apps/static/js/api.js index 9f6da92..f3e1047 100644 --- a/apps/static/js/api.js +++ b/apps/static/js/api.js @@ -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"); } diff --git a/apps/static/js/home/content.js b/apps/static/js/home/content.js index 15448c7..d4b946f 100644 --- a/apps/static/js/home/content.js +++ b/apps/static/js/home/content.js @@ -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() { diff --git a/apps/static/js/home/filters.js b/apps/static/js/home/filters.js index d7449be..c6e83b8 100644 --- a/apps/static/js/home/filters.js +++ b/apps/static/js/home/filters.js @@ -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); diff --git a/apps/static/js/home/subscriptions.js b/apps/static/js/home/subscriptions.js index a1a6394..eb022a7 100644 --- a/apps/static/js/home/subscriptions.js +++ b/apps/static/js/home/subscriptions.js @@ -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 => { diff --git a/apps/static/js/table.js b/apps/static/js/table.js index d5bd0c5..add52c4 100644 --- a/apps/static/js/table.js +++ b/apps/static/js/table.js @@ -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);