From 12b9f31f5fceb93b78140ca691bbb5f307e5e84b Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Mon, 31 Mar 2025 23:12:03 +0200
Subject: [PATCH] fix(backend): Diverse bugfixes omtrent LearningPathPage

---
 frontend/src/components/UsingQueryResult.vue  | 14 +++++-------
 frontend/src/controllers/base-controller.ts   | 22 ++++++++++++-------
 frontend/src/controllers/learning-objects.ts  |  4 ++--
 frontend/src/controllers/learning-paths.ts    |  3 ++-
 .../http-error-response-exception.ts          |  4 +++-
 frontend/src/queries/learning-objects.ts      |  4 ++--
 frontend/src/router/index.ts                  |  6 ++---
 .../learning-paths/LearningObjectView.vue     |  2 +-
 .../views/learning-paths/LearningPathPage.vue |  8 ++-----
 9 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/UsingQueryResult.vue b/frontend/src/components/UsingQueryResult.vue
index 5cadf231..583b521b 100644
--- a/frontend/src/components/UsingQueryResult.vue
+++ b/frontend/src/components/UsingQueryResult.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts" generic="T">
-    import {RemoteResource} from "@/services/api-client/remote-resource.ts";
-    import {computed, type MaybeRefOrGetter} from "vue";
+    import {computed} from "vue";
     import {useI18n} from "vue-i18n";
     import type {UseQueryReturnType} from "@tanstack/vue-query";
 
@@ -8,13 +7,12 @@
         queryResult: UseQueryReturnType<T, Error>
     }>()
 
+    const { isLoading, isError, isSuccess, data, error } = props.queryResult;
+
     const { t } = useI18n();
 
-    const isLoading = computed(() => props.queryResult.isFetching);
-    const data = computed(() => props.queryResult.data);
-    const error = computed(() => props.queryResult.error);
     const errorMessage = computed(() => {
-        let errorWithMessage = (error.value as {message: string}) || null;
+        let errorWithMessage = (error as {message: string}) || null;
         return errorWithMessage?.message || JSON.stringify(errorWithMessage)
     });
 </script>
@@ -23,14 +21,14 @@
     <div class="loading-div" v-if="isLoading">
         <v-progress-circular indeterminate></v-progress-circular>
     </div>
-    <div v-if="error">
+    <div v-if="isError">
         <v-empty-state
             icon="mdi-alert-circle-outline"
             :text="errorMessage"
             :title="t('error_title')"
         ></v-empty-state>
     </div>
-    <slot v-if="data" :data="data!"></slot>
+    <slot v-if="isSuccess && data" :data="data"></slot>
 </template>
 
 <style scoped>
diff --git a/frontend/src/controllers/base-controller.ts b/frontend/src/controllers/base-controller.ts
index 7f04151e..d05f579e 100644
--- a/frontend/src/controllers/base-controller.ts
+++ b/frontend/src/controllers/base-controller.ts
@@ -1,41 +1,47 @@
-import { apiConfig } from "@/config.ts";
 import apiClient from "@/services/api-client/api-client.ts";
 import type {AxiosResponse, ResponseType} from "axios";
 import {HttpErrorResponseException} from "@/exception/http-error-response-exception.ts";
 
 export abstract class BaseController {
-    protected baseUrl: string;
+    protected basePath: string;
 
     protected constructor(basePath: string) {
-        this.baseUrl = `${apiConfig.baseUrl}/${basePath}`;
+        this.basePath = basePath;
     }
 
     private assertSuccessResponse(response: AxiosResponse<unknown, unknown>) {
-        if (response.status / 200 !== 2) {
+        if (response.status / 100 !== 2) {
             throw new HttpErrorResponseException(response);
         }
     }
 
+    private absolutePathFor(path: string) {
+        return "/" + this.basePath + path;
+    }
+
     protected async get<T>(path: string, queryParams?: Record<string, any>, responseType?: ResponseType): Promise<T> {
-        let response = await apiClient.get<T>(path, {params: queryParams, responseType});
+        let response = await apiClient.get<T>(
+            this.absolutePathFor(path),
+            {params: queryParams, responseType}
+        );
         this.assertSuccessResponse(response);
         return response.data;
     }
 
     protected async post<T>(path: string, body: unknown): Promise<T> {
-        let response = await apiClient.post<T>(path, body);
+        let response = await apiClient.post<T>(this.absolutePathFor(path), body);
         this.assertSuccessResponse(response);
         return response.data;
     }
 
     protected async delete<T>(path: string): Promise<T> {
-        let response = await apiClient.delete<T>(path)
+        let response = await apiClient.delete<T>(this.absolutePathFor(path))
         this.assertSuccessResponse(response);
         return response.data;
     }
 
     protected async put<T>(path: string, body: unknown): Promise<T> {
-        let response = await apiClient.put<T>(path, body);
+        let response = await apiClient.put<T>(this.absolutePathFor(path), body);
         this.assertSuccessResponse(response);
         return response.data;
     }
diff --git a/frontend/src/controllers/learning-objects.ts b/frontend/src/controllers/learning-objects.ts
index 2866fc3a..df70326b 100644
--- a/frontend/src/controllers/learning-objects.ts
+++ b/frontend/src/controllers/learning-objects.ts
@@ -8,10 +8,10 @@ export class LearningObjectController extends BaseController {
     }
 
     async getMetadata(hruid: string, language: Language, version: number): Promise<LearningObject> {
-        return this.get<LearningObject>(`/learningObject/${hruid}`, {language, version});
+        return this.get<LearningObject>(`/${hruid}`, {language, version});
     }
 
     async getHTML(hruid: string, language: Language, version: number): Promise<Document> {
-        return this.get<Document>(`/learningObject/${hruid}/html`, {language, version}, "document");
+        return this.get<Document>(`/${hruid}/html`, {language, version}, "document");
     }
 }
diff --git a/frontend/src/controllers/learning-paths.ts b/frontend/src/controllers/learning-paths.ts
index 8859902e..19c7d545 100644
--- a/frontend/src/controllers/learning-paths.ts
+++ b/frontend/src/controllers/learning-paths.ts
@@ -2,6 +2,7 @@ import {BaseController} from "@/controllers/base-controller.ts";
 import {LearningPath} from "@/data-objects/learning-path.ts";
 import type {LearningPathDTO} from "@/data-objects/learning-path.ts";
 import type {Language} from "@/data-objects/language.ts";
+import {single} from "@/utils/response-assertions.ts";
 
 export class LearningPathController extends BaseController {
     constructor() {
@@ -18,6 +19,6 @@ export class LearningPathController extends BaseController {
             forGroup: options?.forGroup,
             forStudent: options?.forStudent
         });
-        return dtos.map(dto => LearningPath.fromDTO(dto))
+        return LearningPath.fromDTO(single(dtos));
     }
 }
diff --git a/frontend/src/exception/http-error-response-exception.ts b/frontend/src/exception/http-error-response-exception.ts
index 4999b35d..19d0e231 100644
--- a/frontend/src/exception/http-error-response-exception.ts
+++ b/frontend/src/exception/http-error-response-exception.ts
@@ -1,7 +1,9 @@
 import type {AxiosResponse} from "axios";
 
 export class HttpErrorResponseException extends Error {
+    public statusCode: number;
     constructor(public response: AxiosResponse<unknown, unknown>) {
-        super(response.statusText);
+        super((response.data as {message: string})?.message || JSON.stringify(response.data));
+        this.statusCode = response.status;
     }
 }
diff --git a/frontend/src/queries/learning-objects.ts b/frontend/src/queries/learning-objects.ts
index 5c71255e..93821873 100644
--- a/frontend/src/queries/learning-objects.ts
+++ b/frontend/src/queries/learning-objects.ts
@@ -47,10 +47,10 @@ export function useLearningObjectListForPathQuery(
             let learningObjects = [];
             for (let node of toValue(learningPath).nodesAsList) {
                 learningObjects.push(
-                    learningObjectController.getHTML(node.learningobjectHruid, node.language, node.version)
+                    learningObjectController.getMetadata(node.learningobjectHruid, node.language, node.version)
                 );
             }
-            return learningObjects;
+            return Promise.all(learningObjects);
         },
         enabled: () => Boolean(toValue(learningPath)),
     });
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 2cdedca6..1241a5d3 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -12,7 +12,6 @@ import UserClasses from "@/views/classes/UserClasses.vue";
 import UserAssignments from "@/views/classes/UserAssignments.vue";
 import authState from "@/services/auth/auth-service.ts";
 import LearningPathPage from "@/views/learning-paths/LearningPathPage.vue";
-import path from "path";
 import LearningPathSearchPage from "@/views/learning-paths/LearningPathSearchPage.vue";
 import UserHomePage from "@/views/homepage/UserHomePage.vue";
 import SingleTheme from "@/views/SingleTheme.vue";
@@ -109,16 +108,15 @@ const router = createRouter({
         },
         {
             path: "/learningPath",
-            component: MenuBar,
             children: [
                 {
-                    path: "/search",
+                    path: "search",
                     name: "LearningPathSearchPage",
                     component: LearningPathSearchPage,
                     meta: { requiresAuth: true }
                 },
                 {
-                    path: "/:hruid/:language",
+                    path: ":hruid/:language",
                     name: "LearningPath",
                     component: LearningPathPage,
                     props: true,
diff --git a/frontend/src/views/learning-paths/LearningObjectView.vue b/frontend/src/views/learning-paths/LearningObjectView.vue
index 4c86dbb6..b03c5cb1 100644
--- a/frontend/src/views/learning-paths/LearningObjectView.vue
+++ b/frontend/src/views/learning-paths/LearningObjectView.vue
@@ -6,7 +6,7 @@ import UsingQueryResult from "@/components/UsingQueryResult.vue";
 
 const props = defineProps<{hruid: string, language: Language, version: number}>()
 
-const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(props.hruid, props.language, props.version);
+const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(() => props.hruid, () => props.language, () => props.version);
 
 </script>
 
diff --git a/frontend/src/views/learning-paths/LearningPathPage.vue b/frontend/src/views/learning-paths/LearningPathPage.vue
index 48bc47ae..5a0fc4db 100644
--- a/frontend/src/views/learning-paths/LearningPathPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathPage.vue
@@ -27,10 +27,10 @@
 
     const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, typedQuery.value);
 
-    const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data.value);
+    const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
 
     const nodesList: ComputedRef<LearningPathNode[] | null> = computed(() =>
-        (!learningPathQueryResult.isPending && !learningPathQueryResult.isError) ? learningPathQueryResult.data.value?.nodesAsList : null
+        learningPathQueryResult.isSuccess ? learningPathQueryResult.data.value?.nodesAsList : null
     );
 
     const currentNode = computed(() => {
@@ -107,7 +107,6 @@
 </script>
 
 <template>
-    <v-main>
         <using-query-result
             :query-result="learningPathQueryResult"
             v-slot="learningPath: {data: LearningPath}"
@@ -125,7 +124,6 @@
                     </template>
                 </v-list-item>
                 <v-divider></v-divider>
-
                 <div v-if="props.learningObjectHruid">
                     <using-query-result
                         :query-result="learningObjectListQueryResult"
@@ -160,7 +158,6 @@
                     <learning-path-search-field></learning-path-search-field>
                 </div>
             </div>
-
             <learning-object-view
                 :hruid="currentNode.learningobjectHruid"
                 :language="currentNode.language"
@@ -186,7 +183,6 @@
                 </v-btn>
             </div>
         </using-query-result>
-    </v-main>
 </template>
 
 <style scoped>