MINOR: Feature/show item paginated list (#294)

* add showElement method in BIMDataPagination component * adjust documentation * delete duplicate code
bimdata · Jun 1, 2023 · b2c9a2b · b2c9a2b
1 parent 9fea142
commit b2c9a2b
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 20 deletions.
diff --git a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
@@ -8,6 +8,8 @@
           v-for="element of page"
           :key="elementKey ? element[elementKey] : element"
           @click="$emit('element-click', element)"
+          ref="elements"
+          :class="{ 'element-active': isElementActive(element) }"
         >
           <slot name="element" :element="element">
             {{ element && element.toString() }}
@@ -56,6 +58,7 @@ export default {
     },
     elementKey: {
       type: String,
+      default: "",
     },
     loading: {
       type: Boolean,
@@ -77,6 +80,9 @@ export default {
       type: String,
       default: "var(--color-white)",
     },
+    activeElement: {
+      type: [String, Number, Object],
+    },
   },
   emits: ["element-click"],
   data() {
@@ -104,11 +110,48 @@ export default {
       deep: true,
       immediate: true,
     },
+    activeElement: {
+      handler(value) {
+        if (value) {
+          this.showElement(value);
+        }
+      },
+      immediate: true,
+    },
   },
   methods: {
     onPageChange(pageNumber) {
       this.currentPage = pageNumber;
     },
+    compareElements(elementA, elementB) {
+      if (this.elementKey) {
+        return elementA[this.elementKey] === elementB[this.elementKey];
+      } else {
+        return elementA === elementB;
+      }
+    },
+    isElementActive(element) {
+      if (!this.activeElement) return false;
+      return this.compareElements(element, this.activeElement);
+    },
+    async showElement(elem) {
+      const elementIndex = this.list.findIndex(listElement =>
+        this.compareElements(elem, listElement)
+      );
+      if (elementIndex === -1) return;
+      const startIndex = this.perPage * (this.currentPage - 1);
+      const endIndex = startIndex + this.perPage;
+      const isElementInCurrentPage =
+        elementIndex >= startIndex && elementIndex < endIndex;
+      if (!isElementInCurrentPage) {
+        const elementPage = Math.ceil((elementIndex + 1) / this.perPage);
+        this.currentPage = elementPage;
+      }
+      await this.$nextTick();
+      const elementIndexOnPage = elementIndex % this.perPage;
+      const domElement = this.$refs.elements[elementIndexOnPage];
+      domElement.scrollIntoView({ block: "center" });
+    },
   },
 };
 </script>

diff --git a/src/BIMDataComponents/BIMDataPaginatedList/_BIMDataPaginatedList.scss b/src/BIMDataComponents/BIMDataPaginatedList/_BIMDataPaginatedList.scss
@@ -32,6 +32,14 @@
     height: auto;
   }
 
+  &__elements {
+    li {
+      &.element-active {
+        font-weight: bold;
+      }
+    }
+  }
+
   .bimdata-spinner {
     padding: 12px 0;
     justify-content: center;

diff --git a/src/web/views/Components/Pagination/Pagination.vue b/src/web/views/Components/Pagination/Pagination.vue
@@ -7,10 +7,18 @@
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataPaginatedList
-            :list="paginatedListExample"
+            :list="isBasicPagination ? basicPagination : complexPagination"
             :perPage="Number(numberInput)"
             :numberDataElements="isNumberDataElements"
+            elementKey="id"
+            :activeElement="{ id: +searchInList }"
           >
+            <template v-if="isBasicPagination" #element="{ element }">
+              {{ element }}
+            </template>
+            <template v-else #element="{ element }">
+              {{ element.text }}
+            </template>
           </BIMDataPaginatedList>
         </template>
 
@@ -20,9 +28,20 @@
             placeholder="Number of items per page"
             type="number"
           ></BIMDataInput>
-
+          <BIMDataToggle v-model="isBasicPagination" class="m-b-30">
+            <span>complex pagination</span>
+            <template #right><span>basic pagination</span></template>
+          </BIMDataToggle>
+          <BIMDataInput
+            v-if="!isBasicPagination"
+            margin="30px 0px 18px"
+            v-model="searchInList"
+            placeholder="Search an item in list by id"
+            type="number"
+          ></BIMDataInput>
           <BIMDataCheckbox
-            text="numberDataElements"
+            margin="24px 0 0"
+            text="Display data elements"
             v-model="isNumberDataElements"
           />
         </template>
@@ -34,9 +53,11 @@
 
         <template #code>
           <pre>
-            &lt;BIMDataPaginatedList :list="paginatedListExample" :perPage="{{
+            &lt;BIMDataPaginatedList :list="paginationList" :perPage="{{
               numberInput
-            }}"&gt;&lt;/BIMDataPaginatedList&gt;
+            }}"&gt;
+              {{ getPagination() }}
+            &lt;/BIMDataPaginatedList&gt;
           </pre>
         </template>
       </ComponentCode>
@@ -66,12 +87,15 @@
 </template>
 
 <script>
+import { basicPagination, complexPagination } from "./option-sets.js";
+
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 import BIMDataPaginatedList from "../../../../../src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue";
 import BIMDataInput from "../../../../../src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
 import BIMDataTable from "../../../../../src/BIMDataComponents/BIMDataTable/BIMDataTable.vue";
 import BIMDataText from "../../../../../src/BIMDataComponents/BIMDataText/BIMDataText.vue";
 import BIMDataCheckbox from "../../../../../src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
+import BIMDataToggle from "../../../../../src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue";
 
 export default {
   components: {
@@ -81,25 +105,16 @@ export default {
     BIMDataInput,
     BIMDataTable,
     BIMDataText,
+    BIMDataToggle,
   },
   data() {
     return {
-      numberInput: 4,
+      basicPagination,
+      complexPagination,
+      numberInput: 8,
+      searchInList: 2,
       isNumberDataElements: true,
-      paginatedListExample: [
-        "item 01",
-        "item 02",
-        "item 03",
-        "item 04",
-        "item 05",
-        "item 06",
-        "item 07",
-        "item 08",
-        "item 09",
-        "item 10",
-        "item 11",
-        "item 12",
-      ],
+      isBasicPagination: true,
       propsData: [
         ["Props", "Type", "Default value", "Description"],
         [
@@ -149,5 +164,24 @@ export default {
       ],
     };
   },
+  methods: {
+    getPagination() {
+      if (this.isBasicPagination) {
+        return `<template #element="{ element }">
+              {{ element }}
+            </template>`;
+      } else {
+        return `<template #element="{ element }">
+              {{ element.text }}
+            </template>`;
+      }
+    },
+  },
 };
 </script>
+
+<style scoped lang="scss">
+.toggle__button {
+  font-size: 12px;
+}
+</style>
diff --git a/src/web/views/Components/Pagination/option-sets.js b/src/web/views/Components/Pagination/option-sets.js
@@ -0,0 +1,72 @@
+const basicPagination = [
+  "item 01",
+  "item 02",
+  "item 03",
+  "item 04",
+  "item 05",
+  "item 06",
+  "item 07",
+  "item 08",
+  "item 09",
+  "item 10",
+  "item 11",
+  "item 12",
+];
+
+const complexPagination = [
+  { id: 1, text: "item 01" },
+  { id: 2, text: "item 02" },
+  { id: 3, text: "item 03" },
+  { id: 4, text: "item 04" },
+  { id: 5, text: "item 05" },
+  { id: 6, text: "item 06" },
+  { id: 7, text: "item 07" },
+  { id: 8, text: "item 08" },
+  { id: 9, text: "item 09" },
+  { id: 10, text: "item 10" },
+  { id: 11, text: "item 11" },
+  { id: 12, text: "item 12" },
+  { id: 13, text: "item 13" },
+  { id: 14, text: "item 14" },
+  { id: 15, text: "item 15" },
+  { id: 16, text: "item 16" },
+  { id: 17, text: "item 17" },
+  { id: 18, text: "item 18" },
+  { id: 19, text: "item 19" },
+  { id: 20, text: "item 20" },
+  { id: 21, text: "item 21" },
+  { id: 22, text: "item 22" },
+  { id: 23, text: "item 23" },
+  { id: 24, text: "item 24" },
+  { id: 25, text: "item 25" },
+  { id: 26, text: "item 26" },
+  { id: 27, text: "item 27" },
+  { id: 28, text: "item 28" },
+  { id: 29, text: "item 29" },
+  { id: 30, text: "item 30" },
+  { id: 31, text: "item 31" },
+  { id: 32, text: "item 32" },
+  { id: 33, text: "item 33" },
+  { id: 34, text: "item 34" },
+  { id: 35, text: "item 35" },
+  { id: 36, text: "item 36" },
+  { id: 37, text: "item 37" },
+  { id: 38, text: "item 38" },
+  { id: 39, text: "item 39" },
+  { id: 40, text: "item 40" },
+  { id: 41, text: "item 41" },
+  { id: 42, text: "item 42" },
+  { id: 43, text: "item 43" },
+  { id: 44, text: "item 44" },
+  { id: 45, text: "item 45" },
+  { id: 46, text: "item 46" },
+  { id: 47, text: "item 47" },
+  { id: 48, text: "item 48" },
+  { id: 49, text: "item 49" },
+  { id: 50, text: "item 50" },
+  { id: 51, text: "item 51" },
+  { id: 52, text: "item 52" },
+  { id: 53, text: "item 53" },
+];
+
+export { basicPagination, complexPagination };