From ae5345734412982f9593d418ad71520d318f1118 Mon Sep 17 00:00:00 2001 From: Corban-Lee Date: Wed, 5 Feb 2025 17:13:02 +0000 Subject: [PATCH] server side filters --- src/client/public/css/tailwind.css | 85 ++++++++++++++++--- src/client/public/js/guild/subscriptions.js | 22 +++-- src/client/views/guild/guildHeader.ejs | 58 ++++++++++++- src/client/views/guild/subscriptions.ejs | 30 +++---- .../controllers/guild/index.web.controller.ts | 22 +++-- .../controllers/guild/sub.api.controller.ts | 52 ++++++------ src/utils/datatable.ts | 24 +++++- 7 files changed, 214 insertions(+), 79 deletions(-) diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index 556c0b8..ebd2529 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -917,6 +917,11 @@ video { margin-right: 1rem; } +.mx-\[1px\] { + margin-left: 1px; + margin-right: 1px; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -1075,6 +1080,11 @@ video { display: none; } +.size-16 { + width: 4rem; + height: 4rem; +} + .size-2\.5 { width: 0.625rem; height: 0.625rem; @@ -1254,14 +1264,14 @@ video { min-width: 15rem; } -.min-w-\[40px\] { - min-width: 40px; -} - .min-w-full { min-width: 100%; } +.max-w-\[120rem\] { + max-width: 120rem; +} + .max-w-\[28rem\] { max-width: 28rem; } @@ -1286,6 +1296,10 @@ video { flex: none; } +.flex-shrink-0 { + flex-shrink: 0; +} + .shrink-0 { flex-shrink: 0; } @@ -1396,6 +1410,10 @@ video { gap: 1rem; } +.gap-5 { + gap: 1.25rem; +} + .gap-x-1 { -moz-column-gap: 0.25rem; column-gap: 0.25rem; @@ -1525,6 +1543,10 @@ video { border-radius: 0.25rem; } +.rounded-2xl { + border-radius: 1rem; +} + .rounded-full { border-radius: 9999px; } @@ -1587,6 +1609,10 @@ video { border-style: solid; } +.border-none { + border-style: none; +} + .\!border-gray-200 { --tw-border-opacity: 1 !important; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important; @@ -1774,6 +1800,10 @@ video { padding-bottom: 1rem; } +.\!pb-1 { + padding-bottom: 0.25rem !important; +} + .pb-1 { padding-bottom: 0.25rem; } @@ -1834,6 +1864,10 @@ video { padding-top: 1rem; } +.pt-5 { + padding-top: 1.25rem; +} + .text-center { text-align: center; } @@ -2449,6 +2483,16 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te inset-inline-start: 0px; } +.before\:top-0::before { + content: var(--tw-content); + top: 0px; +} + +.before\:-z-10::before { + content: var(--tw-content); + z-index: -10; +} + .before\:z-\[1\]::before { content: var(--tw-content); z-index: 1; @@ -2470,6 +2514,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te height: 1rem; } +.before\:h-\[200px\]::before { + content: var(--tw-content); + height: 200px; +} + .before\:w-full::before { content: var(--tw-content); width: 100%; @@ -2964,6 +3013,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te display: inline-flex; } + .sm\:size-20 { + width: 5rem; + height: 5rem; + } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -2972,6 +3026,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te flex-direction: row; } + .sm\:items-center { + align-items: center; + } + .sm\:gap-6 { gap: 1.5rem; } @@ -3001,6 +3059,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } + .sm\:rounded-3xl { + border-radius: 1.5rem; + } + .sm\:p-5 { padding: 1.25rem; } @@ -3100,6 +3162,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te padding-top: 0px; padding-bottom: 0px; } + + .md\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } } @media (min-width: 1024px) { @@ -3499,13 +3566,3 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te .\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar { width: 0.5rem; } - -.\[\&\>\.active\]\:bg-gray-100>.active { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} - -.dark\:\[\&\>\.active\]\:bg-neutral-700>.active:where(.dark, .dark *) { - --tw-bg-opacity: 1; - background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); -} diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js index 14f60da..82b4fb2 100644 --- a/src/client/public/js/guild/subscriptions.js +++ b/src/client/public/js/guild/subscriptions.js @@ -1,8 +1,9 @@ +// const { dataTable } = HSDataTable.getInstance("#table"); + // // Filter by status // (function () { // const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]'); -// const { dataTable } = new HSDataTable('#table'); // dataTable.search.fixed('status', function (searchStr, data, index) { // const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset @@ -17,7 +18,6 @@ // }); // })(); -// const { dataTable } = HSDataTable.getInstance("#table"); // dataTable.on("draw.dt", () => { // console.log("Table redrawn") @@ -34,17 +34,24 @@ const formatTimestamp = timestamp => { : `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })} ${d.getFullYear()}`; } +var table; const defineTable = () => { - new HSDataTable("#table", { + table = new HSDataTable("#table", { ajax: { url: `/guild/${guild}/subscriptions/api/datatable`, - dataSrc: "data" + dataSrc: "data", + data: (d) => { + d.filters = {}; + + const active = $("input[name='filterActive']:checked").val(); + d.filters.active = active; + } }, serverSide: true, processing: true, selecting: true, pagingOptions: { - pageBtnClasses: "min-w-[40px] flex justify-center items-center text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 py-2.5 text-sm rounded-full disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:focus:bg-neutral-700 dark:hover:bg-neutral-700" + pageBtnClasses: "hidden" }, rowSelectingOptions: { selectAllSelector: "#selectAllBox" @@ -63,7 +70,7 @@ const defineTable = () => {

- @@ -135,9 +142,9 @@ const defineTable = () => { orderable: false, searchable: false, render: (data, type, row) => { + // ${data.length} channels return ` - ${data.length} channels `; } @@ -226,7 +233,6 @@ $(window).ready(() => { const submitForm = async event => { event.preventDefault(); - const formData = new FormData($("#subForm")); diff --git a/src/client/views/guild/guildHeader.ejs b/src/client/views/guild/guildHeader.ejs index e131074..f74ed09 100644 --- a/src/client/views/guild/guildHeader.ejs +++ b/src/client/views/guild/guildHeader.ejs @@ -1,4 +1,4 @@ -