Merge remote-tracking branch 'origin/feat/pagina-om-leerpaden-te-bekijken-#41' into feat/pagina-om-leerpaden-te-bekijken-#41

frontend/src/components/BrowseThemes.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
     import ThemeCard from "@/components/ThemeCard.vue";
-    import {ref, watchEffect, computed, type Ref} from "vue";
+    import { ref, watchEffect, computed, type Ref } from "vue";
     import { useI18n } from "vue-i18n";
     import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
     import { useThemeQuery } from "@/queries/themes.ts";
-    import type {Theme} from "@/data-objects/theme.ts";
+    import type { Theme } from "@/data-objects/theme.ts";
 
     const props = defineProps({
         selectedTheme: { type: String, required: true },
@@ -17,7 +17,7 @@
     const { data: allThemes, isLoading, error } = useThemeQuery(language);
 
     const allCards: Ref<Theme[]> = ref([]);
-    const cards: Ref<Theme[]>  = ref([]);
+    const cards: Ref<Theme[]> = ref([]);
 
     watchEffect(() => {
         const themes: Theme[] = allThemes.value ?? [];

frontend/src/components/LearningPathSearchField.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-    import {useI18n} from "vue-i18n";
-    import {useRoute, useRouter} from "vue-router";
-    import {computed, ref} from "vue";
+    import { useI18n } from "vue-i18n";
+    import { useRoute, useRouter } from "vue-router";
+    import { computed, ref } from "vue";
     const route = useRoute();
     const router = useRouter();
     const { t } = useI18n();
@@ -10,7 +10,7 @@
 
     const query = computed({
         get: () => route.query.query as string | null,
-        set: async (newValue) => router.push({path: SEARCH_PATH, query: {query: newValue}})
+        set: async (newValue) => router.push({ path: SEARCH_PATH, query: { query: newValue } }),
     });
 
     const queryInput = ref(query.value);
@@ -31,6 +31,4 @@
     ></v-text-field>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

frontend/src/components/LearningPathsGrid.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
+    import { convertBase64ToImageSrc } from "@/utils/base64ToImage.ts";
+    import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
+    import { useI18n } from "vue-i18n";
 
-import {convertBase64ToImageSrc} from "@/utils/base64ToImage.ts";
-import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
-import {useI18n} from "vue-i18n";
-
-const { t } = useI18n();
-const props = defineProps<{learningPaths: LearningPath[]}>();
-
+    const { t } = useI18n();
+    const props = defineProps<{ learningPaths: LearningPath[] }>();
 </script>
 
 <template>
-    <div class="results-grid" v-if="props.learningPaths.length > 0">
+    <div
+        class="results-grid"
+        v-if="props.learningPaths.length > 0"
+    >
         <v-card
             class="learning-path-card"
             link
@@ -27,12 +28,15 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
             <v-card-title class="learning-path-title">{{ learningPath.title }}</v-card-title>
             <v-card-subtitle>
                 <v-icon icon="mdi-human-male-boy"></v-icon>
-                <span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t('yearsAge') }}</span>
+                <span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t("yearsAge") }}</span>
             </v-card-subtitle>
             <v-card-text>{{ learningPath.description }}</v-card-text>
         </v-card>
     </div>
-    <div content="empty-state-container" v-else>
+    <div
+        content="empty-state-container"
+        v-else
+    >
         <v-empty-state
             icon="mdi-emoticon-sad-outline"
             :title="t('noLearningPathsFound')"

frontend/src/components/UsingQueryResult.vue

@@ -1,24 +1,27 @@
 <script setup lang="ts" generic="T">
-    import {computed} from "vue";
-    import {useI18n} from "vue-i18n";
-    import type {UseQueryReturnType} from "@tanstack/vue-query";
+    import { computed } from "vue";
+    import { useI18n } from "vue-i18n";
+    import type { UseQueryReturnType } from "@tanstack/vue-query";
 
     const props = defineProps<{
-        queryResult: UseQueryReturnType<T, Error>
-    }>()
+        queryResult: UseQueryReturnType<T, Error>;
+    }>();
 
     const { isLoading, isError, isSuccess, data, error } = props.queryResult;
 
     const { t } = useI18n();
 
     const errorMessage = computed(() => {
-        const errorWithMessage = (error.value as {message: string}) || null;
-        return errorWithMessage?.message || JSON.stringify(errorWithMessage)
+        const errorWithMessage = (error.value as { message: string }) || null;
+        return errorWithMessage?.message || JSON.stringify(errorWithMessage);
     });
 </script>
 
 <template>
-    <div class="loading-div" v-if="isLoading">
+    <div
+        class="loading-div"
+        v-if="isLoading"
+    >
         <v-progress-circular indeterminate></v-progress-circular>
     </div>
     <div v-if="isError">
@@ -28,12 +31,15 @@
             :title="t('error_title')"
         ></v-empty-state>
     </div>
-    <slot v-if="isSuccess && data" :data="data"></slot>
+    <slot
+        v-if="isSuccess && data"
+        :data="data"
+    ></slot>
 </template>
 
 <style scoped>
-  .loading-div {
-      padding: 20px;
-      text-align: center;
-  }
+    .loading-div {
+        padding: 20px;
+        text-align: center;
+    }
 </style>