Skip to content

Commit

Permalink
Merge pull request #322 from codescalers/development_1.1_calender_enh…
Browse files Browse the repository at this point in the history 
…ancments
  • Loading branch information
@maayarosama
maayarosama authored Feb 1, 2024
2 parents 20e4cd7 + a9b5ae1 commit 2cf9cb1
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 183 deletions.
1 change: 0 additions & 1 deletion client/src/components/cards/holidayCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
</v-icon>
</div>
</v-card-title>
<div class="d-flex expired" v-if="holiday.expired">Expired</div>
<v-container class="pa-4">
<v-card elevation="0" class="mt-2">
<v-row class="pa-2 text-center">
Expand Down
245 changes: 113 additions & 132 deletions client/src/components/cards/vacationCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,121 +1,93 @@
<template>
<v-card elevation="0">
<v-card elevation="0" >

<v-card-title class="bg-graytitle">
<div class="d-flex flex-row-reverse">
<v-icon class="me-2" size="small" @click.stop="$emit('close-dialog', false)">
<v-icon size="small" class="me-2" @click.stop="$emit('close-dialog', false)">
mdi-close
</v-icon>
</div>
</v-card-title>
<v-container class="pa-6">
<p class="text-subtitle-1 text-center">
From <b>{{ vacation.from_date }} </b> to
<b color="primary">{{ vacation.end_date }} </b> vacation
<v-card-title class="text-center">
From <b color="primary">{{ vacation.from_date }} </b> to
<b color="primary">{{ vacation.end_date }} </b> vacation</v-card-title
>
<br />

<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>
</v-row>
<v-card elevation="0" class="pa-8">
<v-row class="py-5">
<v-col cols="3">
<v-icon>mdi-account</v-icon>

<b> Applying User</b>
</v-col>
<v-col cols="3" class="text-right">
{{ vacation.user.full_name }}
</v-col>

<v-row class="d-flex justify-center my-2" v-if="couldUpdate">
<v-btn color="primary" class="mx-1 my-2" @click="readOnly = false">Update</v-btn>
<v-btn color="error" class="mx-1 my-2" @click="handleDelete">Delete</v-btn>
</v-row>
</p>
<v-divider class="my-2"></v-divider>
<v-form ref="form" @submit.prevent="updateVacation()">
<v-card elevation="0" class="pa-4">
<v-row class="py-2">
<v-col cols="6" class="d-flex">
<v-icon class="mr-2">mdi-account</v-icon>
<p>
Applying User :
<span color="warning" class="mx-2">{{ vacation.user.full_name }}</span>
</p>
</v-col>
<v-col cols="6" class="d-flex">
<v-icon class="mr-2">mdi-account</v-icon>

<p>
Approval User :
<span class="mx-2" v-if="vacation.isUpdated">{{
vacation.approval_user ? vacation.approval_user : 'Under approving'
}}</span>
<span class="mx-2" v-else>{{
vacation.approval_user.email ? vacation.approval_user.email : 'Under approving'
}}</span>
</p>
</v-col>
</v-row>
<v-row>
<v-col cols="2">
<v-icon>mdi-calendar</v-icon>

<v-row>
<v-col cols="6">
<v-text-field
color="info"
item-color="info"
base-color="info"
variant="outlined"
hide-details="auto"
label="From"
v-model="startDate"
:readonly="readOnly"
type="date"
>
</v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
color="info"
item-color="info"
base-color="info"
variant="outlined"
hide-details="auto"
label="To"
v-model="endDate"
:readonly="readOnly"
type="date"
:rules="[validateEndDate]"
>
</v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<v-autocomplete
color="info"
item-color="info"
base-color="info"
variant="outlined"
v-model="leaveReason"
:items="leaveReasons"
label="Reason"
return-object
item-title="name"
:readonly="readOnly"
>
</v-autocomplete>
</v-col>
<v-col cols="6" class="d-flex items-center">
<p>
Status :
{{ vacation.status }}
</p>
</v-col>
</v-row>
<v-row class="d-flex justify-center" v-if="!readOnly">
<v-btn color="primary" class="my-2 mx-1" type="submit" :disabled="!form?.isValid">
Submit
</v-btn>
<v-btn color="info" class="my-2 mx-1" @click="readOnly = true">Cancel</v-btn>
</v-row>
</v-card>
</v-form>
<v-divider class="my-2"></v-divider>
<v-row class="d-flex justify-end mt-3" v-if="couldApprove && vacation.status == 'pending'">
<v-btn color="primary" class="ma-1" @click="handleApprove">Approve</v-btn>
<v-btn color="error" class="ma-1" @click="handleReject">Reject</v-btn>
</v-row>
</v-container>
<b> From</b>
</v-col>
<v-col cols="4">
<v-text-field color="primary'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
label="From" v-model="startDate" :readonly="!couldUpdate" type="date">
</v-text-field>
</v-col>

<v-col cols="2">
<v-icon>mdi-calendar</v-icon>

<b> To</b>
</v-col>
<v-col cols="4">
<v-text-field color="primary'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
label="To" v-model="endDate" :readonly="!couldUpdate" type="date" :rules="[validateEndDate]">
</v-text-field>
</v-col>
</v-row>

<v-row>
<v-col cols="2">
<v-icon>mdi-navigation</v-icon>

<b> Reason</b>
</v-col>
<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="!couldUpdate">
</v-autocomplete>
</v-col>
<v-col cols="3">
<v-icon>mdi-calendar</v-icon>
<b> Status</b>
</v-col>
<v-col cols="3" class="text-right">
{{ vacation.status }}
</v-col>
</v-row>
</v-card>
</v-form>

<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>
</v-card>
</template>
<script lang="ts">
import type { Api } from '@/types'
import { computed, ref } from 'vue'
import type { Api } from '@/types';
import { computed, ref, watch } from 'vue';
import { useApi } from '@/hooks'
import { useAsyncState } from '@vueuse/core'
Expand All @@ -141,34 +113,34 @@ export default {
reason: props.vacation.reason
})
const form = ref()
const disabled = ref<boolean>(true)
const user = ApiClientBase.user
const readOnly = ref<boolean>(true)
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') {
Expand Down Expand Up @@ -206,7 +178,16 @@ 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) {
Expand Down Expand Up @@ -273,10 +254,10 @@ export default {
return {
startDate,
disabled,
endDate,
leaveReason,
leaveReasons,
readOnly,
form,
couldApprove,
couldUpdate,
Expand Down
8 changes: 5 additions & 3 deletions client/src/components/requests/eventRequest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,11 @@ export default {
setup(props, ctx) {
const $api = useApi()
const startDate = ref<string>(props.dates.startStr)
const endDate = ref<string>(props.dates.endStr)
const name = ref<string>('')
const description = ref<string>('')
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()
const eventStart = ref()
const eventEnd = ref()
Expand Down
Loading

0 comments on commit 2cf9cb1

Please sign in to comment.