57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
|
|
import LearningPathContinueButton from "@/pages/learningPath/learningPathPage/LearningPathContinueButton.vue";
|
|
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
|
|
import { computed, ref, watch } from "vue";
|
|
import type { CircleType, LearningContentWithCompletion } from "@/types";
|
|
|
|
const props = defineProps<{
|
|
circle: CircleType;
|
|
nextLearningContent: LearningContentWithCompletion | undefined;
|
|
}>();
|
|
|
|
const circleElement = ref<HTMLElement | null>(null);
|
|
|
|
const isCurrentCircle = computed(() => {
|
|
return props.nextLearningContent?.circle?.id === props.circle.id;
|
|
});
|
|
|
|
watch(
|
|
() => isCurrentCircle.value,
|
|
(isCurrent) => {
|
|
if (isCurrent) {
|
|
setTimeout(() => {
|
|
circleElement?.value?.scrollIntoView({
|
|
behavior: "smooth",
|
|
inline: "center",
|
|
block: "nearest",
|
|
});
|
|
});
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<router-link
|
|
:key="props.circle.id"
|
|
:to="props.circle.frontend_url"
|
|
class="flex flex-row items-center pb-2"
|
|
>
|
|
<LearningPathCircle
|
|
:sectors="calculateCircleSectorData(circle)"
|
|
class="h-12 w-12"
|
|
></LearningPathCircle>
|
|
<div ref="circleElement" class="pl-3 font-bold text-blue-900">
|
|
{{ props.circle.title }}
|
|
</div>
|
|
|
|
<div v-if="isCurrentCircle" class="whitespace-nowrap pl-4">
|
|
<LearningPathContinueButton
|
|
:next-learning-content="props.nextLearningContent"
|
|
></LearningPathContinueButton>
|
|
</div>
|
|
</router-link>
|
|
</template>
|