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