Project view

backend/api/fixtures/groups.yaml

@@ -17,4 +17,7 @@
   fields:
     project: 1
     score: 8
-    students: []
+    students:
+      - '1'
+      - '2'
+      - '3'

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

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: [email protected]
+    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:

frontend/src/assets/lang/en.json

@@ -22,6 +22,11 @@
         },
         "calendar": {
             "title": "Calendar"
+        },
+        "projects": {
+          "deadline": "Deadline",
+          "submissionStatus": "Indienstatus",
+          "groupMembers": "Group members"
         }
     },
     "composables": {

frontend/src/assets/lang/nl.json

@@ -33,6 +33,11 @@
         },
         "calendar": {
             "title": "Kalender"
+        },
+        "projects": {
+            "deadline": "Deadline",
+            "submissionStatus": "Indienstatus",
+            "groupMembers": "Groepsleden"
         }
     },
     "composables": {

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>

frontend/src/components/projects/ProjectCard.vue

@@ -0,0 +1,83 @@
+<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';
+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
+}>();
+
+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();
+
+</script>
+
+<template>
+  <Card class="border-round project-card">
+    <template #header>
+      <h2 class="text-primary m-0 text-2xl">{{ project.name }} - {{project.course.name}}</h2>
+    </template>
+    <template #content>
+      <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.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>
+
+<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>

frontend/src/composables/services/groups.service.ts

@@ -17,6 +17,11 @@ export function useGroup() {
         await getList<Group>(endpoint, groups, Group.fromJSON);
     }
 
+    async function getGroupsByStudent(student_id: string) {
+        const endpoint = endpoints.groups.byStudent.replace('{student_id}', student_id);
+        await getList<Group>(endpoint, groups, Group.fromJSON);
+    }
+
     async function createGroup(group_data: Group, group_id: string) {
         const endpoint = endpoints.groups.byProject.replace('{group_id}', group_id);
         await create<Group>(endpoint,
@@ -36,6 +41,7 @@ export function useGroup() {
         group,
         getGroupByID,
         getGroupsByProject,
+        getGroupsByStudent,
 
         createGroup,
         deleteGroup

frontend/src/composables/services/project.service.ts

@@ -57,7 +57,7 @@ export function useProject() {
 
     async function createProject(project_data: Project, course_id: string) {
         const endpoint = endpoints.projects.byCourse.replace('{course_id}', course_id);
-        await create<Project>(endpoint, 
+        await create<Project>(endpoint,
             {
                 name: project_data.name,
                 description: project_data.description,

frontend/src/composables/services/students.service.ts

@@ -19,12 +19,12 @@ export function useStudents() {
         await getList<Student>(endpoint, students, Student.fromJSON);
     }
 
-    async function getStudentsbyCourse(course_id: string) {
+    async function getStudentsByCourse(course_id: string) {
         const endpoint = endpoints.students.byCourse.replace('{course_id}', course_id);
         await getList<Student>(endpoint, students, Student.fromJSON);
     }
 
-    async function getStudentsbyGroup(group_id: string) {
+    async function getStudentsByGroup(group_id: string) {
         const endpoint = endpoints.students.byGroup.replace('{group_id}', group_id);
         await getList<Student>(endpoint, students, Student.fromJSON);
     }
@@ -51,7 +51,7 @@ export function useStudents() {
 
     async function createStudent(student_data: Student) {
         const endpoint = endpoints.students.index;
-        await create<Student>(endpoint, 
+        await create<Student>(endpoint,
             {
                 email:student_data.email,
                 first_name:student_data.first_name,
@@ -73,8 +73,8 @@ export function useStudents() {
 
         getStudentByID,
         getStudents,
-        getStudentsbyCourse,
-        getStudentsbyGroup,
+        getStudentsByCourse,
+        getStudentsByGroup,
 
         createStudent,
         deleteStudent,

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}',

frontend/src/router/router.ts

@@ -1,3 +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 Dummy from '@/components/Dummy.vue';
@@ -7,6 +11,7 @@ import VerifyView from '@/views/authentication/VerifyView.vue';
 import { RouteRecordRaw, createWebHistory, createRouter } from 'vue-router';
 import {AuthenticationGuard} from '@/router/guards/authentication.guard.ts';
 import {LogoutGuard} from '@/router/guards/logout.guard.ts';
+import ProjectView from "@/views/projects/ProjectView.vue";
 
 const routes: RouteRecordRaw[] = [
 
@@ -33,7 +38,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' },
@@ -74,6 +79,11 @@ const routes: RouteRecordRaw[] = [
     { path: '/notifications', component: Dummy, name: 'notifications' },
     { path: '/notifications/:id', component: Dummy, name: 'notification' },
 
+    // Authentication
+    { path: '/auth/', children: [
+        { path: 'login', component: LoginView, name: 'login' },
+    ]},
+
     // Page not found: redirect to dashboard
     { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } }
 ];

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
+        );
+    }
 }