79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// Layout for learning contents with multiple steps
|
|
import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
|
|
import type { ClosingButtonVariant } from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
|
|
import LearningContentFooter from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
|
|
import type { LearningContentType } from "@/types";
|
|
import { learningContentTypeData } from "@/utils/typeMaps";
|
|
|
|
interface Props {
|
|
title?: string;
|
|
subtitle: string;
|
|
learningContentType: LearningContentType;
|
|
showStartButton: boolean;
|
|
showPreviousButton: boolean;
|
|
showNextButton: boolean;
|
|
showExitButton: boolean;
|
|
currentStep: number;
|
|
stepsCount: number;
|
|
startBadgeText?: string;
|
|
endBadgeText?: string;
|
|
closeButtonVariant?: ClosingButtonVariant;
|
|
baseUrl?: string;
|
|
stepQueryParam?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title: undefined,
|
|
startBadgeText: undefined,
|
|
endBadgeText: undefined,
|
|
closeButtonVariant: "mark_as_done",
|
|
baseUrl: undefined,
|
|
stepQueryParam: undefined,
|
|
});
|
|
|
|
const emit = defineEmits(["previous", "next", "exit"]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-large">
|
|
<div
|
|
v-if="props.learningContentType !== 'learnpath.LearningContentPlaceholder'"
|
|
class="flex h-min items-center gap-2 rounded-full pb-10"
|
|
>
|
|
<component
|
|
:is="learningContentTypeData(props.learningContentType).icon"
|
|
class="h-6 w-6 text-gray-900"
|
|
></component>
|
|
<p class="text-gray-900" data-cy="lc-subtitle">
|
|
{{ props.subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<h2 v-if="props.title" class="mb-6 text-3xl" data-cy="lc-title">
|
|
{{ props.title }}
|
|
</h2>
|
|
<ItNavigationProgress
|
|
v-if="props.stepsCount > 1"
|
|
:current-step="props.currentStep"
|
|
:start-badge-text="props.startBadgeText"
|
|
:steps="stepsCount"
|
|
:end-badge-text="props.endBadgeText"
|
|
:base-url="props.baseUrl"
|
|
:query-param="props.stepQueryParam"
|
|
class="mb-8 overflow-hidden"
|
|
></ItNavigationProgress>
|
|
<slot></slot>
|
|
</div>
|
|
<LearningContentFooter
|
|
:show-start-button="props.showStartButton"
|
|
:show-next-button="props.showNextButton"
|
|
:show-previous-button="props.showPreviousButton"
|
|
:show-exit-button="props.showExitButton"
|
|
:closing-button-variant="props.closeButtonVariant"
|
|
@previous="emit('previous')"
|
|
@next="emit('next')"
|
|
@start="emit('next')"
|
|
></LearningContentFooter>
|
|
</template>
|