Merged in feature/VBV-701-export-in-cockpit (pull request #344)

Feature/VBV-701 export in cockpit

client/src/pages/cockpit/FeedbackPage.vue

@@ -11,7 +11,18 @@
         </router-link>
       </nav>
       <main v-if="feedbackData">
-        <h1 class="mb-2">{{ $t("feedback.feedbackPageTitle") }}</h1>
+        <div class="flex items-center justify-between">
+          <h2 class="mb-2">{{ $t("feedback.feedbackPageTitle") }}</h2>
+          <button
+            v-if="feedbackType == 'uk'"
+            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>
         <p class="mb-10">
           <span class="font-bold" data-cy="feedback-data-amount">
             {{ feedbackData.amount }}
@@ -37,6 +48,9 @@ import type { FeedbackData, FeedbackType } from "@/types";
 import FeedbackPageVV from "@/pages/cockpit/FeedbackPageVV.vue";
 import FeedbackPageUK from "@/pages/cockpit/FeedbackPageUK.vue";
 import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
+import { exportFeedback } from "@/services/dashboard";
+import { useUserStore } from "@/stores/user";
+import { openDataAsXls } from "@/utils/export";
 
 const props = defineProps<{
   courseSlug: string;
@@ -46,9 +60,22 @@ const props = defineProps<{
 log.debug("FeedbackPage created", props.circleId);
 const { loading } = useExpertCockpitPageData(props.courseSlug);
 const courseSession = useCurrentCourseSession();
+const userStore = useUserStore();
+
 const feedbackData = ref<FeedbackData | undefined>(undefined);
 const feedbackType = ref<FeedbackType | undefined>(undefined);
 
+async function exportData() {
+  const data = await exportFeedback(
+    {
+      courseSessionIds: [Number(courseSession.value.id)],
+      circleIds: [Number(props.circleId)],
+    },
+    userStore.language
+  );
+  openDataAsXls(data.encoded_data, data.file_name);
+}
+
 onMounted(async () => {
   log.debug("FeedbackPage mounted");
   feedbackData.value = await itGet(

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