feat: melding bij leerobjecten met vragen

frontend/src/components/QuestionNotification.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
+import { useQuestionsQuery } from '@/queries/questions';
+import type { LearningObjectIdentifierDTO } from '@dwengo-1/common/interfaces/learning-content';
+import { languageMap } from '@dwengo-1/common/util/language';
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+        node: LearningObject
+}>();
+
+const loid = { hruid: props.node.key, version: props.node.version, language: props.node.language} as LearningObjectIdentifierDTO;
+const { data, isLoading, error} = useQuestionsQuery(loid);
+
+const hasQuestions = computed(() => {
+    return (data.value?.questions.length ?? 0) > 0;
+});
+
+</script>
+<template v-if="!isLoading & !error">
+    <v-icon v-if="hasQuestions" icon="mdi-help-circle-outline" color="red" size="small" />
+    <div>{{ node.estimatedTime }}'</div> 
+</template>
+<style scoped></style>

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

@@ -21,6 +21,7 @@
     import {useStudentAssignmentsQuery, useStudentGroupsQuery} from "@/queries/students"
     import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
 import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
+import QuestionNotification from "@/components/QuestionNotification.vue";
 
     const router = useRouter();
     const route = useRoute();
@@ -194,30 +195,6 @@ import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
         }
     }
 
-    const learningObjectHasQuestions = computed(() => {
-        const result = new Map<string, boolean>();
-        const learningObjects = learningObjectListQueryResult.data?.value ?? [];
-
-        learningObjects.forEach((learningObject) => {
-            const nodeLoId: LearningObjectIdentifierDTO = {
-                hruid: learningObject.key,
-                language: learningObject.language,
-                version: learningObject.version
-            };
-
-            // Check if the learning object has questions
-            const questions = useQuestionsQuery(nodeLoId).data.value?.questions as QuestionDTO[] || [];
-            result.set(learningObject.key, questions.length > 0);
-        });
-
-        return result;
-    });
-
-// Helper function to check if a learning object has questions
-function hasQuestions(learningObjectKey: string): boolean {
-    return learningObjectHasQuestions.value.get(learningObjectKey) ?? false;
-}
-
 </script>
 
 <template>
@@ -295,10 +272,7 @@ function hasQuestions(learningObjectKey: string): boolean {
                                         :icon="ICONS[getNavItemState(node)]"
                                     ></v-icon>
                                 </template> 
-                                <template v-slot:append>
+                                <QuestionNotification :node="node" v-slot:append></QuestionNotification>
-                                    <v-icon v-if="hasQuestions(node.key)" icon="mdi-help-circle-outline" color="red" />
-                                    <div>{{ node.estimatedTime }}'</div> 
-                                </template>
                             </v-list-item>
                         </template>
                     </using-query-result>