73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { Language } from "@/data-objects/language.ts";
|
|
import type { UseQueryReturnType } from "@tanstack/vue-query";
|
|
import { useLearningObjectHTMLQuery } from "@/queries/learning-objects.ts";
|
|
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
|
import { computed, ref } from "vue";
|
|
import authService from "@/services/auth/auth-service.ts";
|
|
import type { SubmissionData } from "@/views/learning-paths/learning-object/submission-data";
|
|
import LearningObjectContentView from "@/views/learning-paths/learning-object/content/LearningObjectContentView.vue";
|
|
import LearningObjectSubmissionsView from "@/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsView.vue";
|
|
|
|
const _isStudent = computed(() => authService.authState.activeRole === "student");
|
|
|
|
const props = defineProps<{
|
|
hruid: string;
|
|
language: Language;
|
|
version: number;
|
|
group?: { forGroup: number; assignmentNo: number; classId: string };
|
|
}>();
|
|
|
|
const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(
|
|
() => props.hruid,
|
|
() => props.language,
|
|
() => props.version,
|
|
);
|
|
const currentSubmission = ref<SubmissionData>([]);
|
|
</script>
|
|
|
|
<template>
|
|
<using-query-result
|
|
:query-result="learningObjectHtmlQueryResult as UseQueryReturnType<Document, Error>"
|
|
v-slot="learningPathHtml: { data: Document }"
|
|
>
|
|
<learning-object-content-view
|
|
:learning-object-content="learningPathHtml.data"
|
|
v-model:submission-data="currentSubmission"
|
|
/>
|
|
<div class="content-submissions-spacer" />
|
|
<learning-object-submissions-view
|
|
v-if="props.group"
|
|
:group="props.group"
|
|
:hruid="props.hruid"
|
|
:language="props.language"
|
|
:version="props.version"
|
|
v-model:submission-data="currentSubmission"
|
|
/>
|
|
</using-query-result>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(hr) {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
:deep(li) {
|
|
margin-left: 30px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
:deep(img) {
|
|
max-width: 80%;
|
|
}
|
|
:deep(h2),
|
|
:deep(h3),
|
|
:deep(h4),
|
|
:deep(h5),
|
|
:deep(h6) {
|
|
margin-top: 10px;
|
|
}
|
|
.content-submissions-spacer {
|
|
height: 20px;
|
|
}
|
|
</style>
|