chore: error message component

frontend/src/assets/lang/en.json

@@ -49,7 +49,7 @@
             "group_size": "Number of students in a group (1 for an individual project)",
             "max_score": "Maximum score that can be achieved",
             "visibility": "Make project visible to students",
-            "score_visibility": "Make score automatically visible to students when uploaded"
+            "score_visibility": "Make score, when uploaded, automatically visible to students"
         },
         "courses": {
             "create": "Create course",

frontend/src/assets/lang/nl.json

@@ -49,7 +49,7 @@
             "group_size": "Aantal studenten per groep (1 voor individueel project)",
             "max_score": "Maximale te behalen score",
             "visibility": "Project zichtbaar maken voor studenten",
-            "score_visibility": "Maak score automatisch zichtbaar voor studenten wanneer ingevuld"
+            "score_visibility": "Maak score, wanneer ingevuld, automatisch zichtbaar voor studenten"
         },
         "courses": {
             "create": "Creëer vak",

frontend/src/components/forms/ErrorMessage.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/* Props */
+const props = defineProps<{ field: any }>();
+</script>
+
+<template>
+    <span v-if="props.field.$error" class="p-error">{{ props.field.$errors[0].$message }}</span>
+</template>
+
+<style scoped lang="scss">
+.p-error {
+    display: block;
+}
+</style>

frontend/src/components/projects/ProjectCreateButton.vue

@@ -17,7 +17,7 @@ const props = defineProps<{ courses: Course[] }>();
 /* Dialog state to select the course you want to create a project for */
 const displayCourseSelection = ref(false);
 
-/* Method to create a project for the selected course */
+/* Method to route to the project creation view */
 const createProjectForCourse = (courseId: string): void => {
     push({ name: 'project-create', params: { courseId } });
     displayCourseSelection.value = false;
@@ -32,7 +32,7 @@ const createProjectForCourse = (courseId: string): void => {
         icon-pos="right"
         class="custom-button"
         @click="displayCourseSelection = true" />
-    <!-- Dialog to select the course for the project -->
+    <!-- Dialog to select the course you want to create a project for -->
     <Dialog
         v-model:visible="displayCourseSelection"
         modal

frontend/src/views/courses/CreateCourseView.vue

@@ -14,6 +14,7 @@ import { Course } from '@/types/Course';
 import { useCourses } from '@/composables/services/courses.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -27,18 +28,18 @@ const { createCourse } = useCourses();
 const form = reactive({
     name: '',
     description: '',
-    year: user.value ? new Date(user.value.getAcademicYear(new Date()), 0, 1) : new Date(),
+    year: user.value !== null && user.value !== undefined ? new Date(user.value.getAcademicYear(new Date()), 0, 1) : new Date(),
 });
 
-// Define validation rules for each form field using "computed"
+// Define validation rules for each form field
 const rules = computed(() => {
     return {
         name: { required: helpers.withMessage(t('validations.required'), required) },
         year: { required: helpers.withMessage(t('validations.required'), required) },
     };
 });
 
-// Use the "useVuelidate" function to perform form validation
+// useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
 const submitCourse = async (): Promise<void> => {
@@ -47,7 +48,6 @@ const submitCourse = async (): Promise<void> => {
 
     // Only submit the form if the validation was successful
     if (result) {
-        console.log(form.year.getFullYear());
         // Pass the course data to the service
         await createCourse(
             new Course(
@@ -77,7 +77,7 @@ const submitCourse = async (): Promise<void> => {
                     <div class="mb-4">
                         <label for="courseName">{{ t('views.courses.name') }}</label>
                         <InputText id="courseName" v-model="form.name" />
-                        <span v-if="v$.name.$error" class="p-error">{{ v$.name.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.name" />
                     </div>
 
                     <!-- Course description -->
@@ -89,15 +89,12 @@ const submitCourse = async (): Promise<void> => {
                     <!-- Course academic year -->
                     <div class="mb-4">
                         <label for="courseYear">{{ t('views.courses.year') }}</label>
-                        <Calendar id="courseYear" v-model="form.year" view="year" dateFormat="yy" showIcon >
+                        <Calendar id="courseYear" v-model="form.year" view="year" dateFormat="yy" showIcon>
                             <template #footer>
-                                <div style="text-align: center;">
-                                    {{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}
-                                </div>                            
+                                <div style="text-align: center">{{ form.year.getFullYear() }} - {{ form.year.getFullYear() + 1 }}</div>
                             </template>
                         </Calendar>
-
-                        <span v-if="v$.year.$error" class="p-error">{{ v$.year.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.year" />
                     </div>
 
                     <!-- Submit button -->

frontend/src/views/projects/CreateProjectView.vue

@@ -14,6 +14,7 @@ import { Project } from '@/types/Projects';
 import { useProject } from '@/composables/services/project.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -35,7 +36,7 @@ const form = reactive({
     scoreVisibility: false,
 });
 
-// Define validation rules for each form field using "computed"
+// Define validation rules for each form field
 const rules = computed(() => {
     return {
         name: { required: helpers.withMessage(t('validations.required'), required) },
@@ -49,7 +50,7 @@ const rules = computed(() => {
     };
 });
 
-// Use the "useVuelidate" function to perform form validation
+// useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
 const submitProject = async (): Promise<void> => {
@@ -95,7 +96,7 @@ const submitProject = async (): Promise<void> => {
                     <div class="mb-4">
                         <label for="projectName">{{ t('views.projects.name') }}</label>
                         <InputText id="projectName" v-model="form.name" />
-                        <span v-if="v$.name.$error" class="p-error">{{ v$.name.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.name" />
                     </div>
 
                     <!-- Project description -->
@@ -108,7 +109,7 @@ const submitProject = async (): Promise<void> => {
                     <div class="mb-4">
                         <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
                         <Calendar id="projectStartDate" v-model="form.startDate" dateFormat="dd-mm-yy" :min-date="new Date()" showIcon />
-                        <span v-if="v$.startDate.$error" class="p-error">{{ v$.startDate.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.startDate" />
                     </div>
 
                     <!-- Deadline of the project -->
@@ -122,21 +123,21 @@ const submitProject = async (): Promise<void> => {
                             showTime
                             hourFormat="24"
                             showIcon />
-                        <span v-if="v$.deadline.$error" class="p-error">{{ v$.deadline.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.deadline" />
                     </div>
 
                     <!-- Group size for the project -->
                     <div class="mb-4">
                         <label for="groupSize">{{ t('views.projects.group_size') }}</label>
                         <InputNumber id="groupSize" v-model="form.groupSize" :min="1" />
-                        <span v-if="v$.groupSize.$error" class="p-error">{{ v$.groupSize.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.groupSize" />
                     </div>
 
                     <!-- Max score for the project -->
                     <div class="mb-4">
                         <label for="maxScore">{{ t('views.projects.max_score') }}</label>
                         <InputNumber id="maxScore" v-model="form.maxScore" :min="1" />
-                        <span v-if="v$.maxScore.$error" class="p-error">{{ v$.maxScore.$errors[0].$message }}</span>
+                        <ErrorMessage :field="v$.maxScore" />
                     </div>
 
                     <!-- Visibility of the project -->
@@ -172,8 +173,4 @@ const submitProject = async (): Promise<void> => {
 label {
     margin-bottom: 0.5rem;
 }
-
-.p-error {
-    display: block;
-}
 </style>