Show Assignment details in Cockpit overview

client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue

@@ -4,10 +4,12 @@ import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue
 import AssignmentSubmissionProgress from "@/pages/cockpit/assignmentsPage/AssignmentSubmissionProgress.vue";
 import type { AssignmentLearningContent } from "@/services/assignmentService";
 import { loadAssignmentCompletionStatusData } from "@/services/assignmentService";
+import { useAssignmentStore } from "@/stores/assignmentStore";
 import { useCockpitStore } from "@/stores/cockpit";
 import type { AssignmentCompletionStatus, CourseSession } from "@/types";
+import dayjs from "dayjs";
 import log from "loglevel";
-import { onMounted, reactive } from "vue";
+import { computed, onMounted, reactive } from "vue";
 
 const props = defineProps<{
   courseSession: CourseSession;
@@ -17,6 +19,7 @@ const props = defineProps<{
 log.debug("AssignmentDetails created", props.assignment.assignmentId);
 
 const cockpitStore = useCockpitStore();
+const assignmentStore = useAssignmentStore();
 
 const state = reactive({
   statusByUser: [] as {
@@ -38,6 +41,10 @@ onMounted(async () => {
 function submissionStatusForUser(userId: number) {
   return state.statusByUser.find((s) => s.userId === userId);
 }
+
+const assignmentDetail = computed(() =>
+  assignmentStore.findAssignmentDetail(props.assignment.assignmentId)
+);
 </script>
 
 <template>
@@ -45,8 +52,25 @@ function submissionStatusForUser(userId: number) {
     <div class="text-large font-bold">
       {{ assignment.title }}
     </div>
+    <div v-if="assignmentDetail">
+      <span>
+        Abgabetermin:
+        {{ dayjs(assignmentDetail.submissionDeadlineDateTimeUtc).format("DD.MM.YYYY") }}
+      </span>
+      -
+      <span>
+        Freigabetermin:
+        {{ dayjs(assignmentDetail.evaluationDeadlineDateTimeUtc).format("DD.MM.YYYY") }}
+      </span>
+    </div>
 
     <div>
+      <router-link :to="props.assignment.frontend_url" class="link">
+        Im Circle anzeigen
+      </router-link>
+    </div>
+
+    <div class="mt-4">
       <AssignmentSubmissionProgress
         :course-session="courseSession"
         :assignment="assignment"

client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import AssignmentDetails from "@/pages/cockpit/assignmentsPage/AssignmentDetails.vue";
 import { calcAssignmentLearningContents } from "@/services/assignmentService";
-import { useAssignmentStore } from "@/stores/assignmentStore";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useLearningPathStore } from "@/stores/learningPath";
 import { useUserStore } from "@/stores/user";
@@ -17,7 +16,6 @@ log.debug("AssignmentsPage created", props.courseSlug);
 const learningPathStore = useLearningPathStore();
 const courseSessionsStore = useCourseSessionsStore();
 const userStore = useUserStore();
-const assignmentStore = useAssignmentStore();
 
 onMounted(async () => {
   log.debug("AssignmentsPage mounted");
@@ -36,10 +34,6 @@ const assignments = computed(() => {
     )
   );
 });
-
-const assignmentDetail = computed(
-  () => (assignmentId) => assignmentStore.findAssignmentDetail(assignmentId)
-);
 </script>
 
 <template>