feat: start invitations

frontend/src/queries/classes.ts

@@ -14,6 +14,7 @@ import { invalidateAllAssignmentKeys } from "./assignments";
 import { invalidateAllGroupKeys } from "./groups";
 import { invalidateAllSubmissionKeys } from "./submissions";
 import type { TeachersResponse } from "@/controllers/teachers";
+import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations";
 
 const classController = new ClassController();
 
@@ -205,7 +206,7 @@ export function useClassDeleteTeacherMutation(): UseMutationReturnType<
 export function useClassTeacherInvitationsQuery(
     id: MaybeRefOrGetter<string | undefined>,
     full: MaybeRefOrGetter<boolean> = true,
-): UseQueryReturnType<StudentsResponse, Error> {
+): UseQueryReturnType<TeacherInvitationsResponse, Error> {
     return useQuery({
         queryKey: computed(() => classTeacherInvitationsKey(toValue(id)!, toValue(full))),
         queryFn: async () => classController.getTeacherInvitations(toValue(id)!, toValue(full)),

frontend/src/views/classes/TeacherClasses.vue

@@ -8,7 +8,8 @@
     import { useTeacherClassesQuery } from "@/queries/teachers";
     import { type ClassesResponse, type ClassResponse } from "@/controllers/classes";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
-    import { useCreateClassMutation } from "@/queries/classes";
+    import { useClassesQuery, useClassTeacherInvitationsQuery, useCreateClassMutation } from "@/queries/classes";
+    import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations";
 
     const { t } = useI18n();
 
@@ -24,7 +25,9 @@
 
     // Fetch all classes of the logged in teacher
     const classesQuery = useTeacherClassesQuery(username, true);
+    const allClassesQuery = useClassesQuery();
     const { mutate } = useCreateClassMutation();
+    const getInvitationsQuery = useClassTeacherInvitationsQuery(username);
 
     // Boolean that handles visibility for dialogs
     // Creating a class will generate a popup with the generated code
@@ -33,19 +36,14 @@
     // Code generated when new class was created
     const code = ref<string>("");
 
-    // TODO: waiting on frontend controllers
-    const invitations = ref<TeacherInvitationDTO[]>([]);
-
     // Function to handle a accepted invitation request
     function acceptRequest(): void {
         //TODO: avoid linting issues when merging by filling the function
-        invitations.value = [];
     }
 
     // Function to handle a denied invitation request
     function denyRequest(): void {
         //TODO: avoid linting issues when merging by filling the function
-        invitations.value = [];
     }
 
     // Teacher should be able to set a displayname when making a class
@@ -250,13 +248,17 @@
                     </tr>
                 </thead>
                 <tbody>
+                    <using-query-result
+                        :query-result="getInvitationsQuery"
+                        v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
+                    >
+                    <using-query-result :query-result="allClassesQuery" v-slot="classesResponse: {data: ClassesResponse}">
                         <tr
-                        v-for="i in invitations"
+                            v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
                             :key="i.classId"
                         >
                             <td>
-                            {{ i.classId }}
+                                {{ (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0] }}
-                            <!-- TODO fetch display name via classId because db only returns classId field -->
                             </td>
                             <td>{{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}</td>
                             <td class="text-right">
@@ -277,6 +279,8 @@
                                 </div>
                             </td>
                         </tr>
+                    </using-query-result>
+                    </using-query-result>
                 </tbody>
             </v-table>
         </div>