74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
|
|
import { useCourseDataWithCompletion } from "@/composables";
|
|
import CockpitProfileContent from "@/components/cockpit/profile/CockpitProfileContent.vue";
|
|
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
|
|
import LearningSequence from "@/pages/learningPath/circlePage/LearningSequence.vue";
|
|
import { ref, watch } from "vue";
|
|
import type { CircleType } from "@/types";
|
|
|
|
const props = defineProps<{
|
|
userId: string;
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
const selectedCircle = ref();
|
|
|
|
const lpQueryResult = useCourseDataWithCompletion(props.courseSlug, props.userId);
|
|
|
|
function selectCircle(circle: CircleType) {
|
|
selectedCircle.value = circle;
|
|
}
|
|
|
|
watch(lpQueryResult.learningPath, () => {
|
|
if (lpQueryResult.learningPath?.value?.topics?.length) {
|
|
selectCircle(lpQueryResult.learningPath.value.topics[0].circles[0]);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CockpitProfileContent>
|
|
<template #side>
|
|
<div
|
|
v-for="topic in lpQueryResult.learningPath?.value?.topics ?? []"
|
|
:key="topic.id"
|
|
class="mb-4"
|
|
>
|
|
<h4 class="mb-1 font-semibold text-gray-800">
|
|
{{ topic.title }}
|
|
</h4>
|
|
<button
|
|
v-for="circle in topic.circles"
|
|
:key="circle.id"
|
|
class="flex w-full items-center space-x-2 p-2 pr-4 hover:bg-gray-200 lg:pr-8"
|
|
:class="{ 'bg-gray-200': selectedCircle === circle }"
|
|
@click="selectCircle(circle)"
|
|
>
|
|
<LearningPathCircle
|
|
:sectors="calculateCircleSectorData(circle)"
|
|
class="h-10 w-10 snap-center rounded-full bg-white p-0.5"
|
|
></LearningPathCircle>
|
|
<span>{{ circle.title }}</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<template #main>
|
|
<ol v-if="selectedCircle" class="flex-auto bg-gray-200 px-6 py-4 lg:px-16">
|
|
<li
|
|
v-for="learningSequence in selectedCircle.learning_sequences ?? []"
|
|
:key="learningSequence.id"
|
|
>
|
|
<LearningSequence
|
|
:course-slug="props.courseSlug"
|
|
:circle="selectedCircle"
|
|
:learning-sequence="learningSequence"
|
|
readonly
|
|
hide-links
|
|
></LearningSequence>
|
|
</li>
|
|
</ol>
|
|
</template>
|
|
</CockpitProfileContent>
|
|
</template>
|