corbz/relay
1
0
Fork 0
Code Issues 2 Pull Requests Actions Releases Activity

working on delete button
All checks were successful
Build / build (push) Successful in 59s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-05-01 19:33:46 +01:00
parent 300041ec49
commit dda5461a0d
2 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/client/src/ts/guild/feeds.ts
View File

@ -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

7
src/client/views/guild/feeds.ejs
View File

@ -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>