From dda5461a0d167b1a4b9e2be33756e977245b99cf Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Thu, 1 May 2025 19:33:46 +0100
Subject: [PATCH] working on delete button

---
 src/client/src/ts/guild/feeds.ts | 43 +++++++++++++++++++++++++++++---
 src/client/views/guild/feeds.ejs |  7 ++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/client/src/ts/guild/feeds.ts b/src/client/src/ts/guild/feeds.ts
index 54fcf04..d608a93 100644
--- a/src/client/src/ts/guild/feeds.ts
+++ b/src/client/src/ts/guild/feeds.ts
@@ -1,5 +1,6 @@
 import $ from "jquery";
-import DataTable from "datatables.net";
+// import DataTable from "datatables.net";
+import DataTable from "datatables.net-dt"
 import HSDropdown from "@preline/dropdown";
 import HSOverlay, { IOverlayOptions } from "@preline/overlay";
 import HSSelect, { ISelectOptions } from "@preline/select";
@@ -54,7 +55,7 @@ const columnDefs: ConfigColumnDefs[] = [
         render: (_data: unknown, _type: unknown, row: prisma.Feed) => { return `
             <div class="ps-6 py-4">
                 <label class="rowSelect${row.id}-js" class="flex">
-                    <input type="checkbox" id="rowSelect${row.id}-js" class="cj-table-checkbox" data-hs-datatable-row-selecting-individual=""/>
+                    <input type="checkbox" id="rowSelect${row.id}-js" class="cj-table-checkbox" data-hs-datatable-row-selecting-individual="">
                     <span class="sr-only">Select Row</span>
                 </label>
             </div>
@@ -216,10 +217,15 @@ const ajaxSettings: AjaxSettings = {
     }
 };
 
-const tableOptions: IDataTableOptions = {
+const tableOptions: any = {
     ajax: ajaxSettings,
     serverSide: true,
     processing: true,
+    selecting: true,
+    select: {
+        style: "multi",
+        selector: "td:first-child input[type='checkbox']"
+    },
     columnDefs: columnDefs,
     pagingOptions: { pageBtnClasses: "hidden" },
     rowSelectingOptions: { selectAllSelector: "#selectAllBox" },
@@ -239,6 +245,37 @@ const table: HSDataTable = new HSDataTable(
     tableOptions
 );
 
+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);
+
+    const $elem = $(".rows-selected-count-js.zero-empty-js");
+    selectedRowsCount === 0 ? $elem.hide() : $elem.show();
+};
+
+(table as any).dataTable
+    .on("select", onTableSelectChange)
+    .on("deselect", 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));
+});
+
 // #endregion
 
 // #region Page Size Select
diff --git a/src/client/views/guild/feeds.ejs b/src/client/views/guild/feeds.ejs
index 496be13..be34441 100644
--- a/src/client/views/guild/feeds.ejs
+++ b/src/client/views/guild/feeds.ejs
@@ -22,6 +22,13 @@
                         </div>
 
                         <div class="sm:col-span-2">
+                            <button type="button" id="deleteRowsBtn" disabled class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-red-500 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
+                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+                                <span>
+                                    <span class="hidden sm:inline">Delete</span>
+                                    <span class="rows-selected-count-js zero-empty-js before:content-['('] after:content-[')'] empty:hidden"></span>
+                                </span>
+                            </button>
                             <button type="button" class="open-edit-modal-js py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
                                 <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                                 <span>