From 400c6b3244ae3ec61755d36993ab20c780b7272d Mon Sep 17 00:00:00 2001
From: Jan Cortiel <jan.cortiel@redlink.at>
Date: Mon, 2 Dec 2024 14:10:47 +0100
Subject: [PATCH] #541, #555: Refactor imports and optimize date computations

Switches from require to import statements for consistency and modern syntax in both JavaScript and Vue files. Introduces computed properties for minDate and maxDate to improve date handling and ensure accurate time settings for scheduled events. This enhances code readability and maintains better date boundaries within the scheduler component.
---
 src/components/shared/Scheduler.vue | 30 +++++++++++++++++++++--------
 tailwind.config.js                  |  8 ++++----
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/shared/Scheduler.vue b/src/components/shared/Scheduler.vue
index ab05926..6feecad 100644
--- a/src/components/shared/Scheduler.vue
+++ b/src/components/shared/Scheduler.vue
@@ -4,7 +4,7 @@ Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
 Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
-  import { inject, ref, Ref, watch } from 'vue';
+  import { computed, inject, ref, Ref, watch } from 'vue';
   import Calendar from 'primevue/calendar';
   import Button from 'primevue/button';
   import Checkbox from 'primevue/checkbox';
@@ -22,6 +22,18 @@ Licensed under the Elastic License 2.0. */
 
   const studyStore = useStudyStore();
 
+  const minDate = computed(() => {
+    const date = new Date(studyStore.study.plannedStart!);
+    date.setHours(0, 0, 0);
+    return date;
+  });
+
+  const maxDate = computed(() => {
+    const date = new Date(studyStore.study.plannedEnd!);
+    date.setHours(23, 59, 59);
+    return date;
+  });
+
   const scheduler: any = dialogRef.value.data.scheduler;
   const returnSchedule: Ref<Event> = ref({
     type: scheduler.type ?? ScheduleType.Event,
@@ -33,9 +45,11 @@ Licensed under the Elastic License 2.0. */
   const calendarStart: Ref<Date> = ref(
     new Date(returnSchedule.value.dtstart as string),
   );
+  calendarStart.value.setHours(0, 0, 0);
   const calendarEnd: Ref<Date> = ref(
     new Date(returnSchedule.value.dtend as string),
   );
+  calendarEnd.value.setHours(23, 59, 59);
   let calendarEndChangedWithStart: boolean = false;
 
   watch(calendarStart, (newValue, oldValue) => {
@@ -293,8 +307,8 @@ Licensed under the Elastic License 2.0. */
         v-model="calendarStart"
         :date-format="dateFormat"
         :placeholder="dateFormat"
-        :min-date="new Date(studyStore.study.plannedStart as string)"
-        :max-date="new Date(studyStore.study.plannedEnd as string)"
+        :min-date="minDate"
+        :max-date="maxDate"
         :manual-input="false"
         autocomplete="off"
         class="start-date col-span-2 col-start-2 w-full"
@@ -303,8 +317,8 @@ Licensed under the Elastic License 2.0. */
       <Calendar
         v-if="!entireDayCheckbox"
         v-model="calendarStart"
-        :min-date="new Date(studyStore.study.plannedStart as string)"
-        :max-date="new Date(studyStore.study.plannedEnd as string)"
+        :min-date="minDate"
+        :max-date="maxDate"
         :manual-input="false"
         placeholder="hh:mm"
         class="p-calendar-timeonly start-date start-time col-span-1"
@@ -322,7 +336,7 @@ Licensed under the Elastic License 2.0. */
         v-if="!singleDayEventCheckbox"
         v-model="calendarEnd"
         :min-date="calendarStart"
-        :max-date="new Date(studyStore.study.plannedEnd as string)"
+        :max-date="maxDate"
         :manual-input="false"
         :date-format="dateFormat"
         :placeholder="dateFormat"
@@ -340,8 +354,8 @@ Licensed under the Elastic License 2.0. */
         v-if="!entireDayCheckbox"
         v-model="calendarEnd"
         :manual-input="false"
-        :min-date="new Date(studyStore.study.plannedStart as string)"
-        :max-date="new Date(studyStore.study.plannedEnd as string)"
+        :min-date="minDate"
+        :max-date="maxDate"
         placeholder="hh:mm"
         class="p-calendar-timeonly start-date start-time col-span-1"
         :class="{
diff --git a/tailwind.config.js b/tailwind.config.js
index 6d17e37..e1df786 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,4 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 /** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
 module.exports = {
@@ -11,8 +11,8 @@ module.exports = {
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/aspect-ratio'),
+    import('@tailwindcss/forms'),
+    import('@tailwindcss/typography'),
+    import('@tailwindcss/aspect-ratio'),
   ],
 };