From 0f1009ba434a49e1517ddfcb6c732216f2091a03 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Sun, 4 May 2025 16:51:48 +0200
Subject: [PATCH] fix: linting + small fixes

---
 frontend/src/components/GroupProgressRow.vue  |  58 +++---
 .../src/components/GroupSubmissionStatus.vue  |  45 ++--
 frontend/src/utils/assignment-utils.ts        |   2 +-
 .../views/assignments/SingleAssignment.vue    |   1 -
 .../views/assignments/StudentAssignment.vue   |  18 +-
 .../views/assignments/TeacherAssignment.vue   | 195 +++++++++---------
 6 files changed, 150 insertions(+), 169 deletions(-)

diff --git a/frontend/src/components/GroupProgressRow.vue b/frontend/src/components/GroupProgressRow.vue
index f012b8cc..2704c494 100644
--- a/frontend/src/components/GroupProgressRow.vue
+++ b/frontend/src/components/GroupProgressRow.vue
@@ -1,37 +1,37 @@
 <script setup lang="ts">
-import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
-import { computed } from "vue";
-import type { Language } from "@/data-objects/language.ts";
-import {calculateProgress} from "@/utils/assignment-utils.ts";
+    import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
+    import { computed } from "vue";
+    import type { Language } from "@/data-objects/language.ts";
+    import { calculateProgress } from "@/utils/assignment-utils.ts";
 
-const props = defineProps<{
-    groupNumber: number;
-    learningPath: string;
-    language: Language;
-    assignmentId: number;
-    classId: string;
-}>();
+    const props = defineProps<{
+        groupNumber: number;
+        learningPath: string;
+        language: Language;
+        assignmentId: number;
+        classId: string;
+    }>();
 
-const query = useGetLearningPathQuery(
-    () => props.learningPath,
-    () => props.language,
-    () => ({
-        forGroup: props.groupNumber,
-        assignmentNo: props.assignmentId,
-        classId: props.classId,
-    }),
-);
+    const query = useGetLearningPathQuery(
+        () => props.learningPath,
+        () => props.language,
+        () => ({
+            forGroup: props.groupNumber,
+            assignmentNo: props.assignmentId,
+            classId: props.classId,
+        }),
+    );
 
-const progress = computed(() => {
-    if (!query.data.value) return 0;
-    return calculateProgress(query.data.value);
-});
+    const progress = computed(() => {
+        if (!query.data.value) return 0;
+        return calculateProgress(query.data.value);
+    });
 
-const progressColor = computed(() => {
-    if (progress.value < 50) return "error";
-    if (progress.value < 80) return "warning";
-    return "success";
-});
+    const progressColor = computed(() => {
+        if (progress.value < 50) return "error";
+        if (progress.value < 80) return "warning";
+        return "success";
+    });
 </script>
 
 <template>
diff --git a/frontend/src/components/GroupSubmissionStatus.vue b/frontend/src/components/GroupSubmissionStatus.vue
index 5641da58..12796229 100644
--- a/frontend/src/components/GroupSubmissionStatus.vue
+++ b/frontend/src/components/GroupSubmissionStatus.vue
@@ -1,27 +1,23 @@
 <script setup lang="ts">
-import type {Language} from "@/data-objects/language.ts";
-import {useI18n} from "vue-i18n";
-import UsingQueryResult from "@/components/UsingQueryResult.vue";
-import {useAssignmentSubmissionsQuery} from "@/queries/assignments.ts";
-import type {SubmissionsResponse} from "@/controllers/submissions.ts";
+    import { useI18n } from "vue-i18n";
+    import UsingQueryResult from "@/components/UsingQueryResult.vue";
+    import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts";
+    import type { SubmissionsResponse } from "@/controllers/submissions.ts";
 
-const props = defineProps<{
-    lpHruid: string,
-    group: object;
-    assignmentId: number;
-    classId: string;
-    language: Language;
-    goToGroupSubmissionLink: (groupNo: number) => void;
-}>();
+    const props = defineProps<{
+        group: object;
+        assignmentId: number;
+        classId: string;
+        goToGroupSubmissionLink: (groupNo: number) => void;
+    }>();
 
-const {t} = useI18n();
-// Call the submissions query
-const submissionsQuery = useAssignmentSubmissionsQuery(
-    () => props.classId,
-    () => props.assignmentId,
-    () => props.group.originalGroupNo,  // Using the classId for both class and group-related data
-    () => true
-);
+    const { t } = useI18n();
+    const submissionsQuery = useAssignmentSubmissionsQuery(
+        () => props.classId,
+        () => props.assignmentId,
+        () => props.group.originalGroupNo,
+        () => true,
+    );
 </script>
 
 <template>
@@ -30,11 +26,12 @@ const submissionsQuery = useAssignmentSubmissionsQuery(
         v-slot="{ data }: { data: SubmissionsResponse }"
     >
         <v-btn
-            :color="(data.submissions.length > 0) ? 'green' : 'red'"
+            :color="data.submissions.length > 0 ? 'green' : 'red'"
             variant="text"
-            :to="(data.submissions.length > 0) ? goToGroupSubmissionLink(props.group.groupNo) : undefined"
+            :to="data.submissions.length > 0 ? goToGroupSubmissionLink(props.group.groupNo) : undefined"
+            :disabled="data.submissions.length === 0"
         >
-            {{ (data.submissions.length > 0) ? t("see-submission") :  t("no-submission")}}
+            {{ data.submissions.length > 0 ? t("see-submission") : t("no-submission") }}
         </v-btn>
     </using-query-result>
 </template>
diff --git a/frontend/src/utils/assignment-utils.ts b/frontend/src/utils/assignment-utils.ts
index fd936f54..938f7962 100644
--- a/frontend/src/utils/assignment-utils.ts
+++ b/frontend/src/utils/assignment-utils.ts
@@ -1,4 +1,4 @@
-import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
+import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
 
 export function calculateProgress(lp: LearningPath): number {
     return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
diff --git a/frontend/src/views/assignments/SingleAssignment.vue b/frontend/src/views/assignments/SingleAssignment.vue
index cd196c5d..ed83289d 100644
--- a/frontend/src/views/assignments/SingleAssignment.vue
+++ b/frontend/src/views/assignments/SingleAssignment.vue
@@ -11,7 +11,6 @@
     const route = useRoute();
     const classId = ref<string>(route.params.classId as string);
     const assignmentId = ref(Number(route.params.id));
-
 </script>
 
 <template>
diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index 077540a5..450ec9d4 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, computed, type Ref, watchEffect} from "vue";
+    import { ref, computed, watchEffect } from "vue";
     import auth from "@/services/auth/auth-service.ts";
     import { useI18n } from "vue-i18n";
     import { useAssignmentQuery } from "@/queries/assignments.ts";
@@ -10,8 +10,7 @@ import {ref, computed, type Ref, watchEffect} from "vue";
     import { useGroupsQuery } from "@/queries/groups.ts";
     import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
     import type { Language } from "@/data-objects/language.ts";
-    import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
-import {calculateProgress} from "@/utils/assignment-utils.ts";
+    import { calculateProgress } from "@/utils/assignment-utils.ts";
 
     const props = defineProps<{
         classId: string;
@@ -46,13 +45,10 @@ import {calculateProgress} from "@/utils/assignment-utils.ts";
                 ...group,
                 groupNo: index + 1, // Renumbered index
             }))
-            .find((group) =>
-                group.members?.some((m) => m.username === username.value),
-            );
+            .find((group) => group.members?.some((m) => m.username === username.value));
     });
 
-
-watchEffect(() => {
+    watchEffect(() => {
         learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
         lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
     });
@@ -147,7 +143,6 @@ watchEffect(() => {
                             </v-progress-linear>
                         </using-query-result>
                     </v-card-text>
-
                 </v-card-text>
 
                 <v-card-text class="group-section">
@@ -171,11 +166,6 @@ watchEffect(() => {
 <style scoped>
     @import "@/assets/assignment.css";
 
-    .progress-label {
-        font-weight: bold;
-        margin-right: 5px;
-    }
-
     .progress-bar {
         width: 40%;
     }
diff --git a/frontend/src/views/assignments/TeacherAssignment.vue b/frontend/src/views/assignments/TeacherAssignment.vue
index 79b9a228..28cc5c1d 100644
--- a/frontend/src/views/assignments/TeacherAssignment.vue
+++ b/frontend/src/views/assignments/TeacherAssignment.vue
@@ -1,105 +1,101 @@
 <script setup lang="ts">
-import {computed, ref, watchEffect} from "vue";
-import {useI18n} from "vue-i18n";
-import {useAssignmentQuery, useDeleteAssignmentMutation} 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 GroupProgressRow from "@/components/GroupProgressRow.vue";
-import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
+    import { computed, ref, watchEffect } from "vue";
+    import { useI18n } from "vue-i18n";
+    import { useAssignmentQuery, useDeleteAssignmentMutation } 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 GroupProgressRow from "@/components/GroupProgressRow.vue";
+    import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
 
-const props = defineProps<{
-    classId: string;
-    assignmentId: number;
-}>();
+    const props = defineProps<{
+        classId: string;
+        assignmentId: number;
+    }>();
 
-const {t} = useI18n();
-const lang = ref();
-const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
-const learningPath = ref();
+    const { t } = useI18n();
+    const lang = ref();
+    const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
+    const learningPath = ref();
 
-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(() => {
-    learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
-    lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
-});
-
-
-const allGroups = computed(() => {
-    const groups = groupsQueryResult.data.value?.groups;
-
-    if (!groups) return [];
-
-    // Sort by original groupNumber
-    const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
-
-    // Assign new sequential numbers starting from 1
-    return sortedGroups.map((group, index) => ({
-        groupNo: index + 1, // New group number that will be used
-        name: `${t("group")} ${index + 1}`,
-        members: group.members,
-        submitted: false, // TODO: fetch from submission
-        originalGroupNo: group.groupNumber, // Keep original number if needed
-    }));
-});
-
-
-const dialog = ref(false);
-const selectedGroup = ref({});
-
-function openGroupDetails(group): void {
-    selectedGroup.value = group;
-    dialog.value = true;
-}
-
-const headers = computed(() => [
-    {title: t("group"), align: "start", key: "name"},
-    {title: t("progress"), align: "center", key: "progress"},
-    {title: t("submission"), align: "center", key: "submission"},
-]);
-
-const {mutate} = useDeleteAssignmentMutation();
-
-async function deleteAssignment(num: number, clsId: string): Promise<void> {
-    mutate(
-        {cid: clsId, an: num},
-        {
-            onSuccess: () => {
-                window.location.href = "/user/assignment";
-            },
-        },
+    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(() => {
+        learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
+        lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
+    });
 
-    return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
-}
+    const allGroups = computed(() => {
+        const groups = groupsQueryResult.data.value?.groups;
 
-function goToGroupSubmissionLink(groupNo: number): string | undefined {
-    const lp = lpQueryResult.data.value;
-    if (!lp) return undefined;
+        if (!groups) return [];
 
-    return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
-}
+        // Sort by original groupNumber
+        const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
 
+        // Assign new sequential numbers starting from 1
+        return sortedGroups.map((group, index) => ({
+            groupNo: index + 1, // New group number that will be used
+            name: `${t("group")} ${index + 1}`,
+            members: group.members,
+            originalGroupNo: group.groupNumber, // Keep original number if needed
+        }));
+    });
+
+    const dialog = ref(false);
+    const selectedGroup = ref({});
+
+    function openGroupDetails(group): void {
+        selectedGroup.value = group;
+        dialog.value = true;
+    }
+
+    const headers = computed(() => [
+        { title: t("group"), align: "start", key: "name" },
+        { title: t("progress"), align: "center", key: "progress" },
+        { title: t("submission"), align: "center", key: "submission" },
+    ]);
+
+    const { mutate } = useDeleteAssignmentMutation();
+
+    async function deleteAssignment(num: number, clsId: string): Promise<void> {
+        mutate(
+            { cid: clsId, an: num },
+            {
+                onSuccess: () => {
+                    window.location.href = "/user/assignment";
+                },
+            },
+        );
+    }
+
+    function goToLearningPathLink(): string | undefined {
+        const assignment = assignmentQueryResult.data.value?.assignment;
+        const lp = lpQueryResult.data.value;
+
+        if (!assignment || !lp) return undefined;
+
+        return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
+    }
+
+    function goToGroupSubmissionLink(groupNo: number): string | undefined {
+        const lp = lpQueryResult.data.value;
+        if (!lp) return undefined;
+
+        return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
+    }
 </script>
 
 <template>
@@ -209,7 +205,7 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined {
                                 >
                                     <v-list-item-content>
                                         <v-list-item-title
-                                        >{{ member.firstName + " " + member.lastName }}
+                                            >{{ member.firstName + " " + member.lastName }}
                                         </v-list-item-title>
                                     </v-list-item-content>
                                 </v-list-item>
@@ -219,9 +215,8 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined {
                             <v-btn
                                 color="primary"
                                 @click="dialog = false"
-                            >Close
-                            </v-btn
-                            >
+                                >Close
+                            </v-btn>
                         </v-card-actions>
                     </v-card>
                 </v-dialog>
@@ -242,10 +237,10 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined {
 </template>
 
 <style scoped>
-@import "@/assets/assignment.css";
+    @import "@/assets/assignment.css";
 
-.table-scroll {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
+    .table-scroll {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
 </style>