From 6ad10a585dd21ed192299f7ed456d44ba5a16f72 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Mon, 12 May 2025 16:33:47 -0500
Subject: [PATCH] fix: limits active download list to 5 items

---
 .../controllers/download_list_controller.js   | 43 +++++++++++++++++++
 src/Twig/Components/DownloadList.php          |  7 ++-
 templates/broadcast/Download.stream.html.twig |  8 ++--
 templates/components/DownloadList.html.twig   |  4 +-
 4 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 assets/controllers/download_list_controller.js

diff --git a/assets/controllers/download_list_controller.js b/assets/controllers/download_list_controller.js
new file mode 100644
index 0000000..ac1dcec
--- /dev/null
+++ b/assets/controllers/download_list_controller.js
@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
+*/
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ['download']
+
+    async initialize() {
+        this.component = await getComponent(this.element);
+    }
+
+    connect() {
+        // Called every time the controller is connected to the DOM
+        // (on page load, when it's added to the DOM, moved in the DOM, etc.)
+
+        // Here you can add event listeners on the element or target elements,
+        // add or remove classes, attributes, dispatch custom events, etc.
+        // this.fooTarget.addEventListener('click', this._fooBar)
+    }
+
+    downloadTargetConnected(target) {
+        let downloads = this.element.querySelectorAll('tbody tr');
+        console.log(downloads.length);
+        if (downloads.length > 5) {
+            target.classList.add('hidden');
+        }
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}
diff --git a/src/Twig/Components/DownloadList.php b/src/Twig/Components/DownloadList.php
index cf5a67c..6b9a817 100644
--- a/src/Twig/Components/DownloadList.php
+++ b/src/Twig/Components/DownloadList.php
@@ -3,11 +3,14 @@
 namespace App\Twig\Components;
 
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsTwigComponent]
+#[AsLiveComponent]
 final class DownloadList extends AbstractController
 {
+    use DefaultActionTrait;
+
     public string $type;
 
     public function getDownloads()
diff --git a/templates/broadcast/Download.stream.html.twig b/templates/broadcast/Download.stream.html.twig
index a7da112..6b6903c 100644
--- a/templates/broadcast/Download.stream.html.twig
+++ b/templates/broadcast/Download.stream.html.twig
@@ -5,15 +5,15 @@
 
     <turbo-stream action="append" target="active_downloads">
         <template>
-            <tr  id="ad_download_{{ entity.id }}">
+            <tr data-download-list-target="download" id="ad_download_{{ entity.id }}">
                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
                     {{ entity.title }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
                     {% if entity.progress < 100 %}
-                        <span class="p-1.5 bg-purple-600 rounded-full">
-                            <span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
-                        </span>
+                        <div class="w-[3.25ch] h-[3.25ch] bg-purple-600 rounded-full block text-center table-cell align-middle text-xs text-gray-50">
+                            {{ entity.progress }}
+                        </div>
                     {% else %}
                         <twig:StatusBadge color="green" status="Complete" />
                     {% endif %}
diff --git a/templates/components/DownloadList.html.twig b/templates/components/DownloadList.html.twig
index 76154e2..233d602 100644
--- a/templates/components/DownloadList.html.twig
+++ b/templates/components/DownloadList.html.twig
@@ -1,4 +1,4 @@
-<div{{ attributes }} class="min-w-48">
+<div{{ attributes.defaults(stimulus_controller('download_list')) }} class="min-w-48" >
     {% set table_body_id = (type == "complete") ? "complete_downloads" : "active_downloads" %}
     <table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
         <thead>
@@ -16,7 +16,7 @@
         <tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
         {% if this.downloads|length > 0 %}
             {% for download in this.downloads %}
-                <tr  id="ad_download_{{ download.id }}">
+                <tr id="ad_download_{{ download.id }}">
                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
                         {{ download.title }}
                     </td>