diff --git a/apps/static/js/api.js b/apps/static/js/api.js index 4004998..9f6da92 100644 --- a/apps/static/js/api.js +++ b/apps/static/js/api.js @@ -23,6 +23,15 @@ async function ajaxRequest(url, method, data) { } } +function makeQuerystring(filters, sort) { + let querystring = "?"; + console.log(JSON.stringify(filters), null, 4) + for (key in filters) { + querystring += `${key}=${filters[key]}&`; + } + return querystring += `ordering=${sort}`; +} + // Saved Guilds async function getSavedGuilds() { @@ -54,8 +63,9 @@ async function loadChannels(guildId) { // Subscriptions -async function getSubscriptions(guildId, page=1, pageSize=10, search="") { - const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`; +async function getSubscriptions(filters, sort) { + let querystring = makeQuerystring(filters, sort); + url = `/api/subscription/${querystring}`; return await ajaxRequest(url, "GET"); } @@ -105,8 +115,9 @@ async function deleteSubChannels(subscriptionId) { // Filters -async function getFilters(guildId, page=1, pageSize=10, search="") { - const url = `/api/filter/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`; +async function getFilters(filters, sort) { + let querystring = makeQuerystring(filters, sort); + url = `/api/filter/${querystring}`; return await ajaxRequest(url, "GET"); } diff --git a/apps/static/js/home/filters.js b/apps/static/js/home/filters.js index 092eacc..d7449be 100644 --- a/apps/static/js/home/filters.js +++ b/apps/static/js/home/filters.js @@ -172,34 +172,40 @@ $("#filtersTabPane").on("click", ".table-refresh-btn", async function() { loadFilters(getCurrentlyActiveServer().guild_id); }); -async function loadFilters(guildId, page=1, pageSize=null, search=null) { - +async function loadFilters(guildId) { if (!guildId) return; - if (!pageSize) - pageSize = $("#filtersTablePageSize").val(); - - if (!search) - search = $("#filtersTabPane .table-searchbar").val(); + setTableFilter("filtersTable", "guild_id", guildId); $("#filtersTabPane .table-del-btn").prop("disabled", true); clearExistingFilterRows(); try { - const filters = await getFilters(guildId, page, pageSize, search); - filtersTable.rows.add(filters.results).draw(false); - - updateTablePagination("#filtersTabPane .table-pagination", page, pageSize, filters.count, filters.next, filters.previous); - updateTablePaginationInfo("#filtersTabPane .table-page-info", filters.results.length, filters.count); - - $("#filtersTable thead .table-select-all").prop("disabled", filters.results.length === 0); + alert(JSON.stringify(tableFilters["filtersTable"], null, 4)) + var contentFilters = await getFilters(tableFilters["filtersTable"], tableSorts["filtersTable"]); + filtersTable.rows.add(contentFilters.results).draw(false); } catch (err) { console.error(err) - console.error(JSON.stringify(err, null, 4)); - showToast("danger", `Error Loading Filters: HTTP ${err.status}`, err.responseJSON.message, 15000); + showToast("danger", `Error Loading Filters: HTTP ${err.status}`, err, 15000); + 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 + ); + + $("#filtersTable thead .table-select-all").prop("disabled", contentFilters.results.length === 0); + console.debug(`loaded filters, ${contentFilters.results.length} found`); } $(document).ready(async function() { diff --git a/apps/static/js/home/subscriptions.js b/apps/static/js/home/subscriptions.js index 781e784..a1a6394 100644 --- a/apps/static/js/home/subscriptions.js +++ b/apps/static/js/home/subscriptions.js @@ -11,6 +11,7 @@ async function initSubscriptionTable() { subTable = $("#subTable").DataTable({ info: false, paging: false, + ordering: false, searching: false, autoWidth: false, order: [], @@ -60,18 +61,10 @@ async function initSubscriptionTable() { return `${data}`; } }, - // { - // title: "Content", - // data: "channels_count", - // render: function(data, type) { - - // } - // }, { title: "Created", data: "creation_datetime", render: function(data, type) { - // return new Date(data).toISOString().split("T")[0]; let dateTime = new Date(data); let dateTimeString = formatDate(dateTime); return $(` @@ -341,35 +334,37 @@ $("#subscriptionsTabPane").on("click", ".table-refresh-btn", async function() { loadSubscriptions(getCurrentlyActiveServer().guild_id); }); -async function loadSubscriptions(guildId, page=1, pageSize=null, search=null) { - - if (!guildId) +async function loadSubscriptions(guildId) { + if (!guildId) return; - if (!pageSize) - pageSize = $("#subTablePageSize").val(); - - if (!search) - search = $("#subscriptionsTabPane .table-searchbar").val(); + setTableFilter("subTable", "guild_id", guildId); $("#subscriptionsTabPane .table-del-btn").prop("disabled", true); clearExistingSubRows(); try { - const subscriptions = await getSubscriptions(guildId, page, pageSize, search); - subTable.rows.add(subscriptions.results).draw(false); - - updateTablePagination("#subscriptionsTabPane .table-pagination", page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous); - updateTablePaginationInfo("#subscriptionsTabPane .table-page-info", subscriptions.results.length, subscriptions.count); - - $("#subTable thead .table-select-all").prop("disabled", subscriptions.results.length === 0); - console.debug("loading subs, " + subscriptions.results.length + " found"); + alert(JSON.stringify(tableFilters["subTable"], null, 4)) + var subs = await getSubscriptions(tableFilters["subTable"], tableSorts["subTable"]); + subTable.rows.add(subs.results).draw(false); } catch (err) { console.error(err) - console.error(JSON.stringify(err, null, 4)); - showToast("danger", `Error Loading Subscriptions: HTTP ${err.status}`, err.responseJSON.message, 15000); + showToast("danger", `Error Loading Subscriptions: HTTP ${err.status}`, err, 15000); + return; } + + updateTableContainer( + tableFilters["subTable"]["page"], + tableFilters["subTable"]["page_size"], + subs.results.length, + subs.count, + subs.next, + subs.previous + ); + + $("#subTable thead .table-select-all").prop("disabled", subs.results.length === 0); + console.debug("loading subs, " + subs.results.length + " found"); } // #region Server Change Event Handler diff --git a/apps/static/js/table.js b/apps/static/js/table.js index 61341ee..d5bd0c5 100644 --- a/apps/static/js/table.js +++ b/apps/static/js/table.js @@ -1,4 +1,23 @@ var timeouts = {}; + tableFilters = {}; + tableSorts = {}; + +$(document).on("selectedServerChange", async function() { + // Clear filters and sorts when changing server + tableFilters = {}; + tableSorts = {}; +}) + +function setTableFilter(tableId, key, value) { + if (!tableFilters[tableId]) + tableFilters[tableId] = {} + + tableFilters[tableId][key] = value; +} + +function setTableSorts(tableId, value) { + tableSorts[tableId] = value; +} async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc, deleteSelectedFunc, options=null) { let pageSizeId = tableId + "PageSize"; @@ -10,11 +29,11 @@ async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc, createTable(containingSelector, tableId); createTableControls(containingSelector, pageSizeId); - await bindSearchBar(searchId, loadDataFunc); - // await bindSortDropdown(sortDropdownId, loadDataFunc); - await bindFilterDropdown(filterDropdownId, loadDataFunc); - await bindTablePagination(`${containingSelector} .table-pagination`, loadDataFunc); - await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc); + await bindSearchBar(tableId, searchId, loadDataFunc); + await bindSortDropdown(tableId, sortDropdownId, loadDataFunc); + await bindFilterDropdown(tableId, filterDropdownId, loadDataFunc); + await bindTablePagination(tableId, `${containingSelector} .table-pagination`, loadDataFunc); + await bindTablePaginationResizer(tableId, `${containingSelector} .table-page-sizer`, loadDataFunc); } function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options, newRowFunc, deleteSelectedFunc) { @@ -38,6 +57,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro `); + // If there is a function that allows the creation of new rows, create a button for it if (newRowFunc) { $(`${containingSelector} .table-search-row .table-search-buttons`).prepend(`