From 728305ef6baba7eee95d1b109905545e182fcea4 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Mon, 1 Apr 2024 21:05:08 +0200
Subject: [PATCH 1/8] chore: init project creation from dashboard

---
 frontend/src/assets/lang/en.json              |   3 +-
 frontend/src/assets/lang/nl.json              |   3 +
 frontend/src/router/router.ts                 | 144 ++++++------------
 .../src/views/projects/CreateProjectView.vue  |  90 +++++++++++
 4 files changed, 140 insertions(+), 100 deletions(-)
 create mode 100644 frontend/src/views/projects/CreateProjectView.vue

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 4eead9da..0a42aeaa 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -22,7 +22,8 @@
             "courses": "My courses",
             "projects": "Current projects",
             "no_projects": "No projects available for this academic year.",
-            "no_courses": "No courses available for this academic year."
+            "no_courses": "No courses available for this academic year.",
+            "select_course": "Select the course for which you want to create a project:"
         },
         "login": {
             "title": "Login",
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 31ec1044..0a64e710 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -23,6 +23,9 @@
             "projects": "Lopende projecten",
             "no_projects": "Geen projecten gevonden.",
             "no_courses": "Geen vakken gevonden."
+            "no_projects": "Geen projecten beschikbaar voor dit academiejaar.",
+            "no_courses": "Geen vakken beschikbaar voor dit academiejaar.",
+            "select_course": "Selecteer het vak waarvoor je een project wil maken:"
         },
         "login": {
             "title": "Inloggen",
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index d0d87a26..9924d02f 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -1,9 +1,7 @@
-// import { useUserStore } from '@/stores/userStore';
-// TODO: after pinia setup is done
-
 import DashboardView from '@/views/dashboard/DashboardView.vue';
 import CourseView from '@/views/courses/CourseView.vue';
 import CreateCourseView from '@/views/courses/CreateCourseView.vue';
+import CreateProjectView from '@/views/projects/CreateProjectView.vue';
 import Dummy from '@/components/Dummy.vue';
 import LoginView from '@/views/authentication/LoginView.vue';
 import CalendarView from '@/views/calendar/CalendarView.vue';
@@ -32,102 +30,51 @@ const routes: RouteRecordRaw[] = [
     { path: '/', component: DashboardView, name: 'dashboard' },
 
     // Courses
-    {
-        path: '/courses',
-        children: [
-            { path: '', component: SearchCourseView, name: 'courses' },
-            {
-                path: 'create',
-                component: CreateCourseView,
-                name: 'course-create',
-            },
-            // Single course
-            {
-                path: ':courseId',
-                children: [
-                    { path: '', component: CourseView, name: 'course' },
-                    { path: 'edit', component: Dummy, name: 'course-edit' },
-                    // Projects
-                    {
-                        path: 'projects',
-                        children: [
-                            { path: '', component: Dummy, name: 'projects' },
-                            {
-                                path: 'create',
-                                component: Dummy,
-                                name: 'project-create',
-                            },
-                            // Single project
-                            {
-                                path: ':projectId',
-                                children: [
-                                    {
-                                        path: '',
-                                        component: ProjectView,
-                                        name: 'project',
-                                    },
-                                    {
-                                        path: 'edit',
-                                        component: Dummy,
-                                        name: 'project-edit',
-                                    },
-                                    {
-                                        path: 'groups',
-                                        component: Dummy,
-                                        name: 'project-groups',
-                                    },
-                                    {
-                                        path: 'submit',
-                                        component: Dummy,
-                                        name: 'project-submit',
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-    },
+    { path: '/courses', children: [
+        { path: '', component: SearchCourseView, name: 'courses' },
+        { path: 'create', component: CreateCourseView, name: 'course-create' },
+        // Single course  
+        { path: ':courseId', children: [
+            { path: '', component: CourseView, name: 'course' },
+            { path: 'edit', component: Dummy, name: 'course-edit' },
+            // Projects
+            { path: 'projects', children: [
+                { path: '', component: Dummy, name: 'projects' },
+                { path: 'create', component: CreateProjectView, name: 'project-create' },
+                // Single project
+                { path: ':projectId', children: [
+                    { path: '', component: ProjectView, name: 'project'},
+                    { path: 'edit', component: Dummy, name: 'project-edit' },
+                    { path: 'groups', component: Dummy, name: 'project-groups' },
+                    { path: 'submit', component: Dummy, name: 'project-submit' },
+                ]}
+            ]},
+        ]},
+    ]},
 
     // Calendar
     { path: '/calendar', component: CalendarView, name: 'calendar' },
 
     // Users
-    {
-        path: '/users',
-        children: [
-            { path: ':id', component: Dummy, name: 'user' },
-            {
-                path: 'students',
-                children: [
-                    { path: '', component: Dummy, name: 'students' },
-                    { path: ':id', component: Dummy, name: 'student' },
-                ],
-            },
-            {
-                path: 'admins',
-                children: [
-                    { path: '', component: Dummy, name: 'admins' },
-                    { path: ':id', component: Dummy, name: 'admin' },
-                ],
-            },
-            {
-                path: 'teachers',
-                children: [
-                    { path: '', component: Dummy, name: 'teachers' },
-                    { path: ':id', component: Dummy, name: 'teacher' },
-                ],
-            },
-            {
-                path: 'assistants',
-                children: [
-                    { path: '', component: Dummy, name: 'assistants' },
-                    { path: ':id', component: Dummy, name: 'assistant' },
-                ],
-            },
-        ],
-    },
+    { path: '/users', children: [
+        { path: ':id', component: Dummy, name: 'user' },
+        { path: 'students', children: [
+            { path: '', component: Dummy, name: 'students' },
+            { path: ':id', component: Dummy, name: 'student' },
+        ]},
+        { path: 'admins', children: [
+            { path: '', component: Dummy, name: 'admins' },
+            { path: ':id', component: Dummy, name: 'admin' },
+        ]},
+        { path: 'teachers', children: [
+            { path: '', component: Dummy, name: 'teachers' },
+            { path: ':id', component: Dummy, name: 'teacher' },
+        ]},
+        { path: 'assistants', children: [
+            { path: '', component: Dummy, name: 'assistants' },
+            { path: ':id', component: Dummy, name: 'assistant' },
+        ]},
+    ]},
 
     // Faculties
     { path: '/faculties', component: Dummy, name: 'faculties' },
@@ -138,13 +85,12 @@ const routes: RouteRecordRaw[] = [
     { path: '/notifications/:id', component: Dummy, name: 'notification' },
 
     // Authentication
-    {
-        path: '/auth/',
-        children: [{ path: 'login', component: LoginView, name: 'login' }],
-    },
+    { path: '/auth/', children: [
+        { path: 'login', component: LoginView, name: 'login' },
+    ]},
 
     // Page not found: redirect to dashboard
-    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },
+    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } }
 ];
 
 const router = createRouter({
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
new file mode 100644
index 00000000..a73886ba
--- /dev/null
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -0,0 +1,90 @@
+<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 { 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();
+
+/* Service injection */
+const { createCourse } = useCourses();
+
+const courseName = ref<string>('');
+const courseDescription = ref<string>('');
+const courseYear = ref<Date>(new Date());
+
+const submitCourse = async () => {
+    // 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>
+    <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="submitCourse">
+                    <!-- 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" 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" required/>
+                    </div>
+                    
+                    <!-- Submit button -->
+                    <div class="flex justify-end">
+                        <Button :label="t('views.courses.create')" type="submit" icon="pi pi-check" iconPos="right" rounded/>
+                    </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 ed6cf3350b9034669f2df62a34db638122091b8f Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Mon, 1 Apr 2024 22:46:05 +0200
Subject: [PATCH 2/8] chore: project creation logic

---
 frontend/src/assets/lang/en.json              |  14 +-
 frontend/src/assets/lang/nl.json              |  12 +-
 .../composables/services/project.service.ts   |   2 +-
 .../src/views/projects/CreateProjectView.vue  | 214 +++++++++++++-----
 4 files changed, 179 insertions(+), 63 deletions(-)

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 0a42aeaa..3735fee2 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -39,9 +39,17 @@
             "title": "Calendar"
         },
         "projects": {
-          "deadline": "Deadline",
-          "submissionStatus": "Indienstatus",
-          "groupMembers": "Group members"
+            "deadline": "Deadline",
+            "submissionStatus": "Indienstatus",
+            "groupMembers": "Group members",
+            "create": "Create new project",
+            "name": "Project name",
+            "description": "Description",
+            "start_date": "Start project",
+            "group_size": "Number of students in a group (1 for an individual project)",
+            "max_score": "Maximum score that can be achieved",
+            "visibility": "Make project visible to students",
+            "score_visibility": "Make score automatically visible to students when uploaded"
         },
         "courses": {
             "create": "Create course",
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 0a64e710..437734f9 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -23,8 +23,6 @@
             "projects": "Lopende projecten",
             "no_projects": "Geen projecten gevonden.",
             "no_courses": "Geen vakken gevonden."
-            "no_projects": "Geen projecten beschikbaar voor dit academiejaar.",
-            "no_courses": "Geen vakken beschikbaar voor dit academiejaar.",
             "select_course": "Selecteer het vak waarvoor je een project wil maken:"
         },
         "login": {
@@ -43,7 +41,15 @@
         "projects": {
             "deadline": "Deadline",
             "submissionStatus": "Indienstatus",
-            "groupMembers": "Groepsleden"
+            "groupMembers": "Groepsleden",
+            "create": "Creëer nieuw project",
+            "name": "Projectnaam",
+            "description": "Beschrijving",
+            "start_date": "Start project",
+            "group_size": "Aantal studenten per groep (1 voor individueel project)",
+            "max_score": "Maximale te behalen score",
+            "visibility": "Project zichtbaar maken voor studenten",
+            "score_visibility": "Maak score automatisch zichtbaar voor studenten wanneer ingevuld"
         },
         "courses": {
           "create": "Creëer vak",
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 4e39187f..e29d2519 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -84,7 +84,7 @@ export function useProject(): ProjectState {
                 visible: projectData.visible,
                 archived: projectData.archived,
                 locked_groups: projectData.locked_groups,
-                start_data: projectData.start_date,
+                start_date: projectData.start_date,
                 deadline: projectData.deadline,
                 max_score: projectData.max_score,
                 score_visible: projectData.score_visible,
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index a73886ba..c37cf411 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -1,74 +1,176 @@
 <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 { 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';
+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, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+import InputNumber from 'primevue/inputnumber'
+import InputSwitch from 'primevue/inputswitch'
+import { Project } from '@/types/Projects'
+import { useProject } from '@/composables/services/project.service'
 
 /* Composable injections */
-const { t } = useI18n();
-const { push } = useRouter();
+const { t } = useI18n()
+const { push } = useRouter()
+const { params } = useRoute()
 
 /* Service injection */
-const { createCourse } = useCourses();
-
-const courseName = ref<string>('');
-const courseDescription = ref<string>('');
-const courseYear = ref<Date>(new Date());
-
-const submitCourse = async () => {
-    // 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()
-        )
-    );
+const { createProject } = useProject()
+
+const projectName = ref<string>('')
+const projectDescription = ref<string>('')
+const projectStartDate = ref<Date>(new Date())
+const projectDeadline = ref<Date>(new Date())
+const groupSize = ref<number>(1)
+const maxScore = ref<number>(10)
+const visibility = ref<boolean>(true)
+const scoreVisibility = ref<boolean>(false)
+
+const submitProject = async (): Promise<void> => {
+    // Pass the project data to the service
+    await createProject(
+        new Project(
+            '', // ID not needed for creation, will be generated by the backend
+            projectName.value,
+            projectDescription.value,
+            visibility.value,
+            false, // Default not archived
+            false, // Default the groups are not locked
+            projectStartDate.value,
+            projectDeadline.value,
+            maxScore.value,
+            scoreVisibility.value,
+            groupSize.value
+        ),
+        params.courseId as string
+    )
 
     // Redirect to the dashboard overview
-    push({ name: 'dashboard' });
+    push({ name: 'dashboard' })
 }
-
 </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>
+                <!-- Create project heading -->
+                <Title class="mb-6">{{ t('views.projects.create') }}</Title>
+
+                <!-- Project form -->
+                <form @submit.prevent="submitProject">
+                    <!-- Project name -->
+                    <div class="mb-4">
+                        <label for="projectName">{{
+                            t('views.projects.name')
+                        }}</label>
+                        <InputText
+                            id="projectName"
+                            v-model="projectName"
+                            required
+                        />
+                    </div>
+
+                    <!-- Project description -->
+                    <div class="mb-4">
+                        <label for="projectDescription">{{
+                            t('views.projects.description')
+                        }}</label>
+                        <Textarea
+                            id="projectDescription"
+                            v-model="projectDescription"
+                            autoResize
+                            rows="5"
+                            cols="30"
+                        />
+                    </div>
+
+                    <!-- Start date of the project -->
+                    <div class="mb-4">
+                        <label for="projectStartDate">{{
+                            t('views.projects.start_date')
+                        }}</label>
+                        <Calendar
+                            id="projectStartDate"
+                            v-model="projectStartDate"
+                            view="date"
+                            dateFormat="dd-mm-yy"
+                            required
+                        />
+                    </div>
+
+                    <!-- Deadline of the project -->
+                    <div class="mb-4">
+                        <label for="projectDeadline">{{
+                            t('views.projects.deadline')
+                        }}</label>
+                        <Calendar
+                            id="projectDeadline"
+                            v-model="projectDeadline"
+                            view="date"
+                            dateFormat="dd-mm-yy"
+                            required
+                        />
+                    </div>
 
-                <!-- Course form -->
-                <form @submit.prevent="submitCourse">
-                    <!-- Course name -->
+                    <!-- Group size for the project -->
                     <div class="mb-4">
-                        <label for="courseName">{{ t('views.courses.name') }}</label>
-                        <InputText id="courseName" v-model="courseName" required/>
+                        <label for="groupSize">{{
+                            t('views.projects.group_size')
+                        }}</label>
+                        <InputNumber
+                            id="groupSize"
+                            v-model="groupSize"
+                            :min="1"
+                            required
+                        />
                     </div>
 
-                    <!-- Course description -->
+                    <!-- Max score for the project -->
                     <div class="mb-4">
-                        <label for="courseDescription">{{ t('views.courses.description') }}</label>
-                        <Textarea id="courseDescription" v-model="courseDescription" autoResize rows="5" cols="30"/>
+                        <label for="maxScore">{{
+                            t('views.projects.max_score')
+                        }}</label>
+                        <InputNumber
+                            id="maxScore"
+                            v-model="maxScore"
+                            :min="1"
+                            required
+                        />
                     </div>
 
-                    <!-- Course academic year -->
+                    <!-- Visibility of the project -->
                     <div class="mb-4">
-                        <label for="courseYear">{{ t('views.courses.year') }}</label>
-                        <Calendar id="courseYear" v-model="courseYear" view="year" dateFormat="yy" required/>
+                        <label for="visibility">{{
+                            t('views.projects.visibility')
+                        }}</label>
+                        <InputSwitch id="visibility" v-model="visibility" />
                     </div>
-                    
+
+                    <!-- Score visibility of the project -->
+                    <div class="mb-4">
+                        <label for="scoreVisibility">{{
+                            t('views.projects.score_visibility')
+                        }}</label>
+                        <InputSwitch
+                            id="scoreVisibility"
+                            v-model="scoreVisibility"
+                        />
+                    </div>
+
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <Button :label="t('views.courses.create')" type="submit" icon="pi pi-check" iconPos="right" rounded/>
+                        <Button
+                            :label="t('views.projects.create')"
+                            type="submit"
+                            icon="pi pi-check"
+                            iconPos="right"
+                            rounded
+                        />
                     </div>
                 </form>
             </div>
@@ -77,14 +179,14 @@ const submitCourse = async () => {
 </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;
-    }
+/* 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 54be640d095a78809b025f134e3c56bdeeb2c64d Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Mon, 1 Apr 2024 23:01:41 +0200
Subject: [PATCH 3/8] chore: add time selection to deadline

---
 .../src/views/courses/CreateCourseView.vue    | 80 ++++++++++++-------
 .../src/views/projects/CreateProjectView.vue  | 10 ++-
 2 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index 93a519a9..b89722e0 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -1,26 +1,26 @@
 <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 { 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';
+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 { t } = useI18n()
+const { push } = useRouter()
 
 /* Service injection */
-const { createCourse } = useCourses();
+const { createCourse } = useCourses()
 
-const courseName = ref<string>('');
-const courseDescription = ref<string>('');
-const courseYear = ref<Date>(new Date());
+const courseName = ref<string>('')
+const courseDescription = ref<string>('')
+const courseYear = ref<Date>(new Date())
 
 const submitCourse = async (): Promise<void> => {
     // Pass the course data to the service
@@ -29,13 +29,13 @@ const submitCourse = async (): Promise<void> => {
             '', // ID not needed for creation, will be generated by the backend
             courseName.value,
             courseDescription.value,
-            courseYear.value.getFullYear(),
-        ),
-    );
+            courseYear.value.getFullYear()
+        )
+    )
 
     // Redirect to the dashboard overview
-    push({ name: 'dashboard' });
-};
+    push({ name: 'dashboard' })
+}
 </script>
 
 <template>
@@ -49,20 +49,44 @@ const submitCourse = async (): Promise<void> => {
                 <form @submit.prevent="submitCourse">
                     <!-- Course name -->
                     <div class="mb-4">
-                        <label for="courseName">{{ t('views.courses.name') }}</label>
-                        <InputText id="courseName" v-model="courseName" required />
+                        <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" autoResize rows="5" cols="30" />
+                        <label for="courseDescription">{{
+                            t('views.courses.description')
+                        }}</label>
+                        <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" required />
+                        <label for="courseYear">{{
+                            t('views.courses.year')
+                        }}</label>
+                        <Calendar
+                            id="courseYear"
+                            v-model="courseYear"
+                            view="year"
+                            dateFormat="yy"
+                            showIcon
+                            showButtonBar
+                            required
+                        />
                     </div>
 
                     <!-- Submit button -->
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index c37cf411..2506ba5c 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -97,8 +97,11 @@ const submitProject = async (): Promise<void> => {
                         <Calendar
                             id="projectStartDate"
                             v-model="projectStartDate"
-                            view="date"
                             dateFormat="dd-mm-yy"
+                            showTime
+                            hourFormat="24"
+                            showIcon
+                            showButtonBar
                             required
                         />
                     </div>
@@ -111,8 +114,11 @@ const submitProject = async (): Promise<void> => {
                         <Calendar
                             id="projectDeadline"
                             v-model="projectDeadline"
-                            view="date"
                             dateFormat="dd-mm-yy"
+                            showTime
+                            hourFormat="24"
+                            showIcon
+                            showButtonBar
                             required
                         />
                     </div>

From 81f5c4c357ad48eeea5ff94f565be1eb12d1549a Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Wed, 3 Apr 2024 14:36:29 +0200
Subject: [PATCH 4/8] chore: dashboard for every role

---
 .../projects/ProjectCreateButton.vue          | 65 ++++++++++++++
 .../src/views/courses/CreateCourseView.vue    | 88 ++++++-------------
 .../src/views/dashboard/DashboardView.vue     |  6 ++
 .../roles/AssistantDashboardView.vue          | 64 ++++++++++++++
 .../dashboard/roles/TeacherDashboardView.vue  | 71 +++++++++++++++
 .../src/views/projects/CreateProjectView.vue  |  4 +-
 6 files changed, 237 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/projects/ProjectCreateButton.vue
 create mode 100644 frontend/src/views/dashboard/roles/AssistantDashboardView.vue
 create mode 100644 frontend/src/views/dashboard/roles/TeacherDashboardView.vue

diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
new file mode 100644
index 00000000..2e7714ce
--- /dev/null
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { type Course } from '@/types/Course.ts';
+import { PrimeIcons } from 'primevue/api';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+
+/* Composable injections */
+const { t } = useI18n();
+const { push } = useRouter();
+
+/* Props */
+const props = defineProps<{ courses: Course[] }>();
+
+/* Dialog state to select the course you want to create a project for */
+const displayCourseSelection = ref(false);
+
+/* Method to create a project for the selected course */
+const createProjectForCourse = (courseId: string): void => {
+    push({ name: 'project-create', params: { courseId } });
+    displayCourseSelection.value = false;
+};
+</script>
+
+<template>
+    <!-- Button to create a new project -->
+    <Button
+        v-if="props.courses && props.courses.length > 0"
+        :icon="PrimeIcons.PLUS"
+        icon-pos="right"
+        class="custom-button"
+        @click="displayCourseSelection = true" />
+    <!-- Dialog to select the course for the project -->
+    <Dialog
+        v-model:visible="displayCourseSelection"
+        modal
+        :draggable="false"
+        :contentStyle="{ width: '50vw' }"
+        :header="t('views.dashboard.select_course')">
+        <!-- List of courses to select from-->
+        <div v-if="props.courses && props.courses.length > 0">
+            <div v-for="course in props.courses" :key="course.id" class="course-item" @click="createProjectForCourse(course.id)">
+                <span class="course-name">{{ course.name }}</span>
+            </div>
+        </div>
+    </Dialog>
+</template>
+
+<style scoped lang="scss">
+.course-item {
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    transition: background-color 0.3s;
+}
+.course-item:hover {
+    background-color: #f0f0f0;
+}
+.course-name {
+    font-weight: bold;
+}
+</style>
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index b89722e0..d46721d9 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -1,26 +1,26 @@
 <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 { 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'
+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 { t } = useI18n();
+const { push } = useRouter();
 
 /* Service injection */
-const { createCourse } = useCourses()
+const { createCourse } = useCourses();
 
-const courseName = ref<string>('')
-const courseDescription = ref<string>('')
-const courseYear = ref<Date>(new Date())
+const courseName = ref<string>('');
+const courseDescription = ref<string>('');
+const courseYear = ref<Date>(new Date());
 
 const submitCourse = async (): Promise<void> => {
     // Pass the course data to the service
@@ -29,13 +29,13 @@ const submitCourse = async (): Promise<void> => {
             '', // ID not needed for creation, will be generated by the backend
             courseName.value,
             courseDescription.value,
-            courseYear.value.getFullYear()
-        )
-    )
+            courseYear.value.getFullYear(),
+        ),
+    );
 
     // Redirect to the dashboard overview
-    push({ name: 'dashboard' })
-}
+    push({ name: 'dashboard' });
+};
 </script>
 
 <template>
@@ -49,55 +49,25 @@ const submitCourse = async (): Promise<void> => {
                 <form @submit.prevent="submitCourse">
                     <!-- Course name -->
                     <div class="mb-4">
-                        <label for="courseName">{{
-                            t('views.courses.name')
-                        }}</label>
-                        <InputText
-                            id="courseName"
-                            v-model="courseName"
-                            required
-                        />
+                        <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"
-                            autoResize
-                            rows="5"
-                            cols="30"
-                        />
+                        <label for="courseDescription">{{ t('views.courses.description') }}</label>
+                        <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"
-                            showIcon
-                            showButtonBar
-                            required
-                        />
+                        <label for="courseYear">{{ t('views.courses.year') }}</label>
+                        <Calendar id="courseYear" v-model="courseYear" view="year" dateFormat="yy" showIcon required />
                     </div>
 
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <Button
-                            :label="t('views.courses.create')"
-                            type="submit"
-                            icon="pi pi-check"
-                            iconPos="right"
-                            rounded
-                        />
+                        <Button :label="t('views.courses.create')" type="submit" icon="pi pi-check" iconPos="right" rounded />
                     </div>
                 </form>
             </div>
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index a6dc5a87..d3a6855b 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -3,7 +3,11 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 import StudentDashboardView from '@/views/dashboard/roles/StudentDashboardView.vue';
+import TeacherDashboardView from './roles/TeacherDashboardView.vue';
+import AssistantDashboardView from './roles/AssistantDashboardView.vue';
 import { type Student } from '@/types/users/Student';
+import { type Teacher } from '@/types/users/Teacher';
+import { type Assistant } from '@/types/users/Assistant';
 
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());
@@ -12,6 +16,8 @@ const { user } = storeToRefs(useAuthStore());
 <template>
     <BaseLayout>
         <StudentDashboardView v-if="user?.isStudent()" :student="user as Student" />
+        <TeacherDashboardView v-else-if="user?.isTeacher()" :teacher="user as Teacher" />
+        <AssistantDashboardView v-else-if="user?.isAssistant()" :assistant="user as Assistant" />
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
new file mode 100644
index 00000000..75a0ed30
--- /dev/null
+++ b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import ButtonGroup from 'primevue/buttongroup';
+import Title from '@/components/layout/Title.vue';
+import YearSelector from '@/components/YearSelector.vue';
+import CourseList from '@/components/courses/CourseList.vue';
+import ProjectList from '@/components/projects/ProjectList.vue';
+import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
+import { useI18n } from 'vue-i18n';
+import { computed, ref, watch } from 'vue';
+import { useCourses } from '@/composables/services/courses.service.ts';
+import { type Assistant } from '@/types/users/Assistant';
+
+/* Props */
+const props = defineProps<{
+    assistant: Assistant;
+}>();
+
+/* Composable injections */
+const { t } = useI18n();
+const { courses, getCourseByAssistant } = useCourses();
+
+/* State */
+const selectedYear = ref<number>(props.assistant.getAcademicYear());
+
+const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
+
+/* Watchers */
+watch(
+    props.assistant,
+    () => {
+        getCourseByAssistant(props.assistant.id);
+    },
+    {
+        immediate: true,
+    },
+);
+</script>
+
+<template>
+    <!-- Course heading -->
+    <div class="flex justify-content-between align-items-center mb-6">
+        <!-- Course list title -->
+        <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
+        <!-- Course list controls -->
+        <ButtonGroup class="flex align-items-center">
+            <!-- Academic year selector -->
+            <YearSelector :years="assistant.academic_years" v-model="selectedYear" />
+        </ButtonGroup>
+    </div>
+    <!-- Course list body -->
+    <CourseList :courses="filteredCourses" />
+    <!-- Project heading -->
+    <div class="flex justify-content-between align-items-center my-6">
+        <!-- Project list title -->
+        <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+
+        <!-- Add project button -->
+        <ProjectCreateButton :courses="filteredCourses" />
+    </div>
+    <!-- Project list body -->
+    <ProjectList :courses="filteredCourses" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
new file mode 100644
index 00000000..24a52d04
--- /dev/null
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import ButtonGroup from 'primevue/buttongroup';
+import Button from 'primevue/button';
+import Title from '@/components/layout/Title.vue';
+import YearSelector from '@/components/YearSelector.vue';
+import CourseList from '@/components/courses/CourseList.vue';
+import ProjectList from '@/components/projects/ProjectList.vue';
+import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
+import { type Teacher } from '@/types/users/Teacher';
+import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
+import { computed, ref, watch } from 'vue';
+import { useCourses } from '@/composables/services/courses.service.ts';
+
+/* Props */
+const props = defineProps<{
+    teacher: Teacher;
+}>();
+
+/* Composable injections */
+const { t } = useI18n();
+const { courses, getCoursesByTeacher } = useCourses();
+
+/* State */
+const selectedYear = ref<number>(props.teacher.getAcademicYear());
+
+const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
+
+/* Watchers */
+watch(
+    props.teacher,
+    () => {
+        getCoursesByTeacher(props.teacher.id);
+    },
+    {
+        immediate: true,
+    },
+);
+</script>
+
+<template>
+    <!-- Course heading -->
+    <div class="flex justify-content-between align-items-center mb-6">
+        <!-- Course list title -->
+        <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
+        <!-- Course list controls -->
+        <ButtonGroup class="flex align-items-center">
+            <!-- Academic year selector -->
+            <YearSelector :years="teacher.academic_years" v-model="selectedYear" />
+
+            <!-- Create course button -->
+            <RouterLink :to="{ name: 'course-create' }">
+                <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" style="height: 51px; width: 51px" />
+            </RouterLink>
+        </ButtonGroup>
+    </div>
+    <!-- Course list body -->
+    <CourseList :courses="filteredCourses" />
+    <!-- Project heading -->
+    <div class="flex justify-content-between align-items-center my-6">
+        <!-- Project list title -->
+        <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+
+        <!-- Add project button -->
+        <ProjectCreateButton :courses="filteredCourses" />
+    </div>
+    <!-- Project list body -->
+    <ProjectList :courses="filteredCourses" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 2506ba5c..54b52a84 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -98,8 +98,7 @@ const submitProject = async (): Promise<void> => {
                             id="projectStartDate"
                             v-model="projectStartDate"
                             dateFormat="dd-mm-yy"
-                            showTime
-                            hourFormat="24"
+                            :min-date="new Date()"
                             showIcon
                             showButtonBar
                             required
@@ -115,6 +114,7 @@ const submitProject = async (): Promise<void> => {
                             id="projectDeadline"
                             v-model="projectDeadline"
                             dateFormat="dd-mm-yy"
+                            :min-date="projectStartDate"
                             showTime
                             hourFormat="24"
                             showIcon

From dc6614ce3a6d19ae17f10a4926c4cf75056c0daf Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Wed, 3 Apr 2024 17:01:14 +0200
Subject: [PATCH 5/8] chore: start form validation

---
 frontend/package-lock.json                    |  98 +++++++-
 frontend/package.json                         |   5 +-
 frontend/src/assets/lang/en.json              |   4 +
 frontend/src/assets/lang/nl.json              |   4 +
 .../roles/AssistantDashboardView.vue          |   9 +-
 .../dashboard/roles/StudentDashboardView.vue  |  29 +--
 .../dashboard/roles/TeacherDashboardView.vue  |   2 +-
 .../src/views/projects/CreateProjectView.vue  | 225 ++++++++----------
 8 files changed, 221 insertions(+), 155 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cd0a094b..9dc299c9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,8 @@
             "name": "vite-vue-typescript-starter",
             "version": "0.0.0",
             "dependencies": {
+                "@vuelidate/core": "^2.0.3",
+                "@vuelidate/validators": "^2.0.4",
                 "@vueuse/core": "^10.9.0",
                 "axios": "^1.6.8",
                 "js-cookie": "^3.0.5",
@@ -19,7 +21,8 @@
                 "primevue": "^3.50.0",
                 "vue": "^3.4.18",
                 "vue-i18n": "^9.10.2",
-                "vue-router": "^4.3.0"
+                "vue-router": "^4.3.0",
+                "vuelidate": "^0.7.7"
             },
             "devDependencies": {
                 "@types/js-cookie": "^3.0.6",
@@ -1606,6 +1609,90 @@
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
             "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
         },
+        "node_modules/@vuelidate/core": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.3.tgz",
+            "integrity": "sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==",
+            "dependencies": {
+                "vue-demi": "^0.13.11"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^2.0.0 || >=3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vuelidate/core/node_modules/vue-demi": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+            "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vuelidate/validators": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.4.tgz",
+            "integrity": "sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==",
+            "dependencies": {
+                "vue-demi": "^0.13.11"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^2.0.0 || >=3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vuelidate/validators/node_modules/vue-demi": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+            "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@vueuse/core": {
             "version": "10.9.0",
             "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -7237,6 +7324,15 @@
                 "typescript": "*"
             }
         },
+        "node_modules/vuelidate": {
+            "version": "0.7.7",
+            "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.7.tgz",
+            "integrity": "sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==",
+            "engines": {
+                "node": ">= 4.0.0",
+                "npm": ">= 3.0.0"
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b0422179..f46b10ad 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,8 @@
         "lint-fix": "eslint src --ext .ts,.vue --fix"
     },
     "dependencies": {
+        "@vuelidate/core": "^2.0.3",
+        "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^10.9.0",
         "axios": "^1.6.8",
         "js-cookie": "^3.0.5",
@@ -26,7 +28,8 @@
         "primevue": "^3.50.0",
         "vue": "^3.4.18",
         "vue-i18n": "^9.10.2",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "vuelidate": "^0.7.7"
     },
     "devDependencies": {
         "@types/js-cookie": "^3.0.6",
diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 3735fee2..484fcc72 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -94,6 +94,10 @@
             "unknown": "An unknown error has occurred."
         }
     },
+    "validations": {
+        "required": "This field is required",
+        "deadline": "The deadline must be after the start date"
+    },
     "primevue": {
         "startsWith": "Starts with",
         "contains": "Contains",
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 437734f9..a44c3db6 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -119,6 +119,10 @@
             }
         }
     },
+    "validations": {
+        "required": "Dit veld is verplicht",
+        "deadline": "De deadline moet na de startdatum liggen"
+    },
     "primevue": {
         "accept": "Ja",
         "addRule": "Voeg regel toe",
diff --git a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
index 75a0ed30..c7f77bab 100644
--- a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ButtonGroup from 'primevue/buttongroup';
 import Title from '@/components/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseList.vue';
@@ -41,11 +40,9 @@ watch(
     <div class="flex justify-content-between align-items-center mb-6">
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
-        <!-- Course list controls -->
-        <ButtonGroup class="flex align-items-center">
-            <!-- Academic year selector -->
-            <YearSelector :years="assistant.academic_years" v-model="selectedYear" />
-        </ButtonGroup>
+
+        <!-- Academic year selector -->
+        <YearSelector :years="assistant.academic_years" v-model="selectedYear" />
     </div>
     <!-- Course list body -->
     <CourseList :courses="filteredCourses" />
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index e88bfdc8..c5fe9035 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import ButtonGroup from 'primevue/buttongroup';
-import Button from 'primevue/button';
 import Title from '@/components/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
 import { type Student } from '@/types/users/Student.ts';
-import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
-import { User } from '@/types/users/User.ts';
 
 /* Props */
 const props = defineProps<{
@@ -22,11 +18,9 @@ const { t } = useI18n();
 const { courses, getCoursesByStudent } = useCourses();
 
 /* State */
-const selectedYear = ref<number>(User.getAcademicYear());
+const selectedYear = ref<number>(props.student.getAcademicYear());
 
-const filteredCourses = computed(
-    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
-);
+const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
 
 /* Watchers */
 watch(
@@ -45,18 +39,9 @@ watch(
     <div class="flex justify-content-between align-items-center mb-6">
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
-        <!-- Course list controls -->
-        <ButtonGroup class="flex align-items-center">
-            <YearSelector :years="student.academic_years" v-model="selectedYear" />
-            <RouterLink :to="{ name: 'courses' }">
-                <Button
-                    :icon="PrimeIcons.PLUS"
-                    icon-pos="right"
-                    class="custom-button"
-                    style="height: 51px; width: 51px"
-                />
-            </RouterLink>
-        </ButtonGroup>
+
+        <!-- Academic year selector -->
+        <YearSelector :years="student.academic_years" v-model="selectedYear" />
     </div>
     <!-- Course list body -->
     <CourseList :courses="filteredCourses" />
@@ -64,10 +49,6 @@ watch(
     <div class="flex justify-content-between align-items-center my-6">
         <!-- Project list title -->
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
-        <!-- Project list controls -->
-        <ButtonGroup>
-            <YearSelector :years="student.academic_years" v-model="selectedYear" />
-        </ButtonGroup>
     </div>
     <!-- Project list body -->
     <ProjectList :courses="filteredCourses" />
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 24a52d04..8a385361 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -61,7 +61,7 @@ watch(
         <!-- Project list title -->
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
-        <!-- Add project button -->
+        <!-- Create project button -->
         <ProjectCreateButton :courses="filteredCourses" />
     </div>
     <!-- Project list body -->
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 54b52a84..5dbcce8f 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -1,57 +1,85 @@
 <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 { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
-import Button from 'primevue/button'
-import InputNumber from 'primevue/inputnumber'
-import InputSwitch from 'primevue/inputswitch'
-import { Project } from '@/types/Projects'
-import { useProject } from '@/composables/services/project.service'
+import Calendar from 'primevue/calendar';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import { reactive, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+import InputNumber from 'primevue/inputnumber';
+import InputSwitch from 'primevue/inputswitch';
+import { Project } from '@/types/Projects';
+import { useProject } from '@/composables/services/project.service';
+import { required, helpers } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 /* Composable injections */
-const { t } = useI18n()
-const { push } = useRouter()
-const { params } = useRoute()
+const { t } = useI18n();
+const { push } = useRouter();
+const { params } = useRoute();
 
 /* Service injection */
-const { createProject } = useProject()
-
-const projectName = ref<string>('')
-const projectDescription = ref<string>('')
-const projectStartDate = ref<Date>(new Date())
-const projectDeadline = ref<Date>(new Date())
-const groupSize = ref<number>(1)
-const maxScore = ref<number>(10)
-const visibility = ref<boolean>(true)
-const scoreVisibility = ref<boolean>(false)
+const { createProject } = useProject();
+
+/* Form content */
+const form = reactive({
+    name: '',
+    description: '',
+    startDate: new Date(),
+    deadline: new Date(),
+    groupSize: 1,
+    maxScore: 10,
+    visibility: true,
+    scoreVisibility: false,
+});
+
+// Define validation rules for each form field using "computed"
+const rules = computed(() => {
+    return {
+        name: { required: helpers.withMessage(t('validations.required'), required) },
+        startDate: { required: helpers.withMessage(t('validations.required'), required) },
+        deadline: {
+            required: helpers.withMessage(t('validations.required'), required),
+            minDate: helpers.withMessage(t('validations.deadline'), (value: Date) => value > form.startDate),
+        },
+        groupSize: { required: helpers.withMessage(t('validations.required'), required) },
+        maxScore: { required: helpers.withMessage(t('validations.required'), required) },
+    };
+});
+
+// Use the "useVuelidate" function to perform form validation
+const v$ = useVuelidate(rules, form);
 
 const submitProject = async (): Promise<void> => {
-    // Pass the project data to the service
-    await createProject(
-        new Project(
-            '', // ID not needed for creation, will be generated by the backend
-            projectName.value,
-            projectDescription.value,
-            visibility.value,
-            false, // Default not archived
-            false, // Default the groups are not locked
-            projectStartDate.value,
-            projectDeadline.value,
-            maxScore.value,
-            scoreVisibility.value,
-            groupSize.value
-        ),
-        params.courseId as string
-    )
-
-    // Redirect to the dashboard overview
-    push({ name: 'dashboard' })
-}
+    // Validate the form
+    const result = await v$.value.$validate();
+
+    // Only submit the form if the validation was successful
+    if (result) {
+        // Pass the project data to the service
+        await createProject(
+            new Project(
+                '', // ID not needed for creation, will be generated by the backend
+                form.name,
+                form.description,
+                form.visibility,
+                false, // Default not archived
+                false, // Default the groups are not locked
+                form.startDate,
+                form.deadline,
+                form.maxScore,
+                form.scoreVisibility,
+                form.groupSize,
+            ),
+            params.courseId as string,
+        );
+
+        // Redirect to the dashboard overview
+        push({ name: 'dashboard' });
+    }
+};
 </script>
 
 <template>
@@ -65,118 +93,67 @@ const submitProject = async (): Promise<void> => {
                 <form @submit.prevent="submitProject">
                     <!-- Project name -->
                     <div class="mb-4">
-                        <label for="projectName">{{
-                            t('views.projects.name')
-                        }}</label>
-                        <InputText
-                            id="projectName"
-                            v-model="projectName"
-                            required
-                        />
+                        <label for="projectName">{{ t('views.projects.name') }}</label>
+                        <InputText id="projectName" v-model="form.name" />
+                        <span v-if="v$.name.$error" class="p-error">{{ v$.name.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Project description -->
                     <div class="mb-4">
-                        <label for="projectDescription">{{
-                            t('views.projects.description')
-                        }}</label>
-                        <Textarea
-                            id="projectDescription"
-                            v-model="projectDescription"
-                            autoResize
-                            rows="5"
-                            cols="30"
-                        />
+                        <label for="projectDescription">{{ t('views.projects.description') }}</label>
+                        <Textarea id="projectDescription" v-model="form.description" autoResize rows="5" cols="30" />
                     </div>
 
                     <!-- Start date of the project -->
                     <div class="mb-4">
-                        <label for="projectStartDate">{{
-                            t('views.projects.start_date')
-                        }}</label>
-                        <Calendar
-                            id="projectStartDate"
-                            v-model="projectStartDate"
-                            dateFormat="dd-mm-yy"
-                            :min-date="new Date()"
-                            showIcon
-                            showButtonBar
-                            required
-                        />
+                        <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
+                        <Calendar id="projectStartDate" v-model="form.startDate" dateFormat="dd-mm-yy" :min-date="new Date()" showIcon />
+                        <span v-if="v$.startDate.$error" class="p-error">{{ v$.startDate.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Deadline of the project -->
                     <div class="mb-4">
-                        <label for="projectDeadline">{{
-                            t('views.projects.deadline')
-                        }}</label>
+                        <label for="projectDeadline">{{ t('views.projects.deadline') }}</label>
                         <Calendar
                             id="projectDeadline"
-                            v-model="projectDeadline"
+                            v-model="form.deadline"
                             dateFormat="dd-mm-yy"
-                            :min-date="projectStartDate"
+                            :min-date="form.startDate"
                             showTime
                             hourFormat="24"
-                            showIcon
-                            showButtonBar
-                            required
-                        />
+                            showIcon />
+                        <span v-if="v$.deadline.$error" class="p-error">{{ v$.deadline.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Group size for the project -->
                     <div class="mb-4">
-                        <label for="groupSize">{{
-                            t('views.projects.group_size')
-                        }}</label>
-                        <InputNumber
-                            id="groupSize"
-                            v-model="groupSize"
-                            :min="1"
-                            required
-                        />
+                        <label for="groupSize">{{ t('views.projects.group_size') }}</label>
+                        <InputNumber id="groupSize" v-model="form.groupSize" :min="1" />
+                        <span v-if="v$.groupSize.$error" class="p-error">{{ v$.groupSize.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Max score for the project -->
                     <div class="mb-4">
-                        <label for="maxScore">{{
-                            t('views.projects.max_score')
-                        }}</label>
-                        <InputNumber
-                            id="maxScore"
-                            v-model="maxScore"
-                            :min="1"
-                            required
-                        />
+                        <label for="maxScore">{{ t('views.projects.max_score') }}</label>
+                        <InputNumber id="maxScore" v-model="form.maxScore" :min="1" />
+                        <span v-if="v$.maxScore.$error" class="p-error">{{ v$.maxScore.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Visibility of the project -->
                     <div class="mb-4">
-                        <label for="visibility">{{
-                            t('views.projects.visibility')
-                        }}</label>
-                        <InputSwitch id="visibility" v-model="visibility" />
+                        <label for="visibility">{{ t('views.projects.visibility') }}</label>
+                        <InputSwitch id="visibility" v-model="form.visibility" />
                     </div>
 
                     <!-- Score visibility of the project -->
                     <div class="mb-4">
-                        <label for="scoreVisibility">{{
-                            t('views.projects.score_visibility')
-                        }}</label>
-                        <InputSwitch
-                            id="scoreVisibility"
-                            v-model="scoreVisibility"
-                        />
+                        <label for="scoreVisibility">{{ t('views.projects.score_visibility') }}</label>
+                        <InputSwitch id="scoreVisibility" v-model="form.scoreVisibility" />
                     </div>
 
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <Button
-                            :label="t('views.projects.create')"
-                            type="submit"
-                            icon="pi pi-check"
-                            iconPos="right"
-                            rounded
-                        />
+                        <Button :label="t('views.projects.create')" type="submit" icon="pi pi-check" iconPos="right" rounded />
                     </div>
                 </form>
             </div>
@@ -195,4 +172,8 @@ const submitProject = async (): Promise<void> => {
 label {
     margin-bottom: 0.5rem;
 }
+
+.p-error {
+    display: block;
+}
 </style>

From e4d2bbc980be44f6c6bc89aca57dcb46cadf8452 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 4 Apr 2024 18:02:41 +0200
Subject: [PATCH 6/8] chore: create course validation + academic year display

---
 .../src/views/courses/CreateCourseView.vue    | 73 ++++++++++++++-----
 1 file changed, 54 insertions(+), 19 deletions(-)

diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index d46721d9..c5efdbad 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -2,39 +2,65 @@
 import Calendar from 'primevue/calendar';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
-import { ref } from 'vue';
+import { reactive, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
 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';
+import { required, helpers } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 /* Composable injections */
 const { t } = useI18n();
 const { push } = useRouter();
+const { user } = storeToRefs(useAuthStore());
 
 /* Service injection */
 const { createCourse } = useCourses();
 
-const courseName = ref<string>('');
-const courseDescription = ref<string>('');
-const courseYear = ref<Date>(new Date());
+/* Form content */
+const form = reactive({
+    name: '',
+    description: '',
+    year: user.value ? new Date(user.value.getAcademicYear(new Date()), 0, 1) : new Date(),
+});
+
+// Define validation rules for each form field using "computed"
+const rules = computed(() => {
+    return {
+        name: { required: helpers.withMessage(t('validations.required'), required) },
+        year: { required: helpers.withMessage(t('validations.required'), required) },
+    };
+});
+
+// Use the "useVuelidate" function to perform form validation
+const v$ = useVuelidate(rules, form);
 
 const submitCourse = async (): Promise<void> => {
-    // 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' });
+    // Validate the form
+    const result = await v$.value.$validate();
+
+    // Only submit the form if the validation was successful
+    if (result) {
+        console.log(form.year.getFullYear());
+        // Pass the course data to the service
+        await createCourse(
+            new Course(
+                '', // ID not needed for creation, will be generated by the backend
+                form.name,
+                form.description,
+                form.year.getFullYear(),
+            ),
+        );
+
+        // Redirect to the dashboard overview
+        push({ name: 'dashboard' });
+    }
 };
 </script>
 
@@ -50,19 +76,28 @@ const submitCourse = async (): Promise<void> => {
                     <!-- Course name -->
                     <div class="mb-4">
                         <label for="courseName">{{ t('views.courses.name') }}</label>
-                        <InputText id="courseName" v-model="courseName" required />
+                        <InputText id="courseName" v-model="form.name" />
+                        <span v-if="v$.name.$error" class="p-error">{{ v$.name.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Course description -->
                     <div class="mb-4">
                         <label for="courseDescription">{{ t('views.courses.description') }}</label>
-                        <Textarea id="courseDescription" v-model="courseDescription" autoResize rows="5" cols="30" />
+                        <Textarea id="courseDescription" v-model="form.description" 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" showIcon required />
+                        <Calendar id="courseYear" v-model="form.year" view="year" dateFormat="yy" showIcon >
+                            <template #footer>
+                                <div style="text-align: center;">
+                                    {{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}
+                                </div>                            
+                            </template>
+                        </Calendar>
+
+                        <span v-if="v$.year.$error" class="p-error">{{ v$.year.$errors[0].$message }}</span>
                     </div>
 
                     <!-- Submit button -->

From 685777b7d3f942c2d3165ed5e2c4feed2f0bde15 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 4 Apr 2024 18:44:53 +0200
Subject: [PATCH 7/8] chore: error message component

---
 frontend/src/assets/lang/en.json              |  2 +-
 frontend/src/assets/lang/nl.json              |  2 +-
 .../src/components/forms/ErrorMessage.vue     | 14 ++++++++++++++
 .../projects/ProjectCreateButton.vue          |  4 ++--
 .../src/views/courses/CreateCourseView.vue    | 19 ++++++++-----------
 .../src/views/projects/CreateProjectView.vue  | 19 ++++++++-----------
 6 files changed, 34 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/forms/ErrorMessage.vue

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 484fcc72..5a5da5d3 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -49,7 +49,7 @@
             "group_size": "Number of students in a group (1 for an individual project)",
             "max_score": "Maximum score that can be achieved",
             "visibility": "Make project visible to students",
-            "score_visibility": "Make score automatically visible to students when uploaded"
+            "score_visibility": "Make score, when uploaded, automatically visible to students"
         },
         "courses": {
             "create": "Create course",
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index a44c3db6..2e5437d6 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -49,7 +49,7 @@
             "group_size": "Aantal studenten per groep (1 voor individueel project)",
             "max_score": "Maximale te behalen score",
             "visibility": "Project zichtbaar maken voor studenten",
-            "score_visibility": "Maak score automatisch zichtbaar voor studenten wanneer ingevuld"
+            "score_visibility": "Maak score, wanneer ingevuld, automatisch zichtbaar voor studenten"
         },
         "courses": {
           "create": "Creëer vak",
diff --git a/frontend/src/components/forms/ErrorMessage.vue b/frontend/src/components/forms/ErrorMessage.vue
new file mode 100644
index 00000000..349dcb75
--- /dev/null
+++ b/frontend/src/components/forms/ErrorMessage.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/* Props */
+const props = defineProps<{ field: any }>();
+</script>
+
+<template>
+    <span v-if="props.field.$error" class="p-error">{{ props.field.$errors[0].$message }}</span>
+</template>
+
+<style scoped lang="scss">
+.p-error {
+    display: block;
+}
+</style>
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index 2e7714ce..715ca297 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -17,7 +17,7 @@ const props = defineProps<{ courses: Course[] }>();
 /* Dialog state to select the course you want to create a project for */
 const displayCourseSelection = ref(false);
 
-/* Method to create a project for the selected course */
+/* Method to route to the project creation view */
 const createProjectForCourse = (courseId: string): void => {
     push({ name: 'project-create', params: { courseId } });
     displayCourseSelection.value = false;
@@ -32,7 +32,7 @@ const createProjectForCourse = (courseId: string): void => {
         icon-pos="right"
         class="custom-button"
         @click="displayCourseSelection = true" />
-    <!-- Dialog to select the course for the project -->
+    <!-- Dialog to select the course you want to create a project for -->
     <Dialog
         v-model:visible="displayCourseSelection"
         modal
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index c5efdbad..baaadbb2 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -14,6 +14,7 @@ import { Course } from '@/types/Course';
 import { useCourses } from '@/composables/services/courses.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -27,10 +28,10 @@ const { createCourse } = useCourses();
 const form = reactive({
     name: '',
     description: '',
-    year: user.value ? new Date(user.value.getAcademicYear(new Date()), 0, 1) : new Date(),
+    year: user.value !== null && user.value !== undefined ? new Date(user.value.getAcademicYear(new Date()), 0, 1) : new Date(),
 });
 
-// Define validation rules for each form field using "computed"
+// Define validation rules for each form field
 const rules = computed(() => {
     return {
         name: { required: helpers.withMessage(t('validations.required'), required) },
@@ -38,7 +39,7 @@ const rules = computed(() => {
     };
 });
 
-// Use the "useVuelidate" function to perform form validation
+// useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
 const submitCourse = async (): Promise<void> => {
@@ -47,7 +48,6 @@ const submitCourse = async (): Promise<void> => {
 
     // Only submit the form if the validation was successful
     if (result) {
-        console.log(form.year.getFullYear());
         // Pass the course data to the service
         await createCourse(
             new Course(
@@ -77,7 +77,7 @@ const submitCourse = async (): Promise<void> => {
                     <div class="mb-4">
                         <label for="courseName">{{ t('views.courses.name') }}</label>
                         <InputText id="courseName" v-model="form.name" />
-                        <span v-if="v$.name.$error" class="p-error">{{ v$.name.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.name" />
                     </div>
 
                     <!-- Course description -->
@@ -89,15 +89,12 @@ const submitCourse = async (): Promise<void> => {
                     <!-- Course academic year -->
                     <div class="mb-4">
                         <label for="courseYear">{{ t('views.courses.year') }}</label>
-                        <Calendar id="courseYear" v-model="form.year" view="year" dateFormat="yy" showIcon >
+                        <Calendar id="courseYear" v-model="form.year" view="year" dateFormat="yy" showIcon>
                             <template #footer>
-                                <div style="text-align: center;">
-                                    {{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}
-                                </div>                            
+                                <div style="text-align: center">{{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}</div>
                             </template>
                         </Calendar>
-
-                        <span v-if="v$.year.$error" class="p-error">{{ v$.year.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.year" />
                     </div>
 
                     <!-- Submit button -->
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 5dbcce8f..ae778c14 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -14,6 +14,7 @@ import { Project } from '@/types/Projects';
 import { useProject } from '@/composables/services/project.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -35,7 +36,7 @@ const form = reactive({
     scoreVisibility: false,
 });
 
-// Define validation rules for each form field using "computed"
+// Define validation rules for each form field
 const rules = computed(() => {
     return {
         name: { required: helpers.withMessage(t('validations.required'), required) },
@@ -49,7 +50,7 @@ const rules = computed(() => {
     };
 });
 
-// Use the "useVuelidate" function to perform form validation
+// useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
 const submitProject = async (): Promise<void> => {
@@ -95,7 +96,7 @@ const submitProject = async (): Promise<void> => {
                     <div class="mb-4">
                         <label for="projectName">{{ t('views.projects.name') }}</label>
                         <InputText id="projectName" v-model="form.name" />
-                        <span v-if="v$.name.$error" class="p-error">{{ v$.name.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.name" />
                     </div>
 
                     <!-- Project description -->
@@ -108,7 +109,7 @@ const submitProject = async (): Promise<void> => {
                     <div class="mb-4">
                         <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
                         <Calendar id="projectStartDate" v-model="form.startDate" dateFormat="dd-mm-yy" :min-date="new Date()" showIcon />
-                        <span v-if="v$.startDate.$error" class="p-error">{{ v$.startDate.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.startDate" />
                     </div>
 
                     <!-- Deadline of the project -->
@@ -122,21 +123,21 @@ const submitProject = async (): Promise<void> => {
                             showTime
                             hourFormat="24"
                             showIcon />
-                        <span v-if="v$.deadline.$error" class="p-error">{{ v$.deadline.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.deadline" />
                     </div>
 
                     <!-- Group size for the project -->
                     <div class="mb-4">
                         <label for="groupSize">{{ t('views.projects.group_size') }}</label>
                         <InputNumber id="groupSize" v-model="form.groupSize" :min="1" />
-                        <span v-if="v$.groupSize.$error" class="p-error">{{ v$.groupSize.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.groupSize" />
                     </div>
 
                     <!-- Max score for the project -->
                     <div class="mb-4">
                         <label for="maxScore">{{ t('views.projects.max_score') }}</label>
                         <InputNumber id="maxScore" v-model="form.maxScore" :min="1" />
-                        <span v-if="v$.maxScore.$error" class="p-error">{{ v$.maxScore.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.maxScore" />
                     </div>
 
                     <!-- Visibility of the project -->
@@ -172,8 +173,4 @@ const submitProject = async (): Promise<void> => {
 label {
     margin-bottom: 0.5rem;
 }
-
-.p-error {
-    display: block;
-}
 </style>

From 243b030af6ac0e3dd3ef70182799ac7bc6354bb1 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Thu, 4 Apr 2024 20:01:20 +0200
Subject: [PATCH 8/8] chore: merge

---
 frontend/src/assets/lang/nl.json              |   2 +-
 .../projects/ProjectCreateButton.vue          |  13 +-
 frontend/src/router/router.ts                 | 113 +++++++++++-------
 .../src/views/courses/CreateCourseView.vue    |  15 ++-
 .../roles/AssistantDashboardView.vue          |   7 +-
 .../dashboard/roles/StudentDashboardView.vue  |   7 +-
 .../dashboard/roles/TeacherDashboardView.vue  |  14 ++-
 .../src/views/projects/CreateProjectView.vue  |  19 ++-
 8 files changed, 129 insertions(+), 61 deletions(-)

diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 2e5437d6..38c5579c 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -22,7 +22,7 @@
             "courses": "Mijn vakken",
             "projects": "Lopende projecten",
             "no_projects": "Geen projecten gevonden.",
-            "no_courses": "Geen vakken gevonden."
+            "no_courses": "Geen vakken gevonden.",
             "select_course": "Selecteer het vak waarvoor je een project wil maken:"
         },
         "login": {
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index 715ca297..164e5fba 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -31,17 +31,24 @@ const createProjectForCourse = (courseId: string): void => {
         :icon="PrimeIcons.PLUS"
         icon-pos="right"
         class="custom-button"
-        @click="displayCourseSelection = true" />
+        @click="displayCourseSelection = true"
+    />
     <!-- Dialog to select the course you want to create a project for -->
     <Dialog
         v-model:visible="displayCourseSelection"
         modal
         :draggable="false"
         :contentStyle="{ width: '50vw' }"
-        :header="t('views.dashboard.select_course')">
+        :header="t('views.dashboard.select_course')"
+    >
         <!-- List of courses to select from-->
         <div v-if="props.courses && props.courses.length > 0">
-            <div v-for="course in props.courses" :key="course.id" class="course-item" @click="createProjectForCourse(course.id)">
+            <div
+                v-for="course in props.courses"
+                :key="course.id"
+                class="course-item"
+                @click="createProjectForCourse(course.id)"
+            >
                 <span class="course-name">{{ course.name }}</span>
             </div>
         </div>
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 9924d02f..095f2842 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -30,51 +30,78 @@ const routes: RouteRecordRaw[] = [
     { path: '/', component: DashboardView, name: 'dashboard' },
 
     // Courses
-    { path: '/courses', children: [
-        { path: '', component: SearchCourseView, name: 'courses' },
-        { path: 'create', component: CreateCourseView, name: 'course-create' },
-        // Single course  
-        { path: ':courseId', children: [
-            { path: '', component: CourseView, name: 'course' },
-            { path: 'edit', component: Dummy, name: 'course-edit' },
-            // Projects
-            { path: 'projects', children: [
-                { path: '', component: Dummy, name: 'projects' },
-                { path: 'create', component: CreateProjectView, name: 'project-create' },
-                // Single project
-                { path: ':projectId', children: [
-                    { path: '', component: ProjectView, name: 'project'},
-                    { path: 'edit', component: Dummy, name: 'project-edit' },
-                    { path: 'groups', component: Dummy, name: 'project-groups' },
-                    { path: 'submit', component: Dummy, name: 'project-submit' },
-                ]}
-            ]},
-        ]},
-    ]},
+    {
+        path: '/courses',
+        children: [
+            { path: '', component: SearchCourseView, name: 'courses' },
+            { path: 'create', component: CreateCourseView, name: 'course-create' },
+            // Single course
+            {
+                path: ':courseId',
+                children: [
+                    { path: '', component: CourseView, name: 'course' },
+                    { path: 'edit', component: Dummy, name: 'course-edit' },
+                    // Projects
+                    {
+                        path: 'projects',
+                        children: [
+                            { path: '', component: Dummy, name: 'projects' },
+                            { path: 'create', component: CreateProjectView, name: 'project-create' },
+                            // Single project
+                            {
+                                path: ':projectId',
+                                children: [
+                                    { path: '', component: ProjectView, name: 'project' },
+                                    { path: 'edit', component: Dummy, name: 'project-edit' },
+                                    { path: 'groups', component: Dummy, name: 'project-groups' },
+                                    { path: 'submit', component: Dummy, name: 'project-submit' },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
 
     // Calendar
     { path: '/calendar', component: CalendarView, name: 'calendar' },
 
     // Users
-    { path: '/users', children: [
-        { path: ':id', component: Dummy, name: 'user' },
-        { path: 'students', children: [
-            { path: '', component: Dummy, name: 'students' },
-            { path: ':id', component: Dummy, name: 'student' },
-        ]},
-        { path: 'admins', children: [
-            { path: '', component: Dummy, name: 'admins' },
-            { path: ':id', component: Dummy, name: 'admin' },
-        ]},
-        { path: 'teachers', children: [
-            { path: '', component: Dummy, name: 'teachers' },
-            { path: ':id', component: Dummy, name: 'teacher' },
-        ]},
-        { path: 'assistants', children: [
-            { path: '', component: Dummy, name: 'assistants' },
-            { path: ':id', component: Dummy, name: 'assistant' },
-        ]},
-    ]},
+    {
+        path: '/users',
+        children: [
+            { path: ':id', component: Dummy, name: 'user' },
+            {
+                path: 'students',
+                children: [
+                    { path: '', component: Dummy, name: 'students' },
+                    { path: ':id', component: Dummy, name: 'student' },
+                ],
+            },
+            {
+                path: 'admins',
+                children: [
+                    { path: '', component: Dummy, name: 'admins' },
+                    { path: ':id', component: Dummy, name: 'admin' },
+                ],
+            },
+            {
+                path: 'teachers',
+                children: [
+                    { path: '', component: Dummy, name: 'teachers' },
+                    { path: ':id', component: Dummy, name: 'teacher' },
+                ],
+            },
+            {
+                path: 'assistants',
+                children: [
+                    { path: '', component: Dummy, name: 'assistants' },
+                    { path: ':id', component: Dummy, name: 'assistant' },
+                ],
+            },
+        ],
+    },
 
     // Faculties
     { path: '/faculties', component: Dummy, name: 'faculties' },
@@ -85,12 +112,10 @@ const routes: RouteRecordRaw[] = [
     { path: '/notifications/:id', component: Dummy, name: 'notification' },
 
     // Authentication
-    { path: '/auth/', children: [
-        { path: 'login', component: LoginView, name: 'login' },
-    ]},
+    { path: '/auth/', children: [{ path: 'login', component: LoginView, name: 'login' }] },
 
     // Page not found: redirect to dashboard
-    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } }
+    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },
 ];
 
 const router = createRouter({
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index baaadbb2..50f5b7cd 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -15,6 +15,7 @@ import { useCourses } from '@/composables/services/courses.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import ErrorMessage from '@/components/forms/ErrorMessage.vue';
+import { User } from '@/types/users/User.ts';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -28,7 +29,7 @@ const { createCourse } = useCourses();
 const form = reactive({
     name: '',
     description: '',
-    year: user.value !== null && user.value !== undefined ? new Date(user.value.getAcademicYear(new Date()), 0, 1) : new Date(),
+    year: user.value !== null ? new Date(User.getAcademicYear(new Date()), 0, 1) : new Date(),
 });
 
 // Define validation rules for each form field
@@ -91,7 +92,9 @@ const submitCourse = async (): Promise<void> => {
                         <label for="courseYear">{{ t('views.courses.year') }}</label>
                         <Calendar id="courseYear" v-model="form.year" view="year" dateFormat="yy" showIcon>
                             <template #footer>
-                                <div style="text-align: center">{{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}</div>
+                                <div style="text-align: center">
+                                    {{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}
+                                </div>
                             </template>
                         </Calendar>
                         <ErrorMessage :field="v$.year" />
@@ -99,7 +102,13 @@ const submitCourse = async (): Promise<void> => {
 
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <Button :label="t('views.courses.create')" type="submit" icon="pi pi-check" iconPos="right" rounded />
+                        <Button
+                            :label="t('views.courses.create')"
+                            type="submit"
+                            icon="pi pi-check"
+                            iconPos="right"
+                            rounded
+                        />
                     </div>
                 </form>
             </div>
diff --git a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
index c7f77bab..18763b15 100644
--- a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
 import { type Assistant } from '@/types/users/Assistant';
+import { User } from '@/types/users/User.ts';
 
 /* Props */
 const props = defineProps<{
@@ -19,9 +20,11 @@ const { t } = useI18n();
 const { courses, getCourseByAssistant } = useCourses();
 
 /* State */
-const selectedYear = ref<number>(props.assistant.getAcademicYear());
+const selectedYear = ref<number>(User.getAcademicYear());
 
-const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
+const filteredCourses = computed(
+    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
+);
 
 /* Watchers */
 watch(
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index c5fe9035..767c49e3 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -7,6 +7,7 @@ import { type Student } from '@/types/users/Student.ts';
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
+import { User } from '@/types/users/User.ts';
 
 /* Props */
 const props = defineProps<{
@@ -18,9 +19,11 @@ const { t } = useI18n();
 const { courses, getCoursesByStudent } = useCourses();
 
 /* State */
-const selectedYear = ref<number>(props.student.getAcademicYear());
+const selectedYear = ref<number>(User.getAcademicYear());
 
-const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
+const filteredCourses = computed(
+    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
+);
 
 /* Watchers */
 watch(
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 8a385361..1d4d342e 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -11,6 +11,7 @@ import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
+import { User } from '@/types/users/User.ts';
 
 /* Props */
 const props = defineProps<{
@@ -22,9 +23,11 @@ const { t } = useI18n();
 const { courses, getCoursesByTeacher } = useCourses();
 
 /* State */
-const selectedYear = ref<number>(props.teacher.getAcademicYear());
+const selectedYear = ref<number>(User.getAcademicYear());
 
-const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
+const filteredCourses = computed(
+    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
+);
 
 /* Watchers */
 watch(
@@ -50,7 +53,12 @@ watch(
 
             <!-- Create course button -->
             <RouterLink :to="{ name: 'course-create' }">
-                <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" style="height: 51px; width: 51px" />
+                <Button
+                    :icon="PrimeIcons.PLUS"
+                    icon-pos="right"
+                    class="custom-button"
+                    style="height: 51px; width: 51px"
+                />
             </RouterLink>
         </ButtonGroup>
     </div>
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index ae778c14..13f83181 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -108,7 +108,13 @@ const submitProject = async (): Promise<void> => {
                     <!-- Start date of the project -->
                     <div class="mb-4">
                         <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
-                        <Calendar id="projectStartDate" v-model="form.startDate" dateFormat="dd-mm-yy" :min-date="new Date()" showIcon />
+                        <Calendar
+                            id="projectStartDate"
+                            v-model="form.startDate"
+                            dateFormat="dd-mm-yy"
+                            :min-date="new Date()"
+                            showIcon
+                        />
                         <ErrorMessage :field="v$.startDate" />
                     </div>
 
@@ -122,7 +128,8 @@ const submitProject = async (): Promise<void> => {
                             :min-date="form.startDate"
                             showTime
                             hourFormat="24"
-                            showIcon />
+                            showIcon
+                        />
                         <ErrorMessage :field="v$.deadline" />
                     </div>
 
@@ -154,7 +161,13 @@ const submitProject = async (): Promise<void> => {
 
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <Button :label="t('views.projects.create')" type="submit" icon="pi pi-check" iconPos="right" rounded />
+                        <Button
+                            :label="t('views.projects.create')"
+                            type="submit"
+                            icon="pi pi-check"
+                            iconPos="right"
+                            rounded
+                        />
                     </div>
                 </form>
             </div>