feat: delete selected feed rows

package.json

@@ -55,6 +55,8 @@
     "@prisma/client": "^6.6.0",
     "@tailwindcss/forms": "^0.5.10",
     "datatables.net-dt": "^2.2.2",
+    "datatables.net-select": "^3.0.0",
+    "datatables.net-select-dt": "^3.0.0",
     "discord.js": "^14.18.0",
     "dotenv": "^16.5.0",
     "ejs": "^3.1.10",

src/client/src/ts/guild/feeds.ts

@@ -1,6 +1,6 @@
 import $ from "jquery";
-// import DataTable from "datatables.net";
-import DataTable from "datatables.net-dt"
+import "datatables.net-select-dt";
+import DataTable, { Api } from "datatables.net-dt"
 import HSDropdown from "@preline/dropdown";
 import HSOverlay, { IOverlayOptions } from "@preline/overlay";
 import HSSelect, { ISelectOptions } from "@preline/select";
@@ -217,11 +217,10 @@ const ajaxSettings: AjaxSettings = {
     }
 };
 
-const tableOptions: any = {
+const tableOptions: IDataTableOptions = {
     ajax: ajaxSettings,
     serverSide: true,
     processing: true,
-    selecting: true,
     select: {
         style: "multi",
         selector: "td:first-child input[type='checkbox']"
@@ -246,11 +245,7 @@ const table: HSDataTable = new HSDataTable(
 );
 
 const onTableSelectChange = () => {
-    console.log("table select change")
-    const rows = (table as any).dataTable.rows();
-    debugger;
     const selectedRowsCount = (table as any).dataTable.rows({ selected: true }).count();
-    // const selectedRowsCount = $("#table tbody input[data-hs-datatable-row-selecting-individual]:checked").length;
     $("#deleteRowsBtn").prop("disabled", selectedRowsCount === 0);
     $(".rows-selected-count-js").text(selectedRowsCount);
 
@@ -264,16 +259,29 @@ const onTableSelectChange = () => {
     .on("draw", onTableSelectChange);
 
 $("#selectAllBox").on("change", function() {
-    debugger;
-    // TODO: debug why the select and deselect methods don't exist
     (this as HTMLInputElement).checked
         ? (table as any).dataTable.rows().select()
         : (table as any).dataTable.rows().deselect();
 });
 
-$("#deleteRowsBtn").on("click", () => {
-    const rowIds = (table as any).dataTable.rows({ selected: true }).data().toArray().map((row: any) => row.id);
-    alert(JSON.stringify(rowIds, null, 4));
+$("#deleteRowsBtn").on("click", async () => {
+    const dt: Api = (table as any).dataTable;
+    const rowsData = dt.rows({ selected: true }).data().toArray();
+    const rowIds = rowsData.map((row: prisma.Feed) => row.id);
+
+    await $.ajax({
+        url: `/guild/${guildId}/feeds/api`,
+        method: "delete",
+        dataType: "json",
+        data: { ids: rowIds },
+        success: () => {
+            dt.draw();
+            dt.rows().deselect();
+        },
+        error: error => {
+            alert(typeof error === "object" ? JSON.stringify(error, null, 4) : error);
+        }
+    });
 });
 
 // #endregion