abstracted table functions

apps/static/js/home/index.js

@@ -5,10 +5,15 @@ $(document).ready(async function() {
 
     $("#subscriptionsTab").click();
 
+    // Bind table select checkboxes
     bindTableCheckboxes("#subTable", subTable, "#deleteSelectedSubscriptionsBtn");
     bindTableCheckboxes("#filtersTable", filtersTable, "#deleteSelectedFiltersBtn");
     bindTableCheckboxes("#contentTable", contentTable, "#deleteSelectedContentBtn")
 
+    // Bind pagination - subTable
+    await bindTablePagination("#subPagination", loadSubscriptions);
+    await bindTablePaginationResizer("#subTablePageSize", loadSubscriptions);
+
     await loadSavedGuilds();
     await loadServerOptions();
 });

apps/static/js/home/subscriptions.js

@@ -92,9 +92,9 @@ function initSubscriptionTable() {
         ]
     });
 
-    subTable.on('page.dt length.dt', function() {
+    // subTable.on('page.dt length.dt', async function() {
-        loadSubscriptions(getCurrentlyActiveServer().guild_id);
+    //     await loadSubscriptions(getCurrentlyActiveServer().guild_id);
-    });
+    // });
 }
 
 $("#subTable").on("change", ".sub-toggle-active", async function () {
@@ -120,6 +120,10 @@ $("#subTable").on("change", ".sub-toggle-active", async function () {
             sub.guild_id,
             sub.extra_notes,
             sub.filters,
+            {
+                title: sub.article_title_mutators.map(mutator => mutator.id),
+                desc: sub.article_desc_mutators.map(mutator => mutator.id)
+            },
             active,
             handleErrorMsg=false
         );
@@ -133,7 +137,7 @@ $("#subTable").on("change", ".sub-toggle-active", async function () {
         );
     }
     catch (error) {
-        console.error(error);
+        console.error(error);   
         showToast(
             "danger",
             "Error Updating Subscription",
@@ -215,6 +219,11 @@ $("#subForm").on("submit", async function(event) {
 
     var subPrimaryKey = await saveSubscription(id, name, url, guildId, extraNotes, subFilters, subMutators, active);
 
+    if (!subPrimaryKey) {
+        alert("prevented /subscriptions/false/subchannels");
+        return
+    }
+
     await deleteSubChannels(subPrimaryKey);
     subChannels.forEach(async channelId => {
         await saveSubChannel(channelId, subPrimaryKey);
@@ -245,6 +254,8 @@ async function saveSubscription(id, name, url, guildId, extraNotes, filters, mut
         else response = await editSubscription(id, formData); 
     }
     catch (err) {
+        console.error(err)
+
         if (handleErrorMsg)
             showToast("danger", "Subscription Error", err.responseText, 18000);
 
@@ -296,8 +307,10 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) {
     try {
         const subscriptions = await getSubscriptions(guildId, page, pageSize);
         subTable.rows.add(subscriptions.results).draw(false);
-        handleSubPagination(page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous);
+
-        handleSubPageInfo(subscriptions.results.length, subscriptions.count);
+        updateTablePagination("#subPagination", page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous);
+        updateTablePaginationInfo("#subTablePageInfo", subscriptions.results.length, subscriptions.count);
+
         $("#subTable thead .table-select-all").prop("disabled", subscriptions.results.length === 0);
         console.debug("loading subs, " + subscriptions.results.length + " found");
     }
@@ -307,69 +320,6 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) {
     }
 }
 
-$("#subTablePageSize").on("change", async function() {
-    const page = 1; // reset to page 1 to ensure the page exists.
-    const pageSize = $(this).val();
-
-    loadSubscriptions(getCurrentlyActiveServer().guild_id, page, pageSize);
-});
-
-function handleSubPageInfo(showing, total) {
-    $("#subTablePageInfo .pageinfo-showing").text(showing);
-    $("#subTablePageInfo .pageinfo-total").text(total);
-}
-
-// Update the UI pagination options according to the passed data.
-function handleSubPagination(currentPage, pageSize, totalItems, nextExists, prevExists) {
-
-    $("#subPagination").attr("data-page", currentPage);
-
-    // Remove existing page-specific buttons
-    $("#subPagination .page-pick").remove();
-
-    // Determine states of 'previous page' and 'next page' buttons
-    $("#subPagination .page-prev").toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
-    $("#subPagination .page-next").toggleClass("disabled", !nextExists).attr("tabindex", nextExists ? "" : "-1");
-
-    // Calculate amount of pages to account for
-    const pages = Math.max(Math.ceil(totalItems / pageSize), 1);
-
-    // Create a button for each page
-    for (let i = 1; i < pages + 1; i++) {
-        let pageItem = $("<li>").addClass("page-item");
-        let pageLink = $("<button>")
-            .attr("type", "button")
-            .attr("data-page", i)
-            .addClass("page-link page-pick")
-            .text(i)
-
-        pageItem.append(pageLink);
-
-        // Insert the new page button before the 'next page' button
-        $("#subPagination .pagination .page-next").parent().before(pageItem);
-    }
-
-    // Disable the button for the current page
-    $(`#subPagination .pagination .page-pick[data-page="${currentPage}"]`).addClass("disabled").attr("tabindex", -1);
-}
-
-$("#subPagination .pagination").on("click", ".page-link", async function() {
-
-    let wantedPage;
-    let currentPage = parseInt($("#subPagination").attr("data-page"));
-
-    if ($(this).hasClass("page-prev"))
-        wantedPage = currentPage - 1
-    else if ($(this).hasClass("page-next"))
-        wantedPage = currentPage + 1;
-    else
-        wantedPage = $(this).attr("data-page");
-    
-    console.debug("moving to page: " + wantedPage);
-
-    await loadSubscriptions(getCurrentlyActiveServer().guild_id, wantedPage)
-});
-
 $(document).on("selectedServerChange", async function() {
 
     // Hide alerts
@@ -528,10 +478,10 @@ async function loadMutatorOptions() {
         const mutators = await getMutators();
         console.log(JSON.stringify(mutators));
 
-        mutators.forEach(filter => {
+        mutators.forEach(mutator => {
             $(".sub-mutators-field").append($("<option>", {
-                text: filter.name,
+                text: mutator.name,
-                value: filter.id
+                value: mutator.id
             }));
         });
     }

apps/static/js/table.js

@@ -0,0 +1,64 @@
+
+// Updates the pagination text for a given pageInfoId
+function updateTablePaginationInfo(pageInfoId, showing, total) {
+    $(`${pageInfoId} .pageinfo-showing`).text(showing);
+    $(`${pageInfoId} .pageinfo-total`).text(total);
+}
+
+// Updates the pagination buttons for a given pageControlsId
+function updateTablePagination(pageControlsId, currentPage, pageSize, totalItems, nextExists, prevExists) {
+    $(pageControlsId).attr("data-page", currentPage);
+
+    // Remove existing page specific buttons
+    $(`${pageControlsId} .page-pick`).remove();
+
+    // Determine states of 'previous page' 'next page' buttons
+    $(`${pageControlsId} .page-prev`).toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
+    $(`${pageControlsId} .page-next`).toggleClass("disabled", !nextExists).attr("tabindex", nextExists ? "" : "-1");
+
+    // Calculate amount of pages to account for
+    const pages = Math.max(Math.ceil(totalItems / pageSize), 1);
+    // alert(pages + " " + totalItems + " " + pageSize + " ")
+
+    for (let i = 1; i <= pages; i++) {
+        let pageItem = $("<li>").addClass("page-item");
+        let pageLink = $("<button>")
+            .attr("type", "button")
+            .attr("data-page", i)
+            .addClass("page-link page-pick")
+            .text(i);
+
+        // Insert the new page button before the 'next page' button
+        pageItem.append(pageLink)
+        $(`${pageControlsId} .pagination .page-next`).parent().before(pageItem);
+
+        $(`${pageControlsId} .pagination .page-pick[data-page="${currentPage}"]`).addClass("disabled").attr("tabindex", -1);
+    }
+}
+
+// Bind the table pagination buttons to control the table pagination
+async function bindTablePagination(pageControlsId, dataLoadFunc) {
+    $(`${pageControlsId} .pagination`).on("click", ".page-link", async function() {
+        let wantedPage;
+        let currentPage = parseInt($(pageControlsId).attr("data-page"));
+
+        if ($(this).hasClass("page-prev"))
+            wantedPage = currentPage - 1;
+        else if ($(this).hasClass("page-next"))
+            wantedPage = currentPage + 1;
+        else
+            wantedPage = $(this).attr("data-page");
+
+        await dataLoadFunc(getCurrentlyActiveServer().guild_id, wantedPage)
+    });
+}
+
+// Bind the table pagination page resizer control
+async function bindTablePaginationResizer(resizerControlId, dataLoadFunc) {
+    $(resizerControlId).on("change", async function() {
+        const page = 1;
+        const pageSize = $(this).val();
+    
+        await dataLoadFunc(getCurrentlyActiveServer().guild_id, page, pageSize);
+    });
+}

apps/templates/home/includes/submodal.html

@@ -96,12 +96,12 @@
                                 <div class="form-text">Apply mutators to article descriptions.</div>
                             </div>
                         </div>
-                        <div class="col-lg-6 pe-lg-4">
+                        <div class="col-lg-6 pe-lg-4 d-none">
                             <label for="" class="form-label">Article Fetch Limit</label>
                             <input type="number" id="subFetchLimit" class="form-control rounded-1" max="10" min="1">
                             <div class="form-text">Limit the number of articles fetched every cycle.</div>
                         </div>
-                        <div class="col-lg-6 ps-lg-4">
+                        <div class="col-lg-6 ps-lg-4 d-none">
                             <div class="form-switch ps-0">
                                 <label for="subResetFetchLimit" class="form-check-label mb-2">Max Fetch Limit after the First Cycle</label>
                                 <br>

apps/templates/home/index.html

@@ -184,6 +184,7 @@
     </li>
 </script>
 <script src="{% static 'js/api.js' %}"></script>
+<script src="{% static 'js/table.js' %}"></script>
 <script src="{% static 'js/home/index.js' %}"></script>
 <script src="{% static 'js/home/servers.js' %}"></script>
 <script src="{% static 'js/home/subscriptions.js' %}"></script>