Provide LearningContent to badge logic

client/src/components/FeedbackForm.vue

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

client/src/pages/learningPath/LearningContentTypeBadge.vue

@@ -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>

client/src/pages/learningPath/circlePage/LearningSequence.vue

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

client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue

@@ -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"

client/src/pages/learningPath/learningContentPage/blocks/AttendanceCourseBlock.vue

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

client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue

@@ -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%"

client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue

@@ -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 -->

client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue

@@ -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">

client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue

@@ -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">

client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue

@@ -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

client/src/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue

@@ -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;
+  subTitle?: string;
-  learningContentType: LearningContentType;
+  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
+      <component :is="icon" v-if="icon" class="h-6 w-6 text-gray-900"></component>
-        :is="learningContentTypeData(props.learningContentType).icon"
+      <p v-if="subTitle" class="text-gray-900" data-cy="lc-subtitle">
-        class="h-6 w-6 text-gray-900"
+        {{ subTitle }}
-      ></component>
-      <p class="text-gray-900" data-cy="lc-subtitle">
-        {{ props.subtitle }}
       </p>
     </div>
 

client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue

@@ -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>
+      <component :is="icon" v-if="icon" class="h-6 w-6 text-gray-900"></component>
-      <p class="whitespace-nowrap text-gray-900" data-cy="lc-subtitle">
+      <p v-if="subTitle" class="whitespace-nowrap text-gray-900" data-cy="lc-subtitle">
-        {{ type.title }}
+        {{ subTitle }}
       </p>
     </div>
 

client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue

@@ -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"

client/src/utils/typeMaps.ts

@@ -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":