From 922e5dd0787711ff8f8a126b167e76e186592694 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Sun, 18 May 2025 00:11:22 +0200
Subject: [PATCH] feat: meer engels vertalingen

---
 .../src/components/GroupSubmissionStatus.vue  |  2 +-
 frontend/src/i18n/locale/en.json              | 12 ++++-
 .../views/assignments/StudentAssignment.vue   |  9 ++--
 .../views/assignments/TeacherAssignment.vue   | 49 +++++++++++--------
 4 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/GroupSubmissionStatus.vue b/frontend/src/components/GroupSubmissionStatus.vue
index ca3de9a3..2ae3bda6 100644
--- a/frontend/src/components/GroupSubmissionStatus.vue
+++ b/frontend/src/components/GroupSubmissionStatus.vue
@@ -39,7 +39,7 @@
         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"
             :disabled="data.submissions.length === 0"
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index bf74fc32..a59e82f3 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -172,5 +172,15 @@
     "deadline-invalid": "Invalid date or time.",
     "deadline-past": "The deadline must be in the future.",
     "lp-required": "You must select a learning path.",
-    "lp-invalied": "The selected learning path doesn't exist."
+    "lp-invalid": "The selected learning path doesn't exist.",
+    "currently-no-groups": "There are no groups for this assignment.",
+    "random-grouping": "Randomly create groups",
+    "drag-and-drop": "Manualy create groups",
+    "generate-groups": "generate",
+    "auto-generate-groups": "Create groups of equal size",
+    "preview": "Preview",
+    "current-groups": "Current groups",
+    "group-size-label": "Group size",
+    "save": "Save",
+    "unassigned": "Unassigned"
 }
diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index 63905a1e..a89e1bda 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -162,12 +162,11 @@
                     </div>
 
                     <div v-else>
-                        <v-alert
-                            type="info"
-                            variant="text"
-                        >
-                            {{ t("not-in-group-message") }}
+                        <v-alert class="empty-message">
+                            <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 9c67f596..a90b1d45 100644
--- a/frontend/src/views/assignments/TeacherAssignment.vue
+++ b/frontend/src/views/assignments/TeacherAssignment.vue
@@ -89,9 +89,9 @@ function openGroupDetails(group: object): void {
 }
 
 
+const deleteAssignmentMutation = useDeleteAssignmentMutation();
 async function deleteAssignment(num: number, clsId: string): Promise<void> {
-    const {mutate} = useDeleteAssignmentMutation();
-    mutate(
+    deleteAssignmentMutation.mutate(
         {cid: clsId, an: num},
         {
             onSuccess: () => {
@@ -183,7 +183,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
                         >
                             <v-card
                                 v-if="assignmentResponse"
-                                class="assignment-card"
+                                class="assignment-card-teacher"
                             >
                                 <div class="top-buttons">
                                     <div class="top-buttons-wrapper">
@@ -368,7 +368,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
                                     </th>
                                 </tr>
                                 </thead>
-                                <tbody>
+                                <tbody v-if="allGroups.length > 0">
                                 <tr
                                     v-for="g in allGroups"
                                     :key="g.originalGroupNo"
@@ -414,6 +414,16 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
                                     </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>
+                                    </tbody>
+                                </template>
                             </v-table>
                         </div>
                     </v-col>
@@ -453,16 +463,22 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
 <style scoped>
 @import "@/assets/assignment.css";
 
+.assignment-card-teacher {
+    width: 80%;
+    padding: 2%;
+    border-radius: 12px;
+}
+
 .table-scroll {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 
 .header {
-    font-weight: bold !important;
+    font-weight: bold;
     background-color: #0e6942;
     color: white;
-    padding: 10px;
+    padding: 5px;
 }
 
 table thead th:first-child {
@@ -487,11 +503,6 @@ th {
     border-top: 1px solid #0e6942;
 }
 
-.table {
-    width: 90%;
-    padding-top: 10px;
-    border-collapse: collapse;
-}
 
 h1 {
     color: #0e6942;
@@ -506,13 +517,6 @@ h2 {
     font-size: 30px;
 }
 
-.join {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    margin-top: 50px;
-}
-
 .link {
     color: #0b75bb;
     text-decoration: underline;
@@ -533,7 +537,7 @@ main {
     table-layout: auto;
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 1200px) {
     h1 {
         text-align: center;
         padding-left: 0;
@@ -546,7 +550,7 @@ main {
     }
 
     .sheet {
-        width: 100%;
+        width: 90%;
     }
 
     main {
@@ -575,6 +579,11 @@ main {
         max-width: 100% !important;
         flex-basis: 100% !important;
     }
+
+    .assignment-card-teacher {
+        width: 100%;
+        border-radius: 12px;
+    }
 }
 
 .group-members-dialog {