Update file listing screen: Lazy loading, paginator, other improvements

assets/js/app/listing/Components/Table/Row/index.vue

@@ -43,8 +43,13 @@
       <div
         v-if="size === 'normal' && record.extras.image"
         class="listing__row--item is-thumbnail"
-        :style="`background-image: url('${record.extras.image.thumbnail}')`"
-      ></div>
+      >
+        <img
+          :src="record.extras.image.thumbnail"
+          style="width: 108px;"
+          loading="lazy"
+        />
+      </div>
       <!-- end column -->
 
       <!-- column meta -->

assets/scss/modules/base/_tables.scss

@@ -0,0 +1,16 @@
+table.table-compact {
+  th:first-of-type,
+  td:first-of-type {
+    padding-left: 0.8rem;
+  }
+
+  th:last-of-type,
+  td:last-of-type {
+    padding-right: 0.8rem;
+  }
+
+  th,
+  td {
+    padding: 0.3rem;
+  }
+}

assets/scss/modules/base/base.scss

@@ -3,3 +3,4 @@
 @import '_status';
 @import '_notification';
 @import '_buttons';
+@import '_tables';

assets/scss/modules/listing/row/row.scss

@@ -71,8 +71,9 @@ $checkbox-row-width: 32px;
         top: 0.25rem;
         display: block;
         flex: 0 0 20%;
-        max-width: 100px;
-        max-height: 70px;
+        max-width: 108px;
+        max-height: 86px;
+        overflow: hidden;
         border-radius: $border-radius 0 0 $border-radius;
         background-color: var(--shade-400);
         background-repeat: no-repeat;
@@ -83,7 +84,6 @@ $checkbox-row-width: 32px;
       @include media-breakpoint-up(md) {
         order: 2;
         top: 0;
-        max-height: none;
       }
 
       & ~ .is-excerpt {

src/Controller/Backend/FilemanagerController.php

@@ -9,6 +9,8 @@
 use Bolt\Controller\TwigAwareController;
 use Bolt\Repository\MediaRepository;
 use Bolt\Utils\Excerpt;
+use Pagerfanta\Adapter\ArrayAdapter;
+use Pagerfanta\Pagerfanta;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security;
 use Symfony\Component\Finder\Finder;
 use Symfony\Component\HttpFoundation\Request;
@@ -31,6 +33,8 @@ class FilemanagerController extends TwigAwareController implements BackendZoneIn
     /** @var SessionInterface */
     private $session;
 
+    private const PAGESIZE = 60;
+
     public function __construct(FileLocations $fileLocations, MediaRepository $mediaRepository, SessionInterface $session)
     {
         $this->fileLocations = $fileLocations;
@@ -58,17 +62,20 @@ public function filemanager(string $location, Request $request): Response
         $location = $this->fileLocations->get($location);
 
         $finder = $this->findFiles($location->getBasepath(), $path);
+        $folders = $this->findFolders($location->getBasepath(), $path);
 
-        $media = $this->mediaRepository->findAll();
+        $currentPage = (int) $request->query->get('page', 1);
+        $pager = $this->createPaginator($finder, $currentPage);
 
         $parent = $path !== '/' ? Path::canonicalize($path . '/..') : '';
 
         return $this->renderTemplate('@bolt/finder/finder.html.twig', [
             'path' => $path,
             'location' => $location,
-            'finder' => $finder,
+            'finder' => $pager,
+            'folders' => $folders,
             'parent' => $parent,
-            'media' => $media,
+            'media' => $this->mediaRepository->findAll(),
             'allfiles' => $location->isShowAll() ? $this->buildIndex($location->getBasepath()) : false,
             'view' => $view,
         ]);
@@ -79,11 +86,30 @@ private function findFiles(string $base, string $path): Finder
         $fullpath = Path::canonicalize($base . '/' . $path);
 
         $finder = new Finder();
-        $finder->in($fullpath)->depth('== 0')->sortByName();
+        $finder->in($fullpath)->depth('== 0')->files()->sortByName();
 
         return $finder;
     }
 
+    private function findFolders(string $base, string $path): Finder
+    {
+        $fullpath = Path::canonicalize($base . '/' . $path);
+
+        $finder = new Finder();
+        $finder->in($fullpath)->depth('== 0')->directories()->sortByName();
+
+        return $finder;
+    }
+
+    private function createPaginator(Finder $finder, int $page): Pagerfanta
+    {
+        $paginator = new Pagerfanta(new ArrayAdapter(iterator_to_array($finder, true)));
+        $paginator->setMaxPerPage(self::PAGESIZE);
+        $paginator->setCurrentPage($page);
+
+        return $paginator;
+    }
+
     private function buildIndex(string $base)
     {
         $fullpath = Path::canonicalize($base);

templates/finder/_files_cards.html.twig

@@ -1,5 +1,5 @@
-<div class="row">
-    {% for file in finder.files() %}
+<div class="row" id="files-cards">
+    {% for file in finder %}
 
         {% set extension = file.extension() %}
         {% set filename = path ~ file.getRelativePathname() %}
@@ -29,10 +29,10 @@
         <div class="card">
             {%- if thumbnail -%}
                 <a class="lightbox" href="{{ filename|thumbnail(width = 1000, height = 1000, location = location.key) }}">
-                    <img class="card-img-top" src="{{ thumbnail }}">
+                    <img class="card-img-top" src="{{ thumbnail }}" loading="lazy">
                 </a>
             {% else %}
-                <img class="card-img-top" src="{{ asset('assets/images/placeholder.png', 'public') }}">
+                <img class="card-img-top" src="{{ asset('assets/images/placeholder.png', 'public') }}" loading="lazy">
             {%- endif -%}
 
             <div class="card-body p-2">

templates/finder/_files_list.html.twig

@@ -1,5 +1,5 @@
 
-<table class="table table-striped" style="background-color: #FFF;">
+<table class="table table-striped table-compact" id="files-list" style="background-color: #FFF;">
     <thead class="thead-light">
     <tr>
         <th></th>
@@ -11,7 +11,7 @@
     </tr>
     </thead>
 
-    {% for file in finder.files() %}
+    {% for file in finder %}
 
         {% set extension = file.extension() %}
         {% set filename = path ~ file.getRelativePathname() %}
@@ -42,24 +42,25 @@
             <td>
                 <b>
                     <a href="{{ link }}">
-                        {{ file.getRelativePathname }}
+                        {{ file.getRelativePathname|shy }}
                     </a>
                 </b>
                 {% if title %}<br><small style="color: #888;">{{ title }}</small>{% endif %}
             </td>
-            <td class="listing-thumb" style="padding: 0.2em;">
+            <td class="listing-thumb">
                 {%- if thumbnail -%}
                     <a class="lightbox"
                        href="{{ filename|thumbnail(width = 1000, height = 1000, location = location.key, fit = 'crop') }}">
-                    <img src="{{ thumbnail }}" width="100" height="72">
+                    <img src="{{ thumbnail }}" loading="lazy" width="100" height="72">
                     </a>
                 {%- else -%}
                     &nbsp;
                 {%- endif -%}
             </td>
             <td>
-                {{ file.getSize()|format_bytes(1) }}
-                {% if dimensions %}<br><small style="color: #888;">{{ dimensions }}</small>{% endif %}
+                <small style="color: #888; white-space:nowrap;">{{ file.getSize()|format_bytes(1) }}
+                {% if dimensions %}<br>{{ dimensions }}{% endif %}
+                </small>
             </td>
             <td>
                 <small style="color: #888;">{{ file.getCTime()|date('Y-m-d H:i:s') }}</small>

templates/finder/_folders.html.twig

@@ -1,52 +1,40 @@
+<table class="table table-striped table-compact" id="files-folders" style="background-color: #FFF;">
+    <thead class="thead-light">
+    <tr>
+        <th><i class="fas fa-folder"></i> {{ 'caption.folders'|trans }}</th>
+        <th>{{ 'directoryname'|trans }}</th>
+        <th>{{ 'actions'|trans }}</th>
+    </tr>
+    </thead>
 
+    {% if path != '/' %}
+        <tr>
+            <td><i class="fas fa-folder-open"></i></td>
+            <td>
+                <b>
+                    <a href="{{ path('bolt_filemanager', {'location': location.key, 'path': parent }) }}">
+                        ../
+                    </a>
+                </b>
+            </td>
+            <td>
+            </td>
+        </tr>
+    {% endif %}
 
-<div class="card mb-4">
-    <div class="card-header">
-        <i class="fas fa-folder"></i>
-        {{ 'caption.folders'|trans }}
-    </div>
-    <div class="card-body" style="padding: 0.5rem 0.5rem 0">
-
-        <table class="table table-striped" style="background-color: #FFF;">
-            <thead class="thead-light">
-            <tr>
-                <th></th>
-                <th>{{ 'directoryname'|trans }}</th>
-                <th>{{ 'actions'|trans }}</th>
-            </tr>
-            </thead>
-
-            {% if path != '/' %}
-                <tr>
-                    <td><i class="fas fa-folder-open"></i></td>
-                    <td>
-                        <b>
-                            <a href="{{ path('bolt_filemanager', {'location': location.key, 'path': parent }) }}">
-                                ../
-                            </a>
-                        </b>
-                    </td>
-                    <td>
-                    </td>
-                </tr>
-            {% endif %}
-
-            {% for directory in finder.directories() %}
-                <tr>
-                    <td><i class="fas fa-folder"></i></td>
-                    <td>
-                        <b>
-                            {% set dirname = path ~ directory.getRelativePathname() %}
-                            <a href="{{ path('bolt_filemanager', {'location': location.key, 'path': dirname }) }}">
-                                {{ directory.getRelativePathname }}/
-                            </a>
-                        </b>
-                    </td>
-                    <td>
-                    </td>
-                </tr>
-            {% endfor %}
-        </table>
-
-    </div>
-</div>
+    {% for directory in folders.directories() %}
+        <tr>
+            <td><i class="fas fa-folder"></i></td>
+            <td>
+                <b>
+                    {% set dirname = path ~ directory.getRelativePathname() %}
+                    <a href="{{ path('bolt_filemanager', {'location': location.key, 'path': dirname }) }}">
+                        {{ directory.getRelativePathname }}/
+                    </a>
+                </b>
+            </td>
+            <td>
+            </td>
+        </tr>
+    {% endfor %}
+</table>

templates/finder/finder.html.twig

@@ -15,6 +15,8 @@
 
     {% include '@bolt/finder/_quickselect.html.twig' %}
 
+    {% include '@bolt/finder/_folders.html.twig' %}
+
     {% set imageformats = ['gif', 'jpg', 'jpeg', 'png', 'svg'] %}
 
     {% if view == 'list' %}
@@ -23,6 +25,8 @@
         {% include '@bolt/finder/_files_cards.html.twig' %}
     {% endif %}
 
+    {{ pager(finder, template = '@bolt/helpers/_pager_bootstrap.html.twig', class="justify-content-center") }}
+
 {% endblock %}
 
 {% block aside %}
@@ -45,8 +49,6 @@
     </div>
 </div>
 
-    {% include '@bolt/finder/_folders.html.twig' %}
-
     {% include '@bolt/finder/_uploader.html.twig' %}
 
 {% endblock aside %}

tests/e2e/filemanager.feature

@@ -15,7 +15,7 @@ Feature: Filemanager
     Given I am logged in as "admin"
     And I am on "/bolt/filemanager/files"
 
-    Then I should see "_b-penguin.jpeg" in the 3rd ".admin__body--main tr" element
+    Then I should see "_b-penguin.jpeg" in the 3rd "#files-list tr" element
 
     When I click the 2nd ".edit-actions__dropdown-toggler"
     And I follow "Delete _b-penguin.jpeg"
@@ -32,7 +32,7 @@ Feature: Filemanager
     Given I am logged in as "admin"
     And I am on "/bolt/filemanager/files"
 
-    Then I should see "_a-sunrise.jpeg" in the 2nd ".admin__body--main tr" element
+    Then I should see "_a-sunrise.jpeg" in the 2nd "#files-list tr" element
 
     When I click the 1st ".edit-actions__dropdown-toggler"
     And I follow "Delete _a-sunrise.jpeg"
@@ -42,14 +42,14 @@ Feature: Filemanager
     When I press "Cancel"
 
     Then I should not see "File deleted successfully"
-    And I should see "_a-sunrise.jpeg" in the 2nd ".admin__body--main tr" element
+    And I should see "_a-sunrise.jpeg" in the 2nd "#files-list tr" element
 
   @javascript
   Scenario: As an Admin I want to duplicate a file
     Given I am logged in as "admin"
     And I am on "/bolt/filemanager/files"
 
-    Then I should see "_a-sunrise.jpeg" in the 2nd ".admin__body--main tr" element
+    Then I should see "_a-sunrise.jpeg" in the 2nd "#files-list tr" element
     And I should not see "I should see _a-sunrise (1).jpeg"
 
     When I click the 1st ".edit-actions__dropdown-toggler"

translations/messages.de.xlf

@@ -1072,7 +1072,7 @@
     <unit id=".fL0AbE" name="files_list.remark">
       <segment>
         <source>files_list.remark</source>
-        <target>Keine Dateien im Ordner vorhanden, bitte wähle auf der rechten Seite ein  	Verzeichnis aus!</target>
+        <target>Keine Dateien im Ordner vorhanden, bitte wähle ein Verzeichnis aus!</target>
       </segment>
     </unit>
     <unit id="283aB_E" name="caption.file_upload.upload_text">

translations/messages.en.xlf

@@ -1554,7 +1554,7 @@
     <unit id=".fL0AbE" name="files_list.remark">
       <segment>
         <source>files_list.remark</source>
-        <target>No files are present in this folder. Select a folder to navigate to, on the right-hand side.</target>
+        <target>No files are present in this folder. Select a folder to navigate to.</target>
       </segment>
     </unit>
     <unit id="v6cfPyt" name="quickselect.title_select">

translations/messages.nl.xlf

@@ -981,7 +981,7 @@
     <unit id=".fL0AbE" name="files_list.remark">
       <segment>
         <source>files_list.remark</source>
-        <target>__files_list.remark</target>
+        <target>Er staan geen bestanden in deze map. Kies een map om naar toe te navigeren.</target>
       </segment>
     </unit>
     <unit id="I2ykiIZ" name="caption.folders">