feat: werkende aan group edit pagina

frontend/src/views/assignments/TeacherAssignment.vue

@@ -8,6 +8,8 @@
     import type { Language } from "@/data-objects/language.ts";
     import type { AssignmentResponse } from "@/controllers/assignments.ts";
     import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
+import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
+import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
 
     const props = defineProps<{
         classId: string;
@@ -24,7 +26,7 @@
     const groups = ref();
     const learningPath = ref();
 
-    const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
+    const assignmentQueryResult = useAssignmentQuery(props.classId, props.assignmentId);
     learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
     // Get learning path object
     const lpQueryResult = useGetLearningPathQuery(
@@ -88,10 +90,13 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
     <div class="container">
         <using-query-result
             :query-result="assignmentQueryResult"
-            v-slot="{ data }: { data: AssignmentResponse }"
+            v-slot="assignmentResponse: { data: AssignmentResponse }"
         >
+        <v-container fluid class="ma-4">
+            <v-row no-gutters class="custom-breakpoint">
+                <v-col cols="12" sm="6" md="6" class="responsive-col">
                     <v-card
-                v-if="data"
+                        v-if="assignmentResponse"
                         class="assignment-card"
                     >
                         <div class="top-buttons">
@@ -108,12 +113,12 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                                 icon
                                 variant="text"
                                 class="top-right-btn"
-                        @click="deleteAssignment(data.assignment.id, data.assignment.within)"
+                                @click="deleteAssignment(assignmentResponse.data.assignment.id, assignmentResponse.data.assignment.within)"
                             >
                                 <v-icon>mdi-delete</v-icon>
                             </v-btn>
                         </div>
-                <v-card-title class="text-h4 assignmentTopTitle">{{ data.assignment.title }}</v-card-title>
+                        <v-card-title class="text-h4 assignmentTopTitle">{{ assignmentResponse.data.assignment.title }}</v-card-title>
                         <v-card-subtitle class="subtitle-section">
                             <using-query-result
                                 :query-result="lpQueryResult"
@@ -131,7 +136,7 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                         </v-card-subtitle>
 
                         <v-card-text class="description">
-                    {{ data.assignment.description }}
+                            {{ assignmentResponse.data.assignment.description }}
                         </v-card-text>
 
                         <v-card-text class="group-section">
@@ -220,6 +225,50 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                         </v-card-actions>
                         -->
                     </v-card>
+                </v-col>
+                <v-col cols="12" sm="6" md="6" class="responsive-col">
+                    <v-table class="table">
+                        <thead>
+                            <tr>
+                                <th class="header">{{ t("group") }}</th>
+                                <th class="header">
+                                    {{ t("progress") }}
+                                </th>
+                                <th class="header">{{ t("Members") }}</th>
+                                <th class="header">
+                                    <v-btn :to="`/assignment/${assignmentResponse.data.assignment.within}/${assignmentResponse.data.assignment.id}`" variant="text">
+                                        <v-icon> mdi-pencil </v-icon>
+                                    </v-btn>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="g in assignmentResponse.data.assignment.groups as GroupDTO[]" :key="g.groupNumber">
+                                <td>
+                                    <v-btn :to="`/assignment/${assignmentResponse.data.assignment.within}/${assignmentResponse.data.assignment.id}`" variant="text">
+                                        {{ g.groupNumber }}
+                                        <v-icon end> mdi-menu-right </v-icon>
+                                    </v-btn>
+                                </td>
+                                <td>
+                                    <v-progress-linear :model-value="0" color="blue-grey" height="25">
+                                        <template v-slot:default="{ value }">
+                                            <strong>{{ Math.ceil(value) }}%</strong>
+                                        </template>
+                                    </v-progress-linear>
+                                </td>
+                                <td>{{ (g.members! as StudentDTO[]).map(member => member.username).join(', ') }}</td>
+                                <td>
+                                    <v-btn :to="`/assignment/${assignmentResponse.data.assignment.within}/${assignmentResponse.data.assignment.id}`" variant="text">
+                                        <v-icon color="red"> mdi-delete </v-icon>
+                                    </v-btn>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </v-table>
+                </v-col>
+            </v-row>
+        </v-container>
         </using-query-result>
     </div>
 </template>
@@ -231,4 +280,106 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }
+
+    .header {
+        font-weight: bold !important;
+        background-color: #0e6942;
+        color: white;
+        padding: 10px;
+    }
+
+    table thead th:first-child {
+        border-top-left-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(even) {
+        background-color: #f6faf2;
+    }
+
+    td,
+    th {
+        border-bottom: 1px solid #0e6942;
+        border-top: 1px solid #0e6942;
+    }
+
+    .table {
+        width: 90%;
+        padding-top: 10px;
+        border-collapse: collapse;
+    }
+
+    h1 {
+        color: #0e6942;
+        text-transform: uppercase;
+        font-weight: bolder;
+        padding-top: 2%;
+        font-size: 50px;
+    }
+
+    h2 {
+        color: #0e6942;
+        font-size: 30px;
+    }
+
+    .join {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        margin-top: 50px;
+    }
+
+    .link {
+        color: #0b75bb;
+        text-decoration: underline;
+    }
+
+    main {
+        margin-left: 30px;
+    }
+
+    @media screen and (max-width: 850px) {
+        h1 {
+            text-align: center;
+            padding-left: 0;
+        }
+
+        .join {
+            text-align: center;
+            align-items: center;
+            margin-left: 0;
+        }
+
+        .sheet {
+            width: 100%;
+        }
+
+        main {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin: 5px;
+        }
+
+        .custom-breakpoint {
+            flex-direction: column !important;
+        }
+
+        .table {
+            width: 100%;
+        }
+
+        .responsive-col {
+            max-width: 100% !important;
+            flex-basis: 100% !important;
+        }
+    }
 </style>