chore: fixes and improvements

backend/api/serializers/checks_serializer.py

@@ -76,7 +76,6 @@ class Meta:
     def validate(self, attrs):
         data = super().validate(attrs)
 
-
         if "time_limit" in data and not 10 <= data["time_limit"] <= 1000:
             raise serializers.ValidationError(_("extra_check.error.time_limit"))
 

frontend/src/components/forms/ErrorMessage.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
+import Message from 'primevue/message';
+
 /* Props */
-const props = defineProps<{ field: any }>();
+defineProps<{ field: any }>();
+
 </script>
 
 <template>
-    <span v-if="props.field.$error" class="p-error">{{ props.field.$errors[0].$message }}</span>
+    <Message severity="warn" v-if="field.$error" :closable="false">
+        {{ field.$errors[0].$message }}
+    </Message>
 </template>
 
 <style scoped lang="scss">

frontend/src/components/projects/ExtraChecksUpload.vue

@@ -98,7 +98,11 @@ async function onDockerImageUpload(event: any): Promise<void> {
     <!-- List with the extra checks -->
     <div class="flex flex-column gap-3 border-round border-1 border-400 p-3">
         <template v-if="extraChecks && extraChecks.length > 0">
-            <div class="flex align-items-center justify-content-between gap-2" v-for="(item, index) in extraChecks">
+            <div
+                class="flex align-items-center justify-content-between gap-2"
+                v-for="(item, index) in extraChecks"
+                :key="index"
+            >
                 <span>{{ item.name }}</span>
                 <Button
                     icon="pi pi-times"

frontend/src/components/projects/ProjectForm.vue

@@ -9,7 +9,7 @@ import Skeleton from 'primevue/skeleton';
 import InputSwitch from 'primevue/inputswitch';
 import { Project } from '@/types/Project.ts';
 import { useI18n } from 'vue-i18n';
-import { computed, onMounted, ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { helpers, required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { type Course } from '@/types/Course.ts';
@@ -46,17 +46,19 @@ const rules = computed(() => {
     };
 });
 
-const v$ = useVuelidate(rules, form);
+const v$ = useVuelidate(rules, form, {
+    $scope: 'form'
+});
 
 /**
  * Save the project form to the API backend.
  */
 async function saveProject(): Promise<void> {
     // Validate the form.
-    const result = await v$.value.$validate();
+    const validated = await v$.value.$validate();
 
     // Only submit the form if the validation was successful
-    if (result || true) {
+    if (validated) {
         emit('update:project', form.value, numberOfGroups.value);
     }
 }
@@ -74,7 +76,7 @@ function saveDockerImage(image: DockerImage, file: File): void {
 /**
  * Watch for changes in the project prop and update the form values.
  */
-watchEffect(async () => {
+watchEffect(() => {
     /* Set the form values with the existing project */
     const project = props.project;
 

frontend/src/components/projects/ProjectStructureTree.vue

@@ -111,7 +111,7 @@ function addStructureCheck(check: StructureCheck | null = null): void {
  * @param node
  */
 function selectStructureCheck(node: TreeNode): void {
-    if (node.check) {
+    if (node.check === true) {
         selectedStructureCheck.value = node.data;
     }
 }
@@ -195,7 +195,7 @@ function newTreeNode(check: StructureCheck, key: string, label: string, leaf: bo
                         <template v-if="node.check && editingStructureCheck === node.data">
                             <InputText
                                 :model-value="node.label"
-                                @keydown.enter="updateStructureCheckName($event.target as HTMLInputElement)"
+                                @change="updateStructureCheckName($event.target as HTMLInputElement)"
                             >
                             </InputText>
                         </template>

frontend/src/views/projects/UpdateProjectView.vue

@@ -54,7 +54,7 @@ async function saveProject(newProject: Project): Promise<void> {
 
             // Delete the deleted checks
             const deletedChecks = (project.value.extra_checks ?? []).filter(
-                (check) => !newProject.extra_checks?.find((newCheck: ExtraCheck) => newCheck.id === check.id),
+                (check) => !(newProject.extra_checks ?? []).find((newCheck: ExtraCheck) => newCheck.id === check.id),
             );
 
             for (const check of deletedChecks) {