mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
fix(task-modal): fixed calendar position after first click on month switch
This commit is contained in:
Matej Glasnák committed
1 parent
c1ead219e6
commit
f38d45160c
4 files changed
+156
-120
No files matched your search
@@ -1,29 +1,37 @@
|
||||
export default {
|
||||
// Mixin to fix autofocus on v-input in modals where date selects are used
|
||||
data() {
|
||||
return {
|
||||
preventInputFocus: false
|
||||
}
|
||||
},
|
||||
// Mixin to fix autofocus on v-input in modals where date selects are used
|
||||
data() {
|
||||
return {
|
||||
preventInputFocus: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setFocusEvent() {
|
||||
document.querySelectorAll('.v-autocomplete input').forEach(input => {
|
||||
input.addEventListener('focus', this.onInputFocus)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setFocusEvent() {
|
||||
document.querySelectorAll('.v-autocomplete input').forEach((input) => {
|
||||
input.addEventListener('focus', this.onInputFocus);
|
||||
});
|
||||
},
|
||||
|
||||
onDateFocus($event) {
|
||||
if ($event == undefined) {
|
||||
this.preventInputFocus = true
|
||||
}
|
||||
},
|
||||
onDateFocus($event) {
|
||||
if ($event == undefined) {
|
||||
this.preventInputFocus = true;
|
||||
}
|
||||
},
|
||||
|
||||
onInputFocus($event) {
|
||||
if (this.preventInputFocus) {
|
||||
$event.target.blur()
|
||||
this.preventInputFocus = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onDateOpen($event) {
|
||||
if ($event == undefined) {
|
||||
this.preventInputFocus = true;
|
||||
}
|
||||
},
|
||||
|
||||
onInputFocus($event) {
|
||||
setTimeout(() => {
|
||||
if (this.preventInputFocus) {
|
||||
$event.target.blur();
|
||||
this.preventInputFocus = false;
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,93 +1,131 @@
|
||||
<template>
|
||||
<div class="timeblock w-100">
|
||||
<div v-if="deletable && editable" class="x-button">
|
||||
<button @click="$emit('removeTimeblock')" class="x-button">x</button>
|
||||
</div>
|
||||
<div @click="openDatepicker('datepicker')" class="datepicker-wrapper" ref="datepicker-wrapper">
|
||||
<Datepicker :model-value="timeblock.date" ref="datepicker" @focus="onDateFocus" @update:model-value="updateDate" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :auto-apply="true" :enable-time-picker="false" class="mb-5 modal-input datepicker-input" />
|
||||
</div>
|
||||
<div class="splitted-time-inputs">
|
||||
<v-text-field :value="timeblock.starts_at_time" @input="updateStartTime" @focus="onInputFocus" :class="{ error: v$?.timeblock.starts_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Začiatok" />
|
||||
<v-text-field :value="timeblock.ends_at_time" @input="updateEndTime" @focus="onInputFocus" :class="{ error: v$?.timeblock.ends_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Koniec" />
|
||||
</div>
|
||||
<div class="timeblock w-100">
|
||||
<div v-if="deletable && editable" class="x-button">
|
||||
<button @click="$emit('removeTimeblock')" class="x-button">x</button>
|
||||
</div>
|
||||
<div
|
||||
@click="openDatepicker('datepicker')"
|
||||
class="datepicker-wrapper"
|
||||
ref="datepicker-wrapper"
|
||||
>
|
||||
<Datepicker
|
||||
:model-value="timeblock.date"
|
||||
ref="datepicker"
|
||||
@open="onDateOpen"
|
||||
@update:model-value="updateDate"
|
||||
format="dd.MM.yyyy"
|
||||
locale="sk"
|
||||
select-text="Vybrať"
|
||||
cancel-text="Zrušiť"
|
||||
placeholder="Dátum"
|
||||
:auto-apply="true"
|
||||
:enable-time-picker="false"
|
||||
class="mb-5 modal-input datepicker-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="splitted-time-inputs">
|
||||
<v-text-field
|
||||
:value="timeblock.starts_at_time"
|
||||
@input="updateStartTime"
|
||||
@focus="onInputFocus"
|
||||
:class="{ error: v$?.timeblock.starts_at_time.$errors.length }"
|
||||
type="time"
|
||||
variant="solo"
|
||||
bg-color="white"
|
||||
label="Začiatok"
|
||||
/>
|
||||
<v-text-field
|
||||
:value="timeblock.ends_at_time"
|
||||
@input="updateEndTime"
|
||||
@focus="onInputFocus"
|
||||
:class="{ error: v$?.timeblock.ends_at_time.$errors.length }"
|
||||
type="time"
|
||||
variant="solo"
|
||||
bg-color="white"
|
||||
label="Koniec"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { requiredIf } from '@vuelidate/validators'
|
||||
import Datepicker from '@vuepic/vue-datepicker'
|
||||
import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
|
||||
import useVuelidate from '@vuelidate/core';
|
||||
import { requiredIf } from '@vuelidate/validators';
|
||||
import Datepicker from '@vuepic/vue-datepicker';
|
||||
|
||||
export default {
|
||||
mixins: [VuetifyFixFocusMixin],
|
||||
components: {
|
||||
Datepicker,
|
||||
},
|
||||
|
||||
components: {
|
||||
Datepicker
|
||||
props: {
|
||||
timeblock: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
props: {
|
||||
timeblock: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
|
||||
deletable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
deletable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
}
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
validations() {
|
||||
return {
|
||||
timeblock: {
|
||||
starts_at_time: { required: requiredIf(this.timeblock.date) },
|
||||
ends_at_time: { required: requiredIf(this.timeblock.date) }
|
||||
}
|
||||
}
|
||||
preventInputFocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
async openDatepicker(ref) {
|
||||
this.$refs[ref].openMenu()
|
||||
this.$nextTick(() => {
|
||||
this.$refs['datepicker-wrapper'].scrollIntoView({ behavior: 'instant', block: 'center', inline: 'center' })
|
||||
this.$nextTick(() => {
|
||||
const popup = document.querySelector('.dp__menu.dp__menu_index')
|
||||
const isBottom = popup.querySelector('.dp__arrow_bottom')
|
||||
const yDifference = isBottom ? 0 - popup.clientHeight - 42 : 35
|
||||
popup.style.top = window.innerHeight / 2 + yDifference + 'px'
|
||||
})
|
||||
})
|
||||
},
|
||||
updateDate(date) {
|
||||
const timeblock = { ...this.timeblock }
|
||||
if (date) timeblock.date = date
|
||||
this.$emit('updateTimeblock', timeblock)
|
||||
},
|
||||
updateStartTime(event) {
|
||||
const timeblock = { ...this.timeblock }
|
||||
timeblock.starts_at_time = event.target.value
|
||||
this.$emit('updateTimeblock', timeblock)
|
||||
},
|
||||
updateEndTime(event) {
|
||||
const timeblock = { ...this.timeblock }
|
||||
timeblock.ends_at_time = event.target.value
|
||||
this.$emit('updateTimeblock', timeblock)
|
||||
},
|
||||
}
|
||||
}
|
||||
onInputFocus: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
onDateOpen: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
};
|
||||
},
|
||||
|
||||
validations() {
|
||||
return {
|
||||
timeblock: {
|
||||
starts_at_time: { required: requiredIf(this.timeblock.date) },
|
||||
ends_at_time: { required: requiredIf(this.timeblock.date) },
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async openDatepicker(ref) {
|
||||
this.$refs[ref].openMenu();
|
||||
},
|
||||
updateDate(date) {
|
||||
const timeblock = { ...this.timeblock };
|
||||
if (date) timeblock.date = date;
|
||||
this.$emit('updateTimeblock', timeblock);
|
||||
},
|
||||
updateStartTime(event) {
|
||||
const timeblock = { ...this.timeblock };
|
||||
timeblock.starts_at_time = event.target.value;
|
||||
this.$emit('updateTimeblock', timeblock);
|
||||
},
|
||||
updateEndTime(event) {
|
||||
const timeblock = { ...this.timeblock };
|
||||
timeblock.ends_at_time = event.target.value;
|
||||
this.$emit('updateTimeblock', timeblock);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
@@ -119,4 +157,5 @@ export default {
|
||||
.datepicker-input
|
||||
width: 100% !important
|
||||
pointer-events: none
|
||||
</style>e
|
||||
</style>
|
||||
e
|
||||
@@ -44,6 +44,7 @@
|
||||
variant="solo"
|
||||
class="modal-input"
|
||||
clearable
|
||||
@focus="onInputFocus"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
@@ -62,7 +63,7 @@
|
||||
>
|
||||
<Datepicker
|
||||
v-model="subtask.deadline"
|
||||
@focus="onDateFocus"
|
||||
@open="onDateOpen"
|
||||
ref="datepicker-01"
|
||||
:auto-apply="true"
|
||||
:min-date="new Date()"
|
||||
@@ -233,14 +234,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <div class="w-100">
|
||||
<Datepicker v-model="subtask.date" :class="{ error: v$.subtask.date.$errors.length }" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :auto-apply="true" :enable-time-picker="false" @focus="onDateFocus" class="mb-5 modal-input" />
|
||||
<div class="splitted-time-inputs">
|
||||
<v-text-field :class="{ error: v$.subtask.starts_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Začiatok" />
|
||||
<v-text-field :class="{ error: v$.subtask.ends_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Koniec" />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<template v-if="!subtask.id">
|
||||
<div class="timeblocks w-100">
|
||||
<A-timeblock
|
||||
@@ -252,6 +245,9 @@
|
||||
:deletable="index > 0"
|
||||
editable
|
||||
:ref="`timetable-${index}`"
|
||||
:prevent-input-focus="preventInputFocus"
|
||||
:on-input-focus="onInputFocus"
|
||||
:on-date-open="onDateOpen"
|
||||
/>
|
||||
<div class="end-button w-100">
|
||||
<button
|
||||
@@ -373,13 +369,6 @@
|
||||
@close-modal="closeModal"
|
||||
@update-subtask="updateSubtask"
|
||||
/>
|
||||
<!-- <div class="mt-10">
|
||||
<p>Termín</p>
|
||||
<div class="date-wrap">
|
||||
<Datepicker @open="editDatepicker('date')" v-model="subtask.deadline" @focus="onDateFocus" :min-date="new Date()" class="modal-input" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" />
|
||||
<Datepicker @open="editDatepicker('time')" v-model="subtask.deadline" @focus="onDateFocus" :min-date="new Date()" class="modal-input" format="HH:mm" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Čas" />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="d-flex justify-start align-center mt-8">
|
||||
<v-btn
|
||||
|
||||
Reference in new issue
Block a user