From d9a6f2dd947b6ac76832c8a8204db76c651610ea Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 5 May 2023 11:29:52 +0200
Subject: [PATCH] Add EvaluationIntro

---
 .../EvaluationContainer.vue                   | 71 ++++++++++++++-----
 .../EvaluationIntro.vue                       | 65 +++++++++++++++++
 .../assignment/AssignmentView.vue             |  2 +-
 client/src/types.ts                           |  3 +-
 .../commands/create_default_courses.py        |  3 +-
 5 files changed, 123 insertions(+), 21 deletions(-)
 create mode 100644 client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue

diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
index 7afaeab3..36d9ab7d 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
+import EvaluationIntro from "@/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue";
 import EvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue";
+import { calcAssignmentLearningContents } from "@/services/assignmentService";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useLearningPathStore } from "@/stores/learningPath";
+import { useUserStore } from "@/stores/user";
 import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
 import dayjs from "dayjs";
 import * as log from "loglevel";
@@ -14,6 +19,7 @@ const props = defineProps<{
 log.debug("UserEvaluation setup");
 
 interface StateInterface {
+  // 0 = introduction, 1 - n = tasks, n+1 = submission
   pageIndex: number;
 }
 
@@ -21,48 +27,77 @@ const state: StateInterface = reactive({
   pageIndex: 0,
 });
 
+const courseSessionStore = useCourseSessionsStore();
+
 const numTasks = computed(() => props.assignment.evaluation_tasks?.length ?? 0);
 
-function previousTask() {
+function previousPage() {
   log.debug("previousTask");
   state.pageIndex = Math.max(0, state.pageIndex - 1);
 }
 
-function nextTask() {
+function nextPage() {
   log.debug("nextTask");
-  state.pageIndex = Math.min(numTasks.value - 1, state.pageIndex + 1);
+  state.pageIndex = Math.min(numTasks.value + 1, state.pageIndex + 1);
 }
+
+function findAssignmentDetail() {
+  const learningPathStore = useLearningPathStore();
+  const userStore = useUserStore();
+  // TODO: filter by selected circle
+  if (!courseSessionStore.currentCourseSession) {
+    return [];
+  }
+
+  const learningContents = calcAssignmentLearningContents(
+    learningPathStore.learningPathForUser(
+      courseSessionStore.currentCourseSession.course.slug,
+      userStore.id
+    )
+  );
+
+  const learningContent = learningContents.find(
+    (lc) => lc.assignmentId === props.assignment.id
+  );
+
+  return courseSessionStore.findAssignmentDetails(learningContent.id);
+}
+
+const assignmentDetail = computed(() => findAssignmentDetail());
+
+const dueDate = computed(() =>
+  dayjs(assignmentDetail.value?.evaluationDeadlineDateTimeUtc)
+);
 </script>
 
 <template>
   <div class="flex min-h-full flex-col">
     <div class="flex-1 overflow-y-auto">
       <section class="p-10">
-        <div class="mb-4">
-          {{ props.assignmentUser.first_name }} {{ props.assignmentUser.last_name }} hat
-          die Ergebnisse am
-          {{ dayjs(props.assignmentCompletion.submitted_at).format("DD.MM.YYYY") }} um
-          {{ dayjs(props.assignmentCompletion.submitted_at).format("HH.mm") }} Uhr
-          abgegeben.
-        </div>
-
-        <h3>Bewertung</h3>
-
-        <EvaluationTask
+        <EvaluationIntro
+          v-if="state.pageIndex === 0"
           :assignment-user="props.assignmentUser"
           :assignment="props.assignment"
-          :task-index="state.pageIndex"
+          :assignment-completion="props.assignmentCompletion"
+          :due-date="dueDate"
+          @start-evaluation="nextPage"
+        ></EvaluationIntro>
+        <EvaluationTask
+          v-else-if="state.pageIndex >= 1 && state.pageIndex <= numTasks"
+          :assignment-user="props.assignmentUser"
+          :assignment="props.assignment"
+          :task-index="state.pageIndex - 1"
         />
       </section>
     </div>
 
-    <nav class="sticky bottom-0 border-t bg-blue-400 p-10">
+    <nav class="sticky bottom-0 border-t p-6">
       <div class="relative flex flex-row place-content-end">
         <button
           v-if="true"
           class="btn-secondary mr-2 flex items-center"
           data-cy="previous-step"
-          @click="previousTask()"
+          @click="previousPage()"
         >
           <it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
           {{ $t("general.backCapitalized") }}
@@ -71,7 +106,7 @@ function nextTask() {
           v-if="true"
           class="btn-secondary z-10 flex items-center"
           data-cy="next-step"
-          @click="nextTask()"
+          @click="nextPage()"
         >
           {{ $t("general.next") }}
           <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue
new file mode 100644
index 00000000..eddf89e0
--- /dev/null
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useAssignmentStore } from "@/stores/assignmentStore";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import type { Assignment, CourseSessionUser } from "@/types";
+import { AssignmentCompletion } from "@/types";
+import dayjs, { Dayjs } from "dayjs";
+import * as log from "loglevel";
+
+const props = defineProps<{
+  assignmentUser: CourseSessionUser;
+  assignment: Assignment;
+  assignmentCompletion: AssignmentCompletion;
+  dueDate?: Dayjs;
+}>();
+
+const emit = defineEmits(["startEvaluation"]);
+
+log.debug("EvaluationIntro setup");
+
+const courseSessionStore = useCourseSessionsStore();
+const assignmentStore = useAssignmentStore();
+
+async function startEvaluation() {
+  log.debug("startEvaluation");
+  await assignmentStore.evaluateAssignmentCompletion({
+    assignment_user_id: Number(props.assignmentUser.user_id),
+    assignment_id: props.assignment.id,
+    course_session_id: courseSessionStore.currentCourseSession!.id,
+    completion_data: {},
+    completion_status: "evaluation_in_progress",
+  });
+  emit("startEvaluation");
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      {{ props.assignmentUser.first_name }} {{ props.assignmentUser.last_name }} hat die
+      Ergebnisse am
+      {{ dayjs(props.assignmentCompletion.submitted_at).format("DD.MM.YYYY") }} um
+      {{ dayjs(props.assignmentCompletion.submitted_at).format("HH.mm") }} Uhr
+      abgegeben.
+    </div>
+
+    <h3>Bewertung</h3>
+
+    <p v-if="props.dueDate" class="my-4">
+      Du musst die Bewertung bis am {{ props.dueDate.format("DD.MM.YYYY") }} um
+      {{ props.dueDate.format("HH.mm") }} Uhr abschliessen und freigeben.
+    </p>
+
+    <p class="my-4">
+      Auf Grund dieser Bewertung wird eine Gesamtpunktzahl und die daraus reslutierende
+      Note berechnet. Genauere Informationen dazu findest du im folgenden
+      Beurteilungsinstrument:
+    </p>
+
+    <div>
+      <button class="btn-primary" @click="startEvaluation()">Bewertung starten</button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
index d058b291..05695e87 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
@@ -67,7 +67,7 @@ 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(() =>
-  dayjs(state.courseSessionAssignmentDetails?.deadlineDateTimeUtc)
+  dayjs(state.courseSessionAssignmentDetails?.submissionDeadlineDateTimeUtc)
 );
 const courseSessionId = computed(
   () => courseSessionStore.currentCourseSession?.id ?? 0
diff --git a/client/src/types.ts b/client/src/types.ts
index 7a8d226d..26d894ad 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -430,7 +430,8 @@ export interface CourseSessionAttendanceDay {
 
 export interface CourseSessionAssignmentDetails {
   learningContentId: number;
-  deadlineDateTimeUtc: string;
+  submissionDeadlineDateTimeUtc: string;
+  evaluationDeadlineDateTimeUtc: string;
 }
 
 export interface CourseSession {
diff --git a/server/vbv_lernwelt/course/management/commands/create_default_courses.py b/server/vbv_lernwelt/course/management/commands/create_default_courses.py
index 75262a53..39f8c1bc 100644
--- a/server/vbv_lernwelt/course/management/commands/create_default_courses.py
+++ b/server/vbv_lernwelt/course/management/commands/create_default_courses.py
@@ -166,7 +166,8 @@ def create_course_uk_de():
                 "learningContentId": LearningContent.objects.get(
                     slug="überbetriebliche-kurse-lp-circle-fahrzeug-lc-überprüfen-einer-motorfahrzeug-versicherungspolice"
                 ).id,
-                "deadlineDateTimeUtc": "2023-05-30T19:00:00Z",
+                "submissionDeadlineDateTimeUtc": "2023-06-13T19:00:00Z",
+                "evaluationDeadlineDateTimeUtc": "2023-06-27T19:00:00Z",
             }
         ],
     )