From 31b90633652c493b7c87ef359736650574b0fb53 Mon Sep 17 00:00:00 2001 From: Corban-Lee Date: Tue, 29 Apr 2025 12:26:25 +0100 Subject: [PATCH] fix: replace unusable renders with className parameters for col configs. --- src/client/typescript/guild/feeds.ts | 103 ++++++++++++++------------- 1 file changed, 54 insertions(+), 49 deletions(-) diff --git a/src/client/typescript/guild/feeds.ts b/src/client/typescript/guild/feeds.ts index cfcbc74..ad05d65 100644 --- a/src/client/typescript/guild/feeds.ts +++ b/src/client/typescript/guild/feeds.ts @@ -6,7 +6,11 @@ import HSSelect, { ISelectOptions } from "@preline/select"; import HSDataTable, { IDataTableOptions } from "@preline/datatable"; import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt"; import { autoUpdate, computePosition, offset } from "@floating-ui/dom"; -import { formatTimestamp } from "../main"; +import { formatTimestamp, verifyChannels } from "../main"; +import prisma from "../../../../generated/prisma"; + +declare let guildId: string; +declare let channels: Array; // #region DataTable // @@ -46,15 +50,14 @@ const columnDefs: ConfigColumnDefs[] = [ target: 0, orderable: false, searchable: false, - render: (_data: unknown, _type: unknown, row: any) => { return ` - -
- -
- + className: "size-px whitespace-nowrap", + render: (_data: unknown, _type: unknown, row: prisma.Feed) => { return ` +
+ +
`} }, { @@ -62,12 +65,11 @@ const columnDefs: ConfigColumnDefs[] = [ data: "name", orderable: true, searchable: true, + className: "size-px whitespace-nowrap", render: (data: string) => { return ` - - - ${data} - - + + ${data} + `} }, { @@ -75,12 +77,11 @@ const columnDefs: ConfigColumnDefs[] = [ data: "url", orderable: true, searchable: true, + className: "size-px whitespace-nowrap", render: (data: string) => { return ` - - - ${data} - - + + ${data} + `} }, { @@ -88,14 +89,20 @@ const columnDefs: ConfigColumnDefs[] = [ data: "channels", orderable: false, searchable: false, - render: (data: Array, type: string, row: any) => { + className: "size-px", + render: (data: prisma.Channel[], type: string, row: prisma.Feed) => { if (type !== "display") { return data; } if (!data.length) { return ""; } const wrapper = $("
").addClass("flex flex-nowrap gap-1 px-6 py-4"); const tag = $("").addClass("inline-flex items-center whitespace-nowrap gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200"); - const firstChannelName = data[0].channel_id; // "# " + channels.find(c => c.id === data[0]).name; + if (!verifyChannels(data, channels)) { + wrapper.text("invalid channels").addClass("whitespace-nowrap"); + return wrapper.get(0); + } + + const firstChannelName = "# " + channels.find(c => c.id === data[0].channel_id).name; wrapper.append(tag.clone().text(firstChannelName)); // No need to run the dropdown code if there's no more to show @@ -103,7 +110,7 @@ const columnDefs: ConfigColumnDefs[] = [ return wrapper.get(0); } else if (data.length <= 2) { - const secondChannelName = data[1].channel_id; // "# " + channels.find(c => c.id === data[1]).name; + const secondChannelName = "# " + channels.find(c => c.id === data[1].channel_id).name; wrapper.append(tag.clone().text(secondChannelName)); data.shift(); return wrapper.get(0); @@ -119,7 +126,7 @@ const columnDefs: ConfigColumnDefs[] = [ dropdown.append(dropdownBtn.text(`+${data.length}`)); data.forEach(channel => { - const channelName = channel.channel_id; // "# " + channels.find(c => c.id === channelId).name; + const channelName = "# " + channels.find(c => c.id === channel.channel_id).name; dropdownMenu.append(tag.clone().text(channelName)); }); @@ -133,14 +140,13 @@ const columnDefs: ConfigColumnDefs[] = [ data: "filters", orderable: false, searchable: false, + className: "size-px whitespace-nowrap", render: (data: string) => { return ` - -
- - ${data} - -
- +
+ + ${data} + +
`} }, { @@ -148,14 +154,13 @@ const columnDefs: ConfigColumnDefs[] = [ data: "message_style", orderable: false, // both should be true, but message_style doesnt exist yet searchable: false, + className: "size-px whitespace-nowrap", render: (data: string) => { return ` - -
- - ${data} - -
- +
+ + ${data} + +
`} }, { @@ -163,14 +168,13 @@ const columnDefs: ConfigColumnDefs[] = [ data: "created_at", orderable: true, searchable: false, + className: "size-px whitespace-nowrap", render: (data: string) => { return ` - -
- - ${formatTimestamp(data)} - -
- +
+ + ${formatTimestamp(data)} + +
`} }, { @@ -178,6 +182,7 @@ const columnDefs: ConfigColumnDefs[] = [ data: "active", orderable: true, searchable: false, + className: "size-px whitespace-nowrap", render: (data: boolean) => { const wrapper = $("
").addClass("px-6 py-4"); const badge = $("").addClass("py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full"); @@ -200,7 +205,7 @@ const columnDefs: ConfigColumnDefs[] = [ ]; const ajaxSettings: AjaxSettings = { - url: `/guild/${1204426362794811453}/feeds/api/datatable`, + url: `/guild/${guildId}/feeds/api/datatable`, type: "POST", contentType: "application/json", dataSrc: "data", @@ -230,7 +235,7 @@ const tableOptions: IDataTableOptions = { }; const table: HSDataTable = new HSDataTable( - $("#table").get(0), + $("#table").get(0) as HTMLElement, tableOptions ); @@ -265,7 +270,7 @@ const pageSelectOptions: ISelectOptions = { }; const pageSizeSelect: HSSelect = new HSSelect( - $("#selectPageSize-js").get(0), + $("#selectPageSize-js").get(0) as HTMLElement, pageSelectOptions ); @@ -278,7 +283,7 @@ const pageSizeSelect: HSSelect = new HSSelect( const editModalOptions: IOverlayOptions = {}; const editModal: HSOverlay = new HSOverlay( - $("#editModal").get(0), + $("#editModal").get(0) as HTMLElement, editModalOptions );