tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: deadline component verbeterd

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-29 21:56:36 +01:00
parent 3e00f0eb1f
commit 36f7cfa4bd
3 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/DeadlineSelector.vue
View file

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, defineEmits } from "vue"; import { ref, computed, defineEmits } from "vue";
import {deadlineRules} from "@/utils/assignmentForm.ts";
const date = ref(""); const date = ref("");
const time = ref(""); const time = ref("23:59");
const emit = defineEmits(["update:deadline"]); const emit = defineEmits(["update:deadline"]);
const formattedDeadline = computed(() => { const formattedDeadline = computed(() => {
@ -26,6 +27,8 @@ const updateDeadline = () => {
type="date" type="date"
variant="outlined" variant="outlined"
density="compact" density="compact"
:rules="deadlineRules"
required
@update:modelValue="updateDeadline" @update:modelValue="updateDeadline"
></v-text-field> ></v-text-field>
</v-card-text> </v-card-text>

8
frontend/src/utils/assignmentForm.ts
View file

@ -81,12 +81,14 @@ export const classesRules = [
*/ */
export const deadlineRules = [ export const deadlineRules = [
(value: string) => { (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(); 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; return true;
}, },

11
frontend/src/views/assignments/CreateAssignment.vue
View file

@ -8,6 +8,8 @@
const {t, locale} = useI18n(); const {t, locale} = useI18n();
const form = ref();
const language = ref(locale.value); const language = ref(locale.value);
const searchQuery = ref(''); const searchQuery = ref('');
@ -80,8 +82,11 @@
onMounted(fetchAllLearningPaths); onMounted(fetchAllLearningPaths);
const submitFormHandler = () => { const submitFormHandler = async () => {
console.log(deadline.value); 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); submitForm(assignmentTitle.value, selectedLearningPath.value, selectedClasses.value, groups.value, deadline.value);
}; };
</script> </script>
@ -91,7 +96,7 @@
<div class="main-container"> <div class="main-container">
<h1 class="title">{{ t("new-assignment") }}</h1> <h1 class="title">{{ t("new-assignment") }}</h1>
<v-card class="form-card"> <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-container class="step-container">
<v-card-text> <v-card-text>
<v-text-field :v-model="assignmentTitle" :label="t('title')" :rules="assignmentTitleRules" <v-text-field :v-model="assignmentTitle" :label="t('title')" :rules="assignmentTitleRules"