From 4bf754b24121e66cb84434da49ee894002e663b4 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 27 Mar 2024 14:58:02 +0200
Subject: [PATCH 1/6] adding leave excuse and fraction of a day request

---
 .../src/components/requests/leaveRequest.vue  | 168 ++++++++++--------
 1 file changed, 98 insertions(+), 70 deletions(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 506a6ba2..24829d8d 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -3,8 +3,8 @@
     <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'
+        ? '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-if="user?.fullUser.user_type === 'Admin'">
@@ -14,32 +14,14 @@
       </v-radio-group>
     </div>
     <div class="mt-3" v-if="selectedOption === 'anotheruser'">
-      <v-autocomplete
-        color="info"
-        item-color="info"
-        base-color="info"
-        variant="outlined"
-        v-model="selectedUser"
-        :items="officeUsers"
-        item-title="full_name"
-        item-value="id"
-        label="User"
-        return-object
-        :rules="requiredRules"
-      >
+      <v-autocomplete color="info" item-color="info" base-color="info" variant="outlined" v-model="selectedUser"
+        :items="officeUsers" item-title="full_name" item-value="id" label="User" return-object :rules="requiredRules">
         <template #append-item v-if="reloadMore">
           <VContainer>
-            <VBtn
-              @click="
-                () => {
-                  return page++, count--, concatUsers()
-                }
-              "
-              block
-              color="secondary"
-              variant="tonal"
-              prepend-icon="mdi-reload"
-            >
+            <VBtn @click="() => {
+              return page++, count--, concatUsers()
+            }
+              " block color="secondary" variant="tonal" prepend-icon="mdi-reload">
               Load More Users
             </VBtn>
           </VContainer>
@@ -48,55 +30,41 @@
     </div>
 
     <div class="mt-3">
-      <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>
+      <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>
 
     <div class="mt-3">
-      <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>
+      <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-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>
+      <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 ref="excuseStartField" item-color="info" base-color="info" color="info" variant="outlined"
+        label="Vacation Start Time" v-model="excuseStart" hide-details="auto" type="time" :rules="[validateTimes]">
+      </v-text-field>
+    </div>
+
+    <div class="mt-3">
+      <v-text-field ref="excuseEndField" item-color="info" base-color="info" color="info" variant="outlined"
+        label="Vacation End Time" v-model="excuseEnd" hide-details="auto" type="time" :rules="[validateTimes]">
+      </v-text-field>
     </div>
-    <v-row class="pa-4 d-flex justify-end">
-      <v-btn
-        color="primary"
-        type="Submit"
-        :disabled="!form?.isValid || !isValid || actualDays.state.value === 0 || requesting"
-        :loading="requesting"
-      >
+
+    <div class="mt-3">
+      <v-text-field item-color="info" base-color="info" color="info" variant="outlined" label="Days" v-model="days"
+        hide-details="auto" :rules="fieldRequired" type="number">
+      </v-text-field>
+    </div>
+    <v-row class="mt-3 pa-4 d-flex justify-end">
+      <v-btn color="primary" type="Submit"
+        :disabled="!form?.isValid || !isValid || actualDays.state.value === 0 || requesting" :loading="requesting">
         Submit
       </v-btn>
     </v-row>
@@ -109,6 +77,7 @@ import { requiredRules, listUsers } from '@/utils'
 import { useAsyncState } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 import { ApiClientBase } from '@/clients/api/base'
+import { fieldRequired } from '@/utils'
 
 export default {
   name: 'leaveRequest',
@@ -126,6 +95,10 @@ export default {
     const count = ref(0)
     const startDateField = ref()
     const endDateField = ref()
+
+    const excuseStartField = ref()
+    const excuseEndField = ref()
+
     const startDate = ref<Date>(props.dates.startStr)
     const endDate = ref<any>(new Date(props.dates.endStr))
     endDate.value.setDate(endDate.value.getDate() - 1)
@@ -135,6 +108,30 @@ export default {
     const leaveReason = ref<Api.LeaveReason>()
     const leaveReasons = ref<Api.LeaveReason[]>([])
     const requesting = ref<boolean>(false)
+    const excuseStart = ref('08:00')
+    const excuseEnd = ref('17:00')
+    const days = ref()
+
+    const from_date = computed(() => {
+      let val = new Date(startDate.value)
+      if (excuseStart.value) {
+        const [hours, minutes] = excuseStart.value.split(':').map(Number)
+        val.setHours(hours, minutes, 0, 0)
+      }
+
+      return val.toISOString()
+    })
+    const end_date = computed(() => {
+      let val = new Date(endDate.value)
+      if (excuseEnd.value) {
+        const [hours, minutes] = excuseEnd.value.split(':').map(Number)
+        val.setHours(hours, minutes, 0, 0)
+      }
+
+      return val.toISOString()
+    })
+
+
     const actualDays = useAsyncState(async () => {
       return $api.vacations.calculate.list({
         start_date: startDate.value,
@@ -173,6 +170,10 @@ export default {
             {
               name: `Compensation  ${data[0].compensation.reserved} / ∞`,
               reason: 'compensation'
+            },
+            {
+              name: `Leave Request  ${data[0].compensation.reserved} / ∞`,
+              reason: 'leave_request'
             }
           ]
         }
@@ -213,6 +214,16 @@ export default {
       }
     )
 
+    watch(
+      () => [excuseStart.value, excuseEnd.value],
+      async () => {
+        setTimeout(async () => {
+          excuseStartField.value.validate()
+          excuseEndField.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.'
@@ -220,6 +231,13 @@ export default {
       return true
     }
 
+
+    const validateTimes = (value: string | null): string | boolean => {
+      if (!excuseEnd.value) return 'Please select end time.'
+      if (excuseEnd.value < excuseStart.value) return 'End time must be after start time.'
+      return true
+    }
+
     async function concatUsers() {
       const {
         page: currentPage,
@@ -231,6 +249,8 @@ export default {
       count.value = currentCount
       officeUsers.value = officeUsers.value.concat(newUsers)
     }
+
+
     onMounted(async () => {
       startDateField.value.validate()
       endDateField.value.validate()
@@ -238,6 +258,7 @@ export default {
       balance.execute()
       concatUsers()
     })
+
     const reloadMore = computed(() => {
       if (page.value === count.value) {
         return false
@@ -303,9 +324,16 @@ export default {
       requesting,
       count,
       selectedOption,
+      fieldRequired,
+      excuseStart,
+      excuseEnd,
+      days,
+      excuseStartField,
+      excuseEndField,
       concatUsers,
       createLeave,
-      validateDates
+      validateDates,
+      validateTimes
     }
   }
 }

From ed04f964c3650846dd3e2d70d3c25504fac42023 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 3 Apr 2024 03:01:47 +0200
Subject: [PATCH 2/6] Adding calculate times method

---
 .../src/components/requests/leaveRequest.vue  | 50 +++++++++++--------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 24829d8d..444f3fa1 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -4,7 +4,8 @@
       {{
         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'
+        : actualDays.state.value === 1 && days < 1 && days > 0 ? 'Actual vacation days requested are ' + days + ' days'
+          : 'Actual vacation days requested are ' + actualDays.state.value + ' days'
       }}
     </v-alert>
     <div class="mt-3" v-if="user?.fullUser.user_type === 'Admin'">
@@ -47,19 +48,13 @@
 
     <div class="mt-3">
       <v-text-field ref="excuseStartField" item-color="info" base-color="info" color="info" variant="outlined"
-        label="Vacation Start Time" v-model="excuseStart" hide-details="auto" type="time" :rules="[validateTimes]">
+        label="Vacation Start Time" v-model="excuseStart" hide-details="auto" type="time" :rules="[validateTimes]" :readonly="startDate !== endDate">
       </v-text-field>
     </div>
 
     <div class="mt-3">
       <v-text-field ref="excuseEndField" item-color="info" base-color="info" color="info" variant="outlined"
-        label="Vacation End Time" v-model="excuseEnd" hide-details="auto" type="time" :rules="[validateTimes]">
-      </v-text-field>
-    </div>
-
-    <div class="mt-3">
-      <v-text-field item-color="info" base-color="info" color="info" variant="outlined" label="Days" v-model="days"
-        hide-details="auto" :rules="fieldRequired" type="number">
+        label="Vacation End Time" v-model="excuseEnd" hide-details="auto" type="time" :rules="[validateTimes]" :readonly="startDate !== endDate">
       </v-text-field>
     </div>
     <v-row class="mt-3 pa-4 d-flex justify-end">
@@ -95,10 +90,8 @@ export default {
     const count = ref(0)
     const startDateField = ref()
     const endDateField = ref()
-
     const excuseStartField = ref()
     const excuseEndField = ref()
-
     const startDate = ref<Date>(props.dates.startStr)
     const endDate = ref<any>(new Date(props.dates.endStr))
     endDate.value.setDate(endDate.value.getDate() - 1)
@@ -109,7 +102,8 @@ export default {
     const leaveReasons = ref<Api.LeaveReason[]>([])
     const requesting = ref<boolean>(false)
     const excuseStart = ref('08:00')
-    const excuseEnd = ref('17:00')
+    const excuseEnd = ref('16:00')
+    const CORE_HOURS = 8;
     const days = ref()
 
     const from_date = computed(() => {
@@ -131,7 +125,6 @@ export default {
       return val.toISOString()
     })
 
-
     const actualDays = useAsyncState(async () => {
       return $api.vacations.calculate.list({
         start_date: startDate.value,
@@ -209,6 +202,11 @@ export default {
         setTimeout(async () => {
           startDateField.value.validate()
           endDateField.value.validate()
+          if (startDate.value !== endDate.value) {
+            days.value = 0;
+            excuseStart.value = '08:00'
+            excuseEnd.value = '16:00'
+          }
           actualDays.execute()
         }, 200)
       }
@@ -220,10 +218,12 @@ export default {
         setTimeout(async () => {
           excuseStartField.value.validate()
           excuseEndField.value.validate()
+          if (startDate.value === endDate.value) {
+            days.value = calculateTimes()
+          }
         }, 200)
       }
     )
-
     const validateDates = (value: string | null): string | boolean => {
       if (!startDate.value) return 'Please select start date.'
       if (!endDate.value) return 'Please select end date.'
@@ -231,13 +231,11 @@ export default {
       return true
     }
 
-
     const validateTimes = (value: string | null): string | boolean => {
       if (!excuseEnd.value) return 'Please select end time.'
       if (excuseEnd.value < excuseStart.value) return 'End time must be after start time.'
       return true
     }
-
     async function concatUsers() {
       const {
         page: currentPage,
@@ -249,8 +247,6 @@ export default {
       count.value = currentCount
       officeUsers.value = officeUsers.value.concat(newUsers)
     }
-
-
     onMounted(async () => {
       startDateField.value.validate()
       endDateField.value.validate()
@@ -258,7 +254,6 @@ export default {
       balance.execute()
       concatUsers()
     })
-
     const reloadMore = computed(() => {
       if (page.value === count.value) {
         return false
@@ -269,6 +264,19 @@ export default {
       return false
     })
 
+    function timeStringToHours(time: string): number {
+      const [hours, minutes] = time.split(':').map(Number);
+      return hours + minutes / 60;
+    }
+
+
+    function calculateTimes() {
+      const startTimeInHours = timeStringToHours(excuseStart.value);
+      const endTimeInHours = timeStringToHours(excuseEnd.value);
+      return (endTimeInHours - startTimeInHours) / CORE_HOURS
+
+    }
+
     async function createLeave() {
       requesting.value = true
       if (leaveReason.value) {
@@ -276,8 +284,8 @@ export default {
           await useAsyncState(
             $api.vacations.admin.create(selectedUser.value.id, {
               reason: leaveReason.value.reason,
-              from_date: startDate.value,
-              end_date: endDate.value
+              from_date: from_date.value,
+              end_date: end_date.value
             }),
             null,
             {

From ea950e7970738669de7009b33ca87af830f5e499 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 3 Apr 2024 03:11:57 +0200
Subject: [PATCH 3/6] sending correct end and start date

---
 client/src/components/requests/leaveRequest.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 444f3fa1..20bf1654 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -298,8 +298,8 @@ export default {
           await useAsyncState(
             $api.vacations.create({
               reason: leaveReason.value.reason,
-              from_date: startDate.value,
-              end_date: endDate.value
+              from_date: from_date.value,
+              end_date: end_date.value
             }),
             undefined,
             {

From 5db400298ee9dbdf2c00b233140bb8f7dbd239c4 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Thu, 4 Apr 2024 11:58:16 +0200
Subject: [PATCH 4/6] Adding leave excuse value

---
 client/src/components/requests/leaveRequest.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 20bf1654..48aee2ad 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -165,8 +165,8 @@ export default {
               reason: 'compensation'
             },
             {
-              name: `Leave Request  ${data[0].compensation.reserved} / ∞`,
-              reason: 'leave_request'
+              name: `Leave Excuse  ${data[0].leave_excuses.reserved} / ${data[0].leave_excuses.all}`,
+              reason: 'leave_excuses'
             }
           ]
         }

From b0a1279196704de3fe32586be0e7e5373a216873 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Thu, 4 Apr 2024 13:05:26 +0200
Subject: [PATCH 5/6] Changing AdminApplyVacationForUserSerializer

---
 server/cshr/serializers/vacations.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/server/cshr/serializers/vacations.py b/server/cshr/serializers/vacations.py
index f52ecf65..4779763c 100644
--- a/server/cshr/serializers/vacations.py
+++ b/server/cshr/serializers/vacations.py
@@ -1,6 +1,7 @@
 """This file will containes all vacation serializers."""
 from rest_framework.serializers import (
     ModelSerializer,
+    DateTimeField,
     SerializerMethodField,
 )
 from cshr.models.users import User
@@ -254,5 +255,5 @@ class VacationBalanceAdjustmentSerializer(serializers.Serializer):
 
 class AdminApplyVacationForUserSerializer(serializers.Serializer):
     reason = serializers.CharField()
-    from_date = serializers.DateField()
-    end_date = serializers.DateField()
+    from_date = serializers.DateTimeField()
+    end_date = serializers.DateTimeField()

From d4b62b0ba9b31e44e5e272e246f6ae83be159ae4 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Sun, 14 Apr 2024 10:29:56 +0200
Subject: [PATCH 6/6] Adding days value condition

---
 client/src/components/requests/leaveRequest.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 48aee2ad..3283547f 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -273,7 +273,11 @@ export default {
     function calculateTimes() {
       const startTimeInHours = timeStringToHours(excuseStart.value);
       const endTimeInHours = timeStringToHours(excuseEnd.value);
-      return (endTimeInHours - startTimeInHours) / CORE_HOURS
+      const days = (endTimeInHours - startTimeInHours) / CORE_HOURS
+      if( days === 0.25 || days === 0.50 || days === 0.75){
+        return days   
+      }
+      return 1
 
     }