From 9a5feb2ba64fdbb119df53a78dcc4f4ed622c106 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 5 May 2023 09:32:08 +0200
Subject: [PATCH] Add evaluation task stepper

---
 .../AssignmentEvaluationPage.vue              | 12 +--
 .../EvaluationContainer.vue                   | 94 +++++++++++++++++++
 .../UserEvaluation.vue                        | 46 ---------
 3 files changed, 100 insertions(+), 52 deletions(-)
 create mode 100644 client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
 delete mode 100644 client/src/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue

diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
index 3e4f36f5..bf21b35c 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue";
-import UserEvaluation from "@/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue";
+import EvaluationContainer from "@/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue";
 import AssignmentSubmissionResponses from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue";
 import { useAssignmentStore } from "@/stores/assignmentStore";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
@@ -69,7 +69,7 @@ function exit() {
 </script>
 
 <template>
-  <div v-if="state.assignment && state.completionData">
+  <div v-if="state.assignment && state.completionData" class="relative">
     <header
       class="relative flex h-12 w-full items-center justify-between border-b border-b-gray-400 bg-white px-4 lg:h-16 lg:px-8"
     >
@@ -85,7 +85,7 @@ function exit() {
     </header>
 
     <div class="flex">
-      <div class="w-1/2 flex-initial bg-white p-10">
+      <div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-white p-10">
         <h3>Ergebnisse</h3>
         <div class="my-6 flex items-center">
           <img
@@ -103,12 +103,12 @@ function exit() {
           :allow-edit="false"
         ></AssignmentSubmissionResponses>
       </div>
-      <div class="w-1/2 flex-initial bg-gray-200 p-10">
-        <UserEvaluation
+      <div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-gray-200">
+        <EvaluationContainer
           :assignment-completion="state.completionData"
           :assignment-user="state.assignmentUser"
           :assignment="state.assignment"
-        ></UserEvaluation>
+        ></EvaluationContainer>
       </div>
     </div>
   </div>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
new file mode 100644
index 00000000..3f5489f9
--- /dev/null
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import EvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue";
+import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
+import dayjs from "dayjs";
+import * as log from "loglevel";
+import { computed, reactive } from "vue";
+
+const props = defineProps<{
+  assignmentUser: CourseSessionUser;
+  assignmentCompletion: AssignmentCompletion;
+  assignment: Assignment;
+}>();
+
+log.debug("UserEvaluation setup");
+
+interface StateInterface {
+  pageIndex: number;
+}
+
+const state: StateInterface = reactive({
+  pageIndex: 0,
+});
+
+const numTasks = computed(() => props.assignment.evaluation_tasks?.length ?? 0);
+
+function previousTask() {
+  log.debug("previousTask");
+  state.pageIndex = Math.max(0, state.pageIndex - 1);
+}
+
+function nextTask() {
+  log.debug("nextTask");
+  state.pageIndex = Math.min(numTasks.value - 1, state.pageIndex + 1);
+}
+</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
+          :assignment-user="props.assignmentUser"
+          :assignment="props.assignment"
+          :task-index="state.pageIndex"
+        />
+      </section>
+    </div>
+
+    <nav class="sticky bottom-0 border-t bg-blue-400 p-10">
+      <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()"
+        >
+          <it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
+          {{ $t("general.backCapitalized") }}
+        </button>
+        <button
+          v-if="true"
+          class="btn-secondary z-10 flex items-center"
+          data-cy="next-step"
+          @click="nextTask()"
+        >
+          {{ $t("general.next") }}
+          <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
+        </button>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$nav-height: 86px;
+
+.h-content {
+  height: calc(100vh - $nav-height);
+}
+
+.nav {
+  height: $nav-height;
+}
+</style>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue b/client/src/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue
deleted file mode 100644
index 7106479f..00000000
--- a/client/src/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import UserEvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue";
-import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
-import dayjs from "dayjs";
-import * as log from "loglevel";
-
-const props = defineProps<{
-  assignmentUser: CourseSessionUser;
-  assignmentCompletion: AssignmentCompletion;
-  assignment: Assignment;
-}>();
-
-log.debug("UserEvaluation setup");
-</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>
-
-    <UserEvaluationTask
-      :assignment-user="props.assignmentUser"
-      :assignment="props.assignment"
-      :task-index="0"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-$nav-height: 86px;
-
-.h-content {
-  height: calc(100vh - $nav-height);
-}
-
-.nav {
-  height: $nav-height;
-}
-</style>