JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 06:20:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(datepicker): fixed focus prevention on inputs

Browse Source
This commit is contained in:
Matej Glasnák committed 2025-12-03 14:29:08 +01:00
1 parent 3e130c9a0d
commit 69536e21f5
21 files changed
+282 -581
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@_components/z-datepicker.vue
+12 -187
View File
@@ -1,7 +1,8 @@
<template> <template>
<div <div
class="z-datepicker-wrapper" class="z-datepicker-wrapper"
:class="{ 'has-value': hasValue, 'is-focused': isFocused }" :class="{ 'has-value': hasValue }"
:data-datepicker-id="uniqueId"
@click="handleClick" @click="handleClick"
> >
<label v-if="label" class="z-datepicker-label">{{ label }}</label> <label v-if="label" class="z-datepicker-label">{{ label }}</label>
@@ -13,6 +14,7 @@
@closed="handleClose" @closed="handleClose"
v-bind="$attrs" v-bind="$attrs"
:placeholder="hasValue ? ' ' : placeholder" :placeholder="hasValue ? ' ' : placeholder"
:uid="uniqueId"
/> />
</div> </div>
</template> </template>
@@ -46,10 +48,7 @@ export default {
data() { data() {
return { return {
isFocused: false, uniqueId: `z-datepicker-${crypto.randomUUID()}`,
preventInputFocus: false,
savedScrollPosition: null,
focusListeners: new Map(),
}; };
}, },
@@ -59,74 +58,26 @@ export default {
}, },
}, },
mounted() {
// Attach focus listeners on mount to catch any focus events
// Use immediate attachment (no $nextTick) to catch early focus events
this.attachFocusListeners();
},
methods: { methods: {
handleUpdate(value) { handleUpdate(value) {
this.$emit('update:modelValue', value); this.$emit('update:modelValue', value);
}, },
handleOpen(event) { handleOpen(event) {
this.isFocused = true; this.$emit('open', event);
// IMPORTANT: If scroll position wasn't saved yet (handleClick wasn't called),
// save it now but it might be too late and already scrolled to 0
if (this.savedScrollPosition === null) {
this.preventInputFocus = true;
const modalContent = document.querySelector('.v-dialog .modal-content');
if (modalContent) {
this.savedScrollPosition = modalContent.scrollTop;
}
}
// CRITICAL: Blur any currently focused input (v-dialog autofocus issue)
this.blurFocusedInputs();
// Reattach focus event listeners (for dynamically added inputs)
this.attachFocusListeners();
// Position the calendar menu relative to the modal
this.positionCalendar();
// Reset after datepicker is opened
setTimeout(() => {
this.preventInputFocus = false;
this.savedScrollPosition = null;
}, 500);
// Emit to parent (for backward compatibility)
const wrapperElement =
event?.target?.closest?.('.z-datepicker-wrapper') || true;
this.$emit('open', wrapperElement);
}, },
handleClose(event) { handleClose(event) {
this.isFocused = false;
this.$emit('closed', event); this.$emit('closed', event);
}, },
handleClick(event) { handleClick(event) {
// Prevent any default behavior // Only handle clicks on the wrapper itself, not on the datepicker's internal clear button
event.preventDefault(); if (event.target.closest('.dp__clear_icon')) {
event.stopPropagation(); return; // Let the clear button work normally
// CRITICAL: Set prevention flag BEFORE opening menu to catch early focus events
this.preventInputFocus = true;
// Save scroll position FIRST (before blur or opening menu)
const modalContent = document.querySelector('.v-dialog .modal-content');
if (modalContent) {
this.savedScrollPosition = modalContent.scrollTop;
} }
// CRITICAL: Blur any currently focused input // Open the menu programmatically
this.blurFocusedInputs(false); // Pass false to not restore scroll yet
// Open the menu
if (this.$refs.datepickerRef?.openMenu) { if (this.$refs.datepickerRef?.openMenu) {
this.$refs.datepickerRef.openMenu(); this.$refs.datepickerRef.openMenu();
} }
@@ -137,129 +88,6 @@ export default {
this.$refs.datepickerRef.openMenu(); this.$refs.datepickerRef.openMenu();
} }
}, },
positionCalendar() {
setTimeout(() => {
const calendar = document.querySelector(
'.dp__menu.dp__menu_index.dp__theme_light',
);
if (!calendar) return;
// Get the datepicker wrapper element
const datepickerWrapper = this.$el;
// 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.top = `${topPosition + 210}px`;
}, 100);
},
blurFocusedInputs(restoreScroll = true) {
const activeElement = document.activeElement;
if (activeElement && activeElement.tagName === 'INPUT') {
// Don't blur the datepicker's own input
if (
activeElement.closest('.dp__input_wrap') ||
activeElement.closest('.z-datepicker-wrapper')
) {
return;
}
activeElement.blur();
// Restore scroll position after blur (only if requested)
if (restoreScroll && this.savedScrollPosition !== null) {
const modalContent = document.querySelector(
'.v-dialog .modal-content',
);
if (modalContent) {
modalContent.scrollTop = this.savedScrollPosition;
}
}
}
},
attachFocusListeners() {
// Remove old listeners first
this.removeFocusListeners();
// Attach new listeners to autocomplete inputs only (like the mixin)
// Trying to catch all inputs causes issues with event timing
const inputs = document.querySelectorAll('.v-autocomplete input');
let totalListeners = 0;
inputs.forEach((input) => {
// Skip the datepicker's own input
if (input.closest('.dp__input_wrap')) {
return;
}
const listener = this.onInputFocus.bind(this);
this.focusListeners.set(input, listener);
input.addEventListener('focus', listener);
totalListeners++;
});
},
onInputFocus(event) {
const target = event.target;
// Skip if it's the datepicker's own input
if (
target.closest('.dp__input_wrap') ||
target.closest('.z-datepicker-wrapper')
) {
return;
}
// If prevention flag is set, block the focus
if (this.preventInputFocus && this.savedScrollPosition !== null) {
const scrollBefore = document.querySelector(
'.v-dialog .modal-content',
)?.scrollTop;
// Blur the focused element with a slight delay (like the mixin does)
setTimeout(() => {
target.blur();
// Restore scroll position after blur
const modalContent = document.querySelector(
'.v-dialog .modal-content',
);
if (modalContent && this.savedScrollPosition !== null) {
modalContent.scrollTop = this.savedScrollPosition;
const scrollAfter = modalContent.scrollTop;
}
}, 0);
}
},
removeFocusListeners() {
this.focusListeners.forEach((listener, input) => {
input.removeEventListener('focus', listener);
});
this.focusListeners.clear();
},
},
beforeUnmount() {
// Cleanup listeners on component unmount
this.removeFocusListeners();
}, },
}; };
</script> </script>
@@ -294,11 +122,6 @@ export default {
background: white background: white
padding: 0 4px padding: 0 4px
left: 13px left: 13px
&.is-focused .z-datepicker-label
color: rgba(0, 0, 0, 0.87)
&.has-value .z-datepicker-label
color: rgba(0, 0, 0, 0.6) color: rgba(0, 0, 0, 0.6)
&.has-value :deep(.dp__input_icon) &.has-value :deep(.dp__input_icon)
@@ -313,19 +136,21 @@ export default {
padding-bottom: 14px !important padding-bottom: 14px !important
:deep(.dp__input_wrap) :deep(.dp__input_wrap)
pointer-events: none
cursor: pointer cursor: pointer
:deep(.dp__input) :deep(.dp__input)
cursor: pointer cursor: pointer
pointer-events: none !important pointer-events: none !important
user-select: none
:deep(.dp__clear_icon) :deep(.dp__clear_icon)
pointer-events: auto !important pointer-events: auto !important
cursor: pointer !important cursor: pointer !important
top: 28px !important top: 28px !important
z-index: 10
:deep(.dp__input_icon) :deep(.dp__input_icon)
top: 27px !important top: 27px !important
left: 3px !important left: 3px !important
pointer-events: none !important
</style> </style>
app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts
-72
View File
@@ -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);
}
}
},
},
};
app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
+241 -160
View File
@@ -1,197 +1,278 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px" persistent> <v-dialog
<W-loadable :content="blocker" class="h-100"> v-model="visible"
<v-card height="100%" class="d-flex flex-column"> max-width="750"
<div class="d-flex justify-space-between align-center modal-header"> max-height="90%"
<h1>{{ blocker.id ? "Upraviť" : "Vytvoriť" }} blocker</h1> height="700px"
<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon> persistent
</div> :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-card-actions class="d-flex flex-column modal-content">
<v-text-field @focus="onInputFocus" class="modal-input" label="Názov blockeru" <v-text-field
:class="{ error: v$.blocker.name.$errors.length }" class="modal-input"
:hint="v$.blocker.name.$errors ? errorUtils.parseErrors(v$.blocker.name.$errors) : null" label="Názov blockeru"
v-model="blocker.name" variant="solo"></v-text-field> :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" <v-autocomplete
:items="[...enrichedEmployees]" item-title="_fullName" item-value="id" variant="solo" :custom-filter="customFilter"
class="modal-input" v-model="blocker.employee_id" /> :match-any="true"
<!-- <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" /> --> clearable
<Datepicker class="modal-input mb-5" v-model="datepicker" :auto-apply="true" format="dd.MM.yyyy" locale="sk" label="Vyhľadať zamestnanca"
:class="{ error: v$.datepicker.$errors?.length }" :validations="v$.datepicker" select-text="Vybrať" :items="[...enrichedEmployees]"
cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" ref="datepicker" /> 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" <v-text-field
:hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null" v-model="starts_at_time"
:class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" /> type="time"
<v-text-field v-model="ends_at_time" type="time" variant="solo" bg-color="white" variant="solo"
:hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null" bg-color="white"
:class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" /> :hint="
</v-card-actions> 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-btn class="button primary" @click="save()">{{
</v-card> blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'
</W-loadable> }}</v-btn>
</v-dialog> </v-card>
</W-loadable>
</v-dialog>
</template> </template>
<script> <script>
import Datepicker from "@vuepic/vue-datepicker" import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
import useVuelidate from "@vuelidate/core" import useVuelidate from '@vuelidate/core';
import { required } from "@vuelidate/validators" import { required } from '@vuelidate/validators';
import errorUtils from "@/plugins/lib@auth/_utils/error.utils" import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus" import { mapGetters } from 'vuex';
import { mapGetters } from "vuex" import moment from 'moment';
import moment from "moment" import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin';
import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin' import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
export default { export default {
mixins: [VuetifyFixFocusMixin, AutocompleteMixin, modalMixin], mixins: [AutocompleteMixin, modalMixin],
emits: ["close"], emits: ['close'],
components: { components: {
Datepicker, ZDatepicker,
// ZAutocomplete // ZAutocomplete
}, },
data() { data() {
return { return {
visible: false, visible: false,
v$: useVuelidate(), v$: useVuelidate(),
errorUtils, errorUtils,
blocker: null, blocker: null,
datepicker: null, datepicker: null,
starts_at_time: null, starts_at_time: null,
ends_at_time: null, ends_at_time: null,
employee: null employee: null,
} };
}, },
computed: { computed: {
...mapGetters("tm", ["enrichedEmployees"]), ...mapGetters('tm', ['enrichedEmployees']),
...mapGetters("auth", ["user"]) ...mapGetters('auth', ['user']),
}, },
validations() { validations() {
return { return {
blocker: { blocker: {
name: { required }, name: { required },
start: { required }, start: { required },
end: { required }, end: { required },
// employee: { required } // employee: { required }
}, },
starts_at_time: { required }, starts_at_time: { required },
ends_at_time: { required }, ends_at_time: { required },
datepicker: { required } datepicker: { required },
} };
}, },
methods: { methods: {
async showModal({ blocker }) { async showModal({ blocker }) {
this.visible = true this.visible = true;
this.blocker = null this.blocker = null;
this.datepicker = null this.datepicker = null;
this.starts_at_time = null this.starts_at_time = null;
this.ends_at_time = null this.ends_at_time = null;
this.$nextTick(() => { this.$nextTick(() => {
this.setFocusEvent() this.v$.$reset();
this.v$.$reset() });
})
try { try {
if (blocker?.id) { if (blocker?.id) {
blocker = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`) blocker = await this.$axios.get_auth_data(
`v1/blockers/${blocker.id}`,
);
this.starts_at_time = moment(blocker.start).format("HH:mm") this.starts_at_time = moment(blocker.start).format('HH:mm');
this.ends_at_time = moment(blocker.end).format("HH:mm") this.ends_at_time = moment(blocker.end).format('HH:mm');
this.datepicker = new Date(blocker.start) this.datepicker = new Date(blocker.start);
blocker.employee_id = blocker.employee.id blocker.employee_id = blocker.employee.id;
//fixnut validacie employee_id //fixnut validacie employee_id
this.blocker = blocker this.blocker = blocker;
} else { } else {
this.blocker = {start: null, employee_id: this.user.id } this.blocker = { start: null, employee_id: this.user.id };
if (blocker.starts_at_time && blocker.datepicker && blocker.employee_id) { if (
this.datepicker = blocker.datepicker blocker.starts_at_time &&
this.starts_at_time = blocker.starts_at_time blocker.datepicker &&
this.blocker.employee_id = blocker.employee_id blocker.employee_id
} ) {
} this.datepicker = blocker.datepicker;
} catch (error) { this.starts_at_time = blocker.starts_at_time;
this.$toast.error(this.$parseError(error)) this.blocker.employee_id = blocker.employee_id;
}
}
} catch (error) {
this.$toast.error(this.$parseError(error));
if (process.env.NODE_ENV === 'development') if (process.env.NODE_ENV === 'development')
console.log('[z-blocker-modal.vue] Error: ', error) console.log('[z-blocker-modal.vue] Error: ', error);
} }
}, },
async save() { async save() {
if (!(await this.v$.$validate())) return if (!(await this.v$.$validate())) return;
try { try {
// this.blocker.employee_id = this.blocker.employee?.id // this.blocker.employee_id = this.blocker.employee?.id
if (this.blocker.id) { if (this.blocker.id) {
const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker) const { blocker } = await this.$axios.put_auth(
this.blocker = blocker `v1/blockers/${this.blocker.id}`,
} else { this.blocker,
const { blocker } = await this.$axios.post_auth("v1/blockers", this.blocker) );
this.blocker = 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('on-blocker-edited', this.blocker);
this.$events.emit("blocker-created") this.$events.emit('blocker-created');
this.closeModal() this.closeModal();
} catch (error) { } catch (error) {
this.$toast.error(this.$parseError(error)) this.$toast.error(this.$parseError(error));
if (process.env.NODE_ENV === 'development') if (process.env.NODE_ENV === 'development')
console.log('[z-blocker-modal.vue] Error: ', error) console.log('[z-blocker-modal.vue] Error: ', error);
} }
}, },
closeModal() { closeModal() {
this.$refs["datepicker"].clearValue() this.visible = false;
this.visible = false this.$emit('close', this.blocker);
this.$emit("close", this.blocker) },
},
onEmployeeSelected({ key }) { onEmployeeSelected({ key }) {
this.blocker.employee = this.enrichedEmployees.find(employee => employee.id == key) this.blocker.employee = this.enrichedEmployees.find(
}, (employee) => employee.id == key,
);
},
_syncDatesTimes() { _syncDatesTimes() {
if (!this.starts_at_time || !this.ends_at_time || !this.datepicker) return if (!this.starts_at_time || !this.ends_at_time || !this.datepicker)
return;
const splittedStart = this.starts_at_time.split(":") const splittedStart = this.starts_at_time.split(':');
const splittedEnd = this.ends_at_time.split(":") const splittedEnd = this.ends_at_time.split(':');
this.blocker.start = moment(this.datepicker) this.blocker.start = moment(this.datepicker)
.set({ hours: parseInt(splittedStart[0]), minutes: parseInt(splittedStart[1]) }) .set({
.format("YYYY-MM-DD HH:mm") hours: parseInt(splittedStart[0]),
this.blocker.end = moment(this.datepicker) minutes: parseInt(splittedStart[1]),
.set({ hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1]) }) })
.format("YYYY-MM-DD HH:mm") .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: { watch: {
ends_at_time() { ends_at_time() {
this._syncDatesTimes() this._syncDatesTimes();
}, },
starts_at_time() { starts_at_time() {
this._syncDatesTimes() this._syncDatesTimes();
}, },
datepicker() { datepicker() {
this._syncDatesTimes() this._syncDatesTimes();
} },
} },
} };
</script> </script>
app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b>?</h1> <h1>Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b>?</h1>
app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <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> <h1>Ste si istý, že chcete {{ mastertask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} <b>{{ mastertask?.name }}</b>?</h1>
app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Ste si istý, že chcete zmazať <b>{{ mastertask.name }}</b>?</h1> <h1>Ste si istý, že chcete zmazať <b>{{ mastertask.name }}</b>?</h1>
app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="500" persistent> <v-dialog v-model="visible" max-width="500" persistent :retain-focus="false">
<v-card> <v-card>
<h1 class="text-h5"> <h1 class="text-h5">
Chcete túto osobu odstrániť z tímu? Chcete túto osobu odstrániť z tímu?
app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
+2 -36
View File
@@ -5,6 +5,7 @@
max-height="90%" max-height="90%"
height="700px" height="700px"
persistent persistent
:retain-focus="false"
> >
<W-loadable :content="mastertask" class="h-100"> <W-loadable :content="mastertask" class="h-100">
<v-card <v-card
@@ -43,7 +44,6 @@
<v-text-field <v-text-field
v-model="mastertask.name" v-model="mastertask.name"
@focus="onInputFocus"
class="modal-input" class="modal-input"
label="Názov mastertasku" label="Názov mastertasku"
variant="solo" variant="solo"
@@ -72,7 +72,6 @@
placeholder="Deadline" placeholder="Deadline"
:class="{ error: v$.mastertask.deadline.$errors?.length }" :class="{ error: v$.mastertask.deadline.$errors?.length }"
:validations="v$.mastertask.deadline" :validations="v$.mastertask.deadline"
@open="onDateOpen"
/> />
</div> </div>
@@ -83,7 +82,6 @@
label="Čas" label="Čas"
append-inner-icon="mdi-clock-outline" append-inner-icon="mdi-clock-outline"
type="time" type="time"
@focus="onInputFocus"
:class="{ error: v$.mastertask._deadline_time.$errors.length }" :class="{ error: v$.mastertask._deadline_time.$errors.length }"
:hint=" :hint="
v$.mastertask._deadline_time.$errors v$.mastertask._deadline_time.$errors
@@ -95,7 +93,6 @@
<v-text-field <v-text-field
v-model="mastertask.estimated_duration" v-model="mastertask.estimated_duration"
@focus="onInputFocus"
class="modal-input" class="modal-input"
variant="solo" variant="solo"
type="number" type="number"
@@ -112,7 +109,6 @@
<v-text-field <v-text-field
v-model="mastertask.duration" v-model="mastertask.duration"
@focus="onInputFocus"
class="modal-input" class="modal-input"
variant="solo" variant="solo"
type="number" type="number"
@@ -122,7 +118,6 @@
<v-select <v-select
v-model="mastertask.team_id" v-model="mastertask.team_id"
@focus="onInputFocus"
class="modal-input border-select" class="modal-input border-select"
:class="{ error: v$.mastertask.employees.$errors.length }" :class="{ error: v$.mastertask.employees.$errors.length }"
label="Tím" label="Tím"
@@ -138,7 +133,6 @@
<v-text-field <v-text-field
v-for="(employee, index) in mastertask.employees" v-for="(employee, index) in mastertask.employees"
:key="employee.id" :key="employee.id"
@focus="onInputFocus"
class="modal-input" class="modal-input"
:class="{ error: employee.invalid }" :class="{ error: employee.invalid }"
:label="`${employee.name} ${employee.surname}`" :label="`${employee.name} ${employee.surname}`"
@@ -316,7 +310,6 @@ import useVuelidate from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators'; import { required, minLength } from '@vuelidate/validators';
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'; import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
// import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue' // import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus';
import moment from 'moment'; import moment from 'moment';
import { QuillEditor } from '@vueup/vue-quill'; import { QuillEditor } from '@vueup/vue-quill';
// import tmUtils from '@/plugins/tm@_utils/tm.utils' // import tmUtils from '@/plugins/tm@_utils/tm.utils'
@@ -337,7 +330,7 @@ export default {
// watch: mastertask.team_id // watch: mastertask.team_id
emits: ['master-task-edited', 'close'], emits: ['master-task-edited', 'close'],
mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin], mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
components: { components: {
AMastertaskDescription, AMastertaskDescription,
@@ -458,32 +451,6 @@ export default {
}, },
methods: { 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() { closeBothModals() {
this.$emit('close'); this.$emit('close');
this.visible = false; this.visible = false;
@@ -553,7 +520,6 @@ export default {
this.visible = true; this.visible = true;
this.mastertask = null; this.mastertask = null;
this.$nextTick(() => { this.$nextTick(() => {
this.setFocusEvent();
this.v$.$reset(); this.v$.$reset();
// Reset after modal is fully rendered and v-dialog autofocus has been blocked // Reset after modal is fully rendered and v-dialog autofocus has been blocked
app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Vytvoriť</h1> <h1>Vytvoriť</h1>
app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
+1 -1
View File
@@ -51,7 +51,7 @@
</v-col> </v-col>
</v-row> </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> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Pridať odpracovaný čas</h1> <h1>Pridať odpracovaný čas</h1>
app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
+6 -5
View File
@@ -58,7 +58,7 @@
</v-col> </v-col>
</v-row> </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> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Pridať dátum</h1> <h1>Pridať dátum</h1>
@@ -70,8 +70,9 @@
</div> </div>
<v-card-actions class="mt-10 d-flex flex-column modal-content"> <v-card-actions class="mt-10 d-flex flex-column modal-content">
<Datepicker <Z-datepicker
v-model="form.date" v-model="form.date"
label="Dátum"
format="dd.MM.yyyy" format="dd.MM.yyyy"
locale="sk" locale="sk"
select-text="Vybrať" select-text="Vybrať"
@@ -115,7 +116,7 @@
<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn> <v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
</v-card> </v-card>
</v-dialog> </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> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1 class="text-red"> <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 errorUtils from '@/plugins/lib@auth/_utils/error.utils';
import useVuelidate from '@vuelidate/core'; import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators'; 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 moment from 'moment';
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'; import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
@@ -162,7 +163,7 @@ export default {
emits: ['update-subtask'], emits: ['update-subtask'],
components: { components: {
Datepicker, ZDatepicker,
}, },
props: { props: {
app/src/plugins/tm@modal/task/_components/a-timeblock.vue
+5 -71
View File
@@ -3,15 +3,11 @@
<div v-if="deletable && editable" class="x-button"> <div v-if="deletable && editable" class="x-button">
<button @click="$emit('removeTimeblock')" class="x-button">x</button> <button @click="$emit('removeTimeblock')" class="x-button">x</button>
</div> </div>
<div <div class="datepicker-wrapper">
@click="handleDatepickerClick" <Z-datepicker
class="datepicker-wrapper"
:ref="`timeblock-datepicker-wrapper-${index}`"
>
<Datepicker
:model-value="timeblock.date" :model-value="timeblock.date"
:ref="`timeblock-datepicker-${index}`"
@update:model-value="updateDate" @update:model-value="updateDate"
label="Dátum"
format="dd.MM.yyyy" format="dd.MM.yyyy"
locale="sk" locale="sk"
select-text="Vybrať" select-text="Vybrať"
@@ -48,11 +44,11 @@
<script> <script>
import useVuelidate from '@vuelidate/core'; import useVuelidate from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators'; import { requiredIf } from '@vuelidate/validators';
import Datepicker from '@vuepic/vue-datepicker'; import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
export default { export default {
components: { components: {
Datepicker, ZDatepicker,
}, },
props: { props: {
@@ -71,21 +67,6 @@ export default {
default: false, default: false,
}, },
preventInputFocus: {
type: Boolean,
default: false,
},
onInputFocus: {
type: Function,
default: () => ({}),
},
onDateOpen: {
type: Function,
default: () => ({}),
},
index: { index: {
type: Number, type: Number,
}, },
@@ -107,50 +88,6 @@ export default {
}, },
methods: { 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) { updateDate(date) {
const updated = { ...this.timeblock, date }; const updated = { ...this.timeblock, date };
this.$emit('updateTimeblock', updated); this.$emit('updateTimeblock', updated);
@@ -195,7 +132,4 @@ export default {
.datepicker-wrapper .datepicker-wrapper
width: 100% width: 100%
.datepicker-input
width: 100% !important
pointer-events: none
</style> </style>
app/src/plugins/tm@modal/task/z-complete-task-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1> <h1>
app/src/plugins/tm@modal/task/z-delete-task-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <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> <h1>Ste si istý, že chcete zmazať sub task z mastertasku <b>{{ subtask.project_code }}</b>?</h1>
app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="500" persistent> <v-dialog v-model="visible" max-width="500" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4> <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog max-width="750" v-model="visible" persistent> <v-dialog max-width="750" v-model="visible" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Pridať odpracovaný čas</h1> <h1>Pridať odpracovaný čas</h1>
app/src/plugins/tm@modal/task/z-task-modal.vue
+2 -36
View File
@@ -5,6 +5,7 @@
max-height="90%" max-height="90%"
height="700px" height="700px"
persistent persistent
:retain-focus="false"
> >
<W-loadable :content="subtask" class="h-100"> <W-loadable :content="subtask" class="h-100">
<v-card <v-card
@@ -26,7 +27,6 @@
v-model="subtask.project_code" v-model="subtask.project_code"
label="Kód projektu" label="Kód projektu"
:value="subtask.project_code" :value="subtask.project_code"
@focus="onInputFocus"
class="modal-input" class="modal-input"
variant="solo" variant="solo"
disabled disabled
@@ -44,12 +44,10 @@
variant="solo" variant="solo"
class="modal-input" class="modal-input"
clearable clearable
@focus="onInputFocus"
/> />
<v-text-field <v-text-field
v-model="subtask.title" v-model="subtask.title"
@focus="onInputFocus"
class="modal-input" class="modal-input"
label="Názov subtasku" label="Názov subtasku"
variant="solo" variant="solo"
@@ -60,7 +58,6 @@
<div class="w-100 modal-input"> <div class="w-100 modal-input">
<Z-datepicker <Z-datepicker
v-model="subtask.deadline" v-model="subtask.deadline"
@open="onDateOpen"
ref="datepicker-01" ref="datepicker-01"
label="Deadline" label="Deadline"
:auto-apply="true" :auto-apply="true"
@@ -83,7 +80,6 @@
label="Čas" label="Čas"
append-inner-icon="mdi-clock-outline" append-inner-icon="mdi-clock-outline"
type="time" type="time"
@focus="onInputFocus"
:class="{ error: v$.subtask._deadline_time.$errors.length }" :class="{ error: v$.subtask._deadline_time.$errors.length }"
:hint=" :hint="
v$.subtask._deadline_time.$errors v$.subtask._deadline_time.$errors
@@ -160,7 +156,6 @@
label="Časový odhad" label="Časový odhad"
:class="{ error: employeeValidations[0]?.duration }" :class="{ error: employeeValidations[0]?.duration }"
append-inner-icon="mdi-clock-outline" append-inner-icon="mdi-clock-outline"
@focus="onInputFocus"
@update:model-value=" @update:model-value="
employeeValidations[0] employeeValidations[0]
? (employeeValidations[0].duration = false) ? (employeeValidations[0].duration = false)
@@ -222,7 +217,6 @@
label="Časový odhad" label="Časový odhad"
append-inner-icon="mdi-clock-outline" append-inner-icon="mdi-clock-outline"
:class="{ error: employeeValidations[index]?.duration }" :class="{ error: employeeValidations[index]?.duration }"
@focus="onInputFocus"
@update:model-value=" @update:model-value="
employeeValidations[index] employeeValidations[index]
? (employeeValidations[index].duration = false) ? (employeeValidations[index].duration = false)
@@ -242,9 +236,6 @@
:deletable="index > 0" :deletable="index > 0"
:editable="true" :editable="true"
:ref="`timetable-${index}`" :ref="`timetable-${index}`"
:prevent-input-focus="preventInputFocus"
:on-input-focus="onInputFocus"
:on-date-open="onDateOpen"
:index="index" :index="index"
/> />
<div class="end-button w-100" v-if="!subtask.id"> <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 { required, requiredIf, optional } from '@vuelidate/validators';
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'; import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
import { QuillEditor } from '@vueup/vue-quill'; 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 SelectsMixin from '../master-task/_mixins/selects.mixin';
import * as FileSaver from 'file-saver'; import * as FileSaver from 'file-saver';
import tmUtils from '@/plugins/tm@_utils/tm.utils'; import tmUtils from '@/plugins/tm@_utils/tm.utils';
@@ -367,7 +357,7 @@ import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
export default { export default {
emits: ['close', 'refresh'], emits: ['close', 'refresh'],
mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin], mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
components: { components: {
ZTaskReadonlyInfo, ZTaskReadonlyInfo,
@@ -503,29 +493,6 @@ export default {
}, },
methods: { 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() { toggleEditMode() {
if (this.subtask.type == 'office365') if (this.subtask.type == 'office365')
return this.$events.emit('show-unable-to-edit-office-task-modal', { return this.$events.emit('show-unable-to-edit-office-task-modal', {
@@ -595,7 +562,6 @@ export default {
]; ];
this.$nextTick(() => { this.$nextTick(() => {
this.v$.$reset(); this.v$.$reset();
this.setFocusEvent();
// Reset after modal is fully rendered and v-dialog autofocus has been blocked // Reset after modal is fully rendered and v-dialog autofocus has been blocked
setTimeout(() => { setTimeout(() => {
app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Sub Task má nedokončené úlohy</h1> <h1>Sub Task má nedokončené úlohy</h1>
app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <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> <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>
app/src/plugins/tm@modal/team/z-delete-team-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" max-width="750" persistent> <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card> <v-card>
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1> <h1>
app/src/plugins/tm@modal/team/z-team-modal.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <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"> <W-loadable :content="team" class="h-100">
<v-card height="100%" class="d-flex flex-column"> <v-card height="100%" class="d-flex flex-column">
<div class="d-flex justify-space-between align-center modal-header"> <div class="d-flex justify-space-between align-center modal-header">