124 lines
4.0 KiB
Vue
124 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.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";
|
|
import { Assignment, CourseSessionAssignmentDetails, CourseSessionUser } from "@/types";
|
|
import log from "loglevel";
|
|
import { computed, onMounted, reactive } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
assignmentId: number;
|
|
userId: string;
|
|
}>();
|
|
|
|
log.debug("AssignmentEvaluationPage created", props.assignmentId, props.userId);
|
|
|
|
export interface StateInterface {
|
|
assignment: Assignment | undefined;
|
|
courseSessionAssignmentDetails: CourseSessionAssignmentDetails | undefined;
|
|
assignmentUser: CourseSessionUser | undefined;
|
|
}
|
|
|
|
const state: StateInterface = reactive({
|
|
assignment: undefined,
|
|
courseSessionAssignmentDetails: undefined,
|
|
assignmentUser: undefined,
|
|
});
|
|
|
|
const assignmentStore = useAssignmentStore();
|
|
const courseSessionStore = useCourseSessionsStore();
|
|
const router = useRouter();
|
|
|
|
onMounted(async () => {
|
|
log.debug("AssignmentView mounted", props.assignmentId, props.userId);
|
|
|
|
if (courseSessionStore.currentCourseSession) {
|
|
state.assignmentUser = courseSessionStore.currentCourseSession.users.find(
|
|
(user) => user.user_id == props.userId
|
|
);
|
|
}
|
|
|
|
try {
|
|
state.assignment = await assignmentStore.loadAssignment(props.assignmentId);
|
|
await assignmentStore.loadAssignmentCompletion(
|
|
props.assignmentId,
|
|
courseSessionStore.currentCourseSession.id,
|
|
props.userId
|
|
);
|
|
} catch (error) {
|
|
log.error(error);
|
|
}
|
|
});
|
|
|
|
function exit() {
|
|
router.push({
|
|
path: `/course/${props.courseSlug}/cockpit/assignment`,
|
|
});
|
|
}
|
|
|
|
const assignmentCompletion = computed(() => assignmentStore.assignmentCompletion);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="absolute bottom-0 top-0 z-10 w-full bg-white">
|
|
<div v-if="state.assignment && assignmentCompletion" 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"
|
|
>
|
|
<div>Geleitete Fallarbeit: {{ state.assignment.title }}</div>
|
|
<button
|
|
type="button"
|
|
class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
|
|
data-cy="close-learning-content"
|
|
@click="exit()"
|
|
>
|
|
<it-icon-close></it-icon-close>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="h-content flex">
|
|
<div class="h-full w-1/2 overflow-y-auto bg-white">
|
|
<!-- Left part content goes here -->
|
|
<div class="p-10">
|
|
<h3>Ergebnisse</h3>
|
|
<div class="my-6 flex items-center">
|
|
<img
|
|
:src="state.assignmentUser?.avatar_url"
|
|
class="mr-4 h-11 w-11 rounded-full"
|
|
/>
|
|
<div class="font-bold">
|
|
{{ state.assignmentUser?.first_name }}
|
|
{{ state.assignmentUser?.last_name }}
|
|
</div>
|
|
</div>
|
|
<AssignmentSubmissionResponses
|
|
:assignment="state.assignment"
|
|
:assignment-completion-data="assignmentCompletion.completion_data"
|
|
:allow-edit="false"
|
|
></AssignmentSubmissionResponses>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 overflow-y-auto bg-gray-200">
|
|
<EvaluationContainer
|
|
:assignment-completion="assignmentCompletion"
|
|
:assignment-user="state.assignmentUser"
|
|
:assignment="state.assignment"
|
|
></EvaluationContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$nav-height: 64px;
|
|
|
|
.h-content {
|
|
height: calc(100vh - $nav-height);
|
|
}
|
|
</style>
|