From c3d325f1737e5a1efd66290ef74aa3119c05eaec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Thu, 13 Jun 2024 12:09:48 -0400
Subject: [PATCH 01/17] Added badges for Alternatives column in the request
 lists

---
 .../js/components/shared/FilterTable.vue      | 12 +++++++++++
 .../requests/components/RequestsListing.vue   | 21 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index e982e14da5..fcb90c46e5 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -462,6 +462,18 @@ export default {
   border-radius: 5px;
   padding: 7px;
 }
+.status-alternative-a {
+  background: rgba(224, 229, 232, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
+}
+.status-alternative-b {
+  background: rgba(249, 232, 195, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
+}
 @-moz-document url-prefix() {
   .pm-table-truncate {
     overflow: hidden;
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 10e93be2f8..23d3478c76 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -124,6 +124,7 @@ import paginationTable from "../../components/shared/PaginationTable.vue";
 import PMColumnFilterIconAsc from "../../components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue";
 import PMColumnFilterIconDesc from "../../components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue";
 import FilterTableBodyMixin from "../../components/shared/FilterTableBodyMixin";
+import { BadgePlugin } from "bootstrap-vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
@@ -397,7 +398,25 @@ export default {
       };
     },
     formatProcessVersionAlternative(value) {
-      return `Alternative ${value}`;
+      let color = "primary";
+      let badge = "alternative-a";
+
+      if (value === "A") {
+        color = "primary";
+        badge = "alternative-a";
+      } else if (value === "B") {
+        color = "secondary";
+        badge = "alternative-b";
+      } else if (value === null) {
+        return "-";
+      }
+
+      return `
+        <span 
+          class="badge badge-${color} status-${badge}"
+        >
+          Alternative ${value}
+        </span>`;
     },
     transform(dataInput) {
       const data = _.cloneDeep(dataInput);

From cfa2a2c7eb39d60819a4b2c00c21081e54cf80c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Fri, 14 Jun 2024 10:42:09 -0400
Subject: [PATCH 02/17] Added an overdue tag in the tasks list

---
 resources/js/tasks/components/TasksList.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 955e406d6e..24135e1f6b 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -630,9 +630,12 @@ export default {
       if (props.status === "ACTIVE" && isSelfService) {
         color = "danger";
         label = "Self Service";
-      } else if (props.status === "ACTIVE") {
+      } else if (props.status === "ACTIVE" && props.advanceStatus === "open") {
         color = "success";
         label = "In Progress";
+      } else if (props.status === "ACTIVE" && props.advanceStatus === "overdue") {
+        color = "danger";
+        label = "Overdue";
       } else if (props.status === "CLOSED") {
         color = "primary";
         label = "Completed";

From 643dec3fcf2666d045d0925f1c9b62aff6e0712c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Fri, 14 Jun 2024 11:03:51 -0400
Subject: [PATCH 03/17] remove unused library

---
 resources/js/requests/components/RequestsListing.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 23d3478c76..e70423897f 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -124,7 +124,6 @@ import paginationTable from "../../components/shared/PaginationTable.vue";
 import PMColumnFilterIconAsc from "../../components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue";
 import PMColumnFilterIconDesc from "../../components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue";
 import FilterTableBodyMixin from "../../components/shared/FilterTableBodyMixin";
-import { BadgePlugin } from "bootstrap-vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 

From 44c959f551de04d6046dcc742a694a91a1232452 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Fri, 14 Jun 2024 11:16:08 -0400
Subject: [PATCH 04/17] SonarQube fixes

---
 resources/js/requests/components/RequestsListing.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index e70423897f..d1b24c6ea2 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -397,8 +397,8 @@ export default {
       };
     },
     formatProcessVersionAlternative(value) {
-      let color = "primary";
-      let badge = "alternative-a";
+      let color;
+      let badge;
 
       if (value === "A") {
         color = "primary";
@@ -408,6 +408,9 @@ export default {
         badge = "alternative-b";
       } else if (value === null) {
         return "-";
+      } else {
+        color = "primary";
+        badge = "alternative-a";
       }
 
       return `

From c706df7cedc93a111b7b981d990ee1586c8b1d87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Fri, 14 Jun 2024 11:28:44 -0400
Subject: [PATCH 05/17] SonarQube fixes

---
 resources/js/requests/components/RequestsListing.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index d1b24c6ea2..c61d7e18df 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -397,20 +397,14 @@ export default {
       };
     },
     formatProcessVersionAlternative(value) {
-      let color;
-      let badge;
+      let color = "primary";
+      let badge = "alternative-a";
 
-      if (value === "A") {
-        color = "primary";
-        badge = "alternative-a";
-      } else if (value === "B") {
+      if (value === "B") {
         color = "secondary";
         badge = "alternative-b";
       } else if (value === null) {
         return "-";
-      } else {
-        color = "primary";
-        badge = "alternative-a";
       }
 
       return `

From 24b2d19e8e572734836202295df72392ecb54b09 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 18 Jun 2024 08:07:56 -0400
Subject: [PATCH 06/17] Saving progress working ok

---
 .../components/CardProcess.vue                | 73 +++++++++++++++----
 .../components/ProcessListing.vue             |  2 +-
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 11f2f6c160..c842deb645 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -1,12 +1,14 @@
 <template>
-  <div>
+  <div class="h-100">
     <SearchCards
       v-if="processList.length > 0 || showEmpty"
       :filter-pmql="onFilter"
     />
     <div
+      id="infinite-list-card"
       v-show="!loading && processList.length > 0"
-      class="processList"
+      class="processList h-100"
+      ref="processListContainer"
     >
       <Card
         v-for="(process, index) in processList"
@@ -15,11 +17,6 @@
         @openProcessInfo="openProcessInfo"
         :hideBookmark="categoryId === 'all_templates'"
       />
-      <pagination
-        :total-row="totalRow"
-        :per-page="perPage"
-        @onPageChanged="onPageChanged"
-      />
     </div>
     <div
       v-if="loading"
@@ -69,6 +66,7 @@ export default {
       showEmpty: false,
       loading: false,
       renderKey: 0,
+      showMoreVisible: false,
     };
   },
   watch: {
@@ -79,19 +77,38 @@ export default {
     },
   },
   mounted() {
-    this.loadCard();
+    //this.loadCard(); //orig
+    this.loadCard(()=>{
+      Vue.nextTick(()=>{
+          const listCard = document.querySelector("#infinite-list-card");
+          
+          listCard.addEventListener("scroll", () => {
+            // let calc1 = this.$refs.processListContainer.getBoundingClientRect().height + this.$refs.processListContainer.scrollTop;
+            // let calc2 = this.$refs.processListContainer.scrollHeight;
+            // if (calc1 >=  calc2) {
+              this.handleScroll();
+            //}
+          });
+      });
+    });
+  },
+  destroyed() {
+    this.$refs.processListContainer.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
-    loadCard() {
+    loadCard(callback) {
       this.loading = true;
       const url = this.buildURL();
       ProcessMaker.apiClient
         .get(url)
         .then((response) => {
           this.loading = false;
-          this.processList = response.data.data;
+          //this.processList = response.data.data; //orig
+          this.processList = this.processList.concat(response.data.data);
           this.totalRow = response.data.meta.total;
-          this.totalPages = response.data.meta.total_pages;
+          //this.totalPages = response.data.meta.total_pages;
+          this.showMoreVisible = this.processList.length < this.totalRow;
+          callback && callback();
           this.renderKey = this.renderKey + 1;
         });
     },
@@ -154,8 +171,12 @@ export default {
      * Load Cards in the new pagination
      */
     onPageChanged(page) {
-      this.currentPage = page;
-      this.loadCard();
+      /*this.currentPage = page;
+      this.loadCard();*/ //orig
+      if (page > this.currentPage && this.processList.length < this.totalRow) {
+        this.currentPage = page;
+        this.loadCard();
+      }
     },
     /**
      * Build the PMQL
@@ -167,6 +188,14 @@ export default {
       this.showEmpty = showEmpty;
       this.loadCard();
     },
+    handleScroll() {
+      console.log("llega a handle scroll");
+      const container = this.$refs.processListContainer;
+      if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
+        console.log("llama a onPageChanged");
+        this.onPageChanged(this.currentPage + 1);
+      }
+    },
   },
 };
 </script>
@@ -177,7 +206,9 @@ export default {
 .processList {
   display: flex;
   flex-wrap: wrap;
-  
+  position: relative;
+  height: 100%;
+  overflow:auto;
   @media (max-width: $lp-breakpoint) {
     display: block;
   }
@@ -191,4 +222,18 @@ export default {
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
 }
+
+.show-more {
+  text-align: center;
+  padding: 10px;
+  cursor: pointer;
+  background-color: #E5EDF3;
+  height: 40px;
+  line-height: 40px;
+  clear: both;
+  width: 75%;
+  position: absolute;
+  bottom: 0;
+  margin-top: 20px;
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessListing.vue b/resources/js/processes-catalogue/components/ProcessListing.vue
index 6f9dba2ede..e0dafd5a7a 100644
--- a/resources/js/processes-catalogue/components/ProcessListing.vue
+++ b/resources/js/processes-catalogue/components/ProcessListing.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="process-listing">
+  <div class="process-listing h-100">
 
     <CardProcess
       v-if="!isTemplateCategory"

From 406fd63e99208b25c4a2abdea59f0b9fdb34d247 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 18 Jun 2024 16:08:17 -0400
Subject: [PATCH 07/17] saving progress part 2

---
 .../components/CardProcess.vue                | 44 ++++++++++++++++---
 .../components/utils/Card.vue                 | 26 ++++++++++-
 2 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index c842deb645..4f92231cc2 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -10,13 +10,39 @@
       class="processList h-100"
       ref="processListContainer"
     >
-      <Card
+      <!-- <Card
         v-for="(process, index) in processList"
         :key="`${index}_${renderKey}`"
         :process="process"
+        :show-cards="true"
         @openProcessInfo="openProcessInfo"
         :hideBookmark="categoryId === 'all_templates'"
       />
+      <span>count: {{ processList.length }}</span>
+      <div v-if="processList.length > 0 && processList.length >= this.perPage">
+        <Card
+        :show-cards="false" 
+      />
+      </div> -->
+      <template v-for="(process, index) in processList">
+        <Card
+          :key="`${index}_${renderKey}`"
+          :process="process"
+          :show-cards="true"
+          :current-page="currentPage"
+          :total-pages="totalPages"
+          @openProcessInfo="openProcessInfo"
+          :hideBookmark="categoryId === 'all_templates'"
+        />
+        <!-- Separator after last element -->
+          <div v-if="(index % perPage === 11) && processList.length >= perPage">
+            <Card
+            :show-cards="false"
+            :current-page="counterPage + Math.floor(index / perPage)"
+            :total-pages="totalPages"
+          />
+        </div>
+      </template>
     </div>
     <div
       v-if="loading"
@@ -51,6 +77,7 @@ export default {
   props: ["categoryId"],
   data() {
     return {
+      counterPage: 2,
       processList: [],
       currentdata: [],
       currentPage: 1,
@@ -71,6 +98,8 @@ export default {
   },
   watch: {
     categoryId() {
+      this.processList = [];
+      this.currentPage = 1;
       this.pmql = "";
       this.filter = "";
       this.loadCard();
@@ -97,19 +126,22 @@ export default {
   },
   methods: {
     loadCard(callback) {
+      console.log("llama API: ", this.currentPage);
       this.loading = true;
       const url = this.buildURL();
       ProcessMaker.apiClient
         .get(url)
         .then((response) => {
           this.loading = false;
+          //console.log("response.data.data: ", response.data.data);
           //this.processList = response.data.data; //orig
           this.processList = this.processList.concat(response.data.data);
+          console.log("this.processList: ", this.processList);
           this.totalRow = response.data.meta.total;
-          //this.totalPages = response.data.meta.total_pages;
+          this.totalPages = response.data.meta.total_pages;
           this.showMoreVisible = this.processList.length < this.totalRow;
-          callback && callback();
           this.renderKey = this.renderKey + 1;
+          callback && callback();
         });
     },
     /**
@@ -122,6 +154,7 @@ export default {
      * Build URL for Process Cards
      */
     buildURL() {
+      console.log("llama buildURL: ", this.categoryId);
       if (this.categoryId === 'all_processes') {
         return "process_bookmarks/processes?"
           + `&page=${this.currentPage}`
@@ -171,8 +204,6 @@ export default {
      * Load Cards in the new pagination
      */
     onPageChanged(page) {
-      /*this.currentPage = page;
-      this.loadCard();*/ //orig
       if (page > this.currentPage && this.processList.length < this.totalRow) {
         this.currentPage = page;
         this.loadCard();
@@ -182,6 +213,7 @@ export default {
      * Build the PMQL
      */
     onFilter(value, showEmpty = false) {
+      this.processList = [];
       this.currentPage = 1;
       this.pmql = `(fulltext LIKE "%${value}%")`;
       this.filter = value;
@@ -189,10 +221,8 @@ export default {
       this.loadCard();
     },
     handleScroll() {
-      console.log("llega a handle scroll");
       const container = this.$refs.processListContainer;
       if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
-        console.log("llama a onPageChanged");
         this.onPageChanged(this.currentPage + 1);
       }
     },
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index ceec46094c..09b661df82 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -1,5 +1,6 @@
 <template>
   <b-card
+    v-if="showCards"
     overlay
     class="card-process"
   >
@@ -39,6 +40,10 @@
       />
     </b-card-text>
   </b-card>
+  <b-card v-else
+  class="text-center d-flex align-items-center justify-content-center card-process2">
+    <span>Page {{ currentPage }} of {{ totalPages }}</span>
+  </b-card>
 </template>
 
 <script>
@@ -49,11 +54,20 @@ export default {
     Bookmark
   },
   props: {
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    totalPages: {
+      type: Number,
+      default: 0
+    } ,
     process: null,
     hideBookmark: {
       type: Boolean,
       default: false
-    }
+    },
+    showCards: true,
   },
   data() {
     return {
@@ -111,6 +125,15 @@ export default {
     height: 100px;
   }
 }
+.card-process2 {
+  max-width: 100%;
+  width: 57vw;
+  height: 40px;
+  margin-top: 1rem;
+  margin-right: 1rem;
+  border-radius: 8px;
+  background-color: #E5EDF3;
+}
 .card-process:hover {
   box-shadow: 0px 3px 16px 2px #acbdcf75;
 }
@@ -118,6 +141,7 @@ export default {
   padding: 32px;
   height: 100%;
   width: 100%;
+  margin-bottom: 20px;
 
   @media (max-width: $lp-breakpoint) {
     padding: 16px;

From f2f4200ee785208cf75e09de54b124241b397a65 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 18 Jun 2024 16:52:41 -0400
Subject: [PATCH 08/17] Saving progress 3

---
 .../components/CardProcess.vue                  | 17 +++--------------
 .../components/utils/Card.vue                   |  4 +++-
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 4f92231cc2..743485bf50 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -10,20 +10,6 @@
       class="processList h-100"
       ref="processListContainer"
     >
-      <!-- <Card
-        v-for="(process, index) in processList"
-        :key="`${index}_${renderKey}`"
-        :process="process"
-        :show-cards="true"
-        @openProcessInfo="openProcessInfo"
-        :hideBookmark="categoryId === 'all_templates'"
-      />
-      <span>count: {{ processList.length }}</span>
-      <div v-if="processList.length > 0 && processList.length >= this.perPage">
-        <Card
-        :show-cards="false" 
-      />
-      </div> -->
       <template v-for="(process, index) in processList">
         <Card
           :key="`${index}_${renderKey}`"
@@ -40,6 +26,7 @@
             :show-cards="false"
             :current-page="counterPage + Math.floor(index / perPage)"
             :total-pages="totalPages"
+            :card-message="cardMessage"
           />
         </div>
       </template>
@@ -94,6 +81,7 @@ export default {
       loading: false,
       renderKey: 0,
       showMoreVisible: false,
+      cardMessage: null,
     };
   },
   watch: {
@@ -223,6 +211,7 @@ export default {
     handleScroll() {
       const container = this.$refs.processListContainer;
       if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
+        this.cardMessage = "show";
         this.onPageChanged(this.currentPage + 1);
       }
     },
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index 09b661df82..5f9a6a2948 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -42,7 +42,8 @@
   </b-card>
   <b-card v-else
   class="text-center d-flex align-items-center justify-content-center card-process2">
-    <span>Page {{ currentPage }} of {{ totalPages }}</span>
+    <span v-if="cardMessage === 'show'">Page {{ currentPage }} of {{ totalPages }}</span>
+    <span v-else>Show More</span>
   </b-card>
 </template>
 
@@ -54,6 +55,7 @@ export default {
     Bookmark
   },
   props: {
+    cardMessage: null,
     currentPage: {
       type: Number,
       default: 1,

From 3728853a335c5156b6bd1276edbd2e3208a351f4 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 19 Jun 2024 17:17:47 -0400
Subject: [PATCH 09/17] Ready for PR

---
 .../components/CardProcess.vue                | 98 +++++++++++--------
 .../components/ProcessListing.vue             | 11 +++
 .../components/utils/Card.vue                 | 14 ++-
 3 files changed, 78 insertions(+), 45 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 743485bf50..d5a14f10af 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -7,7 +7,7 @@
     <div
       id="infinite-list-card"
       v-show="!loading && processList.length > 0"
-      class="processList h-100"
+      class="processList"
       ref="processListContainer"
     >
       <template v-for="(process, index) in processList">
@@ -17,17 +17,31 @@
           :show-cards="true"
           :current-page="currentPage"
           :total-pages="totalPages"
+          :card-message="cardMessage"
+          :loading="false"
           @openProcessInfo="openProcessInfo"
           :hideBookmark="categoryId === 'all_templates'"
         />
-        <!-- Separator after last element -->
-          <div v-if="(index % perPage === 11) && processList.length >= perPage">
-            <Card
-            :show-cards="false"
-            :current-page="counterPage + Math.floor(index / perPage)"
-            :total-pages="totalPages"
-            :card-message="cardMessage"
-          />
+
+          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage">
+            <div v-if="((index + 1) === processList.length)">
+              <Card
+              :show-cards="false"
+              :current-page="counterPage + Math.floor(index / perPage)"
+              :total-pages="totalPages"
+              :card-message="'show-more'"
+              :loading="shouldShowLoader"
+            />
+            </div>
+            <div v-else>
+              <Card
+              :show-cards="false"
+              :current-page="counterPage + Math.floor(index / perPage)"
+              :total-pages="totalPages"
+              :card-message="cardMessage"
+              :loading="shouldShowLoader"
+            />
+            </div>           
         </div>
       </template>
     </div>
@@ -56,6 +70,7 @@ import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import Card from "./utils/Card.vue";
 import { EventBus } from '../index.js';
 
+
 export default {
   components: {
     pagination, CatalogueEmpty, SearchCards, Card,
@@ -81,50 +96,48 @@ export default {
       loading: false,
       renderKey: 0,
       showMoreVisible: false,
-      cardMessage: null,
+      cardMessage: "show-more",
+      switchMenu: null,
+      flagMenu: true,
+      
     };
   },
   watch: {
-    categoryId() {
-      this.processList = [];
-      this.currentPage = 1;
+    async categoryId() {
+      const listCard = document.querySelector("#infinite-list-card");
+      listCard.scrollTop = 0;
       this.pmql = "";
       this.filter = "";
+      this.currentPage = 1;
+      this.processList = [];
+
+      await Vue.nextTick();
       this.loadCard();
     },
   },
   mounted() {
-    //this.loadCard(); //orig
+    this.switchMenu = this.categoryId;
     this.loadCard(()=>{
       Vue.nextTick(()=>{
           const listCard = document.querySelector("#infinite-list-card");
           
-          listCard.addEventListener("scroll", () => {
-            // let calc1 = this.$refs.processListContainer.getBoundingClientRect().height + this.$refs.processListContainer.scrollTop;
-            // let calc2 = this.$refs.processListContainer.scrollHeight;
-            // if (calc1 >=  calc2) {
-              this.handleScroll();
-            //}
-          });
+          listCard.addEventListener("scroll", () => this.handleScroll());
       });
     });
   },
   destroyed() {
-    this.$refs.processListContainer.removeEventListener("scroll", this.handleScroll);
+    const listCard = document.querySelector("#infinite-list-card");
+    listCard.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
     loadCard(callback) {
-      console.log("llama API: ", this.currentPage);
       this.loading = true;
       const url = this.buildURL();
       ProcessMaker.apiClient
         .get(url)
         .then((response) => {
           this.loading = false;
-          //console.log("response.data.data: ", response.data.data);
-          //this.processList = response.data.data; //orig
           this.processList = this.processList.concat(response.data.data);
-          console.log("this.processList: ", this.processList);
           this.totalRow = response.data.meta.total;
           this.totalPages = response.data.meta.total_pages;
           this.showMoreVisible = this.processList.length < this.totalRow;
@@ -142,7 +155,6 @@ export default {
      * Build URL for Process Cards
      */
     buildURL() {
-      console.log("llama buildURL: ", this.categoryId);
       if (this.categoryId === 'all_processes') {
         return "process_bookmarks/processes?"
           + `&page=${this.currentPage}`
@@ -210,8 +222,8 @@ export default {
     },
     handleScroll() {
       const container = this.$refs.processListContainer;
-      if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
-        this.cardMessage = "show";
+      if ((container.scrollTop + container.clientHeight >= container.scrollHeight)) {
+        this.cardMessage = "show-page";
         this.onPageChanged(this.currentPage + 1);
       }
     },
@@ -226,7 +238,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  height: 100%;
+  height: 97%;
   overflow:auto;
   @media (max-width: $lp-breakpoint) {
     display: block;
@@ -242,17 +254,17 @@ export default {
   animation: 0.75s linear infinite spinner-border;
 }
 
-.show-more {
-  text-align: center;
-  padding: 10px;
-  cursor: pointer;
-  background-color: #E5EDF3;
-  height: 40px;
-  line-height: 40px;
-  clear: both;
-  width: 75%;
-  position: absolute;
-  bottom: 0;
-  margin-top: 20px;
-}
+// .show-more {
+//   text-align: center;
+//   padding: 10px;
+//   cursor: pointer;
+//   background-color: #E5EDF3;
+//   height: 40px;
+//   line-height: 40px;
+//   clear: both;
+//   width: 75%;
+//   position: absolute;
+//   bottom: 0;
+//   margin-top: 20px;
+// }
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessListing.vue b/resources/js/processes-catalogue/components/ProcessListing.vue
index e0dafd5a7a..3d22aa574d 100644
--- a/resources/js/processes-catalogue/components/ProcessListing.vue
+++ b/resources/js/processes-catalogue/components/ProcessListing.vue
@@ -2,6 +2,7 @@
   <div class="process-listing h-100">
 
     <CardProcess
+      :key="index"
       v-if="!isTemplateCategory"
       :categoryId="categoryId"
     />
@@ -23,6 +24,16 @@ export default {
     WizardTemplates,
     CardProcess,
   },
+  data(){
+    return {index:0};
+  },
+  watch: {
+    categoryId(nVal,oVal){
+      if(nVal !== oVal){
+        this.index++;
+      }
+    }
+  },
   computed: {
     isTemplateCategory() {
       return ['guided_templates'].includes(this.categoryId)
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index 5f9a6a2948..ce3040b58e 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -42,12 +42,13 @@
   </b-card>
   <b-card v-else
   class="text-center d-flex align-items-center justify-content-center card-process2">
-    <span v-if="cardMessage === 'show'">Page {{ currentPage }} of {{ totalPages }}</span>
-    <span v-else>Show More</span>
+    <span v-if="cardMessage === 'show-page'">Page {{ currentPage }} of {{ totalPages }}</span>
+    <span v-else><i class="fas fa-spinner fa-spin"></i> {{ $t('Loading') }}...</span>
   </b-card>
 </template>
 
 <script>
+
 import Bookmark from "../Bookmark.vue";
 
 export default {
@@ -55,6 +56,7 @@ export default {
     Bookmark
   },
   props: {
+    loading: false,
     cardMessage: null,
     currentPage: {
       type: Number,
@@ -135,6 +137,14 @@ export default {
   margin-right: 1rem;
   border-radius: 8px;
   background-color: #E5EDF3;
+
+  @media (max-width: $lp-breakpoint) {
+    width: 100%;
+    max-width: none;
+    min-width: none;
+    border-radius: 8px;
+    height: 100px;
+  }
 }
 .card-process:hover {
   box-shadow: 0px 3px 16px 2px #acbdcf75;

From 988c2cef068e3a86f2c3438007bb644e6e671cb8 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 19 Jun 2024 17:25:26 -0400
Subject: [PATCH 10/17] removing comments

---
 .../processes-catalogue/components/CardProcess.vue | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index d5a14f10af..dfaabca0da 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -253,18 +253,4 @@ export default {
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
 }
-
-// .show-more {
-//   text-align: center;
-//   padding: 10px;
-//   cursor: pointer;
-//   background-color: #E5EDF3;
-//   height: 40px;
-//   line-height: 40px;
-//   clear: both;
-//   width: 75%;
-//   position: absolute;
-//   bottom: 0;
-//   margin-top: 20px;
-// }
 </style>

From ef8bb39d6f9bca25c4ce51ff2e7325c78b4f8021 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 19 Jun 2024 17:39:14 -0400
Subject: [PATCH 11/17] solving sonar qube observations

---
 resources/js/processes-catalogue/components/CardProcess.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index dfaabca0da..da446273bf 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -142,7 +142,7 @@ export default {
           this.totalPages = response.data.meta.total_pages;
           this.showMoreVisible = this.processList.length < this.totalRow;
           this.renderKey = this.renderKey + 1;
-          callback && callback();
+          callback?.();
         });
     },
     /**

From 10973f174685800fc8cc341be1340395b648f8f2 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 20 Jun 2024 12:55:53 -0400
Subject: [PATCH 12/17] Modifications event scrollend

---
 .../components/CardProcess.vue                | 39 ++++++++++---------
 .../components/utils/Card.vue                 |  7 ++--
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index da446273bf..6c224876b5 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -6,8 +6,8 @@
     />
     <div
       id="infinite-list-card"
-      v-show="!loading && processList.length > 0"
-      class="processList"
+      v-show="processList.length > 0"
+      class="processList d-flex"
       ref="processListContainer"
     >
       <template v-for="(process, index) in processList">
@@ -23,25 +23,26 @@
           :hideBookmark="categoryId === 'all_templates'"
         />
 
-          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage">
-            <div v-if="((index + 1) === processList.length)">
-              <Card
+          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage" style="width: 75%;">
+            
+              <Card v-if="((index + 1) === processList.length)"
+              style="width: 100%;"
               :show-cards="false"
               :current-page="counterPage + Math.floor(index / perPage)"
               :total-pages="totalPages"
               :card-message="'show-more'"
-              :loading="shouldShowLoader"
+              :loading="loading"
             />
-            </div>
-            <div v-else>
+
               <Card
+              v-else
+              style="width: 100%;"
               :show-cards="false"
               :current-page="counterPage + Math.floor(index / perPage)"
               :total-pages="totalPages"
               :card-message="cardMessage"
-              :loading="shouldShowLoader"
+              :loading="loading"
             />
-            </div>           
         </div>
       </template>
     </div>
@@ -104,7 +105,7 @@ export default {
   },
   watch: {
     async categoryId() {
-      const listCard = document.querySelector("#infinite-list-card");
+      const listCard = document.querySelector(".processes-info");
       listCard.scrollTop = 0;
       this.pmql = "";
       this.filter = "";
@@ -119,15 +120,15 @@ export default {
     this.switchMenu = this.categoryId;
     this.loadCard(()=>{
       Vue.nextTick(()=>{
-          const listCard = document.querySelector("#infinite-list-card");
+          const listCard = document.querySelector(".processes-info");
           
-          listCard.addEventListener("scroll", () => this.handleScroll());
+          listCard.addEventListener("scrollend", () => this.handleScroll());
       });
     });
   },
   destroyed() {
-    const listCard = document.querySelector("#infinite-list-card");
-    listCard.removeEventListener("scroll", this.handleScroll);
+    const listCard = document.querySelector(".processes-info");
+    listCard.removeEventListener("scrollend", this.handleScroll);
   },
   methods: {
     loadCard(callback) {
@@ -221,7 +222,7 @@ export default {
       this.loadCard();
     },
     handleScroll() {
-      const container = this.$refs.processListContainer;
+      const container =  document.querySelector(".processes-info");
       if ((container.scrollTop + container.clientHeight >= container.scrollHeight)) {
         this.cardMessage = "show-page";
         this.onPageChanged(this.currentPage + 1);
@@ -238,8 +239,10 @@ export default {
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  height: 97%;
-  overflow:auto;
+  height: 100%;
+  overflow: unset;
+  justify-content: flex-start;
+  align-items: center;
   @media (max-width: $lp-breakpoint) {
     display: block;
   }
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index ce3040b58e..1c25da23b1 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -43,7 +43,8 @@
   <b-card v-else
   class="text-center d-flex align-items-center justify-content-center card-process2">
     <span v-if="cardMessage === 'show-page'">Page {{ currentPage }} of {{ totalPages }}</span>
-    <span v-else><i class="fas fa-spinner fa-spin"></i> {{ $t('Loading') }}...</span>
+    <span v-if="cardMessage === 'show-more' && !loading"> {{ $t('Show More') }}</span>
+    <span v-if="loading"><i class="fas fa-spinner fa-spin"></i> {{ $t('Loading') }}...</span>
   </b-card>
 </template>
 
@@ -85,7 +86,7 @@ export default {
         return this.process.counts.total.toLocaleString();
       }
       return null;
-    }
+    },
   },
   methods: {
     /**
@@ -130,8 +131,6 @@ export default {
   }
 }
 .card-process2 {
-  max-width: 100%;
-  width: 57vw;
   height: 40px;
   margin-top: 1rem;
   margin-right: 1rem;

From 7319b34157a9d96419f88440f9383e4e71229196 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 20 Jun 2024 16:37:11 -0400
Subject: [PATCH 13/17] adding translations

---
 resources/lang/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index f7a643a2ff..886359a0c6 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -1575,6 +1575,7 @@
   "Show Me The Templates": "Show Me The Templates",
   "Show Mini-Map": "Show Mini-Map",
   "Show": "Show",
+  "Show More": "Show More",
   "Sign In": "Sign In",
   "Signal End Event": "Signal End Event",
   "Signal ID is required": "Signal ID is required",

From 8d5181be019890868433648c8c8e846570aebadd Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Sat, 22 Jun 2024 05:53:21 +0000
Subject: [PATCH 14/17] making improvements on cards and bookmarks

---
 .../processes-catalogue/components/CardProcess.vue  | 13 ++++++++++---
 .../processes-catalogue/components/utils/Card.vue   |  5 ++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 6c224876b5..69462aefc3 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -20,6 +20,7 @@
           :card-message="cardMessage"
           :loading="false"
           @openProcessInfo="openProcessInfo"
+          @callLoadCard="loadCard"
           :hideBookmark="categoryId === 'all_templates'"
         />
 
@@ -32,6 +33,7 @@
               :total-pages="totalPages"
               :card-message="'show-more'"
               :loading="loading"
+              @callLoadCard="loadCard"
             />
 
               <Card
@@ -42,6 +44,7 @@
               :total-pages="totalPages"
               :card-message="cardMessage"
               :loading="loading"
+              @callLoadCard="loadCard"
             />
         </div>
       </template>
@@ -124,14 +127,17 @@ export default {
           
           listCard.addEventListener("scrollend", () => this.handleScroll());
       });
-    });
+    }, null);
   },
   destroyed() {
     const listCard = document.querySelector(".processes-info");
     listCard.removeEventListener("scrollend", this.handleScroll);
   },
   methods: {
-    loadCard(callback) {
+    loadCard(callback, message) {
+      if(message === 'bookmark') {
+        this.processList = [];
+      }
       this.loading = true;
       const url = this.buildURL();
       ProcessMaker.apiClient
@@ -223,7 +229,8 @@ export default {
     },
     handleScroll() {
       const container =  document.querySelector(".processes-info");
-      if ((container.scrollTop + container.clientHeight >= container.scrollHeight)) {
+      if ((container.scrollTop + container.clientHeight >= container.scrollHeight - 5)) {
+        container.scrollTop = container.scrollTop + 150;
         this.cardMessage = "show-page";
         this.onPageChanged(this.currentPage + 1);
       }
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index 1c25da23b1..d7b9bf2f54 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -36,7 +36,7 @@
         v-if="!hideBookmark"
         :process="process"
         class="bookmark"
-        @bookmark-updated="$parent.loadCard()"
+        @bookmark-updated="callLoadCard"
       />
     </b-card-text>
   </b-card>
@@ -104,6 +104,9 @@ export default {
 
       return `/img/launchpad-images/icons/${icon}.svg`;
     },
+    callLoadCard() {
+      this.$emit('callLoadCard', () => {}, 'bookmark');
+    },
   },
 };
 </script>

From 9eda92d6e0373a590d0434a32665d7168e22123b Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 24 Jun 2024 04:16:55 +0000
Subject: [PATCH 15/17] saving more progress

---
 resources/js/processes-catalogue/components/CardProcess.vue | 6 +++---
 resources/js/processes-catalogue/components/utils/Card.vue  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 69462aefc3..f23f946208 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -24,7 +24,7 @@
           :hideBookmark="categoryId === 'all_templates'"
         />
 
-          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage" style="width: 75%;">
+          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage" style="width: 83%;">
             
               <Card v-if="((index + 1) === processList.length)"
               style="width: 100%;"
@@ -150,6 +150,8 @@ export default {
           this.showMoreVisible = this.processList.length < this.totalRow;
           this.renderKey = this.renderKey + 1;
           callback?.();
+          const container =  document.querySelector(".processes-info");
+          container.scrollTop = container.scrollTop - 60;
         });
     },
     /**
@@ -230,7 +232,6 @@ export default {
     handleScroll() {
       const container =  document.querySelector(".processes-info");
       if ((container.scrollTop + container.clientHeight >= container.scrollHeight - 5)) {
-        container.scrollTop = container.scrollTop + 150;
         this.cardMessage = "show-page";
         this.onPageChanged(this.currentPage + 1);
       }
@@ -249,7 +250,6 @@ export default {
   height: 100%;
   overflow: unset;
   justify-content: flex-start;
-  align-items: center;
   @media (max-width: $lp-breakpoint) {
     display: block;
   }
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index d7b9bf2f54..3e46e2a3a0 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -145,7 +145,7 @@ export default {
     max-width: none;
     min-width: none;
     border-radius: 8px;
-    height: 100px;
+    height: 40px;
   }
 }
 .card-process:hover {

From 39acf7db3e3fcf25e951b154bdea80ba45612d03 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 24 Jun 2024 14:16:06 +0000
Subject: [PATCH 16/17] removing unused code

---
 .../js/processes-catalogue/components/CardProcess.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index f23f946208..ca7fda5a01 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -24,7 +24,7 @@
           :hideBookmark="categoryId === 'all_templates'"
         />
 
-          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage" style="width: 83%;">
+          <div v-if="(index % perPage === perPage - 1) && processList.length >= perPage" style="width: 75%;">
             
               <Card v-if="((index + 1) === processList.length)"
               style="width: 100%;"
@@ -49,15 +49,6 @@
         </div>
       </template>
     </div>
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center align-items-center m-5"
-    >
-      <data-loading
-        v-show="shouldShowLoader"
-        empty-icon="beach"
-      />
-    </div>
     <CatalogueEmpty
       v-if="!loading && processList.length === 0"
       :show-empty="showEmpty"

From 4d5393c2a0bc7478b07e7976f9d32e3ec4f87a12 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 24 Jun 2024 16:22:13 +0000
Subject: [PATCH 17/17] changing nextick Gloval to this context

---
 resources/js/processes-catalogue/components/CardProcess.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index ca7fda5a01..25380836c2 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -106,14 +106,14 @@ export default {
       this.currentPage = 1;
       this.processList = [];
 
-      await Vue.nextTick();
+      await this.$nextTick();
       this.loadCard();
     },
   },
   mounted() {
     this.switchMenu = this.categoryId;
     this.loadCard(()=>{
-      Vue.nextTick(()=>{
+      this.$nextTick(()=>{
           const listCard = document.querySelector(".processes-info");
           
           listCard.addEventListener("scrollend", () => this.handleScroll());