Skip to content

Commit

Permalink
fix: small layout fixes (#470)
Browse files Browse the repository at this point in the history 
* chore: merge

* chore: small layout fixes

* chore: added translations

* chore: fixed translation issue
  • Loading branch information
@EwoutV
EwoutV authored May 24, 2024
1 parent 116c018 commit baf7016
Show file tree
Hide file tree
Showing 12 changed files with 206 additions and 176 deletions.
4 changes: 2 additions & 2 deletions frontend/src/assets/lang/app/nl.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,9 @@
"title": "Indieningsstructuur",
"placeholder": "Geef deze nieuwe map een naam",
"cancelSelection": "Deselecteer {0}",
"newFolder": "Nieuwe map",
"obligatedExtensions": "Verplichte extensies",
"blockedExtensions": "Niet toegelaten extensies"
"blockedExtensions": "Niet toegelaten extensies",
"newFolder": "Nieuwe map"
},
"extraChecks": {
"title": "Automatische checks op een indiening",
Expand Down
60 changes: 26 additions & 34 deletions frontend/src/components/courses/CourseDetailList.vue
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -9,7 +8,7 @@ import Button from 'primevue/button';
/* Props */
interface Props {
cols?: number;
courses: Course[] | null;
courses: Course[];
}
withDefaults(defineProps<Props>(), {
Expand All @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/notifications/NotificationsOverlay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>

Expand Down
69 changes: 22 additions & 47 deletions frontend/src/components/projects/ProjectList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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
);
Expand All @@ -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>
Expand All @@ -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>
Expand Down
22 changes: 14 additions & 8 deletions frontend/src/views/courses/roles/AssistantCourseView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -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">
Expand Down
20 changes: 13 additions & 7 deletions frontend/src/views/courses/roles/StudentCourseView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -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">
Expand Down
24 changes: 15 additions & 9 deletions frontend/src/views/courses/roles/TeacherCourseView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -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">
Expand Down
Loading

0 comments on commit baf7016

Please sign in to comment.