Feature/FOUR-14386: Update Cards (UI updated).

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;

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

@@ -1,34 +1,53 @@
 <template>
-  <div>
+  <div class="h-100">
     <SearchCards
       v-if="processList.length > 0 || showEmpty"
       :filter-pmql="onFilter"
     />
     <div
-      v-show="!loading && processList.length > 0"
-      class="processList"
+      id="infinite-list-card"
+      v-show="processList.length > 0"
+      class="processList d-flex"
+      ref="processListContainer"
     >
-      <Card
-        v-for="(process, index) in processList"
-        :key="`${index}_${renderKey}`"
-        :process="process"
-        @openProcessInfo="openProcessInfo"
-        :hideBookmark="categoryId === 'all_templates'"
-      />
-      <pagination
-        :total-row="totalRow"
-        :per-page="perPage"
-        @onPageChanged="onPageChanged"
-      />
-    </div>
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center align-items-center m-5"
-    >
-      <data-loading
-        v-show="shouldShowLoader"
-        empty-icon="beach"
-      />
+      <template v-for="(process, index) in processList">
+        <Card
+          :key="`${index}_${renderKey}`"
+          :process="process"
+          :show-cards="true"
+          :current-page="currentPage"
+          :total-pages="totalPages"
+          :card-message="cardMessage"
+          :loading="false"
+          @openProcessInfo="openProcessInfo"
+          @callLoadCard="loadCard"
+          :hideBookmark="categoryId === 'all_templates'"
+        />
+
+          <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="loading"
+              @callLoadCard="loadCard"
+            />
+
+              <Card
+              v-else
+              style="width: 100%;"
+              :show-cards="false"
+              :current-page="counterPage + Math.floor(index / perPage)"
+              :total-pages="totalPages"
+              :card-message="cardMessage"
+              :loading="loading"
+              @callLoadCard="loadCard"
+            />
+        </div>
+      </template>
     </div>
     <CatalogueEmpty
       v-if="!loading && processList.length === 0"
@@ -46,6 +65,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,
@@ -54,6 +74,7 @@ export default {
   props: ["categoryId"],
   data() {
     return {
+      counterPage: 2,
       processList: [],
       currentdata: [],
       currentPage: 1,
@@ -69,30 +90,59 @@ export default {
       showEmpty: false,
       loading: false,
       renderKey: 0,
+      showMoreVisible: false,
+      cardMessage: "show-more",
+      switchMenu: null,
+      flagMenu: true,
+
     };
   },
   watch: {
-    categoryId() {
+    async categoryId() {
+      const listCard = document.querySelector(".processes-info");
+      listCard.scrollTop = 0;
       this.pmql = "";
       this.filter = "";
+      this.currentPage = 1;
+      this.processList = [];
+
+      await this.$nextTick();
       this.loadCard();
     },
   },
   mounted() {
-    this.loadCard();
+    this.switchMenu = this.categoryId;
+    this.loadCard(()=>{
+      this.$nextTick(()=>{
+          const listCard = document.querySelector(".processes-info");
+
+          listCard.addEventListener("scrollend", () => this.handleScroll());
+      });
+    }, null);
+  },
+  destroyed() {
+    const listCard = document.querySelector(".processes-info");
+    listCard.removeEventListener("scrollend", this.handleScroll);
   },
   methods: {
-    loadCard() {
+    loadCard(callback, message) {
+      if(message === 'bookmark') {
+        this.processList = [];
+      }
       this.loading = true;
       const url = this.buildURL();
       ProcessMaker.apiClient
         .get(url)
         .then((response) => {
           this.loading = false;
-          this.processList = response.data.data;
+          this.processList = this.processList.concat(response.data.data);
           this.totalRow = response.data.meta.total;
           this.totalPages = response.data.meta.total_pages;
+          this.showMoreVisible = this.processList.length < this.totalRow;
           this.renderKey = this.renderKey + 1;
+          callback?.();
+          const container =  document.querySelector(".processes-info");
+          container.scrollTop = container.scrollTop - 60;
         });
     },
     /**
@@ -154,19 +204,29 @@ export default {
      * Load Cards in the new pagination
      */
     onPageChanged(page) {
-      this.currentPage = page;
-      this.loadCard();
+      if (page > this.currentPage && this.processList.length < this.totalRow) {
+        this.currentPage = page;
+        this.loadCard();
+      }
     },
     /**
      * Build the PMQL
      */
     onFilter(value, showEmpty = false) {
+      this.processList = [];
       this.currentPage = 1;
       this.pmql = `(fulltext LIKE "%${value}%")`;
       this.filter = value;
       this.showEmpty = showEmpty;
       this.loadCard();
     },
+    handleScroll() {
+      const container =  document.querySelector(".processes-info");
+      if ((container.scrollTop + container.clientHeight >= container.scrollHeight - 5)) {
+        this.cardMessage = "show-page";
+        this.onPageChanged(this.currentPage + 1);
+      }
+    },
   },
 };
 </script>
@@ -177,7 +237,10 @@ export default {
 .processList {
   display: flex;
   flex-wrap: wrap;
-
+  position: relative;
+  height: 100%;
+  overflow: unset;
+  justify-content: flex-start;
   @media (max-width: $lp-breakpoint) {
     display: block;
   }

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

@@ -1,7 +1,8 @@
 <template>
-  <div class="process-listing">
+  <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)

resources/js/processes-catalogue/components/utils/Card.vue

@@ -1,5 +1,6 @@
 <template>
   <b-card
+    v-if="showCards"
     overlay
     class="card-process"
   >
@@ -35,25 +36,43 @@
         v-if="!hideBookmark"
         :process="process"
         class="bookmark"
-        @bookmark-updated="$parent.loadCard()"
+        @bookmark-updated="callLoadCard"
       />
     </b-card-text>
   </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'">Page {{ currentPage }} of {{ totalPages }}</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>
 
 <script>
+
 import Bookmark from "../Bookmark.vue";
 
 export default {
   components: {
     Bookmark
   },
   props: {
+    loading: false,
+    cardMessage: null,
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    totalPages: {
+      type: Number,
+      default: 0
+    } ,
     process: null,
     hideBookmark: {
       type: Boolean,
       default: false
-    }
+    },
+    showCards: true,
   },
   data() {
     return {
@@ -67,7 +86,7 @@ export default {
         return this.process.counts.total.toLocaleString();
       }
       return null;
-    }
+    },
   },
   methods: {
     /**
@@ -85,6 +104,9 @@ export default {
 
       return `/img/launchpad-images/icons/${icon}.svg`;
     },
+    callLoadCard() {
+      this.$emit('callLoadCard', () => {}, 'bookmark');
+    },
   },
 };
 </script>
@@ -111,13 +133,29 @@ export default {
     height: 100px;
   }
 }
+.card-process2 {
+  height: 40px;
+  margin-top: 1rem;
+  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: 40px;
+  }
+}
 .card-process:hover {
   box-shadow: 0px 3px 16px 2px #acbdcf75;
 }
 .card-body {
   padding: 32px;
   height: 100%;
   width: 100%;
+  margin-bottom: 20px;
 
   @media (max-width: $lp-breakpoint) {
     padding: 16px;

resources/js/requests/components/RequestsListing.vue

@@ -396,7 +396,22 @@ export default {
       };
     },
     formatProcessVersionAlternative(value) {
-      return `Alternative ${value}`;
+      let color = "primary";
+      let badge = "alternative-a";
+
+      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);

resources/js/tasks/components/TasksList.vue

@@ -602,9 +602,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";

resources/lang/en.json

@@ -1581,6 +1581,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",