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

chore(frontend): Tweaks

Browse source
This commit is contained in:
Tibo De Peuter 2025-05-19 20:53:05 +02:00
parent e28a57754f
commit f5bf11d812
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
3 changed files with 30 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<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';
const route = useRoute(); const route = useRoute();
const props = defineProps<{ const props = defineProps<{
path: LearningPath; path: LearningPath;
@ -19,6 +19,7 @@
{{ path.title }} {{ path.title }}
</v-expansion-panel-title> </v-expansion-panel-title>
<v-expansion-panel-text> <v-expansion-panel-text>
<v-lazy>
<using-query-result <using-query-result
:query-result="useLearningObjectListForPathQuery(props.path)" :query-result="useLearningObjectListForPathQuery(props.path)"
v-slot="learningObjects: { data: LearningObject[] }" v-slot="learningObjects: { data: LearningObject[] }"
@ -33,12 +34,13 @@
path: `/discussion-reload/${props.path.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"
:active="node.key === props.activeObjectId" :active="node.key === props.activeObjectId"
> >
</v-list-item> </v-list-item>
</template> </template>
</using-query-result> </using-query-result>
</v-lazy>
</v-expansion-panel-text> </v-expansion-panel-text>
</v-expansion-panel> </v-expansion-panel>
</template> </template>

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

@ -44,8 +44,7 @@
:path="learningPath" :path="learningPath"
:activeObjectId="'' as string" :activeObjectId="'' as string"
:key="learningPath.hruid" :key="learningPath.hruid"
> />
</DiscussionSideBarElement>
</using-query-result> </using-query-result>
</v-expansion-panels> </v-expansion-panels>
</div> </div>

77
frontend/src/views/discussions/SingleDiscussion.vue
View file

@ -1,23 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { Language } from "@/data-objects/language.ts"; import { Language } from '@/data-objects/language.ts';
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts"; import { computed, type ComputedRef, watch } from 'vue';
import { computed, type ComputedRef, ref, watch } from "vue"; import { useRoute } from 'vue-router';
import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts"; import { useGetLearningPathQuery } from '@/queries/learning-paths.ts';
import { useRoute } from "vue-router"; import UsingQueryResult from '@/components/UsingQueryResult.vue';
import { useGetAllLearningPaths, useGetLearningPathQuery } from "@/queries/learning-paths.ts"; import { LearningPathNode } from '@/data-objects/learning-paths/learning-path-node.ts';
import { useLearningObjectListForPathQuery } from "@/queries/learning-objects.ts"; import { useQuestionsQuery } from '@/queries/questions';
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import type { QuestionsResponse } from '@/controllers/questions';
import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts"; import type { LearningObjectIdentifierDTO } from '@dwengo-1/common/interfaces/learning-content';
import { useQuestionsQuery } from "@/queries/questions"; import QandA from '@/components/QandA.vue';
import type { QuestionsResponse } from "@/controllers/questions"; import type { QuestionDTO } from '@dwengo-1/common/interfaces/question';
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content"; import DiscussionsSideBar from '@/components/DiscussionsSideBar.vue';
import QandA from "@/components/QandA.vue"; import QuestionBox from '@/components/QuestionBox.vue';
import type { QuestionDTO } from "@dwengo-1/common/interfaces/question"; import { useI18n } from 'vue-i18n';
import DiscussionsSideBar from "@/components/DiscussionsSideBar.vue";
import QuestionBox from "@/components/QuestionBox.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -46,50 +43,6 @@
return undefined; return undefined;
}); });
const allLearningPathsResult = useGetAllLearningPaths(props.language);
async function learningObjectHasQuestions(learningObject: LearningObject): Promise<boolean> {
const loid = {
hruid: learningObject.key,
version: learningObject.version,
language: learningObject.language,
} as LearningObjectIdentifierDTO;
const { data } = useQuestionsQuery(loid);
return (data.value?.questions.length ?? 0) > 0;
}
async function learningPathHasQuestions(learningPath: LearningPath): Promise<boolean> {
const learningPathQueryResult = useGetLearningPathQuery(
learningPath.hruid,
learningPath.language as Language,
forGroup,
);
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
const learningObjects = learningObjectListQueryResult.data.value || [];
const hasQuestions = await Promise.all(
learningObjects.map(async (learningObject) => learningObjectHasQuestions(learningObject)),
);
return hasQuestions.some((hasQuestion) => hasQuestion);
}
const questionedLearningPaths = ref<LearningPath[] | null>(null);
watch(
() => allLearningPathsResult.data.value,
async (learningPaths) => {
if (learningPaths) {
const pathsWithQuestions = await Promise.all(
learningPaths.map(async (learningPath) => {
const hasQuestions = await learningPathHasQuestions(learningPath);
return hasQuestions ? learningPath : null;
}),
);
questionedLearningPaths.value = pathsWithQuestions.filter((path) => path !== null);
}
},
{ immediate: true },
);
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup); const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup);
const nodesList: ComputedRef<LearningPathNode[] | null> = computed( const nodesList: ComputedRef<LearningPathNode[] | null> = computed(