feat: elk leerpad is zichtbaar in sidebar

frontend/src/components/DiscussionSideBarElement.vue

@@ -4,6 +4,7 @@ import type { LearningPath } from '@/data-objects/learning-paths/learning-path';
 import { useLearningObjectListForPathQuery } from '@/queries/learning-objects';
 import { useRoute } from 'vue-router';
 import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import { ref } from 'vue';
 
     const route = useRoute();
 
@@ -12,7 +13,9 @@ import UsingQueryResult from "@/components/UsingQueryResult.vue";
         activeObjectId: string 
     }>();
 
-    const learningObjectListQueryResult = useLearningObjectListForPathQuery(props.path);
+    const currentPath = ref(props.path)
+
+    const learningObjectListQueryResult = useLearningObjectListForPathQuery(currentPath);
 
     console.log(learningObjectListQueryResult.data.value)
 
@@ -21,7 +24,7 @@ import UsingQueryResult from "@/components/UsingQueryResult.vue";
 <template>
     <main>
         <div>{{path.title}}</div>
-        <template>
+        <div>
             <using-query-result
                 :query-result="learningObjectListQueryResult"
                 v-slot="learningObjects: { data: LearningObject[] }"
@@ -36,7 +39,7 @@ import UsingQueryResult from "@/components/UsingQueryResult.vue";
                     </v-list-item>
                 </template>
             </using-query-result>
-        </template>
+        </div>
     </main>
 </template>
 

frontend/src/views/discussions/SingleDiscussion.vue

@@ -194,21 +194,15 @@
                     </template>
                 </v-list-item>
                 <v-divider></v-divider>
-                <div v-if="props.learningObjectHruid">
+                <div>
-                    <DiscussionSideBarElement
-                        :path="(learningPathQueryResult.data.value as LearningPath)"
-                        :activeObjectId="props.learningObjectHruid">
-                    </DiscussionSideBarElement>
                     <using-query-result
-                        :query-result="learningObjectListQueryResult"
+                        :query-result="allLearningPathsResult"
-                        v-slot="learningObjects: {data: LearningObject[]}">
+                        v-slot="learningPaths: {data: LearningPath[]}">
-                            <v-list-item 
+                        <DiscussionSideBarElement
-                                link
+                            v-for="learningPath in learningPaths.data"
-                                :to="{ path: learningObject.key, query: route.query }"
+                            :path="learningPath"
-                                :title="learningObject.title"
+                            :activeObjectId="props.learningObjectHruid as string">
-                                :active="learningObject.key === props.learningObjectHruid"
+                        </DiscussionSideBarElement>
-                                v-for="learningObject in learningObjects.data">
-                            </v-list-item>
                     </using-query-result>
                 </div>
             </div>