108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
|
|
import type {LearningContent, LearningSequence} from '@/types';
|
|
import {useCircleStore} from '@/stores/circle';
|
|
import {computed} from 'vue';
|
|
|
|
const props = defineProps<{
|
|
learningSequence: LearningSequence
|
|
}>()
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
function toggleCompleted(learningContent: LearningContent) {
|
|
circleStore.markCompletion(learningContent, !learningContent.completed);
|
|
}
|
|
|
|
const someFinished = computed(() => {
|
|
if (props.learningSequence) {
|
|
return circleStore.flatChildren.filter((lc) => {
|
|
return lc.completed && lc.parentLearningSequence?.translation_key === props.learningSequence.translation_key;
|
|
}).length > 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"
|
|
:class="{
|
|
'border-l-sky-500': someFinished,
|
|
'border-l-gray-500': !someFinished,
|
|
}"
|
|
>
|
|
<div
|
|
v-for="learningUnit in learningSequence.learningUnits"
|
|
:key="learningUnit.id"
|
|
class="pt-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"
|
|
:key="learningContent.id"
|
|
class="flex items-center gap-4 pb-3"
|
|
>
|
|
<ItCheckbox
|
|
:modelValue="learningContent.completed"
|
|
@click="toggleCompleted(learningContent)"
|
|
>
|
|
<span @click.stop="circleStore.openLearningContent(learningContent)">{{ learningContent.contents[0].type }}: {{ learningContent.title }}</span>
|
|
</ItCheckbox>
|
|
</div>
|
|
|
|
<div
|
|
v-if="learningUnit.id"
|
|
class="hover:cursor-pointer"
|
|
@click="circleStore.openSelfEvaluation(learningUnit)"
|
|
>
|
|
<div
|
|
v-if="circleStore.calcSelfEvaluationStatus(learningUnit)"
|
|
class="flex items-center gap-4 pb-3"
|
|
>
|
|
<it-icon-smiley-happy/>
|
|
<span>Selbsteinschätzung: Ich kann das.</span>
|
|
</div>
|
|
<div
|
|
v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === false"
|
|
class="flex items-center gap-4 pb-3"
|
|
>
|
|
<it-icon-smiley-thinking/>
|
|
<span>Selbsteinschätzung: Muss ich nochmals anschauen</span>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="flex items-center gap-4 pb-3"
|
|
>
|
|
<it-icon-smiley-neutral/>
|
|
<span>Selbsteinschätzung</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr v-if="!learningUnit.last" class="-mx-4 text-gray-500">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|