From 3fb6873b999afbcd342a97da6ff0e1dfbeb19c48 Mon Sep 17 00:00:00 2001
From: lander <landermaes@outlook.com>
Date: Sat, 23 Mar 2024 15:15:31 +0100
Subject: [PATCH 1/9] chore: projectview init

---
 .../src/components/projects/ProjectCard.vue   | 45 ++++++++++++++++++
 .../composables/services/project.service.ts   | 46 ++++---------------
 frontend/src/router/routes.ts                 |  4 ++
 .../src/views/dashboard/DashboardView.vue     | 16 ++++++-
 frontend/src/views/projects/ProjectView.vue   | 17 +++++++
 5 files changed, 91 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/projects/ProjectCard.vue
 create mode 100644 frontend/src/views/projects/ProjectView.vue

diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
new file mode 100644
index 00000000..7e7dab1e
--- /dev/null
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import {Project} from '@/types/Project.ts';
+import {PrimeIcons} from 'primevue/api';
+import {useI18n} from 'vue-i18n';
+
+/* Component props */
+defineProps<{
+  project: Project
+}>();
+
+/* Composable injections */
+const { t } = useI18n();
+
+/* Default image thumbnails */
+const images = Object.keys(import.meta.glob('@/assets/img/placeholders/*', {
+  eager: true
+}));
+</script>
+
+<template>
+  <Card class="border-round">
+    <template #header>
+      <img class="w-full h-12rem border-round-top" style="object-fit: cover; margin-bottom: -4px;" :alt="project.description" :src="images[project.name.length % images.length]"/>
+    </template>
+    <template #title>
+      <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
+    </template>
+    <template #subtitle>
+      <span class="text-sm">{{ project.deadline }}</span>
+    </template>
+    <template #content>
+      {{ project.description }}
+    </template>
+    <template #footer>
+      <RouterLink :to="{ name: 'project-view', params: { id: project.id } }">
+        <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined/>
+      </RouterLink>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 3ce4d2da..bd9e0606 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -1,53 +1,27 @@
 import {Project} from '@/types/Projects.ts';
 import {ref} from 'vue';
-import {endpoints} from '@/config/endpoints.ts';
 import axios from 'axios';
-import { get, getList } from '@/composables/services/helpers.ts';
-
+import {endpoints} from '@/config/endpoints.ts';
 
-export function useProject() {
-    const projects = ref<Project[]|null>(null);
-    const project = ref<Project|null>(null);
+export function useCourses() {
+    const courses = ref<Project[]|null>(null);
+    const course = ref<Project|null>(null);
 
-    async function getProjectByID(id: number) {
+    async function getCourseByID(id: number) {
         const endpoint = endpoints.projects.retrieve.replace('{id}', id.toString());
-        get<Project>(endpoint, project, Project.fromJSON);
-        console.log(project)
-    }
-
-    async function getProjectsByCourse(course_id: number) {
-        const endpoint = endpoints.projects.byCourse.replace('{course_id}', course_id.toString());
-        getList<Project>(endpoint, projects, Project.fromJSON);
-        console.log(projects.value ? projects.value.map((project, index) => `Project ${index + 1}: ${JSON.stringify(project)}`) : 'Projects is null');
-    }
-
-    async function getProjectsByCourseAndDeadline(course_id: number, deadlineDate: Date ) {
-
-        const endpoint = endpoints.projects.byCourse.replace('{course_id}', course_id.toString());
 
         axios.get(endpoint).then(response => {
-            const allProjects = response.data.map((projectData: Project) => Project.fromJSON(projectData));
-
-            // Filter projects based on the deadline date
-            const projectsWithMatchingDeadline = allProjects.filter((project: Project) => {
-                const projectDeadlineDate = project.deadline;
-                return projectDeadlineDate.toDateString() === deadlineDate.toDateString();
-            });
-
-            // Update the projects ref with the filtered projects
-            projects.value = projectsWithMatchingDeadline;
+            course.value = Project.fromJSON(response.data);
         }).catch(error => {
             console.log(error.data);
         });
 
-        console.log(projects.value ? projects.value.map((project, index) => `Project ${index + 1}: ${JSON.stringify(project)}`) : 'Projects is null');
+        console.log(Project)
     }
 
     return {
-        projects,
-        project,
-        getProjectByID,
-        getProjectsByCourse,
-        getProjectsByCourseAndDeadline
+        courses,
+        course,
+        getCourseByID
     };
 }
\ No newline at end of file
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 2d406745..2baddaa4 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -1,5 +1,6 @@
 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';
 
@@ -11,5 +12,8 @@ export const routes: RouteRecordRaw[] = [
     { 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/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 7cd0fe90..263f74a9 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -8,6 +8,8 @@ import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
 import {onMounted } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
+import {Project} from "@/composables/services/project.service.ts";
+import {ref} from 'vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -21,6 +23,16 @@ onMounted(async () => {
   await getCoursesByStudent(1);  // TODO make this the id of the logged in user
 });
 
+/**
+ * TODO straks, dit hieronder zoals hierboven doen
+ */
+const projects = ref([
+  new Project(1, 'No Life Simulator', '-100 hours of your life', 'Computationele Biologie',
+      '31-12-2024'),
+  new Project(1, 'No Friends Simulator', '-10 good friends', 'Movile and Broadband Access Networks',
+      '31-12-2024'),
+]);
+
 </script>
 
 <template>
@@ -53,7 +65,9 @@ onMounted(async () => {
         </div>
         <!-- Project list body -->
         <div class="grid align-items-stretch">
-
+            <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="course in courses">
+                <ProjectCard class="h-100" :course="course"/>
+            </div>
         </div>
     </BaseLayout>
 </template>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
new file mode 100644
index 00000000..edf0b271
--- /dev/null
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {onMounted} from 'vue';
+import {useRoute} from 'vue-router';
+
+const { } = useRoute();
+onMounted(() => {
+});
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file

From b67c7ed65d2d0a6099f4f1a9b2ef6216ada7897c Mon Sep 17 00:00:00 2001
From: Lander Maes <landermaes@outlook.com>
Date: Sat, 23 Mar 2024 16:27:43 +0100
Subject: [PATCH 2/9] chore: fetching projects in dashboard

---
 .../src/components/projects/ProjectCard.vue   |  2 +-
 .../src/views/dashboard/DashboardView.vue     | 22 ++++++-------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 7e7dab1e..b64658c4 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Card from 'primevue/card';
 import Button from 'primevue/button';
-import {Project} from '@/types/Project.ts';
+import {Project} from '@/types/Projects.ts';
 import {PrimeIcons} from 'primevue/api';
 import {useI18n} from 'vue-i18n';
 
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 263f74a9..eb29c875 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -2,37 +2,28 @@
 import ButtonGroup from 'primevue/buttongroup';
 import Button from 'primevue/button';
 import CourseCard from '@/components/courses/CourseCard.vue';
+//import ProjectCard from '@/components/projects/ProjectCard.vue';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/Title.vue';
 import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
 import {onMounted } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
-import {Project} from "@/composables/services/project.service.ts";
-import {ref} from 'vue';
+//import { useProject } from '@/composables/services/project.service.ts';
 
 /* Composable injections */
 const { t } = useI18n();
 
 /* Service injection */
 const { courses, getCoursesByStudent } = useCourses();
-
+//const { projects, getProjectsByStudent } = useProject();
 
 onMounted(async () => {
   console.log("fetching courses");
   await getCoursesByStudent(1);  // TODO make this the id of the logged in user
+  //await getProjectsByStudent(1);
 });
 
-/**
- * TODO straks, dit hieronder zoals hierboven doen
- */
-const projects = ref([
-  new Project(1, 'No Life Simulator', '-100 hours of your life', 'Computationele Biologie',
-      '31-12-2024'),
-  new Project(1, 'No Friends Simulator', '-10 good friends', 'Movile and Broadband Access Networks',
-      '31-12-2024'),
-]);
-
 </script>
 
 <template>
@@ -65,9 +56,10 @@ const projects = ref([
         </div>
         <!-- Project list body -->
         <div class="grid align-items-stretch">
-            <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="course in courses">
-                <ProjectCard class="h-100" :course="course"/>
+           <!-- <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in projects">
+                <ProjectCard class="h-100" :project="project"/>
             </div>
+            -->
         </div>
     </BaseLayout>
 </template>

From 9a165dc5a34dc8064b9c48c41783a7c39aab9bb6 Mon Sep 17 00:00:00 2001
From: Lander Maes <landermaes@outlook.com>
Date: Sun, 24 Mar 2024 15:28:06 +0100
Subject: [PATCH 3/9] chore: fetching projects in dashboard 2

---
 frontend/package-lock.json                     |  9 +++++++++
 frontend/package.json                          |  1 +
 frontend/src/views/dashboard/DashboardView.vue | 12 ++++++------
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7afc4f25..3be14847 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.8",
+        "moment": "^2.30.1",
         "pinia": "^2.1.7",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
@@ -2707,6 +2708,14 @@
         "ufo": "^1.3.2"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 38850775..c963c290 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
+    "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index eb29c875..037b704b 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -2,26 +2,26 @@
 import ButtonGroup from 'primevue/buttongroup';
 import Button from 'primevue/button';
 import CourseCard from '@/components/courses/CourseCard.vue';
-//import ProjectCard from '@/components/projects/ProjectCard.vue';
+import ProjectCard from '@/components/projects/ProjectCard.vue';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/Title.vue';
 import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
 import {onMounted } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
-//import { useProject } from '@/composables/services/project.service.ts';
+import { useProject } from '@/composables/services/project.service.ts';
 
 /* Composable injections */
 const { t } = useI18n();
 
 /* Service injection */
 const { courses, getCoursesByStudent } = useCourses();
-//const { projects, getProjectsByStudent } = useProject();
+const { projects, getProjectsByStudent } = useProject();
 
 onMounted(async () => {
   console.log("fetching courses");
   await getCoursesByStudent(1);  // TODO make this the id of the logged in user
-  //await getProjectsByStudent(1);
+  await getProjectsByStudent('1');
 });
 
 </script>
@@ -56,10 +56,10 @@ onMounted(async () => {
         </div>
         <!-- Project list body -->
         <div class="grid align-items-stretch">
-           <!-- <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in projects">
+           <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in projects">
                 <ProjectCard class="h-100" :project="project"/>
             </div>
-            -->
+
         </div>
     </BaseLayout>
 </template>

From 8c782e252680f59e50c1104d79c81d15f8de3ef7 Mon Sep 17 00:00:00 2001
From: Lander Maes <landermaes@outlook.com>
Date: Sun, 24 Mar 2024 17:49:00 +0100
Subject: [PATCH 4/9] chore: fetching projects with course context

---
 .../src/components/projects/ProjectCard.vue   |  9 ++---
 .../composables/services/project.service.ts   | 17 ++++++++-
 frontend/src/router/routes.ts                 | 36 +++++++++----------
 frontend/src/types/Projects.ts                | 17 +++++++++
 .../src/views/dashboard/DashboardView.vue     |  6 ++--
 5 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index b64658c4..79b55caa 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -6,17 +6,20 @@ import {PrimeIcons} from 'primevue/api';
 import {useI18n} from 'vue-i18n';
 
 /* Component props */
-defineProps<{
+const props = defineProps<{
   project: Project
 }>();
 
 /* Composable injections */
 const { t } = useI18n();
 
+console.log(props.project)
+
 /* Default image thumbnails */
 const images = Object.keys(import.meta.glob('@/assets/img/placeholders/*', {
   eager: true
 }));
+
 </script>
 
 <template>
@@ -34,9 +37,7 @@ const images = Object.keys(import.meta.glob('@/assets/img/placeholders/*', {
       {{ project.description }}
     </template>
     <template #footer>
-      <RouterLink :to="{ name: 'project-view', params: { id: project.id } }">
-        <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined/>
-      </RouterLink>
+
     </template>
   </Card>
 </template>
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 97737eae..947ac3f8 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -37,6 +37,20 @@ export function useProject() {
         console.log(projects.value ? projects.value.map((project, index) => `Project ${index + 1}: ${JSON.stringify(project)}`) : 'Projects is null');
     }
 
+    async function getProjectWithCourseContext(student_id: string) {
+        const endpoint = endpoints.courses.byStudent.replace('{student_id}', student_id);
+        const courses = ref<Course[]|null>(null);
+        await getList<Course>(endpoint, courses, Course.fromJSON, toast);
+
+        for (const course of courses.value ? courses.value : []) {
+            const courseEndpoint = endpoints.projects.byCourse.replace('{course_id}', course.id.toString());
+            axios.get(courseEndpoint).then(response => {
+                const allProjectsFromCourse = response.data.map((projectData: any) => Project.fromJSONWithCourse(projectData, course));
+                projects.value = [...(projects.value || []), ...allProjectsFromCourse];
+            });
+        }
+    }
+
     async function getProjectsByCourseAndDeadline(course_id: number, deadlineDate: Date ) {
 
         const endpoint = endpoints.projects.byCourse.replace('{course_id}', course_id.toString());
@@ -65,6 +79,7 @@ export function useProject() {
         getProjectByID,
         getProjectsByCourse,
         getProjectsByCourseAndDeadline,
-        getProjectsByStudent
+        getProjectsByStudent,
+        getProjectWithCourseContext
     };
 }
\ No newline at end of file
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 2baddaa4..92f33dc4 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -1,19 +1,19 @@
-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' } }
+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/types/Projects.ts b/frontend/src/types/Projects.ts
index 7e72cbd9..a295808d 100644
--- a/frontend/src/types/Projects.ts
+++ b/frontend/src/types/Projects.ts
@@ -51,4 +51,21 @@ export class Project {
             project.group_size
         );
     }
+
+    static fromJSONWithCourse(project: Project, course: Course): Project {
+        return new Project(
+            project.id,
+            project.name,
+            project.description,
+            project.visible,
+            project.archived,
+            project.locked_groups,
+            new Date(project.start_date),
+            new Date(project.deadline),
+            project.max_score,
+            project.score_visible,
+            project.group_size,
+            project.course = course
+        );
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 037b704b..8112b1f0 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -7,7 +7,7 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Title from '@/components/Title.vue';
 import {useI18n} from 'vue-i18n';
 import {PrimeIcons} from 'primevue/api';
-import {onMounted } from 'vue';
+import {onMounted} from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
 import { useProject } from '@/composables/services/project.service.ts';
 
@@ -16,12 +16,12 @@ const { t } = useI18n();
 
 /* Service injection */
 const { courses, getCoursesByStudent } = useCourses();
-const { projects, getProjectsByStudent } = useProject();
+const { projects, getProjectWithCourseContext } = useProject();
 
 onMounted(async () => {
   console.log("fetching courses");
   await getCoursesByStudent(1);  // TODO make this the id of the logged in user
-  await getProjectsByStudent('1');
+  await getProjectWithCourseContext('1');
 });
 
 </script>

From 5f51f293602bc30e32dc18a9a12dc1ecfc6e3fb7 Mon Sep 17 00:00:00 2001
From: lander <landermaes@outlook.com>
Date: Sun, 24 Mar 2024 23:58:05 +0100
Subject: [PATCH 5/9] chore: add ProjectCard.vue

---
 frontend/src/assets/lang/en.json              |  4 ++
 frontend/src/assets/lang/nl.json              |  4 ++
 .../src/components/projects/ProjectCard.vue   | 67 ++++++++++++++-----
 frontend/src/router/router.ts                 |  3 +-
 frontend/src/types/Projects.ts                |  2 +-
 frontend/src/views/projects/ProjectView.vue   |  2 +-
 6 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index a790cc13..4304ec6c 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -22,6 +22,10 @@
         },
         "calendar": {
             "title": "Calendar"
+        },
+        "projects": {
+          "deadline": "Deadline",
+          "submissionStatus": "Indienstatus"
         }
     },
     "components": {
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 1ff23e63..4d4e522f 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -31,6 +31,10 @@
         },
         "calendar": {
             "title": "Kalender"
+        },
+        "projects": {
+            "deadline": "Deadline",
+            "submissionStatus": "Indienstatus"
         }
     },
     "components": {
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 79b55caa..c59c6347 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -4,43 +4,76 @@ import Button from 'primevue/button';
 import {Project} from '@/types/Projects.ts';
 import {PrimeIcons} from 'primevue/api';
 import {useI18n} from 'vue-i18n';
+import {computed} from "vue";
 
 /* Component props */
 const props = defineProps<{
   project: Project
 }>();
 
+const formattedDeadline = computed(() => {
+  // changes deadline format to dd/mm.yyyy
+  const date = new Date(props.project.deadline);
+  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+});
+
 /* Composable injections */
 const { t } = useI18n();
 
-console.log(props.project)
-
-/* Default image thumbnails */
-const images = Object.keys(import.meta.glob('@/assets/img/placeholders/*', {
-  eager: true
-}));
-
 </script>
 
 <template>
-  <Card class="border-round">
+  <Card class="border-round project-card">
     <template #header>
-      <img class="w-full h-12rem border-round-top" style="object-fit: cover; margin-bottom: -4px;" :alt="project.description" :src="images[project.name.length % images.length]"/>
-    </template>
-    <template #title>
-      <h2 class="text-primary m-0 text-2xl">{{ project.name }}</h2>
-    </template>
-    <template #subtitle>
-      <span class="text-sm">{{ project.deadline }}</span>
+      <h2 class="text-primary m-0 text-2xl">{{ project.name }} - {{project.course.name}}</h2>
     </template>
     <template #content>
-      {{ project.description }}
+      <div>
+        <i :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']" class="mr-2"></i>
+        {{t('views.projects.deadline')}}: {{ formattedDeadline }}<br>
+      </div>
+      <div>
+        <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
+        {{t('views.projects.submissionStatus')}}: {{ project.submissions[project.submissions.length - 1].structure_checks_passed }}
+      </div>
     </template>
     <template #footer>
-
+      <RouterLink :to="{ name: 'project', params: { courseId: project.course.id, projectId: project.id } }">
+        <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined/>
+      </RouterLink>
     </template>
   </Card>
 </template>
 
+// TODO fix ewout om mooit te maken
 <style lang="scss">
+@import '@/assets/scss/theme/theme.scss';
+.icon-color {
+  color: $primaryColor;
+  font-size: 18px;
+}
+
+.border-round {
+  border-radius: $borderRadius;
+}
+
+.project-card {
+  border-style: solid;
+  border-width: 2px;
+  border-color: $primaryLightColor;
+
+  .p-card-body {
+    background: white;
+  }
+  .p-card-header {
+    padding: $cardBodyPadding;
+    background: $primaryLightColor;
+  }
+  .p-card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 02500cb8..b08936c3 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -8,6 +8,7 @@ import CourseView from '@/views/courses/CourseView.vue';
 import Dummy from '@/components/Dummy.vue';
 import LoginView from '@/views/authentication/LoginView.vue';
 import CalendarView from '@/views/calendar/CalendarView.vue';
+import ProjectView from "@/views/projects/ProjectView.vue";
 
 const routes: RouteRecordRaw[] = [
     { path: '/', component: DashboardView, name: 'dashboard' },
@@ -26,7 +27,7 @@ const routes: RouteRecordRaw[] = [
                 { path: 'create', component: Dummy, name: 'project-create' },
                 // Single project
                 { path: ':projectId', children: [
-                    { path: '', component: Dummy, name: 'project' },
+                    { 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' },
diff --git a/frontend/src/types/Projects.ts b/frontend/src/types/Projects.ts
index a295808d..47774266 100644
--- a/frontend/src/types/Projects.ts
+++ b/frontend/src/types/Projects.ts
@@ -27,7 +27,7 @@ export class Project {
         public structure_checks: Structure_check[] = [],
         public extra_checks: Extra_check[] = [],
         public groups: Group[] = [],
-        public submissions: Submission = new Submission(0,0,new Date(), false), //TODO check
+        public submissions: Submission[] = [new Submission(0,0,new Date(), false)], //TODO check
     ) {
     }
 
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index edf0b271..77a3d623 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -9,7 +9,7 @@ onMounted(() => {
 </script>
 
 <template>
-
+  <h1>Project View</h1>
 </template>
 
 <style scoped lang="scss">

From 73ed0c6d4b78965608138883721698ba5e44a2c1 Mon Sep 17 00:00:00 2001
From: lander <landermaes@outlook.com>
Date: Mon, 25 Mar 2024 13:02:22 +0100
Subject: [PATCH 6/9] chore: add ProjectDetails in ProjectView.vue #168

---
 frontend/src/router/router.ts               |  2 +-
 frontend/src/views/projects/ProjectView.vue | 48 ++++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index b08936c3..cc114101 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
                 { path: 'create', component: Dummy, name: 'project-create' },
                 // Single project
                 { path: ':projectId', children: [
-                    { path: '', component: ProjectView, name: 'project' },
+                    { 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' },
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index 77a3d623..52e506fc 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -1,15 +1,53 @@
 <script setup lang="ts">
-import {onMounted} from 'vue';
-import {useRoute} from 'vue-router';
+import BaseLayout from "@/components/layout/BaseLayout.vue";
+import {useI18n} from 'vue-i18n';
+import {Project} from "@/types/Projects.ts";
+import {onMounted} from "vue";
+import {useProject} from "@/composables/services/project.service.ts";
+import {useRoute} from "vue-router";
+import Title from "@/components/Title.vue";
+import Skeleton from "primevue/skeleton";
 
-const { } = useRoute();
-onMounted(() => {
+/* Composable injections */
+const { t } = useI18n();
+/* Service injections */
+const route = useRoute();
+const { project, getProjectByID } = useProject();
+
+/* Component props */
+const props = defineProps<{
+  projectId: {
+    type: number
+  }
+}>();
+
+onMounted(async () => {
+  const projectId = route.params.projectId;
+  console.log(projectId);
+  await getProjectByID(parseInt(projectId as string));
 });
 
 </script>
 
 <template>
-  <h1>Project View</h1>
+  <BaseLayout>
+    <div class="grid">
+      <div class="col-12 md:col-6">
+        <div>
+          <Title v-if="project">
+            {{ project.name }}
+          </Title>
+          <Skeleton class="mb-4" height="3rem" width="30rem" v-else/>
+        </div>
+        <div>
+          <p v-if="project">
+            {{ project.description }}
+          </p>
+          <Skeleton height="10rem" v-else/>
+        </div>
+      </div>
+    </div>
+  </BaseLayout>
 </template>
 
 <style scoped lang="scss">

From 4d3cd5f56213a68acb96b813bd21d34c10014514 Mon Sep 17 00:00:00 2001
From: lander <landermaes@outlook.com>
Date: Wed, 27 Mar 2024 15:44:47 +0100
Subject: [PATCH 7/9] chore: mergeconflict in #182

---
 .../src/components/projects/ProjectCard.vue   |  7 ++++++-
 frontend/src/router/router.ts                 |  1 -
 frontend/src/router/routes.ts                 | 19 -------------------
 .../src/views/dashboard/DashboardView.vue     |  4 +++-
 4 files changed, 9 insertions(+), 22 deletions(-)
 delete mode 100644 frontend/src/router/routes.ts

diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index c59c6347..8d5256d2 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -6,6 +6,11 @@ import {PrimeIcons} from 'primevue/api';
 import {useI18n} from 'vue-i18n';
 import {computed} from "vue";
 
+/**
+ * TODO
+ *  - Submission check depends on more than just structure checks
+ */
+
 /* Component props */
 const props = defineProps<{
   project: Project
@@ -34,7 +39,7 @@ const { t } = useI18n();
       </div>
       <div>
         <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
-        {{t('views.projects.submissionStatus')}}: {{ project.submissions[project.submissions.length - 1].structure_checks_passed }}
+        {{t('views.projects.submissionStatus')}}: {{ project.submissions.structure_checks_passed }}
       </div>
     </template>
     <template #footer>
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 4c437db1..ab90e414 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw, createWebHistory, createRouter } from 'vue-router';
 
 // import { useUserStore } from '@/stores/userStore';
 // TODO: after pinia setup is done
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/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 01569a89..437b5457 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -9,8 +9,10 @@ import { PrimeIcons } from 'primevue/api';
 import { onMounted } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
 import { useStudents } from '@/composables/services/students.service.ts';
-import { Course } from '@/types/Course.ts';
 import {ref} from 'vue';
+import {Project} from "@/types/Projects.ts";
+import {useProject} from "@/composables/services/project.service.ts";
+import ProjectCard from "@/components/projects/ProjectCard.vue";
 
 /* Composable injections */
 const { t } = useI18n();

From af544109d8968e8354c02897ef0cde060b70eed0 Mon Sep 17 00:00:00 2001
From: lander <landermaes@outlook.com>
Date: Thu, 28 Mar 2024 12:25:02 +0100
Subject: [PATCH 8/9] chore: Implemented GroupCard.vue closes #178

---
 backend/api/fixtures/groups.yaml              |  5 +-
 backend/api/fixtures/students.yaml            |  9 ++-
 backend/authentication/fixtures/users.yaml    | 12 ++++
 frontend/src/assets/lang/en.json              |  3 +-
 frontend/src/assets/lang/nl.json              |  3 +-
 .../src/components/projects/GroupCard.vue     | 60 +++++++++++++++++++
 .../composables/services/groups.service.ts    | 10 +++-
 .../composables/services/project.service.ts   |  2 +-
 .../composables/services/students.service.ts  | 10 ++--
 frontend/src/config/endpoints.ts              |  3 +-
 frontend/src/types/Group.ts                   | 28 ++++++---
 frontend/src/views/projects/ProjectView.vue   | 43 +++++++++----
 12 files changed, 154 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/components/projects/GroupCard.vue

diff --git a/backend/api/fixtures/groups.yaml b/backend/api/fixtures/groups.yaml
index 40657f3f..8d2a18b7 100644
--- a/backend/api/fixtures/groups.yaml
+++ b/backend/api/fixtures/groups.yaml
@@ -17,4 +17,7 @@
   fields:
     project: 1
     score: 8
-    students: []
+    students:
+      - '1'
+      - '2'
+      - '3'
diff --git a/backend/api/fixtures/students.yaml b/backend/api/fixtures/students.yaml
index ac61cbd7..be45618b 100644
--- a/backend/api/fixtures/students.yaml
+++ b/backend/api/fixtures/students.yaml
@@ -8,4 +8,11 @@
   pk: '2'
   fields:
     student_id: null
-    courses: []
+    courses:
+      - 1
+- model: api.student
+  pk: '3'
+  fields:
+    student_id: null
+    courses:
+      - 1
\ No newline at end of file
diff --git a/backend/authentication/fixtures/users.yaml b/backend/authentication/fixtures/users.yaml
index 3e6a5801..f0edbaa9 100644
--- a/backend/authentication/fixtures/users.yaml
+++ b/backend/authentication/fixtures/users.yaml
@@ -46,6 +46,18 @@
     create_time: 2024-02-29 20:35:45.691565+00:00
     faculties:
     - Geneeskunde_Gezondheidswetenschappen
+- model: authentication.user
+  pk: '3'
+  fields:
+    last_login: null
+    username: somtin
+    email: somtin.somtin@gmail.com
+    first_name: somtin
+    last_name: somtin
+    last_enrolled: 2023
+    create_time: 2024-03-27 20:35:45.691565+00:00
+    faculties:
+      - Geneeskunde_Gezondheidswetenschappen
 - model: authentication.user
   pk: '235'
   fields:
diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 2b8a4a18..d46828d7 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -25,7 +25,8 @@
         },
         "projects": {
           "deadline": "Deadline",
-          "submissionStatus": "Indienstatus"
+          "submissionStatus": "Indienstatus",
+          "groupMembers": "Group members"
         }
     },
     "composables": {
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 1ed9a083..a19ead69 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -36,7 +36,8 @@
         },
         "projects": {
             "deadline": "Deadline",
-            "submissionStatus": "Indienstatus"
+            "submissionStatus": "Indienstatus",
+            "groupMembers": "Groepsleden"
         }
     },
     "composables": {
diff --git a/frontend/src/components/projects/GroupCard.vue b/frontend/src/components/projects/GroupCard.vue
new file mode 100644
index 00000000..9839f093
--- /dev/null
+++ b/frontend/src/components/projects/GroupCard.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {useStudents} from "@/composables/services/students.service.ts";
+import {onMounted} from "vue";
+import {useI18n} from "vue-i18n";
+
+/**
+ * This card lists all users in the group of a project
+ */
+const { students, getStudentsByGroup } = useStudents();
+const { t } = useI18n();
+
+/* Component props */
+
+const props = defineProps<{
+  groupId: string;
+}>();
+
+onMounted(async () => {
+  await getStudentsByGroup(props.groupId, t);
+});
+
+</script>
+
+<template>
+  <div>
+    <div class="groupcard">
+      <h2>{{ t('views.projects.groupMembers') }}</h2>
+      <div>
+        <p v-for="student in students" :key="student.id">
+          {{ student.first_name }} {{ student.last_name }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '@/assets/scss/theme/theme.scss';
+  .groupcard {
+    background-color: white;
+    border-radius: $borderRadius;
+    padding: 1.5rem;
+    margin: 1rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+    div {
+      p {
+        color: $textSecondaryColor;
+        margin-bottom: 0.5rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      /* Zorgt ervoor dat er geen lijn onder de laatste naam staat */
+      p:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/frontend/src/composables/services/groups.service.ts b/frontend/src/composables/services/groups.service.ts
index b2cb3d93..01822a7c 100644
--- a/frontend/src/composables/services/groups.service.ts
+++ b/frontend/src/composables/services/groups.service.ts
@@ -12,12 +12,17 @@ export function useGroup() {
 
     async function getGroupByID(id: string, t: ComposerTranslation) {
         const endpoint = endpoints.groups.retrieve.replace('{id}', id);
-        get<Group>(endpoint, group, Group.fromJSON, toast, t);
+        await get<Group>(endpoint, group, Group.fromJSONFullObject, toast, t);
     }
 
     async function getGroupsByProject(project_id: string, t: ComposerTranslation) {
         const endpoint = endpoints.groups.byProject.replace('{project_id}', project_id);
-        getList<Group>(endpoint, groups, Group.fromJSON, toast, t);
+        await getList<Group>(endpoint, groups, Group.fromJSON, toast, t);
+    }
+
+    async function getGroupsByStudent(student_id: string, t: ComposerTranslation) {
+        const endpoint = endpoints.groups.byStudent.replace('{student_id}', student_id);
+        await getList<Group>(endpoint, groups, Group.fromJSON, toast, t);
     }
 
     async function createGroup(group_data: any, group_id: string, t: ComposerTranslation) {
@@ -35,6 +40,7 @@ export function useGroup() {
         group,
         getGroupByID,
         getGroupsByProject,
+        getGroupsByStudent,
 
         createGroup,
         deleteGroup
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 74c72f23..256da136 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -15,7 +15,7 @@ export function useProject() {
 
     async function getProjectByID(id: string, t: ComposerTranslation) {
         const endpoint = endpoints.projects.retrieve.replace('{id}', id);
-        get<Project>(endpoint, project, Project.fromJSON, toast, t);
+        await get<Project>(endpoint, project, Project.fromJSON, toast, t);
     }
 
     async function getProjectsByCourse(course_id: string, t: ComposerTranslation) {
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index dbc85720..c8571fd8 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -22,14 +22,14 @@ export function useStudents() {
         getList<Student>(endpoint, students, Student.fromJSON, toast, t);
     }
 
-    async function getStudentsbyCourse(course_id: string, t: ComposerTranslation) {
+    async function getStudentsByCourse(course_id: string, t: ComposerTranslation) {
         const endpoint = endpoints.students.byCourse.replace('{course_id}', course_id);
         getList<Student>(endpoint, students, Student.fromJSON, toast, t);
     }
 
-    async function getStudentsbyGroup(group_id: string, t: ComposerTranslation) {
+    async function getStudentsByGroup(group_id: string, t: ComposerTranslation) {
         const endpoint = endpoints.students.byGroup.replace('{group_id}', group_id);
-        getList<Student>(endpoint, students, Student.fromJSON, toast, t);
+        await getList<Student>(endpoint, students, Student.fromJSON, toast, t);
     }
 
     async function studentJoinCourse(course_id: string, student_id: string, t: ComposerTranslation) {
@@ -70,8 +70,8 @@ export function useStudents() {
 
         getStudentByID,
         getStudents,
-        getStudentsbyCourse,
-        getStudentsbyGroup,
+        getStudentsByCourse,
+        getStudentsByGroup,
 
         createStudent,
         deleteStudent,
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index 08706931..f7f26cf1 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -41,7 +41,8 @@ export const endpoints = {
     },
     groups: {
         retrieve: '/api/groups/{id}/',
-        byProject: '/api/projects/{project_id}/groups/'
+        byProject: '/api/projects/{project_id}/groups/',
+        byStudent: '/api/students/{student_id}/groups/'
     },
     projects: {
         retrieve: '/api/projects/{id}',
diff --git a/frontend/src/types/Group.ts b/frontend/src/types/Group.ts
index 883446c3..ba50509f 100644
--- a/frontend/src/types/Group.ts
+++ b/frontend/src/types/Group.ts
@@ -1,6 +1,6 @@
-import { Project } from "./Projects";
-import { Student } from "./Student";
-import { Submission } from "./Submission";
+import {Project} from "./Projects";
+import {Student} from "./Student";
+import {Submission} from "./Submission";
 
 export class Group {
     constructor(
@@ -17,10 +17,20 @@ export class Group {
      *
      * @param group
      */
-        static fromJSON(group: Group): Group {
-            return new Group(
-                group.id,
-                group.score
-            );
-        }
+    static fromJSON(group: Group): Group {
+        return new Group(
+            group.id,
+            group.score
+        );
+    }
+
+    static fromJSONFullObject(group: Group): Group {
+        return new Group(
+            group.id,
+            group.score,
+            group.projects,
+            group.students,
+            group.submissions
+        );
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index 52e506fc..99b16038 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -1,30 +1,46 @@
 <script setup lang="ts">
 import BaseLayout from "@/components/layout/BaseLayout.vue";
 import {useI18n} from 'vue-i18n';
-import {Project} from "@/types/Projects.ts";
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import {useProject} from "@/composables/services/project.service.ts";
 import {useRoute} from "vue-router";
 import Title from "@/components/Title.vue";
 import Skeleton from "primevue/skeleton";
+import GroupCard from "@/components/projects/GroupCard.vue";
+import {useGroup} from "@/composables/services/groups.service.ts";
+import {Group} from "@/types/Group.ts";
+
+/**
+ * Todo change all static id's to user.id
+ */
 
 /* Composable injections */
 const { t } = useI18n();
 /* Service injections */
 const route = useRoute();
 const { project, getProjectByID } = useProject();
-
-/* Component props */
-const props = defineProps<{
-  projectId: {
-    type: number
-  }
-}>();
+const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
+const finalGroup = ref<Group>(new Group("-1"));
 
 onMounted(async () => {
   const projectId = route.params.projectId;
-  console.log(projectId);
-  await getProjectByID(parseInt(projectId as string));
+  await getProjectByID(projectId as string, t);
+  console.log("fetching groups")
+  // Get id group from project by comparing the users groups and the project groups
+  await getGroupsByProject(projectId as string, t);
+  const projectGroups = groups.value;
+  // get all groups from the user
+  await getGroupsByStudent("1", t);
+  for (const group of groups.value ?? []) {
+    const isCommonGroup = projectGroups?.some(projectGroup => projectGroup.id === group.id);
+
+    if (isCommonGroup) {
+      finalGroup.value = group;
+      break;
+    }
+  }
+  console.log('laatste id')
+  console.log(finalGroup.value.id);
 });
 
 </script>
@@ -32,7 +48,7 @@ onMounted(async () => {
 <template>
   <BaseLayout>
     <div class="grid">
-      <div class="col-12 md:col-6">
+      <div class="col-12 md:col-8">
         <div>
           <Title v-if="project">
             {{ project.name }}
@@ -46,6 +62,9 @@ onMounted(async () => {
           <Skeleton height="10rem" v-else/>
         </div>
       </div>
+      <div class="col-12 md:col-4">
+        <GroupCard v-if="finalGroup.id !== '-1'" :group-id="finalGroup.id"></GroupCard>
+      </div>
     </div>
   </BaseLayout>
 </template>

From 02bb33716c7f49772580c82dbaa4a59396b45982 Mon Sep 17 00:00:00 2001
From: lander <landermaes@outlook.com>
Date: Fri, 29 Mar 2024 14:43:08 +0100
Subject: [PATCH 9/9] chore: little fix for #182

---
 frontend/src/components/projects/ProjectCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 8d5256d2..bb4a8fe2 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -50,7 +50,6 @@ const { t } = useI18n();
   </Card>
 </template>
 
-// TODO fix ewout om mooit te maken
 <style lang="scss">
 @import '@/assets/scss/theme/theme.scss';
 .icon-color {