ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Provide LearningContent to badge logic

This commit is contained in:
Daniel Egger 2023-05-19 18:34:45 +02:00
parent 9be0ce9d39
commit de320be3cb
14 changed files with 93 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/FeedbackForm.vue
View File

@ -131,8 +131,8 @@ const sendFeedback = () => {
<template>
<LearningContentMultiLayout
:title="title"
subtitle="Feedback"
learning-content-type="learnpath.LearningContentFeedback"
sub-title="Feedback"
:learning-content="page"
:show-start-button="stepNo === 0"
:show-next-button="stepNo > 0 && stepNo + 1 < numSteps"
:show-previous-button="stepNo > 0"

10
client/src/pages/learningPath/LearningContentTypeBadge.vue
View File

@ -1,23 +1,23 @@
<script setup lang="ts">
import type { LearningContentType } from "@/types";
import type { LearningContent } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";
const props = defineProps<{
learningContentType: LearningContentType;
learningContent: LearningContent;
}>();
</script>
<template>
<div
v-if="props.learningContentType !== 'learnpath.LearningContentPlaceholder'"
v-if="props.learningContent.content_type !== 'learnpath.LearningContentPlaceholder'"
class="flex h-min w-min items-center gap-2 rounded-full bg-gray-200 px-2.5 py-0.5"
>
<component
:is="learningContentTypeData(props.learningContentType).icon"
:is="learningContentTypeData(props.learningContent).icon"
class="h-6 w-6"
></component>
<p class="whitespace-nowrap">
{{ learningContentTypeData(props.learningContentType).title }}
{{ learningContentTypeData(props.learningContent).title }}
</p>
</div>
</template>

4
client/src/pages/learningPath/circlePage/LearningSequence.vue
View File

@ -172,9 +172,7 @@ const learningSequenceBorderClass = computed(() => {
</button>
<div class="hidden sm:block"></div>
<div class="w-full sm:w-auto">
<LearningContentBadge
:learning-content-type="learningContent.content_type"
/>
<LearningContentBadge :learning-content="learningContent" />
</div>
</div>
</span>

4
client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
View File

@ -197,9 +197,9 @@ const endBadgeText = computed(() => {
<div class="flex">
<LearningContentMultiLayout
:current-step="stepIndex"
:subtitle="subTitle"
:sub-title="subTitle"
:title="getTitle()"
:learning-content-type="props.learningContent.content_type"
:learning-content="props.learningContent"
:steps-count="numPages"
:show-next-button="showNextButton && stepIndex !== 0"
:show-exit-button="showExitButton"

5
client/src/pages/learningPath/learningContentPage/blocks/AttendanceCourseBlock.vue
View File

@ -17,10 +17,7 @@ const courseSessionAttendanceCourse = computed(() => {
</script>
<template>
<LearningContentSimpleLayout
:title="content.title"
:learning-content-type="props.content.content_type"
>
<LearningContentSimpleLayout :title="content.title" :learning-content="props.content">
<div class="container-medium">
<div class="lg:mt-8">
<div class="text-large my-4">

6
client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue
View File

@ -1,14 +1,14 @@
<script setup lang="ts">
import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
import type { LearningContentInterface } from "@/types";
import type { LearningContent } from "@/types";
const props = defineProps<{
content: LearningContentInterface;
content: LearningContent;
}>();
</script>
<template>
<LearningContentSimpleLayout :learning-content-type="props.content.content_type">
<LearningContentSimpleLayout :learning-content="props.content">
<div class="h-screen">
<iframe
width="100%"

2
client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue
View File

@ -13,7 +13,7 @@ log.debug("LearningContentMediaLibraryBlock.vue created");
<template>
<LearningContentSimpleLayout
:title="props.content.title"
:learning-content-type="props.content.content_type"
:learning-content="props.content"
>
<div class="container-medium">
<!-- eslint-disable vue/no-v-html -->

6
client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
View File

@ -1,16 +1,16 @@
<script setup lang="ts">
import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
import type { LearningContentInterface } from "@/types";
import type { LearningContent } from "@/types";
const props = defineProps<{
content: LearningContentInterface;
content: LearningContent;
}>();
</script>
<template>
<LearningContentSimpleLayout
:title="props.content.title"
:learning-content-type="props.content.content_type"
:learning-content="props.content"
>
<!-- eslint-disable vue/no-v-html -->
<div class="container-medium">

2
client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
View File

@ -10,7 +10,7 @@ const props = defineProps<{
<template>
<LearningContentSimpleLayout
:title="props.content.title"
:learning-content-type="props.content.content_type"
:learning-content="props.content"
>
<!-- eslint-disable vue/no-v-html -->
<div class="container-medium">

2
client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue
View File

@ -1,7 +1,7 @@
<template>
<LearningContentSimpleLayout
:title="props.content.title"
:learning-content-type="props.content.content_type"
:learning-content="props.content"
>
<div class="container-medium">
<iframe

46
client/src/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue
View File

@ -3,13 +3,15 @@
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 type { LearningContent } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";
import { computed } from "vue";
interface Props {
title?: string;
subtitle: string;
learningContentType: LearningContentType;
subTitle?: string;
icon?: string;
learningContent?: LearningContent;
showStartButton: boolean;
showPreviousButton: boolean;
showNextButton: boolean;
@ -24,7 +26,10 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
title: undefined,
title: "",
subTitle: "",
icon: "",
learningContent: undefined,
startBadgeText: undefined,
endBadgeText: undefined,
closeButtonVariant: "mark_as_done",
@ -32,21 +37,40 @@ const props = withDefaults(defineProps<Props>(), {
stepQueryParam: undefined,
});
const subTitle = computed(() => {
if (props.subTitle) {
return props.subTitle;
}
if (props.learningContent) {
return learningContentTypeData(props.learningContent).title;
}
return "";
});
const icon = computed(() => {
if (props.icon) {
return props.icon;
}
if (props.learningContent) {
return learningContentTypeData(props.learningContent).icon;
}
return "";
});
const emit = defineEmits(["previous", "next", "exit"]);
</script>
<template>
<div class="container-large">
<div
v-if="props.learningContentType !== 'learnpath.LearningContentPlaceholder'"
v-if="
props.learningContent?.content_type !== '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 }}
<component :is="icon" v-if="icon" class="h-6 w-6 text-gray-900"></component>
<p v-if="subTitle" class="text-gray-900" data-cy="lc-subtitle">
{{ subTitle }}
</p>
</div>

40
client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue
View File

@ -1,30 +1,56 @@
<script setup lang="ts">
// Basic layout for a learning content that only has a single step
import LearningContentFooter from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
import type { LearningContentType } from "@/types";
import type { LearningContent } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";
import { computed } from "vue";
export interface Props {
title?: string;
learningContentType: LearningContentType;
icon?: string;
subTitle?: string;
learningContent?: LearningContent;
}
const props = withDefaults(defineProps<Props>(), {
title: "",
icon: "",
subTitle: "",
learningContent: undefined,
});
const type = learningContentTypeData(props.learningContentType);
const subTitle = computed(() => {
if (props.subTitle) {
return props.subTitle;
}
if (props.learningContent) {
return learningContentTypeData(props.learningContent).title;
}
return "";
});
const icon = computed(() => {
if (props.icon) {
return props.icon;
}
if (props.learningContent) {
return learningContentTypeData(props.learningContent).icon;
}
return "";
});
</script>
<template>
<div class="container-medium">
<div
v-if="props.learningContentType !== 'learnpath.LearningContentPlaceholder'"
v-if="
props.learningContent?.content_type !== 'learnpath.LearningContentPlaceholder'
"
class="flex h-min w-full items-center gap-2 pb-8"
>
<component :is="type.icon" class="h-6 w-6 text-gray-900"></component>
<p class="whitespace-nowrap text-gray-900" data-cy="lc-subtitle">
{{ type.title }}
<component :is="icon" v-if="icon" class="h-6 w-6 text-gray-900"></component>
<p v-if="subTitle" class="whitespace-nowrap text-gray-900" data-cy="lc-subtitle">
{{ subTitle }}
</p>
</div>

4
client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
View File

@ -69,9 +69,9 @@ onUnmounted(() => {
>
<LearningContentMultiLayout
:current-step="questionIndex"
:subtitle="$t('selfEvaluation.title')"
:sub-title="$t('selfEvaluation.title')"
:title="$t('selfEvaluation.title', { title: learningUnit.title })"
learning-content-type="learnpath.LearningContentLearningModule"
icon="it-icon-lc-learning-module"
:steps-count="questions.length"
:show-next-button="showNextButton"
:show-exit-button="showExitButton"

6
client/src/utils/typeMaps.ts
View File

@ -1,4 +1,4 @@
import type { LearningContentType } from "@/types";
import type { LearningContent } from "@/types";
import { assertUnreachable } from "@/utils/utils";
export interface LearningContentIdentifier {
@ -7,9 +7,9 @@ export interface LearningContentIdentifier {
}
export function learningContentTypeData(
t: LearningContentType
lc: LearningContent
): LearningContentIdentifier {
switch (t) {
switch (lc.content_type) {
case "learnpath.LearningContentAssignment":
return { title: "Geleitete Fallarbeit", icon: "it-icon-lc-assignment" };
case "learnpath.LearningContentAttendanceCourse":