wip: toggling visibility of newly added download

assets/controllers/download_list_controller.js

@@ -7,7 +7,13 @@ import { getComponent } from '@symfony/ux-live-component';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
-    static targets = ['download']
+    static targets = ['download', 'downloadRow', 'viewAllBtn']
+    static values = {
+        isWidget: Boolean,
+        perPage: Number,
+    }
+
+    component = null;
 
     async initialize() {
         this.component = await getComponent(this.element);
@@ -22,9 +28,38 @@ export default class extends Controller {
         // this.fooTarget.addEventListener('click', this._fooBar)
     }
 
+    downloadRowTargetConnected(target) {
+        if (Boolean(target.getAttribute('isBroadcasted')) === true) {
+            this.viewAllBtnTarget.parentElement.append(this.viewAllBtnTarget);
+            if (this.downloadRowTargets.length > this.perPageValue) {
+                target.classList.add('hidden');
+                this.viewAllBtnTarget.classList.remove('hidden');
+            } else {
+                this.viewAllBtnTarget.classList.add('hidden');
+            }
+        }
+    }
+
+    downloadRowTargetDisconnected(target) {
+        this.viewAllBtnTarget.parentElement.append(this.viewAllBtnTarget);
+        let i = 1;
+        this.downloadRowTargets.forEach((downloadRow) => {
+            console.log(downloadRow)
+            if (i <= this.perPageValue) {
+                downloadRow.classList.remove('hidden');
+            } else {
+                downloadRow.classList.add('hidden');
+            }
+        })
+
+        if (this.downloadRowTargets.length > this.perPage) {
+            this.viewAllBtnTarget.classList.remove('hidden');
+        }
+    }
+
     downloadTargetConnected(target) {
         let downloads = this.element.querySelectorAll('tbody tr');
-        if (downloads.length > 5) {
+        if (downloads.length > this.perPageValue) {
             target.classList.add('hidden');
         }
     }

src/Twig/Components/DownloadListRow.php

@@ -11,4 +11,6 @@ final class DownloadListRow
     public Download $download;
 
     public bool $isWidget = true;
+
+    public bool $isBroadcasted = false;
 }

templates/broadcast/Download.stream.html.twig

@@ -5,7 +5,7 @@
 
     <turbo-stream action="append" target="active_downloads">
         <template>
-            <twig:DownloadListRow download="{{ entity }}" />
+            <twig:DownloadListRow download="{{ entity }}" isBroadcasted="true" />
         </template>
     </turbo-stream>
 {% endblock %}
@@ -35,7 +35,7 @@
 
         <turbo-stream action="prepend" target="complete_downloads">
             <template>
-                <twig:DownloadListRow download="{{ entity }}" />
+                <twig:DownloadListRow download="{{ entity }}" :isBroadcasted="true" />
             </template>
         </turbo-stream>
     {% endif %}

templates/components/DownloadList.html.twig

@@ -1,5 +1,11 @@
-<div{{ attributes.defaults(stimulus_controller('download_list')) }} class="min-w-48" >
+<div{{ attributes.defaults(stimulus_controller('download_list', {isWidget: this.isWidget, perPage: this.perPage})) }} class="min-w-48" >
     {% set table_body_id = (type == "complete") ? "complete_downloads" : "active_downloads" %}
+    {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
+        {% set show_view_all = true %}
+    {% else %}
+        {% set show_view_all = false %}
+    {% endif %}
+
     <table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-auto w-full" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
         <thead>
         <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
@@ -31,15 +37,13 @@
         <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 %}
-                <twig:DownloadListRow download="{{ download }}" isWidget="{{ this.isWidget }}" />
+                <twig:DownloadListRow download="{{ download }}" isWidget="{{ this.isWidget }}" perPage="{{ this.perPage }}" />
             {% endfor %}
-            {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
+            <tr id="download_view_all" class="{{ show_view_all == false ?? "hidden" }}" {{ stimulus_target('download_list', 'viewAllBtn')}} >
-                <tr  id="download_view_all">
+                <td class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black truncate" colspan="100%">
-                    <td class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black truncate" colspan="100%">
+                    <a href="{{ path('app_downloads') }}">View All Downloads</a>
-                        <a href="{{ path('app_downloads') }}">View All Downloads</a>
+                </td>
-                    </td>
+            </tr>
-                </tr>
-            {% endif %}
         {% else %}
             <tr id="{{ table_body_id }}_no_downloads">
                 <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center font-medium text-gray-800 dark:text-stone-800" colspan="100%">

templates/components/DownloadListRow.html.twig

@@ -1,4 +1,4 @@
-<tr{{ attributes }} id="ad_download_{{ download.id }}">
+<tr{{ attributes }} id="ad_download_{{ download.id }}" {{ stimulus_target('download_list', 'downloadRow') }} isBroadcasted="{{ isBroadcasted ?? 'false' }}">
     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
         {{ download.title }}
     </td>