style: fix linting issues met Prettier

frontend/src/components/assignments/DeadlineSelector.vue

@@ -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 scoped></style>
-
-</style>

frontend/src/components/assignments/GroupSelector.vue

@@ -1,51 +1,49 @@
 <script setup lang="ts">
-import {ref, defineProps, defineEmits} from 'vue';
+    import { ref, defineProps, defineEmits } from "vue";
-import {useI18n} from 'vue-i18n';
+    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
+        classId: string | undefined;
-    groups: string[][],
+        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);
+            const usernames = selectedStudents.value.map((student) => student.value);
-        emit('groupCreated', usernames);
+            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">
+            <v-btn
-                {{ t('create-group') }}
+                @click="createGroup"
+                color="primary"
+                class="mt-2"
+                size="small"
+            >
+                {{ t("create-group") }}
             </v-btn>
         </v-card-text>
     </using-query-result>
-
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

frontend/src/queries/learning-paths.ts

@@ -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)),
     });
 }

frontend/src/queries/students.ts

@@ -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) ?? [];
 

frontend/src/router/index.ts

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

frontend/src/utils/assignment-rules.ts

@@ -5,8 +5,10 @@
  */
 export const assignmentTitleRules = [
     (value: string): string | boolean => {
-        if (value?.length >= 1) {return true;}  // Title must not be empty
+        if (value?.length >= 1) {
-        return 'Title cannot be empty.';
+            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;}
+        if (value) {
-        return 'You must select at least one class.';
+            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;
     },
 ];

frontend/src/views/assignments/CreateAssignment.vue

@@ -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') {
+        if (role.value === "student") {
-        await router.push('/user');
+            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"
+                        <v-text-field
-                                      density="compact" variant="outlined" clearable required></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
-                        <v-btn to="/user/assignment" color="grey" block>{{ t("cancel") }}</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>

frontend/src/views/assignments/SingleAssignment.vue

@@ -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 scoped></style>
-</style>
-

frontend/src/views/assignments/StudentAssignment.vue

@@ -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
+        classId: string;
-    assignmentId: number,
+        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 =>
+        groupsQueryResult?.data.value?.groups.find((group) =>
-        group.members?.some(m => m.username === username.value)
+            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">
+                            <li
-                                {{ student.firstName + ' ' + student.lastName }}
+                                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>
-

frontend/src/views/assignments/TeacherAssignment.vue

@@ -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
+        classId: string;
-    assignmentId: number,
+        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 => ({
+        return groups.map((group) => ({
-        name: `${t('group')} ${group.groupNumber}`,
+            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("group"), align: "start", key: "name" },
-    { title: t('progress'), align: 'center', key: 'progress' },
+        { title: t("progress"), align: "center", key: "progress" },
-    { title: t('submission'), align: 'center', key: 'submission' }
+        { 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>{{
+                                        <v-list-item-title
-                                                member.firstName + ' ' + member.lastName
+                                            >{{ 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>
-

frontend/src/views/assignments/UserAssignments.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import {ref, computed, onMounted} from 'vue';
+    import { ref, computed, onMounted } from "vue";
-import {useI18n} from 'vue-i18n';
+    import { useI18n } from "vue-i18n";
-import {useRouter} from 'vue-router';
+    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)">
+                                @click="goToAssignmentDetails(assignment.id, assignment.class.id)"
-                                {{ t('view-assignment') }}
+                            >
+                                {{ 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)">
+                                @click="goToDeleteAssignment(assignment.id, assignment.class.id)"
-                                {{ t('delete') }}
+                            >
+                                {{ 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>