From d2d68cbc40352040e491de335b26061329e4f7d4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Sep 2020 09:18:17 +0100
Subject: [PATCH] Improve table pagination

---
 .../database/DataTable/TablePagination.svelte | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/database/DataTable/TablePagination.svelte b/packages/builder/src/components/database/DataTable/TablePagination.svelte
index e43b8f728d..1435148ebc 100644
--- a/packages/builder/src/components/database/DataTable/TablePagination.svelte
+++ b/packages/builder/src/components/database/DataTable/TablePagination.svelte
@@ -1,15 +1,11 @@
 <script>
-  import { backendUiStore } from "builderStore"
-
   export let data
   export let currentPage
   export let pageItemCount
   export let ITEMS_PER_PAGE
 
   let numPages = 0
-
   $: numPages = Math.ceil((data?.length ?? 0) / ITEMS_PER_PAGE)
-  $: console.log(numPages)
 
   const next = () => {
     if (currentPage + 1 === numPages) return
@@ -28,8 +24,7 @@
 
 <div class="pagination">
   <div class="pagination__buttons">
-    <button on:click={previous}>Previous</button>
-    <button on:click={next}>Next</button>
+    <button on:click={previous} disabled={currentPage === 0}>&lt;</button>
     {#each Array(numPages) as _, idx}
       <button
         class:selected={idx === currentPage}
@@ -37,8 +32,19 @@
         {idx + 1}
       </button>
     {/each}
+    <button
+      on:click={next}
+      disabled={currentPage === numPages - 1 || numPages === 0}>
+      &gt;
+    </button>
   </div>
-  <p>Showing {pageItemCount} of {data.length} entries</p>
+
+  <p>
+    {#if numPages > 1}
+      Showing {ITEMS_PER_PAGE * currentPage + 1} - {ITEMS_PER_PAGE * currentPage + pageItemCount}
+      of {data.length} rows
+    {:else if numPages === 1}Showing all {data.length} row(s){/if}
+  </p>
 </div>
 
 <style>
@@ -52,26 +58,36 @@
 
   .pagination__buttons {
     display: flex;
+    border: 1px solid var(--grey-4);
+    border-radius: var(--border-radius-s);
+    overflow: hidden;
   }
 
   .pagination__buttons button {
     display: inline-block;
-    padding: 10px;
+    padding: var(--spacing-s) var(--spacing-m);
     margin: 0;
     background: #fff;
-    border: 1px solid var(--grey-4);
+    border: none;
+    outline: none;
+    border-right: 1px solid var(--grey-4);
     text-transform: capitalize;
-    border-radius: 3px;
     min-width: 20px;
     transition: 0.3s background-color;
   }
-
+  .pagination__buttons button:last-child {
+    border-right: none;
+  }
   .pagination__buttons button:hover {
     cursor: pointer;
     background-color: var(--grey-1);
   }
+  .pagination__buttons button.selected {
+    background: var(--grey-2);
+  }
 
-  .selected {
-    color: var(--blue);
+  p {
+    font-size: var(--font-size-s);
+    margin: var(--spacing-xl) 0;
   }
 </style>