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

feat: leerkracht kan progress van groepen zien

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-04 13:26:19 +02:00
parent 509dd6bfab
commit 195e192598
4 changed files with 96 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/components/GroupProgressRow.vue Normal file
View file

@ -0,0 +1,45 @@
<script setup lang="ts">
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import { computed } from "vue";
import type { Language } from "@/data-objects/language.ts";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
const props = defineProps<{
groupNumber: number;
learningPath: string;
language: Language;
assignmentId: number;
classId: string;
}>();
function calculateProgress(lp: LearningPath): number {
return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
}
const query = useGetLearningPathQuery(
() => props.learningPath,
() => props.language,
() => ({
forGroup: props.groupNumber,
assignmentNo: props.assignmentId,
classId: props.classId,
}),
);
const progress = computed(() => {
if (!query.data.value) return 0;
return calculateProgress(query.data.value);
});
</script>
<template>
<v-progress-linear
:model-value="progress"
color="blue-grey"
height="25"
>
<template v-slot:default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
</template>

35
frontend/src/views/assignments/SingleAssignment.vue
View file

@ -19,35 +19,33 @@
function useGroupsWithProgress(
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<string>,
): { groupProgressMap: Map<number, number> } {
const groupProgressMap: Map<number, number> = new Map<number, number>();
language: Ref<Language>,
): { groupProgressMap: Map<number, number>; } {
const groupProgressMap = ref(new Map<number, number>());
watchEffect(() => {
// Clear existing entries to avoid stale data
groupProgressMap.clear();
groupProgressMap.value.clear();
const lang = ref(language.value as Language);
groups.value.forEach((group) => {
groups?.value.forEach((group) => {
const groupKey = group.groupNumber;
const forGroup = ref({
forGroup: groupKey,
assignmentNo: assignmentId,
classId: classId,
});
const query = useGetLearningPathQuery(hruid.value, lang, forGroup);
const query = useGetLearningPathQuery(
hruid,
language,
() => ({
forGroup: groupKey,
assignmentNo: assignmentId.value,
classId: classId.value,
})
);
const data = query.data.value;
groupProgressMap.set(groupKey, data ? calculateProgress(data) : 0);
groupProgressMap.value.set(groupKey, data ? calculateProgress(data) : 0);
});
});
return {
groupProgressMap,
};
return { groupProgressMap: groupProgressMap.value };
}
function calculateProgress(lp: LearningPath): number {
@ -59,7 +57,6 @@
<TeacherAssignment
:class-id="classId"
:assignment-id="assignmentId"
:use-groups-with-progress="useGroupsWithProgress"
v-if="isTeacher"
>
</TeacherAssignment>

8
frontend/src/views/assignments/StudentAssignment.vue
View file

@ -22,8 +22,8 @@
) => { groupProgressMap: Map<number, number> };
}>();
const { t, locale } = useI18n();
const language = ref<Language>(locale.value as Language);
const { t } = useI18n();
const lang = ref<Language>();
const learningPath = ref();
// Get the user's username/id
const username = asyncComputed(async () => {
@ -38,7 +38,7 @@
const lpQueryResult = useGetLearningPathQuery(
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
computed(() => language.value),
computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
);
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
@ -100,7 +100,7 @@ language
>
<v-btn
v-if="lpData"
:to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}?forGroup=${group?.groupNumber}&assignmentNo=${assignmentId}&classId=${classId}`"
:to="`/learningPath/${lpData.hruid}/${assignmentQueryResult.data.value?.assignment?.language}/${lpData.startNode.learningobjectHruid}?forGroup=${group?.groupNumber}&assignmentNo=${assignmentId}&classId=${classId}`"
variant="tonal"
color="primary"
>

70
frontend/src/views/assignments/TeacherAssignment.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, type Ref, ref } from "vue";
import {computed, type Ref, ref, watchEffect} from "vue";
import { useI18n } from "vue-i18n";
import { useAssignmentQuery, useDeleteAssignmentMutation } from "@/queries/assignments.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
@ -7,54 +7,47 @@
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import type { Language } from "@/data-objects/language.ts";
import type { AssignmentResponse } from "@/controllers/assignments.ts";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import GroupProgressRow from "@/components/GroupProgressRow.vue";
const props = defineProps<{
classId: string;
assignmentId: number;
useGroupsWithProgress: (
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<Language>,
) => { groupProgressMap: Map<number, number> };
}>();
const { t, locale } = useI18n();
const language = computed(() => locale.value);
const groups = ref();
const { t } = useI18n();
const lang = ref();
const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
const learningPath = ref();
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
// Get learning path object
const lpQueryResult = useGetLearningPathQuery(
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
computed(() => language.value as Language),
computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
);
// Get all the groups withing the assignment
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
groups.value = groupsQueryResult.data.value?.groups;
groups.value = groupsQueryResult.data.value?.groups ?? [];
watchEffect(() => {
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
});
/* Crashes right now cause api data has inexistent hruid TODO: uncomment later and use it in progress bar
Const {groupProgressMap} = props.useGroupsWithProgress(
groups,
learningPath,
language
);
*/
const allGroups = computed(() => {
const groups = groupsQueryResult.data.value?.groups;
if (!groups) return [];
const groups = groupsQueryResult.data.value?.groups;
return groups.map((group) => ({
name: `${t("group")} ${group.groupNumber}`,
progress: 0, //GroupProgressMap[group.groupNumber],
members: group.members,
submitted: false, //TODO: fetch from submission
}));
});
return groups?.map((group) => ({
groupNo: group.groupNumber,
name: `${t("group")} ${group.groupNumber}`,
members: group.members,
submitted: false, //TODO: fetch from submission
}));
});
const dialog = ref(false);
const selectedGroup = ref({});
@ -121,7 +114,7 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
>
<v-btn
v-if="lpData"
:to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
:to="`/learningPath/${lpData.hruid}/${assignmentQueryResult.data.value?.assignment?.language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
variant="tonal"
color="primary"
>
@ -154,17 +147,16 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
</template>
<template #[`item.progress`]="{ item }">
<v-progress-linear
:model-value="item.progress"
color="blue-grey"
height="25"
>
<template v-slot:default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
<GroupProgressRow
:group-number="item.groupNo"
:learning-path="learningPath"
:language="lang"
:assignment-id="assignmentId"
:class-id="classId"
/>
</template>
<template #[`item.submission`]="{ item }">
<v-btn
:to="item.submitted ? `${props.assignmentId}/submissions/` : undefined"