diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue index 2b057dd6..c1e55922 100644 --- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue +++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue @@ -14,8 +14,9 @@ import { useCurrentCourseSession, } from "@/composables"; import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue"; -import { useMutation } from "@urql/vue"; +import { useMutation, useQuery } from "@urql/vue"; import { UPDATE_COURSE_PROFILE_MUTATION } from "@/graphql/mutations"; +import { COURSE_QUERY } from "@/graphql/queries"; const props = defineProps<{ courseSlug: string; @@ -36,7 +37,21 @@ const course = computed(() => lpQueryResult.course.value); const courseSession = useCurrentCourseSession(); -const filter = ref(""); +// 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 { inProgressCirclesCount, circlesCount } = useCourseCircleProgress( lpQueryResult.circles