Fix bug so that you can select different attendance courses

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();
@@ -35,10 +36,6 @@ const presenceCoursesDropdownOptions = computed(() => {
   );
 });
 
-const attendanceCourseSelected = computed(
-  () => state.attendanceCourseSelected.id != "-1"
-);
-
 const state = reactive({
   userPresence: new Map<string, boolean>(),
   attendanceCourseSelected: presenceCoursesDropdownOptions.value[0],
@@ -46,13 +43,11 @@ const state = reactive({
   attendanceSaved: false,
 });
 
-const attendanceQuery = useQuery({
+function resetState() {
-  query: ATTENDANCE_CHECK_QUERY,
+  state.userPresence = new Map<string, boolean>();
-  pause: true,
+  state.disclaimerConfirmed = false;
-  variables: {
+  state.attendanceSaved = false;
-    courseSessionId: state.attendanceCourseSelected.id.toString(),
+}
-  },
-});
 
 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();
+onMounted(() => {
-watch(state.attendanceCourseSelected, () => {
+  log.debug("AttendanceCheckPage mounted");
   loadAttendanceData();
 });
+
+watch(
+  () => state.attendanceCourseSelected,
+  () => {
+    log.debug("attendanceCourseSelected changed", state.attendanceCourseSelected);
+    loadAttendanceData();
+  }
+);
 </script>
 
 <template>
   <div class="bg-gray-200">
-    <div class="container-large">
+    <div v-if="courseSession" class="container-large">
       <nav class="py-4 pb-4">
         <router-link
           class="btn-text inline-flex items-center pl-0"
@@ -117,7 +130,6 @@ watch(state.attendanceCourseSelected, () => {
         ></ItDropdownSelect>
         <div v-if="!state.attendanceSaved" class="flex flex-row items-center">
           <ItCheckbox
-            :disabled="!attendanceCourseSelected"
             :checkbox-item="{
               value: true,
               checked: state.disclaimerConfirmed,
@@ -158,7 +170,7 @@ watch(state.attendanceCourseSelected, () => {
           >
             <template #leading>
               <ItCheckbox
-                :disabled="!attendanceCourseSelected || state.attendanceSaved"
+                :disabled="state.attendanceSaved"
                 :checkbox-item="{
                   value: true,
                   checked: state.userPresence.get(csu.user_id.toString()) as boolean,

client/src/pages/cockpit/cockpitPage/CockpitPage.vue

@@ -130,7 +130,7 @@ function setActiveClasses(translationKey: string) {
           </div>
           <div>
             <router-link
-              :to="`/course/${props.courseSlug}/cockpit/attendanceCheck`"
+              :to="`/course/${props.courseSlug}/cockpit/attendance`"
               class="btn-secondary min-w-min"
             >
               {{ $t("Anwesenheit prüfen") }}

client/src/router/index.ts

@@ -152,7 +152,7 @@ const router = createRouter({
           props: true,
         },
         {
-          path: "attendanceCheck",
+          path: "attendance",
           component: () =>
             import("@/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue"),
           props: true,