Pass correct props to AttendanceStatus on the overview page

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

@@ -1,19 +1,62 @@
 <script lang="ts" setup>
+import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";
+import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { ATTENDANCE_ROUTE } from "@/router/names";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
+import { useQuery } from "@urql/vue";
+import { useDateFormat } from "@vueuse/core";
+import { computed } from "vue";
 import AttendanceStatus from "./AttendanceStatus.vue";
 
 const attendanceRoute = {
   name: ATTENDANCE_ROUTE,
 };
+
+const expertCockpitStore = useExpertCockpitStore();
+const currentCourse = computed(() => expertCockpitStore.currentCourse);
+
+const shouldPause = computed(() => !currentCourse.value);
+const result = useQuery({
+  query: ATTENDANCE_CHECK_QUERY,
+  variables: () => ({
+    courseSessionId: (
+      currentCourse.value as CourseSessionAttendanceCourseObjectType
+    ).id.toString(),
+  }),
+  pause: shouldPause,
+});
+
+// todo: maybe we can move these next 3 computed values somewhere else, as they are also used in the AttendanceCheckPage component
+const courseDueDate = computed(() => {
+  if (currentCourse.value && currentCourse.value.due_date?.start) {
+    return currentCourse.value.due_date.start;
+  }
+  return "";
+});
+
+const attendanceSaved = computed(() => {
+  const attendanceUserList =
+    result.data?.value?.course_session_attendance_course?.attendance_user_list ?? [];
+  return attendanceUserList.length !== 0;
+});
+
+const formattedCourseDueDate = computed(() => {
+  if (courseDueDate.value) {
+    return useDateFormat(courseDueDate.value, "D. MMMM YYYY", {
+      locales: "de-CH",
+    });
+  }
+  return "";
+});
 </script>
 
 <template>
   <div class="my-4 flex flex-row items-center justify-between bg-white p-6 lg:my-0">
     <div>
       <h2 class="text-base font-bold">Präsenzkurs</h2>
-      <p class="text-sm text-gray-800">4. März 2024</p>
+      <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>
     </div>
-    <AttendanceStatus status="now" />
+    <AttendanceStatus :date="courseDueDate" :done="attendanceSaved" />
     <router-link :to="attendanceRoute" class="underline">
       {{ $t("a.Anwesenheit anschauen") }}
     </router-link>