Skip to content

Commit

Permalink
chore: better calendar, form layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@EwoutV
EwoutV committed Apr 12, 2024
1 parent 5aab399 commit 30d57b0
Show file tree
Hide file tree
Showing 18 changed files with 267 additions and 235 deletions.
7 changes: 4 additions & 3 deletions frontend/src/assets/lang/nl.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,11 @@
"components": {
"button": {
"academic_year": "Academiejaar {0}",
"create_project": "Maak een nieuw project"
"createProject": "Maak een nieuw project"
},
"card": {
"open": "Details"
"open": "Details",
"newProject": "Nieuw Project"
},
"submission" : "Indienen"
},
Expand Down Expand Up @@ -148,7 +149,7 @@
"am": "voormiddag",
"apply": "Toepassen",
"cancel": "Annuleer",
"choose": "Kies",
"choose": "Kies een bestand",
"chooseDate": "Kies datum",
"chooseMonth": "Kies maand",
"chooseYear": "Kies jaar",
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/components/courses/CourseDetailCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@ const { getRandomImport } = useGlob(import.meta.glob('@/assets/img/placeholders/
{{ course.getExcerpt() }}
</template>
<template #footer>
<RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
<Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
</RouterLink>
<slot :course="course" name="footer">
<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>
</Card>
</template>
Expand Down
19 changes: 12 additions & 7 deletions frontend/src/components/courses/CourseList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import CourseDetailCard from '@/components/courses/CourseDetailCard.vue';
import CourseGeneralCard from '@/components/courses/CourseGeneralCard.vue';
import { type Course } from '@/types/Course.ts';
import { useI18n } from 'vue-i18n';
import { PrimeIcons } from 'primevue/api';
import Button from 'primevue/button';
/* Props */
interface Props {
Expand All @@ -25,13 +27,16 @@ const { t } = useI18n();
<div class="grid align-items-stretch">
<template v-if="courses !== null">
<template v-if="courses.length > 0">
<div
class="col-12 lg:col-6"
:class="'xl:col-' + 12 / cols"
v-for="course in courses"
:key="course.id"
>
<CourseDetailCard :course="course" v-if="detail" />
<div class="col-12 md:col-6" :class="'xl:col-' + 12 / cols" v-for="course in courses" :key="course.id">
<CourseDetailCard :course="course" v-if="detail">
<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>
<CourseGeneralCard class="h-full" :course="course" v-else />
</div>
</template>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/layout/BaseLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Footer from '@/components/layout/Footer.vue';
</script>

<template>
<div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto">
<div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto h-100">
<Header />

<Body id="body">
Expand All @@ -19,6 +19,7 @@ import Footer from '@/components/layout/Footer.vue';
<style scoped>
#layout {
max-width: 1460px;
height: 100vh;
#body {
min-height: calc(100vh - (180px + 175px));
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layout/Footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const logo: Record<string, string> = { nl, en };
</script>

<template>
<div id="footer" class="p-4 py-3">
<div id="footer" class="p-4 py-3 mt-auto">
<div class="w-full lg:w-2 flex align-items-center py-3">
<img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')" />
</div>
Expand Down
28 changes: 19 additions & 9 deletions frontend/src/components/layout/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const items = computed(() => [
<template>
<div class="flex w-full">
<!-- Logo -->
<div class="lg:w-2 lg:pl-0 flex align-items-center p-3 ">
<div class="lg:w-2 lg:pl-0 flex align-items-center p-3">
<RouterLink :to="'/'">
<img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
</RouterLink>
Expand Down Expand Up @@ -124,20 +124,30 @@ const items = computed(() => [
<div class="flex flex-column h-full">
<div class="flex align-items-center justify-content-between p-4 pb-2 flex-shrink-0">
<span class="inline-flex align-items-center gap-2">
<img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2"/> <span class="font-bold text-2xl text-primary">Ypovoli</span>
<img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2" />
<span class="font-bold text-2xl text-primary">Ypovoli</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"/>
<Button
type="button"
@click="closeCallback"
icon="pi pi-times"
rounded
outlined
class="h-2rem w-2rem"
/>
</span>
</div>
<div class="overflow-y-auto px-2">
<ul class="list-none p-0 m-0">
<li v-for="item in items">
<RouterLink :to="{name: item.route}"
@click="closeCallback"
class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
v-ripple>
<i class="mr-2" :class="'pi pi-' + item.icon"/>
<li v-for="item in items" :key="item.route">
<RouterLink
:to="{ name: item.route }"
@click="closeCallback"
class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
v-ripple
>
<i class="mr-2" :class="'pi pi-' + item.icon" />
<span class="font-medium">{{ item.label }}</span>
</RouterLink>
</li>
Expand Down
61 changes: 22 additions & 39 deletions frontend/src/components/projects/ProjectCreateButton.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
<script setup lang="ts">
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import { useI18n } from 'vue-i18n';
import { type Course } from '@/types/Course.ts';
import { PrimeIcons } from 'primevue/api';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import CourseList from '@/components/courses/CourseList.vue';
/* Composable injections */
const { t } = useI18n();
const { push } = useRouter();
/* Props */
const props = defineProps<{ courses: Course[], label?: string, severity?: string }>();
const props = defineProps<{ courses: Course[]; label?: string; severity?: string }>();
/* Dialog state to select the course you want to create a project for */
const displayCourseSelection = ref(false);
/* Method to route to the project creation view */
const createProjectForCourse = (courseId: string): void => {
push({ name: 'project-create', params: { courseId } });
displayCourseSelection.value = false;
};
</script>

<template>
Expand All @@ -39,38 +32,28 @@ const createProjectForCourse = (courseId: string): void => {
<!-- Dialog to select the course you want to create a project for -->
<Dialog
v-model:visible="displayCourseSelection"
modal
class="m-3"
:draggable="false"
:contentStyle="{ width: '50vw' }"
:header="t('views.dashboard.select_course')"
>
<!-- List of courses to select from-->
<div v-if="props.courses && props.courses.length > 0">
<div
v-for="course in props.courses"
:key="course.id"
class="course-item"
@click="createProjectForCourse(course.id)"
>
<span class="course-name">{{ course.name }}</span>
</div>
</div>
:contentStyle="{ 'min-width': '50vw' }"
modal>
<template #header>
<h2 class="my-3 text-primary">
{{ t('views.dashboard.select_course') }}
</h2>
</template>
<template #default>
<!-- List of courses to select from-->
<CourseList :cols="3" :courses="props.courses">
<template #footer="{ course }">
<RouterLink :to="{ name: 'project-create', params: { courseId: course.id } }">
<Button :icon="PrimeIcons.PLUS" :label="t('components.card.newProject')" icon-pos="right" outlined />
</RouterLink>
</template>
</CourseList>
</template>
</Dialog>
</div>
</template>

<style scoped lang="scss">
.course-item {
cursor: pointer;
padding: 8px;
border-radius: 4px;
margin-bottom: 8px;
transition: background-color 0.3s;
}
.course-item:hover {
background-color: #f0f0f0;
}
.course-name {
font-weight: bold;
}
</style>
2 changes: 1 addition & 1 deletion frontend/src/components/projects/ProjectList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ watch(
<template v-if="sortedProjects !== null">
<template v-if="sortedProjects.length > 0">
<div
class="col-12 md:col-6 lg:col-4"
class="col-12 md:col-6"
:class="'xl:col-' + 12 / cols"
v-for="project in sortedProjects"
:key="project.id"
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/composables/services/students.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,8 @@ export function useStudents(): StudentsState {
await create<Student>(
endpoint,
{
email: studentData.email,
first_name: studentData.first_name,
last_name: studentData.last_name,
user: studentData.id,
student_id: studentData.studentId
},
student,
Student.fromJSON,
Expand Down
7 changes: 3 additions & 4 deletions frontend/src/composables/services/teachers.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { type Ref, ref } from 'vue';
import { endpoints } from '@/config/endpoints.ts';
import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
import { useCourses } from '@/composables/services/courses.service.ts';
import { User } from '@/types/users/User.ts';

interface TeacherState {
teachers: Ref<Teacher[] | null>;
Expand Down Expand Up @@ -57,14 +58,12 @@ export function useTeacher(): TeacherState {
await deleteIdWithData<Response>(endpoint, { teacherId }, response, Response.fromJSON);
}

async function createTeacher(teacherData: Teacher): Promise<void> {
async function createTeacher(user: User): Promise<void> {
const endpoint = endpoints.teachers.index;
await create<Teacher>(
endpoint,
{
email: teacherData.email,
first_name: teacherData.first_name,
last_name: teacherData.last_name,
user: user.id
},
teacher,
Teacher.fromJSON,
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ body {
padding: 0;
overflow-x: hidden;
line-height: 1.6rem;
min-height: 100vh;

#app {
min-height: 100vh;
}

* {
box-sizing: border-box;
Expand Down
57 changes: 30 additions & 27 deletions frontend/src/views/authentication/LoginView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,42 @@ const { t } = useI18n();

<template>
<BaseLayout>
<div class="flex w-12 lg:w-10 mx-auto mb-8">
<div class="w-5 bg-primary text-white p-5">
<Title color="contrast">
{{ t('views.login.title') }}
</Title>
<div class="mb-4 mt-3">
{{ t('views.login.subtitle') }}
<div class="flex pb-7 h-full">
<div class="flex flex-column md:flex-row align-self-center w-12 lg:w-10 mx-auto">
<div class="w-12 md:w-5 bg-primary text-white p-5">
<Title color="contrast">
{{ t('views.login.title') }}
</Title>
<div class="mb-4 mt-3">
{{ t('views.login.subtitle') }}
</div>
<a :href="endpoints.auth.login">
<Button
icon-pos="right"
:icon="PrimeIcons.ARROW_RIGHT"
:label="t('views.login.button')"
severity="secondary"
/>
</a>
</div>
<a :href="endpoints.auth.login">
<Button
icon-pos="right"
:icon="PrimeIcons.ARROW_RIGHT"
:label="t('views.login.button')"
severity="secondary"
/>
</a>
</div>
<div class="w-7 relative surface-100 p-4">
<img :src="Illustration" :alt="t('views.login.illustration')" class="w-15rem" />
<div
class="absolute bottom-0 right-0 bg-primary text-white p-4 w-20rem"
style="transform: translateY(50%)"
>
<h1 class="mt-0">
{{ t('views.login.card.title') }}
</h1>
<span>
<div class="w-12 md:w-7 flex flex-column md:flex-row align-items-center md:align-items-end justify-content-between relative surface-100">
<img :src="Illustration" :alt="t('views.login.illustration')" class="w-10rem md:w-15rem m-4 ml-7" />
<div
class="bg-primary text-white p-4 w-full md:w-20rem"
>
<h1 class="mt-0">
{{ t('views.login.card.title') }}
</h1>
<span>
{{ t('views.login.card.subtitle') }}
</span>
</div>
</div>
</div>
</div>
</BaseLayout>
</template>

<style scoped lang="scss"></style>
<style lang="scss">
</style>
Loading

0 comments on commit 30d57b0

Please sign in to comment.