From a3caff39c2803def7063dd84d07145b2176480d8 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 29 Apr 2024 12:56:47 +0200
Subject: [PATCH 01/68] fixed some skeleton loaders and grid layout

---
 .../src/components/subjects/SubjectCard.vue   | 26 +++++--
 .../subjects/SubjectsHeaderCard.vue           | 71 ++++++++++++++-----
 .../subjects/SubjectsHeaderContainer.vue      |  6 +-
 frontend/src/views/SubmitView.vue             |  2 +-
 frontend/src/views/subject/SubjectsView.vue   | 16 +++--
 5 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/subjects/SubjectCard.vue b/frontend/src/components/subjects/SubjectCard.vue
index 2e125cf0..3752afdc 100644
--- a/frontend/src/components/subjects/SubjectCard.vue
+++ b/frontend/src/components/subjects/SubjectCard.vue
@@ -1,7 +1,11 @@
 <template>
-    <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card rounded="xl" class="subject-card" width="50%">
-            <v-skeleton-loader :loading="isLoading">
+    <v-skeleton-loader type="card" class="card-loader">
+        <router-link
+            :to="{ name: 'subject', params: { subjectId: subject.id } }"
+            class="router-link"
+        >
+            <v-card rounded="xl" class="subject-card">
+
                 <v-img
                     src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
                     class="align-end"
@@ -15,9 +19,11 @@
                         <v-icon class="">mdi-chevron-right</v-icon>
                     </v-card-title>
                 </v-img>
-            </v-skeleton-loader>
-        </v-card>
-    </router-link>
+            </v-card>
+        </router-link>
+    </v-skeleton-loader>
+
+
 </template>
 
 <script setup lang="ts">
@@ -30,8 +36,14 @@ defineProps<{
 </script>
 
 <style scoped>
+
+.card-loader {
+    border-radius: 25px;
+}
+
 .router-link {
     text-decoration: none;
+    width: 100%;
 }
 
 .subject-card {
@@ -39,6 +51,6 @@ defineProps<{
     flex-direction: column;
     justify-content: space-between;
     position: relative;
-    margin-top: 10px;
+    width: 100%;
 }
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index 4734454b..3e9c0ea3 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -1,42 +1,57 @@
 <template>
-    <v-card variant="text" class="title-card" height="165" width="50%" rounded="xl">
-        <v-skeleton-loader :loading="isLoading" type="card" color="white">
+    <v-skeleton-loader
+        type="card"
+        class="card-loader"
+    >
+        <v-card
+            variant="text"
+            class="title-card"
+            rounded="xl"
+            width="100%"
+        >
             <v-row>
                 <v-col>
                     <v-card-title class="title">
                         {{ $t("subjects.title") }}
                     </v-card-title>
                     <v-card-text>
-                        <HeaderSubtitleButton
-                            :title="$t('subject.academy_year') + ' ' + academicYears[0]"
-                            :clickable="true"
-                            :active="true"
-                        ></HeaderSubtitleButton>
-                        <v-chip-group>
-                            <v-chip
-                                v-for="(academicYear, index) in academicYears"
-                                :key="index"
-                                color="primary"
-                                class="ma-1"
+                        <div class="chip_container">
+                            <v-chip-group
+                                mandatory
+                                v-model="activeAcademicYear"
+                                column
                             >
-                                {{ academicYear }}
-                            </v-chip>
-                        </v-chip-group>
+                                <v-chip
+                                    v-for="(academicYear, index) in academicYears"
+                                    :key="index"
+                                    :value="index"
+                                    color="primary"
+                                    class="ma-1"
+                                    variant="tonal"
+                                >
+                                    {{ academicYear }}
+                                </v-chip>
+                            </v-chip-group>
+                        </div>
+
                     </v-card-text>
                 </v-col>
             </v-row>
-        </v-skeleton-loader>
-    </v-card>
+        </v-card>
+    </v-skeleton-loader>
+
 </template>
 
 <script setup lang="ts">
-import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
+
+import {ref} from "vue";
 
 defineProps<{
     isLoading: boolean;
 }>();
 
 const academicYears = ["2023-2024", "2022-2023", "2021-2022"];
+const activeAcademicYear = ref(0);
 </script>
 
 <style scoped>
@@ -53,4 +68,22 @@ const academicYears = ["2023-2024", "2022-2023", "2021-2022"];
     margin-bottom: 12px;
     font-family: "Poppins", sans-serif;
 }
+
+.chip_container {
+    overflow-x: auto;
+}
+
+.card-loader {
+    border-radius: 25px;
+
+}
+
+.v-select__selections {
+
+}
+
+.v-chip {
+    overflow: initial;
+}
+
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
index 399c2d3d..754c7881 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
@@ -1,5 +1,9 @@
 <template>
-    <SubjectsHeaderCard :is-loading="isLoading"> </SubjectsHeaderCard>
+    <v-row>
+        <v-col cols="6">
+            <SubjectsHeaderCard :is-loading="isLoading"></SubjectsHeaderCard>
+        </v-col>
+    </v-row>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/SubmitView.vue b/frontend/src/views/SubmitView.vue
index 4fbdd550..8c6a611e 100644
--- a/frontend/src/views/SubmitView.vue
+++ b/frontend/src/views/SubmitView.vue
@@ -1,4 +1,4 @@
-<template>
+    <template>
     <v-container>
         <SubmitCard :projectId="projectId" />
     </v-container>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index df21e02e..13c2c821 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -10,12 +10,12 @@
             </v-col>
         </v-row>
         <v-row>
-            <v-col>
+            <v-col v-for="(subject, index) in data" :key="index" cols="6">
                 <SubjectCard
-                    v-for="(subject, index) in data"
                     :subject="subject"
                     :is-loading="isLoading"
-                    :key="index"
+
+                    class="subject-card"
                 >
                 </SubjectCard>
             </v-col>
@@ -32,4 +32,12 @@ import SubjectCard from "@/components/subjects/SubjectCard.vue";
 const { data, error, isLoading, isError } = useSubjectsQuery();
 </script>
 
-<style scoped></style>
+
+
+<style scoped>
+
+.subject-card {
+    margin-top: 10px;  /* Adjust as needed */
+}
+
+</style>

From 3269564b20fb8a3192aa1d15d328a39ee92be198 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 29 Apr 2024 14:18:34 +0200
Subject: [PATCH 02/68] fixed scrolling

---
 .../body/projects/SubjectProjectPage.vue      |  2 +-
 .../projects/list/SubjectProjectsList.vue     | 11 ++--
 .../subject/header/SubjectHeaderContainer.vue |  2 +-
 .../subject/header/SubjectHeaderImage.vue     |  7 +--
 .../subjects/SubjectsHeaderCard.vue           |  8 ---
 .../subjects/SubjectsHeaderContainer.vue      | 10 +++-
 .../views/subject/CreatePatchSubjectView.vue  | 12 ++++
 frontend/src/views/subject/SubjectView.vue    | 59 +++++++++++--------
 frontend/src/views/subject/SubjectsView.vue   |  8 +--
 9 files changed, 72 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/views/subject/CreatePatchSubjectView.vue

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index 84d96ea7..323c6183 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -119,7 +119,7 @@ const assignmentLength = 100;
 
 .project-container {
     overflow: auto;
-    max-height: 400px;
+    max-height: 55vh;
     scrollbar-width: none; /* For Firefox */
 }
 
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index 7893885a..b4d61113 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="projects-card" height="400px">
+    <v-card variant="text" class="projects-card">
         <v-card-title>
             <span class="title">{{ $t("subject.projects") }}</span>
         </v-card-title>
@@ -25,13 +25,16 @@
                 ></HeaderSubtitleButton>
             </div>
         </v-card-subtitle>
-        <v-skeleton-loader type="card" :loading="isLoading" color="white">
-            <v-card-text class="projects-tab">
+        <v-skeleton-loader type="card" color="white">
+            <v-card-text>
                 <v-tabs
                     v-if="projects!.length > 0"
                     direction="vertical"
                     v-model="selectedTab"
                     class="projects-tab"
+                    show-arrows
+                    prev-icon="mdi-chevron-up"
+                    next-icon="mdi-chevron-down"
                 >
                     <v-tab v-for="project in projects" :key="project.id">
                         <SubjectTab :projectName="project.name"></SubjectTab>
@@ -97,9 +100,9 @@ watch(activeButton, (newVal: string) => {
 }
 
 .projects-tab {
-    flex-grow: 1;
     overflow-y: auto;
     scrollbar-width: none; /* For Firefox */
+    max-height: 35vh;
 }
 
 .projects-tab::-webkit-scrollbar {
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
index c3953968..fd2bad6f 100644
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <SubjectHeaderImage :imagePath="imagePath" :is-loading="isLoading">
+            <SubjectHeaderImage :imagePath="imagePath">
             </SubjectHeaderImage>
         </v-col>
         <v-col cols="8">
diff --git a/frontend/src/components/subject/header/SubjectHeaderImage.vue b/frontend/src/components/subject/header/SubjectHeaderImage.vue
index 2f079900..165e68c9 100644
--- a/frontend/src/components/subject/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderImage.vue
@@ -1,19 +1,18 @@
 <template>
-    <v-skeleton-loader type="image" class="header-img" :loading="isLoading">
-        <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img"></v-img>
+    <v-skeleton-loader type="image" class="header-img">
+        <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath"></v-img>
     </v-skeleton-loader>
 </template>
 
 <script setup lang="ts">
 defineProps<{
     imagePath: string;
-    isLoading: boolean;
 }>();
 </script>
 
 <style scoped>
 .header-img {
-    border-radius: 20px;
+    border-radius: 25px;
     height: 165px;
 }
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index 3e9c0ea3..82af9850 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -78,12 +78,4 @@ const activeAcademicYear = ref(0);
 
 }
 
-.v-select__selections {
-
-}
-
-.v-chip {
-    overflow: initial;
-}
-
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
index 754c7881..8c7cccc9 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
@@ -3,15 +3,23 @@
         <v-col cols="6">
             <SubjectsHeaderCard :is-loading="isLoading"></SubjectsHeaderCard>
         </v-col>
+        <v-col>
+            <SubjectHeaderImage
+                image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"></SubjectHeaderImage>
+        </v-col>
     </v-row>
 </template>
 
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subjects/SubjectsHeaderCard.vue";
+import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.vue";
 
 defineProps<{
     isLoading: boolean;
 }>();
 </script>
 
-<style scoped></style>
+<style scoped>
+
+
+</style>
diff --git a/frontend/src/views/subject/CreatePatchSubjectView.vue b/frontend/src/views/subject/CreatePatchSubjectView.vue
new file mode 100644
index 00000000..7d755ae5
--- /dev/null
+++ b/frontend/src/views/subject/CreatePatchSubjectView.vue
@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 6e856b37..f4c171f1 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -3,29 +3,42 @@
         <p>Error: {{ error }}</p>
     </div>
 
-    <BackgroundContainer v-else>
-        <v-row>
-            <v-col>
-                <SubjectHeaderContainer
-                    v-if="subject"
-                    :title="subject!.name"
-                    :instructors="subject!.instructors"
-                    academic-year="2023-2024"
-                    :is-loading="isLoading"
-                    image-path="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
-                ></SubjectHeaderContainer>
-            </v-col>
-        </v-row>
-        <v-row>
-            <v-col>
-                <SubjectBody
-                    v-if="subject"
-                    :projects="subject!.projects"
-                    :is-loading="isLoading"
-                ></SubjectBody>
-            </v-col>
-        </v-row>
-    </BackgroundContainer>
+    <v-row v-else>
+        <v-col cols="1">
+            <router-link to="/subjects">
+                <v-btn>
+                    <v-icon>mdi-arrow-left</v-icon>
+                </v-btn>
+            </router-link>
+        </v-col>
+        <v-col>
+            <BackgroundContainer>
+                <v-row>
+                    <v-col>
+                        <SubjectHeaderContainer
+                            v-if="subject"
+                            :title="subject!.name"
+                            :instructors="subject!.instructors"
+                            academic-year="2023-2024"
+                            :is-loading="isLoading"
+                            image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
+                        ></SubjectHeaderContainer>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col>
+                        <SubjectBody
+                            v-if="subject"
+                            :projects="subject!.projects"
+                            :is-loading="isLoading"
+                        ></SubjectBody>
+                    </v-col>
+                </v-row>
+            </BackgroundContainer>
+        </v-col>
+    </v-row>
+
+
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 13c2c821..cf46828a 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -14,7 +14,6 @@
                 <SubjectCard
                     :subject="subject"
                     :is-loading="isLoading"
-
                     class="subject-card"
                 >
                 </SubjectCard>
@@ -24,20 +23,19 @@
 </template>
 
 <script setup lang="ts">
-import { useSubjectsQuery } from "@/queries/Subject";
+import {useSubjectsQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
 
-const { data, error, isLoading, isError } = useSubjectsQuery();
+const {data, error, isLoading, isError} = useSubjectsQuery();
 </script>
 
 
-
 <style scoped>
 
 .subject-card {
-    margin-top: 10px;  /* Adjust as needed */
+    margin-top: 10px; /* Adjust as needed */
 }
 
 </style>

From a2b6c92d8b6f19e1a4836c713f684cf89ad1359d Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 29 Apr 2024 14:47:06 +0200
Subject: [PATCH 03/68] changed color of project card and fixed title router
 link

---
 .../body/projects/SubjectProjectPage.vue      | 59 ++++++++++++-------
 .../subject/header/SubjectHeaderCard.vue      |  2 +-
 .../subject/header/SubjectHeaderImage.vue     |  2 +-
 frontend/src/views/subject/SubjectView.vue    |  9 ++-
 4 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index 323c6183..1be15497 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="project-container">
         <v-card class="project-card" variant="text" rounded="xl">
-            <div class="colored-zone"></div>
-
-            <v-card-title class="title">
-                <v-row>
-                    <v-col>
-                        <span>{{ project.name }}</span>
-                    </v-col>
-                    <v-col class="text-right">
-                        <router-link :to="`/project/${project.id}`" class="text-right chevron">
+            <router-link :to="`/project/${project.id}`" class="router">
+                <div class="colored-zone"></div>
+                <v-card-title class="title">
+                    <v-row>
+                        <v-col>
+                            <span>{{ project.name }}</span>
+                        </v-col>
+                        <v-col class="text-right">
                             <v-icon size="small">mdi-arrow-right</v-icon>
-                        </router-link>
-                    </v-col>
-                </v-row>
-            </v-card-title>
-            <v-card-subtitle class="d-block py-3">
+                        </v-col>
+                    </v-row>
+                </v-card-title>
+            </router-link>
+
+            <v-card-text  class="d-block py-3 deadline">
                 <v-icon>mdi-alarm</v-icon>
                 {{ $d(project.deadline, "long") }}
-            </v-card-subtitle>
+            </v-card-text>
 
             <v-card-text>
                 <h2>{{ $t("subject.project.assignment") }}</h2>
@@ -50,11 +50,11 @@
             </div>
         </v-card>
         <v-card class="project-card" rounded="xl" variant="text">
-            <v-card-title class="title">{{ $t("subject.project.group") }}</v-card-title>
+            <v-card-title class="card_title">{{ $t("subject.project.group") }}</v-card-title>
         </v-card>
 
         <v-card class="project-card" rounded="xl" variant="text" height="410px">
-            <v-card-title class="title">{{ $t("subject.project.submissions") }}</v-card-title>
+            <v-card-title class="card_title">{{ $t("subject.project.submissions") }}</v-card-title>
         </v-card>
     </div>
 </template>
@@ -92,28 +92,47 @@ const assignmentLength = 100;
     margin-bottom: 10px;
 }
 
+.router {
+    text-decoration: none;
+    color: inherit;
+}
+.deadline {
+    color: #181818;
+}
+
 .colored-zone {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px; /* Adjust the height as needed */
-    background-color: #eafbff; /* Desired background color */
+    background-color: var(--color-primary); /* Desired background color */
     border-radius: 20px 20px 0 0; /* Rounded corners for top half */
     z-index: -1; /* Ensure the colored zone is behind the card content */
 }
 
 .title {
-    font-size: 28px;
+    font-size: 30px;
+    letter-spacing: -0.5px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    font-family: "Poppins", sans-serif;
+    color: white;
+    text-transform: capitalize;
+}
+
+.card_title {
+    font-size: 24px;
     text-transform: capitalize;
     display: block;
     line-height: 1.2;
     font-weight: 500;
+    color: black;
 }
 
 .chevron {
     margin-right: 10px;
-    color: black;
+    color: white;
     display: block;
 }
 
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index e368af31..deebd003 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -1,6 +1,6 @@
 <template>
     <v-card variant="text" class="title-card" height="165">
-        <v-skeleton-loader :loading="isLoading" type="card" color="white">
+        <v-skeleton-loader type="card" color="white">
             <v-row>
                 <v-col>
                     <v-card-title class="title">
diff --git a/frontend/src/components/subject/header/SubjectHeaderImage.vue b/frontend/src/components/subject/header/SubjectHeaderImage.vue
index 165e68c9..0dcdd5df 100644
--- a/frontend/src/components/subject/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderImage.vue
@@ -1,6 +1,6 @@
 <template>
     <v-skeleton-loader type="image" class="header-img">
-        <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath"></v-img>
+        <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img"></v-img>
     </v-skeleton-loader>
 </template>
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index f4c171f1..550a3552 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -6,7 +6,7 @@
     <v-row v-else>
         <v-col cols="1">
             <router-link to="/subjects">
-                <v-btn>
+                <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
                     <v-icon>mdi-arrow-left</v-icon>
                 </v-btn>
             </router-link>
@@ -57,4 +57,9 @@ const { subjectId } = toRefs(props);
 const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subjectId);
 </script>
 ;
-<style scoped></style>
+<style scoped>
+
+.back-button {
+    margin: 30px;
+}
+</style>

From 56b45a7790521c5f3077021f4cff52ffff927ffa Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 29 Apr 2024 23:58:28 +0200
Subject: [PATCH 04/68] fixed tab scrolling

---
 .../projects/list/SubjectProjectsList.vue     | 65 ++++++++++++++-----
 frontend/src/models/Project.ts                |  2 +-
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index b4d61113..643d8d98 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -4,7 +4,23 @@
             <span class="title">{{ $t("subject.projects") }}</span>
         </v-card-title>
         <v-card-subtitle>
-            <div class="d-flex justify-start filter-btn-container">
+            <v-chip-group
+                v-model="activeButton"
+                column
+                mandatory
+            >
+                <v-chip
+                    v-for="(filter, index) in filterOptions"
+                    :key="index"
+                    :value="FilterOptions[filter]"
+                    color="primary"
+                    variant="tonal"
+                >
+                    {{ $t(`subject.projectsPage.${filter.toLowerCase()}`) }}
+                </v-chip>
+
+            </v-chip-group>
+            <!--div class="d-flex justify-start filter-btn-container">
                 <HeaderSubtitleButton
                     :title="$t('subject.projectsPage.all')"
                     clickable
@@ -23,25 +39,26 @@
                     :active="activeButton === FilterOptions.Completed"
                     @click="activeButton = FilterOptions.Completed"
                 ></HeaderSubtitleButton>
-            </div>
+            </div-->
         </v-card-subtitle>
         <v-skeleton-loader type="card" color="white">
             <v-card-text>
-                <v-tabs
-                    v-if="projects!.length > 0"
-                    direction="vertical"
-                    v-model="selectedTab"
-                    class="projects-tab"
-                    show-arrows
-                    prev-icon="mdi-chevron-up"
-                    next-icon="mdi-chevron-down"
-                >
-                    <v-tab v-for="project in projects" :key="project.id">
-                        <SubjectTab :projectName="project.name"></SubjectTab>
-                    </v-tab>
-                </v-tabs>
-                <div v-else class="placeholder">
-                    <p>No projects available.</p>
+                <div class="scrollable-tabs">
+                    <v-tabs
+                        v-if="projects!.length > 0"
+                        direction="vertical"
+                        v-model="selectedTab"
+                        show-arrows
+                        prev-icon="mdi-chevron-up"
+                        next-icon="mdi-chevron-down"
+                    >
+                        <v-tab v-for="project in projects" :key="project.id">
+                            <SubjectTab :projectName="project.name"></SubjectTab>
+                        </v-tab>
+                    </v-tabs>
+                    <div v-else class="placeholder">
+                        <p>No projects available.</p>
+                    </div>
                 </div>
             </v-card-text>
         </v-skeleton-loader>
@@ -63,6 +80,7 @@ const props = defineProps<{
 
 const selectedTab = ref(props.selectedTab);
 
+const filterOptions = Object.keys(FilterOptions);
 const activeButton = ref(FilterOptions.All);
 
 const emit = defineEmits<{
@@ -74,6 +92,7 @@ watch(selectedTab, (newVal: number | undefined) => {
     if (newVal !== undefined) {
         emit("tab-changed", newVal);
     }
+    console.log("Selected tab changed to", newVal);
 });
 
 watch(activeButton, (newVal: string) => {
@@ -89,6 +108,7 @@ watch(activeButton, (newVal: string) => {
     border-radius: 20px;
     display: flex;
     flex-direction: column;
+    max-height: 60vh;
 }
 
 .title {
@@ -118,6 +138,17 @@ watch(activeButton, (newVal: string) => {
     width: 0; /* For Chrome, Safari, and Opera */
 }
 
+.scrollable-tabs {
+    overflow-y: auto;
+    scrollbar-width: none; /* For Firefox */
+    max-height: 55vh;
+}
+
+.scrollable-tabs::-webkit-scrollbar {
+    width: 0; /* For Chrome, Safari, and Opera */
+}
+
+
 .placeholder {
     display: flex;
     justify-content: center;
diff --git a/frontend/src/models/Project.ts b/frontend/src/models/Project.ts
index ca9b4f73..8228455a 100644
--- a/frontend/src/models/Project.ts
+++ b/frontend/src/models/Project.ts
@@ -28,6 +28,6 @@ export interface Deadline {
 
 export enum FilterOptions {
     All = "All",
-    Completed = "Completed",
     Active = "Active",
+    Completed = "Completed",
 }

From f3694c50a254666f4f43cbc374edd35822ec001f Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 30 Apr 2024 00:52:05 +0200
Subject: [PATCH 05/68] bug fix v-tabs fixed

---
 .../subject/body/projects/SubjectProjectsPage.vue          | 7 ++++---
 .../subject/body/projects/list/SubjectProjectsList.vue     | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index 0688227b..c03ad45d 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -13,8 +13,8 @@
             <v-window v-model="selectedTab" direction="vertical">
                 <v-window-item
                     v-for="(project, index) in filteredProjects"
-                    :key="index"
-                    :value="index"
+                    :key="project.id"
+                    :value="project.id"
                 >
                     <SubjectProjectPage
                         :selected-tab="selectedTab"
@@ -70,7 +70,8 @@ const updateSelectedTab = (tabIndex: number) => {
 
 const updateFilterOption = (option: FilterOptions) => {
     filterOption.value = option;
-    updateSelectedTab(0);
+
+    updateSelectedTab(filteredProjects.value[0].id);
 };
 </script>
 
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index 643d8d98..39d6e416 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -52,7 +52,7 @@
                         prev-icon="mdi-chevron-up"
                         next-icon="mdi-chevron-down"
                     >
-                        <v-tab v-for="project in projects" :key="project.id">
+                        <v-tab v-for="project in projects" :key="project.id" :value="project.id">
                             <SubjectTab :projectName="project.name"></SubjectTab>
                         </v-tab>
                     </v-tabs>
@@ -95,6 +95,7 @@ watch(selectedTab, (newVal: number | undefined) => {
     console.log("Selected tab changed to", newVal);
 });
 
+
 watch(activeButton, (newVal: string) => {
     emit("filter-changed", FilterOptions[newVal as keyof typeof FilterOptions]);
     selectedTab.value = 0;

From 662398a55d71e2b33a584fc6d36c1bf3fef39eab Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 30 Apr 2024 07:16:06 +0200
Subject: [PATCH 06/68] reverted css button styling removed

---
 .../buttons/HeaderSubtitleButton.vue          |  9 +++++++
 .../projects/list/SubjectProjectsList.vue     | 24 ++-----------------
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/buttons/HeaderSubtitleButton.vue b/frontend/src/components/buttons/HeaderSubtitleButton.vue
index f622ccb6..ba34d3a3 100644
--- a/frontend/src/components/buttons/HeaderSubtitleButton.vue
+++ b/frontend/src/components/buttons/HeaderSubtitleButton.vue
@@ -25,10 +25,19 @@ defineProps<{
 </script>
 
 <style scoped>
+.not-clickable {
+    cursor: default;
+    pointer-events: none;
+}
+
 .subtitle-button {
     margin-right: 10px;
 }
 
+.subtitle-button-active {
+    background-color: #9fb6ff;
+}
+
 .button-text {
     color: #003eff;
     font-weight: 1000;
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index 39d6e416..3773f773 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -20,26 +20,6 @@
                 </v-chip>
 
             </v-chip-group>
-            <!--div class="d-flex justify-start filter-btn-container">
-                <HeaderSubtitleButton
-                    :title="$t('subject.projectsPage.all')"
-                    clickable
-                    :active="activeButton === FilterOptions.All"
-                    @click="activeButton = FilterOptions.All"
-                ></HeaderSubtitleButton>
-                <HeaderSubtitleButton
-                    :title="$t('subject.projectsPage.active')"
-                    clickable
-                    :active="activeButton === FilterOptions.Active"
-                    @click="activeButton = FilterOptions.Active"
-                ></HeaderSubtitleButton>
-                <HeaderSubtitleButton
-                    :title="$t('subject.projectsPage.completed')"
-                    clickable
-                    :active="activeButton === FilterOptions.Completed"
-                    @click="activeButton = FilterOptions.Completed"
-                ></HeaderSubtitleButton>
-            </div-->
         </v-card-subtitle>
         <v-skeleton-loader type="card" color="white">
             <v-card-text>
@@ -109,7 +89,7 @@ watch(activeButton, (newVal: string) => {
     border-radius: 20px;
     display: flex;
     flex-direction: column;
-    max-height: 60vh;
+    max-height: 55vh;
 }
 
 .title {
@@ -142,7 +122,7 @@ watch(activeButton, (newVal: string) => {
 .scrollable-tabs {
     overflow-y: auto;
     scrollbar-width: none; /* For Firefox */
-    max-height: 55vh;
+    max-height: 30vh;
 }
 
 .scrollable-tabs::-webkit-scrollbar {

From 7086dbba5282794c145f47aed267007929f9245f Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 30 Apr 2024 16:32:04 +0200
Subject: [PATCH 07/68] fixed router link signature

---
 .../subject/body/projects/SubjectProjectPage.vue           | 7 ++++---
 .../subject/body/projects/SubjectProjectsPage.vue          | 2 +-
 .../src/components/subject/header/SubjectHeaderCard.vue    | 5 ++++-
 frontend/src/views/subject/SubjectView.vue                 | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index 1be15497..8f410374 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="project-container">
         <v-card class="project-card" variant="text" rounded="xl">
-            <router-link :to="`/project/${project.id}`" class="router">
+            <router-link :to="{ name: 'project', params: { projectId: project.id } }" class="router">
                 <div class="colored-zone"></div>
                 <v-card-title class="title">
                     <v-row>
@@ -15,7 +15,7 @@
                 </v-card-title>
             </router-link>
 
-            <v-card-text  class="d-block py-3 deadline">
+            <v-card-text class="d-block py-3 deadline">
                 <v-icon>mdi-alarm</v-icon>
                 {{ $d(project.deadline, "long") }}
             </v-card-text>
@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
-import { ref } from "vue";
+import {ref} from "vue";
 
 defineProps<{
     selectedTab: number;
@@ -96,6 +96,7 @@ const assignmentLength = 100;
     text-decoration: none;
     color: inherit;
 }
+
 .deadline {
     color: #181818;
 }
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index c03ad45d..082fcc69 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -12,7 +12,7 @@
         <v-col cols="7">
             <v-window v-model="selectedTab" direction="vertical">
                 <v-window-item
-                    v-for="(project, index) in filteredProjects"
+                    v-for="project in filteredProjects"
                     :key="project.id"
                     :value="project.id"
                 >
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index deebd003..55de93a3 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -2,7 +2,7 @@
     <v-card variant="text" class="title-card" height="165">
         <v-skeleton-loader type="card" color="white">
             <v-row>
-                <v-col>
+                <v-col cols="11">
                     <v-card-title class="title">
                         {{ title }}
                     </v-card-title>
@@ -23,6 +23,9 @@
                         </div>
                     </v-card-text>
                 </v-col>
+                <v-col>
+
+                </v-col>
             </v-row>
         </v-skeleton-loader>
     </v-card>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 550a3552..fdc10c0f 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -5,7 +5,7 @@
 
     <v-row v-else>
         <v-col cols="1">
-            <router-link to="/subjects">
+            <router-link :to="{ name: 'subjects'}">
                 <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
                     <v-icon>mdi-arrow-left</v-icon>
                 </v-btn>

From 2d40e896a77f830f63b36a49edb27d186be89887 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 30 Apr 2024 16:44:34 +0200
Subject: [PATCH 08/68] added isTeacher hook in header

---
 .../subject/header/SubjectHeaderCard.vue          | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index 55de93a3..d1b9f8f7 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -23,6 +23,9 @@
                         </div>
                     </v-card-text>
                 </v-col>
+                    <router-link to="" class="link">
+                        <v-icon>mdi-pencil</v-icon>
+                    </router-link>
                 <v-col>
 
                 </v-col>
@@ -34,6 +37,7 @@
 <script setup lang="ts">
 import type User from "@/models/User";
 import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
+import useIsTeacher from "@/composables/useIsTeacher";
 
 defineProps<{
     title: string;
@@ -41,6 +45,9 @@ defineProps<{
     instructors: User[];
     isLoading: boolean;
 }>();
+
+const { isTeacher } = useIsTeacher();
+
 </script>
 
 <style scoped>
@@ -63,4 +70,12 @@ defineProps<{
     margin-top: 10px;
     margin-bottom: 5px;
 }
+
+.link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
 </style>

From 1fa75f20d9df72cacd20398236f79fc73dfbdefe Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 01:49:25 +0200
Subject: [PATCH 09/68] added basic buttons to view pages

---
 .../src/components/buttons/ActionButton.vue   | 21 ++++++++
 .../subject/header/SubjectHeaderCard.vue      |  6 +--
 frontend/src/views/subject/SubjectView.vue    | 35 +++++++++++--
 frontend/src/views/subject/SubjectsView.vue   | 51 ++++++++++++-------
 4 files changed, 89 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/buttons/ActionButton.vue

diff --git a/frontend/src/components/buttons/ActionButton.vue b/frontend/src/components/buttons/ActionButton.vue
new file mode 100644
index 00000000..2336ce17
--- /dev/null
+++ b/frontend/src/components/buttons/ActionButton.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-btn :prepend-icon="prependIcon">
+        {{ title }}
+    </v-btn>
+</template>
+
+
+<script setup lang="ts">
+
+defineProps<{
+    title: string;
+    prependIcon: string;
+}>();
+
+</script>
+
+
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index d1b9f8f7..561d03c9 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -15,8 +15,8 @@
                         <div class="d-flex justify-start instr-container">
                             <HeaderSubtitleButton
                                 v-for="instructor in instructors"
-                                :key="instructor?.uid"
-                                :title="instructor?.given_name"
+                                :key="instructor.uid"
+                                :title="instructor.given_name"
                                 :clickable="false"
                                 :active="false"
                             ></HeaderSubtitleButton>
@@ -24,7 +24,7 @@
                     </v-card-text>
                 </v-col>
                     <router-link to="" class="link">
-                        <v-icon>mdi-pencil</v-icon>
+                        <v-icon size="large">mdi-square-edit-outline</v-icon>
                     </router-link>
                 <v-col>
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index fdc10c0f..f382f8bf 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -36,25 +36,48 @@
                 </v-row>
             </BackgroundContainer>
         </v-col>
+        <v-col cols="2">
+            <div class="action-btn-container">
+                <router-link to="">
+                    <v-btn prepend-icon="mdi-plus-circle">
+                        Create project
+                    </v-btn>
+                </router-link>
+                <router-link to="">
+                    <v-btn prepend-icon="mdi-content-copy">
+                        Register link
+                        <v-tooltip
+                            activator="parent"
+                            location="start"
+                            max-width="200vw"
+                        >
+                            Copy register link for this subject, this can be shared with students to register for the subject.
+                        </v-tooltip>
+                    </v-btn>
+                </router-link>
+            </div>
+        </v-col>
     </v-row>
 
 
 </template>
 
 <script setup lang="ts">
-import { toRefs } from "vue";
-import { useSubjectDetailsQuery } from "@/queries/Subject";
+import {toRefs} from "vue";
+import {useSubjectDetailsQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";
+import ActionButton from "@/components/buttons/ActionButton.vue";
+import NavButton from "@/components/navigation/NavButton.vue";
 
 const props = defineProps<{
     subjectId: number;
 }>();
 
-const { subjectId } = toRefs(props);
+const {subjectId} = toRefs(props);
 
-const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subjectId);
+const {data: subject, error, isLoading, isError} = useSubjectDetailsQuery(subjectId);
 </script>
 ;
 <style scoped>
@@ -62,4 +85,8 @@ const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subj
 .back-button {
     margin: 30px;
 }
+
+.action-btn-container {
+    margin-top: 30px;
+}
 </style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index cf46828a..205cba56 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -2,24 +2,37 @@
     <div v-if="isError" class="v-container">
         <p>Error: {{ error }}</p>
     </div>
+    <v-row v-else>
+        <v-col cols="10">
+            <BackgroundContainer>
+                <v-row>
+                    <v-col>
+                        <SubjectsHeaderContainer :is-loading="isLoading"></SubjectsHeaderContainer>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col v-for="(subject, index) in data" :key="index" cols="6">
+                        <SubjectCard
+                            :subject="subject"
+                            :is-loading="isLoading"
+                            class="subject-card"
+                        >
+                        </SubjectCard>
+                    </v-col>
+                </v-row>
+            </BackgroundContainer>
+        </v-col>
+        <v-col cols="2">
+            <div class="action-btn-container">
+                <router-link to="">
+                    <v-btn prepend-icon="mdi-plus-circle">
+                        Create subject
+                    </v-btn>
+                </router-link>
+            </div>
+        </v-col>
+    </v-row>
 
-    <BackgroundContainer v-else>
-        <v-row>
-            <v-col>
-                <SubjectsHeaderContainer :is-loading="isLoading"></SubjectsHeaderContainer>
-            </v-col>
-        </v-row>
-        <v-row>
-            <v-col v-for="(subject, index) in data" :key="index" cols="6">
-                <SubjectCard
-                    :subject="subject"
-                    :is-loading="isLoading"
-                    class="subject-card"
-                >
-                </SubjectCard>
-            </v-col>
-        </v-row>
-    </BackgroundContainer>
 </template>
 
 <script setup lang="ts">
@@ -38,4 +51,8 @@ const {data, error, isLoading, isError} = useSubjectsQuery();
     margin-top: 10px; /* Adjust as needed */
 }
 
+.action-btn-container {
+    margin-top: 30px;
+}
+
 </style>

From c0126319b0e901971d1ce76901f8f7cf3e935763 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 02:22:04 +0200
Subject: [PATCH 10/68] router link to create project

---
 frontend/src/views/subject/SubjectView.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index f382f8bf..8aefe13b 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -38,7 +38,7 @@
         </v-col>
         <v-col cols="2">
             <div class="action-btn-container">
-                <router-link to="">
+                <router-link :to="{name: 'create-project', params: { subjectId : subject.id}}">
                     <v-btn prepend-icon="mdi-plus-circle">
                         Create project
                     </v-btn>
@@ -64,12 +64,10 @@
 
 <script setup lang="ts">
 import {toRefs} from "vue";
-import {useSubjectDetailsQuery} from "@/queries/Subject";
+import {useSubjectDetailsQuery, useSubjectUuidQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";
-import ActionButton from "@/components/buttons/ActionButton.vue";
-import NavButton from "@/components/navigation/NavButton.vue";
 
 const props = defineProps<{
     subjectId: number;
@@ -78,6 +76,7 @@ const props = defineProps<{
 const {subjectId} = toRefs(props);
 
 const {data: subject, error, isLoading, isError} = useSubjectDetailsQuery(subjectId);
+const {data: uuid, uuidError, uuidIsLoading, uuidIsError} = useSubjectUuidQuery(subjectId);
 </script>
 ;
 <style scoped>

From 380fe88458d6a5f6e84d3466998b5bbbb1e873c8 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 03:47:53 +0200
Subject: [PATCH 11/68] fetched subject_uuid

---
 frontend/src/models/SubjectDetails.ts      | 1 +
 frontend/src/queries/Subject.ts            | 9 ++++++---
 frontend/src/services/subject.ts           | 5 +++++
 frontend/src/views/subject/SubjectView.vue | 3 +--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/models/SubjectDetails.ts b/frontend/src/models/SubjectDetails.ts
index b142bc55..665afb19 100644
--- a/frontend/src/models/SubjectDetails.ts
+++ b/frontend/src/models/SubjectDetails.ts
@@ -7,4 +7,5 @@ export default interface SubjectDetails {
     instructors: User[];
     students: User[];
     projects: Project[];
+    uuid: string;
 }
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 6cd286d5..c97732d1 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -6,7 +6,7 @@ import {
     getSubjects,
     getSubjectStudents,
     getSubjectByUuid,
-    registerToSubject,
+    registerToSubject, getSubjectUuid,
 } from "@/services/subject";
 import { type Ref, computed } from "vue";
 import type Subject from "@/models/Subject";
@@ -76,12 +76,13 @@ export function useSubjectDetailsQuery(
     return useQuery<SubjectDetails, Error>({
         queryKey: computed(() => createSubjectQueryKey(subjectId.value!, "details")),
         queryFn: async () => {
-            const [subject, instructors, students, projects] = (await Promise.all([
+            const [subject, instructors, students, projects, uuid] = (await Promise.all([
                 getSubject(subjectId.value!),
                 getSubjectInstructors(subjectId.value!),
                 getSubjectStudents(subjectId.value!),
                 getSubjectProjects(subjectId.value!),
-            ])) as [Subject, User[], User[], Project[]];
+                getSubjectUuid(subjectId.value!)
+            ])) as [Subject, User[], User[], Project[], string];
 
             return {
                 id: subject.id,
@@ -89,6 +90,7 @@ export function useSubjectDetailsQuery(
                 instructors,
                 students,
                 projects,
+                uuid
             };
         },
         enabled: () => subjectId.value !== undefined,
@@ -111,3 +113,4 @@ export function registerSubjectQuery(uuid: Ref<string>): UseQueryReturnType<Subj
         enabled: () => false,
     });
 }
+
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index bea6c7e8..a0da0d99 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -40,3 +40,8 @@ export async function registerToSubject(subjectUuid: string): Promise<Subject> {
         method: "POST",
     });
 }
+
+export async function getSubjectUuid(subjectId: number): Promise<string> {
+    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
+    return result.subject_uuid;
+}
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 8aefe13b..2dfe5aaf 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -38,7 +38,7 @@
         </v-col>
         <v-col cols="2">
             <div class="action-btn-container">
-                <router-link :to="{name: 'create-project', params: { subjectId : subject.id}}">
+                <router-link :to="{name: 'create-project', params: { subjectId : subjectId}}">
                     <v-btn prepend-icon="mdi-plus-circle">
                         Create project
                     </v-btn>
@@ -76,7 +76,6 @@ const props = defineProps<{
 const {subjectId} = toRefs(props);
 
 const {data: subject, error, isLoading, isError} = useSubjectDetailsQuery(subjectId);
-const {data: uuid, uuidError, uuidIsLoading, uuidIsError} = useSubjectUuidQuery(subjectId);
 </script>
 ;
 <style scoped>

From bdad1b13d21a438a3f4c782b14b129e89d8867ef Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 07:47:02 +0200
Subject: [PATCH 12/68] added snackbar for register link

---
 .../projects/list/SubjectProjectsList.vue     |  1 -
 frontend/src/queries/Subject.ts               |  4 +-
 frontend/src/views/subject/SubjectView.vue    | 63 +++++++++++++++----
 3 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index 3773f773..fcbc2aee 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -72,7 +72,6 @@ watch(selectedTab, (newVal: number | undefined) => {
     if (newVal !== undefined) {
         emit("tab-changed", newVal);
     }
-    console.log("Selected tab changed to", newVal);
 });
 
 
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index c97732d1..5978b3d5 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -1,4 +1,4 @@
-import { useQuery, type UseQueryReturnType } from "@tanstack/vue-query";
+import {useQuery, type UseQueryReturnType} from "@tanstack/vue-query";
 import {
     getSubject,
     getSubjectInstructors,
@@ -8,7 +8,7 @@ import {
     getSubjectByUuid,
     registerToSubject, getSubjectUuid,
 } from "@/services/subject";
-import { type Ref, computed } from "vue";
+import {type Ref, computed} from "vue";
 import type Subject from "@/models/Subject";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 2dfe5aaf..9f899be8 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -4,6 +4,22 @@
     </div>
 
     <v-row v-else>
+
+        <v-snackbar
+            v-model="snackbar"
+            timeout="3000"
+            color="primary"
+        >
+            Register link copied to clipboard.
+            <template v-slot:actions>
+                <v-btn
+                    @click="snackbar = false"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </template>
+        </v-snackbar>
+
         <v-col cols="1">
             <router-link :to="{ name: 'subjects'}">
                 <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
@@ -43,18 +59,20 @@
                         Create project
                     </v-btn>
                 </router-link>
-                <router-link to="">
-                    <v-btn prepend-icon="mdi-content-copy">
-                        Register link
-                        <v-tooltip
-                            activator="parent"
-                            location="start"
-                            max-width="200vw"
-                        >
-                            Copy register link for this subject, this can be shared with students to register for the subject.
-                        </v-tooltip>
-                    </v-btn>
-                </router-link>
+                <v-btn
+                    prepend-icon="mdi-content-copy"
+                    @click="copyRegisterLink"
+                >
+                    Register link
+                    <v-tooltip
+                        activator="parent"
+                        location="start"
+                        max-width="200vw"
+                    >
+                        Copy register link for this subject, this can be shared with students to register for the
+                        subject.
+                    </v-tooltip>
+                </v-btn>
             </div>
         </v-col>
     </v-row>
@@ -63,19 +81,38 @@
 </template>
 
 <script setup lang="ts">
-import {toRefs} from "vue";
+import {computed, ref, toRefs} from "vue";
 import {useSubjectDetailsQuery, useSubjectUuidQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";
+import {useRouter} from "vue-router";
 
 const props = defineProps<{
     subjectId: number;
 }>();
 
 const {subjectId} = toRefs(props);
+const snackbar = ref(false);
 
 const {data: subject, error, isLoading, isError} = useSubjectDetailsQuery(subjectId);
+
+const router = useRouter();
+
+const registerLink = computed(() => {
+    if (!isLoading) {
+        return router.resolve({
+            name: "registerSubject",
+            params: {uuid: subject!.uuid}
+        }).path;
+    }
+    return "";
+});
+
+const copyRegisterLink = () => {
+    //navigator.clipboard.writeText(registerLink.value);
+    snackbar.value = true;
+};
 </script>
 ;
 <style scoped>

From d8c34ce5a3ac1e05cf36031b60d4a0bdb7cf8397 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 09:47:42 +0200
Subject: [PATCH 13/68] generated academic years

---
 .../components/subject/header/SubjectHeaderCard.vue |  6 ++----
 .../subject/header/SubjectHeaderContainer.vue       |  2 +-
 frontend/src/models/Subject.ts                      |  1 +
 frontend/src/models/SubjectDetails.ts               |  1 +
 frontend/src/queries/Subject.ts                     |  3 ++-
 frontend/src/views/subject/SubjectView.vue          |  2 +-
 frontend/src/views/subject/SubjectsView.vue         | 13 +++++++++++--
 7 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index 561d03c9..a72b9480 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -8,7 +8,7 @@
                     </v-card-title>
                     <v-card-text>
                         <HeaderSubtitleButton
-                            :title="$t('subject.academy_year') + ' ' + academicYear"
+                            :title="`${$t('subject.academy_year')} ${academicYear}-${academicYear + 1}`"
                             :clickable="false"
                             :active="false"
                         ></HeaderSubtitleButton>
@@ -37,16 +37,14 @@
 <script setup lang="ts">
 import type User from "@/models/User";
 import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
-import useIsTeacher from "@/composables/useIsTeacher";
 
 defineProps<{
     title: string;
-    academicYear: string;
+    academicYear: number;
     instructors: User[];
     isLoading: boolean;
 }>();
 
-const { isTeacher } = useIsTeacher();
 
 </script>
 
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
index fd2bad6f..60081846 100644
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
@@ -23,7 +23,7 @@ import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.v
 
 defineProps<{
     title: string;
-    academicYear: string;
+    academicYear: number;
     instructors: User[];
     isLoading: boolean;
     imagePath: string;
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index 366a626f..f4496aa9 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -1,6 +1,7 @@
 export default interface Subject {
     id: number;
     name: string;
+    academic_year: number;
 }
 
 export interface UserSubjectList {
diff --git a/frontend/src/models/SubjectDetails.ts b/frontend/src/models/SubjectDetails.ts
index 665afb19..0a802548 100644
--- a/frontend/src/models/SubjectDetails.ts
+++ b/frontend/src/models/SubjectDetails.ts
@@ -8,4 +8,5 @@ export default interface SubjectDetails {
     students: User[];
     projects: Project[];
     uuid: string;
+    academic_year: number;
 }
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 5978b3d5..510772c8 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -90,7 +90,8 @@ export function useSubjectDetailsQuery(
                 instructors,
                 students,
                 projects,
-                uuid
+                uuid,
+                academic_year: subject.academic_year,
             };
         },
         enabled: () => subjectId.value !== undefined,
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 9f899be8..fc825ee5 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -35,7 +35,7 @@
                             v-if="subject"
                             :title="subject!.name"
                             :instructors="subject!.instructors"
-                            academic-year="2023-2024"
+                            :academic-year="subject!.academic_year"
                             :is-loading="isLoading"
                             image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
                         ></SubjectHeaderContainer>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 205cba56..7557f16d 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -11,7 +11,7 @@
                     </v-col>
                 </v-row>
                 <v-row>
-                    <v-col v-for="(subject, index) in data" :key="index" cols="6">
+                    <v-col v-for="(subject, index) in subjects" :key="index" cols="6">
                         <SubjectCard
                             :subject="subject"
                             :is-loading="isLoading"
@@ -40,8 +40,17 @@ import {useSubjectsQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
+import {computed} from "vue";
+
+const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
+
+const academicYears = computed(() => {
+    return Array.from(
+        new Set(subjects.value.map(subject => subject.academic_year))
+    ).sort((a, b) => b - a);
+
+});
 
-const {data, error, isLoading, isError} = useSubjectsQuery();
 </script>
 
 

From 310f744bcb097a56381dad0d27e8b8a06a89e19c Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 11:08:08 +0200
Subject: [PATCH 14/68] buttons now dynamic on academic years

---
 .../projects/list/SubjectProjectsList.vue     |  1 -
 .../subjects/SubjectsHeaderCard.vue           | 55 +++++++++++--------
 .../subjects/SubjectsHeaderContainer.vue      |  6 +-
 frontend/src/views/subject/SubjectsView.vue   |  8 ++-
 4 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index fcbc2aee..660512f5 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -47,7 +47,6 @@
 
 <script setup lang="ts">
 import SubjectTab from "@/components/subject/body/projects/list/SubjectTab.vue";
-import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { ref, watch } from "vue";
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index 82af9850..54508f80 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -14,26 +14,28 @@
                     <v-card-title class="title">
                         {{ $t("subjects.title") }}
                     </v-card-title>
+
                     <v-card-text>
-                        <div class="chip_container">
-                            <v-chip-group
-                                mandatory
-                                v-model="activeAcademicYear"
-                                column
-                            >
-                                <v-chip
-                                    v-for="(academicYear, index) in academicYears"
-                                    :key="index"
-                                    :value="index"
-                                    color="primary"
-                                    class="ma-1"
-                                    variant="tonal"
+                        <v-skeleton-loader type="button" color="white">
+                            <div class="chip_container">
+                                <v-chip-group
+                                    mandatory
+                                    v-model="activeAcademicYear"
+                                    column
                                 >
-                                    {{ academicYear }}
-                                </v-chip>
-                            </v-chip-group>
-                        </div>
-
+                                    <v-chip
+                                        v-for="(academicYear, index) in academicYears"
+                                        :key="index"
+                                        :value="academicYear"
+                                        color="primary"
+                                        class="ma-1"
+                                        variant="tonal"
+                                    >
+                                        {{ academicYear + "-" + (academicYear + 1)}}
+                                    </v-chip>
+                                </v-chip-group>
+                            </div>
+                        </v-skeleton-loader>
                     </v-card-text>
                 </v-col>
             </v-row>
@@ -44,14 +46,23 @@
 
 <script setup lang="ts">
 
-import {ref} from "vue";
+import {ref, toRefs, watch} from "vue";
 
-defineProps<{
+const props = defineProps<{
+    academicYears: number[];
     isLoading: boolean;
 }>();
+const { academicYears } = toRefs(props)
+const activeAcademicYear = ref(null);
+
+watch(academicYears, (newVal) => {
+    if (newVal.length > 0) {
+        activeAcademicYear.value = newVal[0];
+    }
+});
+
+
 
-const academicYears = ["2023-2024", "2022-2023", "2021-2022"];
-const activeAcademicYear = ref(0);
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
index 8c7cccc9..2969f149 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
@@ -1,7 +1,10 @@
 <template>
     <v-row>
         <v-col cols="6">
-            <SubjectsHeaderCard :is-loading="isLoading"></SubjectsHeaderCard>
+            <SubjectsHeaderCard
+                :academic-years="academicYears"
+                :is-loading="isLoading"
+            ></SubjectsHeaderCard>
         </v-col>
         <v-col>
             <SubjectHeaderImage
@@ -15,6 +18,7 @@ import SubjectsHeaderCard from "@/components/subjects/SubjectsHeaderCard.vue";
 import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.vue";
 
 defineProps<{
+    academicYears: number[];
     isLoading: boolean;
 }>();
 </script>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 7557f16d..aa1cb6b3 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -7,7 +7,10 @@
             <BackgroundContainer>
                 <v-row>
                     <v-col>
-                        <SubjectsHeaderContainer :is-loading="isLoading"></SubjectsHeaderContainer>
+                        <SubjectsHeaderContainer
+                            :academic-years="academicYears"
+                            :is-loading="isLoading"
+                        ></SubjectsHeaderContainer>
                     </v-col>
                 </v-row>
                 <v-row>
@@ -46,9 +49,8 @@ const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
 
 const academicYears = computed(() => {
     return Array.from(
-        new Set(subjects.value.map(subject => subject.academic_year))
+        new Set([...(subjects.value || [])].map(subject => subject.academic_year))
     ).sort((a, b) => b - a);
-
 });
 
 </script>

From fbca96a7963eab3de180db3462677d634f4fe370 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 11:46:42 +0200
Subject: [PATCH 15/68] fixed academic years period

---
 .../subject/header/SubjectHeaderCard.vue      |  2 +-
 .../subjects/SubjectsHeaderCard.vue           | 12 +++++++++--
 .../subjects/SubjectsHeaderContainer.vue      | 10 +++++++++
 .../src/composables/useCurrentAcademicYear.ts | 21 +++++++++++++++++++
 frontend/src/views/subject/SubjectsView.vue   | 10 ++++++++-
 5 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/composables/useCurrentAcademicYear.ts

diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index a72b9480..61c0076c 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -8,7 +8,7 @@
                     </v-card-title>
                     <v-card-text>
                         <HeaderSubtitleButton
-                            :title="`${$t('subject.academy_year')} ${academicYear}-${academicYear + 1}`"
+                            :title="`${$t('subject.academy_year')} ${academicYear - 1}-${academicYear}`"
                             :clickable="false"
                             :active="false"
                         ></HeaderSubtitleButton>
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index 54508f80..0281bf58 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -31,7 +31,7 @@
                                         class="ma-1"
                                         variant="tonal"
                                     >
-                                        {{ academicYear + "-" + (academicYear + 1)}}
+                                        {{ (academicYear - 1) + "-" + academicYear}}
                                     </v-chip>
                                 </v-chip-group>
                             </div>
@@ -53,7 +53,7 @@ const props = defineProps<{
     isLoading: boolean;
 }>();
 const { academicYears } = toRefs(props)
-const activeAcademicYear = ref(null);
+const activeAcademicYear = ref(undefined);
 
 watch(academicYears, (newVal) => {
     if (newVal.length > 0) {
@@ -61,7 +61,15 @@ watch(academicYears, (newVal) => {
     }
 });
 
+const emit = defineEmits<{
+    (e: "academic-year-changed", academicYear: number): void;
+}>();
 
+watch(activeAcademicYear, (newVal: number | undefined) => {
+    if (newVal !== undefined) {
+        emit("academic-year-changed", newVal);
+    }
+});
 
 </script>
 
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
index 2969f149..f5124299 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
@@ -4,6 +4,7 @@
             <SubjectsHeaderCard
                 :academic-years="academicYears"
                 :is-loading="isLoading"
+                @academic-year-changed="onAcademicYearChanged"
             ></SubjectsHeaderCard>
         </v-col>
         <v-col>
@@ -21,6 +22,15 @@ defineProps<{
     academicYears: number[];
     isLoading: boolean;
 }>();
+
+const emit = defineEmits<{
+    (e: "academic-year-changed", academicYear: number): void;
+}>();
+
+const onAcademicYearChanged = (academicYear: number) => {
+    emit("academic-year-changed", academicYear);
+}
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/composables/useCurrentAcademicYear.ts b/frontend/src/composables/useCurrentAcademicYear.ts
new file mode 100644
index 00000000..6d956c59
--- /dev/null
+++ b/frontend/src/composables/useCurrentAcademicYear.ts
@@ -0,0 +1,21 @@
+import { computed } from "vue";
+import { onMounted, ref } from "vue";
+
+export default function useCurrentAcademicYear() {
+    const currentAcademicYear = ref<number | null>(null);
+
+    onMounted(() => {
+        const currentDate = new Date();
+        const currentYear = currentDate.getFullYear();
+        const currentMonth = currentDate.getMonth();
+        const currentDay = currentDate.getDay();
+
+        // If the current month is September (index 8) or later, the academic year is the current year.
+        // Otherwise, the academic year is the previous year.
+        currentAcademicYear.value = currentMonth >= 8 ? currentYear + 1 : currentYear;
+    });
+
+    const isCurrentAcademicYear = computed(() => currentAcademicYear.value);
+
+    return {isCurrentAcademicYear};
+}
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index aa1cb6b3..c141e59a 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -10,6 +10,7 @@
                         <SubjectsHeaderContainer
                             :academic-years="academicYears"
                             :is-loading="isLoading"
+                            @academic-year-changed="onAcademicYearChanged"
                         ></SubjectsHeaderContainer>
                     </v-col>
                 </v-row>
@@ -43,7 +44,7 @@ import {useSubjectsQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 
 const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
 
@@ -53,6 +54,13 @@ const academicYears = computed(() => {
     ).sort((a, b) => b - a);
 });
 
+const activeAcademicYear = ref(academicYears.value[0]);
+
+
+const onAcademicYearChanged = (academicYear: number) => {
+    activeAcademicYear.value = academicYear;
+}
+
 </script>
 
 

From d3a9b7c02201e0ff3059fa8792977c9f66e43634 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 13:00:09 +0200
Subject: [PATCH 16/68] only subjects showing up right academic year

---
 .../subjects/SubjectsHeaderCard.vue           |  8 ++-----
 frontend/src/composables/useAcademicYear.ts   | 14 +++++++++++++
 .../src/composables/useCurrentAcademicYear.ts | 21 -------------------
 frontend/src/views/subject/SubjectsView.vue   | 12 ++++++++---
 4 files changed, 25 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/composables/useAcademicYear.ts
 delete mode 100644 frontend/src/composables/useCurrentAcademicYear.ts

diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index 0281bf58..9bb82a7b 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -47,19 +47,15 @@
 <script setup lang="ts">
 
 import {ref, toRefs, watch} from "vue";
+import getCurrentAcademicYear from "@/composables/useAcademicYear";
 
 const props = defineProps<{
     academicYears: number[];
     isLoading: boolean;
 }>();
 const { academicYears } = toRefs(props)
-const activeAcademicYear = ref(undefined);
+const activeAcademicYear = ref(getCurrentAcademicYear());
 
-watch(academicYears, (newVal) => {
-    if (newVal.length > 0) {
-        activeAcademicYear.value = newVal[0];
-    }
-});
 
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
diff --git a/frontend/src/composables/useAcademicYear.ts b/frontend/src/composables/useAcademicYear.ts
new file mode 100644
index 00000000..2ff5034a
--- /dev/null
+++ b/frontend/src/composables/useAcademicYear.ts
@@ -0,0 +1,14 @@
+export default function getCurrentAcademicYear(): number {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    const currentDay = currentDate.getDate();
+
+    // If the current date is before September 15, the default selected academic year is the current year.
+    // Otherwise, the academic year is the next year.
+    if (currentMonth < 8 || (currentMonth === 8 && currentDay < 15)) {
+        return currentYear;
+    } else {
+        return currentYear + 1;
+    }
+}
diff --git a/frontend/src/composables/useCurrentAcademicYear.ts b/frontend/src/composables/useCurrentAcademicYear.ts
deleted file mode 100644
index 6d956c59..00000000
--- a/frontend/src/composables/useCurrentAcademicYear.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { computed } from "vue";
-import { onMounted, ref } from "vue";
-
-export default function useCurrentAcademicYear() {
-    const currentAcademicYear = ref<number | null>(null);
-
-    onMounted(() => {
-        const currentDate = new Date();
-        const currentYear = currentDate.getFullYear();
-        const currentMonth = currentDate.getMonth();
-        const currentDay = currentDate.getDay();
-
-        // If the current month is September (index 8) or later, the academic year is the current year.
-        // Otherwise, the academic year is the previous year.
-        currentAcademicYear.value = currentMonth >= 8 ? currentYear + 1 : currentYear;
-    });
-
-    const isCurrentAcademicYear = computed(() => currentAcademicYear.value);
-
-    return {isCurrentAcademicYear};
-}
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index c141e59a..a5cfe656 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -15,7 +15,7 @@
                     </v-col>
                 </v-row>
                 <v-row>
-                    <v-col v-for="(subject, index) in subjects" :key="index" cols="6">
+                    <v-col v-for="(subject, index) in subjectsByAcademicYear" :key="index" cols="6">
                         <SubjectCard
                             :subject="subject"
                             :is-loading="isLoading"
@@ -45,6 +45,7 @@ import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
 import {computed, ref} from "vue";
+import getCurrentAcademicYear from "@/composables/useAcademicYear";
 
 const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
 
@@ -54,11 +55,16 @@ const academicYears = computed(() => {
     ).sort((a, b) => b - a);
 });
 
-const activeAcademicYear = ref(academicYears.value[0]);
+
+const selectedAcademicYear = ref<number>(getCurrentAcademicYear());
+
+const subjectsByAcademicYear = computed(() => {
+    return [...(subjects.value || [])].filter(subject => subject.academic_year === selectedAcademicYear.value);
+});
 
 
 const onAcademicYearChanged = (academicYear: number) => {
-    activeAcademicYear.value = academicYear;
+    selectedAcademicYear.value = academicYear;
 }
 
 </script>

From d1780de9c1e00c9bf9777215d5b727e1b5fbfefe Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 13:04:36 +0200
Subject: [PATCH 17/68] error fix filter changed

---
 .../subject/body/projects/SubjectProjectsPage.vue        | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index 082fcc69..cd7f3380 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -56,9 +56,9 @@ const filteredProjects = computed(() => {
     if (filterOption.value === FilterOptions.All) {
         return sortedProjects;
     } else if (filterOption.value === FilterOptions.Active) {
-        return sortedProjects.filter((project) => new Date(project.deadline) > currentDate);
+        return sortedProjects.filter((project) => new Date(project.deadline) > currentDate) || []
     } else if (filterOption.value === FilterOptions.Completed) {
-        return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate);
+        return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate) || [];
     }
     console.error("Invalid filter option");
     return sortedProjects;
@@ -70,8 +70,9 @@ const updateSelectedTab = (tabIndex: number) => {
 
 const updateFilterOption = (option: FilterOptions) => {
     filterOption.value = option;
-
-    updateSelectedTab(filteredProjects.value[0].id);
+    if (filteredProjects.value.length > 0) {
+        updateSelectedTab(filteredProjects.value[0].id);
+    }
 };
 </script>
 

From dd5adb6025c5d93f26b3df4f1ee61d9d5ab28b35 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 13:18:18 +0200
Subject: [PATCH 18/68] implemented register link button

---
 frontend/src/views/subject/SubjectView.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index fc825ee5..90392ed9 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -100,17 +100,15 @@ const {data: subject, error, isLoading, isError} = useSubjectDetailsQuery(subjec
 const router = useRouter();
 
 const registerLink = computed(() => {
-    if (!isLoading) {
-        return router.resolve({
-            name: "registerSubject",
-            params: {uuid: subject!.uuid}
-        }).path;
-    }
-    return "";
+    return router.resolve({
+        name: "registerSubject",
+        params: {uuid: subject.value.uuid}
+    }).path;
 });
 
 const copyRegisterLink = () => {
-    //navigator.clipboard.writeText(registerLink.value);
+    const baseAddress = window.location.origin;
+    navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
     snackbar.value = true;
 };
 </script>

From 94fb4254120c11caefa3a06ce9a45c2e5047c242 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 14:51:13 +0200
Subject: [PATCH 19/68] added i18n

---
 .../subject/body/projects/SubjectProjectPage.vue     |  2 +-
 .../subject/body/projects/SubjectProjectsPage.vue    |  2 +-
 .../body/projects/list/SubjectProjectsList.vue       |  2 +-
 frontend/src/i18n/locales/en.ts                      | 10 ++++++++++
 frontend/src/i18n/locales/nl.ts                      | 10 ++++++++++
 .../src/views/subject/CreatePatchSubjectView.vue     | 12 ------------
 frontend/src/views/subject/SubjectView.vue           |  9 ++++-----
 frontend/src/views/subject/SubjectsView.vue          |  2 +-
 8 files changed, 28 insertions(+), 21 deletions(-)
 delete mode 100644 frontend/src/views/subject/CreatePatchSubjectView.vue

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index 8f410374..1ce7c27f 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -44,7 +44,7 @@
                 <v-divider></v-divider>
                 <v-card-actions>
                     <v-btn @click="expanded = !expanded">
-                        {{ !expanded ? "Show Full Assignment" : "Hide Assignment" }}
+                        {{ !expanded ? $t("subject.projectsPage.show_assignment") : $t("subject.projectsPage.hide_assignment") }}
                     </v-btn>
                 </v-card-actions>
             </div>
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index cd7f3380..872b4539 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -25,7 +25,7 @@
 
                 <v-window-item v-if="filteredProjects.length === 0" :key="'placeholder'">
                     <div class="placeholder">
-                        <p>No projects available.</p>
+                        <p>{{$t("subject.projectsPage.no_projects")}}</p>
                     </div>
                 </v-window-item>
             </v-window>
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index 660512f5..b6e4ecac 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -37,7 +37,7 @@
                         </v-tab>
                     </v-tabs>
                     <div v-else class="placeholder">
-                        <p>No projects available.</p>
+                        <p>{{$t("subject.projectsPage.no_projects")}}</p>
                     </div>
                 </div>
             </v-card-text>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 255d0402..1aca37f0 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -72,14 +72,24 @@ export default {
             all: "All",
             active: "Active",
             completed: "Completed",
+            no_projects: "No projects found.",
+            show_assignment: "Show full assignment",
+            hide_assignment: "Hide assignment",
         },
         project: {
             assignment: "Assignment",
             group: "Group",
             submissions: "Submissions",
         },
+        create_project: "Create project",
+        register_link_button: {
+            title: "Register link",
+            snackbar: "Register link copied to clipboard.",
+            tooltip: "Copy register link for this subject, this can be shared with students to register for the subject."
+        }
     },
     subjects: {
         title: "My Subjects",
+        create_subject: "Create subject",
     },
 };
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 3ea22ba4..1a41b12b 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -72,15 +72,25 @@ export default {
             all: "Alle",
             active: "Actief",
             completed: "Voltooid",
+            no_projects: "Geen projecten gevonden.",
+            show_assignment: "Toon volledige opdracht",
+            hide_assignment: "Verberg opdracht",
         },
         project: {
             assignment: "Opdracht",
             group: "Groep",
             submissions: "Indieningen",
         },
+        create_project: "Nieuw project",
+        register_link_button: {
+            title: "Registreer link",
+            snackbar: "Registreer link gekopieerd naar klembord.",
+            tooltip: "Kopieer de registreer link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
+        },
     },
 
     subjects: {
         title: "Mijn vakken",
+        create_subject: "Nieuw vak",
     },
 };
diff --git a/frontend/src/views/subject/CreatePatchSubjectView.vue b/frontend/src/views/subject/CreatePatchSubjectView.vue
deleted file mode 100644
index 7d755ae5..00000000
--- a/frontend/src/views/subject/CreatePatchSubjectView.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-
-</template>
-
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 90392ed9..16f18617 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -10,7 +10,7 @@
             timeout="3000"
             color="primary"
         >
-            Register link copied to clipboard.
+            {{ $t("subject.register_link_button.snackbar")}}
             <template v-slot:actions>
                 <v-btn
                     @click="snackbar = false"
@@ -56,21 +56,20 @@
             <div class="action-btn-container">
                 <router-link :to="{name: 'create-project', params: { subjectId : subjectId}}">
                     <v-btn prepend-icon="mdi-plus-circle">
-                        Create project
+                        {{ $t("subject.create_project") }}
                     </v-btn>
                 </router-link>
                 <v-btn
                     prepend-icon="mdi-content-copy"
                     @click="copyRegisterLink"
                 >
-                    Register link
+                    {{ $t("subject.register_link_button.title") }}
                     <v-tooltip
                         activator="parent"
                         location="start"
                         max-width="200vw"
                     >
-                        Copy register link for this subject, this can be shared with students to register for the
-                        subject.
+                        {{ $t("subject.register_link_button.tooltip")}}
                     </v-tooltip>
                 </v-btn>
             </div>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index a5cfe656..ce1bd7e4 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -30,7 +30,7 @@
             <div class="action-btn-container">
                 <router-link to="">
                     <v-btn prepend-icon="mdi-plus-circle">
-                        Create subject
+                        {{ $t("subjects.create_subject") }}
                     </v-btn>
                 </router-link>
             </div>

From 394abc3ad3237beae34c7801174ecdc964465cc7 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 15:02:09 +0200
Subject: [PATCH 20/68] linting

---
 .../src/components/buttons/ActionButton.vue   | 21 -------------------
 .../body/projects/SubjectProjectPage.vue      |  6 ------
 .../projects/list/SubjectProjectsList.vue     | 19 -----------------
 frontend/src/queries/Subject.ts               |  1 -
 frontend/src/views/subject/SubjectView.vue    |  2 +-
 5 files changed, 1 insertion(+), 48 deletions(-)
 delete mode 100644 frontend/src/components/buttons/ActionButton.vue

diff --git a/frontend/src/components/buttons/ActionButton.vue b/frontend/src/components/buttons/ActionButton.vue
deleted file mode 100644
index 2336ce17..00000000
--- a/frontend/src/components/buttons/ActionButton.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <v-btn :prepend-icon="prependIcon">
-        {{ title }}
-    </v-btn>
-</template>
-
-
-<script setup lang="ts">
-
-defineProps<{
-    title: string;
-    prependIcon: string;
-}>();
-
-</script>
-
-
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index 1ce7c27f..e53af9eb 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -131,12 +131,6 @@ const assignmentLength = 100;
     color: black;
 }
 
-.chevron {
-    margin-right: 10px;
-    color: white;
-    display: block;
-}
-
 .project-container {
     overflow: auto;
     max-height: 55vh;
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index b6e4ecac..9504bb1c 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -98,25 +98,6 @@ watch(activeButton, (newVal: string) => {
     font-family: "Poppins", sans-serif;
 }
 
-.projects-tab {
-    overflow-y: auto;
-    scrollbar-width: none; /* For Firefox */
-    max-height: 35vh;
-}
-
-.projects-tab::-webkit-scrollbar {
-    width: 0; /* For Chrome, Safari, and Opera */
-}
-
-.filter-btn-container {
-    overflow-x: auto;
-    scrollbar-width: none; /* For Firefox */
-}
-
-.filter-btn-container::-webkit-scrollbar {
-    width: 0; /* For Chrome, Safari, and Opera */
-}
-
 .scrollable-tabs {
     overflow-y: auto;
     scrollbar-width: none; /* For Firefox */
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 510772c8..db01b78c 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -11,7 +11,6 @@ import {
 import {type Ref, computed} from "vue";
 import type Subject from "@/models/Subject";
 import type User from "@/models/User";
-import type Subject from "@/models/Subject";
 import type Project from "@/models/Project";
 import type SubjectDetails from "@/models/SubjectDetails";
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 16f18617..b34c77ef 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -81,7 +81,7 @@
 
 <script setup lang="ts">
 import {computed, ref, toRefs} from "vue";
-import {useSubjectDetailsQuery, useSubjectUuidQuery} from "@/queries/Subject";
+import {useSubjectDetailsQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";

From 61c2bafa092e535c19a84b1a28b6b8aef3aebcfd Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 1 May 2024 15:11:03 +0200
Subject: [PATCH 21/68] run formating

---
 .../body/projects/SubjectProjectPage.vue      | 13 ++++--
 .../body/projects/SubjectProjectsPage.vue     |  4 +-
 .../projects/list/SubjectProjectsList.vue     | 11 +----
 .../subject/header/SubjectHeaderCard.vue      | 12 ++---
 .../subject/header/SubjectHeaderContainer.vue |  3 +-
 .../src/components/subjects/SubjectCard.vue   |  4 --
 .../subjects/SubjectsHeaderCard.vue           | 30 +++----------
 .../subjects/SubjectsHeaderContainer.vue      | 11 ++---
 frontend/src/i18n/locales/en.ts               |  5 ++-
 frontend/src/i18n/locales/nl.ts               |  3 +-
 frontend/src/queries/Subject.ts               | 10 ++---
 frontend/src/views/SubmitView.vue             |  2 +-
 frontend/src/views/subject/SubjectView.vue    | 45 ++++++-------------
 frontend/src/views/subject/SubjectsView.vue   | 21 ++++-----
 14 files changed, 62 insertions(+), 112 deletions(-)

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index e53af9eb..21c7959b 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="project-container">
         <v-card class="project-card" variant="text" rounded="xl">
-            <router-link :to="{ name: 'project', params: { projectId: project.id } }" class="router">
+            <router-link
+                :to="{ name: 'project', params: { projectId: project.id } }"
+                class="router"
+            >
                 <div class="colored-zone"></div>
                 <v-card-title class="title">
                     <v-row>
@@ -44,7 +47,11 @@
                 <v-divider></v-divider>
                 <v-card-actions>
                     <v-btn @click="expanded = !expanded">
-                        {{ !expanded ? $t("subject.projectsPage.show_assignment") : $t("subject.projectsPage.hide_assignment") }}
+                        {{
+                            !expanded
+                                ? $t("subject.projectsPage.show_assignment")
+                                : $t("subject.projectsPage.hide_assignment")
+                        }}
                     </v-btn>
                 </v-card-actions>
             </div>
@@ -61,7 +68,7 @@
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
-import {ref} from "vue";
+import { ref } from "vue";
 
 defineProps<{
     selectedTab: number;
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index 872b4539..c1f60ded 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -25,7 +25,7 @@
 
                 <v-window-item v-if="filteredProjects.length === 0" :key="'placeholder'">
                     <div class="placeholder">
-                        <p>{{$t("subject.projectsPage.no_projects")}}</p>
+                        <p>{{ $t("subject.projectsPage.no_projects") }}</p>
                     </div>
                 </v-window-item>
             </v-window>
@@ -56,7 +56,7 @@ const filteredProjects = computed(() => {
     if (filterOption.value === FilterOptions.All) {
         return sortedProjects;
     } else if (filterOption.value === FilterOptions.Active) {
-        return sortedProjects.filter((project) => new Date(project.deadline) > currentDate) || []
+        return sortedProjects.filter((project) => new Date(project.deadline) > currentDate) || [];
     } else if (filterOption.value === FilterOptions.Completed) {
         return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate) || [];
     }
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index 9504bb1c..ee1bf30d 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -4,11 +4,7 @@
             <span class="title">{{ $t("subject.projects") }}</span>
         </v-card-title>
         <v-card-subtitle>
-            <v-chip-group
-                v-model="activeButton"
-                column
-                mandatory
-            >
+            <v-chip-group v-model="activeButton" column mandatory>
                 <v-chip
                     v-for="(filter, index) in filterOptions"
                     :key="index"
@@ -18,7 +14,6 @@
                 >
                     {{ $t(`subject.projectsPage.${filter.toLowerCase()}`) }}
                 </v-chip>
-
             </v-chip-group>
         </v-card-subtitle>
         <v-skeleton-loader type="card" color="white">
@@ -37,7 +32,7 @@
                         </v-tab>
                     </v-tabs>
                     <div v-else class="placeholder">
-                        <p>{{$t("subject.projectsPage.no_projects")}}</p>
+                        <p>{{ $t("subject.projectsPage.no_projects") }}</p>
                     </div>
                 </div>
             </v-card-text>
@@ -73,7 +68,6 @@ watch(selectedTab, (newVal: number | undefined) => {
     }
 });
 
-
 watch(activeButton, (newVal: string) => {
     emit("filter-changed", FilterOptions[newVal as keyof typeof FilterOptions]);
     selectedTab.value = 0;
@@ -108,7 +102,6 @@ watch(activeButton, (newVal: string) => {
     width: 0; /* For Chrome, Safari, and Opera */
 }
 
-
 .placeholder {
     display: flex;
     justify-content: center;
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index 61c0076c..925dc4d5 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -23,12 +23,10 @@
                         </div>
                     </v-card-text>
                 </v-col>
-                    <router-link to="" class="link">
-                        <v-icon size="large">mdi-square-edit-outline</v-icon>
-                    </router-link>
-                <v-col>
-
-                </v-col>
+                <router-link to="" class="link">
+                    <v-icon size="large">mdi-square-edit-outline</v-icon>
+                </router-link>
+                <v-col> </v-col>
             </v-row>
         </v-skeleton-loader>
     </v-card>
@@ -44,8 +42,6 @@ defineProps<{
     instructors: User[];
     isLoading: boolean;
 }>();
-
-
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
index 60081846..058c9d1e 100644
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
@@ -1,8 +1,7 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <SubjectHeaderImage :imagePath="imagePath">
-            </SubjectHeaderImage>
+            <SubjectHeaderImage :imagePath="imagePath"> </SubjectHeaderImage>
         </v-col>
         <v-col cols="8">
             <SubjectHeaderCard
diff --git a/frontend/src/components/subjects/SubjectCard.vue b/frontend/src/components/subjects/SubjectCard.vue
index 3752afdc..6999f587 100644
--- a/frontend/src/components/subjects/SubjectCard.vue
+++ b/frontend/src/components/subjects/SubjectCard.vue
@@ -5,7 +5,6 @@
             class="router-link"
         >
             <v-card rounded="xl" class="subject-card">
-
                 <v-img
                     src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
                     class="align-end"
@@ -22,8 +21,6 @@
             </v-card>
         </router-link>
     </v-skeleton-loader>
-
-
 </template>
 
 <script setup lang="ts">
@@ -36,7 +33,6 @@ defineProps<{
 </script>
 
 <style scoped>
-
 .card-loader {
     border-radius: 25px;
 }
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index 9bb82a7b..a7ad6ee8 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -1,14 +1,6 @@
 <template>
-    <v-skeleton-loader
-        type="card"
-        class="card-loader"
-    >
-        <v-card
-            variant="text"
-            class="title-card"
-            rounded="xl"
-            width="100%"
-        >
+    <v-skeleton-loader type="card" class="card-loader">
+        <v-card variant="text" class="title-card" rounded="xl" width="100%">
             <v-row>
                 <v-col>
                     <v-card-title class="title">
@@ -18,11 +10,7 @@
                     <v-card-text>
                         <v-skeleton-loader type="button" color="white">
                             <div class="chip_container">
-                                <v-chip-group
-                                    mandatory
-                                    v-model="activeAcademicYear"
-                                    column
-                                >
+                                <v-chip-group mandatory v-model="activeAcademicYear" column>
                                     <v-chip
                                         v-for="(academicYear, index) in academicYears"
                                         :key="index"
@@ -31,7 +19,7 @@
                                         class="ma-1"
                                         variant="tonal"
                                     >
-                                        {{ (academicYear - 1) + "-" + academicYear}}
+                                        {{ academicYear - 1 + "-" + academicYear }}
                                     </v-chip>
                                 </v-chip-group>
                             </div>
@@ -41,22 +29,19 @@
             </v-row>
         </v-card>
     </v-skeleton-loader>
-
 </template>
 
 <script setup lang="ts">
-
-import {ref, toRefs, watch} from "vue";
+import { ref, toRefs, watch } from "vue";
 import getCurrentAcademicYear from "@/composables/useAcademicYear";
 
 const props = defineProps<{
     academicYears: number[];
     isLoading: boolean;
 }>();
-const { academicYears } = toRefs(props)
+const { academicYears } = toRefs(props);
 const activeAcademicYear = ref(getCurrentAcademicYear());
 
-
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
 }>();
@@ -66,7 +51,6 @@ watch(activeAcademicYear, (newVal: number | undefined) => {
         emit("academic-year-changed", newVal);
     }
 });
-
 </script>
 
 <style scoped>
@@ -90,7 +74,5 @@ watch(activeAcademicYear, (newVal: number | undefined) => {
 
 .card-loader {
     border-radius: 25px;
-
 }
-
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
index f5124299..f98794c5 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
@@ -9,7 +9,8 @@
         </v-col>
         <v-col>
             <SubjectHeaderImage
-                image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"></SubjectHeaderImage>
+                image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
+            ></SubjectHeaderImage>
         </v-col>
     </v-row>
 </template>
@@ -29,11 +30,7 @@ const emit = defineEmits<{
 
 const onAcademicYearChanged = (academicYear: number) => {
     emit("academic-year-changed", academicYear);
-}
-
+};
 </script>
 
-<style scoped>
-
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 0976c18f..c5859ecf 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -88,8 +88,9 @@ export default {
         register_link_button: {
             title: "Register link",
             snackbar: "Register link copied to clipboard.",
-            tooltip: "Copy register link for this subject, this can be shared with students to register for the subject."
-        }
+            tooltip:
+                "Copy register link for this subject, this can be shared with students to register for the subject.",
+        },
     },
     subjects: {
         title: "My Subjects",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index dc9f4ed7..25f85145 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -88,7 +88,8 @@ export default {
         register_link_button: {
             title: "Registreer link",
             snackbar: "Registreer link gekopieerd naar klembord.",
-            tooltip: "Kopieer de registreer link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
+            tooltip:
+                "Kopieer de registreer link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
         },
     },
 
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index db01b78c..9103eea1 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -1,4 +1,4 @@
-import {useQuery, type UseQueryReturnType} from "@tanstack/vue-query";
+import { useQuery, type UseQueryReturnType } from "@tanstack/vue-query";
 import {
     getSubject,
     getSubjectInstructors,
@@ -6,9 +6,10 @@ import {
     getSubjects,
     getSubjectStudents,
     getSubjectByUuid,
-    registerToSubject, getSubjectUuid,
+    registerToSubject,
+    getSubjectUuid,
 } from "@/services/subject";
-import {type Ref, computed} from "vue";
+import { type Ref, computed } from "vue";
 import type Subject from "@/models/Subject";
 import type User from "@/models/User";
 import type Project from "@/models/Project";
@@ -80,7 +81,7 @@ export function useSubjectDetailsQuery(
                 getSubjectInstructors(subjectId.value!),
                 getSubjectStudents(subjectId.value!),
                 getSubjectProjects(subjectId.value!),
-                getSubjectUuid(subjectId.value!)
+                getSubjectUuid(subjectId.value!),
             ])) as [Subject, User[], User[], Project[], string];
 
             return {
@@ -113,4 +114,3 @@ export function registerSubjectQuery(uuid: Ref<string>): UseQueryReturnType<Subj
         enabled: () => false,
     });
 }
-
diff --git a/frontend/src/views/SubmitView.vue b/frontend/src/views/SubmitView.vue
index 8c6a611e..4fbdd550 100644
--- a/frontend/src/views/SubmitView.vue
+++ b/frontend/src/views/SubmitView.vue
@@ -1,4 +1,4 @@
-    <template>
+<template>
     <v-container>
         <SubmitCard :projectId="projectId" />
     </v-container>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index b34c77ef..1f8ed3f9 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -4,24 +4,17 @@
     </div>
 
     <v-row v-else>
-
-        <v-snackbar
-            v-model="snackbar"
-            timeout="3000"
-            color="primary"
-        >
-            {{ $t("subject.register_link_button.snackbar")}}
+        <v-snackbar v-model="snackbar" timeout="3000" color="primary">
+            {{ $t("subject.register_link_button.snackbar") }}
             <template v-slot:actions>
-                <v-btn
-                    @click="snackbar = false"
-                >
+                <v-btn @click="snackbar = false">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
             </template>
         </v-snackbar>
 
         <v-col cols="1">
-            <router-link :to="{ name: 'subjects'}">
+            <router-link :to="{ name: 'subjects' }">
                 <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
                     <v-icon>mdi-arrow-left</v-icon>
                 </v-btn>
@@ -54,54 +47,45 @@
         </v-col>
         <v-col cols="2">
             <div class="action-btn-container">
-                <router-link :to="{name: 'create-project', params: { subjectId : subjectId}}">
+                <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
                     <v-btn prepend-icon="mdi-plus-circle">
                         {{ $t("subject.create_project") }}
                     </v-btn>
                 </router-link>
-                <v-btn
-                    prepend-icon="mdi-content-copy"
-                    @click="copyRegisterLink"
-                >
+                <v-btn prepend-icon="mdi-content-copy" @click="copyRegisterLink">
                     {{ $t("subject.register_link_button.title") }}
-                    <v-tooltip
-                        activator="parent"
-                        location="start"
-                        max-width="200vw"
-                    >
-                        {{ $t("subject.register_link_button.tooltip")}}
+                    <v-tooltip activator="parent" location="start" max-width="200vw">
+                        {{ $t("subject.register_link_button.tooltip") }}
                     </v-tooltip>
                 </v-btn>
             </div>
         </v-col>
     </v-row>
-
-
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRefs} from "vue";
-import {useSubjectDetailsQuery} from "@/queries/Subject";
+import { computed, ref, toRefs } from "vue";
+import { useSubjectDetailsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 
 const props = defineProps<{
     subjectId: number;
 }>();
 
-const {subjectId} = toRefs(props);
+const { subjectId } = toRefs(props);
 const snackbar = ref(false);
 
-const {data: subject, error, isLoading, isError} = useSubjectDetailsQuery(subjectId);
+const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subjectId);
 
 const router = useRouter();
 
 const registerLink = computed(() => {
     return router.resolve({
         name: "registerSubject",
-        params: {uuid: subject.value.uuid}
+        params: { uuid: subject.value.uuid },
     }).path;
 });
 
@@ -113,7 +97,6 @@ const copyRegisterLink = () => {
 </script>
 ;
 <style scoped>
-
 .back-button {
     margin: 30px;
 }
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index ce1bd7e4..3c215ce7 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -36,42 +36,38 @@
             </div>
         </v-col>
     </v-row>
-
 </template>
 
 <script setup lang="ts">
-import {useSubjectsQuery} from "@/queries/Subject";
+import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
-import {computed, ref} from "vue";
+import { computed, ref } from "vue";
 import getCurrentAcademicYear from "@/composables/useAcademicYear";
 
-const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
+const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 
 const academicYears = computed(() => {
     return Array.from(
-        new Set([...(subjects.value || [])].map(subject => subject.academic_year))
+        new Set([...(subjects.value || [])].map((subject) => subject.academic_year))
     ).sort((a, b) => b - a);
 });
 
-
 const selectedAcademicYear = ref<number>(getCurrentAcademicYear());
 
 const subjectsByAcademicYear = computed(() => {
-    return [...(subjects.value || [])].filter(subject => subject.academic_year === selectedAcademicYear.value);
+    return [...(subjects.value || [])].filter(
+        (subject) => subject.academic_year === selectedAcademicYear.value
+    );
 });
 
-
 const onAcademicYearChanged = (academicYear: number) => {
     selectedAcademicYear.value = academicYear;
-}
-
+};
 </script>
 
-
 <style scoped>
-
 .subject-card {
     margin-top: 10px; /* Adjust as needed */
 }
@@ -79,5 +75,4 @@ const onAcademicYearChanged = (academicYear: number) => {
 .action-btn-container {
     margin-top: 30px;
 }
-
 </style>

From 35fd4708b0e2e65a1507376aaa51270c3cff079f Mon Sep 17 00:00:00 2001
From: Mattis Cauwel <159709954+mattiscauwel@users.noreply.github.com>
Date: Tue, 7 May 2024 10:39:53 +0200
Subject: [PATCH 22/68] Update frontend/src/views/subject/SubjectView.vue

Co-authored-by: Bram Reyniers <55666730+reyniersbram@users.noreply.github.com>
---
 frontend/src/views/subject/SubjectView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 1f8ed3f9..e7967bce 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -85,7 +85,7 @@ const router = useRouter();
 const registerLink = computed(() => {
     return router.resolve({
         name: "registerSubject",
-        params: { uuid: subject.value.uuid },
+        params: { uuid: subject.value?.uuid },
     }).path;
 });
 

From 05e41dac0353d207c38218e41fcc13ea935a16e4 Mon Sep 17 00:00:00 2001
From: Mattis Cauwel <159709954+mattiscauwel@users.noreply.github.com>
Date: Tue, 7 May 2024 10:41:04 +0200
Subject: [PATCH 23/68] Update frontend/src/views/subject/SubjectsView.vue

Co-authored-by: Bram Reyniers <55666730+reyniersbram@users.noreply.github.com>
---
 frontend/src/views/subject/SubjectsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 3c215ce7..5160b563 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -44,7 +44,7 @@ import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
 import { computed, ref } from "vue";
-import getCurrentAcademicYear from "@/composables/useAcademicYear";
+import useAcademicYear from "@/composables/useAcademicYear";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 

From aa79bea0aa96857fe52c3d5066df6ecdb24bb216 Mon Sep 17 00:00:00 2001
From: Mattis Cauwel <159709954+mattiscauwel@users.noreply.github.com>
Date: Tue, 7 May 2024 10:42:11 +0200
Subject: [PATCH 24/68] Update frontend/src/views/subject/SubjectsView.vue

Co-authored-by: Bram Reyniers <55666730+reyniersbram@users.noreply.github.com>
---
 frontend/src/views/subject/SubjectsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 5160b563..c0588e91 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -54,7 +54,7 @@ const academicYears = computed(() => {
     ).sort((a, b) => b - a);
 });
 
-const selectedAcademicYear = ref<number>(getCurrentAcademicYear());
+const selectedAcademicYear = ref<number>(useAcademicYear());
 
 const subjectsByAcademicYear = computed(() => {
     return [...(subjects.value || [])].filter(

From 7b9d9be08fa1a90420e42aef037ce903afa6cbf6 Mon Sep 17 00:00:00 2001
From: Mattis Cauwel <159709954+mattiscauwel@users.noreply.github.com>
Date: Tue, 7 May 2024 10:42:31 +0200
Subject: [PATCH 25/68] Update
 frontend/src/components/subject/body/projects/SubjectProjectsPage.vue

Co-authored-by: Bram Reyniers <55666730+reyniersbram@users.noreply.github.com>
---
 .../src/components/subject/body/projects/SubjectProjectsPage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index c1f60ded..2b746180 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -60,7 +60,6 @@ const filteredProjects = computed(() => {
     } else if (filterOption.value === FilterOptions.Completed) {
         return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate) || [];
     }
-    console.error("Invalid filter option");
     return sortedProjects;
 });
 

From 5139deb75bc04b9eae38e3fb6865a179a1bf1de9 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 14 May 2024 16:59:27 +0200
Subject: [PATCH 26/68] is teacher for new subject button visibility

---
 backend/src/docker_tests/utils.py           | 4 ++--
 frontend/src/composables/useAcademicYear.ts | 2 +-
 frontend/src/views/subject/SubjectsView.vue | 6 ++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9158d428..9983d1fc 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
+def to_async(func):
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
+    async def run_async(*args, **kwargs):
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 
diff --git a/frontend/src/composables/useAcademicYear.ts b/frontend/src/composables/useAcademicYear.ts
index 2ff5034a..9ee49b0d 100644
--- a/frontend/src/composables/useAcademicYear.ts
+++ b/frontend/src/composables/useAcademicYear.ts
@@ -1,4 +1,4 @@
-export default function getCurrentAcademicYear(): number {
+export default function useAcademicYear(): number {
     const currentDate = new Date();
     const currentYear = currentDate.getFullYear();
     const currentMonth = currentDate.getMonth();
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index c0588e91..315ae304 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -3,7 +3,7 @@
         <p>Error: {{ error }}</p>
     </div>
     <v-row v-else>
-        <v-col cols="10">
+        <v-col :cols="isTeacher ? 10 : 12">
             <BackgroundContainer>
                 <v-row>
                     <v-col>
@@ -26,7 +26,7 @@
                 </v-row>
             </BackgroundContainer>
         </v-col>
-        <v-col cols="2">
+        <v-col v-if="isTeacher" cols="2">
             <div class="action-btn-container">
                 <router-link to="">
                     <v-btn prepend-icon="mdi-plus-circle">
@@ -45,6 +45,7 @@ import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContain
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
+import useIsTeacher from "@/composables/useIsTeacher";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 
@@ -55,6 +56,7 @@ const academicYears = computed(() => {
 });
 
 const selectedAcademicYear = ref<number>(useAcademicYear());
+const {isTeacher} = useIsTeacher();
 
 const subjectsByAcademicYear = computed(() => {
     return [...(subjects.value || [])].filter(

From 85f1fd48ec195e39454d9c277b095197c5ed74de Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 14 May 2024 19:22:29 +0200
Subject: [PATCH 27/68] buttons now only appearing when isTeacher/isInstructor

---
 .../components/subject/header/SubjectHeaderCard.vue  | 12 +++++++-----
 .../subject/header/SubjectHeaderContainer.vue        |  2 ++
 frontend/src/composables/useAcademicYear.ts          |  4 ++--
 frontend/src/views/subject/SubjectView.vue           | 11 ++++++++++-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index 925dc4d5..25f6befc 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -2,7 +2,7 @@
     <v-card variant="text" class="title-card" height="165">
         <v-skeleton-loader type="card" color="white">
             <v-row>
-                <v-col cols="11">
+                <v-col :cols="isInstructor? 10 : 12">
                     <v-card-title class="title">
                         {{ title }}
                     </v-card-title>
@@ -23,10 +23,11 @@
                         </div>
                     </v-card-text>
                 </v-col>
-                <router-link to="" class="link">
-                    <v-icon size="large">mdi-square-edit-outline</v-icon>
-                </router-link>
-                <v-col> </v-col>
+                <v-col v-if="isInstructor" cols="2">
+                    <router-link to="" class="link">
+                        <v-icon size="large">mdi-square-edit-outline</v-icon>
+                    </router-link>
+                </v-col>
             </v-row>
         </v-skeleton-loader>
     </v-card>
@@ -41,6 +42,7 @@ defineProps<{
     academicYear: number;
     instructors: User[];
     isLoading: boolean;
+    isInstructor: boolean;
 }>();
 </script>
 
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
index 058c9d1e..118d24c3 100644
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
@@ -9,6 +9,7 @@
                 :academic-year="academicYear"
                 :instructors="instructors"
                 :is-loading="isLoading"
+                :is-instructor="isInstructor"
             >
             </SubjectHeaderCard>
         </v-col>
@@ -26,6 +27,7 @@ defineProps<{
     instructors: User[];
     isLoading: boolean;
     imagePath: string;
+    isInstructor: boolean;
 }>();
 </script>
 
diff --git a/frontend/src/composables/useAcademicYear.ts b/frontend/src/composables/useAcademicYear.ts
index 9ee49b0d..0ef123b8 100644
--- a/frontend/src/composables/useAcademicYear.ts
+++ b/frontend/src/composables/useAcademicYear.ts
@@ -7,8 +7,8 @@ export default function useAcademicYear(): number {
     // If the current date is before September 15, the default selected academic year is the current year.
     // Otherwise, the academic year is the next year.
     if (currentMonth < 8 || (currentMonth === 8 && currentDay < 15)) {
-        return currentYear;
+        return currentYear - 2000;
     } else {
-        return currentYear + 1;
+        return currentYear + 1 - 2000;
     }
 }
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index e7967bce..d34dce47 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -30,6 +30,7 @@
                             :instructors="subject!.instructors"
                             :academic-year="subject!.academic_year"
                             :is-loading="isLoading"
+                            :is-instructor="isInstructor"
                             image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
                         ></SubjectHeaderContainer>
                     </v-col>
@@ -45,7 +46,7 @@
                 </v-row>
             </BackgroundContainer>
         </v-col>
-        <v-col cols="2">
+        <v-col v-if="isInstructor" cols="2">
             <div class="action-btn-container">
                 <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
                     <v-btn prepend-icon="mdi-plus-circle">
@@ -70,6 +71,8 @@ import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";
 import { useRouter } from "vue-router";
+import useIsTeacher from "@/composables/useIsTeacher";
+import {useUserQuery} from "@/queries/User";
 
 const props = defineProps<{
     subjectId: number;
@@ -79,6 +82,12 @@ const { subjectId } = toRefs(props);
 const snackbar = ref(false);
 
 const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subjectId);
+const {data: user, isLoading: isLoadingUser, isError: isErrorUser} = useUserQuery(null);
+
+const isInstructor = computed(() => {
+    return [...(subject.value?.instructors || [])].some((instructor) => instructor.uid === user.value.uid);
+});
+
 
 const router = useRouter();
 

From f202e37175b0f14d714c6ebb4e6f96e980853171 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 14 May 2024 19:29:06 +0200
Subject: [PATCH 28/68] deleted announcements

---
 frontend/src/components/subject/body/SubjectBody.vue | 5 +----
 frontend/src/components/subjects/SubjectCard.vue     | 7 ++++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/body/SubjectBody.vue b/frontend/src/components/subject/body/SubjectBody.vue
index da4a6632..d5204000 100644
--- a/frontend/src/components/subject/body/SubjectBody.vue
+++ b/frontend/src/components/subject/body/SubjectBody.vue
@@ -17,9 +17,6 @@
             <SubjectProjectsPage :projects="projects" :is-loading="isLoading"></SubjectProjectsPage>
         </v-window-item>
         <v-window-item value="1" key="1">
-            <SubjectAnnouncementsPage />
-        </v-window-item>
-        <v-window-item value="2" key="2">
             <SubjectGroupsPage />
         </v-window-item>
     </v-window>
@@ -38,7 +35,7 @@ defineProps<{
     isLoading: boolean;
 }>();
 
-const items = ["projects", "announcements", "groups"];
+const items = ["projects", "groups"];
 const tab = ref(0);
 </script>
 
diff --git a/frontend/src/components/subjects/SubjectCard.vue b/frontend/src/components/subjects/SubjectCard.vue
index 6999f587..962b149f 100644
--- a/frontend/src/components/subjects/SubjectCard.vue
+++ b/frontend/src/components/subjects/SubjectCard.vue
@@ -13,7 +13,7 @@
                     aspect-ratio="16/9"
                     height="120px"
                 >
-                    <v-card-title>
+                    <v-card-title class="subject-title">
                         {{ subject?.name }}
                         <v-icon class="">mdi-chevron-right</v-icon>
                     </v-card-title>
@@ -49,4 +49,9 @@ defineProps<{
     position: relative;
     width: 100%;
 }
+
+.subject-title {
+    color: white;
+}
+
 </style>

From ba56e7aeef2f758376a781215c46c78e1fc3d2a5 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 14 May 2024 19:57:44 +0200
Subject: [PATCH 29/68] removed intern skeleton loaders

---
 .../components/subject/body/SubjectBody.vue   |   4 +-
 .../SubjectAnnouncementsPage.vue              |   7 --
 .../body/projects/SubjectProjectPage.vue      |   1 -
 .../body/projects/SubjectProjectsPage.vue     |   3 -
 .../projects/list/SubjectProjectsList.vue     |  39 +++---
 .../subject/header/SubjectHeaderCard.vue      |  51 ++++----
 .../subject/header/SubjectHeaderContainer.vue |   2 -
 .../src/components/subjects/SubjectCard.vue   |  41 +++---
 .../subjects/SubjectsHeaderCard.vue           |  57 ++++-----
 .../subjects/SubjectsHeaderContainer.vue      |   2 -
 frontend/src/views/subject/SubjectView.vue    | 119 +++++++++---------
 frontend/src/views/subject/SubjectsView.vue   |  69 +++++-----
 12 files changed, 180 insertions(+), 215 deletions(-)
 delete mode 100644 frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue

diff --git a/frontend/src/components/subject/body/SubjectBody.vue b/frontend/src/components/subject/body/SubjectBody.vue
index d5204000..69bf10e3 100644
--- a/frontend/src/components/subject/body/SubjectBody.vue
+++ b/frontend/src/components/subject/body/SubjectBody.vue
@@ -14,7 +14,7 @@
 
     <v-window v-model="tab">
         <v-window-item value="0" key="0">
-            <SubjectProjectsPage :projects="projects" :is-loading="isLoading"></SubjectProjectsPage>
+            <SubjectProjectsPage :projects="projects"></SubjectProjectsPage>
         </v-window-item>
         <v-window-item value="1" key="1">
             <SubjectGroupsPage />
@@ -24,7 +24,6 @@
 
 <script setup lang="ts">
 import SubjectProjectsPage from "@/components/subject/body/projects/SubjectProjectsPage.vue";
-import SubjectAnnouncementsPage from "@/components/subject/body/announcements/SubjectAnnouncementsPage.vue";
 import SubjectGroupsPage from "@/components/subject/body/groups/SubjectGroupsPage.vue";
 
 import { ref } from "vue";
@@ -32,7 +31,6 @@ import type Project from "@/models/Project";
 
 defineProps<{
     projects: Project[];
-    isLoading: boolean;
 }>();
 
 const items = ["projects", "groups"];
diff --git a/frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue b/frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue
deleted file mode 100644
index 5b966c85..00000000
--- a/frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <h1>Announcements</h1>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
index 21c7959b..93a25fd3 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
@@ -73,7 +73,6 @@ import { ref } from "vue";
 defineProps<{
     selectedTab: number;
     project: Project;
-    isLoading: boolean;
 }>();
 
 const expanded = ref(false);
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
index 2b746180..2e58f2c4 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
@@ -4,7 +4,6 @@
             <SubjectProjectsList
                 :projects="filteredProjects"
                 :selected-tab="selectedTab"
-                :is-loading="isLoading"
                 @tab-changed="updateSelectedTab"
                 @filter-changed="updateFilterOption"
             ></SubjectProjectsList>
@@ -19,7 +18,6 @@
                     <SubjectProjectPage
                         :selected-tab="selectedTab"
                         :project="project"
-                        :is-loading="isLoading"
                     ></SubjectProjectPage>
                 </v-window-item>
 
@@ -42,7 +40,6 @@ import SubjectProjectPage from "@/components/subject/body/projects/SubjectProjec
 
 const props = defineProps<{
     projects: Project[];
-    isLoading: boolean;
 }>();
 
 const { projects } = toRefs(props);
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
index ee1bf30d..b5218b6c 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
@@ -16,27 +16,25 @@
                 </v-chip>
             </v-chip-group>
         </v-card-subtitle>
-        <v-skeleton-loader type="card" color="white">
-            <v-card-text>
-                <div class="scrollable-tabs">
-                    <v-tabs
-                        v-if="projects!.length > 0"
-                        direction="vertical"
-                        v-model="selectedTab"
-                        show-arrows
-                        prev-icon="mdi-chevron-up"
-                        next-icon="mdi-chevron-down"
-                    >
-                        <v-tab v-for="project in projects" :key="project.id" :value="project.id">
-                            <SubjectTab :projectName="project.name"></SubjectTab>
-                        </v-tab>
-                    </v-tabs>
-                    <div v-else class="placeholder">
-                        <p>{{ $t("subject.projectsPage.no_projects") }}</p>
-                    </div>
+        <v-card-text>
+            <div class="scrollable-tabs">
+                <v-tabs
+                    v-if="projects!.length > 0"
+                    direction="vertical"
+                    v-model="selectedTab"
+                    show-arrows
+                    prev-icon="mdi-chevron-up"
+                    next-icon="mdi-chevron-down"
+                >
+                    <v-tab v-for="project in projects" :key="project.id" :value="project.id">
+                        <SubjectTab :projectName="project.name"></SubjectTab>
+                    </v-tab>
+                </v-tabs>
+                <div v-else class="placeholder">
+                    <p>{{ $t("subject.projectsPage.no_projects") }}</p>
                 </div>
-            </v-card-text>
-        </v-skeleton-loader>
+            </div>
+        </v-card-text>
     </v-card>
 </template>
 
@@ -49,7 +47,6 @@ import { ref, watch } from "vue";
 const props = defineProps<{
     projects: Project[];
     selectedTab: number;
-    isLoading: boolean;
 }>();
 
 const selectedTab = ref(props.selectedTab);
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
index 25f6befc..fa60de85 100644
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderCard.vue
@@ -1,35 +1,33 @@
 <template>
     <v-card variant="text" class="title-card" height="165">
-        <v-skeleton-loader type="card" color="white">
-            <v-row>
-                <v-col :cols="isInstructor? 10 : 12">
-                    <v-card-title class="title">
-                        {{ title }}
-                    </v-card-title>
-                    <v-card-text>
+        <v-row>
+            <v-col :cols="isInstructor ? 10 : 12">
+                <v-card-title class="title">
+                    {{ title }}
+                </v-card-title>
+                <v-card-text>
+                    <HeaderSubtitleButton
+                        :title="`${$t('subject.academy_year')} ${academicYear - 1}-${academicYear}`"
+                        :clickable="false"
+                        :active="false"
+                    ></HeaderSubtitleButton>
+                    <div class="d-flex justify-start instr-container">
                         <HeaderSubtitleButton
-                            :title="`${$t('subject.academy_year')} ${academicYear - 1}-${academicYear}`"
+                            v-for="instructor in instructors"
+                            :key="instructor.uid"
+                            :title="instructor.given_name"
                             :clickable="false"
                             :active="false"
                         ></HeaderSubtitleButton>
-                        <div class="d-flex justify-start instr-container">
-                            <HeaderSubtitleButton
-                                v-for="instructor in instructors"
-                                :key="instructor.uid"
-                                :title="instructor.given_name"
-                                :clickable="false"
-                                :active="false"
-                            ></HeaderSubtitleButton>
-                        </div>
-                    </v-card-text>
-                </v-col>
-                <v-col v-if="isInstructor" cols="2">
-                    <router-link to="" class="link">
-                        <v-icon size="large">mdi-square-edit-outline</v-icon>
-                    </router-link>
-                </v-col>
-            </v-row>
-        </v-skeleton-loader>
+                    </div>
+                </v-card-text>
+            </v-col>
+            <v-col v-if="isInstructor" cols="2">
+                <router-link to="" class="link">
+                    <v-icon size="large">mdi-square-edit-outline</v-icon>
+                </router-link>
+            </v-col>
+        </v-row>
     </v-card>
 </template>
 
@@ -41,7 +39,6 @@ defineProps<{
     title: string;
     academicYear: number;
     instructors: User[];
-    isLoading: boolean;
     isInstructor: boolean;
 }>();
 </script>
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
index 118d24c3..f20b3f78 100644
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
@@ -8,7 +8,6 @@
                 :title="title"
                 :academic-year="academicYear"
                 :instructors="instructors"
-                :is-loading="isLoading"
                 :is-instructor="isInstructor"
             >
             </SubjectHeaderCard>
@@ -25,7 +24,6 @@ defineProps<{
     title: string;
     academicYear: number;
     instructors: User[];
-    isLoading: boolean;
     imagePath: string;
     isInstructor: boolean;
 }>();
diff --git a/frontend/src/components/subjects/SubjectCard.vue b/frontend/src/components/subjects/SubjectCard.vue
index 962b149f..e7e186fb 100644
--- a/frontend/src/components/subjects/SubjectCard.vue
+++ b/frontend/src/components/subjects/SubjectCard.vue
@@ -1,26 +1,21 @@
 <template>
-    <v-skeleton-loader type="card" class="card-loader">
-        <router-link
-            :to="{ name: 'subject', params: { subjectId: subject.id } }"
-            class="router-link"
-        >
-            <v-card rounded="xl" class="subject-card">
-                <v-img
-                    src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
-                    class="align-end"
-                    gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-                    cover
-                    aspect-ratio="16/9"
-                    height="120px"
-                >
-                    <v-card-title class="subject-title">
-                        {{ subject?.name }}
-                        <v-icon class="">mdi-chevron-right</v-icon>
-                    </v-card-title>
-                </v-img>
-            </v-card>
-        </router-link>
-    </v-skeleton-loader>
+    <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
+        <v-card rounded="xl" class="subject-card">
+            <v-img
+                src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
+                class="align-end"
+                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+                cover
+                aspect-ratio="16/9"
+                height="120px"
+            >
+                <v-card-title class="subject-title">
+                    {{ subject?.name }}
+                    <v-icon class="">mdi-chevron-right</v-icon>
+                </v-card-title>
+            </v-img>
+        </v-card>
+    </router-link>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +23,6 @@ import type Subject from "@/models/Subject";
 
 defineProps<{
     subject: Subject;
-    isLoading: boolean;
 }>();
 </script>
 
@@ -53,5 +47,4 @@ defineProps<{
 .subject-title {
     color: white;
 }
-
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index a7ad6ee8..c9521698 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -1,34 +1,32 @@
 <template>
-    <v-skeleton-loader type="card" class="card-loader">
-        <v-card variant="text" class="title-card" rounded="xl" width="100%">
-            <v-row>
-                <v-col>
-                    <v-card-title class="title">
-                        {{ $t("subjects.title") }}
-                    </v-card-title>
+    <v-card variant="text" class="title-card" rounded="xl" width="100%">
+        <v-row>
+            <v-col>
+                <v-card-title class="title">
+                    {{ $t("subjects.title") }}
+                </v-card-title>
 
-                    <v-card-text>
-                        <v-skeleton-loader type="button" color="white">
-                            <div class="chip_container">
-                                <v-chip-group mandatory v-model="activeAcademicYear" column>
-                                    <v-chip
-                                        v-for="(academicYear, index) in academicYears"
-                                        :key="index"
-                                        :value="academicYear"
-                                        color="primary"
-                                        class="ma-1"
-                                        variant="tonal"
-                                    >
-                                        {{ academicYear - 1 + "-" + academicYear }}
-                                    </v-chip>
-                                </v-chip-group>
-                            </div>
-                        </v-skeleton-loader>
-                    </v-card-text>
-                </v-col>
-            </v-row>
-        </v-card>
-    </v-skeleton-loader>
+                <v-card-text>
+                    <v-skeleton-loader type="button" color="white">
+                        <div class="chip_container">
+                            <v-chip-group mandatory v-model="activeAcademicYear" column>
+                                <v-chip
+                                    v-for="(academicYear, index) in academicYears"
+                                    :key="index"
+                                    :value="academicYear"
+                                    color="primary"
+                                    class="ma-1"
+                                    variant="tonal"
+                                >
+                                    {{ academicYear - 1 + "-" + academicYear }}
+                                </v-chip>
+                            </v-chip-group>
+                        </div>
+                    </v-skeleton-loader>
+                </v-card-text>
+            </v-col>
+        </v-row>
+    </v-card>
 </template>
 
 <script setup lang="ts">
@@ -37,7 +35,6 @@ import getCurrentAcademicYear from "@/composables/useAcademicYear";
 
 const props = defineProps<{
     academicYears: number[];
-    isLoading: boolean;
 }>();
 const { academicYears } = toRefs(props);
 const activeAcademicYear = ref(getCurrentAcademicYear());
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
index f98794c5..0085f7b9 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
@@ -3,7 +3,6 @@
         <v-col cols="6">
             <SubjectsHeaderCard
                 :academic-years="academicYears"
-                :is-loading="isLoading"
                 @academic-year-changed="onAcademicYearChanged"
             ></SubjectsHeaderCard>
         </v-col>
@@ -21,7 +20,6 @@ import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.v
 
 defineProps<{
     academicYears: number[];
-    isLoading: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index d34dce47..3abf52a0 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -3,65 +3,62 @@
         <p>Error: {{ error }}</p>
     </div>
 
-    <v-row v-else>
-        <v-snackbar v-model="snackbar" timeout="3000" color="primary">
-            {{ $t("subject.register_link_button.snackbar") }}
-            <template v-slot:actions>
-                <v-btn @click="snackbar = false">
-                    <v-icon>mdi-close</v-icon>
-                </v-btn>
-            </template>
-        </v-snackbar>
+    <v-skeleton-loader v-else type="card" :loading="isLoading">
+        <v-row>
+            <v-snackbar v-model="snackbar" timeout="3000" color="primary">
+                {{ $t("subject.register_link_button.snackbar") }}
+                <template v-slot:actions>
+                    <v-btn @click="snackbar = false">
+                        <v-icon>mdi-close</v-icon>
+                    </v-btn>
+                </template>
+            </v-snackbar>
 
-        <v-col cols="1">
-            <router-link :to="{ name: 'subjects' }">
-                <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
-                    <v-icon>mdi-arrow-left</v-icon>
-                </v-btn>
-            </router-link>
-        </v-col>
-        <v-col>
-            <BackgroundContainer>
-                <v-row>
-                    <v-col>
-                        <SubjectHeaderContainer
-                            v-if="subject"
-                            :title="subject!.name"
-                            :instructors="subject!.instructors"
-                            :academic-year="subject!.academic_year"
-                            :is-loading="isLoading"
-                            :is-instructor="isInstructor"
-                            image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
-                        ></SubjectHeaderContainer>
-                    </v-col>
-                </v-row>
-                <v-row>
-                    <v-col>
-                        <SubjectBody
-                            v-if="subject"
-                            :projects="subject!.projects"
-                            :is-loading="isLoading"
-                        ></SubjectBody>
-                    </v-col>
-                </v-row>
-            </BackgroundContainer>
-        </v-col>
-        <v-col v-if="isInstructor" cols="2">
-            <div class="action-btn-container">
-                <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
-                    <v-btn prepend-icon="mdi-plus-circle">
-                        {{ $t("subject.create_project") }}
+            <v-col cols="1">
+                <router-link :to="{ name: 'subjects' }">
+                    <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
+                        <v-icon>mdi-arrow-left</v-icon>
                     </v-btn>
                 </router-link>
-                <v-btn prepend-icon="mdi-content-copy" @click="copyRegisterLink">
-                    {{ $t("subject.register_link_button.title") }}
-                    <v-tooltip activator="parent" location="start" max-width="200vw">
-                        {{ $t("subject.register_link_button.tooltip") }}
-                    </v-tooltip>
-                </v-btn>
-            </div>
-        </v-col>
-    </v-row>
+            </v-col>
+            <v-col>
+                <BackgroundContainer>
+                    <v-row>
+                        <v-col>
+                            <SubjectHeaderContainer
+                                v-if="subject"
+                                :title="subject!.name"
+                                :instructors="subject!.instructors"
+                                :academic-year="subject!.academic_year"
+                                :is-instructor="isInstructor"
+                                image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
+                            ></SubjectHeaderContainer>
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col>
+                            <SubjectBody v-if="subject" :projects="subject!.projects"></SubjectBody>
+                        </v-col>
+                    </v-row>
+                </BackgroundContainer>
+            </v-col>
+            <v-col v-if="isInstructor" cols="2">
+                <div class="action-btn-container">
+                    <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
+                        <v-btn prepend-icon="mdi-plus-circle">
+                            {{ $t("subject.create_project") }}
+                        </v-btn>
+                    </router-link>
+                    <v-btn prepend-icon="mdi-content-copy" @click="copyRegisterLink">
+                        {{ $t("subject.register_link_button.title") }}
+                        <v-tooltip activator="parent" location="start" max-width="200vw">
+                            {{ $t("subject.register_link_button.tooltip") }}
+                        </v-tooltip>
+                    </v-btn>
+                </div>
+            </v-col>
+        </v-row>
+    </v-skeleton-loader>
 </template>
 
 <script setup lang="ts">
@@ -71,8 +68,7 @@ import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/body/SubjectBody.vue";
 import { useRouter } from "vue-router";
-import useIsTeacher from "@/composables/useIsTeacher";
-import {useUserQuery} from "@/queries/User";
+import { useUserQuery } from "@/queries/User";
 
 const props = defineProps<{
     subjectId: number;
@@ -82,13 +78,14 @@ const { subjectId } = toRefs(props);
 const snackbar = ref(false);
 
 const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subjectId);
-const {data: user, isLoading: isLoadingUser, isError: isErrorUser} = useUserQuery(null);
+const { data: user } = useUserQuery(null); // refactor queries once pr querie refactor is merged
 
 const isInstructor = computed(() => {
-    return [...(subject.value?.instructors || [])].some((instructor) => instructor.uid === user.value.uid);
+    return [...(subject.value?.instructors || [])].some(
+        (instructor) => instructor.uid === user.value.uid
+    );
 });
 
-
 const router = useRouter();
 
 const registerLink = computed(() => {
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 315ae304..73137bb7 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -2,40 +2,41 @@
     <div v-if="isError" class="v-container">
         <p>Error: {{ error }}</p>
     </div>
-    <v-row v-else>
-        <v-col :cols="isTeacher ? 10 : 12">
-            <BackgroundContainer>
-                <v-row>
-                    <v-col>
-                        <SubjectsHeaderContainer
-                            :academic-years="academicYears"
-                            :is-loading="isLoading"
-                            @academic-year-changed="onAcademicYearChanged"
-                        ></SubjectsHeaderContainer>
-                    </v-col>
-                </v-row>
-                <v-row>
-                    <v-col v-for="(subject, index) in subjectsByAcademicYear" :key="index" cols="6">
-                        <SubjectCard
-                            :subject="subject"
-                            :is-loading="isLoading"
-                            class="subject-card"
+
+    <v-skeleton-loader v-else type="card" :loading="isLoading">
+        <v-row>
+            <v-col :cols="isTeacher ? 10 : 12">
+                <BackgroundContainer>
+                    <v-row>
+                        <v-col>
+                            <SubjectsHeaderContainer
+                                :academic-years="academicYears"
+                                @academic-year-changed="onAcademicYearChanged"
+                            ></SubjectsHeaderContainer>
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col
+                            v-for="(subject, index) in subjectsByAcademicYear"
+                            :key="index"
+                            cols="6"
                         >
-                        </SubjectCard>
-                    </v-col>
-                </v-row>
-            </BackgroundContainer>
-        </v-col>
-        <v-col v-if="isTeacher" cols="2">
-            <div class="action-btn-container">
-                <router-link to="">
-                    <v-btn prepend-icon="mdi-plus-circle">
-                        {{ $t("subjects.create_subject") }}
-                    </v-btn>
-                </router-link>
-            </div>
-        </v-col>
-    </v-row>
+                            <SubjectCard :subject="subject" class="subject-card"> </SubjectCard>
+                        </v-col>
+                    </v-row>
+                </BackgroundContainer>
+            </v-col>
+            <v-col v-if="isTeacher" cols="2">
+                <div class="action-btn-container">
+                    <router-link to="">
+                        <v-btn prepend-icon="mdi-plus-circle">
+                            {{ $t("subjects.create_subject") }}
+                        </v-btn>
+                    </router-link>
+                </div>
+            </v-col>
+        </v-row>
+    </v-skeleton-loader>
 </template>
 
 <script setup lang="ts">
@@ -56,7 +57,7 @@ const academicYears = computed(() => {
 });
 
 const selectedAcademicYear = ref<number>(useAcademicYear());
-const {isTeacher} = useIsTeacher();
+const { isTeacher } = useIsTeacher();
 
 const subjectsByAcademicYear = computed(() => {
     return [...(subjects.value || [])].filter(

From 642da2e0b5a85cea0a625da60092134832ef9007 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 14 May 2024 20:05:33 +0200
Subject: [PATCH 30/68] fixed pylint docker

---
 backend/src/docker_tests/utils.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9983d1fc..9158d428 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async(func):
+def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args, **kwargs):
+    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 

From 7876d5d3fcd0d0538eddfb17ebecefe13cfdd2ec Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 14 May 2024 20:34:52 +0200
Subject: [PATCH 31/68] found another skeleton loader

---
 .../subjects/SubjectsHeaderCard.vue           | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
index c9521698..6cc3dd0c 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subjects/SubjectsHeaderCard.vue
@@ -7,22 +7,20 @@
                 </v-card-title>
 
                 <v-card-text>
-                    <v-skeleton-loader type="button" color="white">
-                        <div class="chip_container">
-                            <v-chip-group mandatory v-model="activeAcademicYear" column>
-                                <v-chip
-                                    v-for="(academicYear, index) in academicYears"
-                                    :key="index"
-                                    :value="academicYear"
-                                    color="primary"
-                                    class="ma-1"
-                                    variant="tonal"
-                                >
-                                    {{ academicYear - 1 + "-" + academicYear }}
-                                </v-chip>
-                            </v-chip-group>
-                        </div>
-                    </v-skeleton-loader>
+                    <div class="chip_container">
+                        <v-chip-group mandatory v-model="activeAcademicYear" column>
+                            <v-chip
+                                v-for="(academicYear, index) in academicYears"
+                                :key="index"
+                                :value="academicYear"
+                                color="primary"
+                                class="ma-1"
+                                variant="tonal"
+                            >
+                                {{ academicYear - 1 + "-" + academicYear }}
+                            </v-chip>
+                        </v-chip-group>
+                    </div>
                 </v-card-text>
             </v-col>
         </v-row>
@@ -68,8 +66,4 @@ watch(activeAcademicYear, (newVal: number | undefined) => {
 .chip_container {
     overflow-x: auto;
 }
-
-.card-loader {
-    border-radius: 25px;
-}
 </style>

From a2e177314ced96f8cad17a258145678333dcd2dc Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 15 May 2024 12:41:21 +0200
Subject: [PATCH 32/68] refactored components structure and added icons for
 student/teacher subjects

---
 backend/src/docker_tests/utils.py             |  4 +--
 .../subject/header/SubjectHeaderImage.vue     | 18 ----------
 .../subjectsview}/SubjectCard.vue             | 14 ++++++++
 .../subjectsview}/SubjectsHeaderCard.vue      | 20 +++++++++--
 .../subjectsview}/SubjectsHeaderContainer.vue |  4 +--
 .../{ => subjectview}/body/SubjectBody.vue    |  4 +--
 .../body/groups/SubjectGroupsPage.vue         |  0
 .../body/projects/SubjectProjectPage.vue      |  0
 .../body/projects/SubjectProjectsPage.vue     |  8 ++---
 .../projects/list/SubjectProjectsList.vue     |  2 +-
 .../body/projects/list/SubjectTab.vue         |  0
 .../header/SubjectHeaderCard.vue              |  0
 .../header/SubjectHeaderContainer.vue         |  4 +--
 .../subjectview/header/SubjectHeaderImage.vue | 36 +++++++++++++++++++
 frontend/src/views/subject/SubjectView.vue    |  4 +--
 frontend/src/views/subject/SubjectsView.vue   | 15 +++++---
 16 files changed, 93 insertions(+), 40 deletions(-)
 delete mode 100644 frontend/src/components/subject/header/SubjectHeaderImage.vue
 rename frontend/src/components/{subjects => subject/subjectsview}/SubjectCard.vue (79%)
 rename frontend/src/components/{subjects => subject/subjectsview}/SubjectsHeaderCard.vue (73%)
 rename frontend/src/components/{subjects => subject/subjectsview}/SubjectsHeaderContainer.vue (80%)
 rename frontend/src/components/subject/{ => subjectview}/body/SubjectBody.vue (86%)
 rename frontend/src/components/subject/{ => subjectview}/body/groups/SubjectGroupsPage.vue (100%)
 rename frontend/src/components/subject/{ => subjectview}/body/projects/SubjectProjectPage.vue (100%)
 rename frontend/src/components/subject/{ => subjectview}/body/projects/SubjectProjectsPage.vue (90%)
 rename frontend/src/components/subject/{ => subjectview}/body/projects/list/SubjectProjectsList.vue (97%)
 rename frontend/src/components/subject/{ => subjectview}/body/projects/list/SubjectTab.vue (100%)
 rename frontend/src/components/subject/{ => subjectview}/header/SubjectHeaderCard.vue (100%)
 rename frontend/src/components/subject/{ => subjectview}/header/SubjectHeaderContainer.vue (78%)
 create mode 100644 frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9158d428..9983d1fc 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
+def to_async(func):
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
+    async def run_async(*args, **kwargs):
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 
diff --git a/frontend/src/components/subject/header/SubjectHeaderImage.vue b/frontend/src/components/subject/header/SubjectHeaderImage.vue
deleted file mode 100644
index 0dcdd5df..00000000
--- a/frontend/src/components/subject/header/SubjectHeaderImage.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <v-skeleton-loader type="image" class="header-img">
-        <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img"></v-img>
-    </v-skeleton-loader>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-    imagePath: string;
-}>();
-</script>
-
-<style scoped>
-.header-img {
-    border-radius: 25px;
-    height: 165px;
-}
-</style>
diff --git a/frontend/src/components/subjects/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
similarity index 79%
rename from frontend/src/components/subjects/SubjectCard.vue
rename to frontend/src/components/subject/subjectsview/SubjectCard.vue
index e7e186fb..6a2a61e8 100644
--- a/frontend/src/components/subjects/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -9,6 +9,14 @@
                 aspect-ratio="16/9"
                 height="120px"
             >
+
+                <v-icon
+                    color="white"
+                    size="xx-large"
+                    class="subject-icon"
+                >
+                    mdi-account-tie
+                </v-icon>
                 <v-card-title class="subject-title">
                     {{ subject?.name }}
                     <v-icon class="">mdi-chevron-right</v-icon>
@@ -47,4 +55,10 @@ defineProps<{
 .subject-title {
     color: white;
 }
+
+.subject-icon {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+}
 </style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
similarity index 73%
rename from frontend/src/components/subjects/SubjectsHeaderCard.vue
rename to frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index 6cc3dd0c..ed307faf 100644
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -23,19 +23,35 @@
                     </div>
                 </v-card-text>
             </v-col>
+            <v-col cols="3">
+                <v-checkbox
+                    class="align-right"
+                    v-model="showInstructorSubjects"
+                >
+                    instructor vakken
+                </v-checkbox>
+                <v-checkbox
+                    class="align-right"
+                    v-model="showStudentSubjects"
+                >
+                    student vakken
+                </v-checkbox>
+            </v-col>
         </v-row>
     </v-card>
 </template>
 
 <script setup lang="ts">
 import { ref, toRefs, watch } from "vue";
-import getCurrentAcademicYear from "@/composables/useAcademicYear";
+import useAcademicYear from "@/composables/useAcademicYear";
 
 const props = defineProps<{
     academicYears: number[];
 }>();
 const { academicYears } = toRefs(props);
-const activeAcademicYear = ref(getCurrentAcademicYear());
+const activeAcademicYear = ref(useAcademicYear());
+const showInstructorSubjects = ref(true);
+const showStudentSubjects = ref(true);
 
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
similarity index 80%
rename from frontend/src/components/subjects/SubjectsHeaderContainer.vue
rename to frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 0085f7b9..008440c7 100644
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script setup lang="ts">
-import SubjectsHeaderCard from "@/components/subjects/SubjectsHeaderCard.vue";
-import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.vue";
+import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
+import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
 
 defineProps<{
     academicYears: number[];
diff --git a/frontend/src/components/subject/body/SubjectBody.vue b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
similarity index 86%
rename from frontend/src/components/subject/body/SubjectBody.vue
rename to frontend/src/components/subject/subjectview/body/SubjectBody.vue
index 69bf10e3..bc04c9c6 100644
--- a/frontend/src/components/subject/body/SubjectBody.vue
+++ b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsPage from "@/components/subject/body/projects/SubjectProjectsPage.vue";
-import SubjectGroupsPage from "@/components/subject/body/groups/SubjectGroupsPage.vue";
+import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
+import SubjectGroupsPage from "@/components/subject/subjectview/body/groups/SubjectGroupsPage.vue";
 
 import { ref } from "vue";
 import type Project from "@/models/Project";
diff --git a/frontend/src/components/subject/body/groups/SubjectGroupsPage.vue b/frontend/src/components/subject/subjectview/body/groups/SubjectGroupsPage.vue
similarity index 100%
rename from frontend/src/components/subject/body/groups/SubjectGroupsPage.vue
rename to frontend/src/components/subject/subjectview/body/groups/SubjectGroupsPage.vue
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
similarity index 100%
rename from frontend/src/components/subject/body/projects/SubjectProjectPage.vue
rename to frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
similarity index 90%
rename from frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
rename to frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
index 2e58f2c4..4a78730e 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsList from "@/components/subject/body/projects/list/SubjectProjectsList.vue";
+import SubjectProjectsList from "@/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { computed, ref, toRefs } from "vue";
-import SubjectProjectPage from "@/components/subject/body/projects/SubjectProjectPage.vue";
+import SubjectProjectPage from "@/components/subject/subjectview/body/projects/SubjectProjectPage.vue";
 
 const props = defineProps<{
     projects: Project[];
@@ -53,9 +53,9 @@ const filteredProjects = computed(() => {
     if (filterOption.value === FilterOptions.All) {
         return sortedProjects;
     } else if (filterOption.value === FilterOptions.Active) {
-        return sortedProjects.filter((project) => new Date(project.deadline) > currentDate) || [];
+        return sortedProjects.filter((project) => new Date(project.deadline) > currentDate);
     } else if (filterOption.value === FilterOptions.Completed) {
-        return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate) || [];
+        return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate);
     }
     return sortedProjects;
 });
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
similarity index 97%
rename from frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
rename to frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
index b5218b6c..e60d10de 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import SubjectTab from "@/components/subject/body/projects/list/SubjectTab.vue";
+import SubjectTab from "@/components/subject/subjectview/body/projects/list/SubjectTab.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { ref, watch } from "vue";
diff --git a/frontend/src/components/subject/body/projects/list/SubjectTab.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectTab.vue
similarity index 100%
rename from frontend/src/components/subject/body/projects/list/SubjectTab.vue
rename to frontend/src/components/subject/subjectview/body/projects/list/SubjectTab.vue
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
similarity index 100%
rename from frontend/src/components/subject/header/SubjectHeaderCard.vue
rename to frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
similarity index 78%
rename from frontend/src/components/subject/header/SubjectHeaderContainer.vue
rename to frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index f20b3f78..1ab9f89b 100644
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import SubjectHeaderCard from "@/components/subject/header/SubjectHeaderCard.vue";
+import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
-import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.vue";
+import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
 
 defineProps<{
     title: string;
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
new file mode 100644
index 00000000..dbda4f75
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -0,0 +1,36 @@
+<template>
+    <v-img
+        aspect-ratio="16/9"
+        cover
+        rounded="xl"
+        :src="imagePath"
+        class="header-img"
+    >
+        <v-icon
+            color="white"
+            size="xxx-large"
+            class="subject-icon"
+        >
+            mdi-school
+        </v-icon>
+    </v-img>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    imagePath: string;
+}>();
+</script>
+
+<style scoped>
+.header-img {
+    border-radius: 25px;
+    height: 165px;
+}
+
+.subject-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+</style>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 3abf52a0..e2e89dbd 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -65,8 +65,8 @@
 import { computed, ref, toRefs } from "vue";
 import { useSubjectDetailsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
-import SubjectBody from "@/components/subject/body/SubjectBody.vue";
+import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
+import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
 import { useRouter } from "vue-router";
 import { useUserQuery } from "@/queries/User";
 
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 73137bb7..38f0d082 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -42,13 +42,15 @@
 <script setup lang="ts">
 import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
-import SubjectCard from "@/components/subjects/SubjectCard.vue";
+import SubjectsHeaderContainer from "@/components/subject/subjectsview/SubjectsHeaderContainer.vue";
+import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
+const selectedAcademicYear = ref<number>(useAcademicYear());
+const { isTeacher } = useIsTeacher();
 
 const academicYears = computed(() => {
     return Array.from(
@@ -56,15 +58,18 @@ const academicYears = computed(() => {
     ).sort((a, b) => b - a);
 });
 
-const selectedAcademicYear = ref<number>(useAcademicYear());
-const { isTeacher } = useIsTeacher();
-
 const subjectsByAcademicYear = computed(() => {
     return [...(subjects.value || [])].filter(
         (subject) => subject.academic_year === selectedAcademicYear.value
     );
 });
 
+/* will be necessary to show checkboxes in header when queries refactoring returns instructor and student subjects
+const isInstructor = computed(() => {
+    return isTeacher;
+});
+ */
+
 const onAcademicYearChanged = (academicYear: number) => {
     selectedAcademicYear.value = academicYear;
 };

From 34547ebfdc52fefae172a2804eafcc6244a12c39 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 15 May 2024 12:56:11 +0200
Subject: [PATCH 33/68] made subjecticon component

---
 .../components/subject/extra/SubjectIcon.vue  | 21 ++++++++++++++
 .../subject/subjectsview/SubjectCard.vue      | 17 +++++------
 .../subjectsview/SubjectsHeaderContainer.vue  |  6 ++--
 .../subjectsview/SubjectsHeaderImage.vue      | 29 +++++++++++++++++++
 .../subjectview/header/SubjectHeaderImage.vue | 14 +++++----
 5 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/subject/extra/SubjectIcon.vue
 create mode 100644 frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
new file mode 100644
index 00000000..701c37c9
--- /dev/null
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-icon
+        color="white"
+        :size="size"
+    >
+        {{ isInstructor ? 'mdi-account-tie' : 'mdi-school'}}
+    </v-icon>
+</template>
+
+<script setup lang="ts">
+
+defineProps<{
+    isInstructor: boolean;
+    size: string;
+}>();
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index 6a2a61e8..cf557cce 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -9,14 +9,11 @@
                 aspect-ratio="16/9"
                 height="120px"
             >
-
-                <v-icon
-                    color="white"
+                <SubjectIcon
+                    :is-instructor="isInstructor"
                     size="xx-large"
                     class="subject-icon"
-                >
-                    mdi-account-tie
-                </v-icon>
+                ></SubjectIcon>
                 <v-card-title class="subject-title">
                     {{ subject?.name }}
                     <v-icon class="">mdi-chevron-right</v-icon>
@@ -28,16 +25,18 @@
 
 <script setup lang="ts">
 import type Subject from "@/models/Subject";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+import {ref} from "vue";
 
 defineProps<{
     subject: Subject;
 }>();
+
+const isInstructor = ref<boolean>(true);
+
 </script>
 
 <style scoped>
-.card-loader {
-    border-radius: 25px;
-}
 
 .router-link {
     text-decoration: none;
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 008440c7..d10e47ed 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -7,16 +7,16 @@
             ></SubjectsHeaderCard>
         </v-col>
         <v-col>
-            <SubjectHeaderImage
+            <SubjectsHeaderImage
                 image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
-            ></SubjectHeaderImage>
+            ></SubjectsHeaderImage>
         </v-col>
     </v-row>
 </template>
 
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
-import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
+import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
 
 defineProps<{
     academicYears: number[];
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
new file mode 100644
index 00000000..97b586d6
--- /dev/null
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
@@ -0,0 +1,29 @@
+<template>
+    <v-img
+        aspect-ratio="16/9"
+        cover
+        rounded="xl"
+        :src="imagePath"
+        class="header-img"
+    >
+    </v-img>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    imagePath: string;
+}>();
+</script>
+
+<style scoped>
+.header-img {
+    border-radius: 25px;
+    height: 165px;
+}
+
+.subject-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+</style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index dbda4f75..9d74fb28 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -6,20 +6,24 @@
         :src="imagePath"
         class="header-img"
     >
-        <v-icon
-            color="white"
+        <SubjectIcon
+            :is-instructor="isInstructor"
             size="xxx-large"
             class="subject-icon"
-        >
-            mdi-school
-        </v-icon>
+        ></SubjectIcon>
     </v-img>
 </template>
 
 <script setup lang="ts">
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+import {ref} from "vue";
+
 defineProps<{
     imagePath: string;
 }>();
+
+const isInstructor = ref<boolean>(true);
+
 </script>
 
 <style scoped>

From f86b7ebd35398cc77678b21d8e8eac3c838a8450 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Wed, 15 May 2024 12:57:17 +0200
Subject: [PATCH 34/68] deleted non used css class

---
 .../components/subject/subjectsview/SubjectsHeaderImage.vue  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
index 97b586d6..a1a0c912 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
@@ -21,9 +21,4 @@ defineProps<{
     height: 165px;
 }
 
-.subject-icon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-}
 </style>

From d2fe9fdc2ec37fc5a1176612e5c9b1180dce3416 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 18:20:59 +0200
Subject: [PATCH 35/68] deleted tooltip + last refactoring before pull request

---
 .../subjectsview/SubjectsHeaderCard.vue       | 25 ++++++++++++-------
 .../subjectsview/SubjectsHeaderContainer.vue  |  2 +-
 frontend/src/i18n/locales/en.ts               |  2 ++
 frontend/src/i18n/locales/nl.ts               |  2 ++
 frontend/src/views/subject/SubjectView.vue    |  3 ---
 frontend/src/views/subject/SubjectsView.vue   |  2 +-
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index ed307faf..aefc0421 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -23,19 +23,17 @@
                     </div>
                 </v-card-text>
             </v-col>
-            <v-col cols="3">
+            <v-col cols="6">
                 <v-checkbox
-                    class="align-right"
+                    class="subject-checkbox"
                     v-model="showInstructorSubjects"
-                >
-                    instructor vakken
-                </v-checkbox>
+                    :label="$t('subjects.instructor_subjects')"
+                ></v-checkbox>
                 <v-checkbox
-                    class="align-right"
+                    class="subject-checkbox"
                     v-model="showStudentSubjects"
-                >
-                    student vakken
-                </v-checkbox>
+                    :label="$t('subjects.student_subjects')"
+                ></v-checkbox>
             </v-col>
         </v-row>
     </v-card>
@@ -82,4 +80,13 @@ watch(activeAcademicYear, (newVal: number | undefined) => {
 .chip_container {
     overflow-x: auto;
 }
+
+.checkbox container {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.subject-checkbox {
+    margin-top: -15px;
+}
 </style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index d10e47ed..0506bc68 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row>
-        <v-col cols="6">
+        <v-col cols="7">
             <SubjectsHeaderCard
                 :academic-years="academicYears"
                 @academic-year-changed="onAcademicYearChanged"
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 5e169d83..d913d39a 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -119,6 +119,8 @@ export default {
     subjects: {
         title: "My Subjects",
         create_subject: "Create subject",
+        instructor_subjects: "Show instructor subjects",
+        student_subjects: "Show student subjects",
     },
     group: {
         not_found: "Group not found",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index c10c4726..9b35eef4 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -120,6 +120,8 @@ export default {
     subjects: {
         title: "Mijn vakken",
         create_subject: "Nieuw vak",
+        instructor_subjects: "Toon lesgever vakken",
+        student_subjects: "Toon student vakken",
     },
     group: {
         not_found: "Groep niet gevonden",
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index e2e89dbd..4b7295ab 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -51,9 +51,6 @@
                     </router-link>
                     <v-btn prepend-icon="mdi-content-copy" @click="copyRegisterLink">
                         {{ $t("subject.register_link_button.title") }}
-                        <v-tooltip activator="parent" location="start" max-width="200vw">
-                            {{ $t("subject.register_link_button.tooltip") }}
-                        </v-tooltip>
                     </v-btn>
                 </div>
             </v-col>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 38f0d082..cedf52bc 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -77,7 +77,7 @@ const onAcademicYearChanged = (academicYear: number) => {
 
 <style scoped>
 .subject-card {
-    margin-top: 10px; /* Adjust as needed */
+    margin-top: 10px;
 }
 
 .action-btn-container {

From 0ec895e6aeada54b5b52e71ced08b84bfb3d123b Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 18:23:46 +0200
Subject: [PATCH 36/68] npm run format

---
 .../src/components/subject/extra/SubjectIcon.vue    | 13 +++----------
 .../components/subject/subjectsview/SubjectCard.vue |  4 +---
 .../subject/subjectsview/SubjectsHeaderImage.vue    | 10 +---------
 .../subjectview/header/SubjectHeaderImage.vue       | 11 ++---------
 4 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index 701c37c9..abf7afe6 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,21 +1,14 @@
 <template>
-    <v-icon
-        color="white"
-        :size="size"
-    >
-        {{ isInstructor ? 'mdi-account-tie' : 'mdi-school'}}
+    <v-icon color="white" :size="size">
+        {{ isInstructor ? "mdi-account-tie" : "mdi-school" }}
     </v-icon>
 </template>
 
 <script setup lang="ts">
-
 defineProps<{
     isInstructor: boolean;
     size: string;
 }>();
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index cf557cce..2b08e335 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -26,18 +26,16 @@
 <script setup lang="ts">
 import type Subject from "@/models/Subject";
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 
 defineProps<{
     subject: Subject;
 }>();
 
 const isInstructor = ref<boolean>(true);
-
 </script>
 
 <style scoped>
-
 .router-link {
     text-decoration: none;
     width: 100%;
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
index a1a0c912..98e0543a 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
@@ -1,12 +1,5 @@
 <template>
-    <v-img
-        aspect-ratio="16/9"
-        cover
-        rounded="xl"
-        :src="imagePath"
-        class="header-img"
-    >
-    </v-img>
+    <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img"> </v-img>
 </template>
 
 <script setup lang="ts">
@@ -20,5 +13,4 @@ defineProps<{
     border-radius: 25px;
     height: 165px;
 }
-
 </style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index 9d74fb28..be906734 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -1,11 +1,5 @@
 <template>
-    <v-img
-        aspect-ratio="16/9"
-        cover
-        rounded="xl"
-        :src="imagePath"
-        class="header-img"
-    >
+    <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img">
         <SubjectIcon
             :is-instructor="isInstructor"
             size="xxx-large"
@@ -16,14 +10,13 @@
 
 <script setup lang="ts">
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 
 defineProps<{
     imagePath: string;
 }>();
 
 const isInstructor = ref<boolean>(true);
-
 </script>
 
 <style scoped>

From 6ba4abdf9167b34ef17792d36d0d1abbf418cccf Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 18:29:06 +0200
Subject: [PATCH 37/68] refactored utils.py

---
 backend/src/docker_tests/utils.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9983d1fc..9158d428 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async(func):
+def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args, **kwargs):
+    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 

From 8be06aee2b39b155aeade85ddb79b2d05c96f355 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 18:40:52 +0200
Subject: [PATCH 38/68] refactored utils.py 2

---
 backend/src/docker_tests/utils.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9158d428..9983d1fc 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
+def to_async(func):
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
+    async def run_async(*args, **kwargs):
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 

From ce9d154f6874f1af020eabf14570acdff9bebe0b Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 20:31:45 +0200
Subject: [PATCH 39/68] solved merge conflicts

---
 frontend/src/views/subject/SubjectView.vue  | 55 +++++++++++----------
 frontend/src/views/subject/SubjectsView.vue | 12 ++---
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index ef0f8d99..d518e370 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -28,7 +28,7 @@
                             <SubjectHeaderContainer
                                 v-if="subject"
                                 :title="subject!.name"
-                                :instructors="subject!.instructors"
+                                :instructors="instructors"
                                 :academic-year="subject!.academic_year"
                                 :is-instructor="isInstructor"
                                 image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
@@ -37,7 +37,7 @@
                     </v-row>
                     <v-row>
                         <v-col>
-                            <SubjectBody v-if="subject" :projects="subject!.projects"></SubjectBody>
+                            <SubjectBody v-if="subject" :projects="projects"></SubjectBody>
                         </v-col>
                     </v-row>
                 </BackgroundContainer>
@@ -59,14 +59,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
+import {computed, ref, toRefs} from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
     useSubjectInstructorsQuery,
 } from "@/queries/Subject";
-import { computed, ref, toRefs } from "vue";
-import { useSubjectDetailsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
@@ -80,29 +78,7 @@ const props = defineProps<{
 const { subjectId } = toRefs(props);
 const snackbar = ref(false);
 
-const { data: subject, error, isLoading, isError } = useSubjectDetailsQuery(subjectId);
-const { data: user } = useUserQuery(null); // refactor queries once pr querie refactor is merged
-
-const isInstructor = computed(() => {
-    return [...(subject.value?.instructors || [])].some(
-        (instructor) => instructor.uid === user.value.uid
-    );
-});
 
-const router = useRouter();
-
-const registerLink = computed(() => {
-    return router.resolve({
-        name: "registerSubject",
-        params: { uuid: subject.value?.uuid },
-    }).path;
-});
-
-const copyRegisterLink = () => {
-    const baseAddress = window.location.origin;
-    navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
-    snackbar.value = true;
-};
 const {
     data: subject,
     isLoading: isSubjectLoading,
@@ -125,6 +101,31 @@ const isLoading = computed(
 const isError = computed(
     () => isSubjectError.value || isProjectsError.value || isInstructorsError.value
 );
+
+
+const { data: user } = useUserQuery(null); // refactor queries once pr querie refactor is merged
+
+const isInstructor = computed(() => {
+    return [...(instructors.value || [])].some(
+        (instructor) => instructor?.uid === user.value?.uid
+    );
+});
+
+const router = useRouter();
+
+const registerLink = computed(() => {
+    return router.resolve({
+        name: "registerSubject",
+        params: { uuid: subject.value?.uuid },
+    }).path;
+});
+
+const copyRegisterLink = () => {
+    const baseAddress = window.location.origin;
+    navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
+    snackbar.value = true;
+};
+
 </script>
 ;
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 5162ed0a..6790b2e8 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -49,25 +49,25 @@ import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
+const subjectsList = computed(() => {
+    return [...subjects.value!.as_student, ...subjects.value!.as_instructor] || [];
+});
 const selectedAcademicYear = ref<number>(useAcademicYear());
 const { isTeacher } = useIsTeacher();
 
 const academicYears = computed(() => {
     return Array.from(
-        new Set([...(subjects.value || [])].map((subject) => subject.academic_year))
+        new Set([...(subjectsList.value || [])].map((subject) => subject.academic_year))
     ).sort((a, b) => b - a);
 });
 
 const subjectsByAcademicYear = computed(() => {
-    return [...(subjects.value || [])].filter(
+    return [...(subjectsList.value || [])].filter(
         (subject) => subject.academic_year === selectedAcademicYear.value
     );
 });
 
-const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
-const subjectsList = computed(() => {
-    return [...subjects.value!.as_student, ...subjects.value!.as_instructor] || [];
-});
+
 /* will be necessary to show checkboxes in header when queries refactoring returns instructor and student subjects
 const isInstructor = computed(() => {
     return isTeacher;

From 441af9a840cfe68fa7a591b97cc75a96fcfbd3d1 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 20:34:51 +0200
Subject: [PATCH 40/68] fixed i18n

---
 frontend/src/i18n/locales/en.ts | 4 ++--
 frontend/src/i18n/locales/nl.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index d913d39a..c5b27a59 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -100,8 +100,8 @@ export default {
             active: "Active",
             completed: "Completed",
             no_projects: "No projects found.",
-            show_assignment: "Show full assignment",
-            hide_assignment: "Hide assignment",
+            show_assignment: "Show more",
+            hide_assignment: "Hide less",
         },
         project: {
             assignment: "Assignment",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 9b35eef4..24b67ab5 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -100,8 +100,8 @@ export default {
             active: "Actief",
             completed: "Voltooid",
             no_projects: "Geen projecten gevonden.",
-            show_assignment: "Toon volledige opdracht",
-            hide_assignment: "Verberg opdracht",
+            show_assignment: "Meer",
+            hide_assignment: "Minder",
         },
         project: {
             assignment: "Opdracht",

From 6c1028a9351d338a7c964a53353a212ff323af4d Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 20:53:37 +0200
Subject: [PATCH 41/68] run formater, linter

---
 backend/src/docker_tests/utils.py           | 4 ++--
 frontend/src/views/subject/SubjectView.vue  | 9 ++-------
 frontend/src/views/subject/SubjectsView.vue | 1 -
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9983d1fc..9158d428 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async(func):
+def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args, **kwargs):
+    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index d518e370..89a8e66e 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRefs} from "vue";
+import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
@@ -78,7 +78,6 @@ const props = defineProps<{
 const { subjectId } = toRefs(props);
 const snackbar = ref(false);
 
-
 const {
     data: subject,
     isLoading: isSubjectLoading,
@@ -102,13 +101,10 @@ const isError = computed(
     () => isSubjectError.value || isProjectsError.value || isInstructorsError.value
 );
 
-
 const { data: user } = useUserQuery(null); // refactor queries once pr querie refactor is merged
 
 const isInstructor = computed(() => {
-    return [...(instructors.value || [])].some(
-        (instructor) => instructor?.uid === user.value?.uid
-    );
+    return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
 });
 
 const router = useRouter();
@@ -125,7 +121,6 @@ const copyRegisterLink = () => {
     navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
     snackbar.value = true;
 };
-
 </script>
 ;
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 6790b2e8..997e694c 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -67,7 +67,6 @@ const subjectsByAcademicYear = computed(() => {
     );
 });
 
-
 /* will be necessary to show checkboxes in header when queries refactoring returns instructor and student subjects
 const isInstructor = computed(() => {
     return isTeacher;

From fe2e99bff4d146ac2f6d2e0505b817f8b2ec3cdb Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 21:19:31 +0200
Subject: [PATCH 42/68] refactored subject list into object with role

---
 backend/src/docker_tests/utils.py           |  4 ++--
 frontend/src/models/Subject.ts              |  6 ++++++
 frontend/src/views/subject/SubjectsView.vue | 11 +++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9158d428..9983d1fc 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
+def to_async(func):
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
+    async def run_async(*args, **kwargs):
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index ff6d3ef1..b453faa2 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -10,3 +10,9 @@ export interface UserSubjectList {
     as_student: Subject[];
     as_instructor: Subject[];
 }
+
+
+export enum SubjectRole {
+    Student = "student",
+    Instructor = "instructor",
+}
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 997e694c..3b33abe6 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -21,7 +21,7 @@
                             :key="index"
                             cols="6"
                         >
-                            <SubjectCard :subject="subject" class="subject-card"> </SubjectCard>
+                            <SubjectCard :subject="subject.subjectData" class="subject-card"> </SubjectCard>
                         </v-col>
                     </v-row>
                 </BackgroundContainer>
@@ -47,23 +47,26 @@ import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
+import {SubjectRole} from "@/models/Subject";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 const subjectsList = computed(() => {
-    return [...subjects.value!.as_student, ...subjects.value!.as_instructor] || [];
+    const studentSubjects = subjects.value!.as_student.map(subject => ({subjectData: subject, role: SubjectRole.Student}));
+    const instructorSubjects = subjects.value!.as_instructor.map(subject => ({subjectData: subject, role: SubjectRole.Instructor}));
+    return [...studentSubjects, ...instructorSubjects];
 });
 const selectedAcademicYear = ref<number>(useAcademicYear());
 const { isTeacher } = useIsTeacher();
 
 const academicYears = computed(() => {
     return Array.from(
-        new Set([...(subjectsList.value || [])].map((subject) => subject.academic_year))
+        new Set([...(subjectsList.value || [])].map((subject) => subject.subjectData.academic_year))
     ).sort((a, b) => b - a);
 });
 
 const subjectsByAcademicYear = computed(() => {
     return [...(subjectsList.value || [])].filter(
-        (subject) => subject.academic_year === selectedAcademicYear.value
+        (subject) => subject.subjectData.academic_year === selectedAcademicYear.value
     );
 });
 

From 1a5d3df8a133bc27abc73be41af84f4db931ee8d Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 21:53:35 +0200
Subject: [PATCH 43/68] changing icon on subjects page (ugly solution bug with
 enums)

---
 frontend/src/components/subject/extra/SubjectIcon.vue       | 6 ++++--
 .../src/components/subject/subjectsview/SubjectCard.vue     | 6 +++---
 .../subject/subjectview/header/SubjectHeaderImage.vue       | 5 +++--
 frontend/src/views/subject/SubjectsView.vue                 | 6 +++++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index abf7afe6..519caa4b 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,12 +1,14 @@
 <template>
     <v-icon color="white" :size="size">
-        {{ isInstructor ? "mdi-account-tie" : "mdi-school" }}
+        {{role === "instructor"  ? "mdi-account-tie" : "mdi-school" }}
     </v-icon>
 </template>
 
 <script setup lang="ts">
+import {type SubjectRole} from "@/models/Subject";
+
 defineProps<{
-    isInstructor: boolean;
+    role: SubjectRole;
     size: string;
 }>();
 </script>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index 2b08e335..53cd2056 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -10,7 +10,7 @@
                 height="120px"
             >
                 <SubjectIcon
-                    :is-instructor="isInstructor"
+                    :role="role"
                     size="xx-large"
                     class="subject-icon"
                 ></SubjectIcon>
@@ -24,15 +24,15 @@
 </template>
 
 <script setup lang="ts">
-import type Subject from "@/models/Subject";
+import Subject, {SubjectRole} from "@/models/Subject";
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
 import { ref } from "vue";
 
 defineProps<{
     subject: Subject;
+    role: SubjectRole;
 }>();
 
-const isInstructor = ref<boolean>(true);
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index be906734..cc561b00 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -1,7 +1,7 @@
 <template>
     <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img">
         <SubjectIcon
-            :is-instructor="isInstructor"
+            :role="role"
             size="xxx-large"
             class="subject-icon"
         ></SubjectIcon>
@@ -11,12 +11,13 @@
 <script setup lang="ts">
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
 import { ref } from "vue";
+import {SubjectRole} from "@/models/Subject";
 
 defineProps<{
     imagePath: string;
 }>();
 
-const isInstructor = ref<boolean>(true);
+const role = ref<SubjectRole>(SubjectRole.Student);
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 3b33abe6..c4d5370e 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -21,7 +21,11 @@
                             :key="index"
                             cols="6"
                         >
-                            <SubjectCard :subject="subject.subjectData" class="subject-card"> </SubjectCard>
+                            <SubjectCard
+                                :subject="subject.subjectData"
+                                :role="subject.role"
+                                class="subject-card"
+                            ></SubjectCard>
                         </v-col>
                     </v-row>
                 </BackgroundContainer>

From a553caec317753d539d92bfc4a5097108a63469c Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 22:03:50 +0200
Subject: [PATCH 44/68] working on showing icon on subject page

---
 .../subject/subjectview/header/SubjectHeaderContainer.vue   | 6 +++++-
 .../subject/subjectview/header/SubjectHeaderImage.vue       | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index 1ab9f89b..16672a36 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -1,7 +1,10 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <SubjectHeaderImage :imagePath="imagePath"> </SubjectHeaderImage>
+            <SubjectHeaderImage
+                :imagePath="imagePath"
+                :role="isInstructor ? SubjectRole.Instructor : SubjectRole.Student"
+            ></SubjectHeaderImage>
         </v-col>
         <v-col cols="8">
             <SubjectHeaderCard
@@ -19,6 +22,7 @@
 import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
 import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
+import {SubjectRole} from "@/models/Subject";
 
 defineProps<{
     title: string;
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index cc561b00..56918597 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -15,9 +15,9 @@ import {SubjectRole} from "@/models/Subject";
 
 defineProps<{
     imagePath: string;
+    role: SubjectRole;
 }>();
 
-const role = ref<SubjectRole>(SubjectRole.Student);
 </script>
 
 <style scoped>

From 4f9ca8e77caf070f98b63153ba3cfe061f9df00f Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 22:37:52 +0200
Subject: [PATCH 45/68] fixed subject uuid query + user

---
 frontend/src/models/Subject.ts             |  1 -
 frontend/src/queries/Subject.ts            | 18 ++++++++++++++++-
 frontend/src/views/subject/SubjectView.vue | 23 ++++++++++++++++------
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index ff6d3ef1..a63613d3 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -2,7 +2,6 @@ export default interface Subject {
     id: number;
     name: string;
     academic_year: number;
-    uuid: string;
     email: string;
 }
 
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index e598543f..18efa0fb 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -8,7 +8,7 @@ import {
     getSubjects,
     getSubjectStudents,
     getSubjectByUuid,
-    registerToSubject,
+    registerToSubject, getSubjectUuid,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
@@ -36,6 +36,11 @@ function SUBJECT_PROJECTS_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "projects", subjectId];
 }
 
+function SUBJECT_UUID_QUERY_KEY(subjectId: string): (string | number)[] {
+    return ["subject", "uuid", subjectId];
+
+}
+
 /**
  * Query composable for fetching a subject by id
  */
@@ -112,6 +117,17 @@ export function useSubjectProjectsQuery(
     });
 }
 
+export function useUuidSubjectQuery(
+    subjectId: MaybeRefOrGetter<number | undefined>
+): UseQueryReturnType<string, Error> {
+    return useQuery<string, Error>({
+        queryKey: computed(() => SUBJECT_UUID_QUERY_KEY(toValue(subjectId)!)),
+        queryFn: () => getSubjectUuid(toValue(subjectId)!),
+        enabled: () => !!toValue(subjectId),
+    });
+
+}
+
 /**
  * Mutation composable for registering the current user to a subject
  */
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 89a8e66e..07017495 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -63,13 +63,13 @@ import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
-    useSubjectInstructorsQuery,
+    useSubjectInstructorsQuery, useUuidSubjectQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
 import { useRouter } from "vue-router";
-import { useUserQuery } from "@/queries/User";
+import {useCurrentUserQuery, useUserQuery} from "@/queries/User";
 
 const props = defineProps<{
     subjectId: number;
@@ -94,14 +94,25 @@ const {
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
 
+const {
+    data: user,
+    isLoading: isUserLoading,
+    isError: isUserError
+} = useCurrentUserQuery();
+
+const {
+    data: subjectUuid,
+    isLoading: isSubjectUuidLoading,
+    isError: isSubjectUuidError
+} = useUuidSubjectQuery(subjectId);
+
 const isLoading = computed(
-    () => isSubjectLoading.value || isProjectsLoading.value || isInstructorsLoading.value
+    () => isSubjectLoading.value || isProjectsLoading.value || isInstructorsLoading.value || isUserLoading.value || isSubjectUuidLoading.value
 );
 const isError = computed(
-    () => isSubjectError.value || isProjectsError.value || isInstructorsError.value
+    () => isSubjectError.value || isProjectsError.value || isInstructorsError.value || isUserError.value || isSubjectUuidError.value
 );
 
-const { data: user } = useUserQuery(null); // refactor queries once pr querie refactor is merged
 
 const isInstructor = computed(() => {
     return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
@@ -112,7 +123,7 @@ const router = useRouter();
 const registerLink = computed(() => {
     return router.resolve({
         name: "registerSubject",
-        params: { uuid: subject.value?.uuid },
+        params: { uuid: subjectUuid.value },
     }).path;
 });
 

From 1cf0bf1e066b496a0534c2e949a3157fc81b4f2b Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Thu, 16 May 2024 22:57:49 +0200
Subject: [PATCH 46/68] linter + reformat

---
 frontend/src/queries/Subject.ts            |  5 ++--
 frontend/src/views/subject/SubjectView.vue | 28 +++++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 18efa0fb..e67388c7 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -8,7 +8,8 @@ import {
     getSubjects,
     getSubjectStudents,
     getSubjectByUuid,
-    registerToSubject, getSubjectUuid,
+    registerToSubject,
+    getSubjectUuid,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
@@ -38,7 +39,6 @@ function SUBJECT_PROJECTS_QUERY_KEY(subjectId: number): (string | number)[] {
 
 function SUBJECT_UUID_QUERY_KEY(subjectId: string): (string | number)[] {
     return ["subject", "uuid", subjectId];
-
 }
 
 /**
@@ -125,7 +125,6 @@ export function useUuidSubjectQuery(
         queryFn: () => getSubjectUuid(toValue(subjectId)!),
         enabled: () => !!toValue(subjectId),
     });
-
 }
 
 /**
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 07017495..5c2f0334 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -63,13 +63,14 @@ import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
-    useSubjectInstructorsQuery, useUuidSubjectQuery,
+    useSubjectInstructorsQuery,
+    useUuidSubjectQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
 import { useRouter } from "vue-router";
-import {useCurrentUserQuery, useUserQuery} from "@/queries/User";
+import { useCurrentUserQuery } from "@/queries/User";
 
 const props = defineProps<{
     subjectId: number;
@@ -94,26 +95,31 @@ const {
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
 
-const {
-    data: user,
-    isLoading: isUserLoading,
-    isError: isUserError
-} = useCurrentUserQuery();
+const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
 
 const {
     data: subjectUuid,
     isLoading: isSubjectUuidLoading,
-    isError: isSubjectUuidError
+    isError: isSubjectUuidError,
 } = useUuidSubjectQuery(subjectId);
 
 const isLoading = computed(
-    () => isSubjectLoading.value || isProjectsLoading.value || isInstructorsLoading.value || isUserLoading.value || isSubjectUuidLoading.value
+    () =>
+        isSubjectLoading.value ||
+        isProjectsLoading.value ||
+        isInstructorsLoading.value ||
+        isUserLoading.value ||
+        isSubjectUuidLoading.value
 );
 const isError = computed(
-    () => isSubjectError.value || isProjectsError.value || isInstructorsError.value || isUserError.value || isSubjectUuidError.value
+    () =>
+        isSubjectError.value ||
+        isProjectsError.value ||
+        isInstructorsError.value ||
+        isUserError.value ||
+        isSubjectUuidError.value
 );
 
-
 const isInstructor = computed(() => {
     return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
 });

From cd5f3b809b4939a5e66acf49cd0f4ed22800a417 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 22:02:53 +0200
Subject: [PATCH 47/68] register link button permissions

---
 backend/src/docker_tests/utils.py           |  4 +--
 frontend/src/views/subject/SubjectView.vue  | 37 ++++++++++++++-------
 frontend/src/views/subject/SubjectsView.vue |  4 ++-
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9158d428..9983d1fc 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
+def to_async(func):
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
+    async def run_async(*args, **kwargs):
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 5c2f0334..a67293a5 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -42,14 +42,18 @@
                     </v-row>
                 </BackgroundContainer>
             </v-col>
-            <v-col v-if="isInstructor" cols="2">
+            <v-col v-if="isAdmin || isInstructor" cols="2">
                 <div class="action-btn-container">
                     <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
                         <v-btn prepend-icon="mdi-plus-circle">
                             {{ $t("subject.create_project") }}
                         </v-btn>
                     </router-link>
-                    <v-btn prepend-icon="mdi-content-copy" @click="copyRegisterLink">
+                    <v-btn
+                        v-if="isAdmin || isTeacher"
+                        prepend-icon="mdi-content-copy"
+                        @click="copyRegisterLink"
+                    >
                         {{ $t("subject.register_link_button.title") }}
                     </v-btn>
                 </div>
@@ -63,14 +67,16 @@ import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
-    useSubjectInstructorsQuery,
-    useUuidSubjectQuery,
+    useSubjectInstructorsQuery, useUuidSubjectQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
-import { useRouter } from "vue-router";
 import { useCurrentUserQuery } from "@/queries/User";
+import RegisterLinkButton from "@/components/subject/subjectview/buttons/RegisterLinkButton.vue";
+import useIsTeacher from "@/composables/useIsTeacher";
+import useIsAdmin from "@/composables/useIsAdmin";
+import {useRouter} from "vue-router";
 
 const props = defineProps<{
     subjectId: number;
@@ -94,13 +100,15 @@ const {
     isLoading: isInstructorsLoading,
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
-
-const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
-
+const {
+    data: user,
+    isLoading: isUserLoading,
+    isError: isUserError
+} = useCurrentUserQuery();
 const {
     data: subjectUuid,
-    isLoading: isSubjectUuidLoading,
-    isError: isSubjectUuidError,
+    isLoading : isUuidLoading,
+    isError : isUuidError,
 } = useUuidSubjectQuery(subjectId);
 
 const isLoading = computed(
@@ -109,7 +117,7 @@ const isLoading = computed(
         isProjectsLoading.value ||
         isInstructorsLoading.value ||
         isUserLoading.value ||
-        isSubjectUuidLoading.value
+        isUuidLoading.value
 );
 const isError = computed(
     () =>
@@ -117,13 +125,16 @@ const isError = computed(
         isProjectsError.value ||
         isInstructorsError.value ||
         isUserError.value ||
-        isSubjectUuidError.value
+        isUuidError.value
 );
 
 const isInstructor = computed(() => {
     return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
 });
 
+const {isAdmin} = useIsAdmin();
+const {isTeacher} = useIsTeacher();
+
 const router = useRouter();
 
 const registerLink = computed(() => {
@@ -138,6 +149,8 @@ const copyRegisterLink = () => {
     navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
     snackbar.value = true;
 };
+
+
 </script>
 ;
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 997e694c..44e000aa 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -26,7 +26,7 @@
                     </v-row>
                 </BackgroundContainer>
             </v-col>
-            <v-col v-if="isTeacher" cols="2">
+            <v-col v-if="isTeacher || isAdmin" cols="2">
                 <div class="action-btn-container">
                     <router-link to="">
                         <v-btn prepend-icon="mdi-plus-circle">
@@ -47,6 +47,7 @@ import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
+import useIsAdmin from "@/composables/useIsAdmin";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 const subjectsList = computed(() => {
@@ -54,6 +55,7 @@ const subjectsList = computed(() => {
 });
 const selectedAcademicYear = ref<number>(useAcademicYear());
 const { isTeacher } = useIsTeacher();
+const { isAdmin } = useIsAdmin();
 
 const academicYears = computed(() => {
     return Array.from(

From f7a465ac65d156184d0d7b6647ac00096763defb Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 22:03:57 +0200
Subject: [PATCH 48/68] removed deleted import

---
 frontend/src/views/subject/SubjectView.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index a67293a5..f72e3e96 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -73,7 +73,6 @@ import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
 import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
 import { useCurrentUserQuery } from "@/queries/User";
-import RegisterLinkButton from "@/components/subject/subjectview/buttons/RegisterLinkButton.vue";
 import useIsTeacher from "@/composables/useIsTeacher";
 import useIsAdmin from "@/composables/useIsAdmin";
 import {useRouter} from "vue-router";
@@ -131,7 +130,6 @@ const isError = computed(
 const isInstructor = computed(() => {
     return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
 });
-
 const {isAdmin} = useIsAdmin();
 const {isTeacher} = useIsTeacher();
 

From 1f1aa5519c26e15818728e44bcc5b6878831d804 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 23:09:26 +0200
Subject: [PATCH 49/68] fixed subject filter buttons

---
 .../subjectsview/SubjectsHeaderCard.vue       | 24 +++++++-
 .../subjectsview/SubjectsHeaderContainer.vue  |  9 +++
 frontend/src/models/Subject.ts                |  6 +-
 frontend/src/views/subject/SubjectsView.vue   | 58 ++++++++++++++-----
 4 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index aefc0421..1066f5e6 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -23,7 +23,10 @@
                     </div>
                 </v-card-text>
             </v-col>
-            <v-col cols="6">
+            <v-col
+                v-if="isInstructor"
+                cols="6"
+            >
                 <v-checkbox
                     class="subject-checkbox"
                     v-model="showInstructorSubjects"
@@ -40,19 +43,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from "vue";
+import {computed, ref, toRefs, watch} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
+import type {SubjectFilter} from "@/models/Subject";
 
 const props = defineProps<{
     academicYears: number[];
+    isInstructor: boolean;
 }>();
 const { academicYears } = toRefs(props);
 const activeAcademicYear = ref(useAcademicYear());
 const showInstructorSubjects = ref(true);
 const showStudentSubjects = ref(true);
 
+const activeSubjectFilter = computed(() => {
+    return {
+        showInstructorSubjects: showInstructorSubjects.value,
+        showStudentSubjects: showStudentSubjects.value
+    };
+});
+
+
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
+    (e: "subjects-filter-changed", filter: SubjectFilter): void;
 }>();
 
 watch(activeAcademicYear, (newVal: number | undefined) => {
@@ -60,6 +74,12 @@ watch(activeAcademicYear, (newVal: number | undefined) => {
         emit("academic-year-changed", newVal);
     }
 });
+
+watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
+    if (newVal !== undefined) {
+        emit("subjects-filter-changed", newVal);
+    }
+});
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 0506bc68..559dfd5a 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -3,7 +3,9 @@
         <v-col cols="7">
             <SubjectsHeaderCard
                 :academic-years="academicYears"
+                :is-instructor="isInstructor"
                 @academic-year-changed="onAcademicYearChanged"
+                @subjects-filter-changed="onSubjectsFilterChanged"
             ></SubjectsHeaderCard>
         </v-col>
         <v-col>
@@ -17,18 +19,25 @@
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
 import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
+import type {SubjectFilter} from "@/models/Subject";
 
 defineProps<{
     academicYears: number[];
+    isInstructor: boolean;
 }>();
 
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
+    (e: "subjects-filter-changed", filter: SubjectFilter): void;
 }>();
 
 const onAcademicYearChanged = (academicYear: number) => {
     emit("academic-year-changed", academicYear);
 };
+
+const onSubjectsFilterChanged = (filter: SubjectFilter) => {
+    emit("subjects-filter-changed", filter);
+};
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index 33c8e59b..813c3c37 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -10,8 +10,12 @@ export interface UserSubjectList {
     as_instructor: Subject[];
 }
 
-
 export enum SubjectRole {
     Student = "student",
     Instructor = "instructor",
 }
+
+export interface SubjectFilter {
+    showInstructorSubjects: boolean;
+    showStudentSubjects: boolean;
+}
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index fb1213a3..c9782413 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -11,13 +11,15 @@
                         <v-col>
                             <SubjectsHeaderContainer
                                 :academic-years="academicYears"
+                                :is-instructor="isInstructor"
                                 @academic-year-changed="onAcademicYearChanged"
+                                @subjects-filter-changed="onSubjectsFilterChanged"
                             ></SubjectsHeaderContainer>
                         </v-col>
                     </v-row>
                     <v-row>
                         <v-col
-                            v-for="(subject, index) in subjectsByAcademicYear"
+                            v-for="(subject, index) in filteredSubjectsByAcademicYear"
                             :key="index"
                             cols="6"
                         >
@@ -44,25 +46,36 @@
 </template>
 
 <script setup lang="ts">
-import { useSubjectsQuery } from "@/queries/Subject";
+import {useSubjectsQuery} from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subject/subjectsview/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
-import { computed, ref } from "vue";
+import {computed, ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
-import {SubjectRole} from "@/models/Subject";
 import useIsAdmin from "@/composables/useIsAdmin";
+import {type SubjectFilter, SubjectRole} from "@/models/Subject";
 
-const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
+const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
 const subjectsList = computed(() => {
-    const studentSubjects = subjects.value!.as_student.map(subject => ({subjectData: subject, role: SubjectRole.Student}));
-    const instructorSubjects = subjects.value!.as_instructor.map(subject => ({subjectData: subject, role: SubjectRole.Instructor}));
+    const studentSubjects = subjects.value!.as_student.map(subject => ({
+        subjectData: subject,
+        role: SubjectRole.Student
+    }));
+    const instructorSubjects = subjects.value!.as_instructor.map(subject => ({
+        subjectData: subject,
+        role: SubjectRole.Instructor
+    }));
     return [...studentSubjects, ...instructorSubjects];
 });
-const selectedAcademicYear = ref<number>(useAcademicYear());
-const { isTeacher } = useIsTeacher();
-const { isAdmin } = useIsAdmin();
+const activeAcademicYear = ref<number>(useAcademicYear());
+const activeSubjectsFilter = ref<SubjectFilter>({
+    showInstructorSubjects: true,
+    showStudentSubjects: true
+});
+const {isTeacher} = useIsTeacher();
+const {isAdmin} = useIsAdmin();
+
 
 const academicYears = computed(() => {
     return Array.from(
@@ -72,18 +85,33 @@ const academicYears = computed(() => {
 
 const subjectsByAcademicYear = computed(() => {
     return [...(subjectsList.value || [])].filter(
-        (subject) => subject.subjectData.academic_year === selectedAcademicYear.value
+        (subject) => subject.subjectData.academic_year === activeAcademicYear.value
     );
 });
 
-/* will be necessary to show checkboxes in header when queries refactoring returns instructor and student subjects
 const isInstructor = computed(() => {
-    return isTeacher;
+    return subjectsByAcademicYear.value.some((subject) => subject.role === SubjectRole.Instructor);
+});
+
+const filteredSubjectsByAcademicYear = computed(() => {
+    const subjects = [...(subjectsByAcademicYear.value || [])];
+    return subjects.filter((subject) => {
+        if (activeSubjectsFilter.value.showInstructorSubjects && subject.role === SubjectRole.Instructor) {
+            return true;
+        }
+        if (activeSubjectsFilter.value.showStudentSubjects && subject.role === SubjectRole.Student) {
+            return true;
+        }
+        return false;
+    });
 });
- */
+
+const onSubjectsFilterChanged = (filter: SubjectFilter) => {
+    activeSubjectsFilter.value = filter;
+};
 
 const onAcademicYearChanged = (academicYear: number) => {
-    selectedAcademicYear.value = academicYear;
+    activeAcademicYear.value = academicYear;
 };
 </script>
 

From 9b934cb1523179d83c4c71c267bfa7b77d118a88 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 23:17:04 +0200
Subject: [PATCH 50/68] surname appears in subject header card

---
 .../components/subject/subjectview/header/SubjectHeaderCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index fa60de85..a47115d9 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -15,7 +15,7 @@
                         <HeaderSubtitleButton
                             v-for="instructor in instructors"
                             :key="instructor.uid"
-                            :title="instructor.given_name"
+                            :title="`${instructor.given_name[0]}. ${instructor.surname}`"
                             :clickable="false"
                             :active="false"
                         ></HeaderSubtitleButton>

From b2d9ef39e02a700f9460d75d790ec40d43bbaaea Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 23:35:25 +0200
Subject: [PATCH 51/68] fixed some wishful filter behavior and no results

---
 .../subjectsview/SubjectsHeaderCard.vue       | 16 ++++++++---
 .../subjectsview/SubjectsHeaderContainer.vue  |  6 ++--
 frontend/src/models/Subject.ts                |  5 ++++
 frontend/src/models/SubjectDetails.ts         | 12 --------
 frontend/src/views/subject/SubjectsView.vue   | 28 ++++++++++++-------
 5 files changed, 38 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/models/SubjectDetails.ts

diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index 1066f5e6..6d0dc51d 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -24,7 +24,7 @@
                 </v-card-text>
             </v-col>
             <v-col
-                v-if="isInstructor"
+                v-if="isInstructor && isStudent"
                 cols="6"
             >
                 <v-checkbox
@@ -45,13 +45,13 @@
 <script setup lang="ts">
 import {computed, ref, toRefs, watch} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
-import type {SubjectFilter} from "@/models/Subject";
+import {type SubjectDetails, type SubjectFilter, SubjectRole} from "@/models/Subject";
 
 const props = defineProps<{
     academicYears: number[];
-    isInstructor: boolean;
+    subjects: SubjectDetails[];
 }>();
-const { academicYears } = toRefs(props);
+const { academicYears, subjects } = toRefs(props);
 const activeAcademicYear = ref(useAcademicYear());
 const showInstructorSubjects = ref(true);
 const showStudentSubjects = ref(true);
@@ -63,6 +63,14 @@ const activeSubjectFilter = computed(() => {
     };
 });
 
+const isInstructor = computed(() => {
+    return subjects.value.some((subject) => subject.role === SubjectRole.Instructor);
+});
+
+const isStudent = computed(() => {
+    return subjects.value.some((subject) => subject.role === SubjectRole.Student);
+});
+
 
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 559dfd5a..731c0797 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -3,7 +3,7 @@
         <v-col cols="7">
             <SubjectsHeaderCard
                 :academic-years="academicYears"
-                :is-instructor="isInstructor"
+                :subjects="subjects"
                 @academic-year-changed="onAcademicYearChanged"
                 @subjects-filter-changed="onSubjectsFilterChanged"
             ></SubjectsHeaderCard>
@@ -19,11 +19,11 @@
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
 import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
-import type {SubjectFilter} from "@/models/Subject";
+import type {SubjectDetails, SubjectFilter} from "@/models/Subject";
 
 defineProps<{
     academicYears: number[];
-    isInstructor: boolean;
+    subjects: SubjectDetails[];
 }>();
 
 const emit = defineEmits<{
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index 813c3c37..08415963 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -19,3 +19,8 @@ export interface SubjectFilter {
     showInstructorSubjects: boolean;
     showStudentSubjects: boolean;
 }
+
+export interface SubjectDetails {
+    subjectData: Subject;
+    role: SubjectRole;
+}
diff --git a/frontend/src/models/SubjectDetails.ts b/frontend/src/models/SubjectDetails.ts
deleted file mode 100644
index 0a802548..00000000
--- a/frontend/src/models/SubjectDetails.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type User from "@/models/User";
-import type Project from "@/models/Project";
-
-export default interface SubjectDetails {
-    id: number;
-    name: string;
-    instructors: User[];
-    students: User[];
-    projects: Project[];
-    uuid: string;
-    academic_year: number;
-}
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index c9782413..aa92c59f 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -11,14 +11,21 @@
                         <v-col>
                             <SubjectsHeaderContainer
                                 :academic-years="academicYears"
-                                :is-instructor="isInstructor"
+                                :subjects="subjectsByAcademicYear"
                                 @academic-year-changed="onAcademicYearChanged"
                                 @subjects-filter-changed="onSubjectsFilterChanged"
                             ></SubjectsHeaderContainer>
                         </v-col>
                     </v-row>
                     <v-row>
+                        <div
+                            v-if="filteredSubjectsByAcademicYear.length === 0"
+                            class="no-results"
+                        >
+                            <h1>{{$t('subjects.no_subjects')}}</h1>
+                        </div>
                         <v-col
+                            v-else
                             v-for="(subject, index) in filteredSubjectsByAcademicYear"
                             :key="index"
                             cols="6"
@@ -58,15 +65,16 @@ import {type SubjectFilter, SubjectRole} from "@/models/Subject";
 
 const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
 const subjectsList = computed(() => {
-    const studentSubjects = subjects.value!.as_student.map(subject => ({
-        subjectData: subject,
-        role: SubjectRole.Student
-    }));
     const instructorSubjects = subjects.value!.as_instructor.map(subject => ({
         subjectData: subject,
         role: SubjectRole.Instructor
     }));
-    return [...studentSubjects, ...instructorSubjects];
+    const studentSubjects = subjects.value!.as_student.map(subject => ({
+        subjectData: subject,
+        role: SubjectRole.Student
+    }));
+
+    return [...instructorSubjects, ...studentSubjects];
 });
 const activeAcademicYear = ref<number>(useAcademicYear());
 const activeSubjectsFilter = ref<SubjectFilter>({
@@ -89,10 +97,6 @@ const subjectsByAcademicYear = computed(() => {
     );
 });
 
-const isInstructor = computed(() => {
-    return subjectsByAcademicYear.value.some((subject) => subject.role === SubjectRole.Instructor);
-});
-
 const filteredSubjectsByAcademicYear = computed(() => {
     const subjects = [...(subjectsByAcademicYear.value || [])];
     return subjects.filter((subject) => {
@@ -123,4 +127,8 @@ const onAcademicYearChanged = (academicYear: number) => {
 .action-btn-container {
     margin-top: 30px;
 }
+
+.no-results {
+    text-align: center;
+}
 </style>

From 1607ae01a5a288840f1f0cbc3f4d20e44e0274e5 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 23:35:44 +0200
Subject: [PATCH 52/68] added i18n

---
 frontend/src/i18n/locales/en.ts | 1 +
 frontend/src/i18n/locales/nl.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index c5b27a59..ae789a42 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -121,6 +121,7 @@ export default {
         create_subject: "Create subject",
         instructor_subjects: "Show instructor subjects",
         student_subjects: "Show student subjects",
+        no_subjects: "No subjects found.",
     },
     group: {
         not_found: "Group not found",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 24b67ab5..6d88f30a 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -122,6 +122,7 @@ export default {
         create_subject: "Nieuw vak",
         instructor_subjects: "Toon lesgever vakken",
         student_subjects: "Toon student vakken",
+        no_subjects: "Geen vakken gevonden.",
     },
     group: {
         not_found: "Groep niet gevonden",

From 0df45116b1605f326e582b7612a0a736cac145e0 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Fri, 17 May 2024 23:47:19 +0200
Subject: [PATCH 53/68] fixed project title styling

---
 .../body/projects/SubjectProjectPage.vue        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index 93a25fd3..b8f44e97 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -7,8 +7,8 @@
             >
                 <div class="colored-zone"></div>
                 <v-card-title class="title">
-                    <v-row>
-                        <v-col>
+                    <v-row >
+                        <v-col class="title-col" cols="10">
                             <span>{{ project.name }}</span>
                         </v-col>
                         <v-col class="text-right">
@@ -146,4 +146,17 @@ const assignmentLength = 100;
 .project-container::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
+
+.title-col {
+    display: flex;
+    justify-content: space-between;
+    max-width: 80%;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.title-col::-webkit-scrollbar {
+    width: 0; /* For Chrome, Safari, and Opera */
+}
+
 </style>

From ab6db0875be5d63374901dd00675fb091e0ee09c Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 00:06:23 +0200
Subject: [PATCH 54/68] added quil

---
 .../body/projects/SubjectProjectPage.vue      | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index b8f44e97..f5941365 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -25,21 +25,26 @@
 
             <v-card-text>
                 <h2>{{ $t("subject.project.assignment") }}</h2>
-                <p
+                <div
                     v-if="project.description && project.description.length <= assignmentLength"
                     class="project_description"
+                    v-html="renderQuillContent(project.description)"
                 >
-                    {{ project.description }}
-                </p>
+                </div>
                 <!-- Show truncated description if not expanded -->
-                <p v-else-if="project.description && !expanded" class="project_description">
-                    {{ project.description.substring(0, assignmentLength) + "..." }}
-                </p>
+                <div
+                    v-else-if="project.description && !expanded"
+                    class="project_description"
+                    v-html="renderQuillContent(project.description.substring(0, assignmentLength) + '...')"
+                >
+                </div>
                 <!-- Show full description if expanded -->
                 <v-expand-transition>
-                    <div v-if="expanded">
-                        <p class="project_description">{{ project.description }}</p>
-                    </div>
+                    <div
+                        v-if="expanded"
+                        class="project_description"
+                        v-html="renderQuillContent(project.description)"
+                    ></div>
                 </v-expand-transition>
             </v-card-text>
             <!-- Toggle button for expanding/collapsing description -->
@@ -60,7 +65,7 @@
             <v-card-title class="card_title">{{ $t("subject.project.group") }}</v-card-title>
         </v-card>
 
-        <v-card class="project-card" rounded="xl" variant="text" height="410px">
+        <v-card class="project-card" rounded="xl" variant="text">
             <v-card-title class="card_title">{{ $t("subject.project.submissions") }}</v-card-title>
         </v-card>
     </div>
@@ -69,6 +74,7 @@
 <script setup lang="ts">
 import type Project from "@/models/Project";
 import { ref } from "vue";
+import {Quill} from "@vueup/vue-quill";
 
 defineProps<{
     selectedTab: number;
@@ -77,6 +83,12 @@ defineProps<{
 
 const expanded = ref(false);
 const assignmentLength = 100;
+
+const renderQuillContent = (content: string) => {
+    const quill = new Quill(document.createElement("div"));
+    quill.root.innerHTML = content;
+    return quill.root.innerHTML;
+};
 </script>
 
 <style scoped>

From b208d8910722c25fe0f0e6a6346ab8af9d1355ef Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 00:57:31 +0200
Subject: [PATCH 55/68] fixed registerlinkbutton

---
 .../subject/subjectsview/SubjectCard.vue      | 33 +++++------
 .../buttons/RegisterLinkButton.vue            | 58 +++++++++++++++++++
 frontend/src/views/subject/SubjectView.vue    | 38 +++---------
 frontend/src/views/subject/SubjectsView.vue   |  2 +-
 4 files changed, 81 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue

diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index 53cd2056..5b5c4c59 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -1,24 +1,15 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card rounded="xl" class="subject-card">
-            <v-img
-                src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
-                class="align-end"
-                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-                cover
-                aspect-ratio="16/9"
-                height="120px"
-            >
-                <SubjectIcon
-                    :role="role"
-                    size="xx-large"
-                    class="subject-icon"
-                ></SubjectIcon>
-                <v-card-title class="subject-title">
-                    {{ subject?.name }}
-                    <v-icon class="">mdi-chevron-right</v-icon>
-                </v-card-title>
-            </v-img>
+        <v-card rounded="xl" class="subject-card" height="16vh" color="#1D357EFF">
+            <SubjectIcon
+                :role="role"
+                size="xx-large"
+                class="subject-icon"
+            ></SubjectIcon>
+            <v-card-title class="subject-title">
+                {{ subject?.name }}
+                <v-icon class="">mdi-chevron-right</v-icon>
+            </v-card-title>
         </v-card>
     </router-link>
 </template>
@@ -26,7 +17,6 @@
 <script setup lang="ts">
 import Subject, {SubjectRole} from "@/models/Subject";
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
-import { ref } from "vue";
 
 defineProps<{
     subject: Subject;
@@ -51,6 +41,9 @@ defineProps<{
 
 .subject-title {
     color: white;
+    font-size: 3vh;
+    position: absolute;
+    bottom: 0;
 }
 
 .subject-icon {
diff --git a/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue b/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
new file mode 100644
index 00000000..6538d129
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
@@ -0,0 +1,58 @@
+<template>
+    <v-btn v-if="!isLoading"
+        prepend-icon="mdi-content-copy"
+        @click="copyRegisterLink"
+    >
+        {{ $t("subject.register_link_button.title") }}
+    </v-btn>
+</template>
+
+<script setup lang="ts">
+
+import {computed, toRefs, watch} from "vue";
+import {useUuidSubjectQuery} from "@/queries/Subject";
+import {useRouter} from "vue-router";
+
+const props = defineProps<{
+    subjectId: number;
+}>();
+
+const { subjectId } = toRefs(props);
+
+const {
+    data: subjectUuid,
+    isLoading,
+    isError,
+} = useUuidSubjectQuery(subjectId);
+
+const router = useRouter();
+
+const registerLink = computed(() => {
+    return router.resolve({
+        name: "registerSubject",
+        params: { uuid: subjectUuid.value },
+    }).path;
+});
+
+const emit = defineEmits<{
+    (e: "register-link-btn-pressed"): void;
+    (e: "is-uuid-error"): void;
+}>();
+
+const copyRegisterLink = () => {
+    const baseAddress = window.location.origin;
+    navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
+    emit("register-link-btn-pressed");
+};
+
+watch(isError, (newVal: boolean) => {
+    if (newVal) {
+        emit("is-uuid-error");
+    }
+});
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index dd1730ad..18a743be 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -49,13 +49,12 @@
                             {{ $t("subject.create_project") }}
                         </v-btn>
                     </router-link>
-                    <v-btn
+                    <RegisterLinkButton
                         v-if="isAdmin || isTeacher"
-                        prepend-icon="mdi-content-copy"
-                        @click="copyRegisterLink"
-                    >
-                        {{ $t("subject.register_link_button.title") }}
-                    </v-btn>
+                        :subjectId="subjectId"
+                        @register-link-btn-pressed="snackbar = true"
+                        @is-uuid-error="isUuidError = true"
+                    ></RegisterLinkButton>
                 </div>
             </v-col>
         </v-row>
@@ -67,7 +66,7 @@ import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
-    useSubjectInstructorsQuery, useUuidSubjectQuery,
+    useSubjectInstructorsQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
@@ -75,7 +74,7 @@ import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
 import { useCurrentUserQuery } from "@/queries/User";
 import useIsTeacher from "@/composables/useIsTeacher";
 import useIsAdmin from "@/composables/useIsAdmin";
-import {useRouter} from "vue-router";
+import RegisterLinkButton from "@/components/subject/subjectview/buttons/RegisterLinkButton.vue";
 
 const props = defineProps<{
     subjectId: number;
@@ -83,6 +82,7 @@ const props = defineProps<{
 
 const { subjectId } = toRefs(props);
 const snackbar = ref(false);
+const isUuidError = ref(false);
 
 const {
     data: subject,
@@ -104,19 +104,13 @@ const {
     isLoading: isUserLoading,
     isError: isUserError
 } = useCurrentUserQuery();
-const {
-    data: subjectUuid,
-    isLoading : isUuidLoading,
-    isError : isUuidError,
-} = useUuidSubjectQuery(subjectId);
 
 const isLoading = computed(
     () =>
         isSubjectLoading.value ||
         isProjectsLoading.value ||
         isInstructorsLoading.value ||
-        isUserLoading.value ||
-        isUuidLoading.value
+        isUserLoading.value
 );
 const isError = computed(
     () =>
@@ -133,20 +127,6 @@ const isInstructor = computed(() => {
 const {isAdmin} = useIsAdmin();
 const {isTeacher} = useIsTeacher();
 
-const router = useRouter();
-
-const registerLink = computed(() => {
-    return router.resolve({
-        name: "registerSubject",
-        params: { uuid: subjectUuid.value },
-    }).path;
-});
-
-const copyRegisterLink = () => {
-    const baseAddress = window.location.origin;
-    navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
-    snackbar.value = true;
-};
 </script>
 ;
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index aa92c59f..c703a3d7 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -39,7 +39,7 @@
                     </v-row>
                 </BackgroundContainer>
             </v-col>
-            <v-col v-if="isTeacher || isAdmin" cols="2">
+            <v-col v-if="isAdmin || isTeacher" cols="2">
                 <div class="action-btn-container">
                     <router-link to="">
                         <v-btn prepend-icon="mdi-plus-circle">

From 99d9e880c55de502a6e5e15998ea5ad22086b9c9 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 01:08:07 +0200
Subject: [PATCH 56/68] deleted radius corners

---
 frontend/src/components/BackgroundContainer.vue            | 1 -
 .../src/components/subject/subjectsview/SubjectCard.vue    | 2 +-
 .../components/subject/subjectsview/SubjectsHeaderCard.vue | 2 +-
 .../subject/subjectsview/SubjectsHeaderImage.vue           | 3 +--
 .../subjectview/body/projects/SubjectProjectPage.vue       | 7 +++----
 .../subjectview/body/projects/list/SubjectProjectsList.vue | 2 --
 .../subject/subjectview/header/SubjectHeaderCard.vue       | 1 -
 .../subject/subjectview/header/SubjectHeaderImage.vue      | 3 +--
 frontend/src/views/subject/SubjectView.vue                 | 2 +-
 frontend/src/views/subject/SubjectsView.vue                | 2 +-
 10 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/BackgroundContainer.vue b/frontend/src/components/BackgroundContainer.vue
index b9623d9a..0ea05c3b 100644
--- a/frontend/src/components/BackgroundContainer.vue
+++ b/frontend/src/components/BackgroundContainer.vue
@@ -11,7 +11,6 @@
     padding: 20px;
     height: 100vh;
     border: 25px solid white;
-    border-radius: 50px;
     background-color: var(--color-secondary);
 }
 </style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index 5b5c4c59..2db2aebd 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -1,6 +1,6 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card rounded="xl" class="subject-card" height="16vh" color="#1D357EFF">
+        <v-card class="subject-card" height="16vh" color="#1D357EFF">
             <SubjectIcon
                 :role="role"
                 size="xx-large"
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index 6d0dc51d..cf0c0e10 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" rounded="xl" width="100%">
+    <v-card variant="text" class="title-card" width="100%">
         <v-row>
             <v-col>
                 <v-card-title class="title">
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
index 98e0543a..1be93d63 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img"> </v-img>
+    <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img"> </v-img>
 </template>
 
 <script setup lang="ts">
@@ -10,7 +10,6 @@ defineProps<{
 
 <style scoped>
 .header-img {
-    border-radius: 25px;
     height: 165px;
 }
 </style>
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index f5941365..f2aae67f 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="project-container">
-        <v-card class="project-card" variant="text" rounded="xl">
+        <v-card class="project-card" variant="text">
             <router-link
                 :to="{ name: 'project', params: { projectId: project.id } }"
                 class="router"
@@ -61,11 +61,11 @@
                 </v-card-actions>
             </div>
         </v-card>
-        <v-card class="project-card" rounded="xl" variant="text">
+        <v-card class="project-card" variant="text">
             <v-card-title class="card_title">{{ $t("subject.project.group") }}</v-card-title>
         </v-card>
 
-        <v-card class="project-card" rounded="xl" variant="text">
+        <v-card class="project-card" variant="text">
             <v-card-title class="card_title">{{ $t("subject.project.submissions") }}</v-card-title>
         </v-card>
     </div>
@@ -126,7 +126,6 @@ const renderQuillContent = (content: string) => {
     width: 100%;
     height: 80px; /* Adjust the height as needed */
     background-color: var(--color-primary); /* Desired background color */
-    border-radius: 20px 20px 0 0; /* Rounded corners for top half */
     z-index: -1; /* Ensure the colored zone is behind the card content */
 }
 
diff --git a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
index e60d10de..ffc25f33 100644
--- a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
@@ -75,7 +75,6 @@ watch(activeButton, (newVal: string) => {
 .projects-card {
     background-color: white;
     padding: 20px;
-    border-radius: 20px;
     display: flex;
     flex-direction: column;
     max-height: 55vh;
@@ -105,7 +104,6 @@ watch(activeButton, (newVal: string) => {
     align-items: center;
     height: 200px; /* Adjust height as needed */
     border: 1px solid #ccc;
-    border-radius: 8px;
 }
 
 .placeholder p {
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index a47115d9..dd5b9c2e 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -47,7 +47,6 @@ defineProps<{
 .title-card {
     background-color: white;
     padding: 20px;
-    border-radius: 20px;
 }
 
 .title {
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index 56918597..0b449c3f 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-img aspect-ratio="16/9" cover rounded="xl" :src="imagePath" class="header-img">
+    <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img">
         <SubjectIcon
             :role="role"
             size="xxx-large"
@@ -22,7 +22,6 @@ defineProps<{
 
 <style scoped>
 .header-img {
-    border-radius: 25px;
     height: 165px;
 }
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 18a743be..b3949e6b 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -16,7 +16,7 @@
 
             <v-col cols="1">
                 <router-link :to="{ name: 'subjects' }">
-                    <v-btn variant="elevated" class="back-button" rounded="xl" size="large">
+                    <v-btn variant="elevated" class="back-button"  size="large">
                         <v-icon>mdi-arrow-left</v-icon>
                     </v-btn>
                 </router-link>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index c703a3d7..ae7cd861 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -5,7 +5,7 @@
 
     <v-skeleton-loader v-else type="card" :loading="isLoading">
         <v-row>
-            <v-col :cols="isTeacher ? 10 : 12">
+            <v-col :cols="isAdmin || isTeacher ? 10 : 12">
                 <BackgroundContainer>
                     <v-row>
                         <v-col>

From 8eeb57a625c840812e20b3f910a884431d5ffa85 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 01:17:34 +0200
Subject: [PATCH 57/68] run linter

---
 .../body/projects/SubjectProjectsPage.vue     |  1 -
 .../subjectview/header/SubjectHeaderImage.vue | 10 +----
 frontend/src/views/subject/SubjectView.vue    | 13 ++----
 frontend/src/views/subject/SubjectsView.vue   | 40 ++++++++++---------
 4 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
index 4a78730e..b84a79ec 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
@@ -79,7 +79,6 @@ const updateFilterOption = (option: FilterOptions) => {
     align-items: center;
     height: 400px; /* Adjust height as needed */
     border: 1px solid #ccc;
-    border-radius: 8px;
 }
 
 .placeholder p {
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index 0b449c3f..9f5434d7 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -1,23 +1,17 @@
 <template>
     <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img">
-        <SubjectIcon
-            :role="role"
-            size="xxx-large"
-            class="subject-icon"
-        ></SubjectIcon>
+        <SubjectIcon :role="role" size="xxx-large" class="subject-icon"></SubjectIcon>
     </v-img>
 </template>
 
 <script setup lang="ts">
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
-import { ref } from "vue";
-import {SubjectRole} from "@/models/Subject";
+import { SubjectRole } from "@/models/Subject";
 
 defineProps<{
     imagePath: string;
     role: SubjectRole;
 }>();
-
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index b3949e6b..4bbc3241 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -16,7 +16,7 @@
 
             <v-col cols="1">
                 <router-link :to="{ name: 'subjects' }">
-                    <v-btn variant="elevated" class="back-button"  size="large">
+                    <v-btn variant="elevated" class="back-button" size="large">
                         <v-icon>mdi-arrow-left</v-icon>
                     </v-btn>
                 </router-link>
@@ -99,11 +99,7 @@ const {
     isLoading: isInstructorsLoading,
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
-const {
-    data: user,
-    isLoading: isUserLoading,
-    isError: isUserError
-} = useCurrentUserQuery();
+const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
 
 const isLoading = computed(
     () =>
@@ -124,9 +120,8 @@ const isError = computed(
 const isInstructor = computed(() => {
     return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
 });
-const {isAdmin} = useIsAdmin();
-const {isTeacher} = useIsTeacher();
-
+const { isAdmin } = useIsAdmin();
+const { isTeacher } = useIsTeacher();
 </script>
 ;
 <style scoped>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index ae7cd861..617a4995 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -18,11 +18,8 @@
                         </v-col>
                     </v-row>
                     <v-row>
-                        <div
-                            v-if="filteredSubjectsByAcademicYear.length === 0"
-                            class="no-results"
-                        >
-                            <h1>{{$t('subjects.no_subjects')}}</h1>
+                        <div v-if="filteredSubjectsByAcademicYear.length === 0" class="no-results">
+                            <h1>{{ $t("subjects.no_subjects") }}</h1>
                         </div>
                         <v-col
                             v-else
@@ -53,25 +50,25 @@
 </template>
 
 <script setup lang="ts">
-import {useSubjectsQuery} from "@/queries/Subject";
+import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subject/subjectsview/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
-import {computed, ref} from "vue";
+import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
 import useIsAdmin from "@/composables/useIsAdmin";
-import {type SubjectFilter, SubjectRole} from "@/models/Subject";
+import { type SubjectFilter, SubjectRole } from "@/models/Subject";
 
-const {data: subjects, error, isLoading, isError} = useSubjectsQuery();
+const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 const subjectsList = computed(() => {
-    const instructorSubjects = subjects.value!.as_instructor.map(subject => ({
+    const instructorSubjects = subjects.value!.as_instructor.map((subject) => ({
         subjectData: subject,
-        role: SubjectRole.Instructor
+        role: SubjectRole.Instructor,
     }));
-    const studentSubjects = subjects.value!.as_student.map(subject => ({
+    const studentSubjects = subjects.value!.as_student.map((subject) => ({
         subjectData: subject,
-        role: SubjectRole.Student
+        role: SubjectRole.Student,
     }));
 
     return [...instructorSubjects, ...studentSubjects];
@@ -79,11 +76,10 @@ const subjectsList = computed(() => {
 const activeAcademicYear = ref<number>(useAcademicYear());
 const activeSubjectsFilter = ref<SubjectFilter>({
     showInstructorSubjects: true,
-    showStudentSubjects: true
+    showStudentSubjects: true,
 });
-const {isTeacher} = useIsTeacher();
-const {isAdmin} = useIsAdmin();
-
+const { isTeacher } = useIsTeacher();
+const { isAdmin } = useIsAdmin();
 
 const academicYears = computed(() => {
     return Array.from(
@@ -100,10 +96,16 @@ const subjectsByAcademicYear = computed(() => {
 const filteredSubjectsByAcademicYear = computed(() => {
     const subjects = [...(subjectsByAcademicYear.value || [])];
     return subjects.filter((subject) => {
-        if (activeSubjectsFilter.value.showInstructorSubjects && subject.role === SubjectRole.Instructor) {
+        if (
+            activeSubjectsFilter.value.showInstructorSubjects &&
+            subject.role === SubjectRole.Instructor
+        ) {
             return true;
         }
-        if (activeSubjectsFilter.value.showStudentSubjects && subject.role === SubjectRole.Student) {
+        if (
+            activeSubjectsFilter.value.showStudentSubjects &&
+            subject.role === SubjectRole.Student
+        ) {
             return true;
         }
         return false;

From 5d54fc619292041ac58926ae17963c0b6f68ceaa Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 01:18:09 +0200
Subject: [PATCH 58/68] run linter

---
 .../components/subject/extra/SubjectIcon.vue  |  4 ++--
 .../subject/subjectsview/SubjectCard.vue      |  9 ++------
 .../subjectsview/SubjectsHeaderCard.vue       | 12 ++++------
 .../subjectsview/SubjectsHeaderContainer.vue  |  2 +-
 .../body/projects/SubjectProjectPage.vue      | 17 +++++++-------
 .../buttons/RegisterLinkButton.vue            | 23 +++++--------------
 .../header/SubjectHeaderContainer.vue         |  2 +-
 7 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index 519caa4b..5943fbef 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,11 +1,11 @@
 <template>
     <v-icon color="white" :size="size">
-        {{role === "instructor"  ? "mdi-account-tie" : "mdi-school" }}
+        {{ role === "instructor" ? "mdi-account-tie" : "mdi-school" }}
     </v-icon>
 </template>
 
 <script setup lang="ts">
-import {type SubjectRole} from "@/models/Subject";
+import { type SubjectRole } from "@/models/Subject";
 
 defineProps<{
     role: SubjectRole;
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index 2db2aebd..fe3a5d8c 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -1,11 +1,7 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
         <v-card class="subject-card" height="16vh" color="#1D357EFF">
-            <SubjectIcon
-                :role="role"
-                size="xx-large"
-                class="subject-icon"
-            ></SubjectIcon>
+            <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
             <v-card-title class="subject-title">
                 {{ subject?.name }}
                 <v-icon class="">mdi-chevron-right</v-icon>
@@ -15,14 +11,13 @@
 </template>
 
 <script setup lang="ts">
-import Subject, {SubjectRole} from "@/models/Subject";
+import Subject, { SubjectRole } from "@/models/Subject";
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
 
 defineProps<{
     subject: Subject;
     role: SubjectRole;
 }>();
-
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index cf0c0e10..b82b2818 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -23,10 +23,7 @@
                     </div>
                 </v-card-text>
             </v-col>
-            <v-col
-                v-if="isInstructor && isStudent"
-                cols="6"
-            >
+            <v-col v-if="isInstructor && isStudent" cols="6">
                 <v-checkbox
                     class="subject-checkbox"
                     v-model="showInstructorSubjects"
@@ -43,9 +40,9 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRefs, watch} from "vue";
+import { computed, ref, toRefs, watch } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
-import {type SubjectDetails, type SubjectFilter, SubjectRole} from "@/models/Subject";
+import { type SubjectDetails, type SubjectFilter, SubjectRole } from "@/models/Subject";
 
 const props = defineProps<{
     academicYears: number[];
@@ -59,7 +56,7 @@ const showStudentSubjects = ref(true);
 const activeSubjectFilter = computed(() => {
     return {
         showInstructorSubjects: showInstructorSubjects.value,
-        showStudentSubjects: showStudentSubjects.value
+        showStudentSubjects: showStudentSubjects.value,
     };
 });
 
@@ -71,7 +68,6 @@ const isStudent = computed(() => {
     return subjects.value.some((subject) => subject.role === SubjectRole.Student);
 });
 
-
 const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
     (e: "subjects-filter-changed", filter: SubjectFilter): void;
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 731c0797..36b6b09e 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
 import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
-import type {SubjectDetails, SubjectFilter} from "@/models/Subject";
+import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
 
 defineProps<{
     academicYears: number[];
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index f2aae67f..a039d150 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -7,7 +7,7 @@
             >
                 <div class="colored-zone"></div>
                 <v-card-title class="title">
-                    <v-row >
+                    <v-row>
                         <v-col class="title-col" cols="10">
                             <span>{{ project.name }}</span>
                         </v-col>
@@ -29,15 +29,17 @@
                     v-if="project.description && project.description.length <= assignmentLength"
                     class="project_description"
                     v-html="renderQuillContent(project.description)"
-                >
-                </div>
+                ></div>
                 <!-- Show truncated description if not expanded -->
                 <div
                     v-else-if="project.description && !expanded"
                     class="project_description"
-                    v-html="renderQuillContent(project.description.substring(0, assignmentLength) + '...')"
-                >
-                </div>
+                    v-html="
+                        renderQuillContent(
+                            project.description.substring(0, assignmentLength) + '...'
+                        )
+                    "
+                ></div>
                 <!-- Show full description if expanded -->
                 <v-expand-transition>
                     <div
@@ -74,7 +76,7 @@
 <script setup lang="ts">
 import type Project from "@/models/Project";
 import { ref } from "vue";
-import {Quill} from "@vueup/vue-quill";
+import { Quill } from "@vueup/vue-quill";
 
 defineProps<{
     selectedTab: number;
@@ -169,5 +171,4 @@ const renderQuillContent = (content: string) => {
 .title-col::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
-
 </style>
diff --git a/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue b/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
index 6538d129..ecb82d40 100644
--- a/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
+++ b/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
@@ -1,17 +1,13 @@
 <template>
-    <v-btn v-if="!isLoading"
-        prepend-icon="mdi-content-copy"
-        @click="copyRegisterLink"
-    >
+    <v-btn v-if="!isLoading" prepend-icon="mdi-content-copy" @click="copyRegisterLink">
         {{ $t("subject.register_link_button.title") }}
     </v-btn>
 </template>
 
 <script setup lang="ts">
-
-import {computed, toRefs, watch} from "vue";
-import {useUuidSubjectQuery} from "@/queries/Subject";
-import {useRouter} from "vue-router";
+import { computed, toRefs, watch } from "vue";
+import { useUuidSubjectQuery } from "@/queries/Subject";
+import { useRouter } from "vue-router";
 
 const props = defineProps<{
     subjectId: number;
@@ -19,11 +15,7 @@ const props = defineProps<{
 
 const { subjectId } = toRefs(props);
 
-const {
-    data: subjectUuid,
-    isLoading,
-    isError,
-} = useUuidSubjectQuery(subjectId);
+const { data: subjectUuid, isLoading, isError } = useUuidSubjectQuery(subjectId);
 
 const router = useRouter();
 
@@ -50,9 +42,6 @@ watch(isError, (newVal: boolean) => {
         emit("is-uuid-error");
     }
 });
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index 16672a36..69791494 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -22,7 +22,7 @@
 import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
 import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
-import {SubjectRole} from "@/models/Subject";
+import { SubjectRole } from "@/models/Subject";
 
 defineProps<{
     title: string;

From 79932fee92a0c19ade248d69f49684ad7ad75a3d Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 01:21:04 +0200
Subject: [PATCH 59/68] refactored utils.py

---
 backend/src/docker_tests/utils.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/docker_tests/utils.py b/backend/src/docker_tests/utils.py
index 9983d1fc..9158d428 100644
--- a/backend/src/docker_tests/utils.py
+++ b/backend/src/docker_tests/utils.py
@@ -10,9 +10,9 @@
 from src import config
 
 
-def to_async(func):
+def to_async[**P, R](func: Callable[P, R]) -> Callable[P, Awaitable[R]]:
     """Decorator to make a blocking sync function an awaitable async function."""
-    async def run_async(*args, **kwargs):
+    async def run_async(*args: P.args, **kwargs: P.kwargs) -> R:
         return await asyncio.to_thread(func, *args, **kwargs)
     return run_async
 

From 4319c1fa6144071ebd1a0602380fde5dcb4c09d8 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 13:15:46 +0200
Subject: [PATCH 60/68] admin symbol when not student or instructor + fix edit
 subject button permission

---
 .../components/subject/extra/SubjectIcon.vue  |  2 +-
 .../subjectview/header/SubjectHeaderCard.vue  |  9 ++++++--
 .../header/SubjectHeaderContainer.vue         |  5 ++--
 frontend/src/models/Subject.ts                |  1 +
 frontend/src/views/subject/SubjectView.vue    | 23 +++++++++++++++----
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index 5943fbef..d9c3fecd 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,6 +1,6 @@
 <template>
     <v-icon color="white" :size="size">
-        {{ role === "instructor" ? "mdi-account-tie" : "mdi-school" }}
+        {{ role === "instructor" ? "mdi-account-tie" : role === "student" ? "mdi-school" : "mdi-security"}}
     </v-icon>
 </template>
 
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index dd5b9c2e..79a12119 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" class="title-card" height="165">
         <v-row>
-            <v-col :cols="isInstructor ? 10 : 12">
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 10 : 12">
                 <v-card-title class="title">
                     {{ title }}
                 </v-card-title>
@@ -22,7 +22,7 @@
                     </div>
                 </v-card-text>
             </v-col>
-            <v-col v-if="isInstructor" cols="2">
+            <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="2">
                 <router-link to="" class="link">
                     <v-icon size="large">mdi-square-edit-outline</v-icon>
                 </router-link>
@@ -34,6 +34,8 @@
 <script setup lang="ts">
 import type User from "@/models/User";
 import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
+import useIsAdmin from "@/composables/useIsAdmin";
+import useIsTeacher from "@/composables/useIsTeacher";
 
 defineProps<{
     title: string;
@@ -41,6 +43,9 @@ defineProps<{
     instructors: User[];
     isInstructor: boolean;
 }>();
+
+const {isAdmin} = useIsAdmin();
+const {isTeacher} = useIsTeacher();
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index 69791494..007028a7 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -3,7 +3,7 @@
         <v-col cols="4">
             <SubjectHeaderImage
                 :imagePath="imagePath"
-                :role="isInstructor ? SubjectRole.Instructor : SubjectRole.Student"
+                :role="isInstructor ? SubjectRole.Instructor : isStudent ? SubjectRole.Student : SubjectRole.Admin"
             ></SubjectHeaderImage>
         </v-col>
         <v-col cols="8">
@@ -11,7 +11,7 @@
                 :title="title"
                 :academic-year="academicYear"
                 :instructors="instructors"
-                :is-instructor="isInstructor"
+                :isInstructor="isInstructor"
             >
             </SubjectHeaderCard>
         </v-col>
@@ -30,6 +30,7 @@ defineProps<{
     instructors: User[];
     imagePath: string;
     isInstructor: boolean;
+    isStudent: boolean;
 }>();
 </script>
 
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index 08415963..89a0a1ff 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -13,6 +13,7 @@ export interface UserSubjectList {
 export enum SubjectRole {
     Student = "student",
     Instructor = "instructor",
+    Admin = "admin",
 }
 
 export interface SubjectFilter {
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 4bbc3241..e8cfb9ca 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -31,6 +31,7 @@
                                 :instructors="instructors"
                                 :academic-year="subject!.academic_year"
                                 :is-instructor="isInstructor"
+                                :is-student="isStudent"
                                 image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
                             ></SubjectHeaderContainer>
                         </v-col>
@@ -66,7 +67,7 @@ import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
-    useSubjectInstructorsQuery,
+    useSubjectInstructorsQuery, useSubjectStudentsQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
@@ -99,14 +100,24 @@ const {
     isLoading: isInstructorsLoading,
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
-const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
+const {
+    data: user,
+    isLoading: isUserLoading,
+    isError: isUserError
+} = useCurrentUserQuery();
+const {
+    data: students,
+    isLoading: isStudentsLoading,
+    isError: isStudentsError,
+} = useSubjectStudentsQuery(subjectId);
 
 const isLoading = computed(
     () =>
         isSubjectLoading.value ||
         isProjectsLoading.value ||
         isInstructorsLoading.value ||
-        isUserLoading.value
+        isUserLoading.value ||
+        isStudentsLoading.value
 );
 const isError = computed(
     () =>
@@ -114,12 +125,16 @@ const isError = computed(
         isProjectsError.value ||
         isInstructorsError.value ||
         isUserError.value ||
-        isUuidError.value
+        isUuidError.value ||
+        isStudentsError.value
 );
 
 const isInstructor = computed(() => {
     return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
 });
+const isStudent = computed(() => {
+    return [...(students.value || [])].some((student) => student?.uid === user.value?.uid);
+});
 const { isAdmin } = useIsAdmin();
 const { isTeacher } = useIsTeacher();
 </script>

From 4ad4aea54c31db0a3c7db114aa780b534ec97e03 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 13:33:53 +0200
Subject: [PATCH 61/68] fix student not allowed icon

---
 .../components/subject/extra/SubjectIcon.vue    | 17 ++++++++++++++---
 .../header/SubjectHeaderContainer.vue           | 16 ++++++++++++++--
 frontend/src/models/Subject.ts                  |  1 +
 frontend/src/views/subject/SubjectView.vue      |  1 +
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index d9c3fecd..cbdff4b6 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,16 +1,27 @@
 <template>
     <v-icon color="white" :size="size">
-        {{ role === "instructor" ? "mdi-account-tie" : role === "student" ? "mdi-school" : "mdi-security"}}
+        {{ `mdi-${userRole}`}}
     </v-icon>
 </template>
 
 <script setup lang="ts">
-import { type SubjectRole } from "@/models/Subject";
+import {SubjectRole} from "@/models/Subject";
+import {computed, toRefs} from "vue";
 
-defineProps<{
+const props = defineProps<{
     role: SubjectRole;
     size: string;
 }>();
+
+const { role } = toRefs(props);
+
+const userRole = computed(() => {
+    if (role.value === SubjectRole.Instructor) return "account-tie";
+    if (role.value === SubjectRole.Student) return "school";
+    if (role.value === SubjectRole.Admin) return "security";
+    return "cancel";
+})
+
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index 007028a7..1d91b81f 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -3,7 +3,7 @@
         <v-col cols="4">
             <SubjectHeaderImage
                 :imagePath="imagePath"
-                :role="isInstructor ? SubjectRole.Instructor : isStudent ? SubjectRole.Student : SubjectRole.Admin"
+                :role="userRole"
             ></SubjectHeaderImage>
         </v-col>
         <v-col cols="8">
@@ -23,15 +23,27 @@ import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHe
 import type User from "@/models/User";
 import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
 import { SubjectRole } from "@/models/Subject";
+import {computed, toRefs} from "vue";
 
-defineProps<{
+const props = defineProps<{
     title: string;
     academicYear: number;
     instructors: User[];
     imagePath: string;
     isInstructor: boolean;
     isStudent: boolean;
+    isAdmin: boolean;
 }>();
+
+const { isInstructor, isStudent, isAdmin } = toRefs(props);
+
+const userRole = computed(() => {
+    if (isInstructor.value) return SubjectRole.Instructor;
+    if (isStudent.value) return SubjectRole.Student;
+    if (isAdmin.value) return SubjectRole.Admin;
+    return SubjectRole.None;
+});
+
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index 89a0a1ff..9a391ec4 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -14,6 +14,7 @@ export enum SubjectRole {
     Student = "student",
     Instructor = "instructor",
     Admin = "admin",
+    None = "none",
 }
 
 export interface SubjectFilter {
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index e8cfb9ca..235c4695 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -32,6 +32,7 @@
                                 :academic-year="subject!.academic_year"
                                 :is-instructor="isInstructor"
                                 :is-student="isStudent"
+                                :is-admin="isAdmin"
                                 image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
                             ></SubjectHeaderContainer>
                         </v-col>

From b8c2fd14decdb1c5f68f32c06b1df6b6fcd18327 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 13:45:20 +0200
Subject: [PATCH 62/68] linter

---
 frontend/src/components/subject/extra/SubjectIcon.vue    | 9 ++++-----
 .../subject/subjectview/header/SubjectHeaderCard.vue     | 4 ++--
 .../subjectview/header/SubjectHeaderContainer.vue        | 8 ++------
 frontend/src/views/subject/SubjectView.vue               | 9 +++------
 4 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index cbdff4b6..8dcd8a83 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,12 +1,12 @@
 <template>
     <v-icon color="white" :size="size">
-        {{ `mdi-${userRole}`}}
+        {{ `mdi-${userRole}` }}
     </v-icon>
 </template>
 
 <script setup lang="ts">
-import {SubjectRole} from "@/models/Subject";
-import {computed, toRefs} from "vue";
+import { SubjectRole } from "@/models/Subject";
+import { computed, toRefs } from "vue";
 
 const props = defineProps<{
     role: SubjectRole;
@@ -20,8 +20,7 @@ const userRole = computed(() => {
     if (role.value === SubjectRole.Student) return "school";
     if (role.value === SubjectRole.Admin) return "security";
     return "cancel";
-})
-
+});
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index 79a12119..e6755cff 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -44,8 +44,8 @@ defineProps<{
     isInstructor: boolean;
 }>();
 
-const {isAdmin} = useIsAdmin();
-const {isTeacher} = useIsTeacher();
+const { isAdmin } = useIsAdmin();
+const { isTeacher } = useIsTeacher();
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index 1d91b81f..c3019e11 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -1,10 +1,7 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <SubjectHeaderImage
-                :imagePath="imagePath"
-                :role="userRole"
-            ></SubjectHeaderImage>
+            <SubjectHeaderImage :imagePath="imagePath" :role="userRole"></SubjectHeaderImage>
         </v-col>
         <v-col cols="8">
             <SubjectHeaderCard
@@ -23,7 +20,7 @@ import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHe
 import type User from "@/models/User";
 import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
 import { SubjectRole } from "@/models/Subject";
-import {computed, toRefs} from "vue";
+import { computed, toRefs } from "vue";
 
 const props = defineProps<{
     title: string;
@@ -43,7 +40,6 @@ const userRole = computed(() => {
     if (isAdmin.value) return SubjectRole.Admin;
     return SubjectRole.None;
 });
-
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 235c4695..c811150c 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -68,7 +68,8 @@ import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
-    useSubjectInstructorsQuery, useSubjectStudentsQuery,
+    useSubjectInstructorsQuery,
+    useSubjectStudentsQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
@@ -101,11 +102,7 @@ const {
     isLoading: isInstructorsLoading,
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
-const {
-    data: user,
-    isLoading: isUserLoading,
-    isError: isUserError
-} = useCurrentUserQuery();
+const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
 const {
     data: students,
     isLoading: isStudentsLoading,

From efa196982cca1020a371b7eb4008ec82648a94ee Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 15:20:12 +0200
Subject: [PATCH 63/68] changed emits

---
 .../components/subject/subjectsview/SubjectCard.vue  |  3 ++-
 .../subject/subjectsview/SubjectsHeaderCard.vue      |  2 ++
 .../subject/subjectsview/SubjectsHeaderContainer.vue | 12 ++----------
 frontend/src/views/subject/SubjectsView.vue          |  4 ++++
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
index fe3a5d8c..8701fce1 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -11,7 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import Subject, { SubjectRole } from "@/models/Subject";
+import type Subject from "@/models/Subject";
+import { SubjectRole } from "@/models/Subject";
 import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
 
 defineProps<{
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index b82b2818..96f02416 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -76,6 +76,8 @@ const emit = defineEmits<{
 watch(activeAcademicYear, (newVal: number | undefined) => {
     if (newVal !== undefined) {
         emit("academic-year-changed", newVal);
+        showInstructorSubjects.value = true;
+        showStudentSubjects.value = true;
     }
 });
 
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 36b6b09e..05a5f509 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -4,8 +4,8 @@
             <SubjectsHeaderCard
                 :academic-years="academicYears"
                 :subjects="subjects"
-                @academic-year-changed="onAcademicYearChanged"
-                @subjects-filter-changed="onSubjectsFilterChanged"
+                @academic-year-changed="$emit('academic-year-changed', $event)"
+                @subjects-filter-changed="$emit('subjects-filter-changed', $event)"
             ></SubjectsHeaderCard>
         </v-col>
         <v-col>
@@ -30,14 +30,6 @@ const emit = defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
     (e: "subjects-filter-changed", filter: SubjectFilter): void;
 }>();
-
-const onAcademicYearChanged = (academicYear: number) => {
-    emit("academic-year-changed", academicYear);
-};
-
-const onSubjectsFilterChanged = (filter: SubjectFilter) => {
-    emit("subjects-filter-changed", filter);
-};
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 617a4995..a5aec499 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -118,6 +118,10 @@ const onSubjectsFilterChanged = (filter: SubjectFilter) => {
 
 const onAcademicYearChanged = (academicYear: number) => {
     activeAcademicYear.value = academicYear;
+    activeSubjectsFilter.value = {
+        showInstructorSubjects: true,
+        showStudentSubjects: true,
+    };
 };
 </script>
 

From f479b6d2d539ab7656f3e88b7baabf399b5513c4 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 15:32:03 +0200
Subject: [PATCH 64/68] implemented requested pr changes

---
 .../components/subject/subjectsview/SubjectsHeaderCard.vue | 2 +-
 .../subject/subjectview/header/SubjectHeaderCard.vue       | 2 +-
 frontend/src/i18n/locales/en.ts                            | 1 +
 frontend/src/i18n/locales/nl.ts                            | 7 ++++---
 frontend/src/queries/Subject.ts                            | 2 +-
 frontend/src/views/subject/SubjectView.vue                 | 2 +-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
index 96f02416..c70bb20e 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -17,7 +17,7 @@
                                 class="ma-1"
                                 variant="tonal"
                             >
-                                {{ academicYear - 1 + "-" + academicYear }}
+                                {{ `${academicYear}-${academicYear + 1}` }}
                             </v-chip>
                         </v-chip-group>
                     </div>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index e6755cff..d054fb30 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -7,7 +7,7 @@
                 </v-card-title>
                 <v-card-text>
                     <HeaderSubtitleButton
-                        :title="`${$t('subject.academy_year')} ${academicYear - 1}-${academicYear}`"
+                        :title="`${$t('subject.academy_year')} 20${academicYear}-20${academicYear + 1}`"
                         :clickable="false"
                         :active="false"
                     ></HeaderSubtitleButton>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index ae789a42..bbbc32c4 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -2,6 +2,7 @@ export default {
     default: {
         error: {
             "not-found": "Page not found",
+            "something-went-wrong": "Something went wrong",
         },
         loading: {
             loading_page: "Loading...",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 6d88f30a..539076f5 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -2,6 +2,7 @@ export default {
     default: {
         error: {
             "not-found": "Pagina niet gevonden",
+            "something-went-wrong": "Er is iets misgegaan",
         },
         loading: {
             loading_page: "Aan het laden...",
@@ -110,10 +111,10 @@ export default {
         },
         create_project: "Nieuw project",
         register_link_button: {
-            title: "Registreer link",
-            snackbar: "Registreer link gekopieerd naar klembord.",
+            title: "Registratie link",
+            snackbar: "Registratie link gekopieerd naar klembord.",
             tooltip:
-                "Kopieer de registreer link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
+                "Kopieer de registratie link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
         },
     },
 
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index e67388c7..8ea2f5f0 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -37,7 +37,7 @@ function SUBJECT_PROJECTS_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "projects", subjectId];
 }
 
-function SUBJECT_UUID_QUERY_KEY(subjectId: string): (string | number)[] {
+function SUBJECT_UUID_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "uuid", subjectId];
 }
 
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index c811150c..335e428e 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="isError" class="v-container">
-        <p>Error: {{ error }}</p>
+        <p>{{$t("default.something-went-wrong")}}</p>
     </div>
 
     <v-skeleton-loader v-else type="card" :loading="isLoading">

From b499069f23e0bfcca5f374be97a5b3d1e12374e8 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 15:33:36 +0200
Subject: [PATCH 65/68] run linter formater

---
 .../components/subject/subjectsview/SubjectsHeaderContainer.vue | 2 +-
 frontend/src/views/subject/SubjectView.vue                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 05a5f509..6aa0eb17 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -26,7 +26,7 @@ defineProps<{
     subjects: SubjectDetails[];
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "academic-year-changed", academicYear: number): void;
     (e: "subjects-filter-changed", filter: SubjectFilter): void;
 }>();
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 335e428e..2e05df13 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="isError" class="v-container">
-        <p>{{$t("default.something-went-wrong")}}</p>
+        <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
 
     <v-skeleton-loader v-else type="card" :loading="isLoading">

From 8cc45aee137f9772d4a045efefd720294a90abc5 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 17:13:01 +0200
Subject: [PATCH 66/68] fixed academic year

---
 frontend/src/composables/useAcademicYear.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/composables/useAcademicYear.ts b/frontend/src/composables/useAcademicYear.ts
index 0ef123b8..e772df24 100644
--- a/frontend/src/composables/useAcademicYear.ts
+++ b/frontend/src/composables/useAcademicYear.ts
@@ -7,8 +7,8 @@ export default function useAcademicYear(): number {
     // If the current date is before September 15, the default selected academic year is the current year.
     // Otherwise, the academic year is the next year.
     if (currentMonth < 8 || (currentMonth === 8 && currentDay < 15)) {
-        return currentYear - 2000;
+        return currentYear - 1 - 2000;
     } else {
-        return currentYear + 1 - 2000;
+        return currentYear - 2000;
     }
 }

From 1ff5dbcd9e28f350cc947cbc97abc370ecfa6652 Mon Sep 17 00:00:00 2001
From: Pieter Janin <pieter.janin@ugent.be>
Date: Sat, 18 May 2024 18:28:54 +0200
Subject: [PATCH 67/68] Fix projects page (#219)

* fix #218

* fix tests
---
 frontend/src/views/ProjectsView.vue       | 9 +++++----
 frontend/tests/views/ProjectsView.spec.ts | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/ProjectsView.vue b/frontend/src/views/ProjectsView.vue
index 2301176a..6a158210 100644
--- a/frontend/src/views/ProjectsView.vue
+++ b/frontend/src/views/ProjectsView.vue
@@ -28,15 +28,16 @@ import { computed, ref } from "vue";
 import type Project from "@/models/Project";
 
 const { data: projects, isLoading, isError } = useProjectsQuery();
-const noProjectsFound = computed(() => projects.value?.length === 0);
+const allProjects = computed(() =>
+    isLoading.value ? [] : [...projects.value!.as_student, ...projects.value!.as_instructor]
+);
+const noProjectsFound = computed(() => allProjects.value.length === 0);
 
 const activeButton = ref("notFinished");
 
 const filteredProjects = computed(() => {
-    if (!projects.value) return [];
-
     const now = new Date();
-    const sortedProjects = projects.value
+    const sortedProjects = allProjects.value
         .slice()
         .sort(
             (a: Project, b: Project) =>
diff --git a/frontend/tests/views/ProjectsView.spec.ts b/frontend/tests/views/ProjectsView.spec.ts
index e83196f3..3f39887b 100644
--- a/frontend/tests/views/ProjectsView.spec.ts
+++ b/frontend/tests/views/ProjectsView.spec.ts
@@ -3,9 +3,10 @@ import {expect, describe, it, vi} from "vitest";
 import ProjectsView from "@/views/ProjectsView.vue"
 import {ref} from "vue";
 
-const mockProjects = [
-    {id: 1}
-]
+const mockProjects = {
+    as_student: [{id: 1}],
+    as_instructor: [{id: 2}],
+};
 
 const testProjectsQuery = {
     data: ref(mockProjects),

From c948aec7132a1b398ca78f840c3554b93c28a567 Mon Sep 17 00:00:00 2001
From: Xander Bil <47951455+xerbalind@users.noreply.github.com>
Date: Sat, 18 May 2024 18:13:54 +0000
Subject: [PATCH 68/68] Submission list voor een vak leerkracht of assistent
 (#190)

* theme fixes

* Implementing queries and views

* Implement beautiful sql query

* Finish frontend

* Solve pr issues

* feature: download all files from submission

* rebase dev and fix conflicts

* Fix: frontend tests
---
 backend/src/project/router.py                 |  5 ++-
 backend/src/submission/router.py              | 10 ++++-
 backend/src/submission/service.py             |  9 +++-
 backend/src/submission/utils.py               | 13 ++++++
 .../home/listcontent/DeadlineItem.vue         |  4 +-
 .../src/components/project/ProjectInfo.vue    | 24 ++++++++--
 .../components/submission/SubmissionCard.vue  | 25 ++++++++---
 .../submission/SubmissionTeacherCard.vue      | 27 +++++++++++
 frontend/src/i18n/locales/en.ts               |  4 ++
 frontend/src/i18n/locales/nl.ts               |  4 ++
 frontend/src/queries/Submission.ts            | 30 +++++++++++--
 frontend/src/router/index.ts                  |  6 +++
 frontend/src/services/submission.ts           | 10 +++++
 frontend/src/views/ProjectView.vue            | 14 ++++--
 frontend/src/views/SubmissionView.vue         |  2 +-
 frontend/src/views/SubmissionsTeacherView.vue | 45 +++++++++++++++++++
 frontend/src/views/SubmissionsView.vue        |  6 +--
 .../components/project/ProjectInfo.spec.ts    | 12 +++--
 frontend/tests/views/ProjectView.spec.ts      | 19 ++++++++
 19 files changed, 237 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/components/submission/SubmissionTeacherCard.vue
 create mode 100644 frontend/src/views/SubmissionsTeacherView.vue

diff --git a/backend/src/project/router.py b/backend/src/project/router.py
index 624b985e..cba03df1 100644
--- a/backend/src/project/router.py
+++ b/backend/src/project/router.py
@@ -77,10 +77,11 @@ async def list_groups(groups: GroupList = Depends(retrieve_groups_by_project)):
 
 
 @router.get("/{project_id}/submissions", dependencies=[Depends(patch_permission_validation)])
-async def list_submissions(group_id: int,
+async def list_submissions(project_id: int,
                            db: AsyncSession = Depends(get_async_db)
                            ) -> Sequence[Submission]:
-    return await get_submissions_by_project(db, group_id)
+    """Return a list of the latest submission of each group of this project"""
+    return await get_submissions_by_project(db, project_id)
 
 
 @router.get("/{project_id}/test_files")
diff --git a/backend/src/submission/router.py b/backend/src/submission/router.py
index 99a48d6b..683001cb 100644
--- a/backend/src/submission/router.py
+++ b/backend/src/submission/router.py
@@ -2,7 +2,7 @@
 from typing import Sequence
 
 from fastapi import APIRouter, Depends, BackgroundTasks
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, StreamingResponse
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from src.dependencies import get_async_db
@@ -15,7 +15,7 @@
 )
 from src.submission.exceptions import FileNotFound
 from src.submission.exceptions import FilesNotFound
-from src.submission.utils import upload_files, remove_files
+from src.submission.utils import upload_files, remove_files, zip_stream
 from src.user.dependencies import admin_user_validation, get_authenticated_user
 from src.user.schemas import User
 from . import service
@@ -94,6 +94,12 @@ async def get_file(path: str, submission: Submission = Depends(retrieve_submissi
     return FileResponse(path=path)
 
 
+@router.get("/{submission_id}/zip", response_class=StreamingResponse)
+async def get_all_files(submission: Submission = Depends(retrieve_submission)):
+    path = submission_path(submission.files_uuid, "")
+    return StreamingResponse(zip_stream(path, submission.group_id), media_type="application/zip")
+
+
 @router.get("/{submission_id}/artifacts", response_model=list[File])
 async def get_artifacts(submission: Submission = Depends(retrieve_submission)):
     if submission.status == Status.InProgress:
diff --git a/backend/src/submission/service.py b/backend/src/submission/service.py
index 11db8abd..108ee011 100644
--- a/backend/src/submission/service.py
+++ b/backend/src/submission/service.py
@@ -1,6 +1,7 @@
 from typing import Sequence, List
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.future import select
+from sqlalchemy import func
 
 from . import models, schemas
 from .models import Status
@@ -12,9 +13,13 @@ async def get_submissions(db: AsyncSession) -> Sequence[models.Submission]:
 
 async def get_submissions_by_project(db: AsyncSession,
                                      project_id: int) -> Sequence[models.Submission]:
+    # SQL for the win
+    subquery = select(models.Submission.group_id, func.max(models.Submission.date).label(
+        'max_date')).group_by(models.Submission.group_id).subquery()
+    query = select(models.Submission).join(subquery, (models.Submission.group_id == subquery.c.group_id) & (
+        models.Submission.date == subquery.c.max_date) & (models.Submission.project_id == project_id))
 
-    return (await db.execute(select(models.Submission).
-                             filter_by(project_id=project_id))).unique().scalars().all()
+    return (await db.execute(query)).unique().scalars().all()
 
 
 async def get_submissions_by_group(db: AsyncSession,
diff --git a/backend/src/submission/utils.py b/backend/src/submission/utils.py
index bc741ea6..7e0afe1d 100644
--- a/backend/src/submission/utils.py
+++ b/backend/src/submission/utils.py
@@ -1,6 +1,8 @@
 import os
 import shutil
 import zipfile
+import pathlib
+import io
 import fnmatch
 from uuid import uuid4
 
@@ -45,5 +47,16 @@ def upload_files(files: list[UploadFile], project: Project) -> str:
     return uuid
 
 
+def zip_stream(path, group_id: int):
+    base_path = pathlib.Path(path)
+    data = io.BytesIO()
+    with zipfile.ZipFile(data, mode='w') as z:
+        for f_name in base_path.iterdir():
+            name = f"group_{group_id}/{str(f_name).replace(path, "")}"
+            z.write(f_name, arcname=name)
+    data.seek(0)
+    yield from data
+
+
 def remove_files(uuid: str):
     shutil.rmtree(submissions_path(uuid))
diff --git a/frontend/src/components/home/listcontent/DeadlineItem.vue b/frontend/src/components/home/listcontent/DeadlineItem.vue
index 0f5cc5ef..e593015f 100644
--- a/frontend/src/components/home/listcontent/DeadlineItem.vue
+++ b/frontend/src/components/home/listcontent/DeadlineItem.vue
@@ -18,7 +18,7 @@ import type Project from "@/models/Project";
 import type Submission from "@/models/Submission";
 import { Status } from "@/models/Submission";
 import { useSubjectQuery } from "@/queries/Subject";
-import { useProjectSubmissionsQuery } from "@/queries/Submission";
+import { useUserProjectSubmissionsQuery } from "@/queries/Submission";
 
 const props = defineProps<{
     project: Project;
@@ -26,7 +26,7 @@ const props = defineProps<{
 
 const { project } = toRefs(props);
 
-const { data: submissions } = useProjectSubmissionsQuery(project.value.id);
+const { data: submissions } = useUserProjectSubmissionsQuery(project.value.id);
 
 const latestSubmissionStatus = computed(() => {
     if (!submissions.value || submissions.value.length === 0) return null;
diff --git a/frontend/src/components/project/ProjectInfo.vue b/frontend/src/components/project/ProjectInfo.vue
index 00b80d37..fd3e2777 100644
--- a/frontend/src/components/project/ProjectInfo.vue
+++ b/frontend/src/components/project/ProjectInfo.vue
@@ -28,8 +28,18 @@
                 </v-card-title>
                 <div v-html="renderQuillContent(project.description)"></div>
             </v-card-item>
+            <v-card-actions>
+                <v-btn color="blue" v-if="isTeacher" :to="`/project/${project.id}/submissions`">
+                    {{ $t("project.submissions_list_teacher") }}
+                </v-btn>
+            </v-card-actions>
         </v-card>
-        <SubmitInfo class="submitInfo" v-if="group" :project="project" :group="group" />
+        <SubmitInfo
+            class="submitInfo"
+            v-if="group && !isTeacher"
+            :project="project"
+            :group="group"
+        />
     </v-container>
 </template>
 
@@ -37,7 +47,7 @@
 import type Project from "@/models/Project";
 import type Group from "@/models/Group";
 import SubmitInfo from "@/components/project/submit/SubmitInfo.vue";
-import { toRefs } from "vue";
+import { toRefs, computed } from "vue";
 import { Quill } from "@vueup/vue-quill";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
@@ -46,10 +56,18 @@ const props = defineProps<{
     project: Project;
     group: Group | null;
     instructors: User[];
+    user: User;
     subject: Subject;
 }>();
 
-const { project, group, instructors, subject } = toRefs(props);
+const { project, group, instructors, subject, user } = toRefs(props);
+
+const isTeacher = computed(
+    () =>
+        user.value.is_teacher ||
+        user.value.is_admin ||
+        instructors.value?.some((element) => element.uid == user.value.uid)
+);
 
 const renderQuillContent = (content: string) => {
     const quill = new Quill(document.createElement("div"));
diff --git a/frontend/src/components/submission/SubmissionCard.vue b/frontend/src/components/submission/SubmissionCard.vue
index de0cd4b9..0e1beb08 100644
--- a/frontend/src/components/submission/SubmissionCard.vue
+++ b/frontend/src/components/submission/SubmissionCard.vue
@@ -1,8 +1,8 @@
 <template>
-    <v-card color="white">
+    <v-card>
         <v-card-title>
             {{ $t("submission.status") }}
-            <p v-if="submission.date <= project.deadline" :class="Status[submission.status]">
+            <p v-if="new Date(submission.date) <= deadline" :class="Status[submission.status]">
                 {{ Status[submission.status] }}
             </p>
             <p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
@@ -50,14 +50,14 @@
                     color="error"
                     :text="error!.message"
                 ></v-alert>
-                <v-skeleton-loader v-else :loading="isLoading" type="card" color="white">
+                <v-skeleton-loader v-else :loading="isLoading" type="card">
                     <v-col>
                         <v-chip
                             class="ma-2"
                             v-for="(item, index) in files"
                             label
                             color="blue"
-                            :key="item.filename"
+                            :key="item.filesortedname"
                             @click="() => downloadFile(index)"
                         >
                             {{ item.filename }}
@@ -65,21 +65,25 @@
                     </v-col>
                 </v-skeleton-loader>
             </v-container>
+            <v-card-actions>
+                <v-btn @click="downloadAll">
+                    {{ $t("submission.download_all_files") }}
+                </v-btn>
+            </v-card-actions>
         </v-card-item>
     </v-card>
 </template>
 
 <script setup lang="ts">
-import type { Status } from "@/models/Submission";
+import { Status } from "@/models/Submission";
 import { useFilesQuery } from "@/queries/Submission";
 import { toRefs, computed } from "vue";
 import { download_file } from "@/utils";
-import type Project from "@/models/Project";
 import type Submission from "@/models/Submission";
 
 const props = defineProps<{
     submission: Submission;
-    project: Project;
+    deadline: Date;
 }>();
 
 const { submission } = toRefs(props);
@@ -95,6 +99,13 @@ const downloadFile = (index: number) => {
     const file = files.value![index];
     download_file(`/api/submissions/${submission.value!.id}/files/${file.filename}`, file.filename);
 };
+
+const downloadAll = () => {
+    download_file(
+        `/api/submissions/${submission.value!.id}/zip`,
+        `submission_group_${submission.value?.group_id}`
+    );
+};
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/submission/SubmissionTeacherCard.vue b/frontend/src/components/submission/SubmissionTeacherCard.vue
new file mode 100644
index 00000000..cd888e87
--- /dev/null
+++ b/frontend/src/components/submission/SubmissionTeacherCard.vue
@@ -0,0 +1,27 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ $t("project.group", { number: submission.group_id }) }}
+        </v-card-title>
+
+        <SubmissionCard class="ma-3" :submission="submission" :deadline="deadline" />
+
+        <v-card-actions>
+            <v-btn :to="`/groups/${submission.group_id}/submissions`">
+                {{ $t("project.submissions_list") }}
+            </v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import SubmissionCard from "@/components/submission/SubmissionCard.vue";
+import { toRefs } from "vue";
+
+const props = defineProps<{
+    submission: Submission;
+    deadline: string;
+}>();
+
+const { submission } = toRefs(props);
+</script>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index cee1a4ab..9167fbb9 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -43,7 +43,10 @@ export default {
         after_deadline: "After deadline",
         submissions_title: "Submissions for project {project}",
         no_submissions: "No submissions yet",
+        teacher_submissions_info:
+            "This page contains a list of the latest submission of each group for this project.",
         docker_test: "Tests Output",
+        download_all_files: "Download all files",
     },
     project: {
         deadline: "Deadline",
@@ -56,6 +59,7 @@ export default {
         capacity_group: "Capacity: ",
         edit: "Edit project",
         submissions_list: "All submissions",
+        submissions_list_teacher: "All submissions for this project",
         not_found: "No projects found.",
         finished: "Finished",
         not_found2: "Project not found",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index c38ce104..997baca6 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -43,7 +43,10 @@ export default {
         after_deadline: "Na deadline",
         submissions_title: "Indieningen voor project {project}",
         no_submissions: "Nog geen indieningen",
+        teacher_submissions_info:
+            "Deze pagina bevat een lijst van de laatste indiening van elke groep voor dit project.",
         docker_test: "Testen Output",
+        download_all_files: "Download alle bestanden",
     },
     project: {
         deadline: "Deadline",
@@ -56,6 +59,7 @@ export default {
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
         submissions_list: "Alle indieningen",
+        submissions_list_teacher: "Alle indieningen voor dit project",
         not_found: "Geen projecten teruggevonden.",
         finished: "Afgerond",
         not_found2: "Project niet teruggevonden",
diff --git a/frontend/src/queries/Submission.ts b/frontend/src/queries/Submission.ts
index d6a43515..15aeb63a 100644
--- a/frontend/src/queries/Submission.ts
+++ b/frontend/src/queries/Submission.ts
@@ -2,7 +2,13 @@ import { computed, toValue } from "vue";
 import type { MaybeRefOrGetter } from "vue";
 import { useQuery, useQueryClient, useMutation } from "@tanstack/vue-query";
 import type { UseMutationReturnType, UseQueryReturnType } from "@tanstack/vue-query";
-import { createSubmission, getFiles, getSubmission, getSubmissions } from "@/services/submission";
+import {
+    createSubmission,
+    getFiles,
+    getProjectSubmissions,
+    getSubmission,
+    getSubmissions,
+} from "@/services/submission";
 import type Submission from "@/models/Submission";
 import type FileInfo from "@/models/File";
 import { useProjectGroupQuery } from "./Group";
@@ -15,6 +21,10 @@ function SUBMISSIONS_QUERY_KEY(groupId: number): (string | number)[] {
     return ["submissions", "group", groupId];
 }
 
+function USER_PROJECT_SUBMISSIONS_QUERY_KEY(projectId: number): (string | number)[] {
+    return ["submissions", "project", "user", projectId];
+}
+
 function PROJECT_SUBMISSIONS_QUERY_KEY(projectId: number): (string | number)[] {
     return ["submissions", "project", projectId];
 }
@@ -53,12 +63,12 @@ export function useSubmissionsQuery(
  * Query composable for fetching all submissions of the group of the current user
  * in the project with the given id
  */
-export function useProjectSubmissionsQuery(
+export function useUserProjectSubmissionsQuery(
     projectId: MaybeRefOrGetter<number | undefined>
 ): UseQueryReturnType<Submission[], Error> {
     const { data: group } = useProjectGroupQuery(projectId);
     return useQuery({
-        queryKey: computed(() => PROJECT_SUBMISSIONS_QUERY_KEY(toValue(projectId)!)),
+        queryKey: computed(() => USER_PROJECT_SUBMISSIONS_QUERY_KEY(toValue(projectId)!)),
         queryFn: async () => {
             // HACK: Without this null-check, queries where there is no group will take a long time to resolve
             // also, this should be `!group.value`, but javascript...
@@ -69,6 +79,19 @@ export function useProjectSubmissionsQuery(
     });
 }
 
+/**
+ * Query composable for fetching all latest submissions of each group from a project.
+ */
+export function useProjectSubmissionsQuery(
+    projectId: MaybeRefOrGetter<number | undefined>
+): UseQueryReturnType<Submission[], Error> {
+    return useQuery<Submission[], Error>({
+        queryKey: computed(() => PROJECT_SUBMISSIONS_QUERY_KEY(toValue(projectId)!)),
+        queryFn: () => getProjectSubmissions(toValue(projectId)!),
+        enabled: () => !!toValue(projectId),
+    });
+}
+
 /**
  * Query composable for fetching files for a submission
  */
@@ -79,7 +102,6 @@ export function useFilesQuery(
         queryKey: computed(() => FILES_QUERY_KEY(toValue(submissionId)!)),
         queryFn: () => getFiles(toValue(submissionId)!),
         enabled: () => !!toValue(submissionId),
-        retry: false,
     });
 }
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 60bc0e7e..b953400f 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -70,6 +70,12 @@ const router = createRouter({
             component: () => import("../views/GroupView.vue"),
             props: (route) => ({ groupId: Number(route.params.groupId) }),
         },
+        {
+            path: "/project/:projectId(\\d+)/submissions",
+            name: "projectSubmissions",
+            component: () => import("../views/SubmissionsTeacherView.vue"),
+            props: (route) => ({ projectId: Number(route.params.projectId) }),
+        },
         {
             path: "/subjects",
             name: "subjects",
diff --git a/frontend/src/services/submission.ts b/frontend/src/services/submission.ts
index 355f90c8..0774978a 100644
--- a/frontend/src/services/submission.ts
+++ b/frontend/src/services/submission.ts
@@ -26,6 +26,16 @@ export async function getSubmissions(groupId: number): Promise<Submission[]> {
     return result.map(initSubmissionDate);
 }
 
+/**
+ * Fetches all latest submissions of each group from a project.
+ */
+export async function getProjectSubmissions(projectId: number): Promise<Submission[]> {
+    const result = await authorized_fetch<Submission[]>(`/api/projects/${projectId}/submissions`, {
+        method: "GET",
+    });
+    return result;
+}
+
 /**
  * Creates a new submission for a group.
  */
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 43aa2f35..ab6fae72 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -1,6 +1,8 @@
 <template>
     <v-container>
-        <h1 v-if="isDataLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
+        <h1 v-if="isDataLoading || isSubjectLoading" class="welcome">
+            {{ $t("default.loading.loading_page") }}
+        </h1>
         <h1 v-else-if="isDataError" class="welcome">{{ $t("project.not_found2") }}</h1>
         <div v-else class="projectInfo">
             <v-row>
@@ -10,6 +12,7 @@
                         :group="group!"
                         :instructors="instructors!"
                         :subject="subject!"
+                        :user="user!"
                     />
                 </v-col>
                 <v-col cols="2" class="button-container">
@@ -31,6 +34,7 @@ import { useProjectQuery } from "@/queries/Project";
 import { computed, toRefs } from "vue";
 import { useProjectGroupQuery } from "@/queries/Group";
 import { useSubjectInstructorsQuery, useSubjectQuery } from "@/queries/Subject";
+import { useCurrentUserQuery } from "@/queries/User";
 import ProjectSideBar from "@/components/project/ProjectSideBar.vue";
 
 const props = defineProps<{
@@ -63,12 +67,15 @@ const {
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(computed(() => project.value?.subject_id));
 
+const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
+
 const isDataLoading = computed(
     () =>
         isProjectLoading.value ||
         isGroupLoading.value ||
         isInstructorsLoading.value ||
-        isSubjectLoading.value
+        isSubjectLoading.value ||
+        isUserLoading.value
 );
 
 const isDataError = computed(
@@ -76,7 +83,8 @@ const isDataError = computed(
         isProjectError.value ||
         isGroupError.value ||
         isInstructorsError.value ||
-        isSubjectError.value
+        isSubjectError.value ||
+        isUserError.value
 );
 </script>
 
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
index 53fb277c..a8baac15 100644
--- a/frontend/src/views/SubmissionView.vue
+++ b/frontend/src/views/SubmissionView.vue
@@ -1,7 +1,7 @@
 <template>
     <v-container>
         <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-        <v-skeleton-loader v-else :loading="isLoading" type="card" color="white">
+        <v-skeleton-loader v-else :loading="isLoading" type="card">
             <SubmissionCard :submission="submission" />
         </v-skeleton-loader>
     </v-container>
diff --git a/frontend/src/views/SubmissionsTeacherView.vue b/frontend/src/views/SubmissionsTeacherView.vue
new file mode 100644
index 00000000..1a6af32c
--- /dev/null
+++ b/frontend/src/views/SubmissionsTeacherView.vue
@@ -0,0 +1,45 @@
+<template>
+    <v-container>
+        <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
+        <v-skeleton-loader v-else :loading="projectLoading || submissionsLoading" type="card">
+            <v-col class="mx-auto">
+                <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
+                <v-alert v-if="submissions.length == 0" icon="$warning" color="warning">
+                    {{ $t("submission.no_submissions") }}</v-alert
+                >
+                <v-alert v-else icon="$info" color="info" closable>
+                    {{ $t("submission.teacher_submissions_info") }}</v-alert
+                >
+
+                <SubmissionTeacherCard
+                    class="ma-3"
+                    v-for="submission in submissions"
+                    :key="submission"
+                    :submission="submission"
+                    :deadline="project.deadline"
+                />
+            </v-col>
+        </v-skeleton-loader>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+import { useProjectQuery } from "@/queries/Project";
+import { useProjectSubmissionsQuery } from "@/queries/Submission";
+import { toRefs } from "vue";
+import SubmissionTeacherCard from "@/components/submission/SubmissionTeacherCard.vue";
+
+const props = defineProps<{
+    projectId: number;
+}>();
+
+const { projectId } = toRefs(props);
+
+const {
+    data: submissions,
+    isLoading: submissionsLoading,
+    isError,
+    error,
+} = useProjectSubmissionsQuery(projectId);
+const { data: project, isLoading: projectLoading } = useProjectQuery(projectId);
+</script>
diff --git a/frontend/src/views/SubmissionsView.vue b/frontend/src/views/SubmissionsView.vue
index 563805b0..5a88a67c 100644
--- a/frontend/src/views/SubmissionsView.vue
+++ b/frontend/src/views/SubmissionsView.vue
@@ -1,7 +1,7 @@
 <template>
     <v-container>
         <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-        <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card" color="white">
+        <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
             <v-col class="mx-auto">
                 <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
                 <div v-if="sorted.length == 0">
@@ -14,8 +14,8 @@
                     class="ma-3"
                     v-for="submission in sorted"
                     :key="submission"
-                    :submission="submission"
-                    :project="project!"
+                    :submission="submission!"
+                    :deadline="project.deadline!"
                 />
             </v-col>
         </v-skeleton-loader>
diff --git a/frontend/tests/components/project/ProjectInfo.spec.ts b/frontend/tests/components/project/ProjectInfo.spec.ts
index bd51cbf6..961a4529 100644
--- a/frontend/tests/components/project/ProjectInfo.spec.ts
+++ b/frontend/tests/components/project/ProjectInfo.spec.ts
@@ -11,7 +11,11 @@ const mockProject = {
 }
 
 const mockInstructors = [
-    {uid: "1", given_name: "instructor 1", surname: "Doe"}
+    {uid: "1", given_name: "instructor 1", surname: "Doe", is_admin: false, is_teacher: false}
+]
+
+const mockUser = [
+    {uid: "2", given_name: "user 2", surname: "Doe 2", is_admin: false, is_teacher: false}
 ]
 
 const mockSubject = {
@@ -36,7 +40,8 @@ describe("ProjectInfo", async () => {
                 project: mockProject,
                 group: null,
                 instructors: mockInstructors,
-                subject: mockSubject
+                subject: mockSubject,
+                user: mockUser
             }
         });
         expect(wrapper.findComponent({name: 'VCard'}).exists()).toBeTruthy()
@@ -56,7 +61,8 @@ describe("ProjectInfo", async () => {
                 project: mockProject,
                 group: mockGroup,
                 instructors: mockInstructors,
-                subject: mockSubject
+                subject: mockSubject,
+                user: mockUser
             }
         });
         expect(wrapper.findComponent({name: 'VCard'}).exists()).toBeTruthy();
diff --git a/frontend/tests/views/ProjectView.spec.ts b/frontend/tests/views/ProjectView.spec.ts
index 4f1359dc..1fe901e8 100644
--- a/frontend/tests/views/ProjectView.spec.ts
+++ b/frontend/tests/views/ProjectView.spec.ts
@@ -55,6 +55,22 @@ const testSubjectInstructorsQuery = {
     }
 };
 
+const testCurrentUserQuery = {
+    isLoading: ref(true),
+    isError: ref(true),
+    setIsError(value){
+        this.isError.value = value;
+    },
+    setIsLoading(value){
+        this.isLoading.value = value;
+    }
+};
+
+
+vi.mock('@/queries/User', () => ({
+    useCurrentUserQuery: vi.fn(() => testCurrentUserQuery),
+}));
+
 vi.mock('@/queries/Subject', () => ({
     useSubjectQuery: vi.fn(() => testSubjectQuery),
     useSubjectInstructorsQuery: vi.fn(() => testSubjectInstructorsQuery)
@@ -105,6 +121,8 @@ describe("ProjectView", async () => {
         testSubjectQuery.setIsLoading(false)
         testProjectGroupsQuery.setIsLoading(false)
         testSubjectInstructorsQuery.setIsLoading(false)
+        testSubjectInstructorsQuery.setIsLoading(false)
+        testCurrentUserQuery.setIsLoading(false)
         await wrapper.vm.$nextTick();
         expect(wrapper.text()).toContain("Project niet teruggevonden")
     })
@@ -113,6 +131,7 @@ describe("ProjectView", async () => {
         testSubjectQuery.setIsError(false)
         testProjectGroupsQuery.setIsError(false)
         testSubjectInstructorsQuery.setIsError(false)
+        testCurrentUserQuery.setIsError(false)
         await wrapper.vm.$nextTick();
         expect(wrapper.findComponent('.projectInfoComponent').exists()).toBeTruthy()
         expect(wrapper.findComponent('.projectSideBar').exists()).toBeTruthy()