deletion modal implementation

apps/static/js/home/content.js

@@ -146,24 +146,35 @@ async function goToSubscription(subId) {
     await showEditSubModal(subId);
 }
 
+
+// #region Delete Content
+
 async function deleteSelectedContent() {
+    const rows = contentTable.rows(".selected").data().toArray();
+    const names = rows.map(row => { return row.title });
+    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
+    const multiple = names.length > 1;
 
-    var rows = contentTable.rows(".selected").data();
+    await confirmDeleteModal(
-    $.each(rows, async function() {
+        `Confirm ${multiple ? "Multiple Deletions" : "Deletion"}`,
-        await deleteTrackedContent(this.id);
+        `Do you wish to permanently delete ${multiple ? "these" : "this"} <b>${names.length}</b> content${multiple ? "s" : ""}?<br><br>${namesString}`,
-        showToast(
+        async () => {
-            "success",
+            rows.forEach(async row => { await deleteTrackedContent(row.id) });
-            "Deletion Successful",
-            `This content may appear again under the <b>${this.subscription.name}</b> Subscription:<br><br>${this.guid}`,
-            10000
-        );
-    });
 
-    setTimeout(async () => {
+            showToast(
-        await loadContent(getCurrentlyActiveServer().guild_id);
+                "danger",
-    }, 600)
+                `Deleted ${names.length} Content${multiple ? "s" : ""}`,
+                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
+                12000
+            );
+        },
+        null
+    );
 }
 
+// #endregion
+
+
 function clearExistingContentRows() {
     $("#contentTable thead .table-select-all").prop("checked", false).prop("indeterminate", false);
     contentTable.clear().draw(false);

apps/static/js/home/filters.js

@@ -247,36 +247,57 @@ $(document).on("selectedServerChange", async function() {
     await loadFilters(activeServer.guild_id);
 });
 
-async function deleteSelectedFilters() {
+// #region Delete Filters
-    var rows = filtersTable.rows(".selected").data();
-    $.each(rows, async function() {
-        await deleteFilter(this.id);
-        showToast(
-            "success",
-            "Deletion Successful",
-            `Content Filter <b>${this.name}</b> has been erased.`,
-            10000
-        );  
-    })
-
-    setTimeout(async () => {
-        const guildId = getCurrentlyActiveServer().guild_id;
-        await loadFilters(guildId);
-        loadFilterOptions(guildId);
-    }, 500)
-}
 
 $("#deleteEditFilter").on("click", async function() {
-    const filterId = $("#filterId").val();
+    const filterId = parseInt($("#filterId").val());
-    const row = filtersTable.row(function(index, row) {row.id == id}).data();
+    const filter = filtersTable.row(function(idx, row) { return row.id === filterId }).data();
-    alert(filterId + JSON.stringify(row, null, 4))
+
-    await deleteFilter(filterId);
-    await loadFilters(getCurrentlyActiveServer().guild_id);
     $("#filterFormModal").modal("hide");
-    showToast(
+
-        "success",
+    await confirmDeleteModal(
-        "Deletion Successful",
+        "Confirm Deletion",
-        `Content Filter <b>${row.name}</b> has been erased.`,
+        `Do you wish to permanently delete <b>${filter.name}</b>?`,
-        10000
+        async () => {
+            await deleteFilter(filterId);
+            await loadFilters(getCurrentlyActiveServer().guild_id);
+
+            showToast(
+                "danger",
+                "Deleted a Filter",
+                filter.name,
+                12000
+            );
+        },
+        async () => {
+            $("#filterFormModal").modal("show");
+        }
     );
-});
+});
+
+async function deleteSelectedFilters() {
+    const rows = filtersTable.rows(".selected").data().toArray();
+    const names = rows.map(row => row.name);
+    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
+    const multiple = names.length > 1;
+
+    await confirmDeleteModal(
+        `Confirm ${multiple ? "Multiple Deletions" : "Deletion"}`,
+        `Do you wish to permanently delete ${multiple ? "these" : "this"} <b>${names.length}</b> filter${multiple ? "s" : ""}?<br><br>${namesString}`,
+        async () => {
+            rows.forEach(async row => { await deleteFilter(row.id) });
+
+            showToast(
+                "danger",
+                `Delete ${names.length} Subscription${multiple ? "s" : ""}`,
+                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
+                12000
+            );
+
+            await loadFilters(getCurrentlyActiveServer().guild_id);
+        },
+        null
+    );
+}
+
+// #endregion

apps/static/js/home/index.js

@@ -157,4 +157,15 @@ async function confirmDeleteModal(title, description, acceptFunc, declineFunc) {
         $modal.modal("hide");
     });
     $modal.modal("show");
+}
+
+function arrayToHtmlList(array, bold=false) {
+    $ul = $("<ul>");
+
+    array.forEach(item => {
+        let $li = $("<li>");
+        $ul.append(bold ? $li.append($("<b>").text(item)) : $li.text(item));
+    });
+
+    return $ul;
 }

apps/static/js/home/subscriptions.js

@@ -390,12 +390,12 @@ $(document).on("selectedServerChange", async function() {
 // #endregion
 
 
-// #region Delete Subscription Buttons
+// #region Delete Subscriptions
 
 // Delete button on the 'edit subscription' modal
 $("#deleteEditSub").on("click", async function() {
     const subId = parseInt($("#subId").val());
-    const sub = subTable.row(function(idx, data, node) { return data.id === subId }).data();
+    const sub = subTable.row(function(idx, row) { return row.id === subId }).data();
     
     $("#subFormModal").modal("hide");
 
@@ -419,32 +419,21 @@ $("#deleteEditSub").on("click", async function() {
     );
 });
 
-function arrayToHtmlList(array, bold=false) {
-    $ul = $("<ul>");
-
-    array.forEach(item => {
-        let $li = $("<li>");
-        $ul.append(bold ? $li.append($("<b>").text(item)) : $li.text(item));
-    });
-
-    return $ul;
-}
-
-
 async function deleteSelectedSubscriptions() {
     const rows = subTable.rows(".selected").data().toArray();
-    const names = rows.map(row => row.name);
+    const names = rows.map(row => row.name);    
     const namesString = arrayToHtmlList(names, true).prop("outerHTML");
+    const multiple = names.length > 1;
 
     await confirmDeleteModal(
-        `Confirm ${names.length > 1 ? "Multiple Deletions" : "Deletion"}`,
+        `Confirm ${multiple ? "Multiple Deletions" : "Deletion"}`,
-        `Do you wish to permanently delete ${names.length > 1 ? "these" : "this"} <b>${names.length}</b> subscription${names.length > 1 ? "s" : ""}?<br><br>${namesString}`,
+        `Do you wish to permanently delete ${multiple ? "these" : "this"} <b>${names.length}</b> subscription${multiple ? "s" : ""}?<br><br>${namesString}`,
         async () => {
             rows.forEach(async row => { await deleteSubscription(row.id) });
 
             showToast(
                 "danger",
-                `Deleted ${names.length} Subscription${names.length > 1 ? "s" : ""}`,
+                `Deleted ${names.length} Subscription${multiple ? "s" : ""}`,
                 `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                 12000
             )