From e50dcf4cd53550124a21205a28af92937fbae0c6 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Thu, 23 May 2024 23:10:05 +0200
Subject: [PATCH] chore: small layout fixes

---
 .../components/courses/CourseDetailList.vue   | 60 +++++++--------
 .../notifications/NotificationsOverlay.vue    |  3 +-
 .../src/components/projects/ProjectList.vue   | 69 ++++++-----------
 .../courses/roles/AssistantCourseView.vue     | 22 ++++--
 .../views/courses/roles/StudentCourseView.vue | 20 +++--
 .../views/courses/roles/TeacherCourseView.vue | 24 +++---
 .../roles/AssistantDashboardView.vue          | 72 +++++++++++-------
 .../dashboard/roles/StudentDashboardView.vue  | 17 ++++-
 .../dashboard/roles/TeacherDashboardView.vue  | 76 +++++++++++--------
 .../projects/roles/StudentProjectView.vue     |  7 +-
 10 files changed, 200 insertions(+), 170 deletions(-)

diff --git a/frontend/src/components/courses/CourseDetailList.vue b/frontend/src/components/courses/CourseDetailList.vue
index 70a1a96b..19c4265c 100644
--- a/frontend/src/components/courses/CourseDetailList.vue
+++ b/frontend/src/components/courses/CourseDetailList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Skeleton from 'primevue/skeleton';
 import CourseDetailCard from '@/components/courses/CourseDetailCard.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
@@ -9,7 +8,7 @@ import Button from 'primevue/button';
 /* Props */
 interface Props {
     cols?: number;
-    courses: Course[] | null;
+    courses: Course[];
 }
 
 withDefaults(defineProps<Props>(), {
@@ -22,40 +21,33 @@ const { t } = useI18n();
 
 <template>
     <div class="grid align-items-stretch">
-        <template v-if="courses !== null">
-            <template v-if="courses.length > 0">
-                <div class="col-12 md:col-6" :class="'xl:col-' + 12 / cols" v-for="course in courses" :key="course.id">
-                    <CourseDetailCard :course="course">
-                        <template #footer="{ course }">
-                            <slot name="footer" :course="course">
-                                <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
-                                    <Button
-                                        :icon="PrimeIcons.ARROW_RIGHT"
-                                        :label="t('components.card.open')"
-                                        icon-pos="right"
-                                        outlined
-                                    />
-                                </RouterLink>
-                            </slot>
-                        </template>
-                    </CourseDetailCard>
-                </div>
-            </template>
-            <template v-else>
-                <div class="w-30rem text-center mx-auto">
-                    <span class="pi pi-exclamation-circle text-6xl text-primary" />
-                    <slot name="empty">
-                        <p>{{ t('components.list.noCourses.student') }}</p>
-                        <RouterLink id="courses" :to="{ name: 'courses' }">
-                            <Button :label="t('components.button.searchCourse')" icon="pi pi-search" />
-                        </RouterLink>
-                    </slot>
-                </div>
-            </template>
+        <template v-if="courses.length > 0">
+            <div class="col-12 md:col-6" :class="'xl:col-' + 12 / cols" v-for="course in courses" :key="course.id">
+                <CourseDetailCard :course="course">
+                    <template #footer="{ course }">
+                        <slot name="footer" :course="course">
+                            <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
+                                <Button
+                                    :icon="PrimeIcons.ARROW_RIGHT"
+                                    :label="t('components.card.open')"
+                                    icon-pos="right"
+                                    outlined
+                                />
+                            </RouterLink>
+                        </slot>
+                    </template>
+                </CourseDetailCard>
+            </div>
         </template>
         <template v-else>
-            <div class="col-12 md:col-6 lg:col-4" :class="'xl:col-' + 12 / cols" v-for="index in cols" :key="index">
-                <Skeleton height="25rem" />
+            <div class="w-30rem text-center mx-auto">
+                <span class="pi pi-exclamation-circle text-6xl text-primary" />
+                <slot name="empty">
+                    <p>{{ t('components.list.noCourses.student') }}</p>
+                    <RouterLink id="courses" :to="{ name: 'courses' }">
+                        <Button :label="t('components.button.searchCourse')" icon="pi pi-search" />
+                    </RouterLink>
+                </slot>
             </div>
         </template>
     </div>
diff --git a/frontend/src/components/notifications/NotificationsOverlay.vue b/frontend/src/components/notifications/NotificationsOverlay.vue
index 17e9819f..af3768c2 100644
--- a/frontend/src/components/notifications/NotificationsOverlay.vue
+++ b/frontend/src/components/notifications/NotificationsOverlay.vue
@@ -2,7 +2,6 @@
 import NotificationsScrollPanel from '@/components/notifications/NotificationsScrollPanel.vue';
 import Button from 'primevue/button';
 import OverlayPanel from 'primevue/overlaypanel';
-import Skeleton from 'primevue/skeleton';
 import Badge from 'primevue/badge';
 import { PrimeIcons } from 'primevue/api';
 import { storeToRefs } from 'pinia';
@@ -67,7 +66,7 @@ function toggleNotificationOverlay(event: Event): void {
         </template>
     </template>
     <template v-else>
-        <Skeleton width="100px" height="42px" />
+        <div style="width: 85px; height: 42px" />
     </template>
 </template>
 
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 87bf871f..90f01b64 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -11,21 +11,11 @@ import { type Group } from '@/types/Group.ts';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { useStudents } from '@/composables/services/student.service';
-import { type Course } from '@/types/Course.ts';
-import Loading from '@/components/Loading.vue';
 
 /* Props */
-const props = withDefaults(
-    defineProps<{
-        projects?: Project[] | null;
-        courses?: Course[] | null;
-        cols?: number;
-    }>(),
-    {
-        projects: () => [],
-        cols: 4,
-    },
-);
+const props = defineProps<{
+    projects: Project[];
+}>();
 
 /* Composables */
 const { t } = useI18n();
@@ -60,19 +50,14 @@ watch(
 );
 
 /* Sorts the projects by deadline */
-const sortedProjects = computed<Project[] | null>(() => {
-    const projects =
-        props.projects?.filter((project) => (!showPast.value ? moment(project.deadline).isAfter() : true)) ?? null;
-
-    if (projects === null) {
-        return projects;
-    }
+const sortedProjects = computed<Project[]>(() => {
+    const projects = props.projects.filter((project) => (!showPast.value ? moment(project.deadline).isAfter() : true));
 
     return [...projects].sort((a, b) => new Date(a.deadline).getTime() - new Date(b.deadline).getTime());
 });
 
 /* Filters the projects by incoming deadline (less than one week) */
-const incomingProjects = computed<Project[] | null>(() => {
+const incomingProjects = computed<Project[]>(() => {
     return (
         sortedProjects.value?.filter((project) => moment(project.deadline).isBefore(moment().add(1, 'week'))) ?? null
     );
@@ -89,27 +74,22 @@ const incomingProjects = computed<Project[] | null>(() => {
             </label>
         </div>
         <!-- Project list -->
-        <template v-if="sortedProjects === null || sortedProjects.length > 0">
+        <template v-if="sortedProjects.length > 0">
             <div class="grid nested-grid">
                 <div class="col-12 md:col-5">
                     <h2 class="mt-0">
                         {{ t('views.projects.coming') }}
                     </h2>
                     <div class="grid">
-                        <template v-if="incomingProjects !== null">
-                            <template v-if="incomingProjects.length > 0">
-                                <div class="col-12" v-for="project in incomingProjects" :key="project.id">
-                                    <ProjectDeadlineCard type="small" :project="project" :course="project.course" />
-                                </div>
-                            </template>
-                            <template v-else>
-                                <div class="col-12">
-                                    <p class="mt-0">{{ t('components.list.noIncomingProjects') }}</p>
-                                </div>
-                            </template>
+                        <template v-if="incomingProjects.length > 0">
+                            <div class="col-12" v-for="project in incomingProjects" :key="project.id">
+                                <ProjectDeadlineCard type="small" :project="project" :course="project.course" />
+                            </div>
                         </template>
                         <template v-else>
-                            <Loading height="50vh" />
+                            <div class="col-12">
+                                <p class="mt-0">{{ t('components.list.noIncomingProjects') }}</p>
+                            </div>
                         </template>
                     </div>
                 </div>
@@ -118,19 +98,14 @@ const incomingProjects = computed<Project[] | null>(() => {
                         {{ t('views.projects.all') }}
                     </h2>
                     <div class="grid">
-                        <template v-if="sortedProjects !== null">
-                            <div class="col-12" v-for="project in sortedProjects" :key="project.id">
-                                <ProjectDetailCard
-                                    class="h-100"
-                                    :project="project"
-                                    :course="project.course"
-                                    :studentGroups="getUserGroups()"
-                                />
-                            </div>
-                        </template>
-                        <template v-else>
-                            <Loading height="50vh" />
-                        </template>
+                        <div class="col-12" v-for="project in sortedProjects" :key="project.id">
+                            <ProjectDetailCard
+                                class="h-100"
+                                :project="project"
+                                :course="project.course"
+                                :studentGroups="getUserGroups()"
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/views/courses/roles/AssistantCourseView.vue b/frontend/src/views/courses/roles/AssistantCourseView.vue
index 786c0644..c2407885 100644
--- a/frontend/src/views/courses/roles/AssistantCourseView.vue
+++ b/frontend/src/views/courses/roles/AssistantCourseView.vue
@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { useProject } from '@/composables/services/project.service.ts';
 import { watchImmediate } from '@vueuse/core';
+import Loading from '@/components/Loading.vue';
 
 /* Props */
 const props = defineProps<{
@@ -54,15 +55,20 @@ watchImmediate(
     </div>
 
     <!-- Project list body -->
-    <ProjectList :projects="projects">
-        <template #empty>
-            <p>
-                {{ t('views.courses.noProjects') }}
-            </p>
+    <template v-if="projects !== null">
+        <ProjectList :projects="projects">
+            <template #empty>
+                <p>
+                    {{ t('views.courses.noProjects') }}
+                </p>
 
-            <ProjectCreateButton :courses="[course]" :label="t('components.button.createProject')" />
-        </template>
-    </ProjectList>
+                <ProjectCreateButton :courses="[course]" :label="t('components.button.createProject')" />
+            </template>
+        </ProjectList>
+    </template>
+    <template v-else>
+        <Loading />
+    </template>
 
     <!-- Heading for teachers and assistants -->
     <div class="flex justify-content-between align-items-center my-6">
diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
index d796ff62..21100789 100644
--- a/frontend/src/views/courses/roles/StudentCourseView.vue
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -14,6 +14,7 @@ import { useRouter } from 'vue-router';
 import { useProject } from '@/composables/services/project.service.ts';
 import { computed } from 'vue';
 import { watchImmediate } from '@vueuse/core';
+import Loading from '@/components/Loading.vue';
 
 /* Props */
 const props = defineProps<{
@@ -90,13 +91,18 @@ watchImmediate(
     </div>
 
     <!-- Project list body -->
-    <ProjectList :projects="visibleProjects">
-        <template #empty>
-            <p>
-                {{ t('views.courses.noProjects') }}
-            </p>
-        </template>
-    </ProjectList>
+    <template v-if="visibleProjects !== null">
+        <ProjectList :projects="visibleProjects">
+            <template #empty>
+                <p>
+                    {{ t('views.courses.noProjects') }}
+                </p>
+            </template>
+        </ProjectList>
+    </template>
+    <template v-else>
+        <Loading />
+    </template>
 
     <!-- Heading for teachers and assistants -->
     <div class="flex justify-content-between align-items-center my-6">
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
index da248804..31472197 100644
--- a/frontend/src/views/courses/roles/TeacherCourseView.vue
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -18,6 +18,7 @@ import { useCourses } from '@/composables/services/course.service';
 import { useProject } from '@/composables/services/project.service.ts';
 import { computed, ref } from 'vue';
 import { watchImmediate } from '@vueuse/core';
+import Loading from '@/components/Loading.vue';
 
 /* Props */
 const props = defineProps<{
@@ -138,15 +139,20 @@ watchImmediate(
     </div>
 
     <!-- Project list body -->
-    <ProjectList :projects="projects">
-        <template #empty>
-            <p>
-                {{ t('views.courses.noProjects') }}
-            </p>
-
-            <ProjectCreateButton :courses="[course]" :label="t('components.button.createProject')" />
-        </template>
-    </ProjectList>
+    <template v-if="projects !== null">
+        <ProjectList :projects="projects">
+            <template #empty>
+                <p>
+                    {{ t('views.courses.noProjects') }}
+                </p>
+
+                <ProjectCreateButton :courses="[course]" :label="t('components.button.createProject')" />
+            </template>
+        </ProjectList>
+    </template>
+    <template v-else>
+        <Loading />
+    </template>
 
     <!-- Heading for teachers and assistants -->
     <div class="flex justify-content-between align-items-center my-6">
diff --git a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
index da757c23..422ccbf4 100644
--- a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
@@ -31,7 +31,7 @@ const selectedYear = ref(getAcademicYear());
 const allYears = computed(() => getAcademicYears(...(courses.value?.map((course) => course.academic_startyear) ?? [])));
 
 const filteredCourses = computed(
-    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
+    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? null,
 );
 
 /* Watchers */
@@ -54,30 +54,40 @@ watchImmediate(
                 <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
                 <!-- Add project button -->
-                <ProjectCreateButton :courses="filteredCourses" />
+                <ProjectCreateButton v-if="filteredCourses !== null" :courses="filteredCourses" />
             </div>
+
             <!-- Project list body -->
-            <ProjectList :projects="projects">
-                <template #empty>
-                    <template v-if="filteredCourses.length === 0">
-                        <p>{{ t('components.list.noCourses.teacher') }}</p>
-                        <RouterLink :to="{ name: 'course-create' }">
-                            <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-                        </RouterLink>
-                    </template>
-                    <template v-else>
-                        <p>
-                            {{ t('components.list.noProjects.teacher') }}
-                        </p>
+            <template v-if="projects !== null && filteredCourses !== null">
+                <ProjectList :projects="projects">
+                    <template #empty>
+                        <template v-if="filteredCourses.length === 0">
+                            <p>{{ t('components.list.noCourses.teacher') }}</p>
+                            <RouterLink :to="{ name: 'course-create' }">
+                                <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                            </RouterLink>
+                        </template>
+                        <template v-else>
+                            <p>
+                                {{ t('components.list.noProjects.teacher') }}
+                            </p>
 
-                        <p v-if="filteredCourses.length === 0">
-                            {{ t('components.list.noCourses.teacher') }}
-                        </p>
+                            <p v-if="filteredCourses.length === 0">
+                                {{ t('components.list.noCourses.teacher') }}
+                            </p>
 
-                        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
+                            <ProjectCreateButton
+                                :courses="filteredCourses"
+                                :label="t('components.button.createProject')"
+                            />
+                        </template>
                     </template>
-                </template>
-            </ProjectList>
+                </ProjectList>
+            </template>
+            <template v-else>
+                <Loading />
+            </template>
+
             <!-- Course heading -->
             <div class="flex justify-content-between align-items-center my-6">
                 <!-- Course list title -->
@@ -86,15 +96,21 @@ watchImmediate(
                 <!-- Academic year selector -->
                 <YearSelector :years="allYears" v-model="selectedYear" />
             </div>
+
             <!-- Course list body -->
-            <CourseList :courses="filteredCourses">
-                <template #empty>
-                    <p>{{ t('components.list.noCourses.teacher') }}</p>
-                    <RouterLink :to="{ name: 'course-create' }">
-                        <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-                    </RouterLink>
-                </template>
-            </CourseList>
+            <template v-if="filteredCourses !== null">
+                <CourseList :courses="filteredCourses">
+                    <template #empty>
+                        <p>{{ t('components.list.noCourses.teacher') }}</p>
+                        <RouterLink :to="{ name: 'course-create' }">
+                            <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                        </RouterLink>
+                    </template>
+                </CourseList>
+            </template>
+            <template v-else>
+                <Loading />
+            </template>
         </div>
     </template>
     <template v-else>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index c29d479f..4ee03896 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -56,8 +56,15 @@ watchImmediate(
                 <!-- Project list title -->
                 <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             </div>
+
             <!-- Project list body -->
-            <ProjectList class="fadein" :projects="visibleProjects" />
+            <template v-if="visibleProjects !== null">
+                <ProjectList class="fadein" :projects="visibleProjects" />
+            </template>
+            <template v-else>
+                <Loading />
+            </template>
+
             <!-- Course heading -->
             <div
                 class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center my-6"
@@ -68,8 +75,14 @@ watchImmediate(
                 <!-- Academic year selector -->
                 <YearSelector :years="allYears" v-model="selectedYear" />
             </div>
+
             <!-- Course list body -->
-            <CourseList class="fadein" :courses="filteredCourses" />
+            <template v-if="filteredCourses !== null">
+                <CourseList class="fadein" :courses="filteredCourses" />
+            </template>
+            <template v-else>
+                <Loading />
+            </template>
         </div>
     </template>
     <template v-else>
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 55917af7..06c5f2bb 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -33,7 +33,7 @@ const selectedYear = ref(getAcademicYear());
 const allYears = computed(() => getAcademicYears(...(courses.value?.map((course) => course.academic_startyear) ?? [])));
 
 const filteredCourses = computed(
-    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
+    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? null,
 );
 
 /* Watchers */
@@ -61,36 +61,44 @@ watchImmediate(
                 <!-- Create project button -->
                 <ProjectCreateButton
                     id="projectCreate"
+                    v-if="filteredCourses !== null"
                     :courses="filteredCourses"
                     :label="t('components.button.createProject')"
                 />
             </div>
+
             <!-- Project list body -->
-            <ProjectList :projects="projects">
-                <template #empty>
-                    <template v-if="filteredCourses.length === 0">
-                        <p>{{ t('components.list.noCourses.teacher') }}</p>
-                        <RouterLink :to="{ name: 'course-create' }">
-                            <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-                        </RouterLink>
-                    </template>
-                    <template v-else>
-                        <p>
-                            {{ t('components.list.noProjects.teacher') }}
-                        </p>
+            <template v-if="projects !== null && filteredCourses !== null">
+                <ProjectList :projects="projects">
+                    <template #empty>
+                        <template v-if="filteredCourses.length === 0">
+                            <p>{{ t('components.list.noCourses.teacher') }}</p>
+                            <RouterLink :to="{ name: 'course-create' }">
+                                <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                            </RouterLink>
+                        </template>
+                        <template v-else>
+                            <p>
+                                {{ t('components.list.noProjects.teacher') }}
+                            </p>
 
-                        <p v-if="filteredCourses.length === 0">
-                            {{ t('components.list.noCourses.teacher') }}
-                        </p>
+                            <p v-if="filteredCourses.length === 0">
+                                {{ t('components.list.noCourses.teacher') }}
+                            </p>
 
-                        <ProjectCreateButton
-                            id="projectCreate"
-                            :courses="filteredCourses"
-                            :label="t('components.button.createProject')"
-                        />
+                            <ProjectCreateButton
+                                id="projectCreate"
+                                :courses="filteredCourses"
+                                :label="t('components.button.createProject')"
+                            />
+                        </template>
                     </template>
-                </template>
-            </ProjectList>
+                </ProjectList>
+            </template>
+            <template v-else>
+                <Loading />
+            </template>
+
             <!-- Course heading -->
             <div
                 class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center my-6"
@@ -113,15 +121,21 @@ watchImmediate(
                     </RouterLink>
                 </ButtonGroup>
             </div>
+
             <!-- Course list body -->
-            <CourseList :courses="filteredCourses">
-                <template #empty>
-                    <p>{{ t('components.list.noCourses.teacher') }}</p>
-                    <RouterLink id="courseCreate" :to="{ name: 'course-create' }">
-                        <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-                    </RouterLink>
-                </template>
-            </CourseList>
+            <template v-if="filteredCourses !== null">
+                <CourseList :courses="filteredCourses">
+                    <template #empty>
+                        <p>{{ t('components.list.noCourses.teacher') }}</p>
+                        <RouterLink id="courseCreate" :to="{ name: 'course-create' }">
+                            <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                        </RouterLink>
+                    </template>
+                </CourseList>
+            </template>
+            <template v-else>
+                <Loading />
+            </template>
         </div>
     </template>
     <template v-else>
diff --git a/frontend/src/views/projects/roles/StudentProjectView.vue b/frontend/src/views/projects/roles/StudentProjectView.vue
index d9f5f236..b50d9d7b 100644
--- a/frontend/src/views/projects/roles/StudentProjectView.vue
+++ b/frontend/src/views/projects/roles/StudentProjectView.vue
@@ -147,8 +147,11 @@ watchImmediate(
                         <template v-else>
                             <template v-if="submissions !== null && group !== null">
                                 <div class="fadein">
-                                    <SubmissionCard class="mb-3" :group="group" :submissions="submissions">
-                                    </SubmissionCard>
+                                    <SubmissionCard
+                                        class="mb-3"
+                                        :group="group"
+                                        :submissions="submissions"
+                                    ></SubmissionCard>
                                     <JoinedGroupCard
                                         v-if="project.group_size !== 1"
                                         :group="group"