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 1/4] 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 efb562349..83be090b6 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 0a9dc6b79..bd795c3b9 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,
     };
   },
 };

From b75b102c1412fc546f600375ca8e60c14fd25194 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Tue, 6 Feb 2024 13:35:32 +0200
Subject: [PATCH 2/4] Removing console logs

---
 client/src/components/requests/eventRequest.vue | 2 --
 client/src/components/requests/leaveRequest.vue | 2 --
 2 files changed, 4 deletions(-)

diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
index 83be090b6..d254c2e97 100644
--- a/client/src/components/requests/eventRequest.vue
+++ b/client/src/components/requests/eventRequest.vue
@@ -68,8 +68,6 @@ export default {
       () => [startDate.value, endDate.value],
       async () => {
         setTimeout(async () => {
-          console.log(startDateField.value.validate(), "hereeee")
-
           startDateField.value.validate();
           endDateField.value.validate();
         }, 200);
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index bd795c3b9..518d1359f 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -96,8 +96,6 @@ export default {
       () => [startDate.value, endDate.value],
       async () => {
         setTimeout(async () => {
-          console.log(startDateField.value.validate(), "hereeee")
-
           startDateField.value.validate();
           endDateField.value.validate();
           actualDays.execute();

From 94063d01ade1a21f5991874f43bf0e60d692ef3e Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 7 Feb 2024 15:32:26 +0200
Subject: [PATCH 3/4] Show alert only if the form is valid

---
 client/src/components/requests/leaveRequest.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 518d1359f..045356830 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -1,6 +1,6 @@
 <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>
 
@@ -28,7 +28,7 @@
 import { useApi } from '@/hooks'
 import type { Api } from '@/types';
 import { useAsyncState } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { ApiClientBase } from '@/clients/api/base';
 
 export default {
@@ -106,10 +106,16 @@ export default {
     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.';
+      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(

From bb0b1a015c82b6adcbb16f2006d820709a2c74b4 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Thu, 8 Feb 2024 18:14:17 +0200
Subject: [PATCH 4/4] Added active class to the sidebar.

---
 client/src/components/DashboardList.vue | 16 ++++++++++++++--
 client/src/components/SideDrawer.vue    |  5 ++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/DashboardList.vue b/client/src/components/DashboardList.vue
index b7eed416c..6614097ea 100644
--- a/client/src/components/DashboardList.vue
+++ b/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>
diff --git a/client/src/components/SideDrawer.vue b/client/src/components/SideDrawer.vue
index 2d8b65cc4..f898658df 100644
--- a/client/src/components/SideDrawer.vue
+++ b/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>