Merge pull request #857 from StApostol/master

Add pagination

Author: streamtw

public/css/lfm.css

@@ -189,7 +189,8 @@ a {
 
 /* Items */
 
-#content.preserve_actions_space {
+#pagination.preserve_actions_space {
+  padding-top: 1em;
   padding-bottom: 4rem; /* preserve space for main actions */
 }
 

public/js/script.js

@@ -297,7 +297,8 @@ var refreshFoldersAndItems = function (data) {
 
 var hideNavAndShowEditor = function (data) {
   $('#nav-buttons > ul').addClass('d-none');
-  $('#content').html(data).removeClass('preserve_actions_space');
+  $('#content').html(data);
+  $('#pagination').removeClass('preserve_actions_space')
   clearSelected();
 }
 
@@ -309,20 +310,131 @@ function loadFolders() {
     });
 }
 
-function loadItems() {
+function generatePaginationHTML(el, args) {
+  var template = '<li class="page-item"><\/li>';
+  var linkTemplate = '<a class="page-link"><\/a>';
+  var currentPage = args.currentPage;
+  var totalPage = args.totalPage;
+  var rangeStart = args.rangeStart;
+  var rangeEnd = args.rangeEnd;
+  var i;
+
+  // Disable page range, display all the pages
+  if (args.pageRange === null) {
+    for (i = 1; i <= totalPage; i++) {
+      var button = $(template)
+        .attr('data-num', i)
+        .append($(linkTemplate).html(i));
+      if (i == currentPage) {
+        button.addClass('active');
+      }
+      el.append(button);
+    }
+
+    return;
+  }
+
+  if (rangeStart <= 3) {
+    for (i = 1; i < rangeStart; i++) {
+      var button = $(template)
+        .attr('data-num', i)
+        .append($(linkTemplate).html(i));
+      if (i == currentPage) {
+        button.addClass('active');
+      }
+      el.append(button);
+    }
+  } else {
+    var button = $(template)
+      .attr('data-num', 1)
+      .append($(linkTemplate).html(1));
+    el.append(button);
+
+    var button = $(template)
+      .addClass('disabled')
+      .append($(linkTemplate).html('...'));
+    el.append(button);
+  }
+
+  for (i = rangeStart; i <= rangeEnd; i++) {
+    var button = $(template)
+      .attr('data-num', i)
+      .append($(linkTemplate).html(i));
+    if (i == currentPage) {
+      button.addClass('active');
+    }
+    el.append(button);
+  }
+
+  if (rangeEnd >= totalPage - 2) {
+    for (i = rangeEnd + 1; i <= totalPage; i++) {
+      var button = $(template)
+        .attr('data-num', i)
+        .append($(linkTemplate).html(i));
+      el.append(button);
+    }
+  } else {
+    var button = $(template)
+      .addClass('disabled')
+      .append($(linkTemplate).html('...'));
+    el.append(button);
+
+    var button = $(template)
+      .attr('data-num', totalPage)
+      .append($(linkTemplate).html(totalPage));
+    el.append(button);
+  }
+}
+
+function createPagination(paginationSetting) {
+  var el = $('<ul class="pagination" role="navigation"></ul>');
+
+  var currentPage = paginationSetting.current_page;
+  var pageRange = 5;
+  var totalPage = Math.ceil(paginationSetting.total / paginationSetting.per_page);
+
+  var rangeStart = currentPage - pageRange;
+  var rangeEnd = currentPage + pageRange;
+
+  if (rangeEnd > totalPage) {
+    rangeEnd = totalPage;
+    rangeStart = totalPage - pageRange * 2;
+    rangeStart = rangeStart < 1 ? 1 : rangeStart;
+  }
+
+  if (rangeStart <= 1) {
+    rangeStart = 1;
+    rangeEnd = Math.min(pageRange * 2 + 1, totalPage);
+  }
+
+  generatePaginationHTML(el, {
+    totalPage: totalPage,
+    currentPage: currentPage,
+    pageRange: pageRange,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd
+  });
+
+  $('#pagination').append(el);
+}
+
+function loadItems(page) {
   loading(true);
-  performLfmRequest('jsonitems', {show_list: show_list, sort_type: sort_type}, 'html')
+  performLfmRequest('jsonitems', {show_list: show_list, sort_type: sort_type, page: page || 1}, 'html')
     .done(function (data) {
       selected = [];
       var response = JSON.parse(data);
       var working_dir = response.working_dir;
       items = response.items;
       var hasItems = items.length !== 0;
+      var hasPaginator = !!response.paginator;
       $('#empty').toggleClass('d-none', hasItems);
       $('#content').html('').removeAttr('class');
+      $('#pagination').html('').removeAttr('class');
 
       if (hasItems) {
-        $('#content').addClass(response.display).addClass('preserve_actions_space');
+        $('#content').addClass(response.display);
+        $('#pagination').addClass('preserve_actions_space');
 
         items.forEach(function (item, index) {
           var template = $('#item-template').clone()
@@ -352,6 +464,18 @@ function loadItems() {
         });
       }
 
+      if (hasPaginator) {
+        createPagination(response.paginator);
+
+        $('#pagination a').on('click', function(event) {
+          event.preventDefault();
+
+          loadItems($(this).closest('li')[0].getAttribute('data-num'));
+
+          return false;
+        });
+      }
+
       $('#nav-buttons > ul').removeClass('d-none');
 
       $('#working_dir').val(working_dir);

src/Controllers/ItemsController.php

@@ -16,10 +16,20 @@ class ItemsController extends LfmController
      */
     public function getItems()
     {
+        $currentPage = self::getCurrentPageFromRequest();
+
+        $perPage = $this->helper->getPaginationPerPage();
+        $items = array_merge($this->lfm->folders(), $this->lfm->files());
+
         return [
             'items' => array_map(function ($item) {
                 return $item->fill()->attributes;
-            }, array_merge($this->lfm->folders(), $this->lfm->files())),
+            }, array_slice($items, ($currentPage - 1) * $perPage, $perPage)),
+            'paginator' => [
+                'current_page' => $currentPage,
+                'total' => count($items),
+                'per_page' => $perPage,
+            ],
             'display' => $this->helper->getDisplayMode(),
             'working_dir' => $this->lfm->path('working_dir'),
         ];
@@ -76,4 +86,12 @@ public function domove()
 
         return parent::$success_response;
     }
+
+    private static function getCurrentPageFromRequest()
+    {
+        $currentPage = (int) request()->get('page', 1);
+        $currentPage = $currentPage < 1 ? 1 : $currentPage;
+
+        return $currentPage;
+    }
 }

src/Lfm.php

@@ -153,6 +153,11 @@ public function maxUploadSize()
         return $this->config->get('lfm.folder_categories.' . $this->currentLfmType() . '.max_size');
     }
 
+    public function getPaginationPerPage()
+    {
+        return $this->config->get("lfm.paginator.perPage", 30);
+    }
+
     /**
      * Check if users are allowed to use their private folders.
      *

src/LfmItem.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Support\Str;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Illuminate\Support\Str;
 
 class LfmItem
 {

src/config/lfm.php

@@ -74,6 +74,16 @@
         ],
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination
+    |--------------------------------------------------------------------------
+     */
+
+    'paginator' => [
+        'perPage' => 30,
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Upload / Validation

src/views/index.blade.php

@@ -92,6 +92,7 @@
       </div>
 
       <div id="content"></div>
+      <div id="pagination"></div>
 
       <a id="item-template" class="d-none">
         <div class="square"></div>