tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
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

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

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

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

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