fix(frontend): Typeringsproblemen opgelost.

frontend/src/components/BrowseThemes.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
     import ThemeCard from "@/components/ThemeCard.vue";
-    import { ref, watchEffect, computed } from "vue";
+    import {ref, watchEffect, computed, type Ref} from "vue";
     import { useI18n } from "vue-i18n";
     import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
     import { useThemeQuery } from "@/queries/themes.ts";
+    import type {Theme} from "@/data-objects/theme.ts";
 
     const props = defineProps({
         selectedTheme: { type: String, required: true },
@@ -15,11 +16,11 @@
 
     const { data: allThemes, isLoading, error } = useThemeQuery(language);
 
-    const allCards = ref([]);
-    const cards = ref([]);
+    const allCards: Ref<Theme[]> = ref([]);
+    const cards: Ref<Theme[]>  = ref([]);
 
     watchEffect(() => {
-        const themes = allThemes.value ?? [];
+        const themes: Theme[] = allThemes.value ?? [];
         allCards.value = themes;
 
         if (props.selectedTheme) {

frontend/src/components/LearningPathsGrid.vue

@@ -15,7 +15,7 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
             class="learning-path-card"
             link
             :to="`/learningPath/${learningPath.hruid}/${learningPath.language}/${learningPath.startNode.learningobjectHruid}`"
-            :key="[learningPath.hruid, learningPath.language]"
+            :key="`${learningPath.hruid}/${learningPath.language}`"
             v-for="learningPath in props.learningPaths"
         >
             <v-img

frontend/src/data-objects/theme.ts

@@ -0,0 +1,8 @@
+export interface Theme {
+    key: string;
+    title: string;
+    description: string;
+
+    // URL of the image
+    image: string;
+}

frontend/src/queries/learning-objects.ts

@@ -39,13 +39,13 @@ export function useLearningObjectHTMLQuery(
 }
 
 export function useLearningObjectListForPathQuery(
-    learningPath: MaybeRefOrGetter<LearningPath>
-): UseQueryReturnType<LearningObject, Error> {
+    learningPath: MaybeRefOrGetter<LearningPath | undefined>
+): UseQueryReturnType<LearningObject[], Error> {
     return useQuery({
         queryKey: [LEARNING_OBJECT_KEY, "onPath", learningPath],
         queryFn: async () => {
-            const learningObjects = [];
-            for (const node of toValue(learningPath).nodesAsList) {
+            const learningObjects: Promise<LearningObject>[] = [];
+            for (const node of toValue(learningPath)!.nodesAsList) {
                 learningObjects.push(
                     learningObjectController.getMetadata(node.learningobjectHruid, node.language, node.version)
                 );

frontend/src/queries/learning-paths.ts

@@ -33,12 +33,12 @@ export function useGetAllLearningPathsByThemeQuery(
 }
 
 export function useSearchLearningPathQuery(
-    query: MaybeRefOrGetter<string>
+    query: MaybeRefOrGetter<string | undefined>
 ): UseQueryReturnType<LearningPath[], Error>  {
     return useQuery({
         queryKey: [LEARNING_PATH_KEY, "search", query],
         queryFn: async () => {
-            const queryVal = toValue(query);
+            const queryVal = toValue(query)!;
             return learningPathController.search(queryVal);
         },
         enabled: () => Boolean(toValue(query)),

frontend/src/queries/themes.ts

@@ -1,10 +1,11 @@
 import { useQuery, type UseQueryReturnType } from "@tanstack/vue-query";
 import { getThemeController } from "@/controllers/controllers";
 import { type MaybeRefOrGetter, toValue } from "vue";
+import type {Theme} from "@/data-objects/theme.ts";
 
 const themeController = getThemeController();
 
-export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryReturnType<unknown, Error> {
+export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryReturnType<Theme[], Error> {
     return useQuery({
         queryKey: ["themes", language],
         queryFn: async () => {

frontend/src/views/SingleTheme.vue

@@ -14,9 +14,7 @@ const language = computed(() => locale.value);
 
 const themeQueryResult = useThemeQuery(language);
 
-const currentThemeInfo = computed(() =>
-    themeQueryResult.isSuccess.value ? themeQueryResult.data.value.filter(it => it.key === props.theme)[0] : undefined
-);
+const currentThemeInfo = computed(() => themeQueryResult.data.value?.find(it => it.key === props.theme));
 
 const learningPathsForThemeQueryResult = useGetAllLearningPathsByThemeQuery(() => props.theme);
 
@@ -26,7 +24,7 @@ const searchFilter = ref("");
 function filterLearningPaths(learningPaths: LearningPath[]): LearningPath[] {
     return learningPaths.filter(it =>
         it.title.toLowerCase().includes(searchFilter.value.toLowerCase())
-        || it.description.toLowerCase().includes(searchFilter.value.toLowerCase)
+        || it.description.toLowerCase().includes(searchFilter.value.toLowerCase())
     );
 }
 
@@ -35,8 +33,8 @@ function filterLearningPaths(learningPaths: LearningPath[]): LearningPath[] {
 <template>
     <div class="container">
         <using-query-result :query-result="themeQueryResult">
-            <h1>{{ currentThemeInfo.title }}</h1>
-            <p>{{ currentThemeInfo.description }}</p>
+            <h1>{{ currentThemeInfo!!.title }}</h1>
+            <p>{{ currentThemeInfo!!.description }}</p>
             <div class="search-field-container">
                 <v-text-field
                     class="search-field"

frontend/src/views/learning-paths/LearningPathPage.vue

@@ -45,7 +45,7 @@
     const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
 
     const nodesList: ComputedRef<LearningPathNode[] | null> = computed(() =>
-        learningPathQueryResult.isSuccess ? learningPathQueryResult.data.value?.nodesAsList : null
+        learningPathQueryResult.data.value?.nodesAsList ?? null
     );
 
     const currentNode = computed(() => {
@@ -71,11 +71,11 @@
 
     function isLearningObjectCompleted(learningObject: LearningObject): boolean {
         if (learningObjectListQueryResult.isSuccess) {
-            return learningPathQueryResult.data.value.nodesAsList.find(it =>
+            return learningPathQueryResult.data.value?.nodesAsList?.find(it =>
                 it.learningobjectHruid === learningObject.key
                 && it.version === learningObject.version
                 && it.language === learningObject.language
-            ).done;
+            )?.done ?? false;
         }
         return false;
     }

frontend/src/views/learning-paths/LearningPathSearchPage.vue

@@ -11,7 +11,7 @@
     const route = useRoute();
     const { t } = useI18n();
 
-    const query = computed(() => route.query.query as string | null);
+    const query = computed(() => route.query.query as string | undefined);
 
     const searchQueryResults = useSearchLearningPathQuery(query);
 </script>