From 25db5c73fb41a1537d459164f1e37e91cdef3dd0 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Sun, 16 Mar 2025 23:09:03 +0000
Subject: [PATCH] tags on filter table

---
 src/client/public/js/guild/filters.js       | 46 ++++++++++++++-------
 src/client/public/js/guild/subscriptions.js | 10 +----
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/client/public/js/guild/filters.js b/src/client/public/js/guild/filters.js
index b64be38..3d26e8f 100644
--- a/src/client/public/js/guild/filters.js
+++ b/src/client/public/js/guild/filters.js
@@ -135,14 +135,21 @@ const defineTable = () => {
                 data: "is_insensitive",
                 orderable: true,
                 searchable: true,
-                render: (data, type, row) => {
-                    return `
-                        <td class="size-px whitespace-nowrap align-top">
-                            <a href="#" class="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">
-                                ${data}
-                            </a>
-                        </td>
-                    `;
+                render: data => {
+                    wrapper = $("<div>").addClass("px-6 py-4");
+                    badge = $("<span>").addClass("py-1 px-1.5 inline-flex items-center text-xs font-medium rounded-full");
+                    label = $("<span>");
+
+                    if (data) {
+                        badge.addClass("bg-red-100 text-red-800 dark:bg-red-500/10 dark:bg-red-500");
+                        badge.append(label.text("No"));
+                    } else {
+                        badge.addClass("bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500");
+                        badge.append(label.text("Yes"));
+                    }
+
+                    wrapper.append(badge);
+                    return wrapper.get(0);
                 }
             },
             {
@@ -151,14 +158,21 @@ const defineTable = () => {
                 data: "is_whitelist",
                 orderable: true,
                 searchable: true,
-                render: (data, type, row) => {
-                    return `
-                        <td class="size-px whitespace-nowrap align-top">
-                            <a href="#" class="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">
-                                ${data}
-                            </a>
-                        </td>
-                    `;
+                render: data => {
+                    wrapper = $("<div>").addClass("px-6 py-4");
+                    badge = $("<span>").addClass("py-1 px-1.5 inline-flex items-center text-xs font-medium rounded-full");
+                    label = $("<span>");
+
+                    if (data) {
+                        badge.addClass("bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500");
+                        badge.append(label.text("Whitelist"));
+                    } else {
+                        badge.addClass("bg-red-100 text-red-800 dark:bg-red-500/10 dark:bg-red-500");
+                        badge.append(label.text("Blacklist"));
+                    }
+
+                    wrapper.append(badge);
+                    return wrapper.get(0);
                 }
             },
             {
diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js
index 8ab00cd..b576ac4 100644
--- a/src/client/public/js/guild/subscriptions.js
+++ b/src/client/public/js/guild/subscriptions.js
@@ -213,12 +213,7 @@ const defineTable = () => {
                 data: "active",
                 orderable: true,
                 searchable: true,
-                render: (data, type, row) => {
-
-                    // TODO:
-                    //        fix the badge icon not showing,
-                    //        its probvably because of jquery adding a closing tag ?
-
+                render: (_data, _type, row) => {
                     wrapper = $("<div>").addClass("px-6 py-4");
                     badge = $("<span>").addClass("py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full");
                     label = $("<span>");
@@ -227,8 +222,7 @@ const defineTable = () => {
                         badge.addClass("bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500");
                         badge.append($('<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>'))
                             .append(label.text("Active"));
-                    }
-                    else {
+                    } else {
                         badge.addClass("bg-red-100 text-red-800 dark:bg-red-500/10 dark:text-red-500");
                         badge.append($('<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>'))
                             .append(label.text("Inactive"));