Merge pull request #5750 from ProcessMaker/feature/FOUR-12691

Feature/four 12691: Performance: Implement the Infinite scroll

Author: pmPaulis

resources/js/processes-catalogue/components/ProcessesCatalogue.vue

@@ -13,6 +13,7 @@
           title="Avaible Processses"
           preicon="fas fa-play-circle"
           class="mt-3"
+          @addCategories="addCategories"
         />
         <ul>
           <li>
@@ -62,17 +63,23 @@ export default {
       showWizardTemplates: false,
       showCardProcesses: false,
       category: null,
+      numCategories: 15,
+      page: 1,
     };
   },
   mounted() {
     this.getCategories();
   },
   methods: {
+    addCategories() {
+      this.page += 1;
+      this.getCategories();
+    },
     getCategories() {
       ProcessMaker.apiClient
-        .get("process_categories")
+        .get(`process_categories?page=${this.page}&per_page=${this.numCategories}`)
         .then((response) => {
-          this.listCategories = response.data.data;
+          this.listCategories = [...this.listCategories, ...response.data.data];
         });
     },
     selectCategorie(value) {

resources/js/processes-catalogue/components/menuCatologue.vue

@@ -16,7 +16,7 @@
       id="collapse-3"
       visible
     >
-      <b-list-group>
+      <b-list-group id="infinite-list">
         <b-list-group-item
           v-for="item in data"
           :key="item.id"
@@ -33,8 +33,20 @@
 
 <script>
 export default {
-  props: ["data", "select", "title", "preicon"],
-  methods: {
+  props: ["data", "select", "title", "preicon", "numCategories"],
+  mounted() {
+    const listElm = document.querySelector('#infinite-list');
+    listElm.addEventListener("scroll", e => {
+      if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
+        this.loadMore();
+      }
+    });
+  },
+  methods: { 
+    /** Adding categories */
+    loadMore() {
+      this.$emit("addCategories");
+    },
     selectItem(item) {
       this.setSelectItem(item.name);
       this.select(item);
@@ -80,4 +92,10 @@ i {
   color: #1572C2;
   font-weight: 700;
 }
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0
+}
 </style>