From 0401298f8539d00a50fb74dc621e1e65da13f663 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 8 May 2023 15:50:23 +0200
Subject: [PATCH] Reason text for evaluation is mandatory

---
 client/src/components/ui/ItTextarea.vue       |  9 ++++--
 .../EvaluationContainer.vue                   | 29 +++++++++++++++++--
 .../EvaluationTask.vue                        |  3 +-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ui/ItTextarea.vue b/client/src/components/ui/ItTextarea.vue
index 50e6a2f5..bae914e6 100644
--- a/client/src/components/ui/ItTextarea.vue
+++ b/client/src/components/ui/ItTextarea.vue
@@ -6,22 +6,25 @@
       class="h-40 w-full border-gray-500"
       :data-cy="`it-textarea-${cyKey}`"
       :disabled="disabled"
+      :placeholder="placeholder"
       @input="onInput"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-interface Props {
+export interface Props {
   modelValue: string;
-  label: string | undefined;
+  label?: string;
+  placeholder?: string;
   cyKey?: string;
   disabled?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   cyKey: "",
+  placeholder: "",
 });
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
index 461bcb46..bce6829a 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
@@ -3,6 +3,7 @@ import EvaluationIntro from "@/pages/cockpit/assignmentEvaluationPage/Evaluation
 import EvaluationSummary from "@/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue";
 import EvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.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";
@@ -35,6 +36,7 @@ const state: StateInterface = reactive({
 });
 
 const courseSessionStore = useCourseSessionsStore();
+const assignmentStore = useAssignmentStore();
 
 const numTasks = computed(() => props.assignment.evaluation_tasks?.length ?? 0);
 const evaluationSubmitted = computed(
@@ -95,6 +97,29 @@ const assignmentDetail = computed(() => findAssignmentDetail());
 const dueDate = computed(() =>
   dayjs(assignmentDetail.value?.evaluationDeadlineDateTimeUtc)
 );
+
+const inEvaluationTask = computed(
+  () => state.pageIndex >= 1 && state.pageIndex <= numTasks.value
+);
+const taskIndex = computed(() => state.pageIndex - 1);
+const task = computed(() => props.assignment.evaluation_tasks[taskIndex.value]);
+
+const taskExpertDataText = computed(() => {
+  let result = "";
+  if (inEvaluationTask.value) {
+    result =
+      assignmentStore.assignmentCompletion?.completion_data?.[task.value.id]
+        ?.expert_data?.text ?? "";
+  }
+  return result;
+});
+
+function nextButtonEnabled() {
+  if (inEvaluationTask.value) {
+    return taskExpertDataText.value ?? false;
+  }
+  return true;
+}
 </script>
 
 <template>
@@ -110,7 +135,7 @@ const dueDate = computed(() =>
           @start-evaluation="nextPage"
         ></EvaluationIntro>
         <EvaluationTask
-          v-else-if="state.pageIndex >= 1 && state.pageIndex <= numTasks"
+          v-else-if="inEvaluationTask"
           :assignment-user="props.assignmentUser"
           :assignment="props.assignment"
           :task-index="state.pageIndex - 1"
@@ -141,7 +166,7 @@ const dueDate = computed(() =>
           {{ $t("general.backCapitalized") }}
         </button>
         <button
-          v-if="true"
+          :disabled="!nextButtonEnabled()"
           class="btn-secondary z-10 flex items-center"
           data-cy="next-step"
           @click="nextPage()"
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
index 3eaa40e6..b9ac4c82 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
@@ -68,7 +68,7 @@ async function evaluateAssignmentCompletion(completionData: AssignmentCompletion
 
 const evaluateAssignmentCompletionDebounced = useDebounceFn(
   evaluateAssignmentCompletion,
-  500
+  300
 );
 </script>
 
@@ -114,6 +114,7 @@ const evaluateAssignmentCompletionDebounced = useDebounceFn(
       class="mt-8"
       :model-value="expertData.text ?? ''"
       label="Begründung"
+      placeholder="Hier muss zwingend eine Begründung erfasst werden."
       @update:model-value="onUpdateText($event)"
     ></ItTextarea>
   </div>