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

chore(frontend): Lazy and autoexpand

Browse source
This commit is contained in:
Tibo De Peuter 2025-05-19 16:18:01 +02:00
parent 90050a2d87
commit ad1e5a30ae
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
2 changed files with 22 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/components/DiscussionSideBarElement.vue
View file

@ -1,44 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import type { LearningObject } from "@/data-objects/learning-objects/learning-object"; import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
import type { LearningPath } from "@/data-objects/learning-paths/learning-path"; import type { LearningPath } from '@/data-objects/learning-paths/learning-path';
import { useLearningObjectListForPathQuery } from "@/queries/learning-objects"; import { useLearningObjectListForPathQuery } from '@/queries/learning-objects';
import { useRoute } from "vue-router"; import { useRoute } from 'vue-router';
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from '@/components/UsingQueryResult.vue';
import { ref, watchEffect } from "vue";
const route = useRoute(); const route = useRoute();
const props = defineProps<{ const props = defineProps<{
path: LearningPath; path: LearningPath;
activeObjectId: string; 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> </script>
<template> <template>
<v-expansion-panel> <v-expansion-panel :value="props.path.hruid">
<v-expansion-panel-title> <v-expansion-panel-title>
{{ path.title }} {{ path.title }}
</v-expansion-panel-title> </v-expansion-panel-title>
<v-expansion-panel-text> <v-expansion-panel-text>
<using-query-result <using-query-result
:query-result="learningObjectListQueryResult" :query-result="useLearningObjectListForPathQuery(props.path)"
v-slot="learningObjects: { data: LearningObject[] }" v-slot="learningObjects: { data: LearningObject[] }"
> >
<template <template
@ -48,7 +31,7 @@
<v-list-item <v-list-item
link link
:to="{ :to="{
path: `/discussion-reload/${currentPath.hruid}/${node.language}/${node.key}`, path: `/discussion-reload/${props.path.hruid}/${node.language}/${node.key}`,
query: route.query, query: route.query,
}" }"
:title="node.title" :title="node.title"

8
frontend/src/components/DiscussionsSideBar.vue
View file

@ -5,17 +5,21 @@
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useGetAllLearningPaths } from "@/queries/learning-paths.ts"; import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRoute } from 'vue-router';
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const route = useRoute();
const navigationDrawerShown = ref(true); const navigationDrawerShown = ref(true);
const currentLocale = ref(locale.value); const currentLocale = ref(locale.value);
const expanded = ref([route.params.hruid])
watch(locale, (newLocale) => { watch(locale, (newLocale) => {
currentLocale.value = newLocale; currentLocale.value = newLocale;
}); });
const allLearningPathsResult = useGetAllLearningPaths(() => currentLocale.value); const allLearningPathsResult = useGetAllLearningPaths(() => currentLocale.value);
</script> </script>
<template> <template>
@ -31,7 +35,9 @@
</template> </template>
</v-list-item> </v-list-item>
<v-divider></v-divider> <v-divider></v-divider>
<v-expansion-panels> <v-expansion-panels
v-model="expanded"
>
<using-query-result <using-query-result
:query-result="allLearningPathsResult" :query-result="allLearningPathsResult"
v-slot="learningPaths: { data: LearningPath[] }" v-slot="learningPaths: { data: LearningPath[] }"