Improve display

client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue

@@ -15,7 +15,7 @@ import type {
 import dayjs from "dayjs";
 import { findIndex } from "lodash";
 import * as log from "loglevel";
-import { computed, reactive } from "vue";
+import { computed, onMounted, reactive } from "vue";
 
 const props = defineProps<{
   assignmentUser: CourseSessionUser;
@@ -31,12 +31,23 @@ interface StateInterface {
 }
 
 const state: StateInterface = reactive({
-  pageIndex: 6,
+  pageIndex: 0,
 });
 
 const courseSessionStore = useCourseSessionsStore();
 
 const numTasks = computed(() => props.assignment.evaluation_tasks?.length ?? 0);
+const evaluationSubmitted = computed(
+  () => props.assignmentCompletion.completion_status === "evaluation_submitted"
+);
+
+onMounted(() => {
+  if (evaluationSubmitted.value) {
+    state.pageIndex = props.assignment.evaluation_tasks?.length + 1 ?? 0;
+  } else {
+    state.pageIndex = 0;
+  }
+});
 
 function previousPage() {
   log.debug("previousTask");
@@ -110,12 +121,14 @@ const dueDate = computed(() =>
           :assignment="props.assignment"
           :assignment-completion="props.assignmentCompletion"
           :due-date="dueDate"
-          @edit-task="editTask($event)"
         ></EvaluationSummary>
       </section>
     </div>
 
-    <nav class="sticky bottom-0 border-t bg-gray-200 p-6" v-if="state.pageIndex > 0">
+    <nav
+      class="sticky bottom-0 border-t bg-gray-200 p-6"
+      v-if="state.pageIndex > 0 && !evaluationSubmitted"
+    >
       <div class="relative flex flex-row place-content-end">
         <button
           v-if="true"

client/src/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue

@@ -52,11 +52,22 @@ async function startEvaluation() {
 
     <p class="my-4">
       Die Gesamtpunktzahl und die daruas resultierende Note wird auf Grund des
-      hinterlegeten Beurteilungsinstrument berechnet. Willst du mehr dazu erfahren:
+      hinterlegeten Beurteilungsinstrument berechnet.
     </p>
 
+    <p class="my-4">TODO: Link zu Bewertungskriterium</p>
+
     <div>
-      <button class="btn-primary" @click="startEvaluation()">Bewertung starten</button>
+      <button class="btn-primary" @click="startEvaluation()">
+        <span
+          v-if="
+            props.assignmentCompletion.completion_status === 'evaluation_in_progress'
+          "
+        >
+          Bewertung fortsetzen
+        </span>
+        <span v-else>Bewertung starten</span>
+      </button>
     </div>
   </div>
 </template>

client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ItSuccessAlert from "@/components/ui/ItSuccessAlert.vue";
 import {
   maxAssignmentPoints,
   pointsToGrade,
@@ -8,9 +9,9 @@ import { useAssignmentStore } from "@/stores/assignmentStore";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { Assignment, AssignmentEvaluationTask, CourseSessionUser } from "@/types";
 import { AssignmentCompletion } from "@/types";
-import { Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import * as log from "loglevel";
-import { computed } from "vue";
+import { computed, reactive } from "vue";
 
 const props = defineProps<{
   assignmentUser: CourseSessionUser;
@@ -21,6 +22,10 @@ const props = defineProps<{
 
 const emit = defineEmits(["submitEvaluation", "editTask"]);
 
+const state = reactive({
+  showSuccessInfo: false,
+});
+
 log.debug("EvaluationSummary setup");
 
 const courseSessionStore = useCourseSessionsStore();
@@ -37,7 +42,7 @@ async function submitEvaluation() {
     evaluation_grade: grade.value,
     evaluation_points: userPoints.value,
   });
-  emit("submitEvaluation");
+  state.showSuccessInfo = true;
 }
 
 function subTaskByPoints(task: AssignmentEvaluationTask, points = 0) {
@@ -65,7 +70,7 @@ const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
 
 <template>
   <div>
-    <h3>Bewertung Freigabe</h3>
+    <h3 class="mb-6">Bewertung Freigabe</h3>
 
     <section class="mb-6 border p-6">
       <div class="text-lg font-bold">Note: {{ grade }}</div>
@@ -76,11 +81,28 @@ const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
         hinterlegeten Beurteilungsinstrument berechnet. Willst du mehr dazu erfahren:
       </p>
 
-      <div>
+      <div
+        v-if="props.assignmentCompletion.completion_status === 'evaluation_submitted'"
+      >
+        Freigabetermin:
+        {{
+          dayjs(props.assignmentCompletion.evaluation_submitted_at).format("DD.MM.YYYY")
+        }}
+        um
+        {{ dayjs(props.assignmentCompletion.evaluation_submitted_at).format("HH.mm") }}
+        Uhr
+      </div>
+      <div v-else>
         <button class="btn-primary" @click="submitEvaluation()">
           Bewertung freigeben
         </button>
       </div>
+
+      <div class="mt-4" v-if="state.showSuccessInfo">
+        <ItSuccessAlert
+          :text="`Deine Bewertung für ${props.assignmentUser.first_name} ${props.assignmentUser.last_name} wurde freigegeben.`"
+        ></ItSuccessAlert>
+      </div>
     </section>
 
     <section>
@@ -90,7 +112,11 @@ const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
             <div class="mb-4">
               Bewertungskriterium {{ index + 1 }}: {{ task.value.title }}
             </div>
-            <div>
+            <div
+              v-if="
+                props.assignmentCompletion.completion_status !== 'evaluation_submitted'
+              "
+            >
               <button
                 class="link pl-2text-sm whitespace-nowrap"
                 @click="emit('editTask', task)"