From 97383b2764e81ae9bf00bcdefdfe5b4ef33054fc Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Tue, 30 Jan 2024 17:12:09 +0200
Subject: [PATCH 1/5] vacation card enhancments

---
 client/src/components/cards/holidayCard.vue  |  1 -
 client/src/components/cards/vacationCard.vue | 50 +++++++-------------
 2 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/client/src/components/cards/holidayCard.vue b/client/src/components/cards/holidayCard.vue
index baad11c7..97f7fa73 100644
--- a/client/src/components/cards/holidayCard.vue
+++ b/client/src/components/cards/holidayCard.vue
@@ -3,7 +3,6 @@
     <div class="d-flex flex-row-reverse">
       <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
     </div>
-    <div class="d-flex expired" v-if="holiday.expired">expired</div>
     <v-card-title class="text-center mb-5 my-2">
       <h1 :class="`${holiday.expired ? 'text-error' : ''}`">{{ holiday.location.country }}</h1>
     </v-card-title>
diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
index ebb576e1..9cf65407 100644
--- a/client/src/components/cards/vacationCard.vue
+++ b/client/src/components/cards/vacationCard.vue
@@ -9,12 +9,11 @@
       vacation.end_date }} </b> vacation</v-card-title>
     <br>
 
-    <v-row class="d-flex flex-row-reverse" v-if="couldUpdate">
-      <v-btn color="primary" class="ma-4" @click="readOnly = false">Update</v-btn>
-      <v-btn color="red" class="ma-4" @click="handleDelete">Delete</v-btn>
-    </v-row>
-
     <v-form ref="form" @submit.prevent="updateVacation()">
+      <v-row class="d-flex flex-row-reverse" v-if="couldUpdate">
+        <v-btn color="primary" class="ma-4" type="submit" :disabled="!form?.isValid || disabled">Update</v-btn>
+        <v-btn color="red" class="ma-4" @click="handleDelete">Delete</v-btn>
+      </v-row>
       <v-card elevation="0" class="pa-8">
         <v-row class="py-5">
           <v-col cols="3">
@@ -28,18 +27,7 @@
 
           </v-col>
 
-          <v-col cols="3">
-            <v-icon>mdi-account</v-icon>
 
-            <b> Approval User </b>
-
-          </v-col>
-          <v-col cols="3" class="text-right" v-if="vacation.isUpdated">
-            {{ vacation.approval_user ? vacation.approval_user : "Under approving" }}
-          </v-col>
-          <v-col cols="3" class="text-right" v-else>
-            {{ vacation.approval_user.email ? vacation.approval_user.email : "Under approving" }}
-          </v-col>
         </v-row>
 
         <v-row>
@@ -51,7 +39,7 @@
           </v-col>
           <v-col cols="4">
             <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
-              label="From" v-model="startDate" :readonly="readOnly" type="date">
+              label="From" v-model="startDate" :readonly="!couldUpdate" type="date">
             </v-text-field>
           </v-col>
 
@@ -63,7 +51,7 @@
           </v-col>
           <v-col cols="4">
             <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
-              label="To" v-model="endDate" :readonly="readOnly" type="date" :rules="[validateEndDate]">
+              label="To" v-model="endDate" :readonly="!couldUpdate" type="date" :rules="[validateEndDate]">
             </v-text-field>
           </v-col>
         </v-row>
@@ -78,7 +66,7 @@
           <v-col cols="4">
             <v-autocomplete color="primary" item-color="primary" base-color="primary" variant="outlined"
               v-model="leaveReason" :items="leaveReasons" label="Reason" return-object item-title="name"
-              :readonly="readOnly">
+              :readonly="!couldUpdate">
             </v-autocomplete>
 
           </v-col>
@@ -91,13 +79,6 @@
 
           </v-col>
         </v-row>
-        <v-row class="d-flex flex-row-reverse" v-if="!readOnly">
-          <v-btn color="" class="ma-4" @click="readOnly = true">Cancel</v-btn>
-          <v-btn color="primary" class="ma-4" type="submit" :disabled="!form?.isValid">
-            Submit
-          </v-btn>
-
-        </v-row>
       </v-card>
     </v-form>
 
@@ -111,7 +92,7 @@
 </template>
 <script lang="ts">
 import type { Api } from '@/types';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { useState } from '@/store'
 import { useApi } from '@/hooks'
@@ -135,12 +116,9 @@ export default {
     const endDate = ref<Date>(props.vacation.end_date)
     const leaveReason = ref<Api.LeaveReason>({ name: transformString(props.vacation.reason), reason: props.vacation.reason })
     const form = ref()
+    const disabled = ref<boolean>(true)
     const state = useState()
-    const readOnly = ref<boolean>(true)
     const leaveReasons = ref<Api.LeaveReason[]>([{
-      name: "Public Holidays",
-      reason: "public_holiday"
-    }, {
       name: "Emergency Leaves",
       reason: "emergency_leaves",
     }, {
@@ -195,6 +173,14 @@ export default {
       return false
     });
 
+    watch([leaveReason, startDate, endDate], ([newLeaveReason, newStartDate, newEndDate], [oldLeaveReason, oldStartDate, oldEndDate]) => {
+      if (newLeaveReason.name !== oldLeaveReason.name || newStartDate !== oldStartDate || newEndDate !== oldEndDate) {
+        disabled.value = false;
+        return
+      }
+      disabled.value = true;
+
+    });
 
     function validateEndDate(value: any) {
       if (startDate.value && value <= startDate.value) {
@@ -260,10 +246,10 @@ export default {
 
     return {
       startDate,
+      disabled,
       endDate,
       leaveReason,
       leaveReasons,
-      readOnly,
       form,
       state,
       couldApprove,

From 65c6eff5c51170be6d3131c94c5af62737ac84eb Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Tue, 30 Jan 2024 19:31:42 +0200
Subject: [PATCH 2/5] Leave request enhancmantes

---
 .../src/components/requests/leaveRequest.vue  | 72 ++++++++++---------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index d637abe9..510a01fd 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -1,6 +1,11 @@
 
 <template>
   <v-form ref="form" @submit.prevent="createLeave()">
+
+    <v-alert 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="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
         label="From" v-model="startDate" :readonly="true">
@@ -31,7 +36,8 @@
     <v-row class="mt-3 d-flex flex-row-reverse">
 
       <v-col cols="3">
-        <v-btn color="primary" type="submit" :disabled="!form?.isValid || !isValid" width="100%">
+        <v-btn color="primary" type="submit" :disabled="!form?.isValid || !isValid || actualDays.state.value === 0"
+          width="100%">
           Submit
         </v-btn>
       </v-col>
@@ -43,7 +49,7 @@ import { useApi } from '@/hooks'
 import type { Api } from '@/types';
 import { useAsyncState } from '@vueuse/core';
 import { computed, ref } from 'vue';
-
+import { useState } from '@/store'
 
 export default {
   name: "leaveRequest",
@@ -52,53 +58,52 @@ export default {
     'create-event': (item: any) => item,
   },
   setup(props, ctx) {
+    const state = useState()
     const $api = useApi()
     const form = ref()
     const startDate = ref<Date>(props.dates.startStr)
     const endDate = ref<Date>(props.dates.endStr)
     const leaveReason = ref<Api.LeaveReason>()
+    const actualDays = useAsyncState($api.vacations.calculate.list({
+      start_date: startDate.value,
+      end_date: endDate.value,
+    }
+    ), [])
 
     const isValid = computed(() => {
       let val = leaveReason.value ? true : false;
       return val;
     });
-
-
-    const leaveReasons = ref<Api.LeaveReason[]>([{
-      name: "Public Holidays",
-      reason: "public_holidays"
-    }, {
-      name: "Emergency Leaves",
-      reason: "emergency_leaves",
-    }, {
-      name: "Sick Leaves",
-      reason: "sick_leaves",
-    },
-    {
-      name: "Annual Leaves",
-      reason: "annual_leaves",
-    },
-    {
-      name: "Unpaid",
-      reason: "unpaid",
-    },
-    {
-      name: "Compensation",
-      reason: "compensation",
-    },
+    const leaveReasons = ref<Api.LeaveReason[]>([
     ])
 
-    async function calculateActualDays() {
-      return await $api.vacations.calculate.list({
-        start_date: startDate.value,
-        end_date: endDate.value,
+    const balance = useAsyncState($api.vacations.getVacationBalance({ "user_ids": state.user.value.value.id }), null, {
+      onSuccess(data: any) {
+        leaveReasons.value = [{
+          name: `Emergency Leaves  ${data[0].emergency_leaves.reserved} / ${data[0].emergency_leaves.all}`,
+          reason: "emergency_leaves",
+        }, {
+          name: `Sick Leaves  ${data[0].sick_leaves.reserved} / ∞`,
+          reason: "sick_leaves",
+        },
+        {
+          name: `Annual Leaves  ${data[0].annual_leaves.reserved} / ${data[0].annual_leaves.all}`,
+          reason: "annual_leaves",
+        },
+        {
+          name: `Unpaid ${data[0].unpaid.reserved} / ∞`,
+          reason: "unpaid",
+        },
+        {
+          name: `Compensation  ${data[0].compensation.reserved} / ∞`,
+          reason: "compensation",
+        },]
+
       }
-      )
-    }
+    })
 
     async function createLeave() {
       if (leaveReason.value) {
-        calculateActualDays()
         useAsyncState($api.vacations.create(
           {
             reason: leaveReason.value.reason,
@@ -121,6 +126,7 @@ export default {
       leaveReason,
       form,
       isValid,
+      actualDays,
       createLeave,
     };
   },

From 08c1c83800706e96e005c96ff0bc36c3a33b5001 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 31 Jan 2024 16:50:11 +0200
Subject: [PATCH 3/5] Fixing end dates

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

diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
index ddc001c3..d9c47071 100644
--- a/client/src/components/requests/eventRequest.vue
+++ b/client/src/components/requests/eventRequest.vue
@@ -85,7 +85,9 @@ export default {
   setup(props, ctx) {
     const $api = useApi()
     const startDate = ref<string>(props.dates.startStr)
-    const endDate = ref<string>(props.dates.endStr)
+    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 name = ref<string>("")
     const description = ref<string>("")
     const form = ref()
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 0e66dac2..6b3d218d 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -62,7 +62,9 @@ export default {
     const $api = useApi()
     const form = ref()
     const startDate = ref<Date>(props.dates.startStr)
-    const endDate = ref<Date>(props.dates.endStr)
+    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({

From fcd26db94aa8f2edb39dcddf3039d9dae1941004 Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 31 Jan 2024 17:44:26 +0200
Subject: [PATCH 4/5] Removing public holiday and adding vacation balance

---
 client/src/components/cards/vacationCard.vue  | 50 +++++++++----------
 .../src/components/requests/leaveRequest.vue  |  1 -
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
index 7263c8ef..98ae03bc 100644
--- a/client/src/components/cards/vacationCard.vue
+++ b/client/src/components/cards/vacationCard.vue
@@ -112,32 +112,32 @@ export default {
     const form = ref()
     const disabled = ref<boolean>(true)
     const user = ApiClientBase.user
-    const leaveReasons = ref<Api.LeaveReason[]>([
-      {
-        name: 'Public Holidays',
-        reason: 'public_holiday'
-      },
-      {
-        name: 'Emergency Leaves',
-        reason: 'emergency_leaves'
-      },
-      {
-        name: 'Sick Leaves',
-        reason: 'sick_leaves'
-      },
-      {
-        name: 'Annual Leaves',
-        reason: 'annual_leaves'
-      },
-      {
-        name: 'Unpaid',
-        reason: 'unpaid'
-      },
-      {
-        name: 'Compensation',
-        reason: 'compensation'
+    const leaveReasons = ref<Api.LeaveReason[]>([])
+
+    const balance = useAsyncState($api.vacations.getVacationBalance({ "user_ids": user.value?.fullUser.id }), null, {
+      onSuccess(data: any) {
+        leaveReasons.value = [{
+          name: `Emergency Leaves  ${data[0].emergency_leaves.reserved} / ${data[0].emergency_leaves.all}`,
+          reason: "emergency_leaves",
+        }, {
+          name: `Sick Leaves  ${data[0].sick_leaves.reserved} / ∞`,
+          reason: "sick_leaves",
+        },
+        {
+          name: `Annual Leaves  ${data[0].annual_leaves.reserved} / ${data[0].annual_leaves.all}`,
+          reason: "annual_leaves",
+        },
+        {
+          name: `Unpaid ${data[0].unpaid.reserved} / ∞`,
+          reason: "unpaid",
+        },
+        {
+          name: `Compensation  ${data[0].compensation.reserved} / ∞`,
+          reason: "compensation",
+        },]
+
       }
-    ])
+    })
     const couldUpdate = computed(() => {
       if (user.value) {
         if (props.vacation.status == 'pending') {
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 6b3d218d..27617943 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -58,7 +58,6 @@ export default {
     'create-event': (item: any) => item,
   },
   setup(props, ctx) {
-    // const state = useState()
     const $api = useApi()
     const form = ref()
     const startDate = ref<Date>(props.dates.startStr)

From a9b5ae14c9c751c862ed11b657566c2ecb1f20cc Mon Sep 17 00:00:00 2001
From: mayar osama <mayarosama18@gmail.com>
Date: Wed, 31 Jan 2024 18:14:34 +0200
Subject: [PATCH 5/5] adding padding

---
 client/src/components/cards/vacationCard.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
index 37f5746e..58c0a912 100644
--- a/client/src/components/cards/vacationCard.vue
+++ b/client/src/components/cards/vacationCard.vue
@@ -1,5 +1,6 @@
 <template>
   <v-card elevation="0" >
+
     <v-card-title class="bg-graytitle">
       <div class="d-flex flex-row-reverse">
         <v-icon size="small" class="me-2" @click.stop="$emit('close-dialog', false)">
@@ -13,7 +14,7 @@
     >
     <br />
 
-    <v-form ref="form" @submit.prevent="updateVacation()">
+    <v-form ref="form" @submit.prevent="updateVacation()" class="pa-4">
       <v-row class="d-flex flex-row-reverse" v-if="couldUpdate">
         <v-btn color="primary" class="ma-4" type="submit" :disabled="!form?.isValid || disabled">Update</v-btn>
         <v-btn color="red" class="ma-4" @click="handleDelete">Delete</v-btn>
@@ -78,7 +79,7 @@
       </v-card>
     </v-form>
 
-    <v-row v-if="couldApprove && vacation.status == 'pending'">
+    <v-row v-if="couldApprove && vacation.status == 'pending'" class="pa-4">
       <v-btn color="primary" class="ma-4" @click="handleApprove">Approve</v-btn>
       <v-btn color="red" class="ma-4" @click="handleReject">Reject</v-btn>
     </v-row>