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

style: fix linting issues met Prettier

Browse source
This commit is contained in:
Lint Action 2025-04-21 06:30:38 +00:00
parent ef5c51b463
commit 11600b8be4
11 changed files with 578 additions and 541 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/assignments/DeadlineSelector.vue
View file

@ -15,7 +15,7 @@ function updateDeadline(): void {
if (date.value && time.value) {
emit("update:deadline", formattedDeadline.value);
}
};
}
</script>
<template>
@ -46,6 +46,4 @@ function updateDeadline(): void {
</div>
</template>
<style scoped>
</style>
<style scoped></style>

40
frontend/src/components/assignments/GroupSelector.vue
View file

@ -1,51 +1,49 @@
<script setup lang="ts">
import {ref, defineProps, defineEmits} from 'vue';
import {useI18n} from 'vue-i18n';
import { ref, defineProps, defineEmits } from "vue";
import { useI18n } from "vue-i18n";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type { StudentsResponse } from "@/controllers/students.ts";
import { useClassStudentsQuery } from "@/queries/classes.ts";
const props = defineProps<{
classId: string | undefined
groups: string[][],
classId: string | undefined;
groups: string[][];
}>();
const emit = defineEmits(['groupCreated']);
const emit = defineEmits(["groupCreated"]);
const { t } = useI18n();
const selectedStudents = ref([]);
const studentQueryResult = useClassStudentsQuery(() => props.classId, true);
function filterStudents(data: StudentsResponse): { title: string, value: string }[] {
function filterStudents(data: StudentsResponse): { title: string; value: string }[] {
const students = data.students;
const studentsInGroups = props.groups.flat();
return students
?.map(st => ({
?.map((st) => ({
title: `${st.firstName} ${st.lastName}`,
value: st.username,
}))
.filter(student => !studentsInGroups.includes(student.value));
.filter((student) => !studentsInGroups.includes(student.value));
}
function createGroup(): void {
if (selectedStudents.value.length) {
// Extract only usernames (student.value)
const usernames = selectedStudents.value.map(student => student.value);
emit('groupCreated', usernames);
const usernames = selectedStudents.value.map((student) => student.value);
emit("groupCreated", usernames);
selectedStudents.value = []; // Reset selection after creating group
}
};
}
</script>
<template>
<using-query-result
:query-result="studentQueryResult"
v-slot="{ data }: { data: StudentsResponse }"
>
<h3>{{ t('create-groups') }}</h3>
<h3>{{ t("create-groups") }}</h3>
<v-card-text>
<v-combobox
v-model="selectedStudents"
@ -62,14 +60,16 @@ function createGroup(): void {
append-inner-icon="mdi-magnify"
></v-combobox>
<v-btn @click="createGroup" color="primary" class="mt-2" size="small">
{{ t('create-group') }}
<v-btn
@click="createGroup"
color="primary"
class="mt-2"
size="small"
>
{{ t("create-group") }}
</v-btn>
</v-card-text>
</using-query-result>
</template>
<style scoped>
</style>
<style scoped></style>

5
frontend/src/queries/learning-paths.ts
View file

@ -47,7 +47,8 @@ export function useSearchLearningPathQuery(
});
}
export function useGetAllLearningPaths(language: MaybeRefOrGetter<string | undefined>
export function useGetAllLearningPaths(
language: MaybeRefOrGetter<string | undefined>,
): UseQueryReturnType<LearningPath[], Error> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "getAllLearningPaths", language],
@ -55,6 +56,6 @@ export function useGetAllLearningPaths(language: MaybeRefOrGetter<string | undef
const lang = toValue(language);
return learningPathController.getAllLearningPaths(lang);
},
enabled: () => Boolean(toValue(language))
enabled: () => Boolean(toValue(language)),
});
}

5
frontend/src/queries/students.ts
View file

@ -3,7 +3,8 @@ import type { MaybeRefOrGetter } from "vue";
import {
type QueryObserverResult,
useMutation,
type UseMutationReturnType, useQueries,
type UseMutationReturnType,
useQueries,
useQuery,
useQueryClient,
type UseQueryReturnType,
@ -72,7 +73,7 @@ export function useStudentQuery(
}
export function useStudentsByUsernamesQuery(
usernames: MaybeRefOrGetter<string[] | undefined>
usernames: MaybeRefOrGetter<string[] | undefined>,
): Ref<QueryObserverResult<StudentResponse>[]> {
const resolvedUsernames = toValue(usernames) ?? [];

2
frontend/src/router/index.ts
View file

@ -85,7 +85,7 @@ const router = createRouter({
name: "SingleAssigment",
component: SingleAssignment,
},
]
],
},
{
path: "/class/:id",

30
frontend/src/utils/assignment-rules.ts
View file

@ -5,8 +5,10 @@
*/
export const assignmentTitleRules = [
(value: string): string | boolean => {
if (value?.length >= 1) {return true;} // Title must not be empty
return 'Title cannot be empty.';
if (value?.length >= 1) {
return true;
} // Title must not be empty
return "Title cannot be empty.";
},
];
@ -20,7 +22,7 @@ export const learningPathRules = [
if (value && value.hruid) {
return true; // Valid if hruid is present
}
return 'You must select a learning path.';
return "You must select a learning path.";
},
];
@ -31,8 +33,10 @@ export const learningPathRules = [
*/
export const classRules = [
(value: string): string | boolean => {
if (value) {return true;}
return 'You must select at least one class.';
if (value) {
return true;
}
return "You must select at least one class.";
},
];
@ -43,14 +47,20 @@ export const classRules = [
*/
export const deadlineRules = [
(value: string): string | boolean => {
if (!value) {return "You must set a deadline.";}
if (!value) {
return "You must set a deadline.";
}
const selectedDateTime = new Date(value);
const now = new Date();
if (isNaN(selectedDateTime.getTime())) {return "Invalid date or time.";}
if (isNaN(selectedDateTime.getTime())) {
return "Invalid date or time.";
}
if (selectedDateTime <= now) {return "The deadline must be in the future.";}
if (selectedDateTime <= now) {
return "The deadline must be in the future.";
}
return true;
},
@ -58,7 +68,9 @@ export const deadlineRules = [
export const descriptionRules = [
(value: string): string | boolean => {
if (!value || value.trim() === "") {return "Description cannot be empty.";}
if (!value || value.trim() === "") {
return "Description cannot be empty.";
}
return true;
},
];

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

@ -15,7 +15,6 @@ import type {AssignmentDTO} from "@dwengo-1/common/interfaces/assignment";
import { useCreateAssignmentMutation } from "@/queries/assignments.ts";
import { useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const { t, locale } = useI18n();
@ -24,8 +23,8 @@ const username = ref<string>("");
onMounted(async () => {
// Redirect student
if (role.value === 'student') {
await router.push('/user');
if (role.value === "student") {
await router.push("/user");
}
// Get the user's username
@ -33,7 +32,6 @@ onMounted(async () => {
username.value = user?.profile?.preferred_username ?? "";
});
const language = computed(() => locale.value);
const form = ref();
@ -45,13 +43,13 @@ const classesQueryResults = useTeacherClassesQuery(username, true);
const selectedClass = ref(undefined);
const assignmentTitle = ref('');
const assignmentTitle = ref("");
const selectedLearningPath = ref(route.query.hruid || undefined);
// Disable combobox when learningPath prop is passed
const lpIsSelected = route.query.hruid !== undefined;
const deadline = ref(null);
const description = ref('');
const description = ref("");
const groups = ref<string[][]>([]);
// New group is added to the list
@ -78,24 +76,36 @@ async function submitFormHandler(): Promise<void> {
description: description.value,
learningPath: selectedLearningPath.value?.hruid || "",
language: language.value,
groups: groups.value
groups: groups.value,
};
mutate({ cid: assignmentDTO.within, data: assignmentDTO });
if (isSuccess) await router.push(`/assignment/class/${data.value?.assignment.within}/${data.value?.assignment.id}`);
if (isSuccess)
await router.push(`/assignment/class/${data.value?.assignment.within}/${data.value?.assignment.id}`);
}
</script>
<template>
<div class="main-container">
<h1 class="title">{{ t("new-assignment") }}</h1>
<v-card class="form-card">
<v-form ref="form" class="form-container" validate-on="submit lazy" @submit.prevent="submitFormHandler">
<v-form
ref="form"
class="form-container"
validate-on="submit lazy"
@submit.prevent="submitFormHandler"
>
<v-container class="step-container">
<v-card-text>
<v-text-field v-model="assignmentTitle" :label="t('title')" :rules="assignmentTitleRules"
density="compact" variant="outlined" clearable required></v-text-field>
<v-text-field
v-model="assignmentTitle"
:label="t('title')"
:rules="assignmentTitleRules"
density="compact"
variant="outlined"
clearable
required
></v-text-field>
</v-card-text>
<using-query-result
@ -117,7 +127,9 @@ async function submitFormHandler(): Promise<void> {
item-value="hruid"
required
:disabled="lpIsSelected"
:filter="(item, query: string) => item.title.toLowerCase().includes(query.toLowerCase())"
:filter="
(item, query: string) => item.title.toLowerCase().includes(query.toLowerCase())
"
></v-combobox>
</v-card-text>
</using-query-result>
@ -167,11 +179,20 @@ async function submitFormHandler(): Promise<void> {
></v-textarea>
</v-card-text>
<v-card-text>
<v-btn class="mt-2" color="secondary" type="submit" block>{{ t("submit") }}</v-btn>
<v-btn to="/user/assignment" color="grey" block>{{ t("cancel") }}</v-btn>
<v-btn
class="mt-2"
color="secondary"
type="submit"
block
>{{ t("submit") }}</v-btn
>
<v-btn
to="/user/assignment"
color="grey"
block
>{{ t("cancel") }}</v-btn
>
</v-card-text>
</v-container>
</v-form>
</v-card>

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

@ -1,5 +1,4 @@
<script setup lang="ts">
import auth from "@/services/auth/auth-service.ts";
import { computed, type Ref, ref, watchEffect } from "vue";
import StudentAssignment from "@/views/assignments/StudentAssignment.vue";
@ -11,7 +10,7 @@ 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');
const isTeacher = computed(() => role === "teacher");
const route = useRoute();
const classId = ref<string>(route.params.classId as string);
@ -20,7 +19,7 @@ const assignmentId = ref(Number(route.params.id));
function useGroupsWithProgress(
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<string>
language: Ref<string>,
): { groupProgressMap: Map<number, number> } {
const groupProgressMap: Map<number, number> = new Map<number, number>();
@ -54,7 +53,6 @@ function useGroupsWithProgress(
function calculateProgress(lp: LearningPath): number {
return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
}
</script>
<template>
@ -74,6 +72,4 @@ function calculateProgress(lp: LearningPath): number {
</StudentAssignment>
</template>
<style scoped>
</style>
<style scoped></style>

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

@ -13,12 +13,12 @@ import type {Language} from "@/data-objects/language.ts";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
const props = defineProps<{
classId: string
assignmentId: number,
classId: string;
assignmentId: number;
useGroupsWithProgress: (
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<Language>
language: Ref<Language>,
) => { groupProgressMap: Map<number, number> };
}>();
@ -28,7 +28,7 @@ const learningPath = ref();
// Get the user's username/id
const username = asyncComputed(async () => {
const user = await auth.loadUser();
return user?.profile?.preferred_username ?? undefined
return user?.profile?.preferred_username ?? undefined;
});
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
@ -38,18 +38,16 @@ const submitted = ref(false);//TODO: update by fetching submissions and check if
const lpQueryResult = useGetLearningPathQuery(
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
computed(() => language.value)
computed(() => language.value),
);
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
const group = computed(() =>
groupsQueryResult?.data.value?.groups.find(group =>
group.members?.some(m => m.username === username.value)
)
groupsQueryResult?.data.value?.groups.find((group) =>
group.members?.some((m) => m.username === username.value),
),
);
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
@ -60,10 +58,8 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
);
*/
// Assuming group.value.members is a list of usernames TODO: case when it's StudentDTO's
const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as string[]);
</script>
<template>
@ -72,7 +68,10 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
:query-result="assignmentQueryResult"
v-slot="{ data }: { data: AssignmentResponse }"
>
<v-card v-if="data" class="assignment-card">
<v-card
v-if="data"
class="assignment-card"
>
<div class="top-buttons">
<v-btn
icon
@ -99,7 +98,8 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
:query-result="lpQueryResult"
v-slot="{ data: lpData }"
>
<v-btn v-if="lpData"
<v-btn
v-if="lpData"
:to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}`"
variant="tonal"
color="primary"
@ -113,7 +113,10 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
{{ data.assignment.description }}
</v-card-text>
<v-card-text>
<v-row align="center" no-gutters>
<v-row
align="center"
no-gutters
>
<v-col cols="auto">
<span class="progress-label">{{ t("progress") + ": " }}</span>
</v-col>
@ -136,12 +139,14 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
<h3>{{ t("group") }}</h3>
<div v-if="studentQueries">
<ul>
<li v-for="student in group?.members" :key="student.username">
{{ student.firstName + ' ' + student.lastName }}
<li
v-for="student in group?.members"
:key="student.username"
>
{{ student.firstName + " " + student.lastName }}
</li>
</ul>
</div>
</v-card-text>
</v-card>
</using-query-result>
@ -159,6 +164,4 @@ const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as
.progress-bar {
width: 40%;
}
</style>

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

@ -11,12 +11,12 @@ import type {AssignmentResponse} from "@/controllers/assignments.ts";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
const props = defineProps<{
classId: string
assignmentId: number,
classId: string;
assignmentId: number;
useGroupsWithProgress: (
groups: Ref<GroupDTO[]>,
hruid: Ref<string>,
language: Ref<Language>
language: Ref<Language>,
) => { groupProgressMap: Map<number, number> };
}>();
@ -30,7 +30,7 @@ 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(() => language.value as Language),
);
// Get all the groups withing the assignment
@ -45,13 +45,12 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
);
*/
const allGroups = computed(() => {
const groups = groupsQueryResult.data.value?.groups;
if (!groups) return [];
return groups.map(group => ({
name: `${t('group')} ${group.groupNumber}`,
return groups.map((group) => ({
name: `${t("group")} ${group.groupNumber}`,
progress: 0, //GroupProgressMap[group.groupNumber],
members: group.members,
submitted: false, //TODO: fetch from submission
@ -67,24 +66,21 @@ function openGroupDetails(group): void {
}
const headers = computed(() => [
{ title: t('group'), align: 'start', key: 'name' },
{ title: t('progress'), align: 'center', key: 'progress' },
{ title: t('submission'), align: 'center', key: 'submission' }
{ title: t("group"), align: "start", key: "name" },
{ title: t("progress"), align: "center", key: "progress" },
{ title: t("submission"), align: "center", key: "submission" },
]);
const { mutate, isSuccess } = useDeleteAssignmentMutation();
async function deleteAssignment(num: number, clsId: string): Promise<void> {
mutate({
cid: clsId,
an: num
an: num,
});
if (isSuccess) await router.push("/user/assignments");
}
</script>
<template>
@ -93,7 +89,10 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
:query-result="assignmentQueryResult"
v-slot="{ data }: { data: AssignmentResponse }"
>
<v-card v-if="data" class="assignment-card">
<v-card
v-if="data"
class="assignment-card"
>
<div class="top-buttons">
<v-btn
icon
@ -119,7 +118,8 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
:query-result="lpQueryResult"
v-slot="{ data: lpData }"
>
<v-btn v-if="lpData"
<v-btn
v-if="lpData"
:to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}`"
variant="tonal"
color="primary"
@ -127,7 +127,6 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
{{ t("learning-path") }}
</v-btn>
</using-query-result>
</v-card-subtitle>
<v-card-text class="description">
@ -144,7 +143,11 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
class="elevation-1"
>
<template #[`item.name`]="{ item }">
<v-btn @click="openGroupDetails(item)" variant="text" color="primary">
<v-btn
@click="openGroupDetails(item)"
variant="text"
color="primary"
>
{{ item.name }}
</v-btn>
</template>
@ -168,15 +171,17 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
variant="text"
class="text-capitalize"
>
{{ item.submitted ? t('see-submission') : t('no-submission') }}
{{ item.submitted ? t("see-submission") : t("no-submission") }}
</v-btn>
</template>
</v-data-table>
</div>
</v-card-text>
<v-dialog v-model="dialog" max-width="50%">
<v-dialog
v-model="dialog"
max-width="50%"
>
<v-card>
<v-card-title class="headline">{{ t("members") }}</v-card-title>
<v-card-text>
@ -186,16 +191,19 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
:key="index"
>
<v-list-item-content>
<v-list-item-title>{{
member.firstName + ' ' + member.lastName
}}
<v-list-item-title
>{{ member.firstName + " " + member.lastName }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card-text>
<v-card-actions>
<v-btn color="primary" @click="dialog = false">Close</v-btn>
<v-btn
color="primary"
@click="dialog = false"
>Close</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
@ -223,4 +231,3 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
-webkit-overflow-scrolling: touch;
}
</style>

50
frontend/src/views/assignments/UserAssignments.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import {ref, computed, onMounted} from 'vue';
import {useI18n} from 'vue-i18n';
import {useRouter} from 'vue-router';
import { ref, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import auth from "@/services/auth/auth-service.ts";
import { useTeacherClassesQuery } from "@/queries/teachers.ts";
import { useStudentClassesQuery } from "@/queries/students.ts";
@ -16,13 +16,13 @@ const router = useRouter();
const role = ref(auth.authState.activeRole);
const username = ref<string>("");
const isTeacher = computed(() => role.value === 'teacher');
const isTeacher = computed(() => role.value === "teacher");
// Fetch and store all the teacher's classes
let classesQueryResults = undefined;
if (isTeacher.value) {
classesQueryResults = useTeacherClassesQuery(username, true)
classesQueryResults = useTeacherClassesQuery(username, true);
} else {
classesQueryResults = useStudentClassesQuery(username, true);
}
@ -30,7 +30,6 @@ if (isTeacher.value) {
//TODO: remove later
const classController = new ClassController();
//TODO: replace by query that fetches all user's assignment
const assignments = asyncComputed(async () => {
const classes = classesQueryResults?.data?.value?.classes;
@ -38,24 +37,23 @@ const assignments = asyncComputed(async () => {
const result = await Promise.all(
(classes as ClassDTO[]).map(async (cls) => {
const { assignments } = await classController.getAssignments(cls.id);
return assignments.map(a => ({
return assignments.map((a) => ({
id: a.id,
class: cls,
title: a.title,
description: a.description,
learningPath: a.learningPath,
language: a.language,
groups: a.groups
groups: a.groups,
}));
})
}),
);
return result.flat();
}, []);
async function goToCreateAssignment(): Promise<void> {
await router.push('/assignment/create');
await router.push("/assignment/create");
}
async function goToAssignmentDetails(id: number, clsId: string): Promise<void> {
@ -67,7 +65,7 @@ const {mutate, isSuccess} = useDeleteAssignmentMutation();
async function goToDeleteAssignment(num: number, clsId: string): Promise<void> {
mutate({
cid: clsId,
an: num
an: num,
});
if (isSuccess) await router.push("/user/assignment");
@ -81,7 +79,7 @@ onMounted(async () => {
<template>
<div class="assignments-container">
<h1>{{ t('assignments') }}</h1>
<h1>{{ t("assignments") }}</h1>
<v-btn
v-if="isTeacher"
@ -89,7 +87,7 @@ onMounted(async () => {
class="mb-4 center-btn"
@click="goToCreateAssignment"
>
{{ t('new-assignment') }}
{{ t("new-assignment") }}
</v-btn>
<v-container>
@ -103,7 +101,7 @@ onMounted(async () => {
<div class="top-content">
<div class="assignment-title">{{ assignment.title }}</div>
<div class="assignment-class">
{{ t('class') }}:
{{ t("class") }}:
<span class="class-name">
{{ assignment.class.displayName }}
</span>
@ -113,26 +111,29 @@ onMounted(async () => {
<div class="spacer"></div>
<div class="button-row">
<v-btn color="primary"
<v-btn
color="primary"
variant="text"
@click="goToAssignmentDetails(assignment.id, assignment.class.id)">
{{ t('view-assignment') }}
@click="goToAssignmentDetails(assignment.id, assignment.class.id)"
>
{{ t("view-assignment") }}
</v-btn>
<v-btn v-if="isTeacher" color="red"
<v-btn
v-if="isTeacher"
color="red"
variant="text"
@click="goToDeleteAssignment(assignment.id, assignment.class.id)">
{{ t('delete') }}
@click="goToDeleteAssignment(assignment.id, assignment.class.id)"
>
{{ t("delete") }}
</v-btn>
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<style scoped>
.assignments-container {
width: 100%;
@ -147,7 +148,6 @@ onMounted(async () => {
margin-right: auto;
}
.assignment-card {
padding: 1rem;
}
@ -191,6 +191,4 @@ onMounted(async () => {
font-weight: 500;
color: #333;
}
</style>