mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
refactor(datepicker): fixed focus prevention on inputs
This commit is contained in:
Matej Glasnák committed
1 parent
3e130c9a0d
commit
69536e21f5
21 files changed
+282
-581
No files matched your search
@@ -1,72 +0,0 @@
|
||||
export default {
|
||||
// Mixin to fix autofocus on v-input in modals where date selects are used
|
||||
data() {
|
||||
return {
|
||||
preventInputFocus: false,
|
||||
savedScrollPosition: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setFocusEvent() {
|
||||
const inputs = document.querySelectorAll('.v-autocomplete input');
|
||||
inputs.forEach((input) => {
|
||||
input.addEventListener('focus', this.onInputFocus);
|
||||
});
|
||||
},
|
||||
|
||||
onDateFocus($event) {
|
||||
if ($event == undefined) {
|
||||
this.preventInputFocus = true;
|
||||
}
|
||||
},
|
||||
|
||||
onDateOpen($event) {
|
||||
// $event should be the element reference (or any truthy value to trigger saving)
|
||||
if ($event) {
|
||||
// Find the scrollable modal container
|
||||
const modalContent = document.querySelector('.v-dialog .modal-content');
|
||||
if (modalContent) {
|
||||
this.savedScrollPosition = modalContent.scrollTop;
|
||||
}
|
||||
|
||||
this.preventInputFocus = true;
|
||||
|
||||
// Reset after datepicker is opened
|
||||
setTimeout(() => {
|
||||
this.preventInputFocus = false;
|
||||
this.savedScrollPosition = null;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
onInputFocus($event) {
|
||||
const target = $event.target;
|
||||
|
||||
// If we have a saved scroll position and an unwanted focus happened
|
||||
if (this.preventInputFocus && this.savedScrollPosition !== null) {
|
||||
const target = $event.target;
|
||||
|
||||
// Only intercept text input focus (autocomplete fields)
|
||||
if (target.tagName === 'INPUT' && target.type === 'text') {
|
||||
const scrollBefore = document.querySelector(
|
||||
'.v-dialog .modal-content',
|
||||
)?.scrollTop;
|
||||
|
||||
// Blur the focused element
|
||||
setTimeout(() => {
|
||||
target.blur();
|
||||
|
||||
const modalContent = document.querySelector(
|
||||
'.v-dialog .modal-content',
|
||||
);
|
||||
if (modalContent && this.savedScrollPosition !== null) {
|
||||
modalContent.scrollTop = this.savedScrollPosition;
|
||||
const scrollAfter = modalContent.scrollTop;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,197 +1,278 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px" persistent>
|
||||
<W-loadable :content="blocker" class="h-100">
|
||||
<v-card height="100%" class="d-flex flex-column">
|
||||
<div class="d-flex justify-space-between align-center modal-header">
|
||||
<h1>{{ blocker.id ? "Upraviť" : "Vytvoriť" }} blocker</h1>
|
||||
<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
|
||||
</div>
|
||||
<v-dialog
|
||||
v-model="visible"
|
||||
max-width="750"
|
||||
max-height="90%"
|
||||
height="700px"
|
||||
persistent
|
||||
:retain-focus="false"
|
||||
>
|
||||
<W-loadable :content="blocker" class="h-100">
|
||||
<v-card height="100%" class="d-flex flex-column">
|
||||
<div class="d-flex justify-space-between align-center modal-header">
|
||||
<h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť' }} blocker</h1>
|
||||
<v-icon
|
||||
@click.stop="closeModal()"
|
||||
icon="mdi-close"
|
||||
size="large"
|
||||
></v-icon>
|
||||
</div>
|
||||
|
||||
<v-card-actions class="d-flex flex-column modal-content">
|
||||
<v-text-field @focus="onInputFocus" class="modal-input" label="Názov blockeru"
|
||||
:class="{ error: v$.blocker.name.$errors.length }"
|
||||
:hint="v$.blocker.name.$errors ? errorUtils.parseErrors(v$.blocker.name.$errors) : null"
|
||||
v-model="blocker.name" variant="solo"></v-text-field>
|
||||
<v-card-actions class="d-flex flex-column modal-content">
|
||||
<v-text-field
|
||||
class="modal-input"
|
||||
label="Názov blockeru"
|
||||
:class="{ error: v$.blocker.name.$errors.length }"
|
||||
:hint="
|
||||
v$.blocker.name.$errors
|
||||
? errorUtils.parseErrors(v$.blocker.name.$errors)
|
||||
: null
|
||||
"
|
||||
v-model="blocker.name"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
|
||||
<v-autocomplete :custom-filter="customFilter" :match-any="true" clearable label="Vyhľadať zamestnanca"
|
||||
:items="[...enrichedEmployees]" item-title="_fullName" item-value="id" variant="solo"
|
||||
class="modal-input" v-model="blocker.employee_id" />
|
||||
<!-- <Z-autocomplete label="Vyhľadať zamestnanca" :value="blocker?.employee ? `${blocker?.employee?.name} ${blocker?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.blocker.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" /> -->
|
||||
<Datepicker class="modal-input mb-5" v-model="datepicker" :auto-apply="true" format="dd.MM.yyyy" locale="sk"
|
||||
:class="{ error: v$.datepicker.$errors?.length }" :validations="v$.datepicker" select-text="Vybrať"
|
||||
cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" ref="datepicker" />
|
||||
<v-autocomplete
|
||||
:custom-filter="customFilter"
|
||||
:match-any="true"
|
||||
clearable
|
||||
label="Vyhľadať zamestnanca"
|
||||
:items="[...enrichedEmployees]"
|
||||
item-title="_fullName"
|
||||
item-value="id"
|
||||
variant="solo"
|
||||
class="modal-input"
|
||||
v-model="blocker.employee_id"
|
||||
/>
|
||||
<!-- <Z-autocomplete label="Vyhľadať zamestnanca" :value="blocker?.employee ? `${blocker?.employee?.name} ${blocker?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.blocker.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" /> -->
|
||||
<Z-datepicker
|
||||
class="modal-input mb-5"
|
||||
v-model="datepicker"
|
||||
:auto-apply="true"
|
||||
format="dd.MM.yyyy"
|
||||
locale="sk"
|
||||
:class="{ error: v$.datepicker.$errors?.length }"
|
||||
:validations="v$.datepicker"
|
||||
select-text="Vybrať"
|
||||
cancel-text="Zrušiť"
|
||||
placeholder="Dátum"
|
||||
label="Dátum"
|
||||
:enable-time-picker="false"
|
||||
/>
|
||||
|
||||
<v-text-field v-model="starts_at_time" type="time" variant="solo" bg-color="white"
|
||||
:hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null"
|
||||
:class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" />
|
||||
<v-text-field v-model="ends_at_time" type="time" variant="solo" bg-color="white"
|
||||
:hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null"
|
||||
:class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" />
|
||||
</v-card-actions>
|
||||
<v-text-field
|
||||
v-model="starts_at_time"
|
||||
type="time"
|
||||
variant="solo"
|
||||
bg-color="white"
|
||||
:hint="
|
||||
v$.starts_at_time.$errors
|
||||
? errorUtils.parseErrors(v$.starts_at_time.$errors)
|
||||
: null
|
||||
"
|
||||
:class="{ error: v$.starts_at_time.$errors.length }"
|
||||
class="mb-1 modal-input"
|
||||
label="Začiatok"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="ends_at_time"
|
||||
type="time"
|
||||
variant="solo"
|
||||
bg-color="white"
|
||||
:hint="
|
||||
v$.ends_at_time.$errors
|
||||
? errorUtils.parseErrors(v$.ends_at_time.$errors)
|
||||
: null
|
||||
"
|
||||
:class="{ error: v$.ends_at_time.$errors.length }"
|
||||
class="modal-input"
|
||||
label="Koniec"
|
||||
/>
|
||||
</v-card-actions>
|
||||
|
||||
<v-btn class="button primary" @click="save()">{{ blocker.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn>
|
||||
</v-card>
|
||||
</W-loadable>
|
||||
</v-dialog>
|
||||
<v-btn class="button primary" @click="save()">{{
|
||||
blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'
|
||||
}}</v-btn>
|
||||
</v-card>
|
||||
</W-loadable>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from "@vuepic/vue-datepicker"
|
||||
import useVuelidate from "@vuelidate/core"
|
||||
import { required } from "@vuelidate/validators"
|
||||
import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
|
||||
import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus"
|
||||
import { mapGetters } from "vuex"
|
||||
import moment from "moment"
|
||||
import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin'
|
||||
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
|
||||
import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
|
||||
import useVuelidate from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
|
||||
import { mapGetters } from 'vuex';
|
||||
import moment from 'moment';
|
||||
import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin';
|
||||
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
|
||||
|
||||
export default {
|
||||
mixins: [VuetifyFixFocusMixin, AutocompleteMixin, modalMixin],
|
||||
mixins: [AutocompleteMixin, modalMixin],
|
||||
|
||||
emits: ["close"],
|
||||
emits: ['close'],
|
||||
|
||||
components: {
|
||||
Datepicker,
|
||||
// ZAutocomplete
|
||||
},
|
||||
components: {
|
||||
ZDatepicker,
|
||||
// ZAutocomplete
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
v$: useVuelidate(),
|
||||
errorUtils,
|
||||
blocker: null,
|
||||
datepicker: null,
|
||||
starts_at_time: null,
|
||||
ends_at_time: null,
|
||||
employee: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
v$: useVuelidate(),
|
||||
errorUtils,
|
||||
blocker: null,
|
||||
datepicker: null,
|
||||
starts_at_time: null,
|
||||
ends_at_time: null,
|
||||
employee: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters("tm", ["enrichedEmployees"]),
|
||||
computed: {
|
||||
...mapGetters('tm', ['enrichedEmployees']),
|
||||
|
||||
...mapGetters("auth", ["user"])
|
||||
},
|
||||
...mapGetters('auth', ['user']),
|
||||
},
|
||||
|
||||
validations() {
|
||||
return {
|
||||
blocker: {
|
||||
name: { required },
|
||||
start: { required },
|
||||
end: { required },
|
||||
// employee: { required }
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
blocker: {
|
||||
name: { required },
|
||||
start: { required },
|
||||
end: { required },
|
||||
// employee: { required }
|
||||
},
|
||||
|
||||
starts_at_time: { required },
|
||||
ends_at_time: { required },
|
||||
datepicker: { required }
|
||||
}
|
||||
},
|
||||
starts_at_time: { required },
|
||||
ends_at_time: { required },
|
||||
datepicker: { required },
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async showModal({ blocker }) {
|
||||
this.visible = true
|
||||
this.blocker = null
|
||||
this.datepicker = null
|
||||
this.starts_at_time = null
|
||||
this.ends_at_time = null
|
||||
methods: {
|
||||
async showModal({ blocker }) {
|
||||
this.visible = true;
|
||||
this.blocker = null;
|
||||
this.datepicker = null;
|
||||
this.starts_at_time = null;
|
||||
this.ends_at_time = null;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.setFocusEvent()
|
||||
this.v$.$reset()
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.v$.$reset();
|
||||
});
|
||||
|
||||
try {
|
||||
if (blocker?.id) {
|
||||
blocker = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
|
||||
try {
|
||||
if (blocker?.id) {
|
||||
blocker = await this.$axios.get_auth_data(
|
||||
`v1/blockers/${blocker.id}`,
|
||||
);
|
||||
|
||||
this.starts_at_time = moment(blocker.start).format("HH:mm")
|
||||
this.ends_at_time = moment(blocker.end).format("HH:mm")
|
||||
this.datepicker = new Date(blocker.start)
|
||||
blocker.employee_id = blocker.employee.id
|
||||
//fixnut validacie employee_id
|
||||
this.blocker = blocker
|
||||
} else {
|
||||
this.blocker = {start: null, employee_id: this.user.id }
|
||||
this.starts_at_time = moment(blocker.start).format('HH:mm');
|
||||
this.ends_at_time = moment(blocker.end).format('HH:mm');
|
||||
this.datepicker = new Date(blocker.start);
|
||||
blocker.employee_id = blocker.employee.id;
|
||||
//fixnut validacie employee_id
|
||||
this.blocker = blocker;
|
||||
} else {
|
||||
this.blocker = { start: null, employee_id: this.user.id };
|
||||
|
||||
if (blocker.starts_at_time && blocker.datepicker && blocker.employee_id) {
|
||||
this.datepicker = blocker.datepicker
|
||||
this.starts_at_time = blocker.starts_at_time
|
||||
this.blocker.employee_id = blocker.employee_id
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.$toast.error(this.$parseError(error))
|
||||
if (
|
||||
blocker.starts_at_time &&
|
||||
blocker.datepicker &&
|
||||
blocker.employee_id
|
||||
) {
|
||||
this.datepicker = blocker.datepicker;
|
||||
this.starts_at_time = blocker.starts_at_time;
|
||||
this.blocker.employee_id = blocker.employee_id;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.$toast.error(this.$parseError(error));
|
||||
|
||||
if (process.env.NODE_ENV === 'development')
|
||||
console.log('[z-blocker-modal.vue] Error: ', error)
|
||||
}
|
||||
},
|
||||
if (process.env.NODE_ENV === 'development')
|
||||
console.log('[z-blocker-modal.vue] Error: ', error);
|
||||
}
|
||||
},
|
||||
|
||||
async save() {
|
||||
if (!(await this.v$.$validate())) return
|
||||
async save() {
|
||||
if (!(await this.v$.$validate())) return;
|
||||
|
||||
try {
|
||||
// this.blocker.employee_id = this.blocker.employee?.id
|
||||
try {
|
||||
// this.blocker.employee_id = this.blocker.employee?.id
|
||||
|
||||
if (this.blocker.id) {
|
||||
const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
|
||||
this.blocker = blocker
|
||||
} else {
|
||||
const { blocker } = await this.$axios.post_auth("v1/blockers", this.blocker)
|
||||
this.blocker = blocker
|
||||
}
|
||||
if (this.blocker.id) {
|
||||
const { blocker } = await this.$axios.put_auth(
|
||||
`v1/blockers/${this.blocker.id}`,
|
||||
this.blocker,
|
||||
);
|
||||
this.blocker = blocker;
|
||||
} else {
|
||||
const { blocker } = await this.$axios.post_auth(
|
||||
'v1/blockers',
|
||||
this.blocker,
|
||||
);
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
this.$events.emit("on-blocker-edited", this.blocker)
|
||||
this.$events.emit("blocker-created")
|
||||
this.closeModal()
|
||||
} catch (error) {
|
||||
this.$toast.error(this.$parseError(error))
|
||||
this.$events.emit('on-blocker-edited', this.blocker);
|
||||
this.$events.emit('blocker-created');
|
||||
this.closeModal();
|
||||
} catch (error) {
|
||||
this.$toast.error(this.$parseError(error));
|
||||
|
||||
if (process.env.NODE_ENV === 'development')
|
||||
console.log('[z-blocker-modal.vue] Error: ', error)
|
||||
}
|
||||
},
|
||||
if (process.env.NODE_ENV === 'development')
|
||||
console.log('[z-blocker-modal.vue] Error: ', error);
|
||||
}
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.$refs["datepicker"].clearValue()
|
||||
this.visible = false
|
||||
this.$emit("close", this.blocker)
|
||||
},
|
||||
closeModal() {
|
||||
this.visible = false;
|
||||
this.$emit('close', this.blocker);
|
||||
},
|
||||
|
||||
onEmployeeSelected({ key }) {
|
||||
this.blocker.employee = this.enrichedEmployees.find(employee => employee.id == key)
|
||||
},
|
||||
onEmployeeSelected({ key }) {
|
||||
this.blocker.employee = this.enrichedEmployees.find(
|
||||
(employee) => employee.id == key,
|
||||
);
|
||||
},
|
||||
|
||||
_syncDatesTimes() {
|
||||
if (!this.starts_at_time || !this.ends_at_time || !this.datepicker) return
|
||||
_syncDatesTimes() {
|
||||
if (!this.starts_at_time || !this.ends_at_time || !this.datepicker)
|
||||
return;
|
||||
|
||||
const splittedStart = this.starts_at_time.split(":")
|
||||
const splittedEnd = this.ends_at_time.split(":")
|
||||
const splittedStart = this.starts_at_time.split(':');
|
||||
const splittedEnd = this.ends_at_time.split(':');
|
||||
|
||||
this.blocker.start = moment(this.datepicker)
|
||||
.set({ hours: parseInt(splittedStart[0]), minutes: parseInt(splittedStart[1]) })
|
||||
.format("YYYY-MM-DD HH:mm")
|
||||
this.blocker.end = moment(this.datepicker)
|
||||
.set({ hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1]) })
|
||||
.format("YYYY-MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
this.blocker.start = moment(this.datepicker)
|
||||
.set({
|
||||
hours: parseInt(splittedStart[0]),
|
||||
minutes: parseInt(splittedStart[1]),
|
||||
})
|
||||
.format('YYYY-MM-DD HH:mm');
|
||||
this.blocker.end = moment(this.datepicker)
|
||||
.set({
|
||||
hours: parseInt(splittedEnd[0]),
|
||||
minutes: parseInt(splittedEnd[1]),
|
||||
})
|
||||
.format('YYYY-MM-DD HH:mm');
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
ends_at_time() {
|
||||
this._syncDatesTimes()
|
||||
},
|
||||
watch: {
|
||||
ends_at_time() {
|
||||
this._syncDatesTimes();
|
||||
},
|
||||
|
||||
starts_at_time() {
|
||||
this._syncDatesTimes()
|
||||
},
|
||||
starts_at_time() {
|
||||
this._syncDatesTimes();
|
||||
},
|
||||
|
||||
datepicker() {
|
||||
this._syncDatesTimes()
|
||||
}
|
||||
}
|
||||
}
|
||||
datepicker() {
|
||||
this._syncDatesTimes();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b>?</h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Ste si istý, že chcete {{ mastertask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} <b>{{ mastertask?.name }}</b>?</h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Ste si istý, že chcete zmazať <b>{{ mastertask.name }}</b>?</h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="500" persistent>
|
||||
<v-dialog v-model="visible" max-width="500" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<h1 class="text-h5">
|
||||
Chcete túto osobu odstrániť z tímu?
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
max-height="90%"
|
||||
height="700px"
|
||||
persistent
|
||||
:retain-focus="false"
|
||||
>
|
||||
<W-loadable :content="mastertask" class="h-100">
|
||||
<v-card
|
||||
@@ -43,7 +44,6 @@
|
||||
|
||||
<v-text-field
|
||||
v-model="mastertask.name"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
label="Názov mastertasku"
|
||||
variant="solo"
|
||||
@@ -72,7 +72,6 @@
|
||||
placeholder="Deadline"
|
||||
:class="{ error: v$.mastertask.deadline.$errors?.length }"
|
||||
:validations="v$.mastertask.deadline"
|
||||
@open="onDateOpen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -83,7 +82,6 @@
|
||||
label="Čas"
|
||||
append-inner-icon="mdi-clock-outline"
|
||||
type="time"
|
||||
@focus="onInputFocus"
|
||||
:class="{ error: v$.mastertask._deadline_time.$errors.length }"
|
||||
:hint="
|
||||
v$.mastertask._deadline_time.$errors
|
||||
@@ -95,7 +93,6 @@
|
||||
|
||||
<v-text-field
|
||||
v-model="mastertask.estimated_duration"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
variant="solo"
|
||||
type="number"
|
||||
@@ -112,7 +109,6 @@
|
||||
|
||||
<v-text-field
|
||||
v-model="mastertask.duration"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
variant="solo"
|
||||
type="number"
|
||||
@@ -122,7 +118,6 @@
|
||||
|
||||
<v-select
|
||||
v-model="mastertask.team_id"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input border-select"
|
||||
:class="{ error: v$.mastertask.employees.$errors.length }"
|
||||
label="Tím"
|
||||
@@ -138,7 +133,6 @@
|
||||
<v-text-field
|
||||
v-for="(employee, index) in mastertask.employees"
|
||||
:key="employee.id"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
:class="{ error: employee.invalid }"
|
||||
:label="`${employee.name} ${employee.surname}`"
|
||||
@@ -316,7 +310,6 @@ import useVuelidate from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
|
||||
// import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
|
||||
import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus';
|
||||
import moment from 'moment';
|
||||
import { QuillEditor } from '@vueup/vue-quill';
|
||||
// import tmUtils from '@/plugins/tm@_utils/tm.utils'
|
||||
@@ -337,7 +330,7 @@ export default {
|
||||
// watch: mastertask.team_id
|
||||
|
||||
emits: ['master-task-edited', 'close'],
|
||||
mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin],
|
||||
mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
|
||||
|
||||
components: {
|
||||
AMastertaskDescription,
|
||||
@@ -458,32 +451,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDatepickerClick() {
|
||||
// Open the datepicker - it now opens automatically via click on wrapper
|
||||
},
|
||||
|
||||
onDateOpen($event) {
|
||||
// $event should be the element reference (or any truthy value to trigger saving)
|
||||
if ($event) {
|
||||
// Find the scrollable modal container
|
||||
const modalContent = document.querySelector('.v-dialog .modal-content');
|
||||
if (modalContent) {
|
||||
this.savedScrollPosition = modalContent.scrollTop;
|
||||
}
|
||||
|
||||
this.preventInputFocus = true;
|
||||
|
||||
// Reattach focus event listeners
|
||||
this.setFocusEvent();
|
||||
|
||||
// Reset after datepicker is opened
|
||||
setTimeout(() => {
|
||||
this.preventInputFocus = false;
|
||||
this.savedScrollPosition = null;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
closeBothModals() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
@@ -553,7 +520,6 @@ export default {
|
||||
this.visible = true;
|
||||
this.mastertask = null;
|
||||
this.$nextTick(() => {
|
||||
this.setFocusEvent();
|
||||
this.v$.$reset();
|
||||
|
||||
// Reset after modal is fully rendered and v-dialog autofocus has been blocked
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Vytvoriť</h1>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-dialog max-width="750" v-model="showModal" persistent>
|
||||
<v-dialog max-width="750" v-model="showModal" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Pridať odpracovaný čas</h1>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-dialog max-width="750" v-model="showModal" persistent>
|
||||
<v-dialog max-width="750" v-model="showModal" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Pridať dátum</h1>
|
||||
@@ -70,8 +70,9 @@
|
||||
</div>
|
||||
|
||||
<v-card-actions class="mt-10 d-flex flex-column modal-content">
|
||||
<Datepicker
|
||||
<Z-datepicker
|
||||
v-model="form.date"
|
||||
label="Dátum"
|
||||
format="dd.MM.yyyy"
|
||||
locale="sk"
|
||||
select-text="Vybrať"
|
||||
@@ -115,7 +116,7 @@
|
||||
<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1 class="text-red">
|
||||
@@ -152,7 +153,7 @@ import tmUtils from '@/plugins/tm@_utils/tm.utils';
|
||||
import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
|
||||
import useVuelidate from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import Datepicker from '@vuepic/vue-datepicker';
|
||||
import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
|
||||
import moment from 'moment';
|
||||
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
|
||||
import { mapGetters } from 'vuex';
|
||||
@@ -162,7 +163,7 @@ export default {
|
||||
emits: ['update-subtask'],
|
||||
|
||||
components: {
|
||||
Datepicker,
|
||||
ZDatepicker,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
||||
@@ -3,15 +3,11 @@
|
||||
<div v-if="deletable && editable" class="x-button">
|
||||
<button @click="$emit('removeTimeblock')" class="x-button">x</button>
|
||||
</div>
|
||||
<div
|
||||
@click="handleDatepickerClick"
|
||||
class="datepicker-wrapper"
|
||||
:ref="`timeblock-datepicker-wrapper-${index}`"
|
||||
>
|
||||
<Datepicker
|
||||
<div class="datepicker-wrapper">
|
||||
<Z-datepicker
|
||||
:model-value="timeblock.date"
|
||||
:ref="`timeblock-datepicker-${index}`"
|
||||
@update:model-value="updateDate"
|
||||
label="Dátum"
|
||||
format="dd.MM.yyyy"
|
||||
locale="sk"
|
||||
select-text="Vybrať"
|
||||
@@ -48,11 +44,11 @@
|
||||
<script>
|
||||
import useVuelidate from '@vuelidate/core';
|
||||
import { requiredIf } from '@vuelidate/validators';
|
||||
import Datepicker from '@vuepic/vue-datepicker';
|
||||
import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker,
|
||||
ZDatepicker,
|
||||
},
|
||||
|
||||
props: {
|
||||
@@ -71,21 +67,6 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
|
||||
preventInputFocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
onInputFocus: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
onDateOpen: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
index: {
|
||||
type: Number,
|
||||
},
|
||||
@@ -107,50 +88,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDatepickerClick() {
|
||||
// Pass the datepicker wrapper element reference to the mixin
|
||||
const scrollTarget =
|
||||
this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
|
||||
this.onDateOpen(scrollTarget);
|
||||
// Open the datepicker
|
||||
this.openDatepicker(`timeblock-datepicker-${this.index}`);
|
||||
|
||||
setTimeout(() => {
|
||||
const calendar = document.querySelector(
|
||||
'.dp__menu.dp__menu_index.dp__theme_light',
|
||||
);
|
||||
|
||||
if (!calendar) return;
|
||||
|
||||
// Get the datepicker wrapper element
|
||||
const datepickerWrapper =
|
||||
this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
|
||||
|
||||
// Get the modal container
|
||||
const modalContainer = document.querySelector('.v-overlay__content');
|
||||
|
||||
if (!datepickerWrapper || !modalContainer) return;
|
||||
|
||||
// Get bounding rectangles
|
||||
const wrapperRect = datepickerWrapper.getBoundingClientRect();
|
||||
const modalRect = modalContainer.getBoundingClientRect();
|
||||
|
||||
// Calculate position relative to modal
|
||||
const topPosition =
|
||||
wrapperRect.top - modalRect.top + wrapperRect.height;
|
||||
const leftPosition = wrapperRect.left - modalRect.left;
|
||||
|
||||
// Apply positioning
|
||||
// calendar.style.position = 'absolute';
|
||||
calendar.style.top = `${topPosition + 210}px`;
|
||||
// calendar.style.left = `${leftPosition}px`;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
async openDatepicker(ref) {
|
||||
this.$refs[ref].openMenu();
|
||||
},
|
||||
|
||||
updateDate(date) {
|
||||
const updated = { ...this.timeblock, date };
|
||||
this.$emit('updateTimeblock', updated);
|
||||
@@ -195,7 +132,4 @@ export default {
|
||||
|
||||
.datepicker-wrapper
|
||||
width: 100%
|
||||
.datepicker-input
|
||||
width: 100% !important
|
||||
pointer-events: none
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Ste si istý, že chcete zmazať sub task z mastertasku <b>{{ subtask.project_code }}</b>?</h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="500" persistent>
|
||||
<v-dialog v-model="visible" max-width="500" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog max-width="750" v-model="visible" persistent>
|
||||
<v-dialog max-width="750" v-model="visible" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Pridať odpracovaný čas</h1>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
max-height="90%"
|
||||
height="700px"
|
||||
persistent
|
||||
:retain-focus="false"
|
||||
>
|
||||
<W-loadable :content="subtask" class="h-100">
|
||||
<v-card
|
||||
@@ -26,7 +27,6 @@
|
||||
v-model="subtask.project_code"
|
||||
label="Kód projektu"
|
||||
:value="subtask.project_code"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
variant="solo"
|
||||
disabled
|
||||
@@ -44,12 +44,10 @@
|
||||
variant="solo"
|
||||
class="modal-input"
|
||||
clearable
|
||||
@focus="onInputFocus"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="subtask.title"
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
label="Názov subtasku"
|
||||
variant="solo"
|
||||
@@ -60,7 +58,6 @@
|
||||
<div class="w-100 modal-input">
|
||||
<Z-datepicker
|
||||
v-model="subtask.deadline"
|
||||
@open="onDateOpen"
|
||||
ref="datepicker-01"
|
||||
label="Deadline"
|
||||
:auto-apply="true"
|
||||
@@ -83,7 +80,6 @@
|
||||
label="Čas"
|
||||
append-inner-icon="mdi-clock-outline"
|
||||
type="time"
|
||||
@focus="onInputFocus"
|
||||
:class="{ error: v$.subtask._deadline_time.$errors.length }"
|
||||
:hint="
|
||||
v$.subtask._deadline_time.$errors
|
||||
@@ -160,7 +156,6 @@
|
||||
label="Časový odhad"
|
||||
:class="{ error: employeeValidations[0]?.duration }"
|
||||
append-inner-icon="mdi-clock-outline"
|
||||
@focus="onInputFocus"
|
||||
@update:model-value="
|
||||
employeeValidations[0]
|
||||
? (employeeValidations[0].duration = false)
|
||||
@@ -222,7 +217,6 @@
|
||||
label="Časový odhad"
|
||||
append-inner-icon="mdi-clock-outline"
|
||||
:class="{ error: employeeValidations[index]?.duration }"
|
||||
@focus="onInputFocus"
|
||||
@update:model-value="
|
||||
employeeValidations[index]
|
||||
? (employeeValidations[index].duration = false)
|
||||
@@ -242,9 +236,6 @@
|
||||
:deletable="index > 0"
|
||||
:editable="true"
|
||||
:ref="`timetable-${index}`"
|
||||
:prevent-input-focus="preventInputFocus"
|
||||
:on-input-focus="onInputFocus"
|
||||
:on-date-open="onDateOpen"
|
||||
:index="index"
|
||||
/>
|
||||
<div class="end-button w-100" v-if="!subtask.id">
|
||||
@@ -352,7 +343,6 @@ import useVuelidate from '@vuelidate/core';
|
||||
import { required, requiredIf, optional } from '@vuelidate/validators';
|
||||
import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
|
||||
import { QuillEditor } from '@vueup/vue-quill';
|
||||
import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus';
|
||||
import SelectsMixin from '../master-task/_mixins/selects.mixin';
|
||||
import * as FileSaver from 'file-saver';
|
||||
import tmUtils from '@/plugins/tm@_utils/tm.utils';
|
||||
@@ -367,7 +357,7 @@ import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
|
||||
|
||||
export default {
|
||||
emits: ['close', 'refresh'],
|
||||
mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin],
|
||||
mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
|
||||
|
||||
components: {
|
||||
ZTaskReadonlyInfo,
|
||||
@@ -503,29 +493,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Override onDateOpen from VuetifyFixFocusMixin to add logging
|
||||
onDateOpen($event) {
|
||||
// Call the parent mixin's onDateOpen method
|
||||
if (
|
||||
VuetifyFixFocusMixin.methods &&
|
||||
VuetifyFixFocusMixin.methods.onDateOpen
|
||||
) {
|
||||
VuetifyFixFocusMixin.methods.onDateOpen.call(this, $event);
|
||||
}
|
||||
},
|
||||
|
||||
// Override onInputFocus from VuetifyFixFocusMixin to add logging
|
||||
onInputFocus($event) {
|
||||
const target = $event?.target;
|
||||
// Call the parent mixin's onInputFocus method
|
||||
if (
|
||||
VuetifyFixFocusMixin.methods &&
|
||||
VuetifyFixFocusMixin.methods.onInputFocus
|
||||
) {
|
||||
VuetifyFixFocusMixin.methods.onInputFocus.call(this, $event);
|
||||
}
|
||||
},
|
||||
|
||||
toggleEditMode() {
|
||||
if (this.subtask.type == 'office365')
|
||||
return this.$events.emit('show-unable-to-edit-office-task-modal', {
|
||||
@@ -595,7 +562,6 @@ export default {
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
this.v$.$reset();
|
||||
this.setFocusEvent();
|
||||
|
||||
// Reset after modal is fully rendered and v-dialog autofocus has been blocked
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Sub Task má nedokončené úlohy</h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1 v-if="mode === 'edit'">Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho vo svojom kalendári a pockajte na zosynchronizovanie s Task Managerom</h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px" persistent>
|
||||
<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px" persistent :retain-focus="false">
|
||||
<W-loadable :content="team" class="h-100">
|
||||
<v-card height="100%" class="d-flex flex-column">
|
||||
<div class="d-flex justify-space-between align-center modal-header">
|
||||
|
||||
Reference in new issue
Block a user