Working on sorting and filters for tables js

apps/static/js/api.js

@@ -54,9 +54,8 @@ async function loadChannels(guildId) {
 
 // Subscriptions
 
-async function getSubscriptions(guildId, page=1, pageSize=10) {
+async function getSubscriptions(guildId, page=1, pageSize=10, search="") {
-    const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}`;
+    const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`;
-    console.debug(url);
     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) {
+async function getFilters(guildId, page=1, pageSize=10, search="") {
-    return await ajaxRequest(`/api/filter/?guild_id=${guildId}`, "GET");
+    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) {
+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}&ordering=-creation_datetime`;
+    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() {

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(
                 $("<a>")
                 .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);

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);

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");

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(`
+        <div class="row my-3 px-3 table-search-row">
+            <div class="col-lg-4">
+                <div class="input-group mb-lg-0 mb-3 rounded-1">
+                    <span class="input-group-text">
+                        <i class="bi bi-search"></i>
+                    </span>
+                    <input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
+                </div>
+            </div>
+        </div>
+    `);
+
+    if (!options || !options.sort)
+        return;
+
+    $(`${containingSelector} .table-search-row`).append(`
+        <div class="col-lg-8 text-end">
+                <div class="d-inline-block me-3">
+                    <div id=${sortDropdownId} class="dropdown table-sort-dropdown">
+                        <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+                            <i class="bi bi-sort-alpha-up"></i>
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-end">
+                            <li><h6 class="dropdown-header">Sort By</h6></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="d-inline-block">
+                    <div id=${filterDropdownId} class="dropdown table-filter-dropdown">
+                        <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+                            <i class="bi bi-funnel"></i>
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-end">
+                            <li><h6 class="dropdown-header">Filter By</h6></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        `);
+
+    options.sort.forEach(sortKey => {
+        let label = sortKey.replace(/_/g, " ")
+        $(`#${sortDropdownId} .dropdown-menu`).append(`
+            <li>
+                <button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortkey="${sortKey}">
+                    <span class="me-3">${label}</span><i class="bi bi-chevron-up"></i>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortKey="-${sortKey}">
+                    <span class="me-3">${label}</span><i class="bi bi-chevron-down"></i>
+                </button>
+            </li>
+        `);
+    });
+
+    // <div class="d-block text-end">
+    //     <div id=${sortDropdownId} class="dropdown d-inline">
+    //         <button type="button" class="btn btn-secondary rounded-1 me-3" data-bs-toggle="dropdown">
+    //             <i class="bi bi-sort-alpha-up"></i>
+    //         </button>
+    //         <div class="dropdown-menu dropdown-menu-end"></div>
+    //     </div>
+    //     <div id=${filterDropdownId} class="dropdown d-inline">
+    //         <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+    //             <i class="bi bi-funnel"></i>
+    //         </button>
+    //         <div class="dropdown-menu dropdown-menu-end"></div>
+    //     </div>
+    // </div>
+}
+
+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(`
     <div class="table-responsive my-3 px-3">