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

feat: format

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-18 00:17:11 +02:00
parent 8f57da4bc1
commit 6d9396348a
2 changed files with 308 additions and 306 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -163,10 +163,12 @@
<div v-else> <div v-else>
<v-alert class="empty-message"> <v-alert class="empty-message">
<v-icon icon="mdi-information-outline" size="small" /> <v-icon
icon="mdi-information-outline"
size="small"
/>
{{ t("currently-no-groups") }} {{ t("currently-no-groups") }}
</v-alert> </v-alert>
</div> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>

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

@ -1,159 +1,156 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref, watch, watchEffect} from "vue"; import { computed, ref, watch, watchEffect } from "vue";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
import { import {
useAssignmentQuery, useAssignmentQuery,
useDeleteAssignmentMutation, useDeleteAssignmentMutation,
useUpdateAssignmentMutation, useUpdateAssignmentMutation,
} from "@/queries/assignments.ts"; } 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 GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue"; import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
import GroupProgressRow from "@/components/GroupProgressRow.vue"; import GroupProgressRow from "@/components/GroupProgressRow.vue";
import type {AssignmentDTO} from "@dwengo-1/common/dist/interfaces/assignment.ts"; import type { AssignmentDTO } from "@dwengo-1/common/dist/interfaces/assignment.ts";
import GroupSelector from "@/components/assignments/GroupSelector.vue"; import GroupSelector from "@/components/assignments/GroupSelector.vue";
import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue"; import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue";
const props = defineProps<{ const props = defineProps<{
classId: string; classId: string;
assignmentId: number; assignmentId: number;
}>(); }>();
const isEditing = ref(false); const isEditing = ref(false);
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 form = ref(); const form = ref();
const editingLearningPath = ref(learningPath); const editingLearningPath = ref(learningPath);
const description = ref(""); const description = ref("");
const deadline = ref<Date | null>(null); const deadline = ref<Date | null>(null);
const editGroups = ref(false); const editGroups = ref(false);
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(() => {
const assignment = assignmentQueryResult.data.value?.assignment;
if (assignment) {
learningPath.value = assignment.learningPath;
lang.value = assignment.language as Language;
deadline.value = assignment.deadline ? new Date(assignment.deadline) : null;
if (lpQueryResult.data.value) {
editingLearningPath.value = lpQueryResult.data.value;
}
}
});
const hasSubmissions = ref<boolean>(false);
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,
originalGroupNo: group.groupNumber
}));
});
const dialog = ref(false);
const selectedGroup = ref({});
function openGroupDetails(group: object): void {
selectedGroup.value = group;
dialog.value = true;
}
const deleteAssignmentMutation = useDeleteAssignmentMutation();
async function deleteAssignment(num: number, clsId: string): Promise<void> {
deleteAssignmentMutation.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(() => {
const assignment = assignmentQueryResult.data.value?.assignment;
if (assignment) {
learningPath.value = assignment.learningPath;
lang.value = assignment.language as Language;
deadline.value = assignment.deadline ? new Date(assignment.deadline) : null;
return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`; if (lpQueryResult.data.value) {
} editingLearningPath.value = lpQueryResult.data.value;
}
}
});
function goToGroupSubmissionLink(groupNo: number): string | undefined { const hasSubmissions = ref<boolean>(false);
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}`; const allGroups = computed(() => {
} const groups = groupsQueryResult.data.value?.groups;
const {mutate, data, isSuccess} = useUpdateAssignmentMutation(); if (!groups) return [];
watch([isSuccess, data], async ([success, newData]) => { // Sort by original groupNumber
if (success && newData?.assignment) { const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
await assignmentQueryResult.refetch();
// 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,
}));
});
const dialog = ref(false);
const selectedGroup = ref({});
function openGroupDetails(group: object): void {
selectedGroup.value = group;
dialog.value = true;
} }
});
async function saveChanges(): Promise<void> { const deleteAssignmentMutation = useDeleteAssignmentMutation();
const {valid} = await form.value.validate(); async function deleteAssignment(num: number, clsId: string): Promise<void> {
if (!valid) return; deleteAssignmentMutation.mutate(
{ cid: clsId, an: num },
{
onSuccess: () => {
window.location.href = "/user/assignment";
},
},
);
}
isEditing.value = false; function goToLearningPathLink(): string | undefined {
const assignment = assignmentQueryResult.data.value?.assignment;
const lp = lpQueryResult.data.value;
const assignmentDTO: AssignmentDTO = { if (!assignment || !lp) return undefined;
description: description.value,
deadline: deadline.value ?? null,
};
mutate({ return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
cid: assignmentQueryResult.data.value?.assignment.within, }
an: assignmentQueryResult.data.value?.assignment.id,
data: assignmentDTO, 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}`;
}
const { mutate, data, isSuccess } = useUpdateAssignmentMutation();
watch([isSuccess, data], async ([success, newData]) => {
if (success && newData?.assignment) {
await assignmentQueryResult.refetch();
}
}); });
}
async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> { async function saveChanges(): Promise<void> {
const assignmentDTO: AssignmentDTO = { const { valid } = await form.value.validate();
groups: updatedGroups, if (!valid) return;
};
mutate({
cid: assignmentQueryResult.data.value?.assignment.within,
an: assignmentQueryResult.data.value?.assignment.id,
data: assignmentDTO,
});
}
isEditing.value = false;
const assignmentDTO: AssignmentDTO = {
description: description.value,
deadline: deadline.value ?? null,
};
mutate({
cid: assignmentQueryResult.data.value?.assignment.within,
an: assignmentQueryResult.data.value?.assignment.id,
data: assignmentDTO,
});
}
async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
const assignmentDTO: AssignmentDTO = {
groups: updatedGroups,
};
mutate({
cid: assignmentQueryResult.data.value?.assignment.within,
an: assignmentQueryResult.data.value?.assignment.id,
data: assignmentDTO,
});
}
</script> </script>
<template> <template>
@ -220,7 +217,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
editingLearningPath = learningPath; editingLearningPath = learningPath;
} }
" "
>{{ t("cancel") }} >{{ t("cancel") }}
</v-btn> </v-btn>
<v-btn <v-btn
@ -250,7 +247,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
</div> </div>
</div> </div>
<v-card-title class="text-h4 assignmentTopTitle" <v-card-title class="text-h4 assignmentTopTitle"
>{{ assignmentResponse.data.assignment.title }} >{{ assignmentResponse.data.assignment.title }}
</v-card-title> </v-card-title>
<v-card-subtitle class="subtitle-section"> <v-card-subtitle class="subtitle-section">
<using-query-result <using-query-result
@ -275,9 +272,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
</using-query-result> </using-query-result>
</v-card-subtitle> </v-card-subtitle>
<v-card-text v-if="isEditing"> <v-card-text v-if="isEditing">
<deadline-selector <deadline-selector v-model:deadline="deadline" />
v-model:deadline="deadline"
/>
</v-card-text> </v-card-text>
<v-card-text <v-card-text
v-if="!isEditing" v-if="!isEditing"
@ -353,75 +348,80 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
<div class="table-container"> <div class="table-container">
<v-table class="table"> <v-table class="table">
<thead> <thead>
<tr> <tr>
<th class="header">{{ t("group") }}</th> <th class="header">{{ t("group") }}</th>
<th class="header">{{ t("progress") }}</th> <th class="header">{{ t("progress") }}</th>
<th class="header">{{ t("submission") }}</th> <th class="header">{{ t("submission") }}</th>
<th class="header"> <th class="header">
<v-btn <v-btn
@click="editGroups = true" @click="editGroups = true"
variant="text" variant="text"
:disabled="hasSubmissions" :disabled="hasSubmissions"
> >
<v-icon>mdi-pencil</v-icon> <v-icon>mdi-pencil</v-icon>
</v-btn> </v-btn>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody v-if="allGroups.length > 0"> <tbody v-if="allGroups.length > 0">
<tr <tr
v-for="g in allGroups" v-for="g in allGroups"
:key="g.originalGroupNo" :key="g.originalGroupNo"
> >
<td> <td>
<v-btn <v-btn variant="text">
variant="text" {{ g.name }}
> </v-btn>
{{ g.name }} </td>
</v-btn>
</td>
<td> <td>
<GroupProgressRow <GroupProgressRow
:group-number="g.originalGroupNo" :group-number="g.originalGroupNo"
:learning-path="learningPath" :learning-path="learningPath"
:language="lang" :language="lang"
:assignment-id="assignmentId" :assignment-id="assignmentId"
:class-id="classId" :class-id="classId"
/> />
</td> </td>
<td> <td>
<GroupSubmissionStatus <GroupSubmissionStatus
:group="g" :group="g"
:assignment-id="assignmentId" :assignment-id="assignmentId"
:class-id="classId" :class-id="classId"
:language="lang" :language="lang"
:go-to-group-submission-link="goToGroupSubmissionLink" :go-to-group-submission-link="goToGroupSubmissionLink"
@update:hasSubmission="(hasSubmission) => hasSubmissions = hasSubmission" @update:hasSubmission="
(hasSubmission) => (hasSubmissions = hasSubmission)
"
/>
</td>
/> <!-- Edit icon -->
</td> <td>
<v-btn
<!-- Edit icon --> @click="openGroupDetails(g)"
<td> variant="text"
<v-btn >
@click="openGroupDetails(g)" <v-icon>mdi-eye</v-icon>
variant="text" </v-btn>
> </td>
<v-icon>mdi-eye</v-icon> </tr>
</v-btn>
</td>
</tr>
</tbody> </tbody>
<template v-else> <template v-else>
<tbody> <tbody>
<tr> <tr>
<td colspan="4" class="empty-message"> <td
<v-icon icon="mdi-information-outline" size="small" /> colspan="4"
{{ t("currently-no-groups") }} class="empty-message"
</td> >
</tr> <v-icon
icon="mdi-information-outline"
size="small"
/>
{{ t("currently-no-groups") }}
</td>
</tr>
</tbody> </tbody>
</template> </template>
</v-table> </v-table>
@ -448,147 +448,147 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text @click="editGroups = false"> <v-btn
text
@click="editGroups = false"
>
{{ t("cancel") }} {{ t("cancel") }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-container> </v-container>
</using-query-result> </using-query-result>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@import "@/assets/assignment.css"; @import "@/assets/assignment.css";
.assignment-card-teacher { .assignment-card-teacher {
width: 80%; width: 80%;
padding: 2%; padding: 2%;
border-radius: 12px; border-radius: 12px;
} }
.table-scroll { .table-scroll {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.header { .header {
font-weight: bold; font-weight: bold;
background-color: #0e6942; background-color: #0e6942;
color: white; color: white;
padding: 5px; padding: 5px;
} }
table thead th:first-child { table thead th:first-child {
border-top-left-radius: 10px; border-top-left-radius: 10px;
} }
.table thead th:last-child { .table thead th:last-child {
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
.table tbody tr:nth-child(odd) { .table tbody tr:nth-child(odd) {
background-color: white; background-color: white;
} }
.table tbody tr:nth-child(even) { .table tbody tr:nth-child(even) {
background-color: #f6faf2; background-color: #f6faf2;
} }
td, td,
th { th {
border-bottom: 1px solid #0e6942; border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942; border-top: 1px solid #0e6942;
} }
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 50px;
}
h2 {
color: #0e6942;
font-size: 30px;
}
.link {
color: #0b75bb;
text-decoration: underline;
}
main {
margin-left: 30px;
}
.table-container {
width: 100%;
overflow-x: visible;
}
.table {
width: 100%;
min-width: auto;
table-layout: auto;
}
@media screen and (max-width: 1200px) {
h1 { h1 {
text-align: center; color: #0e6942;
padding-left: 0; text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 50px;
} }
.join { h2 {
text-align: center; color: #0e6942;
align-items: center; font-size: 30px;
margin-left: 0;
} }
.sheet { .link {
width: 90%; color: #0b75bb;
text-decoration: underline;
} }
main { main {
display: flex; margin-left: 30px;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 5px;
} }
.custom-breakpoint { .table-container {
flex-direction: column !important; width: 100%;
overflow-x: visible;
} }
.table { .table {
width: 100%; width: 100%;
display: block; min-width: auto;
overflow-x: auto; table-layout: auto;
} }
.table-container { @media screen and (max-width: 1200px) {
overflow-x: auto; h1 {
text-align: center;
padding-left: 0;
}
.join {
text-align: center;
align-items: center;
margin-left: 0;
}
.sheet {
width: 90%;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 5px;
}
.custom-breakpoint {
flex-direction: column !important;
}
.table {
width: 100%;
display: block;
overflow-x: auto;
}
.table-container {
overflow-x: auto;
}
.responsive-col {
max-width: 100% !important;
flex-basis: 100% !important;
}
.assignment-card-teacher {
width: 100%;
border-radius: 12px;
}
} }
.responsive-col { .group-members-dialog {
max-width: 100% !important; max-height: 80vh;
flex-basis: 100% !important; overflow-y: auto;
} }
.assignment-card-teacher {
width: 100%;
border-radius: 12px;
}
}
.group-members-dialog {
max-height: 80vh;
overflow-y: auto;
}
</style> </style>