Merge branch 'release-2.2.3' into main

CHANGELOG.MD

@@ -1,3 +1,8 @@
+### 2.2.3
+
+- Added:
+  - Page buttons in the pagination component, implemented via a key in the existing `options` prop: `pagination.numberOfPageButtonsToShow`, which can be set to any odd number. If this key doesn't exist, the pagination will only display the arrows buttons.
+
 ### 2.2.2
 
 - Fix: Remove page buttons (numbers) from pagination

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"

src/components/filterable-table/TablePagination.vue

@@ -8,24 +8,51 @@
       class="pagination__content"
     >
       <span class="pagination__numbers">
-        {{ config.pagination.textTitle }} {{ firstItem }} - {{ lastItem }} of {{ totalItems }} {{ config.pagination.textItems }}
+        {{ options(tableId).pagination.textTitle }} {{ firstItem }} - {{ lastItem }} of {{ totalItems }} {{ options(tableId).pagination.textItems }}
       </span>
 
       <button
-        v-bind="{ 'disabled' : !previousIsActive }"
+        class="button--previous button__margin"
+        :class="{ 'disabled': !previousIsActive }"
+        @click="goToEnd('first')"
+      >
+        <svg-chevron class="button__svg" />
+        <svg-chevron class="button__svg" />
+      </button>
+
+      <button
+        class="button--previous button__margin"
+        :class="{ 'disabled': !previousIsActive }"
         @click="changePage(previousIsActive, 'previous')"
-        :class="['button--previous', { 'disabled' : !previousIsActive }]"
       >
         <svg-chevron class="button__svg" />
       </button>
 
+      <div v-for="(page, pageIndex) in pages" :key="pageIndex">
+        <button v-if="numberOfPageButtons"
+          class="button--page button__margin"
+          :class="{ 'button__page--selected': currentPage === page }"
+          @click="goToPage(page)"
+          v-text="page"
+        />
+      </div>
+
       <button
-        v-bind="{ 'disabled' : !nextIsActive }"
+        class="button--next button__margin"
+        :class="{ 'disabled' : !nextIsActive }"
         @click="changePage(nextIsActive, 'next')"
-        :class="['button--next', { 'disabled' : !nextIsActive }]"
       >
         <svg-chevron class="button__svg" />
       </button>
+
+      <button
+        class="button--next"
+        :class="{ 'disabled': !nextIsActive }"
+        @click="goToEnd('last')"
+      >
+        <svg-chevron class="button__svg" />
+        <svg-chevron class="button__svg" />
+      </button>
     </div>
 
     <p 
@@ -39,6 +66,10 @@
 
 <script>
 import SvgChevron from './svgs/SvgChevron.vue'
+import { createNamespacedHelpers } from 'vuex'
+import { range } from 'lodash'
+
+const { mapGetters, mapActions } = createNamespacedHelpers('filterableTable')
 
 export default {
   name: "TablePagination",
@@ -50,57 +81,62 @@ export default {
       required: true,
       type: Number
     },
+
     itemsPerPage: {
       required: true,
       type: Number
     },
+
     tableId: {
       required: true,
-      type: Number,
+      type: Number
     },
+
     totalItems: {
       required: true,
       type: Number
     },
+
     totalPages: {
       required: true,
       type: Number
     }
   },
 
   computed: {
-    config () {
-      return this.$store.getters['filterableTable/options'](this.tableId)
-    },
+    ...mapGetters({ options: 'options' }),
+
     cssVariables () {
       return {
-        '--svg-chevron-fill'        : this.config.pagination.chevronFill,
-        '--button-bg-color'         : this.config.pagination.buttonBgColor,
-        '--button-bg-color-disabled': this.config.pagination.buttonBgColorDisabled,
-        '--button-border-radius'    : this.config.pagination.buttonBorderRadius,
+        '--svg-chevron-fill'        : this.options(this.tableId).pagination.chevronFill,
+        '--button-bg-color'         : this.options(this.tableId).pagination.buttonBgColor,
+        '--button-bg-color-disabled': this.options(this.tableId).pagination.buttonBgColorDisabled,
+        '--button-border-radius'    : this.options(this.tableId).pagination.buttonBorderRadius,
       }
     },
+
     nextIsActive () {
       return  this.currentPage < this.totalPages
     },
+
     previousIsActive () {
       return this.currentPage > 1
     },
+
     firstItem () {
       let first
 
-      if(this.totalItems == 0) {
+      if (this.totalItems === 0) {
         first = 0
-
       } else if (this.totalItems < this.itemsPerPage) {
         first = 1
-
       } else {
         first = this.itemsPerPage * (this.currentPage - 1) + 1
       }
 
       return first
     },
+
     lastItem () {
       let lastItem = this.itemsPerPage * this.currentPage
 
@@ -110,29 +146,79 @@ export default {
 
       return lastItem
     },
+
     haveResults () {
       return this.totalItems > 0
-      // return false
-    }
+    },
+
+    numberOfPageButtons () {
+      return this.options(this.tableId).pagination.numberOfPageButtonsToShow
+    },
+
+    pages () {
+      let firstPageButton
+      let lastPageButton
+
+      // paginationRadius is the number of pages to have either side of the this.currentPage, where possible 
+      const paginationRadius = Math.round(this.numberOfPageButtons / 2)
+      const isFirstPageVisible = this.currentPage - paginationRadius >= 0
+      const isLastPageVisible = this.currentPage + paginationRadius < this.totalPages
+
+      switch (false) {
+        case isFirstPageVisible:
+          firstPageButton = 1
+          lastPageButton = Math.min(this.totalPages, this.numberOfPageButtons)
+          break
+        case isLastPageVisible:
+          lastPageButton = this.totalPages
+          firstPageButton = this.totalPages - this.numberOfPageButtons + 1
+          break
+        default:
+          firstPageButton = this.currentPage - paginationRadius + 1
+          lastPageButton = this.currentPage + paginationRadius - 1
+      }
+
+      return range(firstPageButton, lastPageButton + 1)
+    },
   },
 
   methods: {
+    ...mapActions({ updateRequestedPage: 'updateRequestedPage' }),
+
     changePage (isActive, direction) {
       // only change the page if the button is active
       if (isActive) {
         const newPage = direction == 'next' ? this.currentPage + 1 : this.currentPage - 1
-        
+
         const obj = { 
           tableId: this.tableId,
           requestedPage: newPage 
         }
 
-        this.$store.dispatch('filterableTable/updateRequestedPage', obj)
+        this.updateRequestedPage(obj)
         this.$emit('updated:page')
       }
-    }
-  }
-}
+    },
+
+    goToPage (page) {
+      const obj = {
+        tableId: this.tableId,
+        requestedPage: page,
+      };
+      this.updateRequestedPage(obj)
+      this.$emit("updated:page")
+    },
+
+    goToEnd (end) {
+      const obj = {
+        tableId: this.tableId,
+        requestedPage: (end === 'first' ? 1 : this.totalPages)
+      }
+      this.updateRequestedPage(obj)
+      this.$emit("updated:page")
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -149,6 +235,7 @@ export default {
     font-family: Arial, sans-serif; // IE11
     font-family: var(--font-family);
     margin-left: auto;
+    margin-right: rem-calc(6);
   }
 
   &__message {
@@ -158,7 +245,7 @@ export default {
   }
 }
 
-$buttons: ('next', 'previous', '');
+$buttons: ('next', 'previous', 'page', '');
 
 @for $i from 1 to length($buttons) {
   .button--#{nth($buttons, $i)} {
@@ -175,24 +262,32 @@ $buttons: ('next', 'previous', '');
 
       .button__svg { transform: rotateY(180deg); }
     }
-
     .button__svg {
       width: rem-calc(12); height: rem-calc(22);
     }
 
-    .button__page {
-      width: rem-calc(12); height: rem-calc(22); margin-right: rem-calc(10);
+    @if nth($buttons, $i) == 'page' {
+      color: #fff;
+      font-size: rem-calc(22);
     }
+
     &.disabled { 
       background-color: #ccc; // IE11 
       background-color: var(--button-bg-color-disabled); 
       cursor: disabled;
     }
   }
-}
 
+  .button__page--selected {
+    color: #8c8e8f;
+  }
+
+  .button__margin {
+    margin: rem-calc(0 6 0 0);
+  }
+}
 ::v-deep .svg-chevron {
   fill: #fff; // IE11
   fill: var(--svg-chevron-fill);
 }
-</style>
+</style>