Merge pull request #8662 from ProcessMaker/bugfix/FOUR-27831

Bugfix/FOUR-27831: The percentage of Started Cases in Launchpad isn't updating.

Author: nolanpro

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

@@ -28,14 +28,14 @@
                 </div>
                 <div class="d-flex align-items-center flex-shrink-0 tw-text-xs">
                   <mini-pie-chart
-                    :count="process.counts.in_progress"
-                    :total="process.counts.total"
+                    :count="inProgress"
+                    :total="total"
                     :name="$t('In Progress')"
                     color="#4EA075"
                   />
                   <mini-pie-chart
-                    :count="process.counts.completed"
-                    :total="process.counts.total"
+                    :count="completed"
+                    :total="total"
                     :name="$t('Completed')"
                     color="#478FCC"
                   />
@@ -148,6 +148,9 @@ export default {
       infoCollapsed: true,
       processEvents: [],
       singleStartEvent: null,
+      inProgress: 0,
+      completed: 0,
+      total: 0,
     };
   },
   computed: {
@@ -163,11 +166,25 @@ export default {
   },
   mounted() {
     this.verifyDescription();
+    // Initialize chart data from process.counts
+    this.inProgress = this.process.counts?.in_progress || 0;
+    this.completed = this.process.counts?.completed || 0;
+    this.total = this.process.counts?.total || 0;
     ProcessMaker.EventBus.$on("reloadByNewScreen", () => {
       window.location.reload();
     });
+    ProcessMaker.EventBus.$on("chartDataUpdated", (data) => {
+      if (data.processId === this.process.id) {
+        this.completed = data.completed;
+        this.inProgress = data.inProgress;
+        this.total = data.total;
+      }
+    });
     this.getStartEvents();
   },
+  beforeDestroy() {
+    ProcessMaker.EventBus.$off("chartDataUpdated");
+  },
   methods: {
     /**
      * Verify if the Description is large

resources/js/processes-catalogue/components/optionsMenu/ProcessCounter.vue

@@ -13,14 +13,14 @@
       class="charts"
     >
       <mini-pie-chart
-        :count="process.counts.in_progress"
-        :total="process.counts.total"
+        :count="inProgress"
+        :total="total"
         :name="$t('In Progress')"
         color="#4EA075"
       />
       <mini-pie-chart
-        :count="process.counts.completed"
-        :total="process.counts.total"
+        :count="completed"
+        :total="total"
         :name="$t('Completed')"
         color="#478FCC"
       />
@@ -38,6 +38,9 @@ export default {
   data() {
     return {
       count: 0,
+      inProgress: 0,
+      completed: 0,
+      total: 0,
     };
   },
   computed: {
@@ -58,6 +61,27 @@ export default {
         .catch(() => {
           this.count = 0;
         });
+
+      ProcessMaker.apiClient
+        .get(`requests/${this.process.id}/default-chart`)
+        .then((response) => {
+          const { data: { datasets: { data: [completedCount, inProgressCount] } } } = response.data;
+          this.completed = completedCount;
+          this.inProgress = inProgressCount;
+          this.total = this.completed + this.inProgress;
+          // Emit event to update other components
+          ProcessMaker.EventBus.$emit("chartDataUpdated", {
+            processId: this.process.id,
+            completed: this.completed,
+            inProgress: this.inProgress,
+            total: this.total,
+          });
+        })
+        .catch(() => {
+          this.inProgress = 0;
+          this.completed = 0;
+          this.total = 0;
+        });
     },
   },
 };