From dc99835a9db40e3fef98fd17dd76f074ca57b520 Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Tue, 1 Apr 2025 00:31:16 +0200
Subject: [PATCH] refactor(backend): Ondersteuning voor gepersonaliseerde
 leerpaden toegevoegd.

---
 frontend/src/queries/learning-paths.ts        |   2 +-
 .../learning-paths/LearningObjectView.vue     |   7 +-
 .../views/learning-paths/LearningPathPage.vue | 168 ++++++++++--------
 3 files changed, 99 insertions(+), 78 deletions(-)

diff --git a/frontend/src/queries/learning-paths.ts b/frontend/src/queries/learning-paths.ts
index 56699d7a..3ff44799 100644
--- a/frontend/src/queries/learning-paths.ts
+++ b/frontend/src/queries/learning-paths.ts
@@ -16,7 +16,7 @@ export function useGetLearningPathQuery(
         queryKey: [LEARNING_PATH_KEY, "get", hruid, language, options],
         queryFn: () => {
             const [hruidVal, languageVal, optionsVal] = [toValue(hruid), toValue(language), toValue(options)];
-            return learningPathController.getBy(hruidVal, languageVal)
+            return learningPathController.getBy(hruidVal, languageVal, optionsVal)
         },
         enabled: () => Boolean(toValue(hruid)) && Boolean(toValue(language)),
     })
diff --git a/frontend/src/views/learning-paths/LearningObjectView.vue b/frontend/src/views/learning-paths/LearningObjectView.vue
index b03c5cb1..73413c00 100644
--- a/frontend/src/views/learning-paths/LearningObjectView.vue
+++ b/frontend/src/views/learning-paths/LearningObjectView.vue
@@ -18,10 +18,15 @@ const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLe
 
 <style scoped>
     .learning-object-container {
-        margin: 20px;
+        padding: 20px;
     }
     :deep(hr) {
         margin-top: 10px;
         margin-bottom: 10px;
     }
+    :deep(li) {
+        margin-left: 30px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
 </style>
diff --git a/frontend/src/views/learning-paths/LearningPathPage.vue b/frontend/src/views/learning-paths/LearningPathPage.vue
index 5a0fc4db..97867e0a 100644
--- a/frontend/src/views/learning-paths/LearningPathPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathPage.vue
@@ -11,6 +11,7 @@
     import {useGetLearningPathQuery} from "@/queries/learning-paths.ts";
     import {useLearningObjectListForPathQuery} from "@/queries/learning-objects.ts";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
+    import authService from "@/services/auth/auth-service.ts";
 
     const router = useRouter();
     const route = useRoute();
@@ -18,14 +19,29 @@
 
     const props = defineProps<{hruid: string, language: Language, learningObjectHruid?: string}>()
 
-    interface QueryParams {
+    interface Personalization {
         forStudent?: string,
         forGroup?: string
     }
 
-    const typedQuery = computed(() => route.query as QueryParams)
+    const personalization = computed(() => {
+        if (route.query.forStudent || route.query.forGroup) {
+            return {
+                forStudent: route.query.forStudent,
+                forGroup: route.query.forGroup
+            } as Personalization
+        } else {
+            return {
+                forStudent: authService.authState.user?.profile?.preferred_username
+            } as Personalization
+        }
+    });
 
-    const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, typedQuery.value);
+    const learningPathQueryResult = useGetLearningPathQuery(
+        props.hruid,
+        props.language,
+        personalization
+    );
 
     const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
 
@@ -107,82 +123,82 @@
 </script>
 
 <template>
-        <using-query-result
-            :query-result="learningPathQueryResult"
-            v-slot="learningPath: {data: LearningPath}"
-        >
-            <v-navigation-drawer v-model="navigationDrawerShown">
-                <v-list-item
-                    :title="learningPath.data.title"
-                    :subtitle="learningPath.data.description"
-                ></v-list-item>
-                <v-list-item>
-                    <template v-slot:subtitle>
-                        <p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
-                        <p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
-                        <p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
-                    </template>
-                </v-list-item>
-                <v-divider></v-divider>
-                <div v-if="props.learningObjectHruid">
-                    <using-query-result
-                        :query-result="learningObjectListQueryResult"
-                        v-slot="learningObjects: {data: LearningObject[]}"
+    <using-query-result
+        :query-result="learningPathQueryResult"
+        v-slot="learningPath: {data: LearningPath}"
+    >
+        <v-navigation-drawer v-model="navigationDrawerShown">
+            <v-list-item
+                :title="learningPath.data.title"
+                :subtitle="learningPath.data.description"
+            ></v-list-item>
+            <v-list-item>
+                <template v-slot:subtitle>
+                    <p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
+                    <p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
+                    <p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
+                </template>
+            </v-list-item>
+            <v-divider></v-divider>
+            <div v-if="props.learningObjectHruid">
+                <using-query-result
+                    :query-result="learningObjectListQueryResult"
+                    v-slot="learningObjects: {data: LearningObject[]}"
+                >
+                    <v-list-item
+                        link
+                        :to="{path: node.key, query: route.query}"
+                        :title="node.title"
+                        :active="node.key === props.learningObjectHruid"
+                        v-for="node in learningObjects.data"
                     >
-                        <v-list-item
-                            link
-                            :to="{path: node.key, query: route.query}"
-                            :title="node.title"
-                            :active="node.key === props.learningObjectHruid"
-                            v-for="node in learningObjects.data"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon
-                                    :color="COLORS[getNavItemState(node)]"
-                                    :icon="ICONS[getNavItemState(node)]"></v-icon>
-                            </template>
-                            <template v-slot:append>
-                                {{ node.estimatedTime }}'
-                            </template>
-                        </v-list-item>
-                    </using-query-result>
-                </div>
-            </v-navigation-drawer>
-            <div class="control-bar-above-content">
-                <v-btn
-                    :icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
-                    class="navigation-drawer-toggle-button"
-                    variant="plain"
-                    @click="navigationDrawerShown = !navigationDrawerShown"></v-btn>
-                <div class="search-field-container">
-                    <learning-path-search-field></learning-path-search-field>
-                </div>
+                        <template v-slot:prepend>
+                            <v-icon
+                                :color="COLORS[getNavItemState(node)]"
+                                :icon="ICONS[getNavItemState(node)]"></v-icon>
+                        </template>
+                        <template v-slot:append>
+                            {{ node.estimatedTime }}'
+                        </template>
+                    </v-list-item>
+                </using-query-result>
             </div>
-            <learning-object-view
-                :hruid="currentNode.learningobjectHruid"
-                :language="currentNode.language"
-                :version="currentNode.version"
-                v-if="currentNode"
-            ></learning-object-view>
-            <div class="navigation-buttons-container">
-                <v-btn
-                    prepend-icon="mdi-chevron-left"
-                    variant="text"
-                    :disabled="!previousNode"
-                    :to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
-                >
-                    {{ t("previous") }}
-                </v-btn>
-                <v-btn
-                    append-icon="mdi-chevron-right"
-                    variant="text"
-                    :disabled="!nextNode"
-                    :to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
-                >
-                    {{ t("next") }}
-                </v-btn>
+        </v-navigation-drawer>
+        <div class="control-bar-above-content">
+            <v-btn
+                :icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
+                class="navigation-drawer-toggle-button"
+                variant="plain"
+                @click="navigationDrawerShown = !navigationDrawerShown"></v-btn>
+            <div class="search-field-container">
+                <learning-path-search-field></learning-path-search-field>
             </div>
-        </using-query-result>
+        </div>
+        <learning-object-view
+            :hruid="currentNode.learningobjectHruid"
+            :language="currentNode.language"
+            :version="currentNode.version"
+            v-if="currentNode"
+        ></learning-object-view>
+        <div class="navigation-buttons-container">
+            <v-btn
+                prepend-icon="mdi-chevron-left"
+                variant="text"
+                :disabled="!previousNode"
+                :to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
+            >
+                {{ t("previous") }}
+            </v-btn>
+            <v-btn
+                append-icon="mdi-chevron-right"
+                variant="text"
+                :disabled="!nextNode"
+                :to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
+            >
+                {{ t("next") }}
+            </v-btn>
+        </div>
+    </using-query-result>
 </template>
 
 <style scoped>