64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import LearningContent from "@/pages/learningPath/learningContentPage/LearningContent.vue";
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import type { LearningContent as LearningContentType } from "@/types";
|
|
import * as log from "loglevel";
|
|
import { onMounted, reactive, watch } from "vue";
|
|
|
|
log.debug("LearningContentView created");
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
circleSlug: string;
|
|
contentSlug: string;
|
|
}>();
|
|
|
|
const state: { learningContent?: LearningContentType } = reactive({});
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
const loadLearningContent = async () => {
|
|
try {
|
|
state.learningContent = await circleStore.loadLearningContent(
|
|
props.courseSlug,
|
|
props.circleSlug,
|
|
props.contentSlug
|
|
);
|
|
} catch (error) {
|
|
log.error(error);
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => props.contentSlug,
|
|
async () => {
|
|
log.debug(
|
|
"LearningContentView props.contentSlug changed",
|
|
props.courseSlug,
|
|
props.circleSlug,
|
|
props.contentSlug
|
|
);
|
|
await loadLearningContent();
|
|
}
|
|
);
|
|
|
|
onMounted(async () => {
|
|
log.debug(
|
|
"LearningContentView mounted",
|
|
props.courseSlug,
|
|
props.circleSlug,
|
|
props.contentSlug
|
|
);
|
|
await loadLearningContent();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<LearningContent
|
|
v-if="state.learningContent"
|
|
:learning-content="state.learningContent"
|
|
/>
|
|
</template>
|
|
|
|
<style lang="postcss" scoped></style>
|