From ed1a6dedd3771af47695bfaddd281461241e7416 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 15 Jul 2024 15:02:19 +0200
Subject: [PATCH] new: [front:score] Added task completion in score panel

---
 src/components/TheLiveLogsActivityGraph.vue   |  1 +
 .../scoreViews/TheFullScreenScoreGrid.vue     |  1 +
 src/components/scoreViews/TheScoreTable.vue   | 26 +++++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/src/components/TheLiveLogsActivityGraph.vue b/src/components/TheLiveLogsActivityGraph.vue
index dd416a5..943a8c6 100644
--- a/src/components/TheLiveLogsActivityGraph.vue
+++ b/src/components/TheLiveLogsActivityGraph.vue
@@ -48,6 +48,7 @@
       },
       yaxis: {
         min: 0,
+        max: 30,
         labels: {
           show: false,
         }
diff --git a/src/components/scoreViews/TheFullScreenScoreGrid.vue b/src/components/scoreViews/TheFullScreenScoreGrid.vue
index 30489ce..57c17ca 100644
--- a/src/components/scoreViews/TheFullScreenScoreGrid.vue
+++ b/src/components/scoreViews/TheFullScreenScoreGrid.vue
@@ -219,6 +219,7 @@
                 :key="task_index"
                 class="select-none cursor-pointer"
                 @click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)"
+                :title="task.name"
               >
                   <span class="text-nowrap">
                     <FontAwesomeIcon
diff --git a/src/components/scoreViews/TheScoreTable.vue b/src/components/scoreViews/TheScoreTable.vue
index 699d8b6..5982bb3 100644
--- a/src/components/scoreViews/TheScoreTable.vue
+++ b/src/components/scoreViews/TheScoreTable.vue
@@ -33,6 +33,26 @@
     return 0;
   }))
 
+  const taskCompletionPercentages = computed(() => {
+    const completions = {}
+    Object.values(props.exercise.tasks).forEach(task => {
+      completions[task.uuid] = 0
+    })
+
+    sortedProgress.value.forEach(progress => {
+      for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) {
+        if (taskCompletion !== false) {
+          completions[taskUuid] += 1
+        }
+      }
+    });
+  
+    for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
+      completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
+    }
+    return completions
+  })
+
 </script>
 
 <template>
@@ -67,6 +87,12 @@
             <div class="flex flex-col">
               <span class="text-center font-normal text-sm dark:text-blue-200 text-slate-500 text-nowrap">Task {{ task_index + 1 }}</span>
               <i class="text-center">{{ task.name }}</i>
+              <div class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600" role="progressbar" :aria-valuenow="taskCompletionPercentages[task.uuid]" :aria-valuemin="0" aria-valuemax="100">
+                <div
+                  class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 transition-width transition-slowest ease"
+                  :style="`width: ${taskCompletionPercentages[task.uuid]}%`"
+                ></div>
+              </div>
             </div>
           </th>
           <th class="border-b border-slate-100 dark:border-slate-700 p-3 text-left">Progress</th>