From d8ae598be121f3cd0b3b43ca6759adfdf3ae94db Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 8 May 2023 16:19:30 +0200
Subject: [PATCH] Show Assignment details in Cockpit overview

---
 .../assignmentsPage/AssignmentDetails.vue     | 26 ++++++++++++++++++-
 .../assignmentsPage/AssignmentsPage.vue       |  6 -----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue b/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue
index 8ee5870e..70f5326f 100644
--- a/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue
+++ b/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"
diff --git a/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue b/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue
index 74e896e7..559329d8 100644
--- a/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue
+++ b/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>