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

132 lines
4.0 KiB
Vue

<script setup lang="ts">
import {
maxAssignmentPoints,
pointsToGrade,
userAssignmentPoints,
} from "@/services/assignmentService";
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 * as log from "loglevel";
import { computed } from "vue";
const props = defineProps<{
assignmentUser: CourseSessionUser;
assignment: Assignment;
assignmentCompletion: AssignmentCompletion;
dueDate?: Dayjs;
}>();
const emit = defineEmits(["submitEvaluation", "editTask"]);
log.debug("EvaluationSummary setup");
const courseSessionStore = useCourseSessionsStore();
const assignmentStore = useAssignmentStore();
async function submitEvaluation() {
log.debug("submitEvaluation");
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_submitted",
});
emit("submitEvaluation");
}
function subTaskByPoints(task: AssignmentEvaluationTask, points = 0) {
return task.value.sub_tasks.find((subTask) => subTask.points === points);
}
function evaluationForTask(task: AssignmentEvaluationTask) {
const expertData = props.assignmentCompletion.completion_data[task.id]?.expert_data;
if (task.id === "0e701176-a817-427b-b8ea-a7cd59f212cb") {
console.log("######################## ", expertData.text, expertData.points);
}
if (!expertData) {
return {
points: 0,
text: "",
};
}
return expertData;
}
const maxPoints = computed(() => maxAssignmentPoints(props.assignment));
const userPoints = computed(() =>
userAssignmentPoints(props.assignment, props.assignmentCompletion)
);
const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
</script>
<template>
<div>
<h3>Bewertung Freigabe</h3>
<section class="mb-6 border p-6">
<div class="text-lg font-bold">Note: {{ grade }}</div>
<div>Gesamtpunktezahl {{ userPoints }} / {{ maxPoints }}</div>
<p class="my-4">
Die Gesamtpunktzahl und die daraus resultierende Note wird auf Grund des
hinterlegeten Beurteilungsinstrument berechnet. Willst du mehr dazu erfahren:
</p>
<div>
<button class="btn-primary" @click="submitEvaluation()">
Bewertung freigeben
</button>
</div>
</section>
<section>
<div v-for="(task, index) in props.assignment.evaluation_tasks" :key="task.id">
<article class="border-t py-4">
<div class="flex flex-row justify-between">
<div class="mb-4">
Bewertungskriterium {{ index + 1 }}: {{ task.value.title }}
</div>
<div>
<button
class="link pl-2text-sm whitespace-nowrap"
@click="emit('editTask', task)"
>
{{ $t("assignment.edit") }}
</button>
</div>
</div>
<div class="default-wagtail-rich-text mb-2 font-bold">
{{ task.value.description }}
</div>
<section class="mb-4">
<div
v-html="subTaskByPoints(task, evaluationForTask(task).points).title"
></div>
<p
class="default-wagtail-rich-text"
v-html="subTaskByPoints(task, evaluationForTask(task).points).description"
></p>
<div class="text-sm text-gray-800">
{{ evaluationForTask(task).points }} Punkte
</div>
</section>
<div>
<span class="font-bold">Begründung:</span>
{{ evaluationForTask(task).text }}
</div>
</article>
</div>
</section>
</div>
</template>
<style lang="scss" scoped></style>