From acb922c844da042f0bfb505ef1e9912391ce46ab Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Tue, 6 Feb 2024 13:30:31 +0200
Subject: [PATCH] Making date fields in calender editable

---
 .../src/components/requests/eventRequest.vue  | 111 ++++++------------
 .../src/components/requests/leaveRequest.vue  |  92 +++++++--------
 2 files changed, 84 insertions(+), 119 deletions(-)

diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
index efb56234..83be090b 100644
--- a/client/src/components/requests/eventRequest.vue
+++ b/client/src/components/requests/eventRequest.vue
@@ -1,93 +1,35 @@
 <template>
   <v-form ref="form" @submit.prevent="createEvent()">
     <div class="mt-3">
-      <v-text-field
-        color="info"
-        item-color="info"
-        base-color="info"
-        variant="outlined"
-        hide-details="auto"
-        label="Start Date"
-        v-model="startDate"
-        :readonly="true"
-      >
-        <template v-slot:append>
-          <v-icon color="info">mdi-calendar</v-icon>
-        </template>
-      </v-text-field>
+      <v-text-field ref="startDateField" color="info" item-color="info" base-color="info" variant="outlined"
+        hide-details="auto" label="From" v-model="startDate" type="date" :rules="[validateDates]"></v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field
-        color="info"
-        item-color="info"
-        base-color="info"
-        :readonly="true"
-        variant="outlined"
-        v-model="endDate"
-        hide-details="auto"
-        label="End Date"
-      >
-        <template v-slot:append>
-          <v-icon color="info">mdi-calendar</v-icon>
-        </template>
-      </v-text-field>
+      <v-text-field ref="endDateField" color="info" item-color="info" base-color="info" variant="outlined"
+        hide-details="auto" label="To" v-model="endDate" type="date" :rules="[validateDates]"></v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field
-        item-color="info"
-        base-color="info"
-        color="info"
-        variant="outlined"
-        label="Event Name"
-        v-model="name"
-        hide-details="auto"
-        :rules="fieldRequired"
-      >
+      <v-text-field item-color="info" base-color="info" color="info" variant="outlined" label="Event Name" v-model="name"
+        hide-details="auto" :rules="fieldRequired">
       </v-text-field>
     </div>
     <div class="mt-3">
-      <v-text-field
-        item-color="info"
-        base-color="info"
-        color="info"
-        variant="outlined"
-        label="Description"
-        v-model="description"
-        hide-details="auto"
-        :rules="fieldRequired"
-      >
+      <v-text-field item-color="info" base-color="info" color="info" variant="outlined" label="Description"
+        v-model="description" hide-details="auto" :rules="fieldRequired">
       </v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field
-        item-color="info"
-        base-color="info"
-        color="info"
-        variant="outlined"
-        label="Event Start Time"
-        v-model="eventStart"
-        hide-details="auto"
-        :rules="fieldRequired"
-        type="time"
-      >
+      <v-text-field item-color="info" base-color="info" color="info" variant="outlined" label="Event Start Time"
+        v-model="eventStart" hide-details="auto" :rules="fieldRequired" type="time">
       </v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field
-        item-color="info"
-        base-color="info"
-        color="info"
-        variant="outlined"
-        label="Event End Time"
-        v-model="eventEnd"
-        hide-details="auto"
-        :rules="fieldRequired"
-        type="time"
-      >
+      <v-text-field item-color="info" base-color="info" color="info" variant="outlined" label="Event End Time"
+        v-model="eventEnd" hide-details="auto" :rules="fieldRequired" type="time">
       </v-text-field>
     </div>
 
@@ -97,7 +39,7 @@
   </v-form>
 </template>
 <script lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { fieldRequired } from '@/utils'
 import { useApi } from '@/hooks'
 import { useAsyncState } from '@vueuse/core'
@@ -113,13 +55,34 @@ export default {
     const startDate = ref<string>(props.dates.startStr)
     const endDate = ref<any>(new Date(props.dates.endStr))
     endDate.value.setDate(endDate.value.getDate() - 1);
-    endDate.value = endDate.value.toISOString().split('T')[0];    
+    endDate.value = endDate.value.toISOString().split('T')[0];
     const name = ref<string>("")
     const description = ref<string>("")
     const form = ref()
     const eventStart = ref()
     const eventEnd = ref()
+    const startDateField = ref()
+    const endDateField = ref()
+
+    watch(
+      () => [startDate.value, endDate.value],
+      async () => {
+        setTimeout(async () => {
+          console.log(startDateField.value.validate(), "hereeee")
 
+          startDateField.value.validate();
+          endDateField.value.validate();
+        }, 200);
+      },
+    );
+
+
+    const validateDates = (value: string | null): string | boolean => {
+      if (!startDate.value) return 'Please select start date.';
+      if (!endDate.value) return 'Please select end date.';
+      if (endDate.value <= startDate.value) return 'End date must be after start date.';
+      return true;
+    };
     const from_date = computed(() => {
       let val = new Date(startDate.value)
       if (eventStart.value) {
@@ -165,7 +128,9 @@ export default {
       fieldRequired,
       eventStart,
       eventEnd,
-
+      startDateField,
+      endDateField,
+      validateDates,
       createEvent
     }
   }
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 0a9dc6b7..bd795c3b 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -5,55 +5,22 @@
     </v-alert>
 
     <div class="mt-3">
-      <v-text-field
-        color="info"
-        item-color="info"
-        base-color="info"
-        variant="outlined"
-        hide-details="auto"
-        label="From"
-        v-model="startDate"
-        :readonly="true"
-      >
-        <template v-slot:append>
-          <v-icon color="">mdi-calendar</v-icon>
-        </template>
-      </v-text-field>
+      <v-text-field ref="startDateField" color="info" item-color="info" base-color="info" variant="outlined"
+        hide-details="auto" label="From" v-model="startDate" type="date" :rules="[validateDates]"></v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field
-        color="info"
-        item-color="info"
-        base-color="info"
-        :readonly="true"
-        variant="outlined"
-        v-model="endDate"
-        hide-details="auto"
-        label="To"
-      >
-        <template v-slot:append>
-          <v-icon color="">mdi-calendar</v-icon>
-        </template>
-      </v-text-field>
+      <v-text-field ref="endDateField" color="info" item-color="info" base-color="info" variant="outlined"
+        hide-details="auto" label="To" v-model="endDate" type="date" :rules="[validateDates]"></v-text-field>
     </div>
-
     <div class="mt-3">
-      <v-autocomplete
-        color="info"
-        item-color="info"
-        base-color="info"
-        variant="outlined"
-        v-model="leaveReason"
-        :items="leaveReasons"
-        label="Reason"
-        return-object
-        item-title="name"
-      >
+      <v-autocomplete color="info" item-color="info" base-color="info" variant="outlined" v-model="leaveReason"
+        :items="leaveReasons" label="Reason" return-object item-title="name">
       </v-autocomplete>
     </div>
     <v-row class="pa-4 d-flex justify-end">
-      <v-btn color="primary" type="Submit" :disabled="!form?.isValid || !isValid || actualDays.state.value === 0"> Submit </v-btn>
+      <v-btn color="primary" type="Submit" :disabled="!form?.isValid || !isValid || actualDays.state.value === 0"> Submit
+      </v-btn>
     </v-row>
   </v-form>
 </template>
@@ -61,7 +28,7 @@
 import { useApi } from '@/hooks'
 import type { Api } from '@/types';
 import { useAsyncState } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { ApiClientBase } from '@/clients/api/base';
 
 export default {
@@ -73,16 +40,25 @@ export default {
   setup(props, ctx) {
     const $api = useApi()
     const form = ref()
+    const startDateField = ref()
+    const endDateField = ref()
     const startDate = ref<Date>(props.dates.startStr)
     const endDate = ref<any>(new Date(props.dates.endStr))
     endDate.value.setDate(endDate.value.getDate() - 1);
     endDate.value = endDate.value.toISOString().split('T')[0];
     const user = ApiClientBase.user
     const leaveReason = ref<Api.LeaveReason>()
-    const actualDays = useAsyncState($api.vacations.calculate.list({
-      start_date: startDate.value,
-      end_date: endDate.value,
-    }), [])
+
+    const actualDays = useAsyncState(
+      async () => {
+        return $api.vacations.calculate.list({
+          start_date: startDate.value,
+          end_date: endDate.value,
+        })
+      },
+      undefined,
+
+    )
 
     const isValid = computed(() => {
       let val = leaveReason.value ? true : false;
@@ -115,6 +91,27 @@ export default {
       }
     })
 
+
+    watch(
+      () => [startDate.value, endDate.value],
+      async () => {
+        setTimeout(async () => {
+          console.log(startDateField.value.validate(), "hereeee")
+
+          startDateField.value.validate();
+          endDateField.value.validate();
+          actualDays.execute();
+        }, 200);
+      },
+    );
+
+    const validateDates = (value: string | null): string | boolean => {
+      if (!startDate.value) return 'Please select start date.';
+      if (!endDate.value) return 'Please select end date.';
+      if (endDate.value <= startDate.value) return 'End date must be after start date.';
+      return true;
+    };
+
     async function createLeave() {
       if (leaveReason.value) {
         useAsyncState($api.vacations.create(
@@ -142,7 +139,10 @@ export default {
       isValid,
       actualDays,
       user,
+      startDateField,
+      endDateField,
       createLeave,
+      validateDates,
     };
   },
 };