From 964b2fe591c2a64c4d4f4f1f6489f5c5c9a03c2a Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Fri, 1 Mar 2024 03:20:35 +0100
Subject: [PATCH] Fix progress bar value when Experiment has no tasks
 [SCI-10333]

---
 .../vue/experiments/renderers/completed_tasks.vue   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/javascript/vue/experiments/renderers/completed_tasks.vue b/app/javascript/vue/experiments/renderers/completed_tasks.vue
index 9ef8de555..d1a78fc22 100644
--- a/app/javascript/vue/experiments/renderers/completed_tasks.vue
+++ b/app/javascript/vue/experiments/renderers/completed_tasks.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative leading-5 h-full flex items-center">
-      <div>
+    <div>
       {{ i18n.t('experiments.card.completed_value', {
         completed: params.data.completed_tasks,
         all: params.data.total_tasks
@@ -8,7 +8,7 @@
       <div class="py-1">
         <div class="w-24 h-1 bg-sn-light-grey">
           <div class="h-full bg-sn-blue" :style="{
-            width: params.data.completed_tasks / params.data.total_tasks * 100 + '%'
+            width: `${progress}%`
           }"></div>
         </div>
       </div>
@@ -24,5 +24,14 @@ export default {
       required: true,
     },
   },
+  computed: {
+    progress() {
+      const { completed_tasks: completedTasks, total_tasks: totalTasks } = this.params.data;
+
+      if (totalTasks === 0) return 0;
+
+      return (completedTasks / totalTasks) * 100;
+    }
+  }
 };
 </script>