table filters and sorts functional

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="") {
+async function getTrackedContent(filters, sort) {
-    var url = `/api/tracked-content/?subscription__guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}&ordering=-creation_datetime`;
+    let querystring = makeQuerystring(filters, sort);
-    if (subscriptionId)
+        url = `/api/tracked-content/${querystring}`;
-        url += `&subscription=${subscriptionId}`;
-
     return await ajaxRequest(url, "GET");
 }
 

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)
+    setTableFilter("contentTable", "subscription__guild_id", guildId);
-        pageSize = $("#contentTablePageSize").val();
+    ensureTablePagination("contentTable");
-
-    if (!search)
-        search = $("#contentTabPane .table-searchbar").val();
 
     $("#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));
+        console.error(err);
-        showToast("danger", `Error loading Tracked Content: HTTP ${err.status}`, err.responseJSON.message, 15000);
+        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() {

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
+    updateTableContainer(
-    let filters = tableFilters["filtersTable"];
+        "filtersTabPane",
-
+        tableFilters["filtersTable"]["page"],
-    updateTablePagination(
+        tableFilters["filtersTable"]["page_size"],
-        "#filtersTabPane .table-pagination",
+        contentFilters.results.length,
-        filters["page"], filters["page_size"], contentFilters.count, contentFilters.next, contentFilters.previous
+        contentFilters.count,
-    );
+        contentFilters.next,
-    updateTablePaginationInfo(
+        contentFilters.previous
-        "#filtersTabPane .table-page-info",
-        contentFilters.results.length, contentFilters.count
     );
 
     $("#filtersTable thead .table-select-all").prop("disabled", contentFilters.results.length === 0);

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 => {

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) {
+function updateTableContainer(containerId, page, pageSize, itemsCount, totalItemsCount, nextExists, prevExists) {
-    updateTablePagination(containerSelector, page, pageSize, totalItemsCount, nextExists, prevExists);
+    if (!page || !pageSize)
-    updateTablePaginationInfo(containerSelector, itemsCount, totalItemsCount);
+        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);