Skip to content

Commit

Permalink
Making date fields in calender editable
Browse files Browse the repository at this point in the history
  • Loading branch information
@maayarosama
maayarosama committed Feb 6, 2024
1 parent a0e4c4c commit acb922c
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 119 deletions.
111 changes: 38 additions & 73 deletions client/src/components/requests/eventRequest.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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'
Expand All @@ -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) {
Expand Down Expand Up @@ -165,7 +128,9 @@ export default {
fieldRequired,
eventStart,
eventEnd,
startDateField,
endDateField,
validateDates,
createEvent
}
}
Expand Down
92 changes: 46 additions & 46 deletions client/src/components/requests/leaveRequest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,63 +5,30 @@
</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>
<script lang="ts">
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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -142,7 +139,10 @@ export default {
isValid,
actualDays,
user,
startDateField,
endDateField,
createLeave,
validateDates,
};
},
};
Expand Down

0 comments on commit acb922c

Please sign in to comment.