123 lines
3.8 KiB
Vue
123 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import * as log from "loglevel";
|
|
|
|
import { useLearningPathStore } from "@/stores/learningPath";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { onMounted } from "vue";
|
|
|
|
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
|
import LearningPathViewVertical from "@/components/learningPath/LearningPathViewVertical.vue";
|
|
import type { LearningPath } from "@/services/learningPath";
|
|
|
|
log.debug("LearningPathView created");
|
|
|
|
const props = defineProps<{
|
|
learningPathSlug: string;
|
|
}>();
|
|
|
|
const learningPathStore = useLearningPathStore();
|
|
const userStore = useUserStore();
|
|
|
|
onMounted(async () => {
|
|
log.debug("LearningPathView mounted");
|
|
|
|
try {
|
|
await learningPathStore.loadLearningPath(props.learningPathSlug);
|
|
} catch (error) {
|
|
log.error(error);
|
|
}
|
|
});
|
|
|
|
const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
|
|
if (learningPath.nextLearningContent) {
|
|
const circle = learningPath.nextLearningContent.parentCircle;
|
|
const url =
|
|
learningPath.nextLearningContent.parentLearningSequence?.frontend_url ||
|
|
circle.frontend_url;
|
|
const isFirst =
|
|
learningPath.nextLearningContent.translation_key ===
|
|
learningPath.circles[0].flatLearningContents[0].translation_key;
|
|
return [url, isFirst];
|
|
}
|
|
|
|
return ["", false];
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="learningPathStore.learningPath" class="bg-gray-200">
|
|
<Teleport to="body">
|
|
<LearningPathViewVertical
|
|
:show="learningPathStore.page === 'OVERVIEW'"
|
|
:learning-path-slug="props.learningPathSlug"
|
|
@closemodal="learningPathStore.page = 'INDEX'"
|
|
/>
|
|
</Teleport>
|
|
|
|
<div class="learningpath flex flex-col">
|
|
<div class="flex flex-col h-max">
|
|
<div class="bg-white py-8 flex flex-col">
|
|
<div class="flex justify-end p-3">
|
|
<button
|
|
class="flex items-center"
|
|
data-cy="show-list-view"
|
|
@click="learningPathStore.page = 'OVERVIEW'"
|
|
>
|
|
<it-icon-list />
|
|
Listenansicht anzeigen
|
|
</button>
|
|
</div>
|
|
<LearningPathDiagram
|
|
class="max-w-[1680px] w-full"
|
|
identifier="mainVisualization"
|
|
:vertical="false"
|
|
></LearningPathDiagram>
|
|
</div>
|
|
|
|
<div class="container-large">
|
|
<h1 data-cy="learning-path-title" class="mt-6 lg:mt-12 mb-6">
|
|
{{ learningPathStore.learningPath.title }}
|
|
</h1>
|
|
<div
|
|
class="bg-white p-4 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
|
|
>
|
|
<div class="p-4 lg:p-8 flex-auto">
|
|
<h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
|
|
<p class="mt-4 text-xl"></p>
|
|
</div>
|
|
<div
|
|
v-if="learningPathStore.learningPath.nextLearningContent"
|
|
class="p-4 lg:p-8 flex-2"
|
|
>
|
|
Nächster Schritt
|
|
<h3>
|
|
{{
|
|
learningPathStore.learningPath.nextLearningContent.parentCircle.title
|
|
}}:
|
|
{{
|
|
learningPathStore.learningPath.nextLearningContent
|
|
.parentLearningSequence?.title
|
|
}}
|
|
</h3>
|
|
<router-link
|
|
class="mt-4 btn-blue"
|
|
:to="createContinueUrl(learningPathStore.learningPath)[0]"
|
|
data-cy="lp-continue-button"
|
|
translate
|
|
>
|
|
<span v-if="createContinueUrl(learningPathStore.learningPath)[1]">
|
|
Los geht's
|
|
</span>
|
|
<span v-else>Weiter geht's</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="topic"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|