chore: working on datatables implementation for feeds

src/client/public/css/main.css

@@ -37,6 +37,32 @@
     display: none !important;
 }
 
+.cj-table {
+    @apply min-w-full divide-y divide-gray-200 dark:divide-neutral-700;
+}
+
+.cj-thead {
+    @apply border-none bg-gray-50 dark:bg-neutral-800;
+}
+
+.cj-table-checkbox {
+    @apply form-checkbox shrink-0 disabled:opacity-50 rounded-sm 
+        text-blue-600 focus:ring-blue-500 border-gray-300
+        dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500
+        dark:checked:border-blue-500 dark:focus:ring-offset-gray-800;
+}
+
+.cj-table-link {
+    @apply block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600
+        dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500
+        text-nowrap cursor-pointer
+}
+
+.cj-table-text {
+    @apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap;
+}
+
+
 /* Layout Sidebar */
 
 .sidebar-btn {

src/client/typescript/guild/feeds.ts

@@ -1,8 +1,10 @@
+import "preline";
 import $ from "jquery";
 import DataTable from "datatables.net";
 import HSDropdown from "@preline/dropdown";
 import HSDataTable, { IDataTableOptions } from "@preline/datatable";
 import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
+import { formatTimestamp } from "../main";
 
 // Fix dependency bugs with preline
 (window as any).DataTable = DataTable;
@@ -21,21 +23,133 @@ const emptyTableHtml: string = `
         </p>
 
         <div class="mt-5 flex flex-col sm:flex-row gap-2">
-            <button type="button" class="openSubModal-js py-2 px-3 inline-flex justify-center 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" data-hs-overlay="#subModal">
+            <button type="button" class="py-2 px-3 inline-flex justify-center 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" data-hs-overlay="#TODO">
                 <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>
                 Create a feed
             </button>
-            <button type="button" onclick="alert('not implemented');" 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-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+            <button type="button" onclick="alert('not implemented');" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                 Use a Template
             </button>
         </div>
     </div>
 `;
 
-const columnDefs: ConfigColumnDefs[] = [];
+const columnDefs: ConfigColumnDefs[] = [
+    // Select checkbox column
+    {
+        target: 0,
+        orderable: false,
+        searchable: false,
+        render(_data: unknown, _type: unknown, row: any) { return `
+            <td class="size-px whitespace-nowrap">
+                <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=""/>
+                        <span class="sr-only">Checkbox</span>
+                    </label>
+                </div>
+            </td>
+        `}
+    },
+    {
+        target: 1,
+        data: "name",
+        orderable: true,
+        searchable: true,
+        render(data: string) { return `
+            <td class="size-px whitespace-nowrap align-top">
+                <span class="cj-table-link">
+                    ${data}
+                </span>
+            </td>
+        `}
+    },
+    {
+        target: 2,
+        data: "url",
+        orderable: true,
+        searchable: true,
+        render(data: string) { return `
+            <td class="size-px whitespace-nowrap align-top">
+                <span class="cj-table-link">
+                    ${data}
+                </span>
+            </td>
+        `}
+    },
+    {
+        target: 3,
+        data: "channels",
+        orderable: false,
+        searchable: false,
+        render(data: string) {
+            return `${data}`
+        }
+    },
+    {
+        target: 4,
+        data: "filters",
+        orderable: false,
+        searchable: false,
+        render(data: string) { return `
+            <td class="size-px whitespace-nowrap align-top">
+                <div class="px-6 py-4">
+                    <span class="cj-table-text">
+                        ${data}
+                    </span>
+                </div>
+            </td>
+        `}
+    },
+    {
+        target: 5,
+        data: "message_style",
+        orderable: true,
+        searchable: true,
+        render(data: string) { return `
+            <td class="size-px whitespace-nowrap align-top">
+                <div class="px-6 py-4">
+                    <span class="cj-table-text">
+                        ${data}
+                    </span>
+                </div>
+            </td>
+        `}
+    },
+    {
+        target: 6,
+        data: "created_at",
+        orderable: true,
+        searchable: false,
+        render(data: string) { return `
+            <td class="size-px whitespace-nowrap align-top">
+                <div class="px-6 py-4">
+                    <span class="cj-table-text">
+                        ${formatTimestamp(data)}
+                    </span>
+                </div>
+            </td>
+        `}
+    },
+    {
+        target: 7,
+        data: "active",
+        orderable: true,
+        searchable: false,
+        render(data: string) { return `
+            <td class="size-px whitespace-nowrap align-top">
+                <div class="px-6 py-4">
+                    <span class="cj-table-text">
+                        ${data}
+                    </span>
+                </div>
+            </td>
+        `}
+    }
+];
 
 const ajaxSettings: AjaxSettings = {
-    url: ``,
+    url: `/guild/${1204426362794811453}/feeds/api/datatable`,
     dataSrc: "data",
     data: (data: unknown) => {
         if (data === undefined) return;

src/client/typescript/main.ts

@@ -1,4 +1,36 @@
-import $ from "jquery";
+// Preline: necessary for header events.
-$(document).ready(() => {
+window.addEventListener("load", () => {
-    console.log("ready!");
+    const inputs = document.querySelectorAll('.dt-container thead input');
-});
+
+    inputs.forEach(input => {
+        (input as HTMLInputElement).addEventListener("keydown", (event: KeyboardEvent) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === "a") {
+                (event.target as HTMLInputElement).select();
+            }
+        });
+    });
+});
+
+/**
+ * Formats a given timestamp to one of two formats depending on its age.
+ * @param timestamp 
+ * @returns 'DD MMM, HH:mm' if younger than 1 year, else 'DD MMM YYYY'
+ */
+export const formatTimestamp = (timestamp: string | number) => {
+    const date = new Date(
+        typeof timestamp === "string"
+        ? timestamp.replace(" ", "T")
+        : timestamp
+    );
+    const now = new Date();
+    const difference = now.getTime() - date.getTime();
+
+    // Day and short month (example: 21 Oct)
+    const result = `${date.getDate()} ${date.toLocaleString("en-GB", { month: "short" })}`
+
+    // Difference is less than a year:      'DD MMM, HH:mm'
+    // Or, difference is more than a year:  'DD MMM YYYY'
+    return difference < 31536000000
+        ? result + `, ${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`
+        : result + ` ${date.getFullYear()}`;
+}

src/client/views/guild/feeds.ejs

@@ -10,17 +10,17 @@
 
                     <!-- Header -->
                     <div>
-
+                        placeholder header content
                     </div>
 
                     <!-- Table -->
                      <div class="min-w-full overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
+                        <table class="cj-table">
-                            <thead class="border-none bg-gray-50 dark:bg-neutral-800">
+                            <thead class="cj-thead">
                                 <tr>
                                     <th scope="col" class="ps-6 py-3 text-start --exclude-from-ordering">
                                         <label for="selectAllBox" class="">
-                                            <input type="checkbox" id="selectAllBox" class="form-checkbox shrink-0 border-gray-300 rounded-sm text-blue-600 focus:ring-blue-500 disabled:opacity-50 dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
+                                            <input type="checkbox" id="selectAllBox" class="cj-table-checkbox">
                                             <span class="sr-only">Checkbox</span>
                                         </label>
                                     </th>
@@ -35,7 +35,7 @@
                                             </svg>
                                         </div>
                                     </th>
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <th scope="col" data-dt-column="url" class="px-6 py-3 text-start">
                                         <div class="flex justify-between items-center gap-x-2 cursor-pointer">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 URL
@@ -46,21 +46,21 @@
                                             </svg>
                                         </div>
                                     </th>
-                                    <th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
+                                    <th scope="col" data-dt-column="channels" class="px-6 py-3 text-start --exclude-from-ordering">
                                         <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Channels
                                             </span>
                                         </div>
                                     </th>
-                                    <th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
+                                    <th scope="col" data-dt-column="filters" class="px-6 py-3 text-start --exclude-from-ordering">
                                         <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Filters
                                             </span>
                                         </div>
                                     </th>
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <th scope="col" data-dt-column="style" class="px-6 py-3 text-start">
                                         <div class="flex justify-between items-center gap-x-2 cursor-pointer">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Style
@@ -71,7 +71,7 @@
                                             </svg>
                                         </div>
                                     </th>
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <th scope="col" data-dt-column="created_at" class="px-6 py-3 text-start">
                                         <div class="flex justify-between items-center gap-x-2 cursor-pointer">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap">
                                                 Created at
@@ -82,7 +82,7 @@
                                             </svg>
                                         </div>
                                     </th>
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <th scope="col" data-dt-column="active" class="px-6 py-3 text-start">
                                         <div class="flex justify-between items-center gap-x-2 cursor-pointer">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Status