Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development 1.1 calander enhancements #322

Merged
merged 7 commits into from
Feb 1, 2024
Merged

Development 1.1 calander enhancements #322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
97383b2
vacation card enhancments
maayarosama Jan 30, 2024
65c6eff
Leave request enhancmantes
maayarosama Jan 30, 2024
fc0c30d
Merge branch 'development_1.1' into development_1.1_calender_enhancments
maayarosama Jan 31, 2024
08c1c83
Fixing end dates
maayarosama Jan 31, 2024
fcd26db
Removing public holiday and adding vacation balance
maayarosama Jan 31, 2024
ccb98d8
Merge branch 'development_1.1' into development_1.1_calender_enhancments
maayarosama Jan 31, 2024
a9b5ae1
adding padding
maayarosama Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion client/src/components/cards/holidayCard.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading