Add progress text to diagram

client/src/components/learningPath/LearningPathDiagram.vue

@@ -2,7 +2,7 @@
 import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
 import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
 import { computed } from "vue";
-import { useCourseDataWithCompletion } from "@/composables";
+import { useCourseCircleProgress, useCourseDataWithCompletion } from "@/composables";
 
 export type DiagramType = "horizontal" | "horizontalSmall" | "singleSmall";
 
@@ -46,14 +46,31 @@ const wrapperClasses = computed(() => {
   }
   return classes;
 });
+
+const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
+  lpQueryResult.circles
+);
 </script>
 
 <template>
-  <div :class="wrapperClasses">
-    <LearningPathCircle
-      v-for="circle in circles"
-      :key="circle.id"
-      :sectors="calculateCircleSectorData(circle)"
-    ></LearningPathCircle>
+  <div>
+    <h4
+      v-if="diagramType === 'horizontal' && circles.length > 0"
+      class="mb-4 font-bold"
+    >
+      {{
+        $t("learningPathPage.progressText", {
+          inProgressCount: inProgressCirclesCount,
+          allCount: circlesCount,
+        })
+      }}
+    </h4>
+    <div :class="wrapperClasses">
+      <LearningPathCircle
+        v-for="circle in circles"
+        :key="circle.id"
+        :sectors="calculateCircleSectorData(circle)"
+      ></LearningPathCircle>
+    </div>
   </div>
 </template>

client/src/composables.ts

@@ -6,6 +6,7 @@ import {
   circleFlatChildren,
   circleFlatLearningContents,
   circleFlatLearningUnits,
+  someFinishedInLearningSequence,
 } from "@/services/circle";
 import type { DashboardPersonType } from "@/services/dashboard";
 import { fetchDashboardPersons } from "@/services/dashboard";
@@ -16,6 +17,7 @@ import { useDashboardStore } from "@/stores/dashboard";
 import { useUserStore } from "@/stores/user";
 import type {
   ActionCompetence,
+  CircleType,
   Course,
   CourseCompletion,
   CourseCompletionStatus,
@@ -30,7 +32,7 @@ import type {
 import { useQuery } from "@urql/vue";
 import orderBy from "lodash/orderBy";
 import log from "loglevel";
-import type { ComputedRef } from "vue";
+import type { ComputedRef, Ref } from "vue";
 import { computed, onMounted, ref, watchEffect } from "vue";
 
 export function useCurrentCourseSession() {
@@ -552,3 +554,22 @@ export function useMentorTexts() {
 
   return { ...texts.value };
 }
+
+export function useCourseCircleProgress(circles: Ref<CircleType[] | undefined>) {
+  const inProgressCirclesCount = computed(() => {
+    if (circles.value?.length) {
+      return circles.value.filter(
+        (circle) =>
+          circle.learning_sequences.filter((ls) => someFinishedInLearningSequence(ls))
+            .length
+      ).length;
+    }
+    return 0;
+  });
+
+  const circlesCount = computed(() => {
+    return circles.value?.length ?? 0;
+  });
+
+  return { inProgressCirclesCount, circlesCount };
+}

client/src/pages/learningPath/learningPathPage/LearningPathPage.vue

@@ -8,8 +8,7 @@ import type { ViewType } from "@/pages/learningPath/learningPathPage/LearningPat
 import LearningPathViewSwitch from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, ref } from "vue";
-import { useCourseDataWithCompletion } from "@/composables";
-import { someFinishedInLearningSequence } from "@/services/circle";
+import { useCourseCircleProgress, useCourseDataWithCompletion } from "@/composables";
 
 const props = defineProps<{
   courseSlug: string;
@@ -28,20 +27,9 @@ const lpQueryResult = useCourseDataWithCompletion(props.courseSlug);
 const learningPath = computed(() => lpQueryResult.learningPath.value);
 const course = computed(() => lpQueryResult.course.value);
 
-const circlesCount = computed(() => {
-  return lpQueryResult.circles.value?.length ?? 0;
-});
-
-const inProgressCirclesCount = computed(() => {
-  if (lpQueryResult.circles.value?.length) {
-    return lpQueryResult.circles.value.filter(
-      (circle) =>
-        circle.learning_sequences.filter((ls) => someFinishedInLearningSequence(ls))
-          .length
-    ).length;
-  }
-  return 0;
-});
+const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
+  lpQueryResult.circles
+);
 
 const changeViewType = (viewType: ViewType) => {
   selectedView.value = viewType;