fix: feed page - missing ordering params and row select functionality

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

@@ -3,10 +3,9 @@ import HSDropdown from "preline/dist/dropdown";
 import HSDataTable, { IDataTableOptions } from "preline/dist/datatable";
 import HSSelect, { ISelectOptions } from "preline/dist/select";
 import HSOverlay, { IOverlayOptions } from "preline/dist/overlay";
-import HSDatepicker, { ICustomDatepickerOptions } from "preline/dist/datepicker";
-import { AjaxSettings, ConfigColumnDefs } from "datatables.net-dt";
+import { Api, AjaxSettings, ConfigColumnDefs } from "datatables.net-dt";
+import "datatables.net-select-dt"
 import prisma from "../../../../../generated/prisma";
-import { ISingleOption } from "preline";
 import { TextChannel } from "discord.js";
 
 declare let guildId: string;
@@ -40,9 +39,10 @@ const emptyTableHtml: string = `
 `;
 
 const columnDefs: ConfigColumnDefs[] = [
-    // Select checkbox column
-    {
+    {  // Select checkbox column
         target: 0,
+        orderable: false,
+        searchable: false,
         className: "size-px whitespace-nowrap",
         render: (_data: unknown, _type: unknown, row: prisma.Feed) => { return `
             <div class="ps-6 py-4">
@@ -80,6 +80,8 @@ const columnDefs: ConfigColumnDefs[] = [
     {
         target: 3,
         data: "channels",
+        orderable: false,
+        searchable: false,
         className: "size-px",
         render: (data: prisma.Channel[], type: string, row: prisma.Feed) => {
             if (type !== "display") { return data; }
@@ -128,6 +130,8 @@ const columnDefs: ConfigColumnDefs[] = [
     {
         target: 4,
         data: "filters",
+        orderable: false,
+        searchable: false,
         className: "size-px whitespace-nowrap",
         render: (data: prisma.Filter[], type: string, row: prisma.Feed) => {
             if (type !== "display") return data;
@@ -167,6 +171,8 @@ const columnDefs: ConfigColumnDefs[] = [
     {
         target: 5,
         data: null,  // "message_style_id"
+        orderable: false,
+        searchable: false,
         className: "size-px whitespace-nowrap",
         render: (_data: unknown, type: string, row: any) => {
             if (!row.message_style || type !== "display") return null;
@@ -186,6 +192,7 @@ const columnDefs: ConfigColumnDefs[] = [
         target: 6,
         data: "created_at",
         orderable: true,
+        searchable: false,
         className: "size-px whitespace-nowrap",
         render: (data: string) => { return `
             <div class="px-6 py-4">
@@ -199,6 +206,7 @@ const columnDefs: ConfigColumnDefs[] = [
         target: 7,
         data: "active",
         orderable: true,
+        searchable: false,
         className: "size-px whitespace-nowrap",
         render: (data: boolean) => {
             const wrapper = $("<div>").addClass("px-6 py-4");
@@ -259,9 +267,51 @@ let table: HSDataTable;
 
 window.addEventListener("preline:ready", () => {
     const tableEl = $("#table").get(0);
-    if (!HSDataTable.getInstance(tableEl, true)) {
-        table = new HSDataTable(tableEl, tableOptions);
-    }
+
+    if (HSDataTable.getInstance(tableEl, true)) return;
+
+    table = new HSDataTable(tableEl, tableOptions);
+
+    (table as any).dataTable
+        .on("select", onTableSelectChange)
+        .on("deselect", onTableSelectChange)
+        .on("draw", onTableSelectChange);
+});
+
+const onTableSelectChange = () => {
+    const selectedRowsCount = (table as any).dataTable.rows({ selected: true }).count();
+    $("#deleteRowsBtn").prop("disabled", selectedRowsCount === 0);
+    $(".rows-selected-count-js").text(selectedRowsCount);
+
+    const $elem = $(".rows-selected-count-js.zero-empty-js");
+    selectedRowsCount === 0 ? $elem.hide() : $elem.show();
+};
+
+$("#selectAllBox").on("change", function() {
+    const dt: Api = (table as any).dataTable;
+    (this as HTMLInputElement).checked
+        ? dt.rows().select()
+        : dt.rows().deselect();
+});
+
+$("#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