From cd271b568b46bcb32bda374b4d4aa46afbf4456a Mon Sep 17 00:00:00 2001 From: Brock H Caldwell Date: Fri, 25 Apr 2025 21:50:51 -0500 Subject: [PATCH] feat: converts active download list to live component with polling --- assets/controllers.json | 12 ++- composer.json | 1 + composer.lock | 96 ++++++++++++++++++- config/bundles.php | 1 + config/routes/ux_live_component.yaml | 5 + importmap.php | 3 + src/Controller/IndexController.php | 2 +- .../Repository/DownloadRepository.php | 3 +- src/Twig/Components/ActiveDownloadList.php | 24 +++++ symfony.lock | 12 +++ .../components/ActiveDownloadList.html.twig | 39 ++++++++ templates/index/index.html.twig | 37 +------ 12 files changed, 195 insertions(+), 40 deletions(-) create mode 100644 config/routes/ux_live_component.yaml create mode 100644 src/Twig/Components/ActiveDownloadList.php create mode 100644 templates/components/ActiveDownloadList.html.twig diff --git a/assets/controllers.json b/assets/controllers.json index a1c6e90..b980571 100644 --- a/assets/controllers.json +++ b/assets/controllers.json @@ -1,4 +1,14 @@ { - "controllers": [], + "controllers": { + "@symfony/ux-live-component": { + "live": { + "enabled": true, + "fetch": "eager", + "autoimport": { + "@symfony/ux-live-component/dist/live.min.css": true + } + } + } + }, "entrypoints": [] } diff --git a/composer.json b/composer.json index 987ac94..f3e544a 100644 --- a/composer.json +++ b/composer.json @@ -29,6 +29,7 @@ "symfony/stimulus-bundle": "^2.24", "symfony/twig-bundle": "7.2.*", "symfony/ux-icons": "^2.24", + "symfony/ux-live-component": "^2.24", "symfony/ux-twig-component": "^2.24", "symfony/yaml": "7.2.*", "symfonycasts/tailwind-bundle": "^0.10.0", diff --git a/composer.lock b/composer.lock index 1fc4b62..2d4799d 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "0448ecb537f5d169d81a56ba2b3c2cc6", + "content-hash": "09d927397449bd08c7c2b96e35d2bd60", "packages": [ { "name": "1tomany/data-uri", @@ -6976,6 +6976,100 @@ ], "time": "2025-04-04T17:32:18+00:00" }, + { + "name": "symfony/ux-live-component", + "version": "v2.24.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/ux-live-component.git", + "reference": "ee1a8e5d01f5b3f2f8e6856941fa8c944677e41c" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/ux-live-component/zipball/ee1a8e5d01f5b3f2f8e6856941fa8c944677e41c", + "reference": "ee1a8e5d01f5b3f2f8e6856941fa8c944677e41c", + "shasum": "" + }, + "require": { + "php": ">=8.1", + "symfony/deprecation-contracts": "^2.5|^3.0", + "symfony/property-access": "^5.4.5|^6.0|^7.0", + "symfony/property-info": "^5.4|^6.0|^7.0", + "symfony/stimulus-bundle": "^2.9", + "symfony/ux-twig-component": "^2.8", + "twig/twig": "^3.8.0" + }, + "conflict": { + "symfony/config": "<5.4.0" + }, + "require-dev": { + "doctrine/annotations": "^1.0", + "doctrine/collections": "^1.6.8|^2.0", + "doctrine/doctrine-bundle": "^2.4.3", + "doctrine/orm": "^2.9.4", + "doctrine/persistence": "^2.5.2|^3.0", + "phpdocumentor/reflection-docblock": "5.x-dev", + "symfony/dependency-injection": "^5.4|^6.0|^7.0", + "symfony/expression-language": "^5.4|^6.0|^7.0", + "symfony/form": "^5.4|^6.0|^7.0", + "symfony/framework-bundle": "^5.4|^6.0|^7.0", + "symfony/options-resolver": "^5.4|^6.0|^7.0", + "symfony/phpunit-bridge": "^6.1|^7.0", + "symfony/security-bundle": "^5.4|^6.0|^7.0", + "symfony/serializer": "^5.4|^6.0|^7.0", + "symfony/twig-bundle": "^5.4|^6.0|^7.0", + "symfony/validator": "^5.4|^6.0|^7.0", + "zenstruck/browser": "^1.2.0", + "zenstruck/foundry": "^2.0" + }, + "type": "symfony-bundle", + "extra": { + "thanks": { + "url": "https://github.com/symfony/ux", + "name": "symfony/ux" + } + }, + "autoload": { + "psr-4": { + "Symfony\\UX\\LiveComponent\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Live components for Symfony", + "homepage": "https://symfony.com", + "keywords": [ + "components", + "symfony-ux", + "twig" + ], + "support": { + "source": "https://github.com/symfony/ux-live-component/tree/v2.24.0" + }, + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2025-03-12T08:41:47+00:00" + }, { "name": "symfony/ux-twig-component", "version": "v2.24.0", diff --git a/config/bundles.php b/config/bundles.php index c36f24a..2adc20d 100644 --- a/config/bundles.php +++ b/config/bundles.php @@ -13,4 +13,5 @@ return [ Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true], Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true], Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true], + Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true], ]; diff --git a/config/routes/ux_live_component.yaml b/config/routes/ux_live_component.yaml new file mode 100644 index 0000000..e56523a --- /dev/null +++ b/config/routes/ux_live_component.yaml @@ -0,0 +1,5 @@ +live_component: + resource: '@LiveComponentBundle/config/routes.php' + prefix: '/_components' + # adjust prefix to add localization to your components + #prefix: '/{_locale}/_components' diff --git a/importmap.php b/importmap.php index cbb8293..176ca69 100644 --- a/importmap.php +++ b/importmap.php @@ -22,4 +22,7 @@ return [ '@symfony/stimulus-bundle' => [ 'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js', ], + '@symfony/ux-live-component' => [ + 'path' => './vendor/symfony/ux-live-component/assets/dist/live_controller.js', + ], ]; diff --git a/src/Controller/IndexController.php b/src/Controller/IndexController.php index b9a805e..6906f59 100644 --- a/src/Controller/IndexController.php +++ b/src/Controller/IndexController.php @@ -19,7 +19,7 @@ final class IndexController extends AbstractController public function index(): Response { return $this->render('index/index.html.twig', [ - 'active_downloads' => [], + 'active_downloads' => $this->downloadRepository->getActivePaginated(), 'recent_downloads' => $this->downloadRepository->latest(5), 'popular_movies' => $this->tmdb->popularMovies(1, 6), ]); diff --git a/src/Download/Framework/Repository/DownloadRepository.php b/src/Download/Framework/Repository/DownloadRepository.php index aa259f4..faa3e0c 100644 --- a/src/Download/Framework/Repository/DownloadRepository.php +++ b/src/Download/Framework/Repository/DownloadRepository.php @@ -36,11 +36,12 @@ class DownloadRepository extends ServiceEntityRepository return new \Doctrine\ORM\Tools\Pagination\Paginator($query); } - public function getActivePaginated(int $pageNumber = 1, int $perPage = 10) + public function getActivePaginated(int $pageNumber = 1, int $perPage = 5) { $firstResult = ($pageNumber - 1) * $perPage; $query = $this->createQueryBuilder('d') ->andWhere('d.status IN (:statuses)') + ->orderBy('d.id', 'DESC') ->setParameter('statuses', ['New', 'In Progress']) ->setFirstResult($firstResult) ->setMaxResults($perPage) diff --git a/src/Twig/Components/ActiveDownloadList.php b/src/Twig/Components/ActiveDownloadList.php new file mode 100644 index 0000000..0856afc --- /dev/null +++ b/src/Twig/Components/ActiveDownloadList.php @@ -0,0 +1,24 @@ +downloadRepository->getActivePaginated(); + } +} diff --git a/symfony.lock b/symfony.lock index 1c00bb2..e7027e6 100644 --- a/symfony.lock +++ b/symfony.lock @@ -199,6 +199,18 @@ "assets/icons/symfony.svg" ] }, + "symfony/ux-live-component": { + "version": "2.24", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "2.6", + "ref": "73e69baf18f47740d6f58688c5464b10cdacae06" + }, + "files": [ + "config/routes/ux_live_component.yaml" + ] + }, "symfony/ux-twig-component": { "version": "2.24", "recipe": { diff --git a/templates/components/ActiveDownloadList.html.twig b/templates/components/ActiveDownloadList.html.twig new file mode 100644 index 0000000..e9c4008 --- /dev/null +++ b/templates/components/ActiveDownloadList.html.twig @@ -0,0 +1,39 @@ + + + + + + + + + + {% if this.getDownloads()|length > 0 %} + {% for download in this.getDownloads() %} + + + + + {% endfor %} + {% else %} + + + + {% endif %} + +
+ Title + + Progress +
+ {{ download.title }} + + + {{ download.progress }} + +
+ No active downloads +
+ + diff --git a/templates/index/index.html.twig b/templates/index/index.html.twig index f81ecba..c4b1ade 100644 --- a/templates/index/index.html.twig +++ b/templates/index/index.html.twig @@ -7,42 +7,7 @@

Dashboard

- - - - - - - - - {% if active_downloads|length > 0 %} - {% for download in active_downloads %} - - - - - {% endfor %} - {% else %} - - - - {% endif %} - -
- Title - - Progress -
- {{ download.title }} - - - {{ download.progress }} - -
- No active downloads -
+