Groupspage restylen + frontend testen

frontend/src/components/buttons/GroupButtons.vue

@@ -1,20 +1,11 @@
 <template>
-    <v-btn v-if="canLeaveGroup" @click="leaveGroupAndRedirect">
+    <v-btn v-if="canLeaveGroup" @click="leaveGroupAndRedirect" variant="flat">
         {{ $t("group.leave_group") }}
     </v-btn>
-    <v-btn v-else-if="canJoinGroup" @click="joinGroupAndRedirect">
+    <v-btn v-else-if="canJoinGroup" @click="joinGroupAndRedirect" variant="flat">
         {{ $t("group.join_group") }}
     </v-btn>
-    <v-btn
-        v-if="isTeacher"
-        @click="
-            () =>
-                removeGroup({
-                    groupId: group.id,
-                    projectId: project.id,
-                })
-        "
-    >
+    <v-btn v-if="isTeacher" @click="removeGroupAndRedirect" variant="flat">
         {{ $t("group.remove_group") }}
     </v-btn>
 </template>
@@ -83,6 +74,17 @@ const leaveGroupAndRedirect = async () => {
     await leaveGroup({ groupId: group.value.id, projectId: project.value.id });
     router.push(`/project/${project.value.id}/groups`);
 };
+
+const removeGroupAndRedirect = async () => {
+    await removeGroup({ groupId: group.value.id, projectId: project.value.id });
+    router.push(`/project/${project.value.id}/groups`);
+};
 </script>
 
-<style scoped></style>
+<style scoped>
+.v-btn {
+    text-decoration: underline;
+    background-color: rgb(var(--v-theme-secondary));
+    padding: 2px;
+}
+</style>

frontend/src/components/home/cards/GroupCard.vue → frontend/src/components/groups/GroupCard.vue

@@ -1,15 +1,16 @@
 <template>
-    <v-card class="v-card-padding">
+    <v-card class="groupcard" variant="flat">
         <v-row>
-            <v-col cols="8">
-                <router-link :to="`/groups/${group.id}`">
-                    {{ group.team_name }}
-                </router-link>
+            <v-col cols="7">
+                <StudentsDialog :students="group.members" :title="group.team_name" />
+                <v-btn v-if="isTeacher" variant="flat" @click="toGroupPage">
+                    {{ $t("group.to_grouppage") }}
+                </v-btn>
             </v-col>
             <v-col cols="2">
                 {{ amountOfMembers + "/" + project.capacity }}
             </v-col>
-            <v-col cols="2">
+            <v-col cols="3">
                 <GroupButtons
                     :amountOfMembers="amountOfMembers"
                     :group="group"
@@ -28,6 +29,8 @@ import type Project from "@/models/Project";
 import type Group from "@/models/Group";
 import type User from "@/models/User";
 import GroupButtons from "@/components/buttons/GroupButtons.vue";
+import StudentsDialog from "@/components/groups/StudentsDialog.vue";
+import router from "@/router";
 
 const props = defineProps<{
     group: Group;
@@ -41,12 +44,27 @@ const { group, project, user, isTeacher } = toRefs(props);
 const amountOfMembers = computed(() => {
     return group.value.members.length;
 });
+
+const toGroupPage = async () => {
+    router.push(`/groups/${group.value.id}`);
+};
 </script>
 
 <style scoped>
-.v-card-padding {
-    padding: 5px;
-    margin-bottom: 5px;
+.groupcard {
+    margin: 5px 0 5px 0;
     height: 50px;
+    background-color: rgb(var(--v-theme-secondary));
+}
+
+.v-row {
+    display: flex;
+    align-items: center;
+}
+
+.v-btn {
+    text-decoration: underline;
+    background-color: rgb(var(--v-theme-secondary));
+    padding: 2px;
 }
 </style>

frontend/src/components/AllstudentsDialog.vue → frontend/src/components/groups/StudentsDialog.vue

@@ -1,10 +1,8 @@
 <template>
-    <v-card class="v-card-padding">
-        <div @click="openDialog" class="dialog-link">{{ $t("group.all_students") }}</div>
-    </v-card>
+    <v-btn @click="openDialog" class="dialog-link" variant="outlined">{{ title }}</v-btn>
     <v-dialog v-model="dialog" max-width="500px" max-height="500px">
         <v-card>
-            <v-card-title>{{ $t("group.all_students_course") }}</v-card-title>
+            <v-card-title>{{ title }}</v-card-title>
             <v-card-text class="student-list">
                 <div v-if="students.length > 0">
                     <v-card-item v-for="(student, index) in students" :key="index">
@@ -16,7 +14,7 @@
                 </div>
             </v-card-text>
             <v-card-actions>
-                <v-btn color="primary" @click="closeDialog">{{ $t("group.close") }}</v-btn>
+                <v-btn @click="closeDialog">{{ $t("group.close") }}</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -28,6 +26,7 @@ import { ref, toRefs } from "vue";
 
 const props = defineProps<{
     students: User[] | null;
+    title: string;
 }>();
 
 const { students } = toRefs(props);
@@ -49,12 +48,15 @@ function closeDialog() {
 }
 
 .dialog-link {
-    cursor: pointer;
-    color: blue;
-    text-decoration: underline;
+    margin: 15px;
 }
+
 .v-card-padding {
     padding: 5px;
     margin-bottom: 5px;
 }
+
+.dialog-link {
+    background-color: rgb(var(--v-theme-secondary));
+}
 </style>

frontend/src/i18n/locales/en.ts

@@ -125,6 +125,7 @@ export default {
         close: "close",
         all_students: "All students",
         all_students_course: "All students in course:",
+        to_grouppage: "To grouppage",
     },
     about: {
         about: "About this project",

frontend/src/i18n/locales/nl.ts

@@ -126,6 +126,7 @@ export default {
         close: "sluiten",
         all_students: "Alle studenten",
         all_students_course: "Alle studenten in vak:",
+        to_grouppage: "Naar groepspagina",
     },
     about: {
         about: "Over dit project",

frontend/src/views/GroupView.vue

@@ -9,7 +9,7 @@
             <h2>{{ "Project: " + project!.name }}</h2>
             <v-card>
                 <v-card-item :title="$t('group.members')">
-                    <div v-if="group!.members.length">
+                    <div v-if="group!.members.length" class="members">
                         <v-row
                             v-for="(member, index) in group!.members"
                             :key="index"
@@ -21,6 +21,7 @@
                                     v-if="isTeacher"
                                     prepend-icon="mdi-close"
                                     color="red"
+                                    variant="flat"
                                     @click="
                                         () => removeStudent({ groupId: group!.id, uid: member.uid })
                                     "
@@ -30,7 +31,7 @@
                             </v-col>
                         </v-row>
                     </div>
-                    <div v-else>
+                    <div v-else class="members">
                         {{ $t("group.no_members_found") }}
                     </div>
                 </v-card-item>
@@ -104,4 +105,13 @@ const amountOfMembers = computed(() => {
 const { mutateAsync: removeStudent } = useRemoveUserFromGroupMutation();
 </script>
 
-<style scoped></style>
+<style scoped>
+.v-card {
+    margin-top: 15px;
+    background-color: rgb(var(--v-theme-secondary));
+}
+
+.members {
+    margin-top: 15px;
+}
+</style>

frontend/src/views/GroupsView.vue

@@ -4,13 +4,14 @@
         <h1 v-else-if="isDataError" class="welcome">{{ $t("group.error") }}</h1>
         <div v-else class="projectInfo">
             <h2>{{ "Project: " + project!.name }}</h2>
+            <StudentsDialog :students="allStudents" :title="$t('group.all_students')" />
+            <v-divider class="border-opacity-50"></v-divider>
             <div v-if="groups.length > 0">
                 <v-row>
-                    <v-col cols="8">{{ $t("group.groups") }}</v-col>
+                    <v-col cols="7">{{ $t("group.groups") }}</v-col>
                     <v-col cols="2">{{ $t("group.members") }}</v-col>
-                    <v-col cols="2">{{ $t("group.actions") }}</v-col>
+                    <v-col cols="3">{{ $t("group.actions") }}</v-col>
                 </v-row>
-                <AllstudentsDialog :students="allStudents" />
                 <GroupCard
                     v-for="group in groups"
                     :key="group.id"
@@ -26,7 +27,9 @@
                     <v-col cols="8"> {{ $t("group.not_found2") }}</v-col>
                 </v-row>
             </div>
-            <v-btn v-if="isTeacher" @click="createGroup">{{ $t("group.create_group") }}</v-btn>
+            <v-btn v-if="isTeacher" @click="createGroup" variant="flat">{{
+                $t("group.create_group")
+            }}</v-btn>
         </div>
     </v-container>
 </template>
@@ -35,11 +38,11 @@
 import { useCreateGroupsMutation, useProjectGroupsQuery } from "@/queries/Group";
 import { computed, toRefs } from "vue";
 import { useProjectQuery } from "@/queries/Project";
-import GroupCard from "@/components/home/cards/GroupCard.vue";
+import GroupCard from "@/components/groups/GroupCard.vue";
 import { useCurrentUserQuery } from "@/queries/User";
 import { type GroupForm } from "@/models/Group";
 import { useSubjectInstructorsQuery, useSubjectStudentsQuery } from "@/queries/Subject";
-import AllstudentsDialog from "@/components/AllstudentsDialog.vue";
+import StudentsDialog from "@/components/groups/StudentsDialog.vue";
 
 const props = defineProps<{
     projectId: number;
@@ -116,10 +119,19 @@ async function createGroup() {
 </script>
 
 <style scoped>
+.v-container {
+    padding: 25px;
+}
+
 .group-card {
     height: 50px; /* Adjust the height as needed */
     margin-bottom: 5px; /* Add margin to separate cards */
     display: flex; /* Use flexbox */
     align-items: center; /* Center items vertically */
 }
+
+.v-divider {
+    margin-bottom: 15px;
+    margin-top: 15px;
+}
 </style>