From f8c61cc5d43ec838e35bed41558dab17a14b62f5 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Wed, 3 Apr 2024 00:05:21 +0200
Subject: [PATCH] chore: abstracted the dashboard as example for future views

---
 frontend/src/components/YearSelector.vue      |  11 +-
 .../src/components/projects/GroupCard.vue     |   2 +-
 .../src/components/projects/ProjectCard.vue   |   8 +-
 .../src/components/projects/ProjectList.vue   | 124 +++++++++---------
 .../composables/services/assistant.service.ts |   4 +-
 .../composables/services/students.service.ts  |   4 +-
 .../composables/services/teachers.service.ts  |   4 +-
 frontend/src/store/authentication.store.ts    |   5 +-
 frontend/src/types/users/Student.ts           |   2 +-
 frontend/src/types/users/User.ts              |  26 ++++
 .../views/courses/roles/StudentCourseView.vue |  11 ++
 .../views/courses/roles/TeacherCourseView.vue |  11 ++
 .../src/views/dashboard/DashboardView.vue     | 122 +----------------
 .../dashboard/roles/StudentDashboardView.vue  |  74 +++++++++++
 frontend/src/views/projects/ProjectView.vue   |  12 +-
 15 files changed, 217 insertions(+), 203 deletions(-)
 create mode 100644 frontend/src/views/courses/roles/StudentCourseView.vue
 create mode 100644 frontend/src/views/courses/roles/TeacherCourseView.vue
 create mode 100644 frontend/src/views/dashboard/roles/StudentDashboardView.vue

diff --git a/frontend/src/components/YearSelector.vue b/frontend/src/components/YearSelector.vue
index dd878234..205b15b6 100644
--- a/frontend/src/components/YearSelector.vue
+++ b/frontend/src/components/YearSelector.vue
@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import Dropdown from 'primevue/dropdown';
 import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
 
 /* Composable injections */
 const { t } = useI18n();
 
 /* Props */
-defineProps<{ years: string[] }>();
+const props = defineProps<{ years: number[] }>();
+
+/* State */
+const years = computed(() =>
+    props.years.map((year) => ({
+        label: `${year} - ${year + 1}`,
+        value: year
+    }))
+);
 
 /* Models */
 const year = defineModel();
diff --git a/frontend/src/components/projects/GroupCard.vue b/frontend/src/components/projects/GroupCard.vue
index 7b9c306c..2b0a418c 100644
--- a/frontend/src/components/projects/GroupCard.vue
+++ b/frontend/src/components/projects/GroupCard.vue
@@ -2,7 +2,7 @@
 import { useStudents } from '@/composables/services/students.service.ts';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Group } from '@/types/Group.ts';
+import { type Group } from '@/types/Group.ts';
 
 /* Props */
 const props = defineProps<{
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 747c3207..bc0ef609 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -6,7 +6,7 @@ import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import moment from 'moment';
-import { Course } from '@/types/Course.ts';
+import { type Course } from '@/types/Course.ts';
 
 /**
  * TODO
@@ -20,7 +20,7 @@ const props = defineProps<{
 }>();
 
 const formattedDeadline = computed(() => {
-    return moment(props.project.deadline).format("DD MMMM YYYY")
+    return moment(props.project.deadline).format('DD MMMM YYYY');
 });
 
 /* Composable injections */
@@ -30,9 +30,7 @@ const { t } = useI18n();
 <template>
     <Card class="border-round project-card">
         <template #header>
-            <h2 class="text-primary m-0 text-2xl">
-                <span class="pi pi-book text-xl mr-2"/> {{ course.name }}
-            </h2>
+            <h2 class="text-primary m-0 text-2xl"><span class="pi pi-book text-xl mr-2" /> {{ course.name }}</h2>
         </template>
         <template #subtitle>
             {{ project.name }}
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 469b686a..aa8ec771 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -1,62 +1,62 @@
-<script setup lang="ts">
-import { Course } from '@/types/Course.ts';
-import { watch } from 'vue';
-import { useProject } from '@/composables/services/project.service.ts';
-import ProjectCard from '@/components/projects/ProjectCard.vue';
-import { useI18n } from 'vue-i18n';
-
-/* Props */
-const props = withDefaults(defineProps<{
-    courses: Course[];
-}>(), {
-    courses: []
-});
-
-/* Composables */
-const { t } = useI18n();
-const { projects, getProjectsByCourse } = useProject();
-
-watch(
-    () => props.courses,
-    async (courses: Course[]) => {
-        for (const course of courses) {
-            // Fetch the projects for the course
-            await getProjectsByCourse(course.id);
-
-            // Assign the course to the projects
-            projects.value?.forEach((project) => {
-                project.course = course;
-            });
-
-            // Assign the projects to the course
-            course.projects = projects.value ?? [];
-        }
-    },
-    {
-        immediate: true,
-    },
-);
-</script>
-
-<template>
-    <template v-if="courses.length > 0">
-        <div class="grid align-items-stretch">
-            <div
-                class="col-12 md:col-6 lg:col-4 xl:col-3"
-                v-for="project in courses.flatMap((course) => course.projects)"
-                :key="project.id"
-            >
-                <ProjectCard class="h-100" :project="project" :course="project.course" />
-            </div>
-        </div>
-    </template>
-    <template v-else>
-        <div class="col-12">
-            <p>{{ t('views.dashboard.no_projects') }}</p>
-        </div>
-    </template>
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<script setup lang="ts">
+import { type Course } from '@/types/Course.ts';
+import { watch } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import ProjectCard from '@/components/projects/ProjectCard.vue';
+import { useI18n } from 'vue-i18n';
+
+/* Props */
+const props = withDefaults(
+    defineProps<{
+        courses: Course[];
+    }>(),
+    {
+        courses: () => [],
+    },
+);
+
+/* Composables */
+const { t } = useI18n();
+const { projects, getProjectsByCourse } = useProject();
+
+watch(
+    () => props.courses,
+    async (courses: Course[]) => {
+        for (const course of courses) {
+            // Fetch the projects for the course
+            await getProjectsByCourse(course.id);
+
+            // Assign the course to the projects
+            projects.value?.forEach((project) => {
+                project.course = course;
+            });
+
+            // Assign the projects to the course
+            course.projects = projects.value ?? [];
+        }
+    },
+    {
+        immediate: true,
+    },
+);
+</script>
+
+<template>
+    <template v-if="courses.length > 0">
+        <div class="grid align-items-stretch">
+            <div
+                class="col-12 md:col-6 lg:col-4 xl:col-3"
+                v-for="project in courses.flatMap((course) => course.projects)"
+                :key="project.id">
+                <ProjectCard class="h-100" :project="project" :course="project.course" />
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <div class="col-12">
+            <p>{{ t('views.dashboard.no_projects') }}</p>
+        </div>
+    </template>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/assistant.service.ts b/frontend/src/composables/services/assistant.service.ts
index a9569f83..aa7e6a3f 100644
--- a/frontend/src/composables/services/assistant.service.ts
+++ b/frontend/src/composables/services/assistant.service.ts
@@ -75,8 +75,8 @@ export function useAssistant(): AssistantState {
         await deleteId<Assistant>(endpoint, assistant, Assistant.fromJSON);
     }
 
-    async function initAssistant(assistant: Assistant|null) {
-        if (assistant !== null)  {
+    async function initAssistant(assistant: Assistant | null): Promise<void> {
+        if (assistant !== null) {
             await getCourseByAssistant(assistant.id);
             assistant.courses = courses.value ?? [];
         }
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index 6efe45f1..c3977095 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -93,8 +93,8 @@ export function useStudents(): StudentsState {
         await deleteId<Student>(endpoint, student, Student.fromJSON);
     }
 
-    async function initStudent(student: Student|null) {
-        if (student !== null)  {
+    async function initStudent(student: Student | null): Promise<void> {
+        if (student !== null) {
             await getCoursesByStudent(student.id);
             student.courses = courses.value ?? [];
         }
diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index 90e2e724..22ada208 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -76,8 +76,8 @@ export function useTeacher(): TeacherState {
         await deleteId<Teacher>(endpoint, teacher, Teacher.fromJSON);
     }
 
-    async function initTeacher(teacher: Teacher|null) {
-        if (teacher !== null)  {
+    async function initTeacher(teacher: Teacher | null): Promise<void> {
+        if (teacher !== null) {
             await getCoursesByTeacher(teacher.id);
             teacher.courses = courses.value ?? [];
         }
diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index ce8f95ae..ab2b2751 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -142,7 +142,10 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     return {
-        user, student, teacher, assistant,
+        user,
+        student,
+        teacher,
+        assistant,
         view,
         intent,
         login,
diff --git a/frontend/src/types/users/Student.ts b/frontend/src/types/users/Student.ts
index a0a37e37..e0e341ad 100644
--- a/frontend/src/types/users/Student.ts
+++ b/frontend/src/types/users/Student.ts
@@ -18,7 +18,7 @@ export class Student extends User {
         public roles: Role[] = [],
         public courses: Course[] = [],
         public groups: Group[] = [],
-        public faculties: Faculty[] = []
+        public faculties: Faculty[] = [],
     ) {
         super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
     }
diff --git a/frontend/src/types/users/User.ts b/frontend/src/types/users/User.ts
index daf2c16f..28c1c212 100644
--- a/frontend/src/types/users/User.ts
+++ b/frontend/src/types/users/User.ts
@@ -17,6 +17,16 @@ export class User {
         public last_login: Date | null,
     ) {}
 
+    /**
+     * Get the academic years of the user.
+     */
+    get academic_years(): number[] {
+        const startYear = this.getAcademicYear(this.create_time);
+        const endYear = this.getAcademicYear(new Date());
+
+        return Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
+    }
+
     /**
      * Get the full name of the user.
      *
@@ -26,6 +36,22 @@ export class User {
         return `${this.first_name} ${this.last_name}`;
     }
 
+    /**
+     * Get the academic year of a date.
+     *
+     * @param date
+     * @returns number
+     */
+    public getAcademicYear(date: Date = new Date): number {
+        const year = date.getFullYear();
+
+        if (date.getMonth() >= 9) {
+            return year;
+        }
+
+        return year - 1;
+    }
+
     /**
      * Check if the user is a student.
      *
diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
new file mode 100644
index 00000000..8af2373f
--- /dev/null
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
new file mode 100644
index 00000000..8af2373f
--- /dev/null
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index b3d9a11c..acce43d8 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -1,134 +1,16 @@
 <script setup lang="ts">
-import ButtonGroup from 'primevue/buttongroup';
-import Button from 'primevue/button';
-import CourseList from '@/components/courses/CourseList.vue';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
-import YearSelector from '@/components/YearSelector.vue';
-import { useI18n } from 'vue-i18n';
-import { PrimeIcons } from 'primevue/api';
-import { ref, watch, computed } from 'vue';
-import { useProject } from '@/composables/services/project.service.ts';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
-import { type RoleUser } from '@/types/users/Generics.ts';
-import ProjectList from '@/components/projects/ProjectList.vue';
-
-/* Composable injections */
-const { t } = useI18n();
-
-/* Component state */
-const academicYears = ref<any[]>([]);
-const selectedCoursesYear = ref<number>();
-const selectedProjectsYear = ref<number>();
+import StudentDashboardView from '@/views/dashboard/roles/StudentDashboardView.vue';
 
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());
-const { projects, getProjectsByCourse } = useProject();
-
-watch(
-    user,
-    () => {
-        fetchDashboardData().then(() => {
-            selectedCoursesYear.value = getCurrentAcademicYear();
-            selectedProjectsYear.value = getCurrentAcademicYear();
-        });
-    },
-    {
-        immediate: true,
-    },
-);
-
-/**
- * Fetches the projects and academic years for the dashboard
- */
-async function fetchDashboardData(): Promise<void> {
-    if (user.value !== null) {
-        // Clear the old data, so that the data from another role is not displayed.
-        academicYears.value = [];
-
-        // All specific roles (students, assistants and teachers) have courses
-        if (user.value.isSpecificRole()) {
-            // Cast the generic user to a specific role
-            const role = user.value as RoleUser;
-
-            for (const course of role.courses) {
-                // Add the academic year to the list
-                const year = course.academic_startyear;
-
-                if (!academicYears.value?.some((el) => el.value === year)) {
-                    academicYears.value?.push({
-                        value: year,
-                        label: `${year} - ${year + 1}`
-                    });
-                }
-            }
-
-            // Sort the academic years in descending order
-            academicYears.value?.sort((a, b) => b - a);
-        }
-    }
-}
-
-/**
- * Get the current academic year
- *
- * @returns The current academic year
- */
-function getCurrentAcademicYear(): number {
-    const today = new Date();
-    const currentYear = today.getFullYear();
-
-    if (today.getMonth() >= 9) {
-        return currentYear;
-    }
-
-    return currentYear - 1;
-}
-
-// Filter the courses based on the selected year
-const filteredCourses = computed(() => {
-    if (user.value !== null && user.value.isSpecificRole()) {
-        const role = user.value as RoleUser;
-
-        return role.courses.filter((course) => course.academic_startyear === selectedCoursesYear.value);
-    }
-
-    return [];
-});
 </script>
 
 <template>
     <BaseLayout>
-        <!-- 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>
-                <YearSelector :years="academicYears" v-model="selectedCoursesYear" />
-                <RouterLink :to="{ name: 'course-create' }" v-if="user?.isTeacher()">
-                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" />
-                </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>
-            <!-- Project list controls -->
-            <ButtonGroup>
-                <YearSelector :years="academicYears" v-model="selectedProjectsYear" />
-                <!-- TODO: Set to create a project-->
-                <RouterLink :to="{ name: 'course-create' }" v-if="!user?.isStudent()">
-                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" />
-                </RouterLink>
-            </ButtonGroup>
-        </div>
-        <!-- Project list body -->
-        <ProjectList :courses="filteredCourses" />
+        <StudentDashboardView v-if="user?.isStudent()" :student="user" />
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
new file mode 100644
index 00000000..ec77cd29
--- /dev/null
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -0,0 +1,74 @@
+<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 { 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';
+
+/* Props */
+const props = defineProps<{
+    student: Student;
+}>();
+
+/* Composable injections */
+const { t } = useI18n();
+const { courses, getCoursesByStudent } = useCourses();
+
+/* State */
+const selectedYear = ref<number>(props.student.getAcademicYear());
+
+const filteredCourses = computed(() =>
+    courses.value?.filter((course) =>
+        course.academic_startyear === selectedYear.value
+    ) ?? []
+);
+
+/* Watchers */
+watch(
+    props.student,
+    () => {
+        getCoursesByStudent(props.student.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">
+            <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>
+    </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>
+        <!-- Project list controls -->
+        <ButtonGroup>
+            <YearSelector :years="student.academic_years" v-model="selectedYear" />
+        </ButtonGroup>
+    </div>
+    <!-- Project list body -->
+    <ProjectList :courses="filteredCourses" />
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index ec300091..536c984b 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -7,18 +7,18 @@ import Title from '@/components/layout/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';
+import { type Group } from '@/types/Group.ts';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 
 /* Composable injections */
 const route = useRoute();
-const { user, student } = storeToRefs(useAuthStore());
+const { student } = storeToRefs(useAuthStore());
 const { project, getProjectByID } = useProject();
 const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
 
 /* Component state */
-const group = ref<Group|null>(null);
+const group = ref<Group | null>(null);
 
 watch(
     student,
@@ -30,12 +30,12 @@ watch(
 
             // Check if the student is in a group for the project
             const projectGroups = groups.value;
-            await getGroupsByStudent("1");
+            await getGroupsByStudent('1');
 
             for (const studentGroup of groups.value ?? []) {
                 const isCommonGroup = projectGroups?.some((projectGroup) => projectGroup.id === studentGroup.id);
 
-                if (isCommonGroup) {
+                if (isCommonGroup === true) {
                     group.value = studentGroup;
                     break;
                 }
@@ -44,7 +44,7 @@ watch(
     },
     {
         immediate: true,
-    }
+    },
 );
 </script>