From 10cd228d56fffb93780c50e92fd76ce66864b931 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 25 Jul 2024 20:31:07 +0200
Subject: [PATCH] Refactor code and add filtering to circle progress displays

---
 .../learningPath/LearningPathDiagram.vue      | 18 +++++---
 .../learningPathPage/LearningPathPage.vue     | 30 +++++--------
 .../LearningPathPathTopic.vue                 | 13 +-----
 .../learningPath/learningPathPage/utils.ts    | 44 +++++++++++++++++++
 .../migrations/0021_alter_circle_profiles.py  | 20 +++++++++
 5 files changed, 90 insertions(+), 35 deletions(-)
 create mode 100644 server/vbv_lernwelt/learnpath/migrations/0021_alter_circle_profiles.py

diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index e91aae0c..f3129073 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
-import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
+import {
+  calculateCircleSectorData,
+  filterCircles,
+  useCourseFilter,
+} from "@/pages/learningPath/learningPathPage/utils";
 import { computed } from "vue";
 import { useCourseCircleProgress, useCourseDataWithCompletion } from "@/composables";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
@@ -48,9 +52,13 @@ const wrapperClasses = computed(() => {
   return classes;
 });
 
-const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
-  lpQueryResult.circles
-);
+const { filter } = useCourseFilter(props.courseSlug, props.courseSessionId);
+
+const filteredCircles = computed(() => {
+  return filterCircles(filter.value, circles.value);
+});
+const { inProgressCirclesCount, circlesCount } =
+  useCourseCircleProgress(filteredCircles);
 </script>
 
 <template>
@@ -66,7 +74,7 @@ const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
       </h4>
       <div :class="wrapperClasses">
         <LearningPathCircle
-          v-for="circle in circles"
+          v-for="circle in filteredCircles"
           :key="circle.id"
           :sectors="calculateCircleSectorData(circle)"
         ></LearningPathCircle>
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index 7af5a9b3..41a3e020 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -14,9 +14,9 @@ import {
   useCurrentCourseSession,
 } from "@/composables";
 import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
-import { useMutation, useQuery } from "@urql/vue";
+import { useMutation } from "@urql/vue";
 import { UPDATE_COURSE_PROFILE_MUTATION } from "@/graphql/mutations";
-import { COURSE_QUERY } from "@/graphql/queries";
+import { filterCircles, useCourseFilter } from "./utils";
 
 const props = defineProps<{
   courseSlug: string;
@@ -37,25 +37,17 @@ const course = computed(() => lpQueryResult.course.value);
 
 const courseSession = useCurrentCourseSession();
 
-// todo: we do not use the courseStore, because the returned object has lost its reactivity and does not reflect cache changes. maybe this could be fixed in there, then we can use the same object here
-// todo: this could maybe go somewhere else, but useQuery must be used inside of a setup function. is there a better place?
-const courseReactiveResult = useQuery({
-  query: COURSE_QUERY,
-  variables: { slug: props.courseSlug },
-});
-const courseReactive = computed(() => courseReactiveResult.data.value?.course);
-const courseSessionUser = computed(() => {
-  return courseReactive.value?.course_session_users.find(
-    (e) => e?.course_session.id === courseSession.value.id
-  );
-});
-const filter = computed(() => {
-  return courseSessionUser.value?.chosen_profile || "";
+const { filter } = useCourseFilter(props.courseSlug);
+
+const filteredCircles = computed(() => {
+  if (lpQueryResult.circles.value === undefined) {
+    return [];
+  }
+  return filterCircles(filter.value, lpQueryResult.circles.value);
 });
 
-const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
-  lpQueryResult.circles
-);
+const { inProgressCirclesCount, circlesCount } =
+  useCourseCircleProgress(filteredCircles);
 
 const updateCourseProfileMutation = useMutation(UPDATE_COURSE_PROFILE_MUTATION);
 
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue
index 3c739185..58a72639 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue
@@ -3,6 +3,7 @@ import { computed } from "vue";
 import type { LearningContentWithCompletion, TopicType } from "@/types";
 import LearningPathCircleColumn from "./LearningPathCircleColumn.vue";
 import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
+import { filterCircles } from "./utils";
 
 interface Props {
   topic: TopicType;
@@ -22,17 +23,7 @@ const isLastCircle = (circleIndex: number, numCircles: number) =>
   props.isLastTopic && circleIndex === numCircles - 1;
 
 const filteredCircles = computed(() => {
-  if (
-    props.filter === undefined ||
-    props.filter === "" ||
-    props.filter === COURSE_PROFILE_ALL_FILTER
-  ) {
-    return props.topic.circles;
-  }
-  return props.topic.circles.filter(
-    (circle) =>
-      circle.profiles.indexOf(props.filter as string) > -1 || circle.is_base_circle
-  );
+  return filterCircles(props.filter, props.topic.circles);
 });
 </script>
 
diff --git a/client/src/pages/learningPath/learningPathPage/utils.ts b/client/src/pages/learningPath/learningPathPage/utils.ts
index 46410d94..d27f27f8 100644
--- a/client/src/pages/learningPath/learningPathPage/utils.ts
+++ b/client/src/pages/learningPath/learningPathPage/utils.ts
@@ -1,3 +1,6 @@
+import { useCurrentCourseSession } from "@/composables";
+import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
+import { COURSE_QUERY } from "@/graphql/queries";
 import type {
   CircleSectorData,
   CircleSectorProgress,
@@ -7,6 +10,8 @@ import {
   someFinishedInLearningSequence,
 } from "@/services/circle";
 import type { CircleType } from "@/types";
+import { useQuery } from "@urql/vue";
+import { computed } from "vue";
 
 export function calculateCircleSectorData(circle: CircleType): CircleSectorData[] {
   return circle.learning_sequences.map((ls) => {
@@ -21,3 +26,42 @@ export function calculateCircleSectorData(circle: CircleType): CircleSectorData[
     };
   });
 }
+
+export function useCourseFilter(courseSlug: string, courseSessionId?: string) {
+  const csId = computed(() => {
+    if (courseSessionId) {
+      return courseSessionId;
+    }
+    // assume we're on a page with a current course session
+    const courseSession = useCurrentCourseSession();
+    return courseSession.value.id;
+  });
+  const courseReactiveResult = useQuery({
+    query: COURSE_QUERY,
+    variables: { slug: courseSlug },
+  });
+  const courseReactive = computed(() => courseReactiveResult.data.value?.course);
+  const courseSessionUser = computed(() => {
+    return courseReactive.value?.course_session_users.find(
+      (e) => e?.course_session.id === csId.value
+    );
+  });
+  const filter = computed(() => {
+    return courseSessionUser.value?.chosen_profile || "";
+  });
+
+  return {
+    filter,
+    courseReactive,
+    courseSessionUser,
+  };
+}
+
+export function filterCircles(filter: string | undefined, circles: CircleType[]) {
+  if (filter === undefined || filter === "" || filter === COURSE_PROFILE_ALL_FILTER) {
+    return circles;
+  }
+  return circles.filter(
+    (circle) => circle.profiles.indexOf(filter as string) > -1 || circle.is_base_circle
+  );
+}
diff --git a/server/vbv_lernwelt/learnpath/migrations/0021_alter_circle_profiles.py b/server/vbv_lernwelt/learnpath/migrations/0021_alter_circle_profiles.py
new file mode 100644
index 00000000..66ba4aec
--- /dev/null
+++ b/server/vbv_lernwelt/learnpath/migrations/0021_alter_circle_profiles.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.13 on 2024-07-25 14:27
+
+from django.db import migrations
+import modelcluster.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("learnpath", "0020_auto_20240711_1736"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="circle",
+            name="profiles",
+            field=modelcluster.fields.ParentalManyToManyField(
+                related_name="circles", to="learnpath.courseprofile"
+            ),
+        ),
+    ]