65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
|
|
import type {LearningContent, LearningSequence} from '@/services/circle';
|
|
|
|
const props = defineProps<{
|
|
learningSequence: LearningSequence
|
|
completionData: any
|
|
}>()
|
|
|
|
const contentCompleted = (learningContent: LearningContent) => {
|
|
if (props.completionData?.completed_learning_contents) {
|
|
return props.completionData.completed_learning_contents.findIndex((e) => {
|
|
return e.learning_content_key === learningContent.translation_key && e.completed;
|
|
}) >= 0;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-8 learning-sequence">
|
|
<div class="flex items-center gap-4 mb-2">
|
|
<component :is="learningSequence.icon" />
|
|
<h3 class="text-xl">
|
|
{{ learningSequence.title }}
|
|
</h3>
|
|
<div>{{ learningSequence.minutes }} Minuten</div>
|
|
</div>
|
|
|
|
<div class="bg-white px-4 border border-gray-500 border-l-4 border-l-sky-500">
|
|
<div
|
|
v-for="learningUnit in learningSequence.learningUnits"
|
|
class="py-3"
|
|
>
|
|
<div class="pb-3 flex gap-4" v-if="learningUnit.title">
|
|
<div class="font-bold">{{ learningUnit.title }}</div>
|
|
<div>{{ learningUnit.minutes }} Minuten</div>
|
|
</div>
|
|
|
|
<div
|
|
v-for="learningContent in learningUnit.learningContents"
|
|
class="flex items-center gap-4 pb-3"
|
|
>
|
|
<ItCheckbox
|
|
:modelValue="contentCompleted(learningContent)"
|
|
@click="$emit('toggleLearningContentCheckbox', learningContent, !contentCompleted(learningContent))"
|
|
>
|
|
{{ learningContent.contents[0].type }}: {{ learningContent.title }}
|
|
</ItCheckbox>
|
|
</div>
|
|
|
|
<hr class="-mx-4 text-gray-500">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|