diff --git a/apps/static/js/api.js b/apps/static/js/api.js index 2290926..4004998 100644 --- a/apps/static/js/api.js +++ b/apps/static/js/api.js @@ -54,9 +54,8 @@ async function loadChannels(guildId) { // Subscriptions -async function getSubscriptions(guildId, page=1, pageSize=10) { - const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}`; - console.debug(url); +async function getSubscriptions(guildId, page=1, pageSize=10, search="") { + const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`; return await ajaxRequest(url, "GET"); } @@ -76,6 +75,10 @@ async function editSubscription(id, formData) { return await ajaxRequest(`/api/subscription/${id}/`, "PUT", formData); } +async function getSubscriptionOptions() { + return await ajaxRequest("/api/subscription/", "OPTIONS") +} + // SubChannels @@ -102,8 +105,9 @@ async function deleteSubChannels(subscriptionId) { // Filters -async function getFilters(guildId) { - return await ajaxRequest(`/api/filter/?guild_id=${guildId}`, "GET"); +async function getFilters(guildId, page=1, pageSize=10, search="") { + const url = `/api/filter/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`; + return await ajaxRequest(url, "GET"); } async function getFilter(id) { @@ -129,8 +133,8 @@ async function getFilterOptions() { // Tracked Content -async function getTrackedContent(guildId, subscriptionId=null, page=1, pageSize=10) { - var url = `/api/tracked-content/?subscription__guild_id=${guildId}&page=${page}&page_size=${pageSize}&ordering=-creation_datetime`; +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}`; @@ -142,6 +146,10 @@ async function deleteTrackedContent(guid) { return await ajaxRequest(`/api/tracked-content/${encodedGuid}/`, "DELETE"); } +async function getTrackedContentOptions() { + return await ajaxRequest("/api/tracked-content/", "OPTIONS") +} + // Mutators async function getMutators() { diff --git a/apps/static/js/home/content.js b/apps/static/js/home/content.js index ce4203f..fe6abde 100644 --- a/apps/static/js/home/content.js +++ b/apps/static/js/home/content.js @@ -1,7 +1,9 @@ var contentTable; + contentOptions = null; async function initContentTable() { - await initTable("#contentTabPane", "contentTable", loadContent); + contentOptions = await getTrackedContentOptions(); + await initTable("#contentTabPane", "contentTable", loadContent, contentOptions); contentTable = $("#contentTable").DataTable({ info: false, @@ -108,14 +110,12 @@ function handleDiscordChannelNames() { return; $("#contentTable tr td.content-channel-id").each(function() { - console.debug("row") let tracked = contentTable.row($(this).closest("tr")).data(); channel = discordChannels.find(item => item.value === tracked.channel_id); if (!channel) return; - console.debug("inserting") $(this).text("").append( $("") .attr("href", `https://discord.com/channels/${getCurrentlyActiveServer().guild_id}/${channel.value}/${tracked.message_id}`) @@ -169,7 +169,7 @@ $("#refreshContentBtn").on("click", async function() { loadContent(getCurrentlyActiveServer().guild_id); }); -async function loadContent(guildId, page=1, pageSize=null) { +async function loadContent(guildId, page=1, pageSize=null, search=null) { if (!guildId) return; @@ -177,11 +177,14 @@ async function loadContent(guildId, page=1, pageSize=null) { if (!pageSize) pageSize = $("#contentTablePageSize").val(); + if (!search) + search = $("#contentTabPane .table-searchbar").val(); + $("#deleteSelectedContentBtn").prop("disabled", true); clearExistingContentRows(); try { - const content = await getTrackedContent(guildId, null, page, pageSize); + const content = await getTrackedContent(guildId, null, page, pageSize, search); contentTable.rows.add(content.results).draw(false); updateTablePagination("#contentTabPane .table-pagination", page, pageSize, content.count, content.next, content.previous); diff --git a/apps/static/js/home/filters.js b/apps/static/js/home/filters.js index cf22bfb..1415aec 100644 --- a/apps/static/js/home/filters.js +++ b/apps/static/js/home/filters.js @@ -1,8 +1,10 @@ var filtersTable; + filterOptions = null; // Create filters table async function initFiltersTable() { - await initTable("#filtersTabPane", "filtersTable", loadFilters); + filterOptions = await getFilterOptions(); + await initTable("#filtersTabPane", "filtersTable", loadFilters, filterOptions); filtersTable = $("#filtersTable").DataTable({ info: false, @@ -170,7 +172,7 @@ $("#refreshFilterBtn").on("click", async function() { loadFilters(getCurrentlyActiveServer().guild_id); }); -async function loadFilters(guildId, page=1, pageSize=null) { +async function loadFilters(guildId, page=1, pageSize=null, search=null) { if (!guildId) return; @@ -178,11 +180,14 @@ async function loadFilters(guildId, page=1, pageSize=null) { if (!pageSize) pageSize = $("#filtersTablePageSize").val(); + if (!search) + search = $("#filtersTabPane .table-searchbar").val(); + $("#deleteSelectedFiltersBtn").prop("disabled", true); clearExistingFilterRows(); try { - const filters = await getFilters(guildId); + 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); diff --git a/apps/static/js/home/subscriptions.js b/apps/static/js/home/subscriptions.js index 9c4beba..46da2ae 100644 --- a/apps/static/js/home/subscriptions.js +++ b/apps/static/js/home/subscriptions.js @@ -1,9 +1,12 @@ var subTable = null; discordChannels = []; + subSearchTimeout = null; + subOptions = null; // Create subscription table async function initSubscriptionTable() { - await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions); + subOptions = await getSubscriptionOptions(); + await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions, subOptions); subTable = $("#subTable").DataTable({ info: false, @@ -121,7 +124,7 @@ async function initSubscriptionTable() { bindTableCheckboxes("#subTable", subTable, "#deleteSelectedSubscriptionsBtn"); } -$(document).on("change", ".sub-toggle-active", async function () { +$("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function () { /* Lock all toggles to soft-prevent spam. @@ -336,7 +339,7 @@ $("#refreshSubscriptionBtn").on("click", async function() { loadSubscriptions(getCurrentlyActiveServer().guild_id); }); -async function loadSubscriptions(guildId, page=1, pageSize=null) { +async function loadSubscriptions(guildId, page=1, pageSize=null, search=null) { if (!guildId) return; @@ -344,11 +347,14 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) { if (!pageSize) pageSize = $("#subTablePageSize").val(); + if (!search) + search = $("#subscriptionsTabPane .table-searchbar").val(); + $("#deleteSelectedSubscriptionsBtn").prop("disabled", true); clearExistingSubRows(); try { - const subscriptions = await getSubscriptions(guildId, page, pageSize); + 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); @@ -634,7 +640,9 @@ function subSetHexColour(hexString) { $("#subEmbedColourText").val(hexString); } -$(document).ready(() => {$("#subResetEmbedColour").click();}); +$(document).ready(async () => {$("#subResetEmbedColour").click() }); + // let options = await getSubscriptionOptions(); + // console.log(JSON.stringify(options.actions.GET.creation_datetime)); $("#subResetEmbedColour").on("click", function() { subSetHexColour("#3498db"); diff --git a/apps/static/js/table.js b/apps/static/js/table.js index 6b6d2f7..e5ec937 100644 --- a/apps/static/js/table.js +++ b/apps/static/js/table.js @@ -1,13 +1,105 @@ +var timeouts = {}; -async function initTable(containingSelector, tableId, loadDataFunc) { +async function initTable(containingSelector, tableId, loadDataFunc, options=null) { let pageSizeId = tableId + "PageSize"; + searchId = tableId + "SearchBar"; + sortDropdownId = tableId + "SortDropdown"; + filterDropdownId = tableId + "FilterDropdown"; + + createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options); createTable(containingSelector, tableId); createTableControls(containingSelector, pageSizeId); + await bindSearchBar(searchId, loadDataFunc); await bindTablePagination(`${containingSelector} .table-pagination`, loadDataFunc); await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc); } +function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options) { + $(containingSelector).append(` +
+
+
+ + + + +
+
+
+ `); + + if (!options || !options.sort) + return; + + $(`${containingSelector} .table-search-row`).append(` +
+
+ +
+
+ +
+
+ `); + + options.sort.forEach(sortKey => { + let label = sortKey.replace(/_/g, " ") + $(`#${sortDropdownId} .dropdown-menu`).append(` +
  • + +
    • +
  • + +
    • + `); + }); + + //
    + // + // + //
    +} + +async function bindSearchBar(searchBarSelector, loadDataFunc) { + searchBar = $("#" + searchBarSelector) + searchBar.on("input", async function() { + clearTimeout(timeouts[searchBarSelector]); + searchString = $(this).val(); + timeouts[searchBarSelector] = setTimeout(async function() { + await loadDataFunc(getCurrentlyActiveServer().guild_id, 1, null, searchString); + }, 300); + }); +} + function createTable(containingSelector, tableId) { $(containingSelector).append(`