Merge pull request #61 from ahmed-bhs/feature/provide-pagination-infinite-scroll

  Add traditional pagination to both admin bridges

Author: xavierlacot

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- feature - added pagination to admin bridges media lists
+
 ## [0.1.4] - 2024-11-23
 
 - fix - do not trigger an error when no library is defined

demo/application/config/packages/joli_media_easy_admin.yaml

@@ -1,4 +1,6 @@
 joli_media_easy_admin:
+    pagination:
+        per_page: 20
     visibility:
         show_variations_list: true
         show_variations_list_admin_variations: true

demo/application/config/packages/joli_media_sonata_admin.yaml

@@ -1,4 +1,6 @@
 joli_media_sonata_admin:
+    pagination:
+        per_page: 25
     visibility:
         show_variations_list: true
         show_variations_list_admin_variations: true

demo/application/src/DataFixtures/MediaFixtures.php

@@ -11,10 +11,17 @@ class MediaFixtures extends Fixture
     #[\Override]
     public function load(ObjectManager $manager): void
     {
+        $mediaRoot = __DIR__ . '/../../public/media/original';
         $filesystem = new Filesystem();
-        $filesystem->mirror(
-            __DIR__ . '/media',
-            __DIR__ . '/../../public/media/original'
-        );
+        $filesystem->mirror(__DIR__ . '/media', $mediaRoot);
+
+        $filesystem->mkdir($mediaRoot . '/many-files');
+
+        for ($i = 0; $i < 100; ++$i) {
+            $filesystem->copy(
+                __DIR__ . '/media/articles/circle-pattern.png',
+                $mediaRoot . '/many-files/circle-pattern-' . $i . '.png',
+            );
+        }
     }
 }

demo/application/src/DataFixtures/PostFixtures.php

@@ -28,7 +28,7 @@ public function load(ObjectManager $manager): void
     {
         $extensions = ['avif', 'gif', 'jpeg', 'png', 'webp'];
 
-        for ($i = 0; $i < 10; ++$i) {
+        for ($i = 0; $i < 100; ++$i) {
             $extension = $extensions[$this->faker->numberBetween(0, \count($extensions) - 1)];
             $media = $this->resolver->resolve('articles/circle-pattern.' . $extension);
             $paragraphs = [];

doc/bridges/easy-admin.rst

@@ -37,6 +37,8 @@ The integration can be configured in the ``config/packages/joli_media_easy_admin
 .. code-block:: yaml
 
     joli_media_easy_admin:
+        pagination:
+            per_page: 20
         upload:
             max_files: 10
             max_file_size: 20
@@ -53,6 +55,10 @@ The integration can be configured in the ``config/packages/joli_media_easy_admin
 Configuration Options
 ~~~~~~~~~~~~~~~~~~~~~
 
+The ``pagination`` section controls how media items are loaded and displayed:
+
+- ``per_page``: Number of media items to display per page (default: ``20``). This improves performance for large libraries by loading only a subset of items.
+
 The ``upload`` section of the configuration allows you to control the media upload behavior in EasyAdmin:
 
 - ``max_files``: Sets the maximum number of files that can be uploaded at once.
@@ -66,8 +72,21 @@ The ``visibility`` section of the configuration allows you to control the visibi
 - ``show_html_code``: Displays the HTML code for embedding media.
 - ``show_markdown_code``: Displays the Markdown code for embedding media.
 
-Media library menu item
------------------------
+Pagination and Performance
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+For large media libraries (hundreds or thousands of files), pagination significantly improves performance by loading only a subset of items at a time. The media library uses traditional page navigation with Previous/Next buttons, which is ideal for precise navigation in very large libraries.
+
+You can configure the number of items displayed per page:
+
+.. code-block:: yaml
+
+    joli_media_easy_admin:
+        pagination:
+            per_page: 20
+
+Media libray menu item
+----------------------
 
 To add a link to the media library in your EasyAdmin menu, you need to use the ``MenuItem::linkToRoute`` method, with the ``joli_media_easy_admin_explore`` route::
 

doc/bridges/sonata-admin.rst

@@ -37,6 +37,13 @@ The integration can be configured in the ``config/packages/joli_media_sonata_adm
 .. code-block:: yaml
 
     joli_media_sonata_admin:
+        pagination:
+            per_page: 25
+        upload:
+            max_files: 10
+            max_file_size: 20
+            accepted_files:
+                - image/*
         visibility:
             show_variations_stored: true
             show_variations_action_regenerate: true
@@ -46,6 +53,10 @@ The integration can be configured in the ``config/packages/joli_media_sonata_adm
 Configuration Options
 ~~~~~~~~~~~~~~~~~~~~~
 
+The ``pagination`` section controls how media items are loaded and displayed:
+
+- ``per_page``: Number of media items to display per page (default: ``25``). This improves performance for large libraries by loading only a subset of items.
+
 The ``upload`` section of the configuration allows you to control the media upload behavior in Sonata admin:
 
 - ``max_files``: Sets the maximum number of files that can be uploaded at once.
@@ -59,6 +70,19 @@ The ``visibility`` section of the configuration allows you to control the visibi
 - ``show_html_code``: Displays the HTML code for embedding media.
 - ``show_markdown_code``: Displays the Markdown code for embedding media.
 
+Pagination and Performance
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+For large media libraries (hundreds or thousands of files), pagination significantly improves performance by loading only a subset of items at a time. The media library uses traditional page navigation with Previous/Next buttons, which is ideal for precise navigation in very large libraries.
+
+You can configure the number of items displayed per page:
+
+.. code-block:: yaml
+
+    joli_media_sonata_admin:
+        pagination:
+            per_page: 25
+
 Media selector widget
 ---------------------
 

src/Bridge/EasyAdmin/config/services.php

@@ -8,6 +8,7 @@
 use JoliCode\MediaBundle\Bridge\EasyAdmin\Form\DataTransformer\MediaTransformer;
 use JoliCode\MediaBundle\Bridge\EasyAdmin\Form\Type\MediaChoiceType;
 use JoliCode\MediaBundle\Bridge\EasyAdmin\Form\Type\UploadType;
+use JoliCode\MediaBundle\Bridge\EasyAdmin\Paginator\MediaPaginator;
 use JoliCode\MediaBundle\Bridge\Security\Voter\MediaVoter;
 use JoliCode\MediaBundle\Bridge\Twig\JoliMediaAdminExtension;
 
@@ -24,6 +25,12 @@
             '$translator' => service('translator')->ignoreOnInvalid(),
         ])
 
+        // paginator
+        ->set('joli_media_easy_admin.paginator', MediaPaginator::class)
+        ->args([
+            '$adminUrlGenerator' => service(AdminUrlGenerator::class),
+        ])
+
         // controller
         ->set('joli_media_easy_admin.controller.admin', MediaAdminController::class)
         ->args([
@@ -35,6 +42,7 @@
             '$twig' => service('twig'),
             '$formFactory' => service('form.factory'),
             '$adminUrlGenerator' => service(AdminUrlGenerator::class),
+            '$mediaPaginator' => service('joli_media_easy_admin.paginator'),
             '$authorizationChecker' => service('security.authorization_checker')->ignoreOnInvalid(),
         ])
         ->call('setContainer', [service('service_container')])

src/Bridge/EasyAdmin/src/Config/Config.php

@@ -18,6 +18,7 @@ public function __construct(
         private array $acceptedFiles,
         private int $maxFileSize,
         private ?int $maxFiles = null,
+        private int $paginationSize = 20,
     ) {
     }
 
@@ -61,4 +62,9 @@ public function getUploadOptions(): array
 
         return $config;
     }
+
+    public function getPaginationSize(): int
+    {
+        return $this->paginationSize;
+    }
 }

src/Bridge/EasyAdmin/src/Controller/MediaAdminController.php

@@ -13,6 +13,7 @@
 use JoliCode\MediaBundle\Bridge\EasyAdmin\Form\Type\RenameDirectoryType;
 use JoliCode\MediaBundle\Bridge\EasyAdmin\Form\Type\RenameType;
 use JoliCode\MediaBundle\Bridge\EasyAdmin\Form\Type\UploadType;
+use JoliCode\MediaBundle\Bridge\EasyAdmin\Paginator\MediaPaginator;
 use JoliCode\MediaBundle\Bridge\Security\Voter\AdminAction;
 use JoliCode\MediaBundle\Conversion\Converter;
 use JoliCode\MediaBundle\Exception\ForbiddenPathException;
@@ -30,6 +31,7 @@
 use Symfony\Component\Asset\VersionStrategy\JsonManifestVersionStrategy;
 use Symfony\Component\Form\FormFactoryInterface;
 use Symfony\Component\Form\FormInterface;
+use Symfony\Component\HttpFoundation\Exception\BadRequestException;
 use Symfony\Component\HttpFoundation\File\Exception\UploadException;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\JsonResponse;
@@ -53,6 +55,7 @@ public function __construct(
         private readonly Environment $twig,
         private readonly FormFactoryInterface $formFactory,
         private readonly AdminUrlGenerator $adminUrlGenerator,
+        private readonly MediaPaginator $mediaPaginator,
         private readonly ?AuthorizationCheckerInterface $authorizationChecker = null,
     ) {
     }
@@ -298,6 +301,19 @@ public function list(AdminContext $adminContext, Request $request, string $key =
             default => 'explore',
         };
 
+        try {
+            $paginatedMedias = $this->getOriginalStorage()->listMediasPaginated(
+                $currentKey,
+                recursive: false,
+                page: $request->query->getInt('page', 1),
+                perPage: $this->config->getPaginationSize(),
+            );
+        } catch (\OutOfRangeException) {
+            throw new BadRequestException('The requested page number is out of range.');
+        }
+
+        $paginator = $this->mediaPaginator->paginate($paginatedMedias, $routeName, $currentKey);
+
         return new Response($this->twig->render('@JoliMediaEasyAdmin/list.html.twig', [
             'base_template' => \sprintf('@JoliMediaEasyAdmin/%s.html.twig', $template),
             'breadcrumb' => $this->generateBreadcrumb($currentKey, $routeName),
@@ -307,7 +323,8 @@ public function list(AdminContext $adminContext, Request $request, string $key =
             'current_key' => $currentKey,
             'delete_directory_form' => $this->createDeleteDirectoryForm($key)->createView(),
             'directories' => $directories,
-            'medias' => $this->getOriginalStorage()->listMedias($currentKey, recursive: false),
+            'medias' => $paginator->getResults(),
+            'paginator' => $paginator,
             'parent_key' => \dirname($currentKey),
             'rename_directory_form' => $this->createRenameDirectoryForm($key)->createView(),
             'route_name' => $routeName,