Implement show all students in groups

frontend/src/components/AllstudentsDialog.vue

@@ -0,0 +1,60 @@
+<template>
+    <v-card class="v-card-padding">
+        <div @click="openDialog" class="dialog-link">{{ $t("group.all_students") }}</div>
+    </v-card>
+    <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-text class="student-list">
+                <div v-if="students.length > 0">
+                    <v-card-item v-for="(student, index) in students" :key="index">
+                        {{ student.given_name }}
+                    </v-card-item>
+                </div>
+                <div v-else>
+                    {{ $t("group.no_students") }}
+                </div>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn color="primary" @click="closeDialog">{{ $t("group.close") }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import User from "@/models/User";
+import { ref, toRefs } from "vue";
+
+const props = defineProps<{
+    students: User[] | null;
+}>();
+
+const { students } = toRefs(props);
+
+const dialog = ref(false);
+
+function openDialog() {
+    dialog.value = true;
+}
+
+function closeDialog() {
+    dialog.value = false;
+}
+</script>
+
+<style scoped>
+.student-list {
+    overflow-y: auto;
+}
+
+.dialog-link {
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+}
+.v-card-padding {
+    padding: 5px;
+    margin-bottom: 5px;
+}
+</style>

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

@@ -44,5 +44,7 @@ const amountOfMembers = computed(() => {
 <style scoped>
 .v-card-padding {
     padding: 5px;
+    margin-bottom: 5px;
+    height: 50px;
 }
 </style>

frontend/src/i18n/locales/en.ts

@@ -109,6 +109,7 @@ export default {
     group: {
         not_found: "Group not found",
         not_found2: "No groups found",
+        error: "Error loading page",
         groups: "Groups:",
         members: "Members:",
         actions: "Actions:",
@@ -118,5 +119,9 @@ export default {
         leave_group: "Leave group",
         remove_group: "Delete group",
         create_group: "New group",
+        no_students: "No students found",
+        close: "close",
+        all_students: "All students",
+        all_students_course: "All students in course:",
     },
 };

frontend/src/i18n/locales/nl.ts

@@ -110,6 +110,7 @@ export default {
     group: {
         not_found: "Groep niet gevonden",
         not_found2: "Geen groepen teruggevonden",
+        error: "Fout bij het laden van de pagina",
         groups: "Groepen:",
         members: "Leden:",
         actions: "Acties:",
@@ -119,5 +120,9 @@ export default {
         leave_group: "Verlaten",
         remove_group: "Groep verwijderen",
         create_group: "Nieuwe groep",
+        no_students: "Geen studenten gevonden",
+        close: "sluiten",
+        all_students: "Alle studenten",
+        all_students_course: "Alle studenten in vak:",
     },
 };

frontend/src/views/GroupsView.vue

@@ -1,22 +1,30 @@
 <template>
     <v-container>
         <h1 v-if="isDataLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
-        <h1 v-else-if="isDataError" class="welcome">{{ $t("group.not_found2") }}</h1>
+        <h1 v-else-if="isDataError" class="welcome">{{ $t("group.error") }}</h1>
         <div v-else class="projectInfo">
             <h2>{{ "Project: " + project!.name }}</h2>
-            <v-row>
-                <v-col cols="8">{{ $t("group.groups") }}</v-col>
-                <v-col cols="2">{{ $t("group.members") }}</v-col>
-                <v-col cols="2">{{ $t("group.actions") }}</v-col>
-            </v-row>
-            <GroupCard
-                v-for="group in groups"
-                :key="group.id"
-                :project="project!"
-                :group="group"
-                :user="user!"
-                class="group-card"
-            />
+            <div v-if="groups.length > 0">
+                <v-row>
+                    <v-col cols="8">{{ $t("group.groups") }}</v-col>
+                    <v-col cols="2">{{ $t("group.members") }}</v-col>
+                    <v-col cols="2">{{ $t("group.actions") }}</v-col>
+                </v-row>
+                <AllstudentsDialog :students="allStudents" />
+                <GroupCard
+                    v-for="group in groups"
+                    :key="group.id"
+                    :project="project!"
+                    :group="group"
+                    :user="user!"
+                    class="group-card"
+                />
+            </div>
+            <div v-else>
+                <v-row>
+                    <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>
         </div>
     </v-container>
@@ -29,6 +37,8 @@ import { useProjectQuery } from "@/queries/Project";
 import GroupCard from "@/components/home/cards/GroupCard.vue";
 import { useUserQuery } from "@/queries/User";
 import { type GroupForm } from "@/models/Group";
+import { useSubjectStudentsQuery } from "@/queries/Subject";
+import AllstudentsDialog from "@/components/AllstudentsDialog.vue";
 
 const props = defineProps<{
     projectId: number;
@@ -50,11 +60,23 @@ const {
 
 const { data: user, isLoading: isUserLoading, isError: isUserError } = useUserQuery(null);
 
+const {
+    data: allStudents,
+    isLoading: isUsersLoading,
+    isError: isUsersError,
+} = useSubjectStudentsQuery(computed(() => project.value?.subject_id));
+
 const isDataLoading = computed(
-    () => isProjectLoading.value || isGroupLoading.value || isUserLoading.value
+    () =>
+        isProjectLoading.value ||
+        isGroupLoading.value ||
+        isUserLoading.value ||
+        isUsersLoading.value
 );
 
-const isDataError = computed(() => isProjectError.value || isGroupError.value || isUserError.value);
+const isDataError = computed(
+    () => isProjectError.value || isGroupError.value || isUserError.value || isUsersError.value
+);
 
 const isTeacher = computed(() => user.value?.is_teacher || false);
 

frontend/src/views/ProjectsView.vue

@@ -37,7 +37,7 @@ import type Project from "@/models/Project";
 const { data: projects, isLoading, isError } = useProjectsQuery();
 const noProjectsFound = computed(() => projects.value?.length === 0);
 
-const activeButton = ref("");
+const activeButton = ref("notFinished");
 
 const filteredProjects = computed(() => {
     if (!projects.value) return [];