From c8824763f6adea5149a454c0524b8a054a6754a2 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 09:50:25 +0200
Subject: [PATCH 1/8] Refactor types

---
 .../learningPath/LearningContentTypeBadge.vue |  37 +--
 .../competence/PerformanceCriteriaPage.vue    |   3 +-
 client/src/services/circle.ts                 |  70 ++--
 client/src/services/learningPath.ts           |  18 +-
 client/src/stores/competence.ts               |  10 +-
 client/src/stores/completion.ts               |   4 +-
 client/src/types.ts                           | 312 ++++++++----------
 client/src/utils/typeMaps.ts                  |  42 ++-
 client/src/utils/utils.ts                     |   3 +
 .../learnpath/create_default_learning_path.py |   2 +-
 .../learnpath/models_learning_unit_content.py |  16 +-
 11 files changed, 230 insertions(+), 287 deletions(-)
 create mode 100644 client/src/utils/utils.ts

diff --git a/client/src/components/learningPath/LearningContentTypeBadge.vue b/client/src/components/learningPath/LearningContentTypeBadge.vue
index 63dcd50f..aa25a649 100644
--- a/client/src/components/learningPath/LearningContentTypeBadge.vue
+++ b/client/src/components/learningPath/LearningContentTypeBadge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { LearningContentType } from "@/types";
-import { learningContentTypesToName } from "@/utils/typeMaps";
+import { learningContentTypeData } from "@/utils/typeMaps";
 
 const props = defineProps<{
   learningContentType: LearningContentType;
@@ -11,39 +11,12 @@ const props = defineProps<{
   <div
     class="flex bg-gray-200 rounded-full px-2.5 py-0.5 gap-2 items-center w-min h-min"
   >
-    <it-icon-lc-assignment
-      v-if="props.learningContentType === 'assignment'"
+    <component
+      :is="learningContentTypeData(props.learningContentType).icon"
       class="w-6 h-6"
-    />
-    <it-icon-lc-exercise
-      v-else-if="props.learningContentType === 'exercise'"
-      class="w-6 h-6"
-    />
-    <it-icon-lc-book v-else-if="props.learningContentType === 'book'" class="w-6 h-6" />
-    <it-icon-lc-video
-      v-else-if="props.learningContentType === 'video'"
-      class="w-6 h-6"
-    />
-    <it-icon-lc-media-library
-      v-else-if="props.learningContentType === 'media_library'"
-      class="w-6 h-6"
-    />
-    <it-icon-lc-test v-else-if="props.learningContentType === 'test'" class="w-6 h-6" />
-    <it-icon-lc-online-training
-      v-else-if="props.learningContentType === 'online_training'"
-      class="w-6 h-6"
-    />
-    <it-icon-lc-resource
-      v-else-if="props.learningContentType === 'resource'"
-      class="w-6 h-6"
-    />
-    <it-icon-lc-resource
-      v-else-if="props.learningContentType === 'document'"
-      class="w-6 h-6"
-    />
-    <it-icon-lc-document v-else class="w-6 h-6" />
+    ></component>
     <p class="whitespace-nowrap">
-      {{ learningContentTypesToName.get(props.learningContentType) }}
+      {{ learningContentTypeData(props.learningContentType).title }}
     </p>
   </div>
 </template>
diff --git a/client/src/pages/competence/PerformanceCriteriaPage.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
index 26b48cda..b5bbe32c 100644
--- a/client/src/pages/competence/PerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/PerformanceCriteriaPage.vue
@@ -4,7 +4,8 @@ import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import type { CourseCompletionStatus } from "@/types";
 import * as log from "loglevel";
-import { computed, Ref, ref } from "vue";
+import type { Ref } from "vue";
+import { computed, ref } from "vue";
 
 log.debug("CompetencesMainView created");
 
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 12bbeffb..3edb0d5f 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -4,34 +4,13 @@ import type {
   CircleGoal,
   CircleJobSituation,
   CourseCompletion,
-  CourseCompletionStatus,
-  CourseWagtailPage,
   LearningContent,
   LearningSequence,
   LearningUnit,
   LearningUnitPerformanceCriteria,
+  WagtailCircle,
 } from "@/types";
 
-function _createEmptyLearningUnit(
-  parentLearningSequence: LearningSequence
-): LearningUnit {
-  return {
-    id: 0,
-    title: "",
-    slug: "",
-    translation_key: "",
-    type: "learnpath.LearningUnit",
-    frontend_url: "",
-    learningContents: [],
-    minutes: 0,
-    parentLearningSequence: parentLearningSequence,
-    children: [],
-    last: true,
-    completion_status: "unknown",
-    evaluate_url: "",
-  };
-}
-
 export function parseLearningSequences(
   circle: Circle,
   children: CircleChild[]
@@ -52,9 +31,6 @@ export function parseLearningSequences(
         result.push(learningSequence);
       }
       learningSequence = Object.assign(child, { learningUnits: [] });
-
-      // initialize empty learning unit if there will not come a learning unit next
-      learningUnit = _createEmptyLearningUnit(learningSequence);
     } else if (child.type === "learnpath.LearningUnit") {
       if (!learningSequence) {
         throw new Error("LearningUnit found before LearningSequence");
@@ -92,13 +68,15 @@ export function parseLearningSequences(
       }
 
       learningUnit.learningContents.push(child);
+    } else {
+      throw new Error("Unknown CircleChild found...");
     }
   });
 
   if (learningUnit && learningSequence) {
     // TypeScript does not get it here...
     learningUnit.last = true;
-    (learningSequence as LearningSequence).learningUnits.push(learningUnit);
+    learningSequence.learningUnits.push(learningUnit);
     result.push(learningSequence);
   } else {
     throw new Error(
@@ -121,10 +99,9 @@ export function parseLearningSequences(
   return result;
 }
 
-export class Circle implements CourseWagtailPage {
+export class Circle implements WagtailCircle {
   readonly type = "learnpath.Circle";
   readonly learningSequences: LearningSequence[];
-  completion_status: CourseCompletionStatus = "unknown";
 
   nextCircle?: Circle;
   previousCircle?: Circle;
@@ -136,30 +113,33 @@ export class Circle implements CourseWagtailPage {
     public readonly translation_key: string,
     public readonly frontend_url: string,
     public readonly description: string,
-    public children: CircleChild[],
-    public goal_description: string,
-    public goals: CircleGoal[],
-    public job_situation_description: string,
-    public job_situations: CircleJobSituation[],
+    public readonly children: CircleChild[],
+    public readonly goal_description: string,
+    public readonly goals: CircleGoal[],
+    public readonly job_situation_description: string,
+    public readonly job_situations: CircleJobSituation[],
     public readonly parentLearningPath?: LearningPath
   ) {
     this.learningSequences = parseLearningSequences(this, this.children);
   }
 
-  public static fromJson(json: any, learningPath?: LearningPath): Circle {
+  public static fromJson(
+    wagtailCircle: WagtailCircle,
+    learningPath?: LearningPath
+  ): Circle {
     // TODO add error checking when the data does not conform to the schema
     return new Circle(
-      json.id,
-      json.slug,
-      json.title,
-      json.translation_key,
-      json.frontend_url,
-      json.description,
-      json.children,
-      json.goal_description,
-      json.goals,
-      json.job_situation_description,
-      json.job_situations,
+      wagtailCircle.id,
+      wagtailCircle.slug,
+      wagtailCircle.title,
+      wagtailCircle.translation_key,
+      wagtailCircle.frontend_url,
+      wagtailCircle.description,
+      wagtailCircle.children,
+      wagtailCircle.goal_description,
+      wagtailCircle.goals,
+      wagtailCircle.job_situation_description,
+      wagtailCircle.job_situations,
       learningPath
     );
   }
diff --git a/client/src/services/learningPath.ts b/client/src/services/learningPath.ts
index eafdf083..79bdae91 100644
--- a/client/src/services/learningPath.ts
+++ b/client/src/services/learningPath.ts
@@ -2,12 +2,12 @@ import * as _ from "lodash";
 
 import { Circle } from "@/services/circle";
 import type {
+  Course,
   CourseCompletion,
-  CourseCompletionStatus,
-  CourseWagtailPage,
   LearningContent,
   LearningPathChild,
   Topic,
+  WagtailLearningPath,
 } from "@/types";
 
 function getLastCompleted(courseId: number, completionData: CourseCompletion[]) {
@@ -22,21 +22,23 @@ function getLastCompleted(courseId: number, completionData: CourseCompletion[])
   );
 }
 
-export class LearningPath implements CourseWagtailPage {
+export class LearningPath implements WagtailLearningPath {
   readonly type = "learnpath.LearningPath";
   public topics: Topic[];
   public circles: Circle[];
   public nextLearningContent?: LearningContent;
-  readonly completion_status: CourseCompletionStatus = "unknown";
 
-  public static fromJson(json: any, completionData: CourseCompletion[]): LearningPath {
+  public static fromJson(
+    json: WagtailLearningPath,
+    completionData: CourseCompletion[]
+  ): LearningPath {
     return new LearningPath(
       json.id,
       json.slug,
       json.course.title,
       json.translation_key,
       json.frontend_url,
-      json.course.id,
+      json.course,
       json.children,
       completionData
     );
@@ -48,7 +50,7 @@ export class LearningPath implements CourseWagtailPage {
     public readonly title: string,
     public readonly translation_key: string,
     public readonly frontend_url: string,
-    public readonly courseId: number,
+    public readonly course: Course,
     public children: LearningPathChild[],
     completionData?: CourseCompletion[]
   ) {
@@ -95,7 +97,7 @@ export class LearningPath implements CourseWagtailPage {
     this.nextLearningContent = undefined;
 
     const lastCompletedLearningContent = getLastCompleted(
-      this.courseId,
+      this.course.id,
       completionData
     );
 
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
index a133c45a..c13c73df 100644
--- a/client/src/stores/competence.ts
+++ b/client/src/stores/competence.ts
@@ -1,9 +1,9 @@
 import { itGet } from "@/fetchHelpers";
 import { useCompletionStore } from "@/stores/completion";
 import type {
+  BaseCourseWagtailPage,
   CompetencePage,
   CompetenceProfilePage,
-  CourseWagtailPage,
   PerformanceCriteria,
 } from "@/types";
 import _ from "lodash";
@@ -103,9 +103,11 @@ export const useCompetenceStore = defineStore({
 
       this.competenceProfilePage = competenceProfilePageData;
 
-      const circles = competenceProfilePageData.circles.map((c: CourseWagtailPage) => {
-        return { id: c.translation_key, name: `Circle: ${c.title}` };
-      });
+      const circles = competenceProfilePageData.circles.map(
+        (c: BaseCourseWagtailPage) => {
+          return { id: c.translation_key, name: `Circle: ${c.title}` };
+        }
+      );
       this.availableCircles = [{ id: "all", name: "Circle: Alle" }, ...circles];
 
       await this.parseCompletionData();
diff --git a/client/src/stores/completion.ts b/client/src/stores/completion.ts
index f420ac0d..e6e25ff0 100644
--- a/client/src/stores/completion.ts
+++ b/client/src/stores/completion.ts
@@ -1,5 +1,5 @@
 import { itGet, itPost } from "@/fetchHelpers";
-import type { CourseCompletion, CourseWagtailPage } from "@/types";
+import type { BaseCourseWagtailPage, CourseCompletion } from "@/types";
 import { defineStore } from "pinia";
 
 export type CompletionStoreState = {
@@ -28,7 +28,7 @@ export const useCompletionStore = defineStore({
       this.completionData = completionData;
       return this.completionData || [];
     },
-    async markPage(page: CourseWagtailPage) {
+    async markPage(page: BaseCourseWagtailPage) {
       const completionData = await itPost("/api/course/completion/mark/", {
         page_key: page.translation_key,
         completion_status: page.completion_status,
diff --git a/client/src/types.ts b/client/src/types.ts
index b1091352..6a5c1853 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -3,105 +3,133 @@ import type { Component } from "vue";
 
 export type CourseCompletionStatus = "unknown" | "fail" | "success";
 
-export type LearningContentType =
-  | "assignment"
-  | "book"
-  | "document"
-  | "exercise"
-  | "media_library"
-  | "online_training"
-  | "resource"
-  | "test"
-  | "video"
-  | "placeholder";
 
-export interface LearningContentBlock {
-  type: LearningContentType;
-  value: {
-    description: string;
-  };
-  id: string;
+export interface BaseCourseWagtailPage {
+  readonly id: number;
+  readonly title: string;
+  readonly slug: string;
+  readonly type: string;
+  readonly translation_key: string;
+  readonly frontend_url: string;
+  completion_status?: CourseCompletionStatus;
+  completion_status_updated_at?: string;
 }
 
-export interface AssignmentBlock {
-  type: "assignment";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface CircleLight {
+  readonly id: number;
+  readonly title: string;
+  readonly translation_key: string;
 }
 
-export interface BookBlock {
-  type: "book";
-  value: {
+export interface BaseLearningContentBlock {
+  readonly type: string;
+  readonly id: string;
+  readonly value: {
     description: string;
     url: string;
+    text?: string;
   };
-  id: string;
 }
 
-export interface DocumentBlock {
-  type: "document";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface AssignmentBlock extends BaseLearningContentBlock {
+  readonly type: "assignment";
 }
 
-export interface ExerciseBlock {
-  type: "exercise";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface BookBlock extends BaseLearningContentBlock {
+  readonly type: "book";
 }
 
-export interface MediaLibraryBlock {
-  type: "media_library";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface DocumentBlock extends BaseLearningContentBlock {
+  readonly type: "document";
 }
 
-export interface OnlineTrainingBlock {
-  type: "online_training";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface ExerciseBlock extends BaseLearningContentBlock {
+  readonly type: "exercise";
 }
 
-export interface ResourceBlock {
-  type: "resource";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface MediaLibraryBlock extends BaseLearningContentBlock {
+  readonly type: "media_library";
 }
 
-export interface TestBlock {
-  type: "test";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface OnlineTrainingBlock extends BaseLearningContentBlock {
+  readonly type: "online_training";
 }
 
-export interface VideoBlock {
-  type: "video";
-  value: {
-    description: string;
-    url: string;
-  };
-  id: string;
+export interface ResourceBlock extends BaseLearningContentBlock {
+  readonly type: "resource";
+}
+
+export interface TestBlock extends BaseLearningContentBlock {
+  readonly type: "test";
+}
+
+export interface VideoBlock extends BaseLearningContentBlock {
+  readonly type: "video";
+}
+
+export interface PlaceholderBlock extends BaseLearningContentBlock {
+  readonly type: "placeholder";
+}
+
+export type LearningContentBlock =
+  | AssignmentBlock
+  | BookBlock
+  | DocumentBlock
+  | ExerciseBlock
+  | MediaLibraryBlock
+  | OnlineTrainingBlock
+  | ResourceBlock
+  | TestBlock
+  | VideoBlock
+  | PlaceholderBlock;
+
+export type LearningContentType = LearningContentBlock["type"];
+
+export interface LearningContent extends BaseCourseWagtailPage {
+  readonly type: "learnpath.LearningContent";
+  minutes: number;
+  contents: LearningContentBlock[];
+  parentCircle: Circle;
+  parentLearningSequence?: LearningSequence;
+  parentLearningUnit?: LearningUnit;
+  nextLearningContent?: LearningContent;
+  previousLearningContent?: LearningContent;
+}
+
+export interface LearningUnitPerformanceCriteria extends BaseCourseWagtailPage {
+  readonly type: "competence.PerformanceCriteria";
+  readonly competence_id: string;
+  parentLearningSequence?: LearningSequence;
+  parentLearningUnit?: LearningUnit;
+}
+
+export interface LearningUnit extends BaseCourseWagtailPage {
+  readonly type: "learnpath.LearningUnit";
+  readonly evaluate_url: string;
+  readonly course_category: CourseCategory;
+  children: LearningUnitPerformanceCriteria[];
+
+  // additional frontend fields
+  learningContents: LearningContent[];
+  minutes: number;
+  parentLearningSequence?: LearningSequence;
+  parentCircle?: Circle;
+  last?: boolean;
+}
+
+export interface LearningSequence extends BaseCourseWagtailPage {
+  readonly type: "learnpath.LearningSequence";
+  icon: string;
+  learningUnits: LearningUnit[];
+  minutes: number;
+}
+
+export type CircleChild = LearningContent | LearningUnit | LearningSequence;
+
+export interface WagtailLearningPath extends BaseCourseWagtailPage {
+  readonly type: "learnpath.LearningPath";
+  course: Course;
+  children: LearningPathChild[];
 }
 
 export interface CircleGoal {
@@ -116,83 +144,19 @@ export interface CircleJobSituation {
   id: string;
 }
 
-export interface CourseWagtailPage {
-  readonly id: number;
-  readonly title: string;
-  readonly slug: string;
-  readonly translation_key: string;
-  readonly frontend_url: string;
-  completion_status: CourseCompletionStatus;
-  completion_status_updated_at?: string;
+export interface WagtailCircle extends BaseCourseWagtailPage {
+  readonly type: "learnpath.Circle";
+  readonly description: string;
+  readonly goal_description: string;
+  readonly goals: CircleGoal[];
+  readonly job_situation_description: string;
+  readonly job_situations: CircleJobSituation[];
+  readonly children: CircleChild[];
 }
 
-export interface CircleLight {
-  readonly id: number;
-  readonly title: string;
-  readonly slug: string;
-  readonly translation_key: string;
-}
-
-export interface LearningContent extends CourseWagtailPage {
-  type: "learnpath.LearningContent";
-  minutes: number;
-  contents: (
-    | AssignmentBlock
-    | BookBlock
-    | DocumentBlock
-    | ExerciseBlock
-    | MediaLibraryBlock
-    | OnlineTrainingBlock
-    | ResourceBlock
-    | TestBlock
-    | VideoBlock
-  )[];
-  parentCircle: Circle;
-  parentLearningSequence?: LearningSequence;
-  parentLearningUnit?: LearningUnit;
-  nextLearningContent?: LearningContent;
-  previousLearningContent?: LearningContent;
-}
-
-export interface LearningUnitPerformanceCriteria extends CourseWagtailPage {
-  type: "competence.PerformanceCriteria";
-  parentLearningSequence?: LearningSequence;
-  parentLearningUnit?: LearningUnit;
-}
-
-export interface LearningUnit extends CourseWagtailPage {
-  type: "learnpath.LearningUnit";
-  learningContents: LearningContent[];
-  evaluate_url: string;
-  minutes: number;
-  parentLearningSequence?: LearningSequence;
-  parentCircle?: Circle;
-  children: LearningUnitPerformanceCriteria[];
-  last?: boolean;
-}
-
-export interface LearningSequence extends CourseWagtailPage {
-  type: "learnpath.LearningSequence";
-  icon: string;
-  learningUnits: LearningUnit[];
-  minutes: number;
-}
-
-export type CircleChild =
-  | LearningContent
-  | LearningUnit
-  | LearningSequence
-  | LearningUnitPerformanceCriteria;
-
-export interface WagtailCircle extends CourseWagtailPage {
-  type: "learnpath.Circle";
-  children: CircleChild[];
-  description: string;
-}
-
-export interface Topic extends CourseWagtailPage {
-  type: "learnpath.Topic";
-  is_visible: boolean;
+export interface Topic extends BaseCourseWagtailPage {
+  readonly type: "learnpath.Topic";
+  readonly is_visible: boolean;
   circles: Circle[];
 }
 
@@ -208,7 +172,7 @@ export interface CourseCompletion {
   page_slug: string;
   course: number;
   completion_status: CourseCompletionStatus;
-  additional_json_data: any;
+  additional_json_data: unknown;
 }
 
 export interface CircleDiagramData {
@@ -224,7 +188,7 @@ export interface CircleDiagramData {
 
 export interface Course {
   id: number;
-  name: string;
+  title: string;
   category_name: string;
 }
 
@@ -280,7 +244,7 @@ export interface MediaContentCollection {
   };
 }
 
-export interface MediaCategoryPage extends CourseWagtailPage {
+export interface MediaCategoryPage extends BaseCourseWagtailPage {
   type: "media_library.MediaCategoryPage";
   overview_icon: string;
   introduction_text: string;
@@ -295,31 +259,31 @@ export interface MediaCategoryPage extends CourseWagtailPage {
   body: MediaContentCollection[];
 }
 
-export interface MediaLibraryPage extends CourseWagtailPage {
-  type: "media_library.MediaLibraryPage";
-  course: Course;
-  children: MediaCategoryPage[];
+export interface MediaLibraryPage extends BaseCourseWagtailPage {
+  readonly type: "media_library.MediaLibraryPage";
+  readonly course: Course;
+  readonly children: MediaCategoryPage[];
 }
 
-export interface PerformanceCriteria extends CourseWagtailPage {
-  type: "competence.PerformanceCriteria";
-  competence_id: string;
-  circle: CircleLight;
-  course_category: CourseCategory;
-  learning_unit: CourseWagtailPage;
+export interface PerformanceCriteria extends BaseCourseWagtailPage {
+  readonly type: "competence.PerformanceCriteria";
+  readonly competence_id: string;
+  readonly circle: CircleLight;
+  readonly course_category: CourseCategory;
+  readonly learning_unit: BaseCourseWagtailPage;
 }
 
-export interface CompetencePage extends CourseWagtailPage {
-  type: "competence.CompetencePage";
-  competence_id: string;
-  children: PerformanceCriteria[];
+export interface CompetencePage extends BaseCourseWagtailPage {
+  readonly type: "competence.CompetencePage";
+  readonly competence_id: string;
+  readonly children: PerformanceCriteria[];
 }
 
-export interface CompetenceProfilePage extends CourseWagtailPage {
-  type: "competence.CompetenceProfilePage";
-  course: Course;
-  circles: CircleLight[];
-  children: CompetencePage[];
+export interface CompetenceProfilePage extends BaseCourseWagtailPage {
+  readonly type: "competence.CompetenceProfilePage";
+  readonly course: Course;
+  readonly circles: CircleLight[];
+  readonly children: CompetencePage[];
 }
 
 // dropdown
diff --git a/client/src/utils/typeMaps.ts b/client/src/utils/typeMaps.ts
index 790c6a6a..1a796538 100644
--- a/client/src/utils/typeMaps.ts
+++ b/client/src/utils/typeMaps.ts
@@ -1,14 +1,32 @@
 import type { LearningContentType } from "@/types";
+import { assertUnreachable } from "@/utils/utils";
 
-export const learningContentTypesToName = new Map<LearningContentType, string>([
-  ["assignment", "Transferauftrag"],
-  ["book", "Buch"],
-  ["document", "Dokument"],
-  ["exercise", "Übung"],
-  ["media_library", "Mediathek"],
-  ["online_training", "Online-Training"],
-  ["video", "Video"],
-  ["test", "Test"],
-  ["resource", "Seite"],
-  ["placeholder", "In Umsetzung"],
-]);
+export function learningContentTypeData(t: LearningContentType): {
+  title: string;
+  icon: string;
+} {
+  switch (t) {
+    case "assignment":
+      return { title: "Transferauftrag", icon: "it-icon-lc-assignment" };
+    case "book":
+      return { title: "Buch", icon: "it-icon-lc-book" };
+    case "document":
+      return { title: "Dokument", icon: "it-icon-lc-document" };
+    case "exercise":
+      return { title: "Übung", icon: "it-icon-lc-exercise" };
+    case "media_library":
+      return { title: "Mediathek", icon: "it-icon-lc-media-library" };
+    case "online_training":
+      return { title: "Online-Training", icon: "it-icon-lc-online-training" };
+    case "video":
+      return { title: "Video", icon: "it-icon-lc-video" };
+    case "test":
+      return { title: "Test", icon: "it-icon-lc-test" };
+    case "resource":
+      return { title: "Ressource", icon: "it-icon-lc-resource" };
+    case "placeholder":
+      return { title: "In Umsetzung", icon: "it-icon-lc-document" };
+  }
+
+  return assertUnreachable(t);
+}
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
new file mode 100644
index 00000000..966499f3
--- /dev/null
+++ b/client/src/utils/utils.ts
@@ -0,0 +1,3 @@
+export function assertUnreachable(x: never): never {
+  throw new Error("Didn't expect to get here");
+}
diff --git a/server/vbv_lernwelt/learnpath/create_default_learning_path.py b/server/vbv_lernwelt/learnpath/create_default_learning_path.py
index 7aad5a2a..2f4648f3 100644
--- a/server/vbv_lernwelt/learnpath/create_default_learning_path.py
+++ b/server/vbv_lernwelt/learnpath/create_default_learning_path.py
@@ -273,7 +273,7 @@ wichtige Grundlage für eine erfolgreiche Beziehung.
                 VideoBlockFactory(
                     url="https://onedrive.live.com/embed?cid=26E4A934B79DCE5E&resid=26E4A934B79DCE5E%2153350&authkey=AId6i7z_X8l2fHw",
                     description="In dieser Circle zeigt dir ein Fachexperte anhand von Kundensituationen, wie du erfolgreich"
-                                "den Kundenbedarf ermitteln, analysieren, priorisieren und anschliessend zusammenfassen kannst.",
+                    "den Kundenbedarf ermitteln, analysieren, priorisieren und anschliessend zusammenfassen kannst.",
                 ),
             )
         ],
diff --git a/server/vbv_lernwelt/learnpath/models_learning_unit_content.py b/server/vbv_lernwelt/learnpath/models_learning_unit_content.py
index c1a0356f..5926a272 100644
--- a/server/vbv_lernwelt/learnpath/models_learning_unit_content.py
+++ b/server/vbv_lernwelt/learnpath/models_learning_unit_content.py
@@ -26,14 +26,6 @@ class DocumentBlock(blocks.StructBlock):
         icon = "media"
 
 
-class PlaceholderBlock(blocks.StructBlock):
-    description = blocks.TextBlock()
-    url = blocks.TextBlock()
-
-    class Meta:
-        icon = "media"
-
-
 class ExerciseBlock(blocks.StructBlock):
     description = blocks.TextBlock()
     url = blocks.TextBlock()
@@ -82,3 +74,11 @@ class VideoBlock(blocks.StructBlock):
 
     class Meta:
         icon = "media"
+
+
+class PlaceholderBlock(blocks.StructBlock):
+    description = blocks.TextBlock()
+    url = blocks.TextBlock()
+
+    class Meta:
+        icon = "media"

From 9e92a2a5212081b46696723bcb45a3d9888b5e86 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 14:32:33 +0200
Subject: [PATCH 2/8] Remove typecheck errors

---
 client/src/components/MainNavigationBar.vue   | 32 +++++++---------
 client/src/components/MobileMenu.vue          |  3 +-
 .../competences/PerformanceCriteriaRow.vue    |  1 -
 .../src/components/mediaLibrary/LinkCard.vue  |  4 +-
 .../src/components/mediaLibrary/MediaLink.vue | 16 ++++----
 client/src/components/ui/ItDropdown.vue       | 32 ++++++++--------
 client/src/i18n.ts                            |  2 +-
 client/src/pages/LoginPage.vue                |  6 ++-
 client/src/pages/StyleGuidePage.vue           | 38 +++++++++----------
 .../pages/competence/CompetenceListPage.vue   |  1 +
 .../SinglePerformanceCriteriaPage.vue         |  4 +-
 client/src/pages/learningPath/CirclePage.vue  |  8 ++--
 .../pages/mediaLibrary/MLMediaListPage.vue    |  3 +-
 client/src/stores/circle.ts                   | 17 ++++++---
 client/src/types.ts                           |  1 -
 15 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 508006a9..de065e86 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -55,7 +55,6 @@ function learninPathSlug(): string {
 }
 
 function handleDropdownSelect(data: DropdownData) {
-  log.debug("Selected action:", data.action);
   switch (data.action) {
     case "settings":
       router.push("/profile");
@@ -76,25 +75,21 @@ onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
 
-const profileDropdownData: DropdownListItem[][] = [
-  [
-    {
-      title: "Kontoeinstellungen",
-      icon: IconSettings as Component,
-      data: {
-        action: "settings",
-      },
+const profileDropdownData: DropdownListItem[] = [
+  {
+    title: "Kontoeinstellungen",
+    icon: IconSettings as Component,
+    data: {
+      action: "settings",
     },
-  ],
-  [
-    {
-      title: "Abmelden",
-      icon: IconLogout as Component,
-      data: {
-        action: "logout",
-      },
+  },
+  {
+    title: "Abmelden",
+    icon: IconLogout as Component,
+    data: {
+      action: "logout",
     },
-  ],
+  },
 ];
 </script>
 
@@ -102,7 +97,6 @@ const profileDropdownData: DropdownListItem[][] = [
   <div>
     <Teleport to="body">
       <MobileMenu
-        :user-store="userStore"
         :show="state.showMenu"
         :learning-path-slug="learninPathSlug()"
         :learning-path-name="learningPathName()"
diff --git a/client/src/components/MobileMenu.vue b/client/src/components/MobileMenu.vue
index 94d13a0f..9491ea93 100644
--- a/client/src/components/MobileMenu.vue
+++ b/client/src/components/MobileMenu.vue
@@ -2,13 +2,14 @@
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
+import { useUserStore } from "@/stores/user";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
+const userStore = useUserStore();
 
 const props = defineProps<{
   show: boolean;
-  userStore: object;
   learningPathName: string;
   learningPathSlug: string;
 }>();
diff --git a/client/src/components/competences/PerformanceCriteriaRow.vue b/client/src/components/competences/PerformanceCriteriaRow.vue
index 624177ab..41ff8093 100644
--- a/client/src/components/competences/PerformanceCriteriaRow.vue
+++ b/client/src/components/competences/PerformanceCriteriaRow.vue
@@ -8,7 +8,6 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  criteria: undefined,
   showState: false,
 });
 
diff --git a/client/src/components/mediaLibrary/LinkCard.vue b/client/src/components/mediaLibrary/LinkCard.vue
index c4ab5003..76502e1a 100644
--- a/client/src/components/mediaLibrary/LinkCard.vue
+++ b/client/src/components/mediaLibrary/LinkCard.vue
@@ -23,9 +23,9 @@ const props = withDefaults(defineProps<Props>(), {
     <div>
       <h4 class="mb-2 text-bold">{{ title }}</h4>
       <p class="mb-2">{{ description }}</p>
-      <media-link :to="url" :blank="openWindow" class="link">
+      <MediaLink :to="url" :blank="openWindow" class="link">
         <span class="inline">{{ linkText }}</span>
-      </media-link>
+      </MediaLink>
     </div>
   </div>
 </template>
diff --git a/client/src/components/mediaLibrary/MediaLink.vue b/client/src/components/mediaLibrary/MediaLink.vue
index 08047853..0a101871 100644
--- a/client/src/components/mediaLibrary/MediaLink.vue
+++ b/client/src/components/mediaLibrary/MediaLink.vue
@@ -3,14 +3,14 @@
 // https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/
 
 import { computed } from "vue";
-import { RouterLink } from "vue-router";
+import type { RouterLinkProps } from "vue-router";
 
-const props = defineProps({
-  ...RouterLink.props, // @ts-ignore
-  blank: {
-    type: Boolean,
-    default: false,
-  },
+export interface Props extends RouterLinkProps {
+  blank?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  blank: false,
 });
 
 const isExternalLink = computed(
@@ -24,7 +24,7 @@ const isExternalLink = computed(
       v-if="isExternalLink"
       :target="props.blank ? '_blank' : '_self'"
       rel="noopener"
-      :href="props.to"
+      :href="(props.to as string)"
     >
       <slot />
     </a>
diff --git a/client/src/components/ui/ItDropdown.vue b/client/src/components/ui/ItDropdown.vue
index faf6b6ad..74567875 100644
--- a/client/src/components/ui/ItDropdown.vue
+++ b/client/src/components/ui/ItDropdown.vue
@@ -3,13 +3,13 @@ import type { DropdownListItem } from "@/types";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 
 const props = defineProps<{
-  buttonClasses: [string];
-  listItems: [[DropdownListItem]];
+  buttonClasses: [string] | [];
+  listItems: DropdownListItem[];
   align: "left" | "right";
 }>();
 
 const emit = defineEmits<{
-  (e: "select", data: object): void;
+  (e: "select", data: any): void;
 }>();
 </script>
 
@@ -33,20 +33,18 @@ const emit = defineEmits<{
         class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="[align === 'left' ? 'left-0' : 'right-0']"
       >
-        <div v-for="section in listItems" :key="section" class="">
-          <div v-for="item in section" :key="item" class="px-1 py-1">
-            <MenuItem>
-              <button
-                class="text-black group flex w-full items-center px-0 py-2 text-sm"
-                @click="$emit('select', item.data)"
-              >
-                <span class="inline-block pr-2">
-                  <component :is="item.icon" v-if="item.icon"></component>
-                </span>
-                {{ item.title }}
-              </button>
-            </MenuItem>
-          </div>
+        <div v-for="item in listItems" :key="item.title" class="px-1 py-1">
+          <MenuItem>
+            <button
+              class="text-black group flex w-full items-center px-0 py-2 text-sm"
+              @click="$emit('select', item.data)"
+            >
+              <span class="inline-block pr-2">
+                <component :is="item.icon" v-if="item.icon"></component>
+              </span>
+              {{ item.title }}
+            </button>
+          </MenuItem>
         </div>
       </MenuItems>
     </transition>
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
index a162a525..235b991a 100644
--- a/client/src/i18n.ts
+++ b/client/src/i18n.ts
@@ -23,7 +23,7 @@ export function setI18nLanguage(i18n: any, locale: string) {
    *
    * axios.defaults.headers.common['Accept-Language'] = locale
    */
-  document.querySelector("html").setAttribute("lang", locale);
+  document.querySelector("html")?.setAttribute("lang", locale);
 }
 
 export async function loadLocaleMessages(i18n: any, locale: any) {
diff --git a/client/src/pages/LoginPage.vue b/client/src/pages/LoginPage.vue
index 5d0cd71e..96550c8b 100644
--- a/client/src/pages/LoginPage.vue
+++ b/client/src/pages/LoginPage.vue
@@ -25,7 +25,11 @@ const userStore = useUserStore();
       <form
         class="bg-white p-4 lg:p-8"
         @submit.prevent="
-          userStore.handleLogin(state.username, state.password, route.query.next)
+          userStore.handleLogin(
+            state.username,
+            state.password,
+            route.query.next as string
+          )
         "
       >
         <div class="mb-4">
diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index 24247a61..8e7c584e 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -27,29 +27,25 @@ const state = reactive({
 });
 
 const dropdownData = [
-  [
-    {
-      title: "Option 1",
-      icon: IconLogout,
-      data: {},
+  {
+    title: "Option 1",
+    icon: IconLogout,
+    data: {},
+  },
+  {
+    title: "Option 2",
+    icon: IconLogout,
+    data: {
+      test: 12,
     },
-    {
-      title: "Option 2",
-      icon: null,
-      data: {
-        test: 12,
-      },
+  },
+  {
+    title: "Option 3",
+    icon: IconSettings,
+    data: {
+      amount: 34,
     },
-  ],
-  [
-    {
-      title: "Option 3",
-      icon: IconSettings,
-      data: {
-        amount: 34,
-      },
-    },
-  ],
+  },
 ];
 
 // TODO: die CSS-Klasse für die Farben wird hier in der StyleGuideView.vue generiert.
diff --git a/client/src/pages/competence/CompetenceListPage.vue b/client/src/pages/competence/CompetenceListPage.vue
index 2a9f2630..a1d43fb7 100644
--- a/client/src/pages/competence/CompetenceListPage.vue
+++ b/client/src/pages/competence/CompetenceListPage.vue
@@ -14,6 +14,7 @@ const competenceStore = useCompetenceStore();
     <nav class="py-4 lg:pb-8">
       <router-link
         class="btn-text inline-flex items-center pl-0"
+        v-if="competenceStore.competenceProfilePage"
         :to="competenceStore.competenceProfilePage?.frontend_url"
       >
         <it-icon-arrow-left />
diff --git a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
index 3a751b10..0679e76f 100644
--- a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
@@ -21,7 +21,7 @@ let competencePage: CompetencePage | undefined;
 const findCriteria = () => {
   for (const page of competenceStore.competenceProfilePage
     ?.children as CompetencePage[]) {
-    for (let criteria of page.children) {
+    for (const criteria of page.children) {
       if (criteria.slug === route.params["criteriaSlug"]) {
         currentQuestion = criteria;
         competencePage = page;
@@ -63,7 +63,7 @@ findCriteria();
       @back="router.back()"
       @next="router.back()"
     >
-      <div class="container-medium">
+      <div class="container-medium" v-if="currentQuestion">
         <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
           <h2 class="heading-2">
             {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
diff --git a/client/src/pages/learningPath/CirclePage.vue b/client/src/pages/learningPath/CirclePage.vue
index a4c037b9..a8cf374a 100644
--- a/client/src/pages/learningPath/CirclePage.vue
+++ b/client/src/pages/learningPath/CirclePage.vue
@@ -52,9 +52,11 @@ onMounted(async () => {
         const learningUnits = circleStore.circle?.learningSequences.flatMap(
           (ls) => ls.learningUnits
         );
-        wagtailPage = learningUnits.find((lu) => {
-          return lu.slug.endsWith(slugEnd);
-        });
+        if (learningUnits) {
+          wagtailPage = learningUnits.find((lu) => {
+            return lu.slug.endsWith(slugEnd);
+          });
+        }
       }
       if (wagtailPage) {
         document
diff --git a/client/src/pages/mediaLibrary/MLMediaListPage.vue b/client/src/pages/mediaLibrary/MLMediaListPage.vue
index 7e2d1c48..f2e97c60 100644
--- a/client/src/pages/mediaLibrary/MLMediaListPage.vue
+++ b/client/src/pages/mediaLibrary/MLMediaListPage.vue
@@ -26,7 +26,6 @@ const mediaList = computed(() => {
         return contentCollection.value.contents[0].type === "learn_media";
       }
     });
-    console.log(learnMediaCollection);
     return learnMediaCollection?.value;
   }
   return undefined;
@@ -35,7 +34,7 @@ const mediaList = computed(() => {
 
 <template>
   <div
-    v-if="mediaCategory"
+    v-if="mediaCategory && mediaStore.mediaLibraryPage && mediaList"
     class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
   >
     <div class="bg-gray-200">
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 3a98342e..83e0d70b 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -8,6 +8,7 @@ import type {
   LearningContent,
   LearningUnit,
   LearningUnitPerformanceCriteria,
+  PerformanceCriteria,
 } from "@/types";
 import { defineStore } from "pinia";
 
@@ -85,16 +86,22 @@ export const useCircleStore = defineStore({
       return learningUnit;
     },
     async markCompletion(
-      page: LearningContent | LearningUnitPerformanceCriteria,
+      page:
+        | LearningContent
+        | LearningUnitPerformanceCriteria
+        | PerformanceCriteria
+        | undefined,
       completion_status: CourseCompletionStatus = "success"
     ) {
       const completionStore = useCompletionStore();
 
       try {
-        page.completion_status = completion_status;
-        const completionData = await completionStore.markPage(page);
-        if (this.circle) {
-          this.circle.parseCompletionData(completionData);
+        if (page) {
+          page.completion_status = completion_status;
+          const completionData = await completionStore.markPage(page);
+          if (this.circle) {
+            this.circle.parseCompletionData(completionData);
+          }
         }
       } catch (error) {
         log.error(error);
diff --git a/client/src/types.ts b/client/src/types.ts
index 6a5c1853..e4d207d9 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -3,7 +3,6 @@ import type { Component } from "vue";
 
 export type CourseCompletionStatus = "unknown" | "fail" | "success";
 
-
 export interface BaseCourseWagtailPage {
   readonly id: number;
   readonly title: string;

From bf70658710a8a661310a4bf35466e0db3f8303ba Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 15:05:54 +0200
Subject: [PATCH 3/8] Fix typecheck errors

---
 client/package.json                           |  1 -
 .../components/learningPath/CircleDiagram.vue | 11 +++----
 .../src/components/mediaLibrary/MediaLink.vue | 18 ++++++-----
 client/src/fetchHelpers.ts                    |  6 +---
 .../mediaLibrary/MLCategoryDetailPage.vue     | 30 +++++++++++--------
 client/src/types.ts                           | 18 ++++++-----
 6 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/client/package.json b/client/package.json
index a0fd247e..f5066491 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.7",
-    "axios": "^0.26.1",
     "d3": "^7.6.1",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.0",
diff --git a/client/src/components/learningPath/CircleDiagram.vue b/client/src/components/learningPath/CircleDiagram.vue
index 662b6a63..b827b201 100644
--- a/client/src/components/learningPath/CircleDiagram.vue
+++ b/client/src/components/learningPath/CircleDiagram.vue
@@ -6,10 +6,11 @@ import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 
 import colors from "@/colors.json";
+import type { LearningSequence } from "@/types";
 
 const circleStore = useCircleStore();
 
-function someFinished(learningSequence) {
+function someFinished(learningSequence: LearningSequence) {
   if (circleStore.circle) {
     return circleStore.circle.someFinishedInLearningSequence(
       learningSequence.translation_key
@@ -18,7 +19,7 @@ function someFinished(learningSequence) {
   return false;
 }
 
-function allFinished(learningSequence) {
+function allFinished(learningSequence: LearningSequence) {
   if (circleStore.circle) {
     return circleStore.circle.allFinishedInLearningSequence(
       learningSequence.translation_key
@@ -43,11 +44,11 @@ const pieData = computed(() => {
     const pieGenerator = d3.pie();
     let angles = pieGenerator(pieWeights);
     _.forEach(angles, (pie) => {
-      const thisLearningSequence = circle.learningSequences[parseInt(pie.index)];
-      pie.title = thisLearningSequence.title;
-      pie.icon = thisLearningSequence.icon;
       pie.startAngle = pie.startAngle + Math.PI;
       pie.endAngle = pie.endAngle + Math.PI;
+      const thisLearningSequence = circle.learningSequences[pie.index];
+      pie.title = thisLearningSequence.title;
+      pie.icon = thisLearningSequence.icon;
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2;
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2;
       pie.translation_key = thisLearningSequence.translation_key;
diff --git a/client/src/components/mediaLibrary/MediaLink.vue b/client/src/components/mediaLibrary/MediaLink.vue
index 0a101871..5e15b51f 100644
--- a/client/src/components/mediaLibrary/MediaLink.vue
+++ b/client/src/components/mediaLibrary/MediaLink.vue
@@ -3,14 +3,16 @@
 // https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/
 
 import { computed } from "vue";
-import type { RouterLinkProps } from "vue-router";
+import { RouterLink } from "vue-router";
 
-export interface Props extends RouterLinkProps {
-  blank?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  blank: false,
+const props = defineProps({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...RouterLink.props,
+  blank: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const isExternalLink = computed(
@@ -24,7 +26,7 @@ const isExternalLink = computed(
       v-if="isExternalLink"
       :target="props.blank ? '_blank' : '_self'"
       rel="noopener"
-      :href="(props.to as string)"
+      :href="props.to"
     >
       <slot />
     </a>
diff --git a/client/src/fetchHelpers.ts b/client/src/fetchHelpers.ts
index 4e8442ca..2cf5487b 100644
--- a/client/src/fetchHelpers.ts
+++ b/client/src/fetchHelpers.ts
@@ -28,11 +28,7 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
       "Content-Type": "application/json;charset=UTF-8",
     },
     options?.headers
-  );
-
-  if (options?.headers) {
-    delete options.headers;
-  }
+  ) as HeadersInit;
 
   options = Object.assign(
     {
diff --git a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
index 309fa6b7..689a0825 100644
--- a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
+++ b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
@@ -2,6 +2,7 @@
 import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
+import type { MediaBlockType } from "@/types";
 import * as log from "loglevel";
 import { computed } from "vue";
 import { useRoute } from "vue-router";
@@ -33,28 +34,28 @@ const backLink = computed(() => {
 const maxCardItems = 4;
 const maxListItems = 6;
 
-const displayAsCard = (itemType: string): boolean => {
+const displayAsCard = (itemType: MediaBlockType): boolean => {
   return itemType === "learn_media" || itemType === "relative_link";
 };
 
-const hasMoreItems = (items: object[], maxItems: number): boolean => {
+function hasMoreItems<T>(items: T[], maxItems: number): boolean {
   return items.length > maxItems;
-};
+}
 
-const getMaxDisplayItems = (items: object[], maxItems: number) => {
+function getMaxDisplayItems<T>(items: T[], maxItems: number) {
   return items.slice(0, maxItems);
-};
+}
 
-const getMaxDisplayItemsForType = (itemType: string, items: object[]) => {
+function getMaxDisplayItemsForType<T>(itemType: MediaBlockType, items: T[]) {
   return displayAsCard(itemType)
     ? getMaxDisplayItems(items, maxCardItems)
     : getMaxDisplayItems(items, maxListItems);
-};
+}
 
-const hasMoreItemsForType = (itemType: string, items: object[]) => {
+function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
   const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems;
   return hasMoreItems(items, maxItems);
-};
+}
 </script>
 
 <template>
@@ -65,7 +66,10 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
     <div class="bg-gray-200 pb-4 lg:pb-12">
       <div class="container-large">
         <nav class="py-4 lg:pb-8">
-          <router-link class="btn-text inline-flex items-center pl-0" :to="backLink">
+          <router-link
+            class="btn-text inline-flex items-center pl-0"
+            :to="(backLink as string)"
+          >
             <it-icon-arrow-left />
             <span>zurück</span>
           </router-link>
@@ -93,7 +97,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
         <ul>
           <li
             v-for="item in mediaCategory.items"
-            :key="item"
+            :key="item.id"
             class="mb-2 flex items-center"
           >
             <it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
@@ -141,13 +145,13 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
               />
               <div v-else class="flex items-center justify-between border-b py-4">
                 <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
-                <media-link
+                <MediaLink
                   :blank="mediaItem.value.open_window"
                   :to="mediaItem.value.url"
                   class="link"
                 >
                   {{ mediaItem.value.link_display_text }}
-                </media-link>
+                </MediaLink>
               </div>
             </li>
           </ul>
diff --git a/client/src/types.ts b/client/src/types.ts
index e4d207d9..f8d345be 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -230,16 +230,20 @@ export interface RelativeLinkBlock {
   value: MediaLibraryContentBlockValue;
 }
 
+export type MediaBlock =
+  | LearnMediaBlock
+  | ExternalLinkBlock
+  | InternalLinkBlock
+  | RelativeLinkBlock;
+
+export type MediaBlockType = MediaBlock["type"];
+
 export interface MediaContentCollection {
   type: "content_collection";
   value: {
     title: string;
-    contents: (
-      | LearnMediaBlock
-      | ExternalLinkBlock
-      | InternalLinkBlock
-      | RelativeLinkBlock
-    )[];
+    description: string;
+    contents: MediaBlock[];
   };
 }
 
@@ -253,7 +257,7 @@ export interface MediaCategoryPage extends BaseCourseWagtailPage {
     type: "item";
     value: string;
     id: string;
-  };
+  }[];
   course_category: CourseCategory;
   body: MediaContentCollection[];
 }

From 788f6cf663cb5e865b2992627561ebdae6640174 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 16:35:36 +0200
Subject: [PATCH 4/8] Fix typecheck errors on CircleDiagram

---
 .../components/learningPath/CircleDiagram.vue | 365 ++++++++++--------
 .../learningPath/LearningSequence.vue         |   2 +-
 client/src/components/ui/ItCheckbox.vue       |   2 +-
 client/src/fetchHelpers.ts                    |   1 -
 .../pages/competence/CompetenceListPage.vue   |   2 +-
 .../SinglePerformanceCriteriaPage.vue         |   2 +-
 6 files changed, 198 insertions(+), 176 deletions(-)

diff --git a/client/src/components/learningPath/CircleDiagram.vue b/client/src/components/learningPath/CircleDiagram.vue
index b827b201..aedb1812 100644
--- a/client/src/components/learningPath/CircleDiagram.vue
+++ b/client/src/components/learningPath/CircleDiagram.vue
@@ -5,8 +5,10 @@ import * as _ from "lodash";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 
+// @ts-ignore
 import colors from "@/colors.json";
 import type { LearningSequence } from "@/types";
+import type { DefaultArcObject } from "d3";
 
 const circleStore = useCircleStore();
 
@@ -33,6 +35,17 @@ onMounted(async () => {
   render();
 });
 
+interface CirclePie extends d3.PieArcDatum<number> {
+  title: string;
+  icon: string;
+  slug: string;
+  translation_key: string;
+  arrowStartAngle: number;
+  arrowEndAngle: number;
+  someFinished: boolean;
+  allFinished: boolean;
+}
+
 const pieData = computed(() => {
   const circle = circleStore.circle;
   console.log("initial of compute pie data ", circle);
@@ -42,193 +55,203 @@ const pieData = computed(() => {
 
     const pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1);
     const pieGenerator = d3.pie();
-    let angles = pieGenerator(pieWeights);
-    _.forEach(angles, (pie) => {
-      pie.startAngle = pie.startAngle + Math.PI;
-      pie.endAngle = pie.endAngle + Math.PI;
-      const thisLearningSequence = circle.learningSequences[pie.index];
-      pie.title = thisLearningSequence.title;
-      pie.icon = thisLearningSequence.icon;
-      pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2;
-      pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2;
-      pie.translation_key = thisLearningSequence.translation_key;
-      pie.slug = thisLearningSequence.slug;
-      pie.someFinished = someFinished(thisLearningSequence);
-      pie.allFinished = allFinished(thisLearningSequence);
+    const angles = pieGenerator(pieWeights);
+    let result = angles.map((angle) => {
+      const thisLearningSequence = circle.learningSequences[angle.index];
+
+      return Object.assign(
+        {
+          startAngle: angle.startAngle + Math.PI,
+          endAngle: angle.endAngle + Math.PI,
+          ..._.pick(thisLearningSequence, ["title", "icon", "translation_key", "slug"]),
+          arrowStartAngle: angle.endAngle + (angle.startAngle - angle.endAngle) / 2,
+          arrowEndAngle: angle.startAngle + (angle.startAngle - angle.endAngle) / 2,
+          someFinished: someFinished(thisLearningSequence),
+          allFinished: allFinished(thisLearningSequence),
+        },
+        angle
+      );
     });
-    angles = angles.reverse();
-    return angles;
+    result = result.reverse();
+    return result as CirclePie[];
   }
-  return {};
+
+  return undefined;
 });
 
 const width = 450;
 const height = 450;
 const radius = Math.min(width, height) / 2.4;
 
-function render() {
-  const arrowStrokeWidth = 2;
+function getColor(d: CirclePie) {
+  let color = colors.gray[300];
+  if (d.someFinished) {
+    color = colors.sky[500];
+  }
+  if (d.allFinished) {
+    color = colors.green[500];
+  }
+  return color;
+}
 
+function getHoverColor(d: CirclePie) {
+  let color = colors.gray[200];
+  if (d.someFinished) {
+    color = colors.sky[400];
+  }
+  if (d.allFinished) {
+    color = colors.green[400];
+  }
+  return color;
+}
+
+function render() {
   const svg = d3.select(".circle-visualization");
   // Clean svg before adding new stuff.
   svg.selectAll("*").remove();
 
-  // Append marker as definition to the svg
-  svg
-    .attr("viewBox", `0 0 ${width} ${height}`)
-    .append("svg:defs")
-    .append("svg:marker")
-    .attr("id", "triangle")
-    .attr("refX", 11)
-    .attr("refY", 11)
-    .attr("markerWidth", 20)
-    .attr("markerHeight", 20)
-    .attr("markerUnits", "userSpaceOnUse")
-    .attr("orient", "auto")
-    .append("path")
-    .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
-    .attr("transform", "rotate(-90, 10, 0)")
-    .attr("stroke-width", arrowStrokeWidth)
-    .attr("stroke", colors.gray[500]);
+  if (pieData.value) {
+    const arrowStrokeWidth = 2;
+    // Append marker as definition to the svg
+    svg
+      .attr("viewBox", `0 0 ${width} ${height}`)
+      .append("svg:defs")
+      .append("svg:marker")
+      .attr("id", "triangle")
+      .attr("refX", 11)
+      .attr("refY", 11)
+      .attr("markerWidth", 20)
+      .attr("markerHeight", 20)
+      .attr("markerUnits", "userSpaceOnUse")
+      .attr("orient", "auto")
+      .append("path")
+      .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
+      .attr("transform", "rotate(-90, 10, 0)")
+      .attr("stroke-width", arrowStrokeWidth)
+      .attr("stroke", colors.gray[500]);
 
-  const g = svg
-    .append("g")
-    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+    const g = svg
+      .append("g")
+      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
-  function getColor(d) {
-    let color = colors.gray[300];
-    if (d.someFinished) {
-      color = colors.sky[500];
-    }
-    if (d.allFinished) {
-      color = colors.green[500];
-    }
-    return color;
+    // Generate the pie diagram wede
+    const wedgeGenerator = d3
+      .arc()
+      .innerRadius(radius / 2.5)
+      .padAngle(12 / 360)
+      .outerRadius(radius);
+
+    // Generate the arrows
+    const arrowRadius = radius * 1.1;
+
+    const learningSequences = g
+      .selectAll(".learningSegmentArc")
+      .data(pieData.value)
+      .enter()
+      .append("g")
+      .attr("class", "learningSegmentArc")
+      .attr("role", "button")
+      .attr("fill", colors.gray[300]);
+
+    learningSequences
+      .on("mouseover", function (d, i) {
+        d3.select(this)
+          .transition()
+          .duration(200)
+          .attr("fill", (d) => {
+            // @ts-ignore
+            return getHoverColor(d);
+          });
+      })
+      .on("mouseout", function (d, i) {
+        d3.select(this)
+          .transition()
+          .duration(200)
+          .attr("fill", (d) => {
+            // @ts-ignore
+            return getColor(d);
+          });
+      })
+      .on("click", function (d, elm) {
+        console.log("clicked on ", d, elm);
+        document.getElementById(elm.slug)?.scrollIntoView({ behavior: "smooth" });
+      });
+
+    learningSequences
+      .transition()
+      .duration(1)
+      .attr("fill", (d) => {
+        return getColor(d);
+      });
+
+    // @ts-ignore
+    learningSequences.append("path").attr("d", wedgeGenerator);
+
+    const learningSequenceText = learningSequences
+      .append("text")
+      .attr("fill", colors.blue[900])
+      .style("font-size", "15px")
+      .text((d) => {
+        return d.title;
+      })
+      .attr("transform", function (d) {
+        let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
+        translate = [translate[0], translate[1] + 20];
+        return "translate(" + translate + ")";
+      })
+      .attr("class", "circlesText text-large font-bold")
+      .style("text-anchor", "middle");
+
+    const iconWidth = 25;
+
+    const learningSequenceIcon = learningSequences
+      .append("svg:image")
+      .attr("xlink:href", (d) => {
+        return "/static/icons/" + d.icon.replace("it-", "") + ".svg";
+      })
+      .attr("width", iconWidth)
+      .attr("height", iconWidth)
+      .attr("transform", function (d) {
+        let translate = wedgeGenerator.centroid(d as unknown as DefaultArcObject);
+        translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
+        return "translate(" + translate + ")";
+      })
+      .attr("class", "filter-blue-900");
+
+    // Create Arrows
+    const arrow = d3
+      .arc()
+      .innerRadius(arrowRadius)
+      .outerRadius(arrowRadius + arrowStrokeWidth)
+      .padAngle(20 / 360)
+      .startAngle((d) => {
+        return (d as unknown as CirclePie).arrowStartAngle;
+      })
+      .endAngle((d) => {
+        return (d as unknown as CirclePie).arrowEndAngle;
+      });
+
+    const arrows = g
+      .selectAll(".arrow")
+      .data(pieData.value)
+      .join("g")
+      .attr("class", "arrow")
+      .attr("marker-end", "url(#triangle)");
+
+    // remove last arrow
+    d3.selection.prototype.last = function () {
+      const last = this.size() - 1;
+      return d3.select(this.nodes()[last]);
+    };
+
+    const all_arows = g.selectAll(".arrow");
+    // @ts-ignore
+    all_arows.last().remove();
+
+    //Draw arrow paths
+    // @ts-ignore
+    arrows.append("path").attr("fill", colors.gray[500]).attr("d", arrow);
   }
-
-  function getHoverColor(d) {
-    let color = colors.gray[200];
-    if (d.someFinished) {
-      color = colors.sky[400];
-    }
-    if (d.allFinished) {
-      color = colors.green[400];
-    }
-    return color;
-  }
-
-  // Generate the pie diagram wede
-  const wedgeGenerator = d3
-    .arc()
-    .innerRadius(radius / 2.5)
-    .padAngle(12 / 360)
-    .outerRadius(radius);
-
-  // Generate the arrows
-  const arrowRadius = radius * 1.1;
-
-  const learningSequences = g
-    .selectAll(".learningSegmentArc")
-    .data(pieData.value)
-    .enter()
-    .append("g")
-    .attr("class", "learningSegmentArc")
-    .attr("role", "button")
-    .attr("fill", colors.gray[300]);
-
-  learningSequences
-    .on("mouseover", function (d, i) {
-      d3.select(this)
-        .transition()
-        .duration(200)
-        .attr("fill", (d) => {
-          return getHoverColor(d);
-        });
-    })
-    .on("mouseout", function (d, i) {
-      d3.select(this)
-        .transition()
-        .duration(200)
-        .attr("fill", (d) => {
-          return getColor(d);
-        });
-    })
-    .on("click", function (d, elm) {
-      console.log("clicked on ", d, elm);
-      document.getElementById(elm.slug)?.scrollIntoView({ behavior: "smooth" });
-    });
-
-  learningSequences
-    .transition()
-    .duration(1)
-    .attr("fill", (d) => {
-      return getColor(d);
-    });
-
-  learningSequences.append("path").attr("d", wedgeGenerator);
-
-  const learningSequenceText = learningSequences
-    .append("text")
-    .attr("fill", colors.blue[900])
-    .style("font-size", "15px")
-    .text((d) => {
-      return d.title;
-    })
-    .attr("transform", function (d) {
-      let translate = wedgeGenerator.centroid(d);
-      translate = [translate[0], translate[1] + 20];
-      return "translate(" + translate + ")";
-    })
-    .attr("class", "circlesText text-large font-bold")
-    .style("text-anchor", "middle");
-
-  const iconWidth = 25;
-
-  const learningSequenceIcon = learningSequences
-    .append("svg:image")
-    .attr("xlink:href", (d) => {
-      return "/static/icons/" + d.icon.replace("it-", "") + ".svg";
-    })
-    .attr("width", iconWidth)
-    .attr("height", iconWidth)
-    .attr("transform", function (d) {
-      let translate = wedgeGenerator.centroid(d);
-      translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth];
-      return "translate(" + translate + ")";
-    })
-    .attr("class", "filter-blue-900");
-
-  // Create Arrows
-  const arrow = d3
-    .arc()
-    .innerRadius(arrowRadius)
-    .outerRadius(arrowRadius + arrowStrokeWidth)
-    .padAngle(20 / 360)
-    .startAngle((d) => {
-      return d.arrowStartAngle;
-    })
-    .endAngle((d) => {
-      return d.arrowEndAngle;
-    });
-
-  const arrows = g
-    .selectAll(".arrow")
-    .data(pieData.value)
-    .join("g")
-    .attr("class", "arrow")
-    .attr("marker-end", "url(#triangle)");
-
-  // remove last arrow
-  d3.selection.prototype.last = function () {
-    const last = this.size() - 1;
-    return d3.select(this.nodes()[last]);
-  };
-
-  const all_arows = g.selectAll(".arrow");
-  all_arows.last().remove();
-
-  //Draw arrow paths
-  arrows.append("path").attr("fill", colors.gray[500]).attr("d", arrow);
   return svg;
 }
 </script>
diff --git a/client/src/components/learningPath/LearningSequence.vue b/client/src/components/learningPath/LearningSequence.vue
index 68287200..0cee6e08 100644
--- a/client/src/components/learningPath/LearningSequence.vue
+++ b/client/src/components/learningPath/LearningSequence.vue
@@ -121,8 +121,8 @@ const learningSequenceBorderClass = computed(() => {
               <span class="flex gap-4 items-center xl:h-10">
                 <button
                   class="cursor-pointer w-full sm:w-auto text-left"
-                  @click.stop="circleStore.openLearningContent(learningContent)"
                   :data-cy="`${learningContent.slug}`"
+                  @click.stop="circleStore.openLearningContent(learningContent)"
                 >
                   {{ learningContent.title }}
                 </button>
diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue
index ae91a0b4..cf054103 100644
--- a/client/src/components/ui/ItCheckbox.vue
+++ b/client/src/components/ui/ItCheckbox.vue
@@ -22,8 +22,8 @@ defineEmits(["update:modelValue"]);
       'opacity-50': disabled,
       'cursor-not-allowed': disabled,
     }"
-    @click="$emit('update:modelValue', !modelValue)"
     class="w-8 h-8 cursor-pointer"
+    @click="$emit('update:modelValue', !modelValue)"
   >
     <button
       v-if="modelValue"
diff --git a/client/src/fetchHelpers.ts b/client/src/fetchHelpers.ts
index 2cf5487b..e57a75c8 100644
--- a/client/src/fetchHelpers.ts
+++ b/client/src/fetchHelpers.ts
@@ -39,7 +39,6 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
     options
   );
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   options.headers["X-CSRFToken"] = getCookieValue("csrftoken");
 
diff --git a/client/src/pages/competence/CompetenceListPage.vue b/client/src/pages/competence/CompetenceListPage.vue
index a1d43fb7..1350a2f6 100644
--- a/client/src/pages/competence/CompetenceListPage.vue
+++ b/client/src/pages/competence/CompetenceListPage.vue
@@ -13,8 +13,8 @@ const competenceStore = useCompetenceStore();
   <div class="container-large">
     <nav class="py-4 lg:pb-8">
       <router-link
-        class="btn-text inline-flex items-center pl-0"
         v-if="competenceStore.competenceProfilePage"
+        class="btn-text inline-flex items-center pl-0"
         :to="competenceStore.competenceProfilePage?.frontend_url"
       >
         <it-icon-arrow-left />
diff --git a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
index 0679e76f..83af8dd6 100644
--- a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
@@ -63,7 +63,7 @@ findCriteria();
       @back="router.back()"
       @next="router.back()"
     >
-      <div class="container-medium" v-if="currentQuestion">
+      <div v-if="currentQuestion" class="container-medium">
         <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
           <h2 class="heading-2">
             {{ currentQuestion.competence_id }} {{ currentQuestion.title }}

From a71e7704969d2eb6d1748d6c87975498c4fb8a0a Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 16:58:25 +0200
Subject: [PATCH 5/8] Add typecheck to pipelines

---
 bitbucket-pipelines.yml | 1 +
 git-pre-push.sh         | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/bitbucket-pipelines.yml b/bitbucket-pipelines.yml
index ada2ec88..c24b586f 100644
--- a/bitbucket-pipelines.yml
+++ b/bitbucket-pipelines.yml
@@ -54,6 +54,7 @@ pipelines:
               - npm install
               - npm run prettier:check
               - npm run lint
+              - npm run typecheck
         - step:
             name: cypress tests
             max-time: 45
diff --git a/git-pre-push.sh b/git-pre-push.sh
index d7f93556..8cb53b69 100755
--- a/git-pre-push.sh
+++ b/git-pre-push.sh
@@ -6,8 +6,8 @@ set -e
 echo 'prettier:check'
 (cd client && npm run prettier:check)
 
-echo 'lint'
-(cd client && npm run lint)
+echo 'lint and typecheck'
+(cd client && npm run lint && npm run typecheck)
 
 echo 'python ufmt check'
 ufmt check server

From e8386a71a860e95624a0121620fcba3a9aec164d Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 17:16:00 +0200
Subject: [PATCH 6/8] Remove hiredis dependency

---
 server/requirements/requirements-dev.txt | 2 --
 server/requirements/requirements.in      | 1 -
 server/requirements/requirements.txt     | 2 --
 3 files changed, 5 deletions(-)

diff --git a/server/requirements/requirements-dev.txt b/server/requirements/requirements-dev.txt
index 7874c512..a57f227e 100644
--- a/server/requirements/requirements-dev.txt
+++ b/server/requirements/requirements-dev.txt
@@ -185,8 +185,6 @@ gunicorn==20.1.0
     # via -r requirements.in
 h11==0.13.0
     # via uvicorn
-hiredis==2.0.0
-    # via -r requirements.in
 html5lib==1.1
     # via wagtail
 httptools==0.4.0
diff --git a/server/requirements/requirements.in b/server/requirements/requirements.in
index 186896df..5219cd0c 100644
--- a/server/requirements/requirements.in
+++ b/server/requirements/requirements.in
@@ -5,7 +5,6 @@ Pillow  # https://github.com/python-pillow/Pillow
 argon2-cffi  # https://github.com/hynek/argon2_cffi
 whitenoise  # https://github.com/evansd/whitenoise
 redis  # https://github.com/redis/redis-py
-hiredis  # https://github.com/redis/hiredis-py
 uvicorn[standard]  # https://github.com/encode/uvicorn
 environs
 
diff --git a/server/requirements/requirements.txt b/server/requirements/requirements.txt
index 1ba89718..1ff66b8a 100644
--- a/server/requirements/requirements.txt
+++ b/server/requirements/requirements.txt
@@ -106,8 +106,6 @@ gunicorn==20.1.0
     # via -r requirements.in
 h11==0.13.0
     # via uvicorn
-hiredis==2.0.0
-    # via -r requirements.in
 html5lib==1.1
     # via wagtail
 httptools==0.4.0

From 924bf6f140cc8d751c8170d358b05cc8413dbc19 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 17:31:17 +0200
Subject: [PATCH 7/8] Fix `npm run test`

---
 .../learningPath/LearningContentContainer.vue |   1 +
 client/src/services/__tests__/circle.spec.ts  |   3 +-
 .../__tests__/learning_path_json.json         | 308 +++++++++++++-----
 .../__tests__/request_learning_path_json.py   |  16 +-
 client/src/services/circle.ts                 |  15 +-
 .../course/creators/test_course.py            |   4 +
 6 files changed, 250 insertions(+), 97 deletions(-)

diff --git a/client/src/components/learningPath/LearningContentContainer.vue b/client/src/components/learningPath/LearningContentContainer.vue
index af1fa802..4960c91c 100644
--- a/client/src/components/learningPath/LearningContentContainer.vue
+++ b/client/src/components/learningPath/LearningContentContainer.vue
@@ -18,6 +18,7 @@ const emit = defineEmits(["back", "next"]);
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2"
+        data-cy="close-learning-content"
         @click="$emit('back')"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
diff --git a/client/src/services/__tests__/circle.spec.ts b/client/src/services/__tests__/circle.spec.ts
index 0efdaa7f..b7719f1e 100644
--- a/client/src/services/__tests__/circle.spec.ts
+++ b/client/src/services/__tests__/circle.spec.ts
@@ -1,3 +1,4 @@
+import type { WagtailCircle } from "@/types";
 import { describe, it } from "vitest";
 import { Circle } from "../circle";
 import data from "./learning_path_json.json";
@@ -6,7 +7,7 @@ describe("Circle.parseJson", () => {
   it("can parse circle from api response", () => {
     const cirleData = data.children.find(
       (c) => c.slug === "test-lehrgang-lp-circle-analyse"
-    );
+    ) as unknown as WagtailCircle;
     const circle = Circle.fromJson(cirleData, undefined);
     expect(circle.learningSequences.length).toBe(3);
     expect(circle.flatLearningContents.length).toBe(7);
diff --git a/client/src/services/__tests__/learning_path_json.json b/client/src/services/__tests__/learning_path_json.json
index baa5ac1d..76113f79 100644
--- a/client/src/services/__tests__/learning_path_json.json
+++ b/client/src/services/__tests__/learning_path_json.json
@@ -1,39 +1,59 @@
 {
-  "id": 372,
+  "id": 362,
   "title": "Test Lernpfad",
   "slug": "test-lehrgang-lp",
   "type": "learnpath.LearningPath",
-  "translation_key": "42e559ca-970f-4a08-9e5e-63860585ee1e",
+  "translation_key": "8a230aa1-075e-4ac1-a8d6-87642c4f33ba",
+  "frontend_url": "/learn/test-lehrgang-lp",
   "children": [
     {
-      "id": 373,
+      "id": 363,
       "title": "Basis",
       "slug": "test-lehrgang-lp-topic-basis",
       "type": "learnpath.Topic",
-      "translation_key": "d68c1544-cf22-4a59-a81c-8cb977440cd0",
+      "translation_key": "d6e14156-2fb9-4f1b-83ce-6879e364f9a2",
+      "frontend_url": "",
       "is_visible": false
     },
     {
-      "id": 374,
+      "id": 364,
       "title": "Basis",
       "slug": "test-lehrgang-lp-circle-basis",
       "type": "learnpath.Circle",
-      "translation_key": "ec62a2af-6f74-4031-b971-c3287bbbc573",
+      "translation_key": "8034e867-4b05-4509-a9bc-99f9f3619e88",
+      "frontend_url": "/learn/test-lehrgang-lp/basis",
       "children": [
         {
-          "id": 375,
+          "id": 365,
           "title": "Starten",
           "slug": "test-lehrgang-lp-circle-basis-ls-starten",
           "type": "learnpath.LearningSequence",
-          "translation_key": "c5fdada9-036d-4516-a50f-6656a1c6b009",
+          "translation_key": "868bc4cb-c5b5-423e-a890-433184cd06e0",
+          "frontend_url": "/learn/test-lehrgang-lp/basis#ls-starten",
           "icon": "it-icon-ls-start"
         },
         {
-          "id": 376,
+          "id": 366,
+          "title": "Einf\u00fchrung",
+          "slug": "test-lehrgang-lp-circle-basis-lu-einf\u00fchrung",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "6b0a4794-9861-4ea4-b422-99261a4347a6",
+          "frontend_url": "/learn/test-lehrgang-lp/basis#lu-einf\u00fchrung",
+          "evaluate_url": "/learn/test-lehrgang-lp/basis/evaluate/einf\u00fchrung",
+          "course_category": {
+            "id": 14,
+            "title": "Allgemein",
+            "general": true
+          },
+          "children": []
+        },
+        {
+          "id": 367,
           "title": "Einf\u00fchrung",
           "slug": "test-lehrgang-lp-circle-basis-lc-einf\u00fchrung",
           "type": "learnpath.LearningContent",
-          "translation_key": "01de5131-28ce-4b1f-805f-8643384bfd6b",
+          "translation_key": "d1d1b923-f597-4de7-ac44-d02c2f0a1a59",
+          "frontend_url": "/learn/test-lehrgang-lp/basis/einf\u00fchrung",
           "minutes": 15,
           "contents": [
             {
@@ -42,24 +62,41 @@
                 "description": "Beispiel Dokument",
                 "url": null
               },
-              "id": "bd05f721-3e9d-4a11-8fe2-7c04e2365f52"
+              "id": "9f22d0b7-643a-4e97-816a-a41141befc95"
             }
           ]
         },
         {
-          "id": 377,
+          "id": 368,
           "title": "Beenden",
           "slug": "test-lehrgang-lp-circle-basis-ls-beenden",
           "type": "learnpath.LearningSequence",
-          "translation_key": "128c0162-025f-41be-9842-60016a77cdbc",
+          "translation_key": "338208db-7c85-470e-872f-850e34747873",
+          "frontend_url": "/learn/test-lehrgang-lp/basis#ls-beenden",
           "icon": "it-icon-ls-end"
         },
         {
-          "id": 378,
+          "id": 369,
+          "title": "Beenden",
+          "slug": "test-lehrgang-lp-circle-basis-lu-beenden",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "c14b63d6-3144-41fa-8a3c-2eada6ddd5ea",
+          "frontend_url": "/learn/test-lehrgang-lp/basis#lu-beenden",
+          "evaluate_url": "/learn/test-lehrgang-lp/basis/evaluate/beenden",
+          "course_category": {
+            "id": 14,
+            "title": "Allgemein",
+            "general": true
+          },
+          "children": []
+        },
+        {
+          "id": 370,
           "title": "Jetzt kann es losgehen!",
           "slug": "test-lehrgang-lp-circle-basis-lc-jetzt-kann-es-losgehen",
           "type": "learnpath.LearningContent",
-          "translation_key": "271896b9-6082-4fd4-9d70-6093ec9cc6ea",
+          "translation_key": "6920bcac-597b-462a-9458-32aa5dc8d3f7",
+          "frontend_url": "/learn/test-lehrgang-lp/basis/jetzt-kann-es-losgehen",
           "minutes": 30,
           "contents": [
             {
@@ -68,45 +105,130 @@
                 "description": "Beispiel Dokument",
                 "url": null
               },
-              "id": "204fc13b-a9ae-40de-8e09-f1e922c4fdd9"
+              "id": "1422a7c3-0a9a-4321-88a0-d82d0ed26ba2"
             }
           ]
         }
       ],
       "description": "Basis",
-      "job_situations": [],
-      "goals": [],
-      "experts": []
+      "goal_description": "('In diesem Circle baust du deine Handlungskompetenzen f\u00fcr diese Themen aus:',)",
+      "goals": [
+        {
+          "type": "goal",
+          "value": "... hier ein Beispieltext f\u00fcr ein Ziel 1",
+          "id": "38afbda4-7b7e-4f5c-88e8-c595c43e1659"
+        },
+        {
+          "type": "goal",
+          "value": "... hier ein Beispieltext f\u00fcr ein Ziel 2",
+          "id": "4d00ac58-0499-4316-9af2-356c37dedc35"
+        },
+        {
+          "type": "goal",
+          "value": "... hier ein Beispieltext f\u00fcr ein Ziel 3",
+          "id": "945eb104-8cc1-45cd-a07a-a4d3ec4f39a3"
+        }
+      ],
+      "job_situation_description": "Du triffst in diesem Circle auf die folgenden berufstypischen Handlungsfelder:",
+      "job_situations": [
+        {
+          "type": "job_situation",
+          "value": "Job Situation 1",
+          "id": "02fb807a-0d07-4353-81ec-8b8b383954d7"
+        },
+        {
+          "type": "job_situation",
+          "value": "Job Situation 2",
+          "id": "371952f6-5871-4bf1-b423-d3dab7371001"
+        },
+        {
+          "type": "job_situation",
+          "value": "Job Situation 3",
+          "id": "116bfa7b-65e8-44a1-8c82-e8b05fd86a01"
+        },
+        {
+          "type": "job_situation",
+          "value": "Job Situation 4",
+          "id": "08baf7dd-8801-4af9-8af8-714989775ddb"
+        },
+        {
+          "type": "job_situation",
+          "value": "Job Situation 5",
+          "id": "93ade4b8-c4fb-4941-98c5-e58336fca4bb"
+        },
+        {
+          "type": "job_situation",
+          "value": "Job Situation 6",
+          "id": "1fac4ee4-6d86-4e9e-9fa4-a99c6659bc8b"
+        },
+        {
+          "type": "job_situation",
+          "value": "Job Situation 7",
+          "id": "06d1e273-dec8-4a0b-ae2c-2baeb7a19ec7"
+        }
+      ],
+      "experts": [
+        {
+          "type": "person",
+          "value": {
+            "first_name": "Patrizia",
+            "last_name": "Mustermann",
+            "email": "patrizia.mustermann@example.com",
+            "photo": null,
+            "biography": ""
+          },
+          "id": "83490f33-da54-4548-baac-af75ea36651e"
+        }
+      ]
     },
     {
-      "id": 379,
+      "id": 371,
       "title": "Beraten der Kunden",
       "slug": "test-lehrgang-lp-topic-beraten-der-kunden",
       "type": "learnpath.Topic",
-      "translation_key": "91918780-75f8-4db3-8fb8-91b63f08b9b9",
+      "translation_key": "728a2578-a22c-41df-9079-43a5318c5030",
+      "frontend_url": "",
       "is_visible": true
     },
     {
-      "id": 380,
+      "id": 372,
       "title": "Analyse",
       "slug": "test-lehrgang-lp-circle-analyse",
       "type": "learnpath.Circle",
-      "translation_key": "50f11be3-a56d-412d-be25-3d272fb5df40",
+      "translation_key": "e429adf5-dd5d-4699-b471-40c782fb507e",
+      "frontend_url": "/learn/test-lehrgang-lp/analyse",
       "children": [
         {
-          "id": 381,
+          "id": 373,
           "title": "Starten",
           "slug": "test-lehrgang-lp-circle-analyse-ls-starten",
           "type": "learnpath.LearningSequence",
-          "translation_key": "07ac0eb9-3671-4b62-8053-1d0c43a1f0fb",
+          "translation_key": "40e977e0-3668-418d-b838-d3774a5cbe7d",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#ls-starten",
           "icon": "it-icon-ls-start"
         },
         {
-          "id": 382,
+          "id": 374,
+          "title": "Einf\u00fchrung",
+          "slug": "test-lehrgang-lp-circle-analyse-lu-einf\u00fchrung",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "badfd186-26c1-433e-90ad-8cac52eb599f",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#lu-einf\u00fchrung",
+          "evaluate_url": "/learn/test-lehrgang-lp/analyse/evaluate/einf\u00fchrung",
+          "course_category": {
+            "id": 14,
+            "title": "Allgemein",
+            "general": true
+          },
+          "children": []
+        },
+        {
+          "id": 375,
           "title": "Einleitung Circle \"Analyse\"",
           "slug": "test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse",
           "type": "learnpath.LearningContent",
-          "translation_key": "00ed0ab2-fdb0-4ee6-a7d2-42a219b849a8",
+          "translation_key": "5e8d6478-6287-4658-94c5-ecbd5d624962",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/einleitung-circle-analyse",
           "minutes": 15,
           "contents": [
             {
@@ -115,24 +237,27 @@
                 "description": "Beispiel Dokument",
                 "url": null
               },
-              "id": "892a9a4a-8e1e-4f7e-8c35-9bf3bbe5371b"
+              "id": "8b7f183e-1879-4391-953f-52d9a621f435"
             }
           ]
         },
         {
-          "id": 383,
+          "id": 376,
           "title": "Beobachten",
           "slug": "test-lehrgang-lp-circle-analyse-ls-beobachten",
           "type": "learnpath.LearningSequence",
-          "translation_key": "4cb08bc2-d101-43cc-b006-8f2bbb1a0579",
+          "translation_key": "35df96df-2e8d-4f16-aee1-8d72990f63a0",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#ls-beobachten",
           "icon": "it-icon-ls-watch"
         },
         {
-          "id": 384,
+          "id": 377,
           "title": "Fahrzeug",
           "slug": "test-lehrgang-lp-circle-analyse-lu-fahrzeug",
           "type": "learnpath.LearningUnit",
-          "translation_key": "8f4afa40-c27e-48f7-a2d7-0e713479a55e",
+          "translation_key": "405d42e4-ee10-4453-8e5f-82e49bb4d597",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#lu-fahrzeug",
+          "evaluate_url": "/learn/test-lehrgang-lp/analyse/evaluate/fahrzeug",
           "course_category": {
             "id": 15,
             "title": "Fahrzeug",
@@ -140,29 +265,32 @@
           },
           "children": [
             {
-              "id": 397,
+              "id": 391,
               "title": "Innerhalb des Handlungsfelds \u00abFahrzeug\u00bb bin ich f\u00e4hig, die Ziele und Pl\u00e4ne des Kunden zu ergr\u00fcnden (SOLL).",
               "slug": "test-lehrgang-competence-crit-y13-fahrzeug",
               "type": "competence.PerformanceCriteria",
-              "translation_key": "e9d49552-7d18-418a-94b6-ebb4ee6bf187",
+              "translation_key": "3b714984-afdb-4456-9c01-a59064724929",
+              "frontend_url": "",
               "competence_id": "Y1.3"
             },
             {
-              "id": 398,
+              "id": 392,
               "title": "Innerhalb des Handlungsfelds \u00abFahrzeug\u00bb bin ich f\u00e4hig, die IST-Situation des Kunden mit der geeigneten Gespr\u00e4chs-/Fragetechnik zu erfassen.",
               "slug": "test-lehrgang-competence-crit-y21-fahrzeug",
               "type": "competence.PerformanceCriteria",
-              "translation_key": "5f257b35-c6ca-49e4-9401-a5d02d53926d",
+              "translation_key": "c2850a27-60c5-471b-9fec-ba0baf152e91",
+              "frontend_url": "",
               "competence_id": "Y2.1"
             }
           ]
         },
         {
-          "id": 385,
+          "id": 378,
           "title": "Rafael Fasel wechselt sein Auto",
           "slug": "test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto",
           "type": "learnpath.LearningContent",
-          "translation_key": "fda4f870-9307-414d-b07f-eea607a9afb7",
+          "translation_key": "b7779d45-adf4-41fc-a4a5-e95c732b2224",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/rafael-fasel-wechselt-sein-auto",
           "minutes": 30,
           "contents": [
             {
@@ -171,16 +299,17 @@
                 "description": "In diesem Online-Training lernst du, wie du den Kundenbedarf ermittelst.",
                 "url": ""
               },
-              "id": "700a0f64-0892-4fa5-9e08-3bd34e99edeb"
+              "id": "c79d34cb-0e7e-403d-a672-03d94cf6bdc7"
             }
           ]
         },
         {
-          "id": 386,
+          "id": 379,
           "title": "Fachcheck Fahrzeug",
           "slug": "test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug",
           "type": "learnpath.LearningContent",
-          "translation_key": "dce0847f-4593-4bba-bd0c-a09c71eb0344",
+          "translation_key": "e395e05c-81bf-4bc6-98e8-3833bebb551c",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/fachcheck-fahrzeug",
           "minutes": 30,
           "contents": [
             {
@@ -189,16 +318,18 @@
                 "description": "Beispiel Test",
                 "url": null
               },
-              "id": "9f674aaa-ebf0-4a01-adcc-c0c46394fb10"
+              "id": "ac4c67bc-7de9-4e5c-a35e-e13f5766d6cc"
             }
           ]
         },
         {
-          "id": 387,
+          "id": 380,
           "title": "Reisen",
           "slug": "test-lehrgang-lp-circle-analyse-lu-reisen",
           "type": "learnpath.LearningUnit",
-          "translation_key": "c3f6d33f-8dbc-4d88-9a81-3c602c4f9cc8",
+          "translation_key": "d0c956cc-3c86-4e08-9990-ed4e85d03219",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#lu-reisen",
+          "evaluate_url": "/learn/test-lehrgang-lp/analyse/evaluate/reisen",
           "course_category": {
             "id": 16,
             "title": "Reisen",
@@ -206,21 +337,23 @@
           },
           "children": [
             {
-              "id": 399,
+              "id": 393,
               "title": "Innerhalb des Handlungsfelds \u00abReisen\u00bb bin ich f\u00e4hig, die Ziele und Pl\u00e4ne des Kunden zu ergr\u00fcnden (SOLL).",
               "slug": "test-lehrgang-competence-crit-y13-reisen",
               "type": "competence.PerformanceCriteria",
-              "translation_key": "1e488b69-8a3e-4acc-9547-48c103e0d038",
+              "translation_key": "1df45a12-41f2-4ff5-8580-d5a7caf5dd56",
+              "frontend_url": "",
               "competence_id": "Y1.3"
             }
           ]
         },
         {
-          "id": 388,
+          "id": 381,
           "title": "Reiseversicherung",
           "slug": "test-lehrgang-lp-circle-analyse-lc-reiseversicherung",
           "type": "learnpath.LearningContent",
-          "translation_key": "ff513aae-efe1-4974-b67f-7a292b8aef86",
+          "translation_key": "bad7439a-8b0c-4877-8d6c-78f292be83d4",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/reiseversicherung",
           "minutes": 240,
           "contents": [
             {
@@ -229,16 +362,17 @@
                 "description": "Beispiel \u00dcbung",
                 "url": null
               },
-              "id": "f35f213e-1a33-49fe-97c5-26e15161719f"
+              "id": "7e1ee533-7f75-495b-a2bc-8bbd2b1311c9"
             }
           ]
         },
         {
-          "id": 389,
+          "id": 382,
           "title": "Emma und Ayla campen durch Amerika",
           "slug": "test-lehrgang-lp-circle-analyse-lc-emma-und-ayla-campen-durch-amerika",
           "type": "learnpath.LearningContent",
-          "translation_key": "a77b0f9d-9a70-47bd-8e62-7580d70a4306",
+          "translation_key": "27f9d8f3-209c-4d55-94d9-2e70fbfe163b",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/emma-und-ayla-campen-durch-amerika",
           "minutes": 120,
           "contents": [
             {
@@ -247,24 +381,41 @@
                 "description": "Beispiel \u00dcbung",
                 "url": "/static/media/web_based_trainings/story-06-a-01-emma-und-ayla-campen-durch-amerika-einstieg/scormcontent/index.html"
               },
-              "id": "60f087ff-fa3a-4da2-820f-4fcdf449f70d"
+              "id": "b08e1851-8583-4428-b1bc-402c7095130b"
             }
           ]
         },
         {
-          "id": 390,
+          "id": 383,
           "title": "Beenden",
           "slug": "test-lehrgang-lp-circle-analyse-ls-beenden",
           "type": "learnpath.LearningSequence",
-          "translation_key": "06f1e998-b827-41cc-8129-d72d731719c1",
+          "translation_key": "68be244d-0e00-4700-834c-57b4db366fc1",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#ls-beenden",
           "icon": "it-icon-ls-end"
         },
         {
-          "id": 391,
+          "id": 384,
+          "title": "Beenden",
+          "slug": "test-lehrgang-lp-circle-analyse-lu-beenden",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "d594db87-ad78-491b-bf1b-410adfa3a0ba",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse#lu-beenden",
+          "evaluate_url": "/learn/test-lehrgang-lp/analyse/evaluate/beenden",
+          "course_category": {
+            "id": 14,
+            "title": "Allgemein",
+            "general": true
+          },
+          "children": []
+        },
+        {
+          "id": 385,
           "title": "KompetenzNavi anschauen",
-          "slug": "test-lehrgang-lp-circle-analyse-lc-kompetenzprofil-anschauen",
+          "slug": "test-lehrgang-lp-circle-analyse-lc-kompetenznavi-anschauen",
           "type": "learnpath.LearningContent",
-          "translation_key": "6cc47dc1-a74f-4cbf-afa6-23885891c82f",
+          "translation_key": "8ee57ba5-e09e-4058-937a-b733ea72b969",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/kompetenznavi-anschauen",
           "minutes": 30,
           "contents": [
             {
@@ -273,16 +424,17 @@
                 "description": "Beispiel Dokument",
                 "url": null
               },
-              "id": "3f685055-4e3e-4ca9-93af-bac19236931d"
+              "id": "3ef87e69-5e5c-415a-934c-ed47ad9fdd93"
             }
           ]
         },
         {
-          "id": 392,
+          "id": 386,
           "title": "Circle \"Analyse\" abschliessen",
           "slug": "test-lehrgang-lp-circle-analyse-lc-circle-analyse-abschliessen",
           "type": "learnpath.LearningContent",
-          "translation_key": "9b32e2cd-1368-4885-a79b-906b45ba04bc",
+          "translation_key": "90d9ab63-cc0f-492f-aad1-f7d448ee5b2c",
+          "frontend_url": "/learn/test-lehrgang-lp/analyse/circle-analyse-abschliessen",
           "minutes": 30,
           "contents": [
             {
@@ -291,34 +443,36 @@
                 "description": "Beispiel Dokument",
                 "url": null
               },
-              "id": "650b7b15-b522-4df7-ac5b-6a654f12334f"
+              "id": "21415232-862b-488c-9987-4f4ee369a854"
             }
           ]
         }
       ],
       "description": "Unit-Test Circle",
-      "job_situations": [
-        {
-          "type": "job_situation",
-          "value": "Autoversicherung",
-          "id": "c5a6b365-0a18-47d5-b6e1-6cb8b8ec7d35"
-        },
-        {
-          "type": "job_situation",
-          "value": "Autokauf",
-          "id": "e969d2a2-b383-482c-a721-88552af086a6"
-        }
-      ],
+      "goal_description": "('In diesem Circle baust du deine Handlungskompetenzen f\u00fcr diese Themen aus:',)",
       "goals": [
         {
           "type": "goal",
           "value": "... die heutige Versicherungssituation von Privat- oder Gesch\u00e4ftskunden einzusch\u00e4tzen.",
-          "id": "d9ad8aed-d7d6-42c7-b6d4-65102c8ddf10"
+          "id": "d1f001fa-f7b8-41a3-90c7-632260ff7054"
         },
         {
           "type": "goal",
           "value": "... deinem Kunden seine optimale L\u00f6sung aufzuzeigen",
-          "id": "2506950c-45cb-474f-acb9-45e83e9ebe1b"
+          "id": "8f73bb0f-e898-4961-ab28-dd34caca2c0b"
+        }
+      ],
+      "job_situation_description": "Du triffst in diesem Circle auf die folgenden berufstypischen Handlungsfelder:",
+      "job_situations": [
+        {
+          "type": "job_situation",
+          "value": "Autoversicherung",
+          "id": "df46930b-2911-4161-a677-75b4b156dff3"
+        },
+        {
+          "type": "job_situation",
+          "value": "Autokauf",
+          "id": "17a6d252-e942-44cc-920f-015e38e727be"
         }
       ],
       "experts": [
@@ -331,14 +485,14 @@
             "photo": null,
             "biography": ""
           },
-          "id": "b7b0ff2e-f840-4d74-99c1-c7a5ee6dc14e"
+          "id": "b0633305-5e74-43eb-93b8-ebbcfb1b17d1"
         }
       ]
     }
   ],
   "course": {
     "id": -1,
-    "title": "Test Lerngang",
+    "title": "Test Lehrgang",
     "category_name": "Handlungsfeld"
   }
 }
diff --git a/client/src/services/__tests__/request_learning_path_json.py b/client/src/services/__tests__/request_learning_path_json.py
index dfd4b62d..87409bb5 100644
--- a/client/src/services/__tests__/request_learning_path_json.py
+++ b/client/src/services/__tests__/request_learning_path_json.py
@@ -5,25 +5,25 @@ import requests
 
 def main():
     client = requests.session()
-    client.get('http://localhost:8000/')
+    client.get("http://localhost:8001/")
 
     client.post(
-        'http://localhost:8000/api/core/login/',
+        "http://localhost:8001/api/core/login/",
         json={
-            'username': 'admin',
-            'password': 'test',
-        }
+            "username": "admin",
+            "password": "test",
+        },
     )
 
     response = client.get(
-        'http://localhost:8000/api/course/page/test-lehrgang-lp/',
+        "http://localhost:8001/api/course/page/test-lehrgang-lp/",
     )
     print(response.status_code)
     print(response.json())
 
-    with open('learning_path_json.json', 'w') as f:
+    with open("learning_path_json.json", "w") as f:
         f.write(json.dumps(response.json(), indent=4))
 
 
-if __name__ == '__main__':
+if __name__ == "__main__":
     main()
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 3edb0d5f..34550ea7 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -26,20 +26,15 @@ export function parseLearningSequences(
       if (learningSequence) {
         if (learningUnit) {
           learningUnit.last = true;
-          learningSequence.learningUnits.push(learningUnit);
         }
-        result.push(learningSequence);
       }
       learningSequence = Object.assign(child, { learningUnits: [] });
+      result.push(learningSequence);
     } else if (child.type === "learnpath.LearningUnit") {
       if (!learningSequence) {
         throw new Error("LearningUnit found before LearningSequence");
       }
 
-      if (learningUnit && learningUnit.learningContents.length) {
-        learningSequence.learningUnits.push(learningUnit);
-      }
-
       learningUnit = Object.assign(child, {
         learningContents: [],
         parentLearningSequence: learningSequence,
@@ -50,9 +45,10 @@ export function parseLearningSequences(
           return c;
         }),
       });
+      learningSequence.learningUnits.push(learningUnit);
     } else if (child.type === "learnpath.LearningContent") {
       if (!learningUnit) {
-        throw new Error("LearningContent found before LearningUnit");
+        throw new Error(`LearningContent found before LearningUnit ${child.slug}`);
       }
       previousLearningContent = learningContent;
 
@@ -73,11 +69,8 @@ export function parseLearningSequences(
     }
   });
 
-  if (learningUnit && learningSequence) {
-    // TypeScript does not get it here...
+  if (learningUnit) {
     learningUnit.last = true;
-    learningSequence.learningUnits.push(learningUnit);
-    result.push(learningSequence);
   } else {
     throw new Error(
       "Finished with LearningContent but there is no LearningSequence and LearningUnit"
diff --git a/server/vbv_lernwelt/course/creators/test_course.py b/server/vbv_lernwelt/course/creators/test_course.py
index 98ca2592..2cd3c019 100644
--- a/server/vbv_lernwelt/course/creators/test_course.py
+++ b/server/vbv_lernwelt/course/creators/test_course.py
@@ -96,6 +96,7 @@ def create_test_learning_path(user=None, skip_locales=True):
     LearningSequenceFactory(
         title="Starten", parent=circle_basis, icon="it-icon-ls-start"
     )
+    LearningUnitFactory(title="Einführung", parent=circle_basis)
     LearningContentFactory(
         title="Einführung",
         parent=circle_basis,
@@ -103,6 +104,7 @@ def create_test_learning_path(user=None, skip_locales=True):
         contents=[("document", DocumentBlockFactory())],
     )
     LearningSequenceFactory(title="Beenden", parent=circle_basis, icon="it-icon-ls-end")
+    LearningUnitFactory(title="Beenden", parent=circle_basis)
     LearningContentFactory(
         title="Jetzt kann es losgehen!",
         parent=circle_basis,
@@ -140,6 +142,7 @@ def create_test_learning_path(user=None, skip_locales=True):
     )
 
     LearningSequenceFactory(title="Starten", parent=circle, icon="it-icon-ls-start")
+    LearningUnitFactory(title="Einführung", parent=circle)
     LearningContentFactory(
         title=f'Einleitung Circle "Analyse"',
         parent=circle,
@@ -204,6 +207,7 @@ def create_test_learning_path(user=None, skip_locales=True):
     )
 
     LearningSequenceFactory(title="Beenden", parent=circle, icon="it-icon-ls-end")
+    LearningUnitFactory(title="Beenden", parent=circle)
     LearningContentFactory(
         title="KompetenzNavi anschauen",
         parent=circle,

From 579865d4784738b530651d3427d5b3b576095f54 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Oct 2022 18:05:37 +0200
Subject: [PATCH 8/8] Fix python tests

---
 server/vbv_lernwelt/competence/tests/test_api.py    | 2 +-
 server/vbv_lernwelt/learnpath/tests/test_api.py     | 4 ++--
 server/vbv_lernwelt/media_library/tests/test_api.py | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/server/vbv_lernwelt/competence/tests/test_api.py b/server/vbv_lernwelt/competence/tests/test_api.py
index c8ab53f9..492fa46a 100644
--- a/server/vbv_lernwelt/competence/tests/test_api.py
+++ b/server/vbv_lernwelt/competence/tests/test_api.py
@@ -13,7 +13,7 @@ class CompetenceAPITestCase(APITestCase):
         self.user = User.objects.get(username="student")
         self.client.login(username="student", password="test")
 
-    def test_get_learnpathPage(self):
+    def test_get_compentence_page(self):
         slug = "test-lehrgang-competence"
         competence_profile = CompetenceProfilePage.objects.get(slug=slug)
         response = self.client.get(f"/api/course/page/{slug}/")
diff --git a/server/vbv_lernwelt/learnpath/tests/test_api.py b/server/vbv_lernwelt/learnpath/tests/test_api.py
index a6f053d5..9b5761bf 100644
--- a/server/vbv_lernwelt/learnpath/tests/test_api.py
+++ b/server/vbv_lernwelt/learnpath/tests/test_api.py
@@ -13,7 +13,7 @@ class TestRetrieveLearingPathContents(APITestCase):
         self.user = User.objects.get(username="student")
         self.client.login(username="student", password="test")
 
-    def test_get_learnpathPage(self):
+    def test_get_learnpath_page(self):
         slug = "test-lehrgang-lp"
         learning_path = LearningPath.objects.get(slug=slug)
         response = self.client.get(f"/api/course/page/{slug}/")
@@ -25,4 +25,4 @@ class TestRetrieveLearingPathContents(APITestCase):
         # topics and circles
         self.assertEqual(4, len(data["children"]))
         # circle "analyse" contents
-        self.assertEqual(12, len(data["children"][3]["children"]))
+        self.assertEqual(14, len(data["children"][3]["children"]))
diff --git a/server/vbv_lernwelt/media_library/tests/test_api.py b/server/vbv_lernwelt/media_library/tests/test_api.py
index fd0e224d..b9729f54 100644
--- a/server/vbv_lernwelt/media_library/tests/test_api.py
+++ b/server/vbv_lernwelt/media_library/tests/test_api.py
@@ -13,7 +13,7 @@ class MediaLibraryAPITestCase(APITestCase):
         self.user = User.objects.get(username="student")
         self.client.login(username="student", password="test")
 
-    def test_get_learnpathPage(self):
+    def test_get_media_library_page(self):
         slug = "test-lehrgang-media"
         media_library = MediaLibraryPage.objects.get(slug=slug)
         response = self.client.get(f"/api/course/page/{slug}/")