From 725034dd4e35cdb48ea701674053a9036c9ef998 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Tue, 3 Jun 2025 11:14:38 -0500
Subject: [PATCH] fix: shows download progress

---
 src/Twig/Components/DownloadListRow.php       | 14 ++++++
 templates/broadcast/Download.stream.html.twig | 49 +++----------------
 templates/components/DownloadList.html.twig   | 37 +-------------
 .../components/DownloadListRow.html.twig      | 36 ++++++++++++++
 4 files changed, 58 insertions(+), 78 deletions(-)
 create mode 100644 src/Twig/Components/DownloadListRow.php
 create mode 100644 templates/components/DownloadListRow.html.twig

diff --git a/src/Twig/Components/DownloadListRow.php b/src/Twig/Components/DownloadListRow.php
new file mode 100644
index 0000000..1def6f0
--- /dev/null
+++ b/src/Twig/Components/DownloadListRow.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Download\Framework\Entity\Download;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class DownloadListRow
+{
+    public Download $download;
+
+    public bool $isWidget = true;
+}
diff --git a/templates/broadcast/Download.stream.html.twig b/templates/broadcast/Download.stream.html.twig
index e537a55..53e5afa 100644
--- a/templates/broadcast/Download.stream.html.twig
+++ b/templates/broadcast/Download.stream.html.twig
@@ -5,38 +5,19 @@
 
     <turbo-stream action="append" target="active_downloads">
         <template>
-            <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 %}
-                        <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 %}
-                </td>
-                <td></td>
-            </tr>
+            <twig:DownloadListRow download="{{ entity }}" />
         </template>
     </turbo-stream>
 {% endblock %}
 
 {% block update %}
     {% if entity.status != "Complete" %}
-        <turbo-stream action="update" target="ad_download_{{ id }}">
+        <turbo-stream action="update" target="download_progress_{{ id }}">
             <template>
-                <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-end text-gray-800 dark:text-gray-50">
-                    <div class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">
-                        <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5" style="width:{{ entity.progress }}%">{{ entity.progress }}%</div>
-                    </div>
-                </td>
-                <td></td>
+                <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5"
+                     style="width:{{ entity.progress }}%">
+                    <span>{{ entity.progress }}%</span>
+                </div>
             </template>
         </turbo-stream>
     {% else %}
@@ -54,23 +35,7 @@
 
         <turbo-stream action="prepend" target="complete_downloads">
             <template>
-                <tr  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">
-                        <twig:StatusBadge color="green" status="Complete" />
-                    </td>
-                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
-                        <button {{ stimulus_action('download_list', 'deleteDownload', 'click', {id: download.id}) }}>
-                            <twig:ux:icon
-                                    name="ic:twotone-cancel" width="18px"
-                                    class="rounded-full align-middle text-red-600"
-                                    title="Remove {{ download.title }} from download list. This will not delete the file."
-                            />
-                        </button>
-                    </td>
-                </tr>
+                <twig:DownloadListRow download="{{ entity }}" />
             </template>
         </turbo-stream>
     {% endif %}
diff --git a/templates/components/DownloadList.html.twig b/templates/components/DownloadList.html.twig
index ab6e10d..637c180 100644
--- a/templates/components/DownloadList.html.twig
+++ b/templates/components/DownloadList.html.twig
@@ -31,42 +31,7 @@
         <tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
         {% if this.downloads.items|length > 0 %}
             {% for download in this.downloads.items %}
-                <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 {% if this.isWidget == true %}min-w-[45ch] max-w-[45ch]{% endif %} truncate">
-                        {{ download.title }}
-                    </td>
-
-                    {% if this.isWidget == false %}
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
-                            {{ download.filename }}
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
-                            {{ download.mediaType }}
-                        </td>
-                    {% endif %}
-
-                    <td class="px-6 py-4 whitespace-nowrap text-sm align-middle text-gray-800 dark:text-gray-50">
-                        {% if download.progress < 100 %}
-                            <div class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">
-                                <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5"
-                                     style="width:{{ download.progress }}%">
-                                    {{ download.progress }}%
-                                </div>
-                            </div>
-                        {% else %}
-                            <twig:StatusBadge color="green" status="Complete" />
-                        {% endif %}
-                    </td>
-                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
-                        <button {{ stimulus_action('download_list', 'deleteDownload', 'click', {id: download.id}) }}>
-                            <twig:ux:icon
-                                    name="ic:twotone-cancel" width="18px"
-                                    class="rounded-full align-middle text-red-600"
-                                    title="Remove {{ download.title }} from your Download list. This will not delete the file."
-                            />
-                        </button>
-                    </td>
-                </tr>
+                <twig:DownloadListRow download="{{ download }}" isWidget="{{ this.isWidget }}" />
             {% endfor %}
             {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
                 <tr  id="download_view_all">
diff --git a/templates/components/DownloadListRow.html.twig b/templates/components/DownloadListRow.html.twig
new file mode 100644
index 0000000..12f44c9
--- /dev/null
+++ b/templates/components/DownloadListRow.html.twig
@@ -0,0 +1,36 @@
+<tr{{ attributes }} id="ad_download_{{ download.id }}">
+    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
+        {{ download.title }}
+    </td>
+
+    {% if isWidget == false %}
+        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 max-w-[60ch] truncate">
+            {{ download.filename }}
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
+            {{ download.mediaType }}
+        </td>
+    {% endif %}
+
+    <td class="px-6 py-4 whitespace-nowrap text-sm align-middle text-gray-800 dark:text-gray-50">
+        {% if download.progress < 100 %}
+            <div id="download_progress_{{ download.id }}" class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">
+                <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5"
+                     style="width:56%">
+                    <span>{{ download.progress }}%</span>
+                </div>
+            </div>
+        {% else %}
+            <twig:StatusBadge color="green" status="Complete" />
+        {% endif %}
+    </td>
+    <td class="px-6 py-4 flex flex-row align-middle justify-center">
+        <button {{ stimulus_action('download_list', 'deleteDownload', 'click', {id: download.id}) }}>
+            <twig:ux:icon
+                    name="ic:twotone-cancel" width="18px"
+                    class="rounded-full align-middle text-red-600"
+                    title="Remove {{ download.title }} from your Download list. This will not delete the file."
+            />
+        </button>
+    </td>
+</tr>
\ No newline at end of file