From c0a94ca98841fe78ac8429fb81ab796cf23ce290 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 2 Jul 2024 15:03:42 +0200
Subject: [PATCH] Add attendance export in cockpit

---
 client/src/pages/cockpit/FeedbackPage.vue     |  1 -
 .../AttendanceCheckPage.vue                   | 39 +++++++++++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/cockpit/FeedbackPage.vue b/client/src/pages/cockpit/FeedbackPage.vue
index 8217045d..e48dc6d4 100644
--- a/client/src/pages/cockpit/FeedbackPage.vue
+++ b/client/src/pages/cockpit/FeedbackPage.vue
@@ -66,7 +66,6 @@ const feedbackData = ref<FeedbackData | undefined>(undefined);
 const feedbackType = ref<FeedbackType | undefined>(undefined);
 
 async function exportData() {
-  log.debug("FeedbackPage exportData");
   const data = await exportFeedback(
     {
       courseSessionIds: [Number(courseSession.value.id)],
diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index 502c67b4..27460184 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -2,7 +2,7 @@
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import ItPersonRow from "@/components/ui/ItPersonRow.vue";
-import { useCourseSessionDetailQuery } from "@/composables";
+import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
 import type { AttendanceUserStatus } from "@/gql/graphql";
 import { ATTENDANCE_CHECK_MUTATION } from "@/graphql/mutations";
 import type { DropdownSelectable } from "@/types";
@@ -13,10 +13,15 @@ import { computed, onMounted, reactive, watch } from "vue";
 import { useTranslation } from "i18next-vue";
 import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { graphqlClient } from "@/graphql/client";
+import { exportAttendance } from "@/services/dashboard";
+import { openDataAsXls } from "@/utils/export";
+import { useUserStore } from "@/stores/user";
 
 const { t } = useTranslation();
 const attendanceMutation = useMutation(ATTENDANCE_CHECK_MUTATION);
 const courseSessionDetailResult = useCourseSessionDetailQuery();
+const userStore = useUserStore();
+const courseSession = useCurrentCourseSession();
 
 const attendanceCourses = computed(() => {
   return courseSessionDetailResult.courseSessionDetail.value?.attendance_courses ?? [];
@@ -26,6 +31,13 @@ const courseSessionDetail = computed(() => {
   return courseSessionDetailResult.courseSessionDetail.value;
 });
 
+const attendanceCourseCircleId = computed(() => {
+  const selectedAttendandeCourse = attendanceCourses.value.find(
+    (course) => course.id === state.attendanceCourseSelected.id
+  );
+  return selectedAttendandeCourse?.learning_content?.circle?.id;
+});
+
 const presenceCoursesDropdownOptions = computed(() => {
   return attendanceCourses.value.map(
     (attendanceCourse) =>
@@ -114,6 +126,17 @@ function editAgain() {
   state.attendanceSaved = false;
 }
 
+async function exportData() {
+  const data = await exportAttendance(
+    {
+      courseSessionIds: [Number(courseSession.value.id)],
+      circleIds: [Number(attendanceCourseCircleId.value)],
+    },
+    userStore.language
+  );
+  openDataAsXls(data.encoded_data, data.file_name);
+}
+
 onMounted(() => {
   log.debug("AttendanceCheckPage mounted");
   loadAttendanceData();
@@ -141,8 +164,18 @@ watch(
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
-      <div class="pb-4 text-xl font-bold">{{ $t("Anwesenheit Präsenzkurse") }}</div>
-
+      <div class="flex items-center justify-between">
+        <h3 class="pb-4 text-xl font-bold">{{ $t("Anwesenheit Präsenzkurse") }}</h3>
+        <button
+          v-if="state.attendanceSaved"
+          class="flex"
+          data-cy="export-button"
+          @click="exportData"
+        >
+          <it-icon-export></it-icon-export>
+          <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
+        </button>
+      </div>
       <section v-if="attendanceCourses.length && state.attendanceCourseSelected">
         <div class="flex flex-row justify-between bg-white p-6">
           <ItDropdownSelect