From 45ecfd257a530c54203aeda3d6f2cb466a4a4509 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 17:31:03 +0100
Subject: [PATCH 01/14] chore: display dashboard data depending on role

---
 .../composables/services/courses.service.ts   |  6 ++++
 frontend/src/config/endpoints.ts              |  1 +
 .../src/views/dashboard/DashboardView.vue     | 28 +++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/composables/services/courses.service.ts b/frontend/src/composables/services/courses.service.ts
index 78c80705..d4246b74 100644
--- a/frontend/src/composables/services/courses.service.ts
+++ b/frontend/src/composables/services/courses.service.ts
@@ -22,6 +22,11 @@ export function useCourses() {
         await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
+    async function getCoursesByTeacher(teacher_id: string) {
+        const endpoint = endpoints.courses.byTeacher.replace('{teacher_id}', teacher_id);
+        await getList<Course>(endpoint, courses, Course.fromJSON);
+    }
+
     async function createCourse(course_data: Course) {
         const endpoint = endpoints.courses.index;
         await create<Course>(endpoint,
@@ -50,6 +55,7 @@ export function useCourses() {
         getCourseByID,
         getCourses,
         getCoursesByStudent,
+        getCoursesByTeacher,
 
         createCourse,
         cloneCourse,
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index f7f26cf1..ada05de3 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -13,6 +13,7 @@ export const endpoints = {
         index: '/api/courses/',
         retrieve: '/api/courses/{id}/',
         byStudent: '/api/students/{student_id}/courses/',
+        byTeacher: '/api/teachers/{teacher_id}/courses/',
         clone: '/api/courses/{course_id}/clone/'
     },
     students: {
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 6640a0fe..4a61a10f 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -7,13 +7,14 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
-import {onMounted} from 'vue';
+import {onMounted, watch} from 'vue';
 import {useCourses} from '@/composables/services/courses.service.ts';
 import {ref} from 'vue';
 import {Project} from "@/types/Projects.ts";
 import {useProject} from "@/composables/services/project.service.ts";
 import ProjectCard from "@/components/projects/ProjectCard.vue";
 import {useAuthStore} from '@/store/authentication.store.ts';
+import {storeToRefs} from 'pinia';
 
 /* Composable injections */
 const {t} = useI18n();
@@ -22,13 +23,28 @@ const {t} = useI18n();
 const allProjects = ref<Project[]>([]);
 
 /* Service injection */
-const { user } = useAuthStore();
+const {  user } = useAuthStore();
+const { view  }= storeToRefs(useAuthStore());
 const { projects, getProjectsByCourse } = useProject();
-const { courses, getCoursesByStudent } = useCourses();
+const { courses, getCoursesByStudent, getCoursesByTeacher } = useCourses();
 
-onMounted(async () => {
+onMounted(() => {
+    fetchDashboardData();
+});
+
+watch(view, () => {
+    fetchDashboardData();
+});
+
+/* Fetch the data for the dashboard */
+async function fetchDashboardData() {
     if (user !== null) {
-        await getCoursesByStudent(user.id);
+        // Get the courses, depending on the user's role
+        if (view.value === 'teacher') {
+            await getCoursesByTeacher(user.id);
+        } else {
+            await getCoursesByStudent(user.id);
+        }
 
         for (const course of courses.value ?? []) {
             await getProjectsByCourse(course.id);
@@ -40,7 +56,7 @@ onMounted(async () => {
             allProjects.value.concat(projects.value ?? []);
         }
     }
-});
+}
 
 </script>
 

From c340d566c4224441ec578d3f93c0223b615ab837 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 18:27:23 +0100
Subject: [PATCH 02/14] chore: correct projects + assistant view

---
 .../composables/services/courses.service.ts    |  6 ++++++
 frontend/src/config/endpoints.ts               |  1 +
 frontend/src/views/dashboard/DashboardView.vue | 18 +++++++++++-------
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/composables/services/courses.service.ts b/frontend/src/composables/services/courses.service.ts
index d4246b74..157fea9b 100644
--- a/frontend/src/composables/services/courses.service.ts
+++ b/frontend/src/composables/services/courses.service.ts
@@ -27,6 +27,11 @@ export function useCourses() {
         await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
+    async function getCourseByAssistant(assistant_id: string) {
+        const endpoint = endpoints.courses.byAssistant.replace('{assistant_id}', assistant_id);
+        await getList<Course>(endpoint, courses, Course.fromJSON);
+    }
+
     async function createCourse(course_data: Course) {
         const endpoint = endpoints.courses.index;
         await create<Course>(endpoint,
@@ -56,6 +61,7 @@ export function useCourses() {
         getCourses,
         getCoursesByStudent,
         getCoursesByTeacher,
+        getCourseByAssistant,
 
         createCourse,
         cloneCourse,
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index ada05de3..0c1b77c9 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -14,6 +14,7 @@ export const endpoints = {
         retrieve: '/api/courses/{id}/',
         byStudent: '/api/students/{student_id}/courses/',
         byTeacher: '/api/teachers/{teacher_id}/courses/',
+        byAssistant: '/api/assistants/{assistant_id}/courses/',
         clone: '/api/courses/{course_id}/clone/'
     },
     students: {
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 4a61a10f..b81fed62 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -7,9 +7,8 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
-import {onMounted, watch} from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import {useCourses} from '@/composables/services/courses.service.ts';
-import {ref} from 'vue';
 import {Project} from "@/types/Projects.ts";
 import {useProject} from "@/composables/services/project.service.ts";
 import ProjectCard from "@/components/projects/ProjectCard.vue";
@@ -23,10 +22,10 @@ const {t} = useI18n();
 const allProjects = ref<Project[]>([]);
 
 /* Service injection */
-const {  user } = useAuthStore();
-const { view  }= storeToRefs(useAuthStore());
+const { user } = useAuthStore();
+const { view } = storeToRefs(useAuthStore());
 const { projects, getProjectsByCourse } = useProject();
-const { courses, getCoursesByStudent, getCoursesByTeacher } = useCourses();
+const { courses, getCoursesByStudent, getCoursesByTeacher, getCourseByAssistant } = useCourses();
 
 onMounted(() => {
     fetchDashboardData();
@@ -42,10 +41,15 @@ async function fetchDashboardData() {
         // Get the courses, depending on the user's role
         if (view.value === 'teacher') {
             await getCoursesByTeacher(user.id);
-        } else {
+        } else if (view.value === 'student') {
             await getCoursesByStudent(user.id);
+        } else {
+            await getCourseByAssistant(user.id);
         }
 
+        // Clear the projects, so that the projects from another role are not displayed
+        allProjects.value = [];
+
         for (const course of courses.value ?? []) {
             await getProjectsByCourse(course.id);
 
@@ -53,7 +57,7 @@ async function fetchDashboardData() {
                 project.course = course;
             });
 
-            allProjects.value.concat(projects.value ?? []);
+            allProjects.value = allProjects.value.concat(projects.value ?? []);
         }
     }
 }

From 3441b6669ee6569af2c9107502406f916bfeb019 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 19:11:53 +0100
Subject: [PATCH 03/14] chore: plus button based on role

---
 frontend/src/assets/lang/en.json               |  8 ++++++++
 frontend/src/views/dashboard/DashboardView.vue | 13 ++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 0ddf5c85..64e5acc4 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -3,6 +3,7 @@
         "header": {
             "logo": "Ghent University logo",
             "login": "login",
+            "view": "View as {0}",
             "navigation": {
                 "dashboard": "Dashboard",
                 "calendar": "Calendar",
@@ -64,6 +65,13 @@
             "open": "details"
         }
     },
+    "types": {
+        "roles": {
+            "student": "Student",
+            "assistant": "Assistant",
+            "teacher": "Teacher"
+        }
+    },
     "toasts": {
         "messages": {
             "unknown": "An unknown error has occurred."
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index b81fed62..4c910a60 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -36,7 +36,7 @@ watch(view, () => {
 });
 
 /* Fetch the data for the dashboard */
-async function fetchDashboardData() {
+const fetchDashboardData = async () => {
     if (user !== null) {
         // Get the courses, depending on the user's role
         if (view.value === 'teacher') {
@@ -74,7 +74,10 @@ async function fetchDashboardData() {
             <ButtonGroup>
                 <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN"
                         icon-pos="right" outlined/>
-                <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
+
+                <RouterLink :to="{ name: 'course-create' }" v-if="view === 'teacher'">
+                    <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
+                </RouterLink>
             </ButtonGroup>
         </div>
         <!-- Course list body -->
@@ -105,7 +108,11 @@ async function fetchDashboardData() {
             <ButtonGroup>
                 <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN"
                         icon-pos="right" outlined/>
-                <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
+
+                <!-- TODO: Set to create a project-->
+                <RouterLink :to="{ name: 'course-create' }" v-if="view !== 'student'">
+                    <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
+                </RouterLink>
             </ButtonGroup>
         </div>
         <!-- Project list body -->

From 12d796f64a6a6f0af226c6e04f753b139630da4a Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 21:19:36 +0100
Subject: [PATCH 04/14] chore: start of course creation

---
 frontend/src/assets/lang/en.json              |  6 ++
 frontend/src/assets/lang/nl.json              |  8 ++-
 frontend/src/router/router.ts                 |  3 +-
 .../src/views/courses/CreateCourseView.vue    | 71 +++++++++++++++++++
 4 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/views/courses/CreateCourseView.vue

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 64e5acc4..51988bf1 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -39,6 +39,12 @@
           "deadline": "Deadline",
           "submissionStatus": "Indienstatus",
           "groupMembers": "Group members"
+        },
+        "courses": {
+            "create": "Create course",
+            "name": "Name",
+            "description": "Description",
+            "year": "Academic year"
         }
     },
     "composables": {
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index c183c120..7aaaba07 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -39,7 +39,13 @@
             "deadline": "Deadline",
             "submissionStatus": "Indienstatus",
             "groupMembers": "Groepsleden"
-        }
+        },
+        "courses": {
+          "create": "Creëer vak",
+          "name": "Vaknaam",
+          "description": "Beschrijving",
+          "year": "Academiejaar"
+      }
     },
     "composables": {
       "helpers": {
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index ab90e414..4623afe3 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -4,6 +4,7 @@
 
 import DashboardView from '@/views/dashboard/DashboardView.vue';
 import CourseView from '@/views/courses/CourseView.vue';
+import CreateCourseView from '@/views/courses/CreateCourseView.vue';
 import Dummy from '@/components/Dummy.vue';
 import LoginView from '@/views/authentication/LoginView.vue';
 import CalendarView from '@/views/calendar/CalendarView.vue';
@@ -27,7 +28,7 @@ const routes: RouteRecordRaw[] = [
     // Courses
     { path: '/courses', children: [
         { path: '', component: Dummy, name: 'courses' },
-        { path: 'create', component: Dummy, name: 'course-create' },
+        { path: 'create', component: CreateCourseView, name: 'course-create' },
         // Single course  
         { path: ':courseId', children: [
             { path: '', component: CourseView, name: 'course' },
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
new file mode 100644
index 00000000..fa0284e3
--- /dev/null
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import Calendar from 'primevue/calendar';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+
+const { t } = useI18n();
+
+const courseName = ref('');
+const courseDescription = ref('');
+const courseYear = ref(null);
+
+function createCourse() {
+  console.log('Creating course');
+}
+</script>
+
+<template>
+    <BaseLayout>
+        <div class="grid fadein">
+            <div class="col-12 md:col-6">
+                <!-- Create course heading -->
+                <Title class="mb-6">{{ t('views.courses.create') }}</Title>
+
+                <!-- Course form -->
+                <form @submit.prevent="createCourse">
+                    <!-- Course name -->
+                    <div class="mb-4">
+                        <label for="courseName">{{ t('views.courses.name') }}</label>
+                        <InputText id="courseName" v-model="courseName" required/>
+                    </div>
+
+                    <!-- Course description -->
+                    <div class="mb-4">
+                        <label for="courseDescription">{{ t('views.courses.description') }}</label>
+                        <Textarea id="courseDescription" v-model="courseDescription" rows="5" cols="30" />
+                    </div>
+
+                    <!-- Course academic year -->
+                    <div class="mb-4">
+                        <label for="courseYear">{{ t('views.courses.year') }}</label>
+                        <Calendar id="courseYear" v-model="courseYear" view="year" dateFormat="yy" />
+                    </div>
+                    
+                    <!-- Submit button -->
+                    <div class="flex justify-end">
+                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                            {{ t('views.courses.create') }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </BaseLayout>
+</template>
+
+<style scoped>
+    /* Flex column layout for label and input */
+    .mb-4 {
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* Add margin between label and input */
+    label {
+        margin-bottom: 0.5rem;
+    }
+</style>

From 13717d118e6177b39d3d2e29e07a70ec4cd10b64 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 22:24:06 +0100
Subject: [PATCH 05/14] chore: working create course, backend automatically add
 requesting teacher to course

---
 frontend/src/assets/lang/en.json              |  2 +-
 .../src/views/courses/CreateCourseView.vue    | 42 ++++++++++++++-----
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 51988bf1..735d3a23 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -42,7 +42,7 @@
         },
         "courses": {
             "create": "Create course",
-            "name": "Name",
+            "name": "Course name",
             "description": "Description",
             "year": "Academic year"
         }
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index fa0284e3..101bc025 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -3,19 +3,41 @@ import Calendar from 'primevue/calendar';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+import { Course } from '@/types/Course';
+import { useCourses } from '@/composables/services/courses.service';
 
+/* Composable injections */
 const { t } = useI18n();
+const { push } = useRouter();
 
-const courseName = ref('');
-const courseDescription = ref('');
-const courseYear = ref(null);
+/* Service injection */
+const { createCourse } = useCourses();
 
-function createCourse() {
-  console.log('Creating course');
+const courseName = ref<string>('');
+const courseDescription = ref<string>('');
+const courseYear = ref<Date>(new Date());
+
+const submit_course = async () => {
+    console.log('Creating course...');
+    // Pass the course data to the service
+    await createCourse(
+        new Course(
+            "",                             // ID not needed for creation, will be generated by the backend
+            courseName.value,
+            courseDescription.value,
+            courseYear.value.getFullYear()
+        )
+    );
+
+    // Redirect to the dashboard overview
+    push({ name: 'dashboard' });
 }
+
 </script>
 
 <template>
@@ -26,7 +48,7 @@ function createCourse() {
                 <Title class="mb-6">{{ t('views.courses.create') }}</Title>
 
                 <!-- Course form -->
-                <form @submit.prevent="createCourse">
+                <form @submit.prevent="submit_course">
                     <!-- Course name -->
                     <div class="mb-4">
                         <label for="courseName">{{ t('views.courses.name') }}</label>
@@ -36,20 +58,18 @@ function createCourse() {
                     <!-- Course description -->
                     <div class="mb-4">
                         <label for="courseDescription">{{ t('views.courses.description') }}</label>
-                        <Textarea id="courseDescription" v-model="courseDescription" rows="5" cols="30" />
+                        <Textarea id="courseDescription" v-model="courseDescription" autoResize rows="5" cols="30"/>
                     </div>
 
                     <!-- Course academic year -->
                     <div class="mb-4">
                         <label for="courseYear">{{ t('views.courses.year') }}</label>
-                        <Calendar id="courseYear" v-model="courseYear" view="year" dateFormat="yy" />
+                        <Calendar id="courseYear" v-model="courseYear" view="year" dateFormat="yy" required/>
                     </div>
                     
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                            {{ t('views.courses.create') }}
-                        </button>
+                        <Button :label="t('views.courses.create')" type="submit" icon="pi pi-check" iconPos="right" rounded/>
                     </div>
                 </form>
             </div>

From e5a2f969c53cbd4bbb82a1178dcd5ddf8dd04b0a Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 22:25:58 +0100
Subject: [PATCH 06/14] chore: rest of commit

---
 backend/api/tests/test_course.py              |  4 ++++
 backend/api/views/course_view.py              | 19 ++++++++++++++++++-
 .../src/views/courses/CreateCourseView.vue    |  4 ++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/backend/api/tests/test_course.py b/backend/api/tests/test_course.py
index 036081cb..c19abb32 100644
--- a/backend/api/tests/test_course.py
+++ b/backend/api/tests/test_course.py
@@ -866,6 +866,10 @@ def test_create_course(self):
         self.assertEqual(response.status_code, 201)
         self.assertTrue(Course.objects.filter(name="Introduction to Computer Science").exists())
 
+        # Make sure the teacher is added to the course
+        course = Course.objects.get(name="Introduction to Computer Science")
+        self.assertTrue(course.teachers.filter(id=self.user.id).exists())
+
     def test_create_project(self):
         """
         Able to create a project for a course.
diff --git a/backend/api/views/course_view.py b/backend/api/views/course_view.py
index 5f91561d..bc61a913 100644
--- a/backend/api/views/course_view.py
+++ b/backend/api/views/course_view.py
@@ -5,6 +5,7 @@
 from rest_framework.response import Response
 from rest_framework.request import Request
 from drf_yasg.utils import swagger_auto_schema
+from rest_framework import status
 from api.models.course import Course
 from api.permissions.course_permissions import (
     CoursePermission,
@@ -12,7 +13,7 @@
     CourseStudentPermission,
     CourseTeacherPermission
 )
-from api.permissions.role_permissions import IsTeacher
+from api.permissions.role_permissions import IsTeacher, is_teacher
 from api.serializers.course_serializer import (
     CourseSerializer, StudentJoinSerializer, StudentLeaveSerializer, CourseCloneSerializer,
     TeacherJoinSerializer, TeacherLeaveSerializer
@@ -29,6 +30,22 @@ class CourseViewSet(viewsets.ModelViewSet):
     serializer_class = CourseSerializer
     permission_classes = [IsAdminUser | CoursePermission]
 
+    def create(self, request: Request, *_):
+        """Override the create method to add the teacher to the course"""
+        serializer = CourseSerializer(data=request.data, context={"request": request})
+
+        if serializer.is_valid(raise_exception=True):
+            course = serializer.save()
+
+            # If it was a teacher who created the course, add them as a teacher
+            if is_teacher(request.user):
+                course.teachers.add(request.user.id)
+
+        return Response(
+            {"message": gettext("courses.success.create")},
+            status=status.HTTP_201_CREATED
+        )
+
     @action(detail=True, permission_classes=[IsAdminUser | CourseAssistantPermission])
     def assistants(self, request: Request, **_):
         """Returns a list of assistants for the given course"""
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index 101bc025..7ae9e7c9 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -22,7 +22,7 @@ const courseName = ref<string>('');
 const courseDescription = ref<string>('');
 const courseYear = ref<Date>(new Date());
 
-const submit_course = async () => {
+const submitCourse = async () => {
     console.log('Creating course...');
     // Pass the course data to the service
     await createCourse(
@@ -48,7 +48,7 @@ const submit_course = async () => {
                 <Title class="mb-6">{{ t('views.courses.create') }}</Title>
 
                 <!-- Course form -->
-                <form @submit.prevent="submit_course">
+                <form @submit.prevent="submitCourse">
                     <!-- Course name -->
                     <div class="mb-4">
                         <label for="courseName">{{ t('views.courses.name') }}</label>

From a4b283d5072483b5a16459f6dd48f410f38ab7ce Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 31 Mar 2024 11:32:55 +0200
Subject: [PATCH 07/14] chore: init academic year button logic

---
 frontend/src/assets/lang/en.json              |  4 +-
 frontend/src/assets/lang/nl.json              |  4 +-
 .../src/views/dashboard/DashboardView.vue     | 55 +++++++++++++++----
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 735d3a23..4eead9da 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -20,7 +20,9 @@
     "views": {
         "dashboard": {
             "courses": "My courses",
-            "projects": "Current projects"
+            "projects": "Current projects",
+            "no_projects": "No projects available for this academic year.",
+            "no_courses": "No courses available for this academic year."
         },
         "login": {
             "title": "Login",
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 7aaaba07..f470c32c 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -20,7 +20,9 @@
     "views": {
         "dashboard": {
             "courses": "Mijn vakken",
-            "projects": "Lopende projecten"
+            "projects": "Lopende projecten",
+            "no_projects": "Geen projecten beschikbaar voor dit academiejaar.",
+            "no_courses": "Geen vakken beschikbaar voor dit academiejaar."
         },
         "login": {
             "title": "Inloggen",
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 4c910a60..160ae42f 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -2,6 +2,7 @@
 import Skeleton from 'primevue/skeleton';
 import ButtonGroup from 'primevue/buttongroup';
 import Button from 'primevue/button';
+import Dropdown from 'primevue/dropdown';
 import CourseCard from '@/components/courses/CourseCard.vue';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
@@ -14,12 +15,16 @@ import {useProject} from "@/composables/services/project.service.ts";
 import ProjectCard from "@/components/projects/ProjectCard.vue";
 import {useAuthStore} from '@/store/authentication.store.ts';
 import {storeToRefs} from 'pinia';
+import { computed } from 'vue';
 
 /* Composable injections */
 const {t} = useI18n();
 
 /* Component state */
 const allProjects = ref<Project[]>([]);
+const academicYears = ref<string[]>();
+const selectedCoursesYear = ref<string>();
+const selectedProjectsYear = ref<string>();
 
 /* Service injection */
 const { user } = useAuthStore();
@@ -27,8 +32,10 @@ const { view } = storeToRefs(useAuthStore());
 const { projects, getProjectsByCourse } = useProject();
 const { courses, getCoursesByStudent, getCoursesByTeacher, getCourseByAssistant } = useCourses();
 
-onMounted(() => {
-    fetchDashboardData();
+onMounted(async () => {
+    await fetchDashboardData();
+    selectedCoursesYear.value = getCurrentAcademicYear();
+    selectedProjectsYear.value = getCurrentAcademicYear();
 });
 
 watch(view, () => {
@@ -47,8 +54,9 @@ const fetchDashboardData = async () => {
             await getCourseByAssistant(user.id);
         }
 
-        // Clear the projects, so that the projects from another role are not displayed
+        // Clear the old data, so that the data from another role is not displayed
         allProjects.value = [];
+        academicYears.value = [];
 
         for (const course of courses.value ?? []) {
             await getProjectsByCourse(course.id);
@@ -58,10 +66,35 @@ const fetchDashboardData = async () => {
             });
 
             allProjects.value = allProjects.value.concat(projects.value ?? []);
+
+            // Add the academic year to the list
+            if (!academicYears.value?.includes(course.getCourseYear())) {
+                academicYears.value = academicYears.value?.concat(course.getCourseYear());
+            }
         }
     }
 }
 
+const filteredProjects = computed(() => {
+    return allProjects.value ? allProjects.value.filter(project => project.course?.getCourseYear() === selectedProjectsYear.value) : [];
+});
+
+const filteredCourses = computed(() => {
+    return courses.value ? courses.value.filter(course => course.getCourseYear() === selectedCoursesYear.value) : [];
+});
+
+// Method to get the current academic year
+const getCurrentAcademicYear = () => {
+    const today = new Date();
+    const currentYear = today.getFullYear();
+
+    if (today.getMonth() >= 8) {
+        return `${currentYear} - ${currentYear + 1}`;
+    } else {
+        return `${currentYear - 1} - ${currentYear}`;
+    }
+};
+
 </script>
 
 <template>
@@ -72,8 +105,7 @@ const fetchDashboardData = async () => {
             <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
             <!-- Course list controls -->
             <ButtonGroup>
-                <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN"
-                        icon-pos="right" outlined/>
+                <Dropdown v-model="selectedCoursesYear" :options="academicYears" />
 
                 <RouterLink :to="{ name: 'course-create' }" v-if="view === 'teacher'">
                     <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
@@ -82,9 +114,9 @@ const fetchDashboardData = async () => {
         </div>
         <!-- Course list body -->
         <div class="grid align-items-stretch">
-            <template v-if="courses !== null">
-                <template v-if="courses.length > 0">
-                    <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="course in courses">
+            <template v-if="filteredCourses !== null">
+                <template v-if="filteredCourses.length > 0">
+                    <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="course in filteredCourses">
                         <CourseCard class="h-100" :course="course"/>
                     </div>
                 </template>
@@ -106,8 +138,7 @@ const fetchDashboardData = async () => {
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <!-- Project list controls -->
             <ButtonGroup>
-                <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN"
-                        icon-pos="right" outlined/>
+                <Dropdown v-model="selectedProjectsYear" :options="academicYears"/>
 
                 <!-- TODO: Set to create a project-->
                 <RouterLink :to="{ name: 'course-create' }" v-if="view !== 'student'">
@@ -117,8 +148,8 @@ const fetchDashboardData = async () => {
         </div>
         <!-- Project list body -->
         <div class="grid align-items-stretch">
-            <template v-if="allProjects.length > 0">
-                <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in allProjects">
+            <template v-if="filteredProjects.length > 0">
+                <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in filteredProjects">
                     <ProjectCard class="h-100" :project="project"/>
                 </div>
             </template>

From 3f8059ef07b6900ff633a5d3f29470a02c937dbe Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 31 Mar 2024 16:05:57 +0200
Subject: [PATCH 08/14] chore: refactor authentication user field

---
 frontend/src/store/authentication.store.ts    | 71 +++++++++++++++++--
 frontend/src/types/Assistant.ts               | 18 ++++-
 frontend/src/types/Student.ts                 | 15 +++-
 frontend/src/types/Teacher.ts                 | 18 ++++-
 frontend/src/types/User.ts                    | 11 +--
 frontend/src/views/calendar/CalendarView.vue  | 19 ++---
 .../src/views/dashboard/DashboardView.vue     | 32 +++------
 7 files changed, 136 insertions(+), 48 deletions(-)

diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index a119e52c..eee2476c 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -8,17 +8,75 @@ import {Teacher} from '@/types/Teacher.ts';
 import {Student} from '@/types/Student.ts';
 import {Assistant} from '@/types/Assistant.ts';
 import {useLocalStorage} from '@vueuse/core';
-import {computed, ref} from 'vue';
+import { useCourses } from '@/composables/services/courses.service';
+import {computed, ref, watch} from 'vue';
 
 export const useAuthStore = defineStore('auth', () => {
     /* Stores */
     const user = ref<User|null>(null);
-    const teacher = ref<Teacher|null>(null);
-    const student = ref<Student|null>(null);
-    const assistant = ref<Assistant|null>(null);
     const view = useLocalStorage<Role|null>('view', null);
     const intent = useLocalStorage<string>('intent', '/');
 
+    /* Services */
+    const { courses, getCoursesByTeacher, getCoursesByStudent, getCourseByAssistant } = useCourses();
+
+    /* Update the user object when the view changes. */
+    watch(view, async () => {
+        initUser();
+    });
+
+    const initUser = async () => {
+        if (user.value !== null) {
+            if (view.value === 'teacher') {
+                await getCoursesByTeacher(user.value.id);
+
+                user.value = new Teacher(
+                    user.value.id,
+                    user.value.username,
+                    user.value.email,
+                    user.value.first_name,
+                    user.value.last_name,
+                    user.value.last_enrolled,
+                    user.value.is_staff,
+                    user.value.roles,
+                    [],
+                    courses.value ?? []
+                );
+            }else if (view.value === 'student') {
+                await getCoursesByStudent(user.value.id);
+
+                user.value = new Student(
+                    user.value.id,
+                    user.value.username,
+                    user.value.email,
+                    user.value.first_name,
+                    user.value.last_name,
+                    user.value.is_staff,
+                    user.value.last_enrolled,
+                    user.value.id,
+                    user.value.roles,
+                    courses.value ?? []
+                );
+            }else {
+                await getCourseByAssistant(user.value.id);
+
+                user.value = new Assistant(
+                    user.value.id,
+                    user.value.username,
+                    user.value.email,
+                    user.value.first_name,
+                    user.value.last_name,
+                    user.value.last_enrolled,
+                    user.value.is_staff,
+                    user.value.roles,
+                    [],
+                    courses.value ?? []
+                );
+            }
+        }
+    };
+
+
     /**
      * Attempt to log in the user using a CAS ticket.
      *
@@ -61,7 +119,8 @@ export const useAuthStore = defineStore('auth', () => {
                 view.value = user.value.roles[0];
             }
 
-            // TODO: Get the teacher, student, and assistant information.
+            // Init the user depending on the role selected.
+            initUser();
 
         }).catch((error) => {
             add({
@@ -86,7 +145,7 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     return {
-        user, teacher, student, assistant, view, intent,
+        user, view, intent,
         login, refresh, logout,
         isAuthenticated
     }
diff --git a/frontend/src/types/Assistant.ts b/frontend/src/types/Assistant.ts
index 786c58ee..7a8bccce 100644
--- a/frontend/src/types/Assistant.ts
+++ b/frontend/src/types/Assistant.ts
@@ -1,4 +1,5 @@
 import { Faculty } from "./Faculty";
+import { Course } from "./Course";
 import {Role, User} from '@/types/User.ts';
 
 export class Assistant extends User {
@@ -11,9 +12,10 @@ export class Assistant extends User {
         public last_enrolled: number,
         public is_staff: boolean,
         public roles: Role[] = [],
-        public faculties: Faculty[] = []
+        public faculties: Faculty[] = [],
+        public courses: Course[] = []
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, courses);
     }
 
     /**
@@ -31,7 +33,17 @@ export class Assistant extends User {
             assistant.last_enrolled,
             assistant.is_staff,
             assistant.roles,
-            assistant.faculties
+            assistant.faculties,
+            assistant.courses
         );
     }
+
+    /**
+     * Check if the user is a assistant.
+     *
+     * @returns boolean
+     */
+    public isAssistant(): boolean {
+        return true;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/types/Student.ts b/frontend/src/types/Student.ts
index b884ae5c..eaeddff9 100644
--- a/frontend/src/types/Student.ts
+++ b/frontend/src/types/Student.ts
@@ -12,13 +12,13 @@ export class Student extends User {
         public last_name: string,
         public is_staff: boolean,
         public last_enrolled: number,
-        public roles: Role[] = [],
         public student_id: string,
+        public roles: Role[] = [],
         public courses: Course[] = [],
         public groups: Group[] = [],
         public faculties: Faculty[] = []
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, courses);
     }
 
     /**
@@ -35,11 +35,20 @@ export class Student extends User {
             student.last_name,
             student.is_staff,
             student.last_enrolled,
-            student.roles,
             student.student_id,
+            student.roles,
             student.courses,
             student.groups,
             student.faculties
         );
     }
+
+    /**
+     * Check if the user is a student.
+     *
+     * @returns boolean
+     */
+    public isStudent(): boolean {
+        return true;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/types/Teacher.ts b/frontend/src/types/Teacher.ts
index 93bed9df..6680c52c 100644
--- a/frontend/src/types/Teacher.ts
+++ b/frontend/src/types/Teacher.ts
@@ -1,4 +1,5 @@
 import { Faculty } from "./Faculty";
+import { Course } from "./Course";
 import {Role, User} from '@/types/User.ts';
 
 export class Teacher extends User {
@@ -11,9 +12,10 @@ export class Teacher extends User {
         public last_enrolled: number,
         public is_staff: boolean,
         public roles: Role[] = [],
-        public faculties: Faculty[] = []
+        public faculties: Faculty[] = [],
+        public courses: Course[] = []
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, courses);
     }
 
     /**
@@ -32,7 +34,17 @@ export class Teacher extends User {
             teacher.last_enrolled,
             teacher.is_staff,
             teacher.roles,
-            teacher.faculties
+            teacher.faculties,
+            teacher.courses
         );
     }
+
+    /**
+     * Check if the user is a teacher.
+     *
+     * @returns boolean
+     */
+    public isTeacher(): boolean {
+        return true;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/types/User.ts b/frontend/src/types/User.ts
index f72c685e..d524b5dc 100644
--- a/frontend/src/types/User.ts
+++ b/frontend/src/types/User.ts
@@ -1,3 +1,5 @@
+import { Course } from './Course';
+
 export type Role = 'user' | 'student' | 'assistant' | 'teacher';
 
 export class User {
@@ -9,7 +11,8 @@ export class User {
         public last_name: string,
         public last_enrolled: number,
         public is_staff: boolean,
-        public roles: Role[] = []
+        public roles: Role[] = [],
+        public courses: Course[] = [],
     ) {
     }
 
@@ -28,7 +31,7 @@ export class User {
      * @returns boolean
      */
     public isStudent(): boolean {
-        return this.roles.includes('student');
+        return false;
     }
 
     /**
@@ -37,7 +40,7 @@ export class User {
      * @returns boolean
      */
     public isAssistant(): boolean {
-        return this.roles.includes('assistant');
+        return false;
     }
 
     /**
@@ -46,7 +49,7 @@ export class User {
      * @returns boolean
      */
     public isTeacher(): boolean {
-        return this.roles.includes('teacher');
+        return false;
     }
 
     /**
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 7c4c7ae6..1e8775f5 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -5,11 +5,11 @@ import ProjectCard from '@/components/projects/ProjectCard.vue';
 import Calendar from 'primevue/calendar';
 import Title from '@/components/layout/Title.vue';
 import {useProject} from '@/composables/services/project.service';
-import {useCourses} from '@/composables/services/courses.service';
 import { computed, onMounted } from 'vue';
 import {useI18n} from 'vue-i18n';
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 import {useAuthStore} from '@/store/authentication.store.ts';
+import {storeToRefs} from 'pinia';
 import {Project} from "@/types/Projects.ts";
 
 /* Composable injections */
@@ -20,8 +20,7 @@ const allProjects = ref<Project[]>([]);
 const selectedDate = ref(new Date());
 
 /* Service injection */
-const { user } = useAuthStore();
-const { courses, getCoursesByStudent } = useCourses();
+const { user } = storeToRefs(useAuthStore());
 const { projects, getProjectsByCourse } = useProject();
 
 const formattedDate = computed(() => {
@@ -30,12 +29,12 @@ const formattedDate = computed(() => {
 });
 
 const loadProjects = async () => {
-    if (user !== null) {
-        // Load the courses of the student
-        await getCoursesByStudent(user.id);
+    if (user.value !== null) {
+        // Clear the old data, so that the data from another role is not displayed
+        allProjects.value = [];
 
         // Load the projects of the courses
-        for (const course of courses.value ?? []) {
+        for (const course of user.value.courses) {
             await getProjectsByCourse(course.id);
 
             // Assign the course to the project
@@ -62,6 +61,10 @@ onMounted(async () => {
     await loadProjects();
 });
 
+watch(user, async () => {
+    await loadProjects();
+});
+
 </script>
 
 <template>
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 160ae42f..863a76c9 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -9,7 +9,6 @@ import Title from '@/components/layout/Title.vue';
 import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
 import { ref, onMounted, watch } from 'vue';
-import {useCourses} from '@/composables/services/courses.service.ts';
 import {Project} from "@/types/Projects.ts";
 import {useProject} from "@/composables/services/project.service.ts";
 import ProjectCard from "@/components/projects/ProjectCard.vue";
@@ -27,10 +26,8 @@ const selectedCoursesYear = ref<string>();
 const selectedProjectsYear = ref<string>();
 
 /* Service injection */
-const { user } = useAuthStore();
-const { view } = storeToRefs(useAuthStore());
+const { user } = storeToRefs(useAuthStore());
 const { projects, getProjectsByCourse } = useProject();
-const { courses, getCoursesByStudent, getCoursesByTeacher, getCourseByAssistant } = useCourses();
 
 onMounted(async () => {
     await fetchDashboardData();
@@ -38,27 +35,20 @@ onMounted(async () => {
     selectedProjectsYear.value = getCurrentAcademicYear();
 });
 
-watch(view, () => {
-    fetchDashboardData();
+watch(user, async () => {
+    await fetchDashboardData();
+    selectedCoursesYear.value = getCurrentAcademicYear();
+    selectedProjectsYear.value = getCurrentAcademicYear();
 });
 
 /* Fetch the data for the dashboard */
 const fetchDashboardData = async () => {
-    if (user !== null) {
-        // Get the courses, depending on the user's role
-        if (view.value === 'teacher') {
-            await getCoursesByTeacher(user.id);
-        } else if (view.value === 'student') {
-            await getCoursesByStudent(user.id);
-        } else {
-            await getCourseByAssistant(user.id);
-        }
-
+    if (user.value !== null) {
         // Clear the old data, so that the data from another role is not displayed
         allProjects.value = [];
         academicYears.value = [];
 
-        for (const course of courses.value ?? []) {
+        for (const course of user.value.courses) {
             await getProjectsByCourse(course.id);
 
             projects.value?.forEach(project => {
@@ -80,7 +70,7 @@ const filteredProjects = computed(() => {
 });
 
 const filteredCourses = computed(() => {
-    return courses.value ? courses.value.filter(course => course.getCourseYear() === selectedCoursesYear.value) : [];
+    return user.value?.courses ? user.value?.courses.filter(course => course.getCourseYear() === selectedCoursesYear.value) : [];
 });
 
 // Method to get the current academic year
@@ -88,7 +78,7 @@ const getCurrentAcademicYear = () => {
     const today = new Date();
     const currentYear = today.getFullYear();
 
-    if (today.getMonth() >= 8) {
+    if (today.getMonth() >= 9) {
         return `${currentYear} - ${currentYear + 1}`;
     } else {
         return `${currentYear - 1} - ${currentYear}`;
@@ -107,7 +97,7 @@ const getCurrentAcademicYear = () => {
             <ButtonGroup>
                 <Dropdown v-model="selectedCoursesYear" :options="academicYears" />
 
-                <RouterLink :to="{ name: 'course-create' }" v-if="view === 'teacher'">
+                <RouterLink :to="{ name: 'course-create' }" v-if="user?.isTeacher()">
                     <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
                 </RouterLink>
             </ButtonGroup>
@@ -141,7 +131,7 @@ const getCurrentAcademicYear = () => {
                 <Dropdown v-model="selectedProjectsYear" :options="academicYears"/>
 
                 <!-- TODO: Set to create a project-->
-                <RouterLink :to="{ name: 'course-create' }" v-if="view !== 'student'">
+                <RouterLink :to="{ name: 'course-create' }" v-if="! user?.isStudent()">
                     <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
                 </RouterLink>
             </ButtonGroup>

From 86744fb05eadbf6b62cb2beafbe43def58e48744 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 31 Mar 2024 16:37:08 +0200
Subject: [PATCH 09/14] chore: layout + logic academic year button

---
 .../src/views/courses/CreateCourseView.vue    |  1 -
 .../src/views/dashboard/DashboardView.vue     | 39 ++++++++++++-------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index 7ae9e7c9..a73886ba 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -23,7 +23,6 @@ const courseDescription = ref<string>('');
 const courseYear = ref<Date>(new Date());
 
 const submitCourse = async () => {
-    console.log('Creating course...');
     // Pass the course data to the service
     await createCourse(
         new Course(
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 863a76c9..a94c1185 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -21,9 +21,9 @@ const {t} = useI18n();
 
 /* Component state */
 const allProjects = ref<Project[]>([]);
-const academicYears = ref<string[]>();
-const selectedCoursesYear = ref<string>();
-const selectedProjectsYear = ref<string>();
+const academicYears = ref<{ label: string; value: number }[]>();
+const selectedCoursesYear = ref<number>();
+const selectedProjectsYear = ref<number>();
 
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());
@@ -58,30 +58,34 @@ const fetchDashboardData = async () => {
             allProjects.value = allProjects.value.concat(projects.value ?? []);
 
             // Add the academic year to the list
-            if (!academicYears.value?.includes(course.getCourseYear())) {
-                academicYears.value = academicYears.value?.concat(course.getCourseYear());
+            const year = course.academic_startyear;
+            if (! academicYears.value?.some(el => el.value === year)) {
+                academicYears.value?.push({ label: `${year}-${year + 1}`, value: year });
             }
         }
+
+        // Sort the academic years in descending order
+        academicYears.value?.sort((a, b) => b.value - a.value);
     }
 }
 
 const filteredProjects = computed(() => {
-    return allProjects.value ? allProjects.value.filter(project => project.course?.getCourseYear() === selectedProjectsYear.value) : [];
+    return allProjects.value ? allProjects.value.filter(project => project.course?.academic_startyear === selectedProjectsYear.value) : [];
 });
 
 const filteredCourses = computed(() => {
-    return user.value?.courses ? user.value?.courses.filter(course => course.getCourseYear() === selectedCoursesYear.value) : [];
+    return user.value?.courses ? user.value?.courses.filter(course => course.academic_startyear === selectedCoursesYear.value) : [];
 });
 
 // Method to get the current academic year
-const getCurrentAcademicYear = () => {
+const getCurrentAcademicYear : () => number = () => {
     const today = new Date();
     const currentYear = today.getFullYear();
 
     if (today.getMonth() >= 9) {
-        return `${currentYear} - ${currentYear + 1}`;
+        return currentYear;
     } else {
-        return `${currentYear - 1} - ${currentYear}`;
+        return currentYear - 1;
     }
 };
 
@@ -95,10 +99,11 @@ const getCurrentAcademicYear = () => {
             <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
             <!-- Course list controls -->
             <ButtonGroup>
-                <Dropdown v-model="selectedCoursesYear" :options="academicYears" />
+                <Dropdown v-model="selectedCoursesYear" :options="academicYears" optionLabel="label" 
+                          optionValue="value" class="custom-dropdown"/>
 
                 <RouterLink :to="{ name: 'course-create' }" v-if="user?.isTeacher()">
-                    <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
+                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button"/>
                 </RouterLink>
             </ButtonGroup>
         </div>
@@ -128,11 +133,12 @@ const getCurrentAcademicYear = () => {
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <!-- Project list controls -->
             <ButtonGroup>
-                <Dropdown v-model="selectedProjectsYear" :options="academicYears"/>
+                <Dropdown v-model="selectedProjectsYear" :options="academicYears" optionLabel="label" 
+                          optionValue="value"class="custom-dropdown"/>
 
                 <!-- TODO: Set to create a project-->
                 <RouterLink :to="{ name: 'course-create' }" v-if="! user?.isStudent()">
-                    <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
+                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button"/>
                 </RouterLink>
             </ButtonGroup>
         </div>
@@ -153,5 +159,8 @@ const getCurrentAcademicYear = () => {
 </template>
 
 <style scoped>
-
+    .custom-dropdown, .custom-button {
+        border-radius: 0; /* Ensures no rounding */
+        height: 50px; /* Adjust the height as needed */
+    }
 </style>
\ No newline at end of file

From 37f8d12f863e0f8bcfcf2ddd005ed76bd8e58b69 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 31 Mar 2024 17:49:30 +0200
Subject: [PATCH 10/14] chore: clean up

---
 frontend/src/views/dashboard/DashboardView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index a94c1185..8903cf70 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -160,7 +160,7 @@ const getCurrentAcademicYear : () => number = () => {
 
 <style scoped>
     .custom-dropdown, .custom-button {
-        border-radius: 0; /* Ensures no rounding */
-        height: 50px; /* Adjust the height as needed */
+        border-radius: 0;
+        height: 50px;
     }
 </style>
\ No newline at end of file

From 93709ed11bbb1923a4e48c9515c59adf4adcd938 Mon Sep 17 00:00:00 2001
From: tyboro2002 <verslypetybo@hotmail.com>
Date: Sun, 31 Mar 2024 21:21:37 +0200
Subject: [PATCH 11/14] fix: fix error

---
 frontend/src/types/Assistant.ts                | 5 ++---
 frontend/src/types/Student.ts                  | 2 +-
 frontend/src/types/Teacher.ts                  | 3 +--
 frontend/src/types/User.ts                     | 4 +++-
 frontend/src/views/dashboard/DashboardView.vue | 2 ++
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/types/Assistant.ts b/frontend/src/types/Assistant.ts
index 31db6f9a..cfba16f9 100644
--- a/frontend/src/types/Assistant.ts
+++ b/frontend/src/types/Assistant.ts
@@ -1,6 +1,5 @@
 import { Course } from "./Course";
 import { Faculty } from "./Faculty";
-import { Course } from "./Course";
 import {Role, User} from '@/types/User.ts';
 
 export class Assistant extends User {
@@ -16,9 +15,9 @@ export class Assistant extends User {
         public faculties: Faculty[] = [],
         public courses: Course[] = [],
         public create_time: Date,
-        public last_login: Date |null,
+        public last_login: Date |null
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
     }
 
     /**
diff --git a/frontend/src/types/Student.ts b/frontend/src/types/Student.ts
index f4f4cbc2..28b0cf9a 100644
--- a/frontend/src/types/Student.ts
+++ b/frontend/src/types/Student.ts
@@ -20,7 +20,7 @@ export class Student extends User {
         public groups: Group[] = [],
         public faculties: Faculty[] = [],
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
     }
 
     /**
diff --git a/frontend/src/types/Teacher.ts b/frontend/src/types/Teacher.ts
index 1b2f824a..09596ca1 100644
--- a/frontend/src/types/Teacher.ts
+++ b/frontend/src/types/Teacher.ts
@@ -1,6 +1,5 @@
 import { Course } from "./Course";
 import { Faculty } from "./Faculty";
-import { Course } from "./Course";
 import {Role, User} from '@/types/User.ts';
 
 export class Teacher extends User {
@@ -18,7 +17,7 @@ export class Teacher extends User {
         public create_time: Date,
         public last_login: Date |null,
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
     }
 
     /**
diff --git a/frontend/src/types/User.ts b/frontend/src/types/User.ts
index e6038ae3..11b83e58 100644
--- a/frontend/src/types/User.ts
+++ b/frontend/src/types/User.ts
@@ -1,3 +1,4 @@
+import { Course } from "./Course";
 import { Faculty } from "./Faculty";
 
 export type Role = 'user' | 'student' | 'assistant' | 'teacher';
@@ -14,7 +15,8 @@ export class User {
         public roles: Role[] = [],
         public faculties: Faculty[] = [],
         public create_time: Date,
-        public last_login: Date |null
+        public last_login: Date |null,
+        public courses: Course[] = []
     ) {
     }
 
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 8903cf70..5623d83f 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -15,12 +15,14 @@ import ProjectCard from "@/components/projects/ProjectCard.vue";
 import {useAuthStore} from '@/store/authentication.store.ts';
 import {storeToRefs} from 'pinia';
 import { computed } from 'vue';
+import { Course } from '@/types/Course';
 
 /* Composable injections */
 const {t} = useI18n();
 
 /* Component state */
 const allProjects = ref<Project[]>([]);
+const allCourses = ref<Course[]>([]);
 const academicYears = ref<{ label: string; value: number }[]>();
 const selectedCoursesYear = ref<number>();
 const selectedProjectsYear = ref<number>();

From 233f1c0922beb9b9df263a1925a6a250af43a0cb Mon Sep 17 00:00:00 2001
From: tyboro2002 <verslypetybo@hotmail.com>
Date: Sun, 31 Mar 2024 21:25:35 +0200
Subject: [PATCH 12/14] fix: fix error

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

diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 5623d83f..8903cf70 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -15,14 +15,12 @@ import ProjectCard from "@/components/projects/ProjectCard.vue";
 import {useAuthStore} from '@/store/authentication.store.ts';
 import {storeToRefs} from 'pinia';
 import { computed } from 'vue';
-import { Course } from '@/types/Course';
 
 /* Composable injections */
 const {t} = useI18n();
 
 /* Component state */
 const allProjects = ref<Project[]>([]);
-const allCourses = ref<Course[]>([]);
 const academicYears = ref<{ label: string; value: number }[]>();
 const selectedCoursesYear = ref<number>();
 const selectedProjectsYear = ref<number>();

From dc64dcf1dbd20149490fdad780abd3006609872a Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 31 Mar 2024 21:33:57 +0200
Subject: [PATCH 13/14] fix: issues after merge

---
 frontend/src/store/authentication.store.ts     | 10 ++++++++--
 frontend/src/views/dashboard/DashboardView.vue |  2 --
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index eee2476c..4e29dca8 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -40,7 +40,9 @@ export const useAuthStore = defineStore('auth', () => {
                     user.value.is_staff,
                     user.value.roles,
                     [],
-                    courses.value ?? []
+                    courses.value ?? [],
+                    user.value.create_time,
+                    user.value.last_login
                 );
             }else if (view.value === 'student') {
                 await getCoursesByStudent(user.value.id);
@@ -53,6 +55,8 @@ export const useAuthStore = defineStore('auth', () => {
                     user.value.last_name,
                     user.value.is_staff,
                     user.value.last_enrolled,
+                    user.value.create_time,
+                    user.value.last_login,
                     user.value.id,
                     user.value.roles,
                     courses.value ?? []
@@ -70,7 +74,9 @@ export const useAuthStore = defineStore('auth', () => {
                     user.value.is_staff,
                     user.value.roles,
                     [],
-                    courses.value ?? []
+                    courses.value ?? [],
+                    user.value.create_time,
+                    user.value.last_login
                 );
             }
         }
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 5623d83f..8903cf70 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -15,14 +15,12 @@ import ProjectCard from "@/components/projects/ProjectCard.vue";
 import {useAuthStore} from '@/store/authentication.store.ts';
 import {storeToRefs} from 'pinia';
 import { computed } from 'vue';
-import { Course } from '@/types/Course';
 
 /* Composable injections */
 const {t} = useI18n();
 
 /* Component state */
 const allProjects = ref<Project[]>([]);
-const allCourses = ref<Course[]>([]);
 const academicYears = ref<{ label: string; value: number }[]>();
 const selectedCoursesYear = ref<number>();
 const selectedProjectsYear = ref<number>();

From 39ce4256ac7e8b5d200f756111f23df45fd456b9 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 31 Mar 2024 22:35:23 +0200
Subject: [PATCH 14/14] fix: using services instead of hardcoded creating

---
 frontend/src/store/authentication.store.ts | 81 ++++++++++------------
 1 file changed, 35 insertions(+), 46 deletions(-)

diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index 4e29dca8..4675fff5 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -4,12 +4,12 @@ import {Role, User} from '@/types/User.ts';
 import {endpoints} from '@/config/endpoints.ts';
 import {useMessagesStore} from '@/store/messages.store.ts';
 import {client} from '@/composables/axios.ts';
-import {Teacher} from '@/types/Teacher.ts';
-import {Student} from '@/types/Student.ts';
-import {Assistant} from '@/types/Assistant.ts';
 import {useLocalStorage} from '@vueuse/core';
 import { useCourses } from '@/composables/services/courses.service';
 import {computed, ref, watch} from 'vue';
+import { useAssistant } from '@/composables/services/assistant.service';
+import { useStudents } from '@/composables/services/students.service';
+import { useTeacher } from '@/composables/services/teachers.service';
 
 export const useAuthStore = defineStore('auth', () => {
     /* Stores */
@@ -19,6 +19,9 @@ export const useAuthStore = defineStore('auth', () => {
 
     /* Services */
     const { courses, getCoursesByTeacher, getCoursesByStudent, getCourseByAssistant } = useCourses();
+    const { assistant, getAssistantByID } = useAssistant();
+    const { student, getStudentByID } = useStudents();
+    const { teacher, getTeacherByID } = useTeacher();
 
     /* Update the user object when the view changes. */
     watch(view, async () => {
@@ -28,56 +31,42 @@ export const useAuthStore = defineStore('auth', () => {
     const initUser = async () => {
         if (user.value !== null) {
             if (view.value === 'teacher') {
+                // Get the teacher information.
+                await getTeacherByID(user.value.id);
+
+                // Get the courses for the teacher.
                 await getCoursesByTeacher(user.value.id);
 
-                user.value = new Teacher(
-                    user.value.id,
-                    user.value.username,
-                    user.value.email,
-                    user.value.first_name,
-                    user.value.last_name,
-                    user.value.last_enrolled,
-                    user.value.is_staff,
-                    user.value.roles,
-                    [],
-                    courses.value ?? [],
-                    user.value.create_time,
-                    user.value.last_login
-                );
+                // Set the user object with the teacher information.
+                teacher.value ? teacher.value.courses = courses.value ?? [] : null;
+                teacher.value ? teacher.value.roles = user.value.roles : null;
+
+                user.value = teacher.value;
+
             }else if (view.value === 'student') {
+                // Get the student information.
+                await getStudentByID(user.value.id);
+
+                // Get the courses for the student.
                 await getCoursesByStudent(user.value.id);
 
-                user.value = new Student(
-                    user.value.id,
-                    user.value.username,
-                    user.value.email,
-                    user.value.first_name,
-                    user.value.last_name,
-                    user.value.is_staff,
-                    user.value.last_enrolled,
-                    user.value.create_time,
-                    user.value.last_login,
-                    user.value.id,
-                    user.value.roles,
-                    courses.value ?? []
-                );
+                // Set the user object with the student information.
+                student.value ? student.value.courses = courses.value ?? [] : null;
+                student.value ? student.value.roles = user.value.roles : null;
+
+                user.value = student.value;
             }else {
+                // Get the assistant information.
+                await getAssistantByID(user.value.id);
+
+                // Get the courses for the assistant.
                 await getCourseByAssistant(user.value.id);
 
-                user.value = new Assistant(
-                    user.value.id,
-                    user.value.username,
-                    user.value.email,
-                    user.value.first_name,
-                    user.value.last_name,
-                    user.value.last_enrolled,
-                    user.value.is_staff,
-                    user.value.roles,
-                    [],
-                    courses.value ?? [],
-                    user.value.create_time,
-                    user.value.last_login
-                );
+                // Set the user object with the assistant information.
+                assistant.value ? assistant.value.courses = courses.value ?? [] : null;
+                assistant.value ? assistant.value.roles = user.value.roles : null;
+                
+                user.value = assistant.value;                
             }
         }
     };
@@ -124,7 +113,7 @@ export const useAuthStore = defineStore('auth', () => {
             if (view.value === null) {
                 view.value = user.value.roles[0];
             }
-
+            
             // Init the user depending on the role selected.
             initUser();