diff --git a/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue b/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue index 4f4781b4..b579a3f1 100644 --- a/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue +++ b/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue @@ -39,7 +39,8 @@ onMounted(async () => { const { gradedUsers, assignmentSubmittedUsers } = await loadAssignmentCompletionStatusData( props.learningContentAssignment.content_assignment_id, - props.courseSession.id + props.courseSession.id, + props.learningContentAssignment.id ); state.gradedUsers = gradedUsers; state.assignmentSubmittedUsers = assignmentSubmittedUsers; diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue index 2a17c732..2d22699a 100644 --- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue +++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue @@ -5,14 +5,15 @@ import ItPersonRow from "@/components/ui/ItPersonRow.vue"; import { useCurrentCourseSession } from "@/composables"; import type { AttendanceUserStatus } from "@/gql/graphql"; import { ATTENDANCE_CHECK_MUTATION } from "@/graphql/mutations"; -import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries"; import { useCockpitStore } from "@/stores/cockpit"; import type { DropdownSelectable } from "@/types"; -import { useMutation, useQuery } from "@urql/vue"; +import { useMutation } from "@urql/vue"; import dayjs from "dayjs"; import log from "loglevel"; -import { computed, reactive, watch } from "vue"; +import { computed, onMounted, reactive, watch } from "vue"; import { useTranslation } from "i18next-vue"; +import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries"; +import { graphqlClient } from "@/graphql/client"; const { t } = useTranslation(); const cockpitStore = useCockpitStore(); @@ -28,17 +29,13 @@ const presenceCoursesDropdownOptions = computed(() => { (attendanceCourse) => ({ id: attendanceCourse.id, - name: `${t("Präsenzkurs")} ${dayjs(attendanceCourse.start).format( - "DD.MM.YYYY" - )}`, + name: `${t("Präsenzkurs")} ${attendanceCourse.circle_title} ${dayjs( + attendanceCourse.start + ).format("DD.MM.YYYY")}`, } as DropdownSelectable) ); }); -const attendanceCourseSelected = computed( - () => state.attendanceCourseSelected.id != "-1" -); - const state = reactive({ userPresence: new Map(), attendanceCourseSelected: presenceCoursesDropdownOptions.value[0], @@ -46,13 +43,11 @@ const state = reactive({ attendanceSaved: false, }); -const attendanceQuery = useQuery({ - query: ATTENDANCE_CHECK_QUERY, - pause: true, - variables: { - courseSessionId: state.attendanceCourseSelected.id.toString(), - }, -}); +function resetState() { + state.userPresence = new Map(); + state.disclaimerConfirmed = false; + state.attendanceSaved = false; +} const onSubmit = async () => { type UserPresence = { @@ -79,9 +74,19 @@ const onSubmit = async () => { }; const loadAttendanceData = async () => { - const res = await attendanceQuery.executeQuery(); + resetState(); + // with changing variables `useQuery` does not seem to work correctly + const res = await graphqlClient.query( + ATTENDANCE_CHECK_QUERY, + { + courseSessionId: state.attendanceCourseSelected.id.toString(), + }, + { + requestPolicy: "network-only", + } + ); const attendanceUserList = - res?.data?.value?.course_session_attendance_course?.attendance_user_list ?? []; + res.data?.course_session_attendance_course?.attendance_user_list ?? []; for (const user of attendanceUserList) { if (!user) continue; state.userPresence.set(user.user_id.toString(), user.status === "PRESENT"); @@ -91,15 +96,23 @@ const loadAttendanceData = async () => { } }; -loadAttendanceData(); -watch(state.attendanceCourseSelected, () => { +onMounted(() => { + log.debug("AttendanceCheckPage mounted"); loadAttendanceData(); }); + +watch( + () => state.attendanceCourseSelected, + () => { + log.debug("attendanceCourseSelected changed", state.attendanceCourseSelected); + loadAttendanceData(); + } +);