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

fix: replace unusable <td> renders with className parameters for col configs.

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-04-29 12:26:25 +01:00
parent 3acd08d922
commit 31b9063365
1 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/client/typescript/guild/feeds.ts
View File

@ -6,7 +6,11 @@ import HSSelect, { ISelectOptions } from "@preline/select";
import HSDataTable, { IDataTableOptions } from "@preline/datatable"; import HSDataTable, { IDataTableOptions } from "@preline/datatable";
import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt"; import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
import { autoUpdate, computePosition, offset } from "@floating-ui/dom"; 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<any>;
// #region DataTable // #region DataTable
// //
@ -46,15 +50,14 @@ const columnDefs: ConfigColumnDefs[] = [
target: 0, target: 0,
orderable: false, orderable: false,
searchable: false, searchable: false,
render: (_data: unknown, _type: unknown, row: any) => { return ` className: "size-px whitespace-nowrap",
<td class="size-px whitespace-nowrap"> render: (_data: unknown, _type: unknown, row: prisma.Feed) => { return `
<div class="ps-6 py-4"> <div class="ps-6 py-4">
<label class="rowSelect${row.id}-js" class="flex"> <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">Checkbox</span> <span class="sr-only">Select Row</span>
</label> </label>
</div> </div>
</td>
`} `}
}, },
{ {
@ -62,12 +65,11 @@ const columnDefs: ConfigColumnDefs[] = [
data: "name", data: "name",
orderable: true, orderable: true,
searchable: true, searchable: true,
className: "size-px whitespace-nowrap",
render: (data: string) => { return ` render: (data: string) => { return `
<td class="size-px whitespace-nowrap align-top"> <span class="cj-table-link max-w-[250px] truncate">
<span class="cj-table-link max-w-[250px] truncate"> ${data}
${data} </span>
</span>
</td>
`} `}
}, },
{ {
@ -75,12 +77,11 @@ const columnDefs: ConfigColumnDefs[] = [
data: "url", data: "url",
orderable: true, orderable: true,
searchable: true, searchable: true,
className: "size-px whitespace-nowrap",
render: (data: string) => { return ` render: (data: string) => { return `
<td class="size-px whitespace-nowrap align-top"> <a href="${data}" class="cj-table-link max-w-[450px] truncate">
<a href="${data}" class="cj-table-link max-w-[450px] truncate"> ${data}
${data} </a>
</a>
</td>
`} `}
}, },
{ {
@ -88,14 +89,20 @@ const columnDefs: ConfigColumnDefs[] = [
data: "channels", data: "channels",
orderable: false, orderable: false,
searchable: false, searchable: false,
render: (data: Array<any>, type: string, row: any) => { className: "size-px",
render: (data: prisma.Channel[], type: string, row: prisma.Feed) => {
if (type !== "display") { return data; } if (type !== "display") { return data; }
if (!data.length) { return ""; } if (!data.length) { return ""; }
const wrapper = $("<div>").addClass("flex flex-nowrap gap-1 px-6 py-4"); const wrapper = $("<div>").addClass("flex flex-nowrap gap-1 px-6 py-4");
const tag = $("<span>").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 tag = $("<span>").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)); wrapper.append(tag.clone().text(firstChannelName));
// No need to run the dropdown code if there's no more to show // 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); return wrapper.get(0);
} }
else if (data.length <= 2) { 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)); wrapper.append(tag.clone().text(secondChannelName));
data.shift(); data.shift();
return wrapper.get(0); return wrapper.get(0);
@ -119,7 +126,7 @@ const columnDefs: ConfigColumnDefs[] = [
dropdown.append(dropdownBtn.text(`+${data.length}`)); dropdown.append(dropdownBtn.text(`+${data.length}`));
data.forEach(channel => { 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)); dropdownMenu.append(tag.clone().text(channelName));
}); });
@ -133,14 +140,13 @@ const columnDefs: ConfigColumnDefs[] = [
data: "filters", data: "filters",
orderable: false, orderable: false,
searchable: false, searchable: false,
className: "size-px whitespace-nowrap",
render: (data: string) => { return ` render: (data: string) => { return `
<td class="size-px whitespace-nowrap align-top"> <div class="px-6 py-4">
<div class="px-6 py-4"> <span class="cj-table-text">
<span class="cj-table-text"> ${data}
${data} </span>
</span> </div>
</div>
</td>
`} `}
}, },
{ {
@ -148,14 +154,13 @@ const columnDefs: ConfigColumnDefs[] = [
data: "message_style", data: "message_style",
orderable: false, // both should be true, but message_style doesnt exist yet orderable: false, // both should be true, but message_style doesnt exist yet
searchable: false, searchable: false,
className: "size-px whitespace-nowrap",
render: (data: string) => { return ` render: (data: string) => { return `
<td class="size-px whitespace-nowrap align-top"> <div class="px-6 py-4">
<div class="px-6 py-4"> <span class="cj-table-text">
<span class="cj-table-text"> ${data}
${data} </span>
</span> </div>
</div>
</td>
`} `}
}, },
{ {
@ -163,14 +168,13 @@ const columnDefs: ConfigColumnDefs[] = [
data: "created_at", data: "created_at",
orderable: true, orderable: true,
searchable: false, searchable: false,
className: "size-px whitespace-nowrap",
render: (data: string) => { return ` render: (data: string) => { return `
<td class="size-px whitespace-nowrap align-top"> <div class="px-6 py-4">
<div class="px-6 py-4"> <span class="cj-table-text">
<span class="cj-table-text"> ${formatTimestamp(data)}
${formatTimestamp(data)} </span>
</span> </div>
</div>
</td>
`} `}
}, },
{ {
@ -178,6 +182,7 @@ const columnDefs: ConfigColumnDefs[] = [
data: "active", data: "active",
orderable: true, orderable: true,
searchable: false, searchable: false,
className: "size-px whitespace-nowrap",
render: (data: boolean) => { render: (data: boolean) => {
const wrapper = $("<div>").addClass("px-6 py-4"); const wrapper = $("<div>").addClass("px-6 py-4");
const badge = $("<span>").addClass("py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full"); const badge = $("<span>").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 = { const ajaxSettings: AjaxSettings = {
url: `/guild/${1204426362794811453}/feeds/api/datatable`, url: `/guild/${guildId}/feeds/api/datatable`,
type: "POST", type: "POST",
contentType: "application/json", contentType: "application/json",
dataSrc: "data", dataSrc: "data",
@ -230,7 +235,7 @@ const tableOptions: IDataTableOptions = {
}; };
const table: HSDataTable = new HSDataTable( const table: HSDataTable = new HSDataTable(
$("#table").get(0), $("#table").get(0) as HTMLElement,
tableOptions tableOptions
); );
@ -265,7 +270,7 @@ const pageSelectOptions: ISelectOptions = {
}; };
const pageSizeSelect: HSSelect = new HSSelect( const pageSizeSelect: HSSelect = new HSSelect(
$("#selectPageSize-js").get(0), $("#selectPageSize-js").get(0) as HTMLElement,
pageSelectOptions pageSelectOptions
); );
@ -278,7 +283,7 @@ const pageSizeSelect: HSSelect = new HSSelect(
const editModalOptions: IOverlayOptions = {}; const editModalOptions: IOverlayOptions = {};
const editModal: HSOverlay = new HSOverlay( const editModal: HSOverlay = new HSOverlay(
$("#editModal").get(0), $("#editModal").get(0) as HTMLElement,
editModalOptions editModalOptions
); );