From 6d9396348a429817395cbbaf82dbd56a18d10b62 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Sun, 18 May 2025 00:17:11 +0200
Subject: [PATCH] feat: format

---
 .../views/assignments/StudentAssignment.vue   |   6 +-
 .../views/assignments/TeacherAssignment.vue   | 608 +++++++++---------
 2 files changed, 308 insertions(+), 306 deletions(-)

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