From 36f7cfa4bde70b05b6572490de5e8f50e24fd38e Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Sat, 29 Mar 2025 21:56:36 +0100
Subject: [PATCH] feat: deadline component verbeterd

---
 frontend/src/components/DeadlineSelector.vue        |  5 ++++-
 frontend/src/utils/assignmentForm.ts                |  8 +++++---
 frontend/src/views/assignments/CreateAssignment.vue | 11 ++++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/DeadlineSelector.vue b/frontend/src/components/DeadlineSelector.vue
index 898ed48a..38e59393 100644
--- a/frontend/src/components/DeadlineSelector.vue
+++ b/frontend/src/components/DeadlineSelector.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, defineEmits } from "vue";
+import {deadlineRules} from "@/utils/assignmentForm.ts";
 
 const date = ref("");
-const time = ref("");
+const time = ref("23:59");
 const emit = defineEmits(["update:deadline"]);
 
 const formattedDeadline = computed(() => {
@@ -26,6 +27,8 @@ const updateDeadline = () => {
                 type="date"
                 variant="outlined"
                 density="compact"
+                :rules="deadlineRules"
+                required
                 @update:modelValue="updateDeadline"
             ></v-text-field>
         </v-card-text>
diff --git a/frontend/src/utils/assignmentForm.ts b/frontend/src/utils/assignmentForm.ts
index b271dcc3..5ae4ad3b 100644
--- a/frontend/src/utils/assignmentForm.ts
+++ b/frontend/src/utils/assignmentForm.ts
@@ -81,12 +81,14 @@ export const classesRules = [
  */
 export const deadlineRules = [
     (value: string) => {
-        if (!value) return 'You must set a deadline.';
+        if (!value) return "You must set a deadline.";
 
-        const selectedDate = new Date(value);
+        const selectedDateTime = new Date(value);
         const now = new Date();
 
-        if (selectedDate <= now) return 'The deadline must be in the future.';
+        if (isNaN(selectedDateTime.getTime())) return "Invalid date or time.";
+
+        if (selectedDateTime <= now) return "The deadline must be in the future.";
 
         return true;
     },
diff --git a/frontend/src/views/assignments/CreateAssignment.vue b/frontend/src/views/assignments/CreateAssignment.vue
index 5e88ddb7..29b03346 100644
--- a/frontend/src/views/assignments/CreateAssignment.vue
+++ b/frontend/src/views/assignments/CreateAssignment.vue
@@ -8,6 +8,8 @@
 
     const {t, locale} = useI18n();
 
+    const form = ref();
+
     const language = ref(locale.value);
 
     const searchQuery = ref('');
@@ -80,8 +82,11 @@
 
     onMounted(fetchAllLearningPaths);
 
-    const submitFormHandler = () => {
-        console.log(deadline.value);
+    const submitFormHandler = async () => {
+        const { valid } = await form.value.validate();
+        console.log(valid);
+        console.log(deadline);
+        if (!valid) return;
         submitForm(assignmentTitle.value, selectedLearningPath.value, selectedClasses.value, groups.value, deadline.value);
     };
 </script>
@@ -91,7 +96,7 @@
     <div class="main-container">
         <h1 class="title">{{ t("new-assignment") }}</h1>
         <v-card class="form-card">
-            <v-form class="form-container" validate-on="submit lazy" @submit.prevent="submitFormHandler">
+            <v-form ref="form" class="form-container" validate-on="submit lazy" @submit.prevent="submitFormHandler">
                 <v-container class="step-container">
                     <v-card-text>
                         <v-text-field :v-model="assignmentTitle" :label="t('title')" :rules="assignmentTitleRules"