tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

refactor(backend): LearningPathSearchPage aangepast zodat ze TanStack Query gebruikt.

Browse source
This commit is contained in:
Gerald Schmittinger 2025-03-31 23:16:27 +02:00
parent 12b9f31f5f
commit a17e2b2793
1 changed files with 6 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/views/learning-paths/LearningPathSearchPage.vue
View file

@ -1,13 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import {loadResource, remoteResource} from "@/services/api-client/remote-resource.ts";
import type {LearningPath} from "@/data-objects/learning-path.ts"; import type {LearningPath} from "@/data-objects/learning-path.ts";
import {useRoute, useRouter} from "vue-router"; import {useRoute, useRouter} from "vue-router";
import {computed, watch} from "vue"; import {computed} from "vue";
import {searchLearningPaths} from "@/services/learning-content/learning-path-service.ts";
import {useI18n} from "vue-i18n"; import {useI18n} from "vue-i18n";
import UsingRemoteResource from "@/components/UsingRemoteResource.vue";
import {convertBase64ToImageSrc} from "@/utils/base64ToImage.ts"; import {convertBase64ToImageSrc} from "@/utils/base64ToImage.ts";
import LearningPathSearchField from "@/components/LearningPathSearchField.vue"; import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
import {useSearchLearningPathQuery} from "@/queries/learning-paths.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -15,12 +14,7 @@
const query = computed(() => route.query.query as string | null); const query = computed(() => route.query.query as string | null);
const searchResultsResource = remoteResource<LearningPath[]>(); const searchQueryResults = useSearchLearningPathQuery(query);
watch(query, () => {
if (query.value) {
loadResource(searchResultsResource, searchLearningPaths(query.value))
}
}, {immediate: true});
</script> </script>
<template> <template>
@ -28,7 +22,7 @@
<learning-path-search-field class="search-field"></learning-path-search-field> <learning-path-search-field class="search-field"></learning-path-search-field>
</div> </div>
<using-remote-resource :resource="searchResultsResource" v-slot="{ data }: {data: LearningPath[]}"> <using-query-result :query-result="searchQueryResults" v-slot="{ data }: {data: LearningPath[]}">
<div class="results-grid" v-if="data.length > 0"> <div class="results-grid" v-if="data.length > 0">
<v-card <v-card
class="learning-path-card" class="learning-path-card"
@ -57,7 +51,7 @@
:text="t('noLearningPathsFoundDescription')" :text="t('noLearningPathsFoundDescription')"
></v-empty-state> ></v-empty-state>
</div> </div>
</using-remote-resource> </using-query-result>
<div content="empty-state-container"> <div content="empty-state-container">
<v-empty-state <v-empty-state
v-if="!query" v-if="!query"