Making date fields in calender editable

client/src/components/DashboardList.vue

@@ -1,8 +1,7 @@
 <template>
-  <v-list>
+  <v-list active-class="v-list-item__overlay">
     <v-list-item
       v-for="item in items"
-      active-class="v-list-item__overlay"
       :key="item.id"
       @click="$emit('item-selected', item)"
     >
@@ -27,3 +26,16 @@ export default {
   }
 }
 </script>
+
+<style>
+.v-list-item__overlay{
+  background-color: #47a2ff !important;
+}
+.v-list-item:hover > .v-list-item__overlay{
+  background-color: #47a2ff !important;
+
+}
+.v-list-item--variant-text .v-list-item__overlay {
+  background-color: #47a2ff !important;
+}
+</style>

client/src/components/SideDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-layout>
-      <v-navigation-drawer v-if="$route.path != '/login'" theme="dark" permanent>
+      <v-navigation-drawer v-if="$route.path != '/login'" theme="dark" permanent temporary>
         <router-link to="/">
           <v-img :src="logo" max-width="110" class="ml-3 mt-5 mb-4"></v-img>
         </router-link>
@@ -127,4 +127,7 @@ export default {
   color: var(--link-color);
   cursor: pointer;
 }
+.router-link-active{
+  background-color: #47a2ff;
+}
 </style>

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,32 @@ 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 () => {
+          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 +126,9 @@ export default {
       fieldRequired,
       eventStart,
       eventEnd,
-
+      startDateField,
+      endDateField,
+      validateDates,
       createEvent
     }
   }

client/src/components/requests/leaveRequest.vue

@@ -1,67 +1,34 @@
 <template>
   <v-form ref="form" @submit.prevent="createLeave()">
-    <v-alert density="compact" class="pa-5 my-5" type="warning">
+    <v-alert v-if="form?.isValid && isValid" density="compact" class="pa-5 my-5" type="warning">
       {{ actualDays.state.value === 0 ? "Actual vacation days requested is zero, Selected days might include weekends or public holidays" : "Actual vacation days requested are " + actualDays.state.value +" days" }}
     </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>
 <script lang="ts">
 import { useApi } from '@/hooks'
 import type { Api } from '@/types';
 import { useAsyncState } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import { computed, onMounted, 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,31 @@ export default {
       }
     })
 
+
+    watch(
+      () => [startDate.value, endDate.value],
+      async () => {
+        setTimeout(async () => {
+          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;
+    };
+
+    onMounted(() => {
+      startDateField.value.validate();
+      endDateField.value.validate();
+
+    })
+
     async function createLeave() {
       if (leaveReason.value) {
         useAsyncState($api.vacations.create(
@@ -142,7 +143,10 @@ export default {
       isValid,
       actualDays,
       user,
+      startDateField,
+      endDateField,
       createLeave,
+      validateDates,
     };
   },
 };