Merge pull request #286 from SELab-2/extra/discussions

extra: Discussions optimalisaties

frontend/src/components/DiscussionSideBarElement.vue

@@ -4,6 +4,7 @@
     import { useLearningObjectListForPathQuery } from "@/queries/learning-objects";
     import { useRoute } from "vue-router";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
+    import QuestionNotification from "@/components/QuestionNotification.vue";
 
     const route = useRoute();
 
@@ -11,38 +12,34 @@
         path: LearningPath;
         activeObjectId: string;
     }>();
+
+    const learningObjects = useLearningObjectListForPathQuery(props.path);
 </script>
 
 <template>
-    <v-expansion-panel :value="props.path.hruid">
-        <v-expansion-panel-title>
-            {{ path.title }}
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-            <v-lazy>
-                <using-query-result
-                    :query-result="useLearningObjectListForPathQuery(props.path)"
-                    v-slot="learningObjects: { data: LearningObject[] }"
-                >
-                    <template
-                        v-for="node in learningObjects.data"
-                        :key="node.key"
-                    >
-                        <v-list-item
-                            link
-                            :to="{
-                                path: `/discussion-reload/${props.path.hruid}/${node.language}/${node.key}`,
-                                query: route.query,
-                            }"
-                            :title="node.title"
-                            :active="node.key === props.activeObjectId"
-                        >
-                        </v-list-item>
-                    </template>
-                </using-query-result>
-            </v-lazy>
-        </v-expansion-panel-text>
-    </v-expansion-panel>
+    <using-query-result
+        :query-result="learningObjects"
+        v-slot="learningObjects: { data: LearningObject[] }"
+    >
+        <template
+            v-for="node in learningObjects.data"
+            :key="node.key"
+        >
+            <v-list-item
+                link
+                :to="{
+                    path: `/discussion-reload/${props.path.hruid}/${node.language}/${node.key}`,
+                    query: route.query,
+                }"
+                :title="node.title"
+                :active="node.key === props.activeObjectId"
+            >
+                <template v-slot:append>
+                    <QuestionNotification :node="node"></QuestionNotification>
+                </template>
+            </v-list-item>
+        </template>
+    </using-query-result>
 </template>
 
 <style scoped></style>

frontend/src/components/DiscussionsSideBar.vue

@@ -10,6 +10,10 @@
     const { t, locale } = useI18n();
     const route = useRoute();
 
+    const props = defineProps<{
+        learningObjectHruid: string;
+    }>();
+
     const navigationDrawerShown = ref(true);
     const currentLocale = ref(locale.value);
     const expanded = ref([route.params.hruid]);
@@ -40,12 +44,23 @@
                         :query-result="allLearningPathsResult"
                         v-slot="learningPaths: { data: LearningPath[] }"
                     >
-                        <DiscussionSideBarElement
+                        <v-expansion-panel
                             v-for="learningPath in learningPaths.data"
-                            :path="learningPath"
-                            :activeObjectId="'' as string"
                             :key="learningPath.hruid"
-                        />
+                            :value="learningPath.hruid"
+                        >
+                            <v-expansion-panel-title>
+                                {{ learningPath.title }}
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                                <v-lazy>
+                                    <DiscussionSideBarElement
+                                        :path="learningPath"
+                                        :activeObjectId="props.learningObjectHruid"
+                                    />
+                                </v-lazy>
+                            </v-expansion-panel-text>
+                        </v-expansion-panel>
                     </using-query-result>
                 </v-expansion-panels>
             </div>

frontend/src/views/discussions/SingleDiscussion.vue

@@ -75,7 +75,7 @@
 </script>
 
 <template>
-    <DiscussionsSideBar></DiscussionsSideBar>
+    <DiscussionsSideBar :learningObjectHruid="props.learningObjectHruid"> </DiscussionsSideBar>
     <div class="discussions-container">
         <QuestionBox
             :hruid="props.hruid"