108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import type { LearningContent, LearningContentType } from "@/types";
|
|
import eventBus from "@/utils/eventBus";
|
|
import log from "loglevel";
|
|
import type { Component } from "vue";
|
|
import { computed, onUnmounted } from "vue";
|
|
import AssignmentBlock from "./blocks/AssignmentBlock.vue";
|
|
import AttendanceDayBlock from "./blocks/AttendanceDayBlock.vue";
|
|
import FeedbackBlock from "./blocks/FeedbackBlock.vue";
|
|
import IframeBlock from "./blocks/IframeBlock.vue";
|
|
import MediaLibraryBlock from "./blocks/MediaLibraryBlock.vue";
|
|
import PlaceholderBlock from "./blocks/PlaceholderBlock.vue";
|
|
import DescriptionBlock from "./blocks/RichTextBlock.vue";
|
|
import VideoBlock from "./blocks/VideoBlock.vue";
|
|
|
|
log.debug("LearningContent.vue setup");
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
const props = defineProps<{
|
|
learningContent: LearningContent;
|
|
}>();
|
|
|
|
// can't use the type as component name, as some are reserved HTML components, e.g. video
|
|
const COMPONENTS: Record<LearningContentType, Component> = {
|
|
"learnpath.LearningContentAssignment": AssignmentBlock,
|
|
"learnpath.LearningContentAttendanceDay": AttendanceDayBlock,
|
|
"learnpath.LearningContentFeedback": FeedbackBlock,
|
|
"learnpath.LearningContentLearningModule": IframeBlock,
|
|
"learnpath.LearningContentMediaLibrary": MediaLibraryBlock,
|
|
"learnpath.LearningContentPlaceholder": PlaceholderBlock,
|
|
"learnpath.LearningContentRichText": DescriptionBlock,
|
|
"learnpath.LearningContentTest": IframeBlock,
|
|
"learnpath.LearningContentVideo": VideoBlock,
|
|
};
|
|
const DEFAULT_BLOCK = DescriptionBlock;
|
|
|
|
const component = computed(() => {
|
|
return COMPONENTS[props.learningContent.content_type] || DEFAULT_BLOCK;
|
|
});
|
|
|
|
function handleFinishedLearningContent() {
|
|
circleStore.continueFromLearningContent(props.learningContent);
|
|
}
|
|
|
|
eventBus.on("finishedLearningContent", handleFinishedLearningContent);
|
|
|
|
onUnmounted(() => {
|
|
eventBus.off("finishedLearningContent", handleFinishedLearningContent);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<LearningContentContainer
|
|
@exit="circleStore.closeLearningContent(props.learningContent)"
|
|
>
|
|
<div>
|
|
<component :is="component" :content="learningContent"></component>
|
|
</div>
|
|
</LearningContentContainer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$header-height: 77px;
|
|
|
|
.content {
|
|
padding-top: $header-height;
|
|
}
|
|
|
|
.resource-text {
|
|
p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
|
|
.resource-text {
|
|
p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
margin-bottom: 1.5rem;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
</style>
|