From a6208034130144005cf72d2c6600f80975cb45ea Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 21 Nov 2024 15:03:07 +0100
Subject: [PATCH] Switch between button or link on attendance overview
 conditionally

---
 .../attendanceCheckPage/AttendanceCheckPage.vue  |  5 +++++
 .../cockpit/cockpitPage/AttendanceOverview.vue   | 16 ++++++++++++++--
 .../cockpit/cockpitPage/AttendanceStatus.vue     | 13 +++----------
 client/src/utils/attendance.ts                   | 13 +++++++++++++
 4 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 client/src/utils/attendance.ts

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index a0e43709..2a9d0edb 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -11,6 +11,7 @@ import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { exportAttendance } from "@/services/dashboard";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { useUserStore } from "@/stores/user";
+import { getStatus } from "@/utils/attendance";
 import { openDataAsXls } from "@/utils/export";
 import { useMutation, useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
@@ -136,6 +137,10 @@ const formattedCourseDueDate = computed(() => {
   }
   return "";
 });
+
+const attendanceStatus = computed(() => {
+  return getStatus(attendanceSaved.value, courseDueDate.value);
+});
 </script>
 
 <template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
index 1eac7c31..aa21f8e8 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -3,6 +3,7 @@ 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 { getStatus } from "@/utils/attendance";
 import { useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
 import { useTranslation } from "i18next-vue";
@@ -51,6 +52,9 @@ const formattedCourseDueDate = computed(() => {
   }
   return "";
 });
+const status = computed(() => {
+  return getStatus(attendanceSaved.value, courseDueDate.value);
+});
 </script>
 
 <template>
@@ -62,8 +66,16 @@ const formattedCourseDueDate = computed(() => {
       <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>
     </div>
     <AttendanceStatus :date="courseDueDate" :done="attendanceSaved" />
-    <router-link :to="attendanceRoute" class="underline">
-      {{ $t("a.Anwesenheit anschauen") }}
+    <router-link
+      :to="attendanceRoute"
+      :class="
+        status === 'now' ? 'bg-blue-900 px-4 py-2 font-bold text-white' : 'underline'
+      "
+    >
+      <template v-if="status === 'now'">
+        {{ $t("Anwesenheit prüfen") }}
+      </template>
+      <template v-else>{{ $t("a.Anwesenheit anschauen") }}</template>
     </router-link>
   </div>
 </template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
index 98516a30..4331ed7b 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { howManyDaysInFuture, isInFuture } from "@/components/dueDates/dueDatesUtils";
+import { getStatus } from "@/utils/attendance";
 import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
 
-export type Status = "done" | "soon" | "now"; // todo: define this
-
 export interface Props {
   done: boolean;
   date: string;
@@ -14,14 +13,8 @@ const { t } = useTranslation();
 
 const props = defineProps<Props>();
 
-const status = computed<Status>(() => {
-  if (props.done) {
-    return "done";
-  }
-  if (isInFuture(props.date)) {
-    return "soon";
-  }
-  return "now";
+const status = computed(() => {
+  return getStatus(props.done, props.date);
 });
 
 const style = computed(() => {
diff --git a/client/src/utils/attendance.ts b/client/src/utils/attendance.ts
new file mode 100644
index 00000000..cb08d11b
--- /dev/null
+++ b/client/src/utils/attendance.ts
@@ -0,0 +1,13 @@
+import { isInFuture } from "@/components/dueDates/dueDatesUtils";
+
+export type Status = "done" | "soon" | "now";
+
+export const getStatus = (done: boolean, date: string): Status => {
+  if (done) {
+    return "done";
+  }
+  if (isInFuture(date)) {
+    return "soon";
+  }
+  return "now";
+};