From aa351fe5b16e223c4b1adce46892825ec3f4dc6e Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 23 Mar 2024 21:47:20 +0100
Subject: [PATCH 1/7] chore: filter on deadline

---
 frontend/src/views/calendar/CalendarView.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index fdf4cd4d..0fc423f1 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -2,6 +2,7 @@
 import moment from 'moment';
 import 'moment/dist/locale/nl';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
+import ProjectLink from '@/components/projects/ProjectLink.vue';
 import Calendar from 'primevue/calendar';
 import Title from '@/components/Title.vue';
 import { useProject } from '@/composables/services/project.service';
@@ -24,14 +25,22 @@ const { projects, getProjectsByStudent } = useProject();
 
 // TODO: Set correct user ID
 const loadProjects = async () => {
-    await getProjectsByStudent("1");
+    await getProjectsByStudent("000210394313");
 };
 
+const projectsWithDeadline = computed(() => {
+    // Filter the projects with the selected date
+    return projects.value?.filter(project => {
+        return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
+    });
+});
+
 /* Load the projects when the component is mounted */
 onMounted(() => {
     loadProjects();
 });
 
+
 </script>
 
 <template>
@@ -50,9 +59,12 @@ onMounted(() => {
                 <!-- Selected date on the calendar -->
                 <Title class="mb-6">{{ formattedDate }}</Title>
 
-                <!-- List of projects -->
-                <div v-for="project in projects" :key="project.id">
-                    <p>{{ project.name }}</p>
+                <!-- Listing projects with given deadline -->
+                <div>
+                    <div class="col-12" v-for="project in projectsWithDeadline" :key="project.id">
+                        <!-- Each ProjectLink card -->
+                        <ProjectLink class="h-100 mb-2" :project="project"/>
+                    </div>
                 </div>
             </div>
         </div>

From 3abc5fa427c695c4871ebe1b0b404afa81792512 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 23 Mar 2024 21:54:48 +0100
Subject: [PATCH 2/7] chore: fix project link data

---
 frontend/src/components/projects/ProjectLink.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/projects/ProjectLink.vue b/frontend/src/components/projects/ProjectLink.vue
index e84a0240..2b13e458 100644
--- a/frontend/src/components/projects/ProjectLink.vue
+++ b/frontend/src/components/projects/ProjectLink.vue
@@ -15,13 +15,17 @@ defineProps<{
 <template>
     <Card class="border-round">
         <template #title>
-            <h2 class="text-primary m-0 text-2xl">{{ project.course }}</h2>
+            <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
+        </template>
+        <template #subtitle>
+            <span class="text-sm">{{ project.course.name }}</span>
         </template>
         <template #content>
             {{ project.description }}
         </template>
         <template #footer>
-            <RouterLink :to="{ name: 'project-view', params: { id: project.id } }">
+            <!-- <RouterLink :to="{ name: 'project-view', params: { id: project.id } }"> -->
+            <RouterLink :to="{ name: 'dashboard' }">
                 <Button :icon="PrimeIcons.ARROW_RIGHT" icon-pos="right" outlined/>
             </RouterLink>
         </template>

From c588eb3a95b92570701a041181a1a9cba74f81ac Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 23 Mar 2024 22:26:31 +0100
Subject: [PATCH 3/7] chore: refactor cards

---
 .../src/components/projects/ProjectLink.vue   | 26 ++++++++-----------
 frontend/src/views/calendar/CalendarView.vue  |  6 ++---
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/projects/ProjectLink.vue b/frontend/src/components/projects/ProjectLink.vue
index 2b13e458..1b281820 100644
--- a/frontend/src/components/projects/ProjectLink.vue
+++ b/frontend/src/components/projects/ProjectLink.vue
@@ -13,23 +13,19 @@ defineProps<{
 </script>
 
 <template>
+  <RouterLink :to="{ name: 'dashboard' }" class="card-link">
     <Card class="border-round">
-        <template #title>
-            <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
-        </template>
-        <template #subtitle>
-            <span class="text-sm">{{ project.course.name }}</span>
-        </template>
-        <template #content>
-            {{ project.description }}
-        </template>
-        <template #footer>
-            <!-- <RouterLink :to="{ name: 'project-view', params: { id: project.id } }"> -->
-            <RouterLink :to="{ name: 'dashboard' }">
-                <Button :icon="PrimeIcons.ARROW_RIGHT" icon-pos="right" outlined/>
-            </RouterLink>
-        </template>
+      <template #title>
+        <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
+      </template>
+      <template #subtitle>
+        <span class="text-sm">{{ project.course.name }}</span>
+      </template>
+      <template #content>
+        <div>{{ project.description }}</div>
+      </template>
     </Card>
+  </RouterLink>
 </template>
 
 <style lang="scss">
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 0fc423f1..6e7b4ea5 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -11,6 +11,8 @@ import {useI18n} from 'vue-i18n';
 import { ref } from 'vue';
 
 const { t, locale } = useI18n();
+const { projects, getProjectsByStudent } = useProject();
+
 
 /* Keeps track of the selected date */
 const selectedDate = ref(new Date());
@@ -21,13 +23,12 @@ const formattedDate = computed(() => {
 });
 
 /* Load the projects of the current student */
-const { projects, getProjectsByStudent } = useProject();
-
 // TODO: Set correct user ID
 const loadProjects = async () => {
     await getProjectsByStudent("000210394313");
 };
 
+/* Filter the projects on the date selected on the calendar */
 const projectsWithDeadline = computed(() => {
     // Filter the projects with the selected date
     return projects.value?.filter(project => {
@@ -40,7 +41,6 @@ onMounted(() => {
     loadProjects();
 });
 
-
 </script>
 
 <template>

From 9c7eded4c3963fd16d12363c5b17fc5df2f4984b Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 24 Mar 2024 11:05:11 +0100
Subject: [PATCH 4/7] chore: add todo

---
 frontend/src/components/projects/ProjectLink.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/projects/ProjectLink.vue b/frontend/src/components/projects/ProjectLink.vue
index 1b281820..14e8b07e 100644
--- a/frontend/src/components/projects/ProjectLink.vue
+++ b/frontend/src/components/projects/ProjectLink.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import Card from 'primevue/card';
-import Button from 'primevue/button';
 import {Project} from '@/types/Projects.ts';
-import {PrimeIcons} from 'primevue/api';
 
 /* Component props */
 defineProps<{
@@ -13,6 +11,7 @@ defineProps<{
 </script>
 
 <template>
+  <!-- TODO: Fix link to the correct project details -->
   <RouterLink :to="{ name: 'dashboard' }" class="card-link">
     <Card class="border-round">
       <template #title>

From 34c62a04c740f0d83a4ed5146015092e97279155 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 24 Mar 2024 17:59:23 +0100
Subject: [PATCH 5/7] chore: use project with course context service

---
 .../src/components/projects/ProjectLink.vue   |  5 ++---
 frontend/src/router/routes.ts                 | 19 -------------------
 frontend/src/views/calendar/CalendarView.vue  |  4 ++--
 3 files changed, 4 insertions(+), 24 deletions(-)
 delete mode 100644 frontend/src/router/routes.ts

diff --git a/frontend/src/components/projects/ProjectLink.vue b/frontend/src/components/projects/ProjectLink.vue
index 14e8b07e..a222b92c 100644
--- a/frontend/src/components/projects/ProjectLink.vue
+++ b/frontend/src/components/projects/ProjectLink.vue
@@ -11,8 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <!-- TODO: Fix link to the correct project details -->
-  <RouterLink :to="{ name: 'dashboard' }" class="card-link">
+  <RouterLink :to="{ name: 'project',  params: { courseId: project.course.id, projectId: project.id } }">
     <Card class="border-round">
       <template #title>
         <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
@@ -24,7 +23,7 @@ defineProps<{
         <div>{{ project.description }}</div>
       </template>
     </Card>
-  </RouterLink>
+ </RouterLink>
 </template>
 
 <style lang="scss">
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
deleted file mode 100644
index 92f33dc4..00000000
--- a/frontend/src/router/routes.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import DashboardView from '@/views/dashboard/DashboardView.vue';
-import CourseView from '@/views/courses/CourseView.vue';
-import ProjectView from '@/views/projects/ProjectView.vue';
-import LoginView from '@/views/authentication/LoginView.vue';
-import {RouteRecordRaw} from 'vue-router';
-
-export const routes: RouteRecordRaw[] = [
-    { path: '/auth/', children: [
-        { path: 'login', component: LoginView, name: 'login' },
-    ]},
-    { path: '/', component: DashboardView, name: 'dashboard' },
-    { path: '/courses/', children: [
-        { path: ':id', component: CourseView, name: 'course-view' }
-    ]},
-    { path: '/projects/', children: [
-            { path: ':id', component: ProjectView, name: 'project-view' }
-    ]},
-    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } }
-];
\ No newline at end of file
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 6e7b4ea5..4069de31 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -11,7 +11,7 @@ import {useI18n} from 'vue-i18n';
 import { ref } from 'vue';
 
 const { t, locale } = useI18n();
-const { projects, getProjectsByStudent } = useProject();
+const { projects, getProjectWithCourseContext } = useProject();
 
 
 /* Keeps track of the selected date */
@@ -25,7 +25,7 @@ const formattedDate = computed(() => {
 /* Load the projects of the current student */
 // TODO: Set correct user ID
 const loadProjects = async () => {
-    await getProjectsByStudent("000210394313");
+    await getProjectWithCourseContext("000210394313");
 };
 
 /* Filter the projects on the date selected on the calendar */

From 615cf10345454a6f40a0f2389a4695d175eb98e2 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 18:38:11 +0100
Subject: [PATCH 6/7] chore: update usage of service + using real user id

---
 frontend/src/views/calendar/CalendarView.vue | 42 +++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index c05b84ec..a35ce51e 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -4,33 +4,55 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import ProjectLink from '@/components/projects/ProjectLink.vue';
 import Calendar from 'primevue/calendar';
 import Title from '@/components/layout/Title.vue';
-import { useProject } from '@/composables/services/project.service';
+import {useProject} from '@/composables/services/project.service';
+import {useCourses} from '@/composables/services/courses.service';
 import { computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import {useI18n} from 'vue-i18n';
+import {ref} from 'vue';
+import {useAuthStore} from '@/store/authentication.store.ts';
+import {Project} from "@/types/Projects.ts";
 
+/* Composable injections */
 const { t, locale } = useI18n();
-const { projects, getProjectWithCourseContext } = useProject();
 
-
-/* Keeps track of the selected date */
+/* Component state */
+const allProjects = ref<Project[]>([]);
 const selectedDate = ref(new Date());
 
+/* Service injection */
+const { user } = useAuthStore();
+const { courses, getCoursesByStudent } = useCourses();
+const { projects, getProjectsByCourse } = useProject();
+
 const formattedDate = computed(() => {
     // Format the selected date using moment.js
     return moment(selectedDate.value).locale(locale.value).format('DD MMMM YYYY');
 });
 
-/* Load the projects of the current student */
-// TODO: Set correct user ID
 const loadProjects = async () => {
-    await getProjectWithCourseContext("000210394313");
+    if (user !== null) {
+        // Load the courses of the student
+        await getCoursesByStudent(user.id);
+
+        // Load the projects of the courses
+        for (const course of courses.value ?? []) {
+            await getProjectsByCourse(course.id);
+
+            // Assign the course to the project
+            projects.value?.forEach(project => {
+                project.course = course;
+            });
+
+            // Concatenate the projects
+            allProjects.value = allProjects.value.concat(projects.value ?? []);
+        }
+    }
 };
 
 /* Filter the projects on the date selected on the calendar */
 const projectsWithDeadline = computed(() => {
     // Filter the projects with the selected date
-    return projects.value?.filter(project => {
+    return allProjects.value?.filter(project => {
         return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
     });
 });

From 5b943b4d8b8f93c83fed1f7b8ebcfd46a5a158ca Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 30 Mar 2024 18:51:02 +0100
Subject: [PATCH 7/7] chore: refactor using Lander's project cards

---
 .../src/components/projects/ProjectLink.vue   | 30 -------------------
 frontend/src/views/calendar/CalendarView.vue  |  9 +++---
 2 files changed, 4 insertions(+), 35 deletions(-)
 delete mode 100644 frontend/src/components/projects/ProjectLink.vue

diff --git a/frontend/src/components/projects/ProjectLink.vue b/frontend/src/components/projects/ProjectLink.vue
deleted file mode 100644
index a222b92c..00000000
--- a/frontend/src/components/projects/ProjectLink.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import Card from 'primevue/card';
-import {Project} from '@/types/Projects.ts';
-
-/* Component props */
-defineProps<{
-    project: Project
-}>();
-
-
-</script>
-
-<template>
-  <RouterLink :to="{ name: 'project',  params: { courseId: project.course.id, projectId: project.id } }">
-    <Card class="border-round">
-      <template #title>
-        <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
-      </template>
-      <template #subtitle>
-        <span class="text-sm">{{ project.course.name }}</span>
-      </template>
-      <template #content>
-        <div>{{ project.description }}</div>
-      </template>
-    </Card>
- </RouterLink>
-</template>
-
-<style lang="scss">
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index a35ce51e..7c4c7ae6 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import moment from 'moment';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import ProjectLink from '@/components/projects/ProjectLink.vue';
+import ProjectCard from '@/components/projects/ProjectCard.vue';
 import Calendar from 'primevue/calendar';
 import Title from '@/components/layout/Title.vue';
 import {useProject} from '@/composables/services/project.service';
@@ -81,10 +81,9 @@ onMounted(async () => {
                 <Title class="mb-6">{{ formattedDate }}</Title>
 
                 <!-- Listing projects with given deadline -->
-                <div>
-                    <div class="col-12" v-for="project in projectsWithDeadline" :key="project.id">
-                        <!-- Each ProjectLink card -->
-                        <ProjectLink class="h-100 mb-2" :project="project"/>
+                <div class="grid grid-cols-2 gap-4">
+                    <div v-for="project in projectsWithDeadline" :key="project.id">
+                        <ProjectCard class="h-100" :project="project"/>
                     </div>
                 </div>
             </div>