54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import type { LearningContentWithCompletion, TopicType } from "@/types";
|
|
import LearningPathCircleColumn from "./LearningPathCircleColumn.vue";
|
|
import { COURSE_PROFILE_ALL_FILTER } from "@/constants";
|
|
import { filterCircles } from "./utils";
|
|
|
|
interface Props {
|
|
topic: TopicType;
|
|
topicIndex: number;
|
|
nextLearningContent?: LearningContentWithCompletion;
|
|
overrideCircleUrlBase?: string;
|
|
filter?: string;
|
|
isLastTopic: boolean;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const isFirstCircle = (circleIndex: number) =>
|
|
props.topicIndex === 0 && circleIndex === 0;
|
|
|
|
const isLastCircle = (circleIndex: number, numCircles: number) =>
|
|
props.isLastTopic && circleIndex === numCircles - 1;
|
|
|
|
const filteredCircles = computed(() => {
|
|
return filterCircles(props.filter, props.topic.circles);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="border-l border-gray-500" :class="topicIndex == 0 ? 'ml-6 sm:ml-12' : ''">
|
|
<p
|
|
:id="`topic-${topic.slug}`"
|
|
class="inline-block h-12 self-start px-4 font-bold text-gray-800"
|
|
data-cy="lp-topic"
|
|
>
|
|
{{ topic.title }}
|
|
</p>
|
|
<div class="flex flex-row pt-6">
|
|
<LearningPathCircleColumn
|
|
v-for="(circle, circleIndex) in filteredCircles"
|
|
:key="circle.id"
|
|
:circle="circle"
|
|
:next-learning-content="nextLearningContent"
|
|
:is-first-circle="isFirstCircle(circleIndex)"
|
|
:is-last-circle="isLastCircle(circleIndex, filteredCircles.length)"
|
|
:override-circle-url="
|
|
overrideCircleUrlBase ? `${overrideCircleUrlBase}/${circle.slug}` : undefined
|
|
"
|
|
></LearningPathCircleColumn>
|
|
</div>
|
|
</div>
|
|
</template>
|