From f318bb296b3bcdfab0fe02d32026cf55231d1691 Mon Sep 17 00:00:00 2001
From: Timo De Meyst <timo.demeyst@ugent.be>
Date: Fri, 9 May 2025 02:33:32 +0200
Subject: [PATCH] feat: component die in inhoudstafel een leerpad toont met al
 zijn leerobjecten eronder (werkt nog niet)

---
 .../components/DiscussionSideBarElement.vue   | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/src/components/DiscussionSideBarElement.vue

diff --git a/frontend/src/components/DiscussionSideBarElement.vue b/frontend/src/components/DiscussionSideBarElement.vue
new file mode 100644
index 00000000..fda3d938
--- /dev/null
+++ b/frontend/src/components/DiscussionSideBarElement.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
+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";
+
+    const route = useRoute();
+
+    const props = defineProps<{
+        path: LearningPath;
+        activeObjectId: string 
+    }>();
+
+    const learningObjectListQueryResult = useLearningObjectListForPathQuery(props.path);
+
+    console.log(learningObjectListQueryResult.data.value)
+
+</script>
+
+<template>
+    <main>
+        <div>{{path.title}}</div>
+        <template>
+            <using-query-result
+                :query-result="learningObjectListQueryResult"
+                v-slot="learningObjects: { data: LearningObject[] }"
+            >
+                <template v-for="node in learningObjects.data">
+                    <v-list-item
+                        link
+                        :to="{ path: node.key, query: route.query }"
+                        :title="node.title"
+                        :active="node.key === props.activeObjectId"
+                    >
+                    </v-list-item>
+                </template>
+            </using-query-result>
+        </template>
+    </main>
+</template>
+
+<style scoped></style>