popover badges

apps/home/static/home/js/tables.js

@@ -478,7 +478,7 @@ function renderErrorMessages($modal, errorObj) {
 }
 
 
-// region Table Column Types
+// region Table Col Types
 
 function renderEditColumn(data) {
     const name = sanitise(data);
@@ -551,7 +551,7 @@ function renderHexColourColumn(data, type, row) {
     const hexWithHashtag = `#${data}`.toUpperCase();
 
     let icon = $("<div>");
-    icon.addClass("table-cell-hex");
+    icon.addClass("col-hex-icon");
     icon.css("background-color", hexWithHashtag);
 
     return $(`<span data-bs-toggle="tooltip" data-bs-title="${hexWithHashtag}">${icon.prop("outerHTML")}</span>`).tooltip()[0];
@@ -565,6 +565,32 @@ function renderMutatorColumn(data) {
     return $(`<span class="badge text-bg-secondary rounded-1">${data.name}</span>`).prop("outerHTML");
 }
 
+const renderPopoverBadgesColumn = (items, iconClass) => {
+    if (!items.length) {
+        return "";
+    }
+
+    let $span = $("<span>");
+    $span.attr("data-bs-toggle", "popover");
+    $span.attr("data-bs-trigger", "hover focus");
+    $span.attr("data-bs-custom-class", "table-badge-popover")
+    $span.attr("data-bs-html", "true");
+    $span.attr("role", "button")
+
+    let $placeholderContainer = $("<div>");
+
+    items.forEach(item => {
+        let $badge = $("<div>");
+        $badge.addClass("badge text-bg-secondary rounded-1 me-2 mb-2 text-wrap mw-100 text-start");
+        $badge.text(item);
+        $placeholderContainer.append($badge);
+    });
+
+    $span.attr("data-bs-content", $placeholderContainer.html());
+    $span.html(`<i class="bi ${iconClass} fs-5"></i>`)
+    return $span.popover()[0];
+}
+
 
 // region Get Table Parts
 

apps/home/static/home/js/tabs/subs.js

@@ -24,25 +24,25 @@ function initSubscriptionsModule() {
             {
                 title: "Channels",
                 data: "channels_detail",
-                className: "text-center render-array-dropdown-column",
+                className: "col-icon",
-                render: data => renderArrayDropdownColumn(data.map(item => `#${item.name}`), "bi-hash", "Discord Channels")
+                render: data => renderPopoverBadgesColumn(data.map(item => `#${item.name}`), "bi-hash")
             },
             {
                 title: "Filters",
                 data: "filters_detail",
-                className: "text-center render-array-dropdown-column",
+                className: "col-icon",
-                render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-funnel", "Selected Filters")
+                render: data => renderPopoverBadgesColumn(data.map(item => item.name), "bi-funnel")
             },
             {
                 title: "Rules",
                 data: "unique_rules_detail",
-                className: "text-center render-array-dropdown-column",
+                className: "col-icon",
-                render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-vr", "Unique Rules")
+                render: data => renderPopoverBadgesColumn(data.map(item => item.name), "bi-vr")
             },
             {
                 title: "Style",
                 data: "message_style_detail",
-                className: "text-center",
+                className: "col-hex",
                 render: data => renderHexColourColumn(data.colour, null, data)
             },
             {

apps/home/static/home/scss/tables.scss

@@ -61,6 +61,16 @@
 
 }
 
+// Badge popover
+.table-badge-popover .popover-body {
+
+    display: flex;
+    flex-wrap: wrap;
+    padding: 1rem 0.5rem 0.5rem 1rem;
+    max-width: 200px;
+
+}
+
 // Table Button Controls
 
 .table-button-controls > div {
@@ -110,12 +120,10 @@
     tfoot { }
 
     // Custom column sizes
-    @mixin col-styles($width, $min-width: null, $max-width: null) {
+    @mixin col-styles($min-width: null, $max-width: null) {
 
-        $min-width: if($min-width == null, $width, $min-width);
+        $max-width: if($max-width == null, $min-width, $max-width);
-        $max-width: if($max-width == null, $width, $max-width);
 
-        width: $width;
         min-width: $min-width;
         max-width: $max-width;
         text-overflow: ellipsis;
@@ -129,14 +137,27 @@
     $col-url: 500px;
     $col-date: 150px;
     $col-switch: 100px;
+    $col-icon: 120px;
 
     .col {
 
         &-checkbox { @include col-styles($col-check); }
         &-name { @include col-styles($col-label); }
-        &-url { @include col-styles($col-url, $col-url, $col-url * 2); }
+        &-url { @include col-styles($col-url, $col-url * 2); }
         &-date { @include col-styles($col-date); }
         &-switch { @include col-styles($col-switch); }
+        &-icon { text-align: center; @include col-styles($col-icon); }
+        &-hex {
+            text-align: center;
+            @include col-styles($col-icon);
+
+            .col-hex-icon {
+                margin: 0 auto;
+                width: 25px;
+                height: 25px;
+                border-radius: 0.25rem;
+            }
+        }
 
     }
 
@@ -153,7 +174,7 @@
 //     //     padding: 2rem 0;
 //     //     border-bottom: none;
 
-//     // }
+//     // } 
 
 //     // Top & bottom border colour
 //     &.dataTable > thead > tr > th,