Reason text for evaluation is mandatory

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"]);
 

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()"

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>