From ad1e5a30ae70cba95e2a1497e6e74f51fc2502f6 Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo.depeuter@ugent.be>
Date: Mon, 19 May 2025 16:18:01 +0200
Subject: [PATCH] chore(frontend): Lazy and autoexpand

---
 .../components/DiscussionSideBarElement.vue   | 47 ++++++-------------
 .../src/components/DiscussionsSideBar.vue     |  8 +++-
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/DiscussionSideBarElement.vue b/frontend/src/components/DiscussionSideBarElement.vue
index 37592638..4b24fce4 100644
--- a/frontend/src/components/DiscussionSideBarElement.vue
+++ b/frontend/src/components/DiscussionSideBarElement.vue
@@ -1,44 +1,27 @@
 <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";
-    import { ref, watchEffect } from "vue";
+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 route = useRoute();
 
-    const props = defineProps<{
-        path: LearningPath;
-        activeObjectId: string;
-    }>();
+const props = defineProps<{
+    path: LearningPath;
+    activeObjectId: string;
+}>();
 
-    const currentPath = ref(props.path);
-
-    const learningObjectListQueryResult = useLearningObjectListForPathQuery(currentPath);
-
-    const dropdownEnabled = ref<boolean>(false);
-
-    watchEffect(() => {
-        const objects = learningObjectListQueryResult.data.value;
-
-        if (objects) {
-            const objectInThisPath = objects.some((obj) => obj.key === props.activeObjectId);
-            if (objectInThisPath) {
-                dropdownEnabled.value = true;
-            }
-        }
-    });
 </script>
 
 <template>
-    <v-expansion-panel>
+    <v-expansion-panel :value="props.path.hruid">
         <v-expansion-panel-title>
             {{ path.title }}
         </v-expansion-panel-title>
         <v-expansion-panel-text>
             <using-query-result
-                :query-result="learningObjectListQueryResult"
+                :query-result="useLearningObjectListForPathQuery(props.path)"
                 v-slot="learningObjects: { data: LearningObject[] }"
             >
                 <template
@@ -48,9 +31,9 @@
                     <v-list-item
                         link
                         :to="{
-                            path: `/discussion-reload/${currentPath.hruid}/${node.language}/${node.key}`,
-                            query: route.query,
-                        }"
+                        path: `/discussion-reload/${props.path.hruid}/${node.language}/${node.key}`,
+                        query: route.query,
+                    }"
                         :title="node.title"
                         :active="node.key === props.activeObjectId"
                     >
diff --git a/frontend/src/components/DiscussionsSideBar.vue b/frontend/src/components/DiscussionsSideBar.vue
index 58f148e6..7f417e1c 100644
--- a/frontend/src/components/DiscussionsSideBar.vue
+++ b/frontend/src/components/DiscussionsSideBar.vue
@@ -5,17 +5,21 @@
     import { useI18n } from "vue-i18n";
     import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
     import { ref, watch } from "vue";
+    import { useRoute } from 'vue-router';
 
     const { t, locale } = useI18n();
+    const route = useRoute();
 
     const navigationDrawerShown = ref(true);
     const currentLocale = ref(locale.value);
+    const expanded = ref([route.params.hruid])
 
     watch(locale, (newLocale) => {
         currentLocale.value = newLocale;
     });
 
     const allLearningPathsResult = useGetAllLearningPaths(() => currentLocale.value);
+
 </script>
 
 <template>
@@ -31,7 +35,9 @@
                 </template>
             </v-list-item>
             <v-divider></v-divider>
-            <v-expansion-panels>
+            <v-expansion-panels
+                v-model="expanded"
+            >
                 <using-query-result
                     :query-result="allLearningPathsResult"
                     v-slot="learningPaths: { data: LearningPath[] }"