Switch between button or link on attendance overview conditionally

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>

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>

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(() => {

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";
+};