feat: nieuwe component voor de deadline

frontend/src/components/DeadlineSelector.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, computed, defineEmits } from "vue";
+
+const date = ref("");
+const time = ref("");
+const emit = defineEmits(["update:deadline"]);
+
+const formattedDeadline = computed(() => {
+    if (!date.value || !time.value) return "";
+    return `${date.value} ${time.value}`;
+});
+
+const updateDeadline = () => {
+    if (date.value && time.value) {
+        emit("update:deadline", formattedDeadline.value);
+    }
+};
+</script>
+
+<template>
+    <div>
+        <v-card-text>
+            <v-text-field
+                v-model="date"
+                label="Select Deadline Date"
+                type="date"
+                variant="outlined"
+                density="compact"
+                @update:modelValue="updateDeadline"
+            ></v-text-field>
+        </v-card-text>
+
+        <v-card-text>
+            <v-text-field
+                v-model="time"
+                label="Select Deadline Time"
+                type="time"
+                variant="outlined"
+                density="compact"
+                @update:modelValue="updateDeadline"
+            ></v-text-field>
+        </v-card-text>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/components/GroupSelector.vue

@@ -54,7 +54,7 @@ const createGroup = () => {
             item-title="displayName"
             item-value="id"
             :label="t('pick-class')"
-            variant="solo"
+            variant="outlined"
             clearable
             hide-details
             density="compact"
@@ -67,7 +67,7 @@ const createGroup = () => {
             item-title="title"
             item-value="value"
             :label="t('choose-students')"
-            variant="solo"
+            variant="outlined"
             clearable
             multiple
             hide-details