Group enhancement

frontend/src/components/AllstudentsDialog.vue

@@ -8,7 +8,7 @@
             <v-card-text class="student-list">
                 <div v-if="students.length > 0">
                     <v-card-item v-for="(student, index) in students" :key="index">
-                        {{ student.given_name }}
+                        {{ student.given_name + " " + student.surname }}
                     </v-card-item>
                 </div>
                 <div v-else>

frontend/src/components/buttons/GroupButtons.vue

@@ -1,8 +1,8 @@
 <template>
-    <v-btn v-if="canLeaveGroup" @click="() => leaveGroup({ groupId: group.id })">
+    <v-btn v-if="canLeaveGroup" @click="leaveGroupAndRedirect">
         {{ $t("group.leave_group") }}
     </v-btn>
-    <v-btn v-else-if="canJoinGroup" @click="() => joinGroup({ groupId: group.id })">
+    <v-btn v-else-if="canJoinGroup" @click="joinGroupAndRedirect">
         {{ $t("group.join_group") }}
     </v-btn>
     <v-btn v-if="isTeacher" @click="() => removeGroup({ groupId: group.id })">
@@ -21,6 +21,7 @@ import {
     useRemoveGroupMutation,
     useUserGroupsQuery,
 } from "@/queries/Group";
+import router from "@/router";
 
 const props = defineProps<{
     group: Group;
@@ -64,6 +65,16 @@ const { mutateAsync: leaveGroup } = useLeaveGroupUserMutation();
 const { mutateAsync: joinGroup } = useJoinGroupUserMutation();
 
 const { mutateAsync: removeGroup } = useRemoveGroupMutation();
+
+const joinGroupAndRedirect = async () => {
+    await joinGroup({ groupId: group.value.id });
+    router.push(`/groups/${group.value.id}`);
+};
+
+const leaveGroupAndRedirect = async () => {
+    await leaveGroup({ groupId: group.value.id });
+    router.push(`/project/${project.value.id}/groups`);
+};
 </script>
 
 <style scoped></style>

frontend/src/components/project/ProjectInfo.vue

@@ -19,7 +19,7 @@
                     class="ma-2"
                     prepend-icon="mdi-account"
                 >
-                    {{ instructor?.given_name }}
+                    {{ getAbbreviatedName(instructor) }}
                 </v-chip>
             </v-card-item>
             <v-card-item>
@@ -56,6 +56,13 @@ const renderQuillContent = (content: string) => {
     quill.root.innerHTML = content;
     return quill.root.innerHTML;
 };
+
+const getAbbreviatedName = (instructor: User) => {
+    if (instructor) {
+        return instructor.given_name.charAt(0).toUpperCase() + ". " + instructor.surname;
+    }
+    return "";
+};
 </script>
 
 <style scoped>

frontend/src/components/user/UserInfo.vue

@@ -1,5 +1,7 @@
 <template>
-    <h2 class="welcome">{{ $t("home.welcome", { name: user.given_name }) }}!</h2>
+    <h2 class="welcome">
+        {{ $t("home.welcome", { name: user.given_name, surname: user.surname }) }}!
+    </h2>
     <v-switch
         :model-value="user.is_admin"
         label="is_admin"

frontend/src/views/GroupView.vue

@@ -15,7 +15,7 @@
                             :key="index"
                             align="center"
                         >
-                            <v-col>{{ member.given_name }}</v-col>
+                            <v-col>{{ member.given_name + " " + member.surname }}</v-col>
                             <v-col>
                                 <v-btn
                                     v-if="isTeacher"

frontend/tests/components/project/ProjectInfo.spec.ts

@@ -11,7 +11,7 @@ const mockProject = {
 }
 
 const mockInstructors = [
-    {uid: "1", given_name: "instructor 1"}
+    {uid: "1", given_name: "instructor 1", surname: "Doe"}
 ]
 
 const mockSubject = {
@@ -46,7 +46,7 @@ describe("ProjectInfo", async () => {
         expect(text).toContain("projectname")
         expect(text).toContain("subjectname")
         expect(text).toContain("Capaciteit: 2")
-        expect(text).toContain("instructor 1")
+        expect(text).toContain("I. Doe")
         expect(text).toContain("this is a testassignment")
 
     });
@@ -66,7 +66,7 @@ describe("ProjectInfo", async () => {
         expect(text).toContain("projectname")
         expect(text).toContain("subjectname")
         expect(text).toContain("Capaciteit: 2")
-        expect(text).toContain("instructor 1")
+        expect(text).toContain("I. Doe")
         expect(text).toContain("this is a testassignment")
     })
 });