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

fix: linting + small fixes

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-04 16:51:48 +02:00
parent 5facb54290
commit 0f1009ba43
6 changed files with 150 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/components/GroupProgressRow.vue
View file

@ -1,37 +1,37 @@
<script setup lang="ts"> <script setup lang="ts">
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import { computed } from "vue"; import { computed } from "vue";
import type { Language } from "@/data-objects/language.ts"; import type { Language } from "@/data-objects/language.ts";
import {calculateProgress} from "@/utils/assignment-utils.ts"; import { calculateProgress } from "@/utils/assignment-utils.ts";
const props = defineProps<{ const props = defineProps<{
groupNumber: number; groupNumber: number;
learningPath: string; learningPath: string;
language: Language; language: Language;
assignmentId: number; assignmentId: number;
classId: string; classId: string;
}>(); }>();
const query = useGetLearningPathQuery( const query = useGetLearningPathQuery(
() => props.learningPath, () => props.learningPath,
() => props.language, () => props.language,
() => ({ () => ({
forGroup: props.groupNumber, forGroup: props.groupNumber,
assignmentNo: props.assignmentId, assignmentNo: props.assignmentId,
classId: props.classId, classId: props.classId,
}), }),
); );
const progress = computed(() => { const progress = computed(() => {
if (!query.data.value) return 0; if (!query.data.value) return 0;
return calculateProgress(query.data.value); return calculateProgress(query.data.value);
}); });
const progressColor = computed(() => { const progressColor = computed(() => {
if (progress.value < 50) return "error"; if (progress.value < 50) return "error";
if (progress.value < 80) return "warning"; if (progress.value < 80) return "warning";
return "success"; return "success";
}); });
</script> </script>
<template> <template>

45
frontend/src/components/GroupSubmissionStatus.vue
View file

@ -1,27 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import type {Language} from "@/data-objects/language.ts"; import { useI18n } from "vue-i18n";
import {useI18n} from "vue-i18n"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts";
import {useAssignmentSubmissionsQuery} from "@/queries/assignments.ts"; import type { SubmissionsResponse } from "@/controllers/submissions.ts";
import type {SubmissionsResponse} from "@/controllers/submissions.ts";
const props = defineProps<{ const props = defineProps<{
lpHruid: string, group: object;
group: object; assignmentId: number;
assignmentId: number; classId: string;
classId: string; goToGroupSubmissionLink: (groupNo: number) => void;
language: Language; }>();
goToGroupSubmissionLink: (groupNo: number) => void;
}>();
const {t} = useI18n(); const { t } = useI18n();
// Call the submissions query const submissionsQuery = useAssignmentSubmissionsQuery(
const submissionsQuery = useAssignmentSubmissionsQuery( () => props.classId,
() => props.classId, () => props.assignmentId,
() => props.assignmentId, () => props.group.originalGroupNo,
() => props.group.originalGroupNo, // Using the classId for both class and group-related data () => true,
() => true );
);
</script> </script>
<template> <template>
@ -30,11 +26,12 @@ const submissionsQuery = useAssignmentSubmissionsQuery(
v-slot="{ data }: { data: SubmissionsResponse }" v-slot="{ data }: { data: SubmissionsResponse }"
> >
<v-btn <v-btn
:color="(data.submissions.length > 0) ? 'green' : 'red'" :color="data.submissions.length > 0 ? 'green' : 'red'"
variant="text" variant="text"
:to="(data.submissions.length > 0) ? goToGroupSubmissionLink(props.group.groupNo) : undefined" :to="data.submissions.length > 0 ? goToGroupSubmissionLink(props.group.groupNo) : undefined"
:disabled="data.submissions.length === 0"
> >
{{ (data.submissions.length > 0) ? t("see-submission") : t("no-submission")}} {{ data.submissions.length > 0 ? t("see-submission") : t("no-submission") }}
</v-btn> </v-btn>
</using-query-result> </using-query-result>
</template> </template>

2
frontend/src/utils/assignment-utils.ts
View file

@ -1,4 +1,4 @@
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts"; import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
export function calculateProgress(lp: LearningPath): number { export function calculateProgress(lp: LearningPath): number {
return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100; return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;

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

@ -11,7 +11,6 @@
const route = useRoute(); const route = useRoute();
const classId = ref<string>(route.params.classId as string); const classId = ref<string>(route.params.classId as string);
const assignmentId = ref(Number(route.params.id)); const assignmentId = ref(Number(route.params.id));
</script> </script>
<template> <template>

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

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, computed, type Ref, watchEffect} from "vue"; import { ref, computed, watchEffect } from "vue";
import auth from "@/services/auth/auth-service.ts"; import auth from "@/services/auth/auth-service.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useAssignmentQuery } from "@/queries/assignments.ts"; import { useAssignmentQuery } from "@/queries/assignments.ts";
@ -10,8 +10,7 @@ import {ref, computed, type Ref, watchEffect} from "vue";
import { useGroupsQuery } from "@/queries/groups.ts"; import { useGroupsQuery } from "@/queries/groups.ts";
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import type { Language } from "@/data-objects/language.ts"; import type { Language } from "@/data-objects/language.ts";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group"; import { calculateProgress } from "@/utils/assignment-utils.ts";
import {calculateProgress} from "@/utils/assignment-utils.ts";
const props = defineProps<{ const props = defineProps<{
classId: string; classId: string;
@ -46,13 +45,10 @@ import {calculateProgress} from "@/utils/assignment-utils.ts";
...group, ...group,
groupNo: index + 1, // Renumbered index groupNo: index + 1, // Renumbered index
})) }))
.find((group) => .find((group) => group.members?.some((m) => m.username === username.value));
group.members?.some((m) => m.username === username.value),
);
}); });
watchEffect(() => {
watchEffect(() => {
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath; learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
lang.value = assignmentQueryResult.data.value?.assignment?.language as Language; lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
}); });
@ -147,7 +143,6 @@ watchEffect(() => {
</v-progress-linear> </v-progress-linear>
</using-query-result> </using-query-result>
</v-card-text> </v-card-text>
</v-card-text> </v-card-text>
<v-card-text class="group-section"> <v-card-text class="group-section">
@ -171,11 +166,6 @@ watchEffect(() => {
<style scoped> <style scoped>
@import "@/assets/assignment.css"; @import "@/assets/assignment.css";
.progress-label {
font-weight: bold;
margin-right: 5px;
}
.progress-bar { .progress-bar {
width: 40%; width: 40%;
} }

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

@ -1,105 +1,101 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref, watchEffect} from "vue"; import { computed, ref, watchEffect } from "vue";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
import {useAssignmentQuery, useDeleteAssignmentMutation} from "@/queries/assignments.ts"; import { useAssignmentQuery, useDeleteAssignmentMutation } from "@/queries/assignments.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import {useGroupsQuery} from "@/queries/groups.ts"; import { useGroupsQuery } from "@/queries/groups.ts";
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts"; import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import type {Language} from "@/data-objects/language.ts"; import type { Language } from "@/data-objects/language.ts";
import type {AssignmentResponse} from "@/controllers/assignments.ts"; import type { AssignmentResponse } from "@/controllers/assignments.ts";
import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group"; import type { GroupDTO, GroupDTOId } from "@dwengo-1/common/interfaces/group";
import GroupProgressRow from "@/components/GroupProgressRow.vue"; import GroupProgressRow from "@/components/GroupProgressRow.vue";
import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue"; import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
const props = defineProps<{ const props = defineProps<{
classId: string; classId: string;
assignmentId: number; assignmentId: number;
}>(); }>();
const {t} = useI18n(); const { t } = useI18n();
const lang = ref(); const lang = ref();
const groups = ref<GroupDTO[] | GroupDTOId[]>([]); const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
const learningPath = ref(); const learningPath = ref();
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId); const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
// Get learning path object // Get learning path object
const lpQueryResult = useGetLearningPathQuery( const lpQueryResult = useGetLearningPathQuery(
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""), computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
computed(() => assignmentQueryResult.data.value?.assignment?.language 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 ?? [];
watchEffect(() => {
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
});
const allGroups = computed(() => {
const groups = groupsQueryResult.data.value?.groups;
if (!groups) return [];
// Sort by original groupNumber
const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
// Assign new sequential numbers starting from 1
return sortedGroups.map((group, index) => ({
groupNo: index + 1, // New group number that will be used
name: `${t("group")} ${index + 1}`,
members: group.members,
submitted: false, // TODO: fetch from submission
originalGroupNo: group.groupNumber, // Keep original number if needed
}));
});
const dialog = ref(false);
const selectedGroup = ref({});
function openGroupDetails(group): void {
selectedGroup.value = group;
dialog.value = true;
}
const headers = computed(() => [
{title: t("group"), align: "start", key: "name"},
{title: t("progress"), align: "center", key: "progress"},
{title: t("submission"), align: "center", key: "submission"},
]);
const {mutate} = useDeleteAssignmentMutation();
async function deleteAssignment(num: number, clsId: string): Promise<void> {
mutate(
{cid: clsId, an: num},
{
onSuccess: () => {
window.location.href = "/user/assignment";
},
},
); );
}
function goToLearningPathLink(): string | undefined { // Get all the groups withing the assignment
const assignment = assignmentQueryResult.data.value?.assignment; const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
const lp = lpQueryResult.data.value; groups.value = groupsQueryResult.data.value?.groups ?? [];
if (!assignment || !lp) return undefined; watchEffect(() => {
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
});
return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`; const allGroups = computed(() => {
} const groups = groupsQueryResult.data.value?.groups;
function goToGroupSubmissionLink(groupNo: number): string | undefined { if (!groups) return [];
const lp = lpQueryResult.data.value;
if (!lp) return undefined;
return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`; // Sort by original groupNumber
} const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
// Assign new sequential numbers starting from 1
return sortedGroups.map((group, index) => ({
groupNo: index + 1, // New group number that will be used
name: `${t("group")} ${index + 1}`,
members: group.members,
originalGroupNo: group.groupNumber, // Keep original number if needed
}));
});
const dialog = ref(false);
const selectedGroup = ref({});
function openGroupDetails(group): void {
selectedGroup.value = group;
dialog.value = true;
}
const headers = computed(() => [
{ title: t("group"), align: "start", key: "name" },
{ title: t("progress"), align: "center", key: "progress" },
{ title: t("submission"), align: "center", key: "submission" },
]);
const { mutate } = useDeleteAssignmentMutation();
async function deleteAssignment(num: number, clsId: string): Promise<void> {
mutate(
{ cid: clsId, an: num },
{
onSuccess: () => {
window.location.href = "/user/assignment";
},
},
);
}
function goToLearningPathLink(): string | undefined {
const assignment = assignmentQueryResult.data.value?.assignment;
const lp = lpQueryResult.data.value;
if (!assignment || !lp) return undefined;
return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
}
function goToGroupSubmissionLink(groupNo: number): string | undefined {
const lp = lpQueryResult.data.value;
if (!lp) return undefined;
return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
}
</script> </script>
<template> <template>
@ -209,7 +205,7 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined {
> >
<v-list-item-content> <v-list-item-content>
<v-list-item-title <v-list-item-title
>{{ member.firstName + " " + member.lastName }} >{{ member.firstName + " " + member.lastName }}
</v-list-item-title> </v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
@ -219,9 +215,8 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined {
<v-btn <v-btn
color="primary" color="primary"
@click="dialog = false" @click="dialog = false"
>Close >Close
</v-btn </v-btn>
>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
@ -242,10 +237,10 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined {
</template> </template>
<style scoped> <style scoped>
@import "@/assets/assignment.css"; @import "@/assets/assignment.css";
.table-scroll { .table-scroll {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
</style> </style>