diff --git a/client/src/App.vue b/client/src/App.vue index d302b2d0..1e6b0e63 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -31,7 +31,7 @@ onMounted(() => { eventBus.on("switchedCourseSession", () => { // Rerender the component tree, when the course session gets switched. - // Mainly so that the `useCurrentCourseSession` composable gets re-evaluated + // So that the current learning path completion data gets updated. componentKey.value++; log.info("Switched course session, re-evaluate component tree"); }); diff --git a/client/src/composables.ts b/client/src/composables.ts index 46c9c912..ffd1b590 100644 --- a/client/src/composables.ts +++ b/client/src/composables.ts @@ -1,27 +1,30 @@ import { useCourseSessionsStore } from "@/stores/courseSessions"; import type { CourseSession } from "@/types"; import log from "loglevel"; +import type { ComputedRef } from "vue"; +import { computed } from "vue"; export function useCurrentCourseSession() { /** * We often need the current course session in our components. * With this composable we can get it easily. - * ATTENTION: The value is not reactive! So the components need to be re-rendered - * when the value changes. This is currently done with the "switchedCourseSession" - * event handler in the App.vue component. */ const store = useCourseSessionsStore(); - if (!store.currentCourseSession) { - log.error( - "currentCourseSession is only defined in pages with :courseSlug in the route" - ); - throw new Error( - `currentCourseSession is not defined in the store. + const result: ComputedRef = computed( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + () => { + if (!store.currentCourseSession) { + log.error( + "currentCourseSession is only defined in pages with :courseSlug in the route" + ); + throw new Error( + `currentCourseSession is not defined in the store. It is only defined in pages with :courseSlug in the route` - ); - } - - // return the current NON-REACTIVE course session - return store.currentCourseSession as CourseSession; + ); + } + return store.currentCourseSession; + } + ); + return result; } diff --git a/client/src/pages/cockpit/CockpitParentPage.vue b/client/src/pages/cockpit/CockpitParentPage.vue index 4dd3d3ee..f39be69c 100644 --- a/client/src/pages/cockpit/CockpitParentPage.vue +++ b/client/src/pages/cockpit/CockpitParentPage.vue @@ -22,7 +22,7 @@ onMounted(async () => { log.debug("CockpitParentPage mounted", props.courseSlug); try { - await cockpitStore.loadCourseSessionUsers(courseSession.id); + await cockpitStore.loadCourseSessionUsers(courseSession.value.id); cockpitStore.courseSessionUsers?.forEach((csu) => { competenceStore.loadCompetenceProfilePage( props.courseSlug + "-competence", diff --git a/client/src/pages/cockpit/FeedbackPage.vue b/client/src/pages/cockpit/FeedbackPage.vue index 14a09b24..21e8fcf6 100644 --- a/client/src/pages/cockpit/FeedbackPage.vue +++ b/client/src/pages/cockpit/FeedbackPage.vue @@ -144,7 +144,7 @@ const feedbackData = reactive({ amount: 0, questions: {} }); onMounted(async () => { log.debug("FeedbackPage mounted"); const data = await itGet( - `/api/core/feedback/${courseSession.course.id}/${props.circleId}` + `/api/core/feedback/${courseSession.value.course.id}/${props.circleId}` ); Object.assign(feedbackData, data); }); diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue index 24f6b1de..9b45fd5e 100644 --- a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue +++ b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue @@ -39,7 +39,7 @@ const router = useRouter(); const queryResult = useQuery({ query: ASSIGNMENT_COMPLETION_QUERY, variables: { - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), assignmentId: props.assignmentId, assignmentUserId: props.userId, }, @@ -48,7 +48,7 @@ const queryResult = useQuery({ onMounted(async () => { log.debug("AssignmentView mounted", props.assignmentId, props.userId); - state.assignmentUser = courseSession.users.find( + state.assignmentUser = courseSession.value.users.find( (user) => user.user_id === Number(props.userId) ); }); diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue index 55307c3a..98d5ce14 100644 --- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue +++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue @@ -29,7 +29,7 @@ async function startEvaluation() { // noinspection TypeScriptValidateTypes upsertAssignmentCompletionMutation.executeMutation({ assignmentId: props.assignment.id.toString(), - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), assignmentUserId: props.assignmentUser.user_id.toString(), completionStatus: "EVALUATION_IN_PROGRESS", completionDataString: JSON.stringify({}), diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue index 7ac2bd5c..20e55880 100644 --- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue +++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue @@ -44,7 +44,7 @@ async function submitEvaluation() { // noinspection TypeScriptValidateTypes upsertAssignmentCompletionMutation.executeMutation({ assignmentId: props.assignment.id.toString(), - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), assignmentUserId: props.assignmentUser.user_id.toString(), completionStatus: "EVALUATION_SUBMITTED", completionDataString: JSON.stringify({}), @@ -87,7 +87,7 @@ const grade = computed(() => { const evaluationUser = computed(() => { if (props.assignmentCompletion.evaluation_user) { - return (courseSession.users ?? []).find( + return (courseSession.value.users ?? []).find( (user) => user.user_id === Number(props.assignmentCompletion.evaluation_user) ) as CourseSessionUser; } diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue index a02e5511..bf209793 100644 --- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue +++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue @@ -68,7 +68,7 @@ async function evaluateAssignmentCompletion(completionData: AssignmentCompletion // noinspection TypeScriptValidateTypes upsertAssignmentCompletionMutation.executeMutation({ assignmentId: props.assignment.id.toString(), - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), assignmentUserId: props.assignmentUser.user_id.toString(), completionStatus: "EVALUATION_IN_PROGRESS", completionDataString: JSON.stringify(completionData), diff --git a/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue b/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue index d40fde86..41cf6fa2 100644 --- a/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue +++ b/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue @@ -23,7 +23,7 @@ onMounted(async () => { const assignments = computed(() => { return calcAssignmentLearningContents( - learningPathStore.learningPathForUser(courseSession.course.slug, userStore.id) + learningPathStore.learningPathForUser(courseSession.value.course.slug, userStore.id) ); }); diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue index dfa5d72e..76814f07 100644 --- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue +++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue @@ -62,7 +62,7 @@ const onSubmit = async () => { // noinspection TypeScriptValidateTypes upsertAssignmentCompletionMutation.executeMutation({ assignmentId: props.assignment.id.toString(), - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), completionDataString: JSON.stringify({}), completionStatus: "SUBMITTED", // eslint-disable-next-line @typescript-eslint/ban-ts-comment diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue index 428e8a8d..2b751d6c 100644 --- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue +++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue @@ -34,7 +34,7 @@ async function upsertAssignmentCompletion(completion_data: AssignmentCompletionD // noinspection TypeScriptValidateTypes await upsertAssignmentCompletionMutation.executeMutation({ assignmentId: props.assignmentId.toString(), - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), completionDataString: JSON.stringify(completion_data), completionStatus: "IN_PROGRESS", // eslint-disable-next-line @typescript-eslint/ban-ts-comment diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue index 44bf39e2..d452399b 100644 --- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue +++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue @@ -43,7 +43,7 @@ const props = defineProps<{ const queryResult = useQuery({ query: ASSIGNMENT_COMPLETION_QUERY, variables: { - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), assignmentId: props.learningContent.content_assignment_id.toString(), }, pause: true, @@ -80,7 +80,7 @@ onMounted(async () => { // noinspection TypeScriptValidateTypes await upsertAssignmentCompletionMutation.executeMutation({ assignmentId: props.learningContent.content_assignment_id.toString(), - courseSessionId: courseSession.id.toString(), + courseSessionId: courseSession.value.id.toString(), completionDataString: JSON.stringify({}), completionStatus: "IN_PROGRESS", // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -151,7 +151,7 @@ const getTitle = () => { }; const assignmentUser = computed(() => { - return courseSession.users.find( + return courseSession.value.users.find( (user) => user.user_id === Number(userStore.id) ) as CourseSessionUser; }); diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue index b328abab..8aa7f300 100644 --- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue +++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue @@ -1,6 +1,7 @@