Render pagination links in collection panel

Author: daun

DashboardPanelCollection.module

@@ -188,17 +188,13 @@ class DashboardPanelCollection extends DashboardPanel
         // Buttons (add new)
         $buttons = $this->renderFooterButtons();
         if ($buttons) {
-            $footer .= "<div>{$buttons}</div>";
+            $footer .= "<div class='DashboardFooterButtons'>{$buttons}</div>";
         }
 
         // Pagination
-        if ($this->pagination && $this->collection->hasPagination()) {
-            $pagination = sprintf(
-                $this->_('Showing %d of %d'),
-                $this->collection->count,
-                $this->collection->getTotal()
-            );
-            $footer .= "<div>{$pagination}</div>";
+        if ($this->supportsPagination()) {
+            $pagination = $this->renderPaginationPager($this->collection);
+            $footer .= "<div class='DashboardFooterPagination'>{$pagination}</div>";
         }
 
         return $footer ? "<div>{$footer}</div>" : '';
@@ -256,15 +252,9 @@ class DashboardPanelCollection extends DashboardPanel
             }
         }
 
-        // Update collection after changes
-        // e.g. when pages trashed
+        // Update collection after changes, e.g. when pages trashed
         if ($changed) {
-            if ($this->collection instanceof PageArray) {
-                $selectors = $this->collection->getSelectors();
-                if ($selectors) {
-                    $this->collection = $this->pages->find($selectors, ['cache' => false]);
-                }
-            }
+            $this->refetchCollection();
         }
     }
 
@@ -308,11 +298,80 @@ class DashboardPanelCollection extends DashboardPanel
 
         if ($this->config->ajax) {
             $this->executeAjaxActions();
+            $this->refetchCollectionForPagination();
         }
 
         return true;
     }
 
+    protected function supportsPagination()
+    {
+        return (
+            $this->pagination &&
+            $this->collection instanceof PageArray &&
+            $this->collection->hasPagination() &&
+            $this->collection->getSelectors()
+        );
+    }
+
+    protected function refetchCollection()
+    {
+        if (!($this->collection instanceof PageArray)) {
+            return;
+        }
+
+        /** @var \ProcessWire\Selectors $selectors */
+        $selectors = $this->collection->getSelectors();
+        if (!$selectors) {
+            return;
+        }
+
+        $this->collection = $this->pages->find($selectors, ['cache' => false]);
+    }
+
+    protected function refetchCollectionForPagination()
+    {
+        if (!$this->config->ajax) return;
+        if (!$this->supportsPagination()) return;
+
+        $this->wire()->input->setPageNum($_POST['page'] ?? 1);
+        $this->refetchCollection();
+    }
+
+    protected function renderPaginationSummary(PageArray $items)
+    {
+        return sprintf(
+            $this->_('Showing %d of %d'),
+            $items->count,
+            $items->getTotal()
+        );
+    }
+
+    protected function renderPaginationPager(PageArray $items)
+    {
+        /** @var \ProcessWire\MarkupPagerNav $pager */
+        $pager = $this->wire()->modules->get('MarkupPagerNav');
+
+        $summary = $items->getPaginationString();
+        $pagination = $pager->render($items, [
+            'numPageLinks' => 3,
+            'listClass' => 'uk-pagination',
+            'listMarkup' => "<ul class='uk-pagination DashboardPagination'>{out}</ul>",
+            'linkMarkup' => "<a href='{url}' data-pagination>{out}</a>",
+            'currentItemClass' => 'uk-active',
+            'separatorItemLabel' => '<span>&hellip;</span>',
+            'separatorItemClass' => 'DashboardPaginationSeparator',
+            'currentLinkMarkup' => "<a href='{url}' data-pagination>{out}</a>",
+            'nextItemLabel' => '<i class="fa fa-angle-right"></i>',
+            'previousItemLabel' => '<i class="fa fa-angle-left"></i>',
+            'nextItemClass' => '',
+            'previousItemClass' => '',
+            'lastItemClass' => '',
+        ]);
+
+        return "<div>{$summary}</div> {$pagination}";
+    }
+
     /**
      * Render footer buttons
      * Taken from PageLister, so it should work for most cases.

src/Dashboard.css

@@ -19,6 +19,7 @@
   --dashboard-color-text-light: #97aab4;
   --dashboard-color-icon: #97aab4;
   --dashboard-color-button-bg: #f0f3f7;
+  --dashboard-color-button-border: #d7dadf;
   --dashboard-color-button-text: #354b60;
   --dashboard-color-button-hover-bg: #6c8dae;
   --dashboard-color-button-hover-text: #fff;
@@ -410,3 +411,59 @@ body.Dashboard {
     }
   }
 }
+
+/* Pagination */
+
+.DashboardPagination {
+  margin: 0;
+  > * > * {
+    background: var(--dashboard-color-button-bg);
+    color: var(--dashboard-color-button-text);
+    border-color: var(--dashboard-color-button-border);
+    transition: background 200ms, color 200ms, border 200ms;
+  }
+   > * > :hover,
+   > * > :focus {
+    background: var(--dashboard-color-button-hover-bg);
+    color: var(--dashboard-color-button-hover-text);
+    border-color: var(--dashboard-color-button-hover-bg);
+  }
+  > .uk-active > *,
+  > .uk-active > * > * {
+    background: var(--dashboard-color-button-hover-bg);
+    color: var(--dashboard-color-button-hover-text);
+    border-color: var(--dashboard-color-button-hover-bg);
+  }
+}
+
+.DashboardPaginationSeparator {
+  pointer-events: none;
+}
+
+.DashboardFooterButtons {
+  margin: -.5em;
+  display: flex;
+  flex-wrap: wrap;
+  > * {
+    display: inline-block;
+    margin: .5em;
+  }
+  .ui-button {
+    margin-right: 0;
+  }
+}
+
+.DashboardFooterPagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: flex-end;
+  margin-bottom: -.5em;
+  margin-right: -1em;
+  margin-left: auto;
+  padding-left: 1em;
+  > * {
+    margin-bottom: .5em;
+    margin-right: 1em;
+  }
+}

src/DashboardPanelCollection.css

@@ -13,7 +13,7 @@
     > div {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: baseline;
     }
   }
 

src/DashboardPanelCollection.js

@@ -3,8 +3,22 @@
 function initPanel($panel) {
   const $reloadlinks = $panel.find('.pw-modal[data-reload-on-close]');
   if ($reloadlinks.length) {
+    const page = $panel.data('page') || 1;
+    const params = { page };
     $reloadlinks.on('pw-modal-closed', () => {
-      $panel.trigger('reload', { animate: true });
+      $panel.trigger('reload', { animate: false, params });
+    });
+  }
+
+  const $paginationLinks = $panel.find('a[data-pagination]');
+  if ($paginationLinks.length) {
+    $paginationLinks.on('click', (event) => {
+      event.preventDefault();
+      const url = event.currentTarget.href;
+      const page = (url.match(/\d+$/) || [])[0] || 1;
+      const params = { page };
+      $panel.data('page', page);
+      $panel.trigger('reload', { animate: false, params });
     });
   }