From 652cd7d8fbd5b82682e9962e4769d5dc9b9474b0 Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Wed, 17 May 2023 10:58:54 +0200
Subject: [PATCH] Implement RichTextBlock

---
 .../learningContentPage/LearningContentParent.vue |  5 +++--
 .../blocks/DescriptionBlock.vue                   | 15 +++++++++++++++
 .../learningContentPage/blocks/RichTextBlock.vue  |  9 ++++-----
 client/src/types.ts                               |  1 +
 server/vbv_lernwelt/learnpath/models.py           |  5 +++++
 5 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 client/src/pages/learningPath/learningContentPage/blocks/DescriptionBlock.vue

diff --git a/client/src/pages/learningPath/learningContentPage/LearningContentParent.vue b/client/src/pages/learningPath/learningContentPage/LearningContentParent.vue
index db815cb4..f8ea9d61 100644
--- a/client/src/pages/learningPath/learningContentPage/LearningContentParent.vue
+++ b/client/src/pages/learningPath/learningContentPage/LearningContentParent.vue
@@ -8,11 +8,12 @@ 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";
 import PlaceholderBlock from "./blocks/PlaceholderBlock.vue";
-import DescriptionBlock from "./blocks/RichTextBlock.vue";
+import RichTextBlock from "./blocks/RichTextBlock.vue";
 import VideoBlock from "./blocks/VideoBlock.vue";
 
 log.debug("LearningContent.vue setup");
@@ -31,7 +32,7 @@ const COMPONENTS: Record<LearningContentType, Component> = {
   "learnpath.LearningContentLearningModule": IframeBlock,
   "learnpath.LearningContentMediaLibrary": MediaLibraryBlock,
   "learnpath.LearningContentPlaceholder": PlaceholderBlock,
-  "learnpath.LearningContentRichText": DescriptionBlock,
+  "learnpath.LearningContentRichText": RichTextBlock,
   "learnpath.LearningContentTest": IframeBlock,
   "learnpath.LearningContentVideo": VideoBlock,
 };
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/DescriptionBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/DescriptionBlock.vue
new file mode 100644
index 00000000..ad55de42
--- /dev/null
+++ b/client/src/pages/learningPath/learningContentPage/blocks/DescriptionBlock.vue
@@ -0,0 +1,15 @@
+<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>
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
index ad55de42..f92a75da 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
@@ -1,15 +1,14 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div class="container-medium">
-    <div class="lg:mt-8">
-      <p class="text-large my-4">{{ props.content.description }}}</p>
-    </div>
+    <div v-html="props.content.text"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { LearningContentInterface } from "@/types";
+import type { LearningContentRichText } from "@/types";
 
 const props = defineProps<{
-  content: LearningContentInterface;
+  content: LearningContentRichText;
 }>();
 </script>
diff --git a/client/src/types.ts b/client/src/types.ts
index 255ec611..e8b871b5 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -72,6 +72,7 @@ export interface LearningContentPlaceholder extends LearningContentInterface {
 
 export interface LearningContentRichText extends LearningContentInterface {
   readonly content_type: "learnpath.LearningContentRichText";
+  text: string;
 }
 
 export interface LearningContentTest extends LearningContentInterface {
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index ab4b9e85..e08bacec 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -306,8 +306,13 @@ class LearningContentTest(LearningContent):
 
 
 class LearningContentRichText(LearningContent):
+    text = RichTextField(blank=True)
+
     parent_page_types = ["learnpath.Circle"]
     subpage_types = []
+    content_panels = LearningContent.content_panels + [
+        FieldPanel("text", classname="Text"),
+    ]
 
 
 class LearningContentAssignment(LearningContent):