From 9b6eb86cd8bdcaa00014416187f130b57831172e Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Fri, 9 May 2025 16:41:54 +0100 Subject: [PATCH] fix: feed page - missing ordering params and row select functionality --- src/client/src/ts/guild/feeds.ts | 66 ++++++++++++++++++++++++++++---- 1 file changed, 58 insertions(+), 8 deletions(-) diff --git a/src/client/src/ts/guild/feeds.ts b/src/client/src/ts/guild/feeds.ts index b3efbac..9e19586 100644 --- a/src/client/src/ts/guild/feeds.ts +++ b/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 `
@@ -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 `
@@ -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 = $("
").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