Course card improvements

backend/api/views/course_view.py

@@ -61,7 +61,7 @@ def search(self, request: Request) -> Response:
         # Filter the queryset based on the search term
         queryset = self.get_queryset().filter(
             name__icontains=search
-        )
+        ).order_by('faculty')
 
         # Filter the queryset based on selected years
         if years:

frontend/src/assets/lang/en.json

@@ -64,6 +64,7 @@
         },
         "courses": {
             "create": "Create course",
+            "edit": "Edit course",
             "name": "Course name",
             "description": "Description",
             "year": "Academic year"

frontend/src/assets/lang/nl.json

@@ -23,9 +23,8 @@
         "dashboard": {
             "courses": "Mijn vakken",
             "projects": "Lopende projecten",
-            "no_projects": "Geen projecten gevonden.",
-            "no_courses": "Geen vakken gevonden.",
-            "select_course": "Selecteer het vak waarvoor je een project wil maken:"
+            "select_course": "Selecteer het vak waarvoor je een project wil maken:",
+            "showPastProjects": "Projecten met verstreken deadline"
         },
         "login": {
             "title": "Inloggen",
@@ -66,6 +65,7 @@
         },
         "courses": {
           "create": "Creëer vak",
+          "edit": "Bewerk vak",
           "name": "Vaknaam",
           "description": "Beschrijving",
           "year": "Academiejaar",

frontend/src/assets/scss/theme/base/components/panel/_card.scss

@@ -9,7 +9,10 @@
         background: $primaryLightColor;
         border-bottom-left-radius: $borderRadius;
         border-bottom-right-radius: $borderRadius;
+        position: relative;
+        display: flex;
         height: 100%;
+        flex-direction: column;
     }
 
     .p-card-title {
@@ -30,5 +33,10 @@
 
     .p-card-footer {
         padding: $cardFooterPadding;
+        position: relative;
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        justify-content: end;
     }
 }

frontend/src/components/courses/CourseDetailCard.vue

@@ -22,7 +22,7 @@ const images = Object.keys(
 </script>
 
 <template>
-    <Card class="border-round">
+    <Card class="border-round course-card">
         <template #header>
             <img
                 class="w-full h-12rem border-round-top"
@@ -48,4 +48,10 @@ const images = Object.keys(
     </Card>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.course-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+</style>

frontend/src/components/projects/ProjectCard.vue

@@ -30,19 +30,23 @@ const { t } = useI18n();
 <template>
     <Card class="border-round project-card">
         <template #header>
-            <h2 class="text-primary m-0 text-xl"><span class="pi pi-book text-xl mr-2" /> {{ course.name }}</h2>
+            <h2 class="text-primary m-0 text-xl flex align-items-center gap-2">
+                <span class="pi pi-book text-xl mr-2" /> {{ course.name }}
+            </h2>
         </template>
         <template #subtitle>
             {{ project.name }}
         </template>
         <template #content>
             <div class="mb-2">
                 <i :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']" class="mr-2"></i>
-                {{ t('views.projects.deadline') }}: {{ formattedDeadline }}<br />
+                <b>{{ t('views.projects.deadline') }}</b
+                >: {{ formattedDeadline }}<br />
             </div>
             <div>
                 <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
-                {{ t('views.projects.submissionStatus') }}: ok
+                <b>{{ t('views.projects.submissionStatus') }}</b
+                >: ok
             </div>
         </template>
         <template #footer>
@@ -55,40 +59,40 @@ const { t } = useI18n();
                     },
                 }"
             >
-                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                <Button
+                    class="align-self-end"
+                    :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: $fontSize;
-}
-
-.border-round {
-    border-radius: $borderRadius;
-}
-
 .project-card {
     border-style: solid;
-    border-width: $borderWidth;
-    border-color: $primaryLightColor;
+    border-width: 1px;
+    border-color: var(--primary-color-light);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
     .p-card-body {
         background: white;
     }
+
     .p-card-header {
-        padding: $cardBodyPadding;
-        background: $primaryLightColor;
+        padding: var(--content-padding);
+        background: var(--primary-color-light);
     }
+
     .p-card-content {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        height: 100%;
     }
 }
 </style>

frontend/src/components/projects/ProjectList.vue

@@ -4,14 +4,17 @@ import { computed, watch } from 'vue';
 import { useProject } from '@/composables/services/project.service.ts';
 import ProjectCard from '@/components/projects/ProjectCard.vue';
 import { useI18n } from 'vue-i18n';
+import moment from 'moment';
 
 /* Props */
 const props = withDefaults(
     defineProps<{
         courses: Course[];
+        showPast?: boolean;
     }>(),
     {
         courses: () => [],
+        showPast: false,
     },
 );
 
@@ -20,15 +23,22 @@ const { t } = useI18n();
 const { projects, getProjectsByCourse } = useProject();
 
 /* State */
+
+// The merged projects from all courses
 const allProjects = computed(() => props.courses.flatMap((course) => course.projects));
 
 /**
  * Sorts the projects by deadline
  */
-const sortedProjects = computed(() =>
-    [...allProjects.value].sort((a, b) => new Date(a.deadline).getTime() - new Date(b.deadline).getTime()),
-);
+const sortedProjects = computed(() => {
+    const projects = allProjects.value.filter((project) =>
+        !props.showPast ? moment(project.deadline).isAfter() : true,
+    );
+
+    return [...projects].sort((a, b) => new Date(a.deadline).getTime() - new Date(b.deadline).getTime());
+});
 
+/* Watchers */
 watch(
     () => props.courses,
     async (courses: Course[]) => {

frontend/src/components/projects/SubmissionCard.vue

@@ -29,7 +29,7 @@ const formattedDeadline = computed(() => {
 </script>
 
 <template>
-    <Card class="border-round project-card">
+    <Card class="border-round">
         <template #content>
             <div>
                 <div class="mb-3">

frontend/src/router/router.ts

@@ -13,6 +13,7 @@ import { AuthenticationGuard } from '@/router/guards/authentication.guard.ts';
 import { LogoutGuard } from '@/router/guards/logout.guard.ts';
 import ProjectView from '@/views/projects/ProjectView.vue';
 import CreateProjectView from '@/views/projects/CreateProjectView.vue';
+import UpdateCourseView from '@/views/courses/UpdateCourseView.vue';
 import SearchCourseView from '@/views/courses/SearchCourseView.vue';
 import SubmissionView from '@/views/submissions/submissionView.vue';
 import SingleProjectView from '@/views/projects/SingleProjectView.vue';
@@ -45,7 +46,7 @@ const routes: RouteRecordRaw[] = [
                 path: ':courseId',
                 children: [
                     { path: '', component: CourseView, name: 'course' },
-                    { path: 'edit', component: Dummy, name: 'course-edit' },
+                    { path: 'edit', component: UpdateCourseView, name: 'course-edit' },
                     // Projects
                     {
                         path: 'courseProjects',

frontend/src/views/calendar/CalendarView.vue

@@ -163,7 +163,7 @@ watch(selectedDate, (date) => {
                             <div class="flex border-round-md" v-for="project in projectsWithDeadline" :key="project.id">
                                 <!-- Icon -->
                                 <div
-                                    class="bg-primary flex justify-content-center align-items-center p-4 w-3 w-8rem h-8rem"
+                                    class="bg-primary flex justify-content-center align-items-center p-4 w-3 w-7rem h-7rem"
                                 >
                                     <span class="pi pi-book text-6xl" />
                                 </div>
@@ -180,7 +180,7 @@ watch(selectedDate, (date) => {
                                             },
                                         }"
                                     >
-                                        <h3 class="flex gap-3 align-items-center text-primary m-0 text-3xl">
+                                        <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
                                             {{ project.name }} <span class="pi pi-arrow-right text-xl" />
                                         </h3>
                                     </RouterLink>

frontend/src/views/courses/CourseView.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import Calendar from 'primevue/calendar';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import StudentCourseView from './roles/StudentCourseView.vue';
+import TeacherCourseView from './roles/TeacherCourseView.vue';
+import AssistantCourseView from './roles/AssistantCourseView.vue';
 import { onMounted } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
 import { useRoute } from 'vue-router';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
 
+/* Service injection */
+const { user } = storeToRefs(useAuthStore());
 const { params } = useRoute();
 const { course, getCourseByID } = useCourses();
 
@@ -16,25 +21,10 @@ onMounted(() => {
 
 <template>
     <BaseLayout>
-        <div class="grid fadein" v-if="course">
-            <div class="col-12 md:col-6">
-                <div>
-                    <Title>
-                        {{ course.name }}
-                    </Title>
-                </div>
-
-                <div>
-                    <p>
-                        {{ course.description }}
-                    </p>
-                </div>
-            </div>
-            <div class="col-12 md:col-6">
-                <div>
-                    <Calendar class="w-full" inline />
-                </div>
-            </div>
+        <div v-if="course">
+            <StudentCourseView v-if="user?.isStudent()" :course="course" />
+            <TeacherCourseView v-else-if="user?.isTeacher()" :course="course" />
+            <AssistantCourseView v-else-if="user?.isAssistant()" :course="course" />
         </div>
     </BaseLayout>
 </template>