From 2e641520dcb1bc89e7dcc218111c1749eb86d071 Mon Sep 17 00:00:00 2001
From: LrxGaelle <gaelle@bimdata.io>
Date: Wed, 13 Apr 2022 11:13:58 +0200
Subject: [PATCH] PATCH: add possibility to custom paginatedList : (#191)

* add possibility to custom paginatedList :

- background-color property
- display or not number of data elements
- display or not first and last chevron icons

* add default value for backgroundColor props
---
 .../BIMDataNavigation/BIMDataNavigation.vue   |  9 ++++++++-
 .../BIMDataNavigation/_BIMDataNavigation.scss |  1 -
 .../BIMDataPaginatedList.vue                  | 20 +++++++++++++++++++
 .../BIMDataPagination/BIMDataPagination.vue   | 11 +++++++++-
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
index 2806bef4..3c550ea9 100644
--- a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
+++ b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
@@ -1,5 +1,8 @@
 <template>
-  <ul class="bimdata-list bimdata-navigation">
+  <ul
+    class="bimdata-list bimdata-navigation"
+    :style="{ 'background-color': backgroundColor }"
+  >
     <li class="bimdata-navigation__left m-r-6">
       <slot name="left"></slot>
     </li>
@@ -107,6 +110,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-white)",
+    },
   },
   emits: ["first", "previous", "next", "last"],
 };
diff --git a/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss b/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss
index 03b55526..3d9d56a5 100644
--- a/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss
+++ b/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss
@@ -4,7 +4,6 @@
   height: 38px;
   justify-content: center;
   align-items: center;
-  background-color: var(--color-white);
   &__item {
     padding: 6px 2px;
 
diff --git a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
index 1be88d57..09e73556 100644
--- a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
+++ b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
@@ -24,6 +24,10 @@
         @pagechanged="onPageChange"
         :totalPages="totalPages"
         :perPage="perPage"
+        :first="first"
+        :last="last"
+        :numberDataElements="numberDataElements"
+        :backgroundColor="backgroundColor"
       />
     </div>
   </div>
@@ -57,6 +61,22 @@ export default {
       type: Boolean,
       default: false,
     },
+    first: {
+      type: Boolean,
+      default: true,
+    },
+    last: {
+      type: Boolean,
+      default: true,
+    },
+    numberDataElements: {
+      type: Boolean,
+      default: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-white)",
+    },
   },
   emits: ["element-click"],
   data() {
diff --git a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
index 0d7fb0ee..b17e3acb 100644
--- a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
+++ b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
@@ -9,8 +9,9 @@
     :nextDisabled="isLastPage"
     :lastDisabled="isLastPage"
     class="bimdata-pagination"
+    :backgroundColor="backgroundColor"
   >
-    <template #left>
+    <template #left v-if="numberDataElements">
       {{ firstIndex }} - {{ lastIndex }} of {{ length }}
     </template>
     <span class="bimdata-pagination__item">
@@ -43,6 +44,14 @@ export default {
       type: Number,
       required: true,
     },
+    numberDataElements: {
+      type: Boolean,
+      default: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-white)",
+    },
     perPage: {
       type: Number,
       required: true,