From 57a4f447af98c254b9d694e3524f63dcce40622c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 8 May 2023 17:07:50 +0200
Subject: [PATCH] Show assignment results for user

---
 .../EvaluationContainer.vue                   |   4 +-
 .../EvaluationSummary.vue                     |  29 ++++-
 .../circlePage/DocumentSection.vue            |   1 -
 .../assignment/AssignmentIntroductionView.vue |  10 +-
 .../assignment/AssignmentView.vue             | 107 +++++++++++-------
 client/src/types.ts                           |   1 +
 .../assignment/creators/create_assignments.py |   7 +-
 server/vbv_lernwelt/assignment/serializers.py |   2 +
 8 files changed, 107 insertions(+), 54 deletions(-)

diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
index 3f396d80..0696cc6a 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
@@ -147,8 +147,8 @@ function finishButtonEnabled() {
           {{ $t("general.backCapitalized") }}
         </button>
         <button
-          :disabled="!nextButtonEnabled()"
           v-if="state.pageIndex <= numTasks"
+          :disabled="!nextButtonEnabled()"
           class="btn-secondary z-10 flex items-center"
           data-cy="next-step"
           @click="nextPage()"
@@ -158,8 +158,8 @@ function finishButtonEnabled() {
         </button>
 
         <button
-          :disabled="!finishButtonEnabled()"
           v-if="state.pageIndex > numTasks"
+          :disabled="!finishButtonEnabled()"
           class="btn-secondary z-10 flex items-center"
           data-cy="next-step"
           @click="$emit('close')"
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
index b6498abe..2e6541b7 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
@@ -21,6 +21,7 @@ const props = defineProps<{
   assignmentUser: CourseSessionUser;
   assignment: Assignment;
   assignmentCompletion: AssignmentCompletion;
+  showEvaluationUser?: boolean;
   dueDate?: Dayjs;
 }>();
 
@@ -43,7 +44,7 @@ async function submitEvaluation() {
     course_session_id: courseSessionsStore.currentCourseSession!.id,
     completion_data: {},
     completion_status: "evaluation_submitted",
-    evaluation_grade: grade.value,
+    evaluation_grade: grade.value ?? undefined,
     evaluation_points: userPoints.value,
   });
   state.showSuccessInfo = true;
@@ -69,16 +70,36 @@ const maxPoints = computed(() => maxAssignmentPoints(props.assignment));
 const userPoints = computed(() =>
   userAssignmentPoints(props.assignment, props.assignmentCompletion)
 );
-const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
+const grade = computed(() => {
+  if (props.assignmentCompletion.completion_status === "evaluation_submitted") {
+    return props.assignmentCompletion.evaluation_grade;
+  }
+  return pointsToGrade(userPoints.value, maxPoints.value);
+});
+
+const evaluationUser = computed(() => {
+  if (props.assignmentCompletion.evaluation_user) {
+    return (courseSessionsStore.currentCourseSession?.users ?? []).find(
+      (user) => user.user_id === Number(props.assignmentCompletion.evaluation_user)
+    ) as CourseSessionUser;
+  }
+
+  return undefined;
+});
 </script>
 
 <template>
   <div>
-    <h3 class="mb-6">Bewertung Freigabe</h3>
+    <h3 v-if="evaluationUser && props.showEvaluationUser" class="mb-6">
+      Bewertung von {{ evaluationUser.first_name }} {{ evaluationUser.last_name }}
+    </h3>
+    <h3 v-else class="mb-6">Bewertung Freigabe</h3>
 
     <section class="mb-6 border p-6">
       <div class="text-lg font-bold">Note: {{ grade }}</div>
-      <div>Gesamtpunktezahl {{ userPoints }} / {{ maxPoints }}</div>
+      <div class="text-gray-900">
+        Gesamtpunktezahl {{ userPoints }} / {{ maxPoints }}
+      </div>
 
       <p class="my-4">
         Die Gesamtpunktzahl und die daraus resultierende Note wird auf Grund des
diff --git a/client/src/pages/learningPath/circlePage/DocumentSection.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
index e22eb289..a3378f32 100644
--- a/client/src/pages/learningPath/circlePage/DocumentSection.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentSection.vue
@@ -115,7 +115,6 @@ async function uploadDocument(data: DocumentUploadData) {
       data,
       courseSessionsStore.currentCourseSession.id
     );
-    const courseSessionsStore = useCourseSessionsStore();
     courseSessionsStore.addDocument(newDocument);
     showUploadModal.value = false;
     isUploading.value = false;
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
index d4b0de61..28ecc4a0 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <h3 class="mt-8">{{ $t("assignment.initialSituationTitle") }}</h3>
   <p
-    class="default-wagtail-rich-text text-large"
     v-if="props.assignment.starting_position"
+    class="default-wagtail-rich-text text-large"
     v-html="props.assignment.starting_position"
   ></p>
 
@@ -60,11 +60,15 @@ const props = withDefaults(defineProps<Props>(), {
 
   <h3 class="mt-8">{{ $t("assignment.assessmentTitle") }}</h3>
   <p
+    v-if="props.assignment.evaluation_description"
     class="default-wagtail-rich-text text-large"
     v-html="props.assignment.evaluation_description"
-    v-if="props.assignment.evaluation_description"
   ></p>
-  <a :href="props.assignment.evaluation_document_url" class="text-large underline">
+  <a
+    :href="props.assignment.evaluation_document_url"
+    target="_blank"
+    class="text-large link"
+  >
     {{ $t("assignment.showAssessmentDocument") }}
   </a>
 </template>
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
index bb88bf32..09f165d3 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
+import EvaluationSummary from "@/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue";
 import AssignmentIntroductionView from "@/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue";
 import AssignmentSubmissionView from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue";
 import AssignmentTaskView from "@/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue";
 import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue";
 import { useAssignmentStore } from "@/stores/assignmentStore";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useUserStore } from "@/stores/user";
 import type {
   Assignment,
   AssignmentTask,
   CourseSessionAssignmentDetails,
+  CourseSessionUser,
   LearningContent,
 } from "@/types";
 import dayjs from "dayjs";
@@ -19,6 +22,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const courseSessionsStore = useCourseSessionsStore();
 const assignmentStore = useAssignmentStore();
+const userStore = useUserStore();
 
 interface State {
   assignment: Assignment | undefined;
@@ -70,9 +74,7 @@ onMounted(async () => {
 
 const numTasks = computed(() => state.assignment?.tasks?.length ?? 0);
 const numPages = computed(() => numTasks.value + 2);
-const showPreviousButton = computed(
-  () => state.pageIndex != 0 && completionStatus.value === "in_progress"
-);
+const showPreviousButton = computed(() => state.pageIndex != 0);
 const showNextButton = computed(() => state.pageIndex + 1 < numPages.value);
 const showExitButton = computed(() => numPages.value === state.pageIndex + 1);
 const dueDate = computed(() =>
@@ -121,45 +123,70 @@ const getTitle = () => {
   }
   return currentTask?.value?.value.title ?? "Unknown";
 };
+
+const assignmentUser = computed(() => {
+  return (courseSessionsStore.currentCourseSession?.users ?? []).find(
+    (user) => user.user_id === Number(userStore.id)
+  ) as CourseSessionUser;
+});
 </script>
 
 <template>
-  <div v-if="state.assignment && assignmentCompletion"></div>
-  <LearningContentMultiLayout
-    :current-step="state.pageIndex"
-    :subtitle="state.assignment?.title ?? ''"
-    :title="getTitle()"
-    learning-content-type="assignment"
-    :steps-count="numPages"
-    :show-next-button="showNextButton"
-    :show-exit-button="showExitButton"
-    :show-start-button="false"
-    :show-previous-button="showPreviousButton"
-    start-badge-text="Einleitung"
-    end-badge-text="Abgabe"
-    close-button-variant="close"
-    @previous="handleBack()"
-    @next="handleContinue()"
-  >
-    <div>
-      <AssignmentIntroductionView
-        v-if="state.pageIndex === 0 && state.assignment"
-        :due-date="dueDate"
-        :assignment="state.assignment!"
-      ></AssignmentIntroductionView>
-      <AssignmentTaskView
-        v-if="currentTask"
-        :task="currentTask"
-        :assignment-id="props.assignmentId"
-      ></AssignmentTaskView>
-      <AssignmentSubmissionView
-        v-if="state.pageIndex + 1 === numPages && state.assignment && courseSessionId"
-        :due-date="dueDate"
-        :assignment="state.assignment!"
-        :assignment-completion-data="assignmentCompletion?.completion_data ?? {}"
-        :course-session-id="courseSessionId!"
-        @edit-task="jumpToTask($event)"
-      ></AssignmentSubmissionView>
+  <div v-if="state.assignment && assignmentCompletion">
+    <div class="flex">
+      <LearningContentMultiLayout
+        :current-step="state.pageIndex"
+        :subtitle="state.assignment?.title ?? ''"
+        :title="getTitle()"
+        learning-content-type="assignment"
+        :steps-count="numPages"
+        :show-next-button="showNextButton"
+        :show-exit-button="showExitButton"
+        :show-start-button="false"
+        :show-previous-button="showPreviousButton"
+        start-badge-text="Einleitung"
+        end-badge-text="Abgabe"
+        close-button-variant="close"
+        @previous="handleBack()"
+        @next="handleContinue()"
+      >
+        <div class="flex">
+          <div>
+            <AssignmentIntroductionView
+              v-if="state.pageIndex === 0 && state.assignment"
+              :due-date="dueDate"
+              :assignment="state.assignment!"
+            ></AssignmentIntroductionView>
+            <AssignmentTaskView
+              v-if="currentTask"
+              :task="currentTask"
+              :assignment-id="props.assignmentId"
+            ></AssignmentTaskView>
+            <AssignmentSubmissionView
+              v-if="
+                state.pageIndex + 1 === numPages && state.assignment && courseSessionId
+              "
+              :due-date="dueDate"
+              :assignment="state.assignment!"
+              :assignment-completion-data="assignmentCompletion?.completion_data ?? {}"
+              :course-session-id="courseSessionId!"
+              @edit-task="jumpToTask($event)"
+            ></AssignmentSubmissionView>
+          </div>
+        </div>
+      </LearningContentMultiLayout>
+      <div
+        v-if="assignmentCompletion?.completion_status === 'evaluation_submitted'"
+        class="min-w-2/5 mr-4 bg-gray-200 px-6 py-6"
+      >
+        <EvaluationSummary
+          v-if="state.assignment"
+          :assignment-user="assignmentUser"
+          :assignment="state.assignment"
+          :assignment-completion="assignmentCompletion"
+          :show-evaluation-user="true"
+        ></EvaluationSummary>
+      </div>
     </div>
-  </LearningContentMultiLayout>
+  </div>
 </template>
diff --git a/client/src/types.ts b/client/src/types.ts
index 70d2f931..53f3cbf8 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -547,6 +547,7 @@ export interface AssignmentCompletion {
   completion_status: AssignmentCompletionStatus;
   evaluation_user: number | null;
   completion_data: AssignmentCompletionData;
+  evaluation_grade: number | null;
 }
 
 export type UpsertUserAssignmentCompletion = {
diff --git a/server/vbv_lernwelt/assignment/creators/create_assignments.py b/server/vbv_lernwelt/assignment/creators/create_assignments.py
index d49dc996..7e32fa2a 100644
--- a/server/vbv_lernwelt/assignment/creators/create_assignments.py
+++ b/server/vbv_lernwelt/assignment/creators/create_assignments.py
@@ -1,7 +1,3 @@
-from wagtail.blocks import StreamValue
-from wagtail.blocks.list_block import ListBlock, ListValue
-from wagtail.rich_text import RichText
-
 from vbv_lernwelt.assignment.models import (
     EvaluationSubTaskBlock,
     TaskContentStreamBlock,
@@ -19,6 +15,9 @@ from vbv_lernwelt.assignment.tests.assignment_factories import (
 from vbv_lernwelt.core.utils import replace_whitespace
 from vbv_lernwelt.course.consts import COURSE_TEST_ID, COURSE_UK
 from vbv_lernwelt.course.models import CoursePage
+from wagtail.blocks import StreamValue
+from wagtail.blocks.list_block import ListBlock, ListValue
+from wagtail.rich_text import RichText
 
 
 def create_uk_assignments(course_id=COURSE_UK):
diff --git a/server/vbv_lernwelt/assignment/serializers.py b/server/vbv_lernwelt/assignment/serializers.py
index 7c4137b4..3b9b7aa3 100644
--- a/server/vbv_lernwelt/assignment/serializers.py
+++ b/server/vbv_lernwelt/assignment/serializers.py
@@ -19,4 +19,6 @@ class AssignmentCompletionSerializer(serializers.ModelSerializer):
             "completion_data",
             "evaluation_user",
             "additional_json_data",
+            "evaluation_grade",
+            "evaluation_points",
         ]