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

feat(frontend): progress van assignment wordt ook getoond voor studenten

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-04-19 14:48:13 +02:00
parent 5b17bad368
commit 1d29adaa31
7 changed files with 138 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,14 @@
<script setup lang="ts">
import auth from "@/services/auth/auth-service.ts";
import {computed, ref} from "vue";
import {computed, reactive, type Ref, ref, watchEffect} from "vue";
import StudentAssignment from "@/views/assignments/StudentAssignment.vue";
import TeacherAssignment from "@/views/assignments/TeacherAssignment.vue";
import {useRoute} from "vue-router";
import type {Language} from "@/data-objects/language.ts";
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
const role = auth.authState.activeRole;
const isTeacher = computed(() => role === 'teacher');
@ -13,18 +17,57 @@ const route = useRoute();
const classId = ref<string>(route.params.classId as string);
const assignmentId = ref(Number(route.params.id));
function useGroupsWithProgress(
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<string>
): { groupProgressMap: Record<string, number> } {
const groupProgressMap: Record<string, number> = reactive({});
watchEffect(() => {
// Clear existing entries to avoid stale data
for (const key in groupProgressMap) {
delete groupProgressMap[key];
}
const lang = language.value as Language;
groups.value.forEach((group) => {
const groupKey = group.groupNumber.toString();
const query = useGetLearningPathQuery(hruid.value, lang, {
forGroup: groupKey,
});
const data = query.data.value;
groupProgressMap[groupKey] = data ? calculateProgress(data) : 0;
});
});
return {
groupProgressMap,
};
}
function calculateProgress(lp: LearningPath): number {
return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
}
</script>
<template>
<TeacherAssignment
:class-id="classId"
:assignment-id="assignmentId"
:use-groups-with-progress="useGroupsWithProgress"
v-if="isTeacher"
>
</TeacherAssignment>
<StudentAssignment
:class-id="classId"
:assignment-id="assignmentId"
:use-groups-with-progress="useGroupsWithProgress"
v-else
>
</StudentAssignment>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import {ref, computed, defineProps} from "vue";
import {ref, computed, defineProps, type Ref} from "vue";
import auth from "@/services/auth/auth-service.ts";
import {useI18n} from "vue-i18n";
import {useAssignmentQuery} from "@/queries/assignments.ts";
@ -10,14 +10,21 @@ import {useStudentsByUsernamesQuery} from "@/queries/students.ts";
import {useGroupsQuery} from "@/queries/groups.ts";
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts";
import type {Language} from "@/data-objects/language.ts";
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
const props = defineProps<{
classId: string
assignmentId: number
assignmentId: number,
useGroupsWithProgress: (
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<Language>
) => { groupProgressMap: Record<string, number> };
}>();
const {t, locale} = useI18n();
const language = computed(() => locale.value);
const language = ref<Language>(locale.value as Language);
const learningPath = ref();
// Get the user's username/id
const username = asyncComputed(async () => {
const user = await auth.loadUser();
@ -25,13 +32,16 @@ const username = asyncComputed(async () => {
});
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
const submitted = ref(false);//TODO: update by fetching submissions and check if group submitted
const lpQueryResult = useGetLearningPathQuery(
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
computed(() => language.value as Language)
computed(() => language.value)
);
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
const group = computed(() =>
groupsQueryResult?.data.value?.groups.find(group =>
@ -39,6 +49,18 @@ const group = computed(() =>
)
);
const groupArray = computed(() => (group.value ? [group.value] : []));
const progressValue = ref(0);
/* Crashes right now cause api data has inexistent hruid TODO: uncomment later and use it in progress bar
Const {groupProgressMap} = props.useGroupsWithProgress(
groupArray,
learningPath,
language
);
*/
// Assuming group.value.members is a list of usernames TODO: case when it's StudentDTO's
const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as string[]);
@ -71,6 +93,7 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
</v-chip>
</div>
<v-card-title class="text-h4">{{ data.assignment.title }}</v-card-title>
<v-card-subtitle class="subtitle-section">
<using-query-result
:query-result="lpQueryResult"
@ -89,6 +112,25 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
<v-card-text class="description">
{{ data.assignment.description }}
</v-card-text>
<v-card-text>
<v-row align="center" no-gutters>
<v-col cols="auto">
<span class="progress-label">{{ t("progress") + ": " }}</span>
</v-col>
<v-col>
<v-progress-linear
:model-value="progressValue"
color="primary"
height="20"
class="progress-bar"
>
<template v-slot:default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
</v-col>
</v-row>
</v-card-text>
<v-card-text class="group-section">
<h3>{{ t("group") }}</h3>
@ -101,7 +143,6 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
</div>
</v-card-text>
</v-card>
</using-query-result>
</div>
@ -110,5 +151,14 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
<style scoped>
@import "@/assets/assignment.css";
.progress-label {
font-weight: bold;
margin-right: 5px;
}
.progress-bar {
width: 40%;
}
</style>

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

@ -1,19 +1,23 @@
<script setup lang="ts">
import {computed, defineProps, reactive, type Ref, ref, watchEffect} from "vue";
import {computed, defineProps, type Ref, ref} from "vue";
import {useI18n} from "vue-i18n";
import {useAssignmentQuery, useDeleteAssignmentMutation} from "@/queries/assignments.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import {useGroupsQuery} from "@/queries/groups.ts";
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts";
import type {Language} from "@/data-objects/language.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
import router from "@/router";
import type {AssignmentResponse} from "@/controllers/assignments.ts";
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
const props = defineProps<{
classId: string
assignmentId: number
assignmentId: number,
useGroupsWithProgress: (
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<Language>
) => { groupProgressMap: Record<string, number> };
}>();
const {t, locale} = useI18n();
@ -21,43 +25,6 @@ const language = computed(() => locale.value);
const groups = ref();
const learningPath = ref();
function useGroupsWithProgress(
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<string>
): { groupProgressMap: Record<string, number> } {
const groupProgressMap: Record<string, number> = reactive({});
watchEffect(() => {
// Clear existing entries to avoid stale data
for (const key in groupProgressMap) {
delete groupProgressMap[key];
}
const lang = language.value as Language;
groups.value.forEach((group) => {
const groupKey = group.groupNumber.toString();
const query = useGetLearningPathQuery(hruid.value, lang, {
forGroup: groupKey,
});
const data = query.data.value;
groupProgressMap[groupKey] = data ? calculateProgress(data) : 0;
});
});
return {
groupProgressMap,
};
}
function calculateProgress(lp: LearningPath): number {
return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
}
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
// Get learning path object
@ -70,8 +37,8 @@ const lpQueryResult = useGetLearningPathQuery(
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
groups.value = groupsQueryResult.data.value?.groups;
/* Crashes right now cause api data has inexistent hruid TODO: uncomment later
Const {groupProgressMap} = useGroupsWithProgress(
/* 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
@ -200,7 +167,7 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
variant="text"
class="text-capitalize"
>
{{ item.submitted ? t('see-submission') : t('not-submitted') }}
{{ item.submitted ? t('see-submission') : t('no-submission') }}
</v-btn>
</template>