Add some test data and clean up some things

client/src/pages/learningPath/learningContentPage/LearningContentParent.vue

@@ -8,7 +8,6 @@ import type { Component } from "vue";
 import { computed, onUnmounted } from "vue";
 import AssignmentBlock from "./blocks/AssignmentBlock.vue";
 import AttendanceDayBlock from "./blocks/AttendanceDayBlock.vue";
-import DescriptionBlock from "./blocks/DescriptionBlock.vue";
 import FeedbackBlock from "./blocks/FeedbackBlock.vue";
 import IframeBlock from "./blocks/IframeBlock.vue";
 import MediaLibraryBlock from "./blocks/MediaLibraryBlock.vue";
@@ -36,7 +35,7 @@ const COMPONENTS: Record<LearningContentType, Component> = {
   "learnpath.LearningContentTest": IframeBlock,
   "learnpath.LearningContentVideo": VideoBlock,
 };
-const DEFAULT_BLOCK = DescriptionBlock;
+const DEFAULT_BLOCK = PlaceholderBlock;
 
 const component = computed(() => {
   return COMPONENTS[props.learningContent.content_type] || DEFAULT_BLOCK;

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

@@ -1,15 +0,0 @@
-<template>
-  <div class="container-medium">
-    <div class="lg:mt-8">
-      <p class="text-large my-4">{{ props.content.description }}}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { LearningContentInterface } from "@/types";
-
-const props = defineProps<{
-  content: LearningContentInterface;
-}>();
-</script>

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

@@ -11,5 +11,14 @@ const props = defineProps<{
   <LearningContentSimpleLayout
     :title="props.content.title"
     :learning-content-type="props.content.content_type"
-  ></LearningContentSimpleLayout>
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <div class="container-medium">
+      <p
+        v-if="props.content.description"
+        class="default-wagtail-rich-text my-4"
+        v-html="props.content.description"
+      ></p>
+    </div>
+  </LearningContentSimpleLayout>
 </template>

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

@@ -1,14 +1,30 @@
-<template>
-  <!-- eslint-disable vue/no-v-html -->
-  <div class="container-medium">
-    <div class="default-wagtail-rich-text" v-html="props.content.text"></div>
-  </div>
-</template>
-
 <script setup lang="ts">
+import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContentRichText } from "@/types";
 
 const props = defineProps<{
   content: LearningContentRichText;
 }>();
 </script>
+
+<template>
+  <LearningContentSimpleLayout
+    :title="props.content.title"
+    :learning-content-type="props.content.content_type"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <div class="container-medium">
+      <p
+        v-if="props.content.description"
+        class="default-wagtail-rich-text my-4"
+        v-html="props.content.description"
+      ></p>
+
+      <div
+        v-if="props.content.text"
+        class="default-wagtail-rich-text my-4"
+        v-html="props.content.text"
+      ></div>
+    </div>
+  </LearningContentSimpleLayout>
+</template>

client/src/utils/typeMaps.ts

@@ -23,7 +23,7 @@ export function learningContentTypeData(
     case "learnpath.LearningContentTest":
       return { title: "Test", icon: "it-icon-lc-test" };
     case "learnpath.LearningContentRichText":
-      return { title: "Reflexion", icon: "it-icon-lc-resource" };
+      return { title: "Text", icon: "it-icon-lc-resource" };
     case "learnpath.LearningContentFeedback":
       return { title: "Feedback", icon: "it-icon-lc-feedback" };
     case "learnpath.LearningContentPlaceholder":

client/tailwind.css

@@ -27,6 +27,14 @@ body {
   hyphens: auto;
 }
 
+.default-wagtail-rich-text h3 {
+  margin-bottom: 1em;
+}
+
+.default-wagtail-rich-text p {
+  margin-bottom: 0.5em;
+}
+
 .default-wagtail-rich-text ul {
   list-style-type: disc;
   margin-left: 24px;

server/vbv_lernwelt/core/constants.py

@@ -1,4 +1,14 @@
-DEFAULT_RICH_TEXT_FEATURES = ["ul", "bold", "italic", "h2"]
+DEFAULT_RICH_TEXT_FEATURES = [
+    "ul",
+    "bold",
+    "italic",
+]
+DEFAULT_RICH_TEXT_FEATURES_WITH_HEADER = [
+    "ul",
+    "bold",
+    "italic",
+    "h3",
+]
 
 # ids for cypress test data
 ADMIN_USER_ID = -1

server/vbv_lernwelt/course/creators/test_course.py

@@ -4,6 +4,7 @@ import wagtail_factories
 from django.conf import settings
 from slugify import slugify
 from wagtail.models import Site
+from wagtail.rich_text import RichText
 
 from vbv_lernwelt.assignment.creators.create_assignments import create_test_assignment
 from vbv_lernwelt.assignment.models import Assignment
@@ -38,6 +39,7 @@ from vbv_lernwelt.learnpath.tests.learning_path_factories import (
     LearningContentLearningModuleFactory,
     LearningContentMediaLibraryFactory,
     LearningContentPlaceholderFactory,
+    LearningContentRichTextFactory,
     LearningContentVideoFactory,
     LearningPathFactory,
     LearningSequenceFactory,
@@ -198,9 +200,21 @@ damit du erfolgreich mit deinem Lernpfad (durch-)starten kannst.
         title="Vorbereitung", parent=circle, icon="it-icon-ls-start"
     )
     lu = LearningUnitFactory(title="Vorbereitung", parent=circle)
-    LearningContentPlaceholderFactory(
+    LearningContentRichTextFactory(
         title="Verschaffe dir einen Überblick",
         parent=circle,
+        text=RichText(
+            """
+<h3>Arbeitsblätter «Vorbereitungsauftrag»</h3>
+<p>Handlungskompetenz d2: Informations-und Beratungsgespräch mit Kunden oder Lieferanten führen</p>
+<p>Arbeitssituation 4: Kunden beraten und dazugehörige Prozesse abwickeln</p>
+<p>Die Kaufleute führen Bedarfserhebungen für Kunden durch und schlagen ihnen angemessene Versicherungslösungen vor. Sie führen Beratungs-und Verkaufsgespräche und erteilen Auskünfte. Sieführen Kundenaufträge aus und behandeln Beschwerden. Sie formulieren Aufträge an relevante Anspruchsgruppen und unterstützen den Aussendient in verkaufsrelevanten Belangen.</p>
+<ul>
+<li>d2.pv.ük3: Sie erläutern die Leistungen und Produkte im Versicherungsbereich. (K2)</li>
+<li>d2pv.ük4: Sie erläutern die Prozesse und Abläufe im privaten Versicherungsbereich. (K2)</li>
+</ul>
+        """
+        ),
     )
     LearningContentMediaLibraryFactory(
         title=f"Mediathek {title}",

server/vbv_lernwelt/learnpath/models.py

@@ -6,7 +6,7 @@ from wagtail.admin.panels import FieldPanel, PageChooserPanel
 from wagtail.fields import RichTextField
 from wagtail.models import Page
 
-from vbv_lernwelt.core.constants import DEFAULT_RICH_TEXT_FEATURES
+from vbv_lernwelt.core.constants import DEFAULT_RICH_TEXT_FEATURES_WITH_HEADER
 from vbv_lernwelt.core.model_utils import find_available_slug
 from vbv_lernwelt.course.models import CourseBasePage, CoursePage
 
@@ -307,7 +307,7 @@ class LearningContentTest(LearningContent):
 
 
 class LearningContentRichText(LearningContent):
-    text = RichTextField(blank=True, features=DEFAULT_RICH_TEXT_FEATURES)
+    text = RichTextField(blank=True, features=DEFAULT_RICH_TEXT_FEATURES_WITH_HEADER)
 
     parent_page_types = ["learnpath.Circle"]
     serialize_field_names = LearningContent.serialize_field_names + [