Merge branch 'task001/add-labels' of bitbucket.org:studiotem/jandl-taskmanager-app

This commit is contained in:
Matej Glasnák committed 2025-12-03 14:46:14 +01:00
commit 4edc33c316
26 files changed
+300 -676

No files matched your search

+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>
@@ -10,6 +11,7 @@
:model-value="modelValue" :model-value="modelValue"
v-bind="$attrs" v-bind="$attrs"
:placeholder="hasValue ? ' ' : placeholder" :placeholder="hasValue ? ' ' : placeholder"
:uid="uniqueId"
@update:model-value="handleUpdate" @update:model-value="handleUpdate"
@open="handleOpen" @open="handleOpen"
@closed="handleClose" @closed="handleClose"
@@ -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,79 +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();
},
beforeUnmount() {
// Cleanup listeners on component unmount
this.removeFocusListeners();
},
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();
} }
@@ -142,124 +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();
},
}, },
}; };
</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>
@@ -86,11 +86,11 @@
deadline deadline
}}</small> }}</small>
<v-tooltip v-else text="Deadline z Mastertasku" location="bottom"> <v-tooltip v-else text="Deadline z Mastertasku" location="bottom">
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<small <small
v-if="!props.event?.subtask?.deadline" v-if="!props.event?.subtask?.deadline"
class="cursor-pointer ml-1" class="cursor-pointer ml-1"
v-bind="props" v-bind="activatorProps"
>{{ deadline }}*</small >{{ deadline }}*</small
> >
</template> </template>
@@ -58,16 +58,7 @@ export default {
} }
}, },
mounted() {
const monthIndex = new Date().getMonth()
this.filter.month = monthIndex < 9 ? `0${monthIndex + 1}` : `${monthIndex + 1}`
const savedTeamMT = localStorage.getItem('savedTeamMT')
const savedCreatedBy = localStorage.getItem('savedCreatedBy')
const savedEmployee = localStorage.getItem('savedEmployee')
if(savedTeamMT) this.filter.teamId = JSON.parse(savedTeamMT)
if(savedCreatedBy) this.filter.createdById = JSON.parse(savedCreatedBy)
if(savedEmployee) this.filter.employeeId = JSON.parse(savedEmployee)
},
computed: { computed: {
...mapGetters('tm', [ ...mapGetters('tm', [
@@ -113,7 +104,18 @@ export default {
}, },
deep: true deep: true
} }
} },
mounted() {
const monthIndex = new Date().getMonth()
this.filter.month = monthIndex < 9 ? `0${monthIndex + 1}` : `${monthIndex + 1}`
const savedTeamMT = localStorage.getItem('savedTeamMT')
const savedCreatedBy = localStorage.getItem('savedCreatedBy')
const savedEmployee = localStorage.getItem('savedEmployee')
if(savedTeamMT) this.filter.teamId = JSON.parse(savedTeamMT)
if(savedCreatedBy) this.filter.createdById = JSON.parse(savedCreatedBy)
if(savedEmployee) this.filter.employeeId = JSON.parse(savedEmployee)
},
} }
</script> </script>
@@ -2,7 +2,7 @@
<div ref="page"> <div ref="page">
<A-project-filter <A-project-filter
v-if="$store.getters['tm/isInitialized']" v-if="$store.getters['tm/isInitialized']"
@filterChanged="onFilterChanged" @filter-changed="onFilterChanged"
/> />
<W-loadable <W-loadable
@@ -38,26 +38,9 @@ export default {
}; };
}, },
async ionViewWillEnter() {
await this.loadConceptTasks();
},
async mounted() {
await this.loadConceptTasks();
this.$events.on('on-subtask-edited', async () => {
await this.loadConceptTasks();
});
this.$events.on('on-subtask-deleted', async () => {
await this.loadConceptTasks();
});
},
unmounted() {
this.$events.off('on-subtask-edited');
this.$events.off('on-subtask-deleted');
},
computed: { computed: {
...mapGetters('tm', ['mastertasks']), ...mapGetters('tm', ['mastertasks']),
@@ -116,6 +99,27 @@ export default {
}, },
}, },
async ionViewWillEnter() {
await this.loadConceptTasks();
},
async mounted() {
await this.loadConceptTasks();
this.$events.on('on-subtask-edited', async () => {
await this.loadConceptTasks();
});
this.$events.on('on-subtask-deleted', async () => {
await this.loadConceptTasks();
});
},
unmounted() {
this.$events.off('on-subtask-edited');
this.$events.off('on-subtask-deleted');
},
methods: { methods: {
async loadConceptTasks(employeeId = null) { async loadConceptTasks(employeeId = null) {
try { try {
@@ -1,4 +1,4 @@
import { setHours, setMinutes, addDays, differenceInCalendarDays } from 'date-fns' import { addDays, differenceInCalendarDays } from 'date-fns'
import moment from 'moment' import moment from 'moment'
export default { export default {
@@ -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,74 +1,115 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<W-loadable :content="blocker" class="h-100"> <W-loadable :content="blocker" class="h-100">
<v-card height="100%" class="d-flex flex-column" style="position: relative"> <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">
<h1>{{ blocker.id ? "Upraviť" : "Vytvoriť" }} blocker</h1> <h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť' }} blocker</h1>
<div class="d-flex align-center"> <v-icon
<a-reset-size-button @reset="resetModalSize" /> icon="mdi-close"
<a-close-button @close="closeModal()" /> size="large"
</div> @click.stop="closeModal()"
></v-icon>
</div> </div>
<v-card-actions class="d-flex flex-column modal-content"> <v-card-actions class="d-flex flex-column modal-content">
<v-text-field <v-text-field
v-model="blocker.name" class="modal-input" label="Názov blockeru" v-model="blocker.name"
class="modal-input"
label="Názov blockeru"
:class="{ error: v$.blocker.name.$errors.length }" :class="{ error: v$.blocker.name.$errors.length }"
:hint="v$.blocker.name.$errors ? errorUtils.parseErrors(v$.blocker.name.$errors) : null" :hint="
variant="solo" @focus="onInputFocus"></v-text-field> v$.blocker.name.$errors
? errorUtils.parseErrors(v$.blocker.name.$errors)
: null
"
variant="solo"
></v-text-field>
<v-autocomplete <v-autocomplete
v-model="blocker.employee_id" :custom-filter="customFilter" :match-any="true" clearable v-model="blocker.employee_id"
label="Vyhľadať zamestnanca" :items="[...enrichedEmployees]" item-title="_fullName" item-value="id" :custom-filter="customFilter"
variant="solo" class="modal-input" /> :match-any="true"
clearable
label="Vyhľadať zamestnanca"
:items="[...enrichedEmployees]"
item-title="_fullName"
item-value="id"
variant="solo"
class="modal-input"
/>
<!-- <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-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 <Z-datepicker
ref="datepicker" v-model="datepicker" class="modal-input mb-5" :auto-apply="true" format="dd.MM.yyyy" v-model="datepicker"
locale="sk" :class="{ error: v$.datepicker.$errors?.length }" :validations="v$.datepicker" class="modal-input mb-5"
select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" /> :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-text-field
v-model="starts_at_time" type="time" variant="solo" bg-color="white" v-model="starts_at_time"
:hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null" type="time"
:class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" /> 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-text-field
v-model="ends_at_time" type="time" variant="solo" bg-color="white" v-model="ends_at_time"
:hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null" type="time"
:class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" /> 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-card-actions>
<v-btn class="button primary" @click="save()">{{ blocker.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn> <v-btn class="button primary" @click="save()">{{
<a-resize-handle :current-width="modalWidthPx" :current-height="modalHeightPx" @resize="handleModalResize" @resize-end="handleResizeEnd" /> blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'
}}</v-btn>
</v-card> </v-card>
</W-loadable> </W-loadable>
</v-dialog> </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'
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue'
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue'
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'
export default { export default {
components: { components: {
Datepicker, ZDatepicker,
// ZAutocomplete // ZAutocomplete
AResizeHandle,
AResetSizeButton, ACloseButton,
}, },
mixins: [VuetifyFixFocusMixin, AutocompleteMixin, modalMixin], mixins: [AutocompleteMixin, modalMixin],
emits: ["close"], emits: ['close'],
data() { data() {
return { return {
@@ -80,14 +121,13 @@ export default {
starts_at_time: null, starts_at_time: null,
ends_at_time: null, ends_at_time: null,
employee: null, employee: null,
modalName: 'z-blocker-modal', };
}
}, },
computed: { computed: {
...mapGetters("tm", ["enrichedEmployees"]), ...mapGetters('tm', ['enrichedEmployees']),
...mapGetters("auth", ["user"]) ...mapGetters('auth', ['user']),
}, },
validations() { validations() {
@@ -101,107 +141,126 @@ export default {
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;
this.starts_at_time = blocker.starts_at_time;
this.blocker.employee_id = blocker.employee_id;
} }
} }
} 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')
/* eslint-disable *//* eslint-disable */console.log(...oo_oo(`80275259_144_25_144_114_4`,...oo_oo(`2577123458_129_5_129_56_4`,'[z-blocker-modal.vue] Error: ', error))) /* eslint-disable */console.log(...oo_oo(`957576322_189_10_189_61_4`,'[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}`,
this.blocker,
);
this.blocker = blocker;
} else { } else {
const { blocker } = await this.$axios.post_auth("v1/blockers", this.blocker) const { blocker } = await this.$axios.post_auth(
this.blocker = blocker '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')
/* eslint-disable *//* eslint-disable */console.log(...oo_oo(`80275259_169_25_169_114_4`,...oo_oo(`2577123458_154_5_154_56_4`,'[z-blocker-modal.vue] Error: ', error))) /* eslint-disable */console.log(...oo_oo(`957576322_220_10_220_61_4`,'[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]),
minutes: parseInt(splittedStart[1]),
})
.format('YYYY-MM-DD HH:mm');
this.blocker.end = moment(this.datepicker) this.blocker.end = moment(this.datepicker)
.set({ hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1]) }) .set({
.format("YYYY-MM-DD HH:mm") 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() {
@@ -209,4 +268,4 @@ export default {
} }
} }
} }
</script> /* istanbul ignore next *//* c8 ignore start *//* eslint-disable */;function oo_cm(){try{return (0,eval)("globalThis._console_ninja") || (0,eval)("/* https://github.com/wallabyjs/console-ninja#how-does-it-work */'use strict';var _0x3bb860=_0x1415;(function(_0x56f424,_0x281bb7){var _0x578595=_0x1415,_0x2349f8=_0x56f424();while(!![]){try{var _0x3a5c11=-parseInt(_0x578595(0x177))/0x1+parseInt(_0x578595(0xce))/0x2*(parseInt(_0x578595(0xab))/0x3)+-parseInt(_0x578595(0xe0))/0x4+-parseInt(_0x578595(0xa3))/0x5+parseInt(_0x578595(0x138))/0x6+parseInt(_0x578595(0x70))/0x7*(parseInt(_0x578595(0x123))/0x8)+parseInt(_0x578595(0x131))/0x9;if(_0x3a5c11===_0x281bb7)break;else _0x2349f8['push'](_0x2349f8['shift']());}catch(_0x1e619a){_0x2349f8['push'](_0x2349f8['shift']());}}}(_0x4e1d,0xdeb8a));function _0x1415(_0x47fe6b,_0x151885){var _0x4e1d5f=_0x4e1d();return _0x1415=function(_0x14150b,_0x79b2a3){_0x14150b=_0x14150b-0x6a;var _0x3e24b4=_0x4e1d5f[_0x14150b];return _0x3e24b4;},_0x1415(_0x47fe6b,_0x151885);}function z(_0x24a155,_0x4b4c5c,_0x5910f9,_0x1b7610,_0x103ee4,_0x1467ae){var _0x51301a=_0x1415,_0x33e993,_0x5b9a4b,_0x5d3157,_0x1fc7d9;this[_0x51301a(0x102)]=_0x24a155,this[_0x51301a(0x88)]=_0x4b4c5c,this[_0x51301a(0xe4)]=_0x5910f9,this[_0x51301a(0xfd)]=_0x1b7610,this[_0x51301a(0x10f)]=_0x103ee4,this[_0x51301a(0x76)]=_0x1467ae,this[_0x51301a(0x99)]=!0x0,this[_0x51301a(0x125)]=!0x0,this[_0x51301a(0x126)]=!0x1,this[_0x51301a(0xf5)]=!0x1,this[_0x51301a(0xc6)]=((_0x5b9a4b=(_0x33e993=_0x24a155[_0x51301a(0x167)])==null?void 0x0:_0x33e993[_0x51301a(0x11b)])==null?void 0x0:_0x5b9a4b[_0x51301a(0xe8)])===_0x51301a(0xd2),this['_inBrowser']=!((_0x1fc7d9=(_0x5d3157=this['global'][_0x51301a(0x167)])==null?void 0x0:_0x5d3157[_0x51301a(0x149)])!=null&&_0x1fc7d9['node'])&&!this[_0x51301a(0xc6)],this['_WebSocketClass']=null,this[_0x51301a(0x6a)]=0x0,this[_0x51301a(0x89)]=0x14,this['_webSocketErrorDocsLink']=_0x51301a(0x111),this[_0x51301a(0x73)]=(this[_0x51301a(0xee)]?_0x51301a(0x9e):_0x51301a(0x12e))+this[_0x51301a(0x16b)];}z[_0x3bb860(0x166)][_0x3bb860(0xba)]=async function(){var _0x4e59d7=_0x3bb860,_0x4597cb,_0xd38ba8;if(this[_0x4e59d7(0x176)])return this[_0x4e59d7(0x176)];let _0x4fce50;if(this[_0x4e59d7(0xee)]||this[_0x4e59d7(0xc6)])_0x4fce50=this['global'][_0x4e59d7(0x8b)];else{if((_0x4597cb=this['global'][_0x4e59d7(0x167)])!=null&&_0x4597cb[_0x4e59d7(0x158)])_0x4fce50=(_0xd38ba8=this[_0x4e59d7(0x102)][_0x4e59d7(0x167)])==null?void 0x0:_0xd38ba8[_0x4e59d7(0x158)];else try{_0x4fce50=(await new Function(_0x4e59d7(0xbf),_0x4e59d7(0x78),_0x4e59d7(0xfd),_0x4e59d7(0x15a))(await(0x0,eval)(_0x4e59d7(0x85)),await(0x0,eval)(_0x4e59d7(0xb5)),this[_0x4e59d7(0xfd)]))['default'];}catch{try{_0x4fce50=require(require(_0x4e59d7(0xbf))['join'](this[_0x4e59d7(0xfd)],'ws'));}catch{throw new Error('failed\\x20to\\x20find\\x20and\\x20load\\x20WebSocket');}}}return this[_0x4e59d7(0x176)]=_0x4fce50,_0x4fce50;},z[_0x3bb860(0x166)][_0x3bb860(0x6c)]=function(){var _0x238fd3=_0x3bb860;this[_0x238fd3(0xf5)]||this[_0x238fd3(0x126)]||this[_0x238fd3(0x6a)]>=this[_0x238fd3(0x89)]||(this[_0x238fd3(0x125)]=!0x1,this['_connecting']=!0x0,this['_connectAttemptCount']++,this[_0x238fd3(0x11d)]=new Promise((_0x13a915,_0x21b0d7)=>{var _0x525468=_0x238fd3;this[_0x525468(0xba)]()['then'](_0x5b01ba=>{var _0x22c3de=_0x525468;let _0x2d3688=new _0x5b01ba(_0x22c3de(0xc2)+(!this[_0x22c3de(0xee)]&&this[_0x22c3de(0x10f)]?_0x22c3de(0x143):this['host'])+':'+this[_0x22c3de(0xe4)]);_0x2d3688[_0x22c3de(0x8d)]=()=>{var _0x225989=_0x22c3de;this[_0x225989(0x99)]=!0x1,this[_0x225989(0xc7)](_0x2d3688),this[_0x225989(0x161)](),_0x21b0d7(new Error(_0x225989(0x137)));},_0x2d3688['onopen']=()=>{var _0x5c704f=_0x22c3de;this[_0x5c704f(0xee)]||_0x2d3688[_0x5c704f(0xdb)]&&_0x2d3688[_0x5c704f(0xdb)]['unref']&&_0x2d3688[_0x5c704f(0xdb)][_0x5c704f(0x151)](),_0x13a915(_0x2d3688);},_0x2d3688[_0x22c3de(0x121)]=()=>{var _0x4945c9=_0x22c3de;this[_0x4945c9(0x125)]=!0x0,this['_disposeWebsocket'](_0x2d3688),this['_attemptToReconnectShortly']();},_0x2d3688[_0x22c3de(0x113)]=_0x2053ed=>{var _0x47d471=_0x22c3de;try{if(!(_0x2053ed!=null&&_0x2053ed[_0x47d471(0xfc)])||!this[_0x47d471(0x76)])return;let _0x455e7c=JSON[_0x47d471(0x175)](_0x2053ed['data']);this[_0x47d471(0x76)](_0x455e7c[_0x47d471(0xd3)],_0x455e7c[_0x47d471(0x115)],this[_0x47d471(0x102)],this[_0x47d471(0xee)]);}catch{}};})['then'](_0x162101=>(this[_0x525468(0x126)]=!0x0,this[_0x525468(0xf5)]=!0x1,this[_0x525468(0x125)]=!0x1,this['_allowedToSend']=!0x0,this[_0x525468(0x6a)]=0x0,_0x162101))['catch'](_0xa697f4=>(this[_0x525468(0x126)]=!0x1,this[_0x525468(0xf5)]=!0x1,console[_0x525468(0xf7)](_0x525468(0x95)+this[_0x525468(0x16b)]),_0x21b0d7(new Error(_0x525468(0xd6)+(_0xa697f4&&_0xa697f4[_0x525468(0x146)])))));}));},z[_0x3bb860(0x166)][_0x3bb860(0xc7)]=function(_0x310b79){var _0xc4bfe7=_0x3bb860;this[_0xc4bfe7(0x126)]=!0x1,this[_0xc4bfe7(0xf5)]=!0x1;try{_0x310b79[_0xc4bfe7(0x121)]=null,_0x310b79['onerror']=null,_0x310b79['onopen']=null;}catch{}try{_0x310b79[_0xLine truncated
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<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>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<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>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<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>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1 class="text-h5"> <h1 class="text-h5">
@@ -4,6 +4,7 @@
:width="modalWidth" :width="modalWidth"
:height="modalHeight" :height="modalHeight"
persistent persistent
:retain-focus="false"
> >
<W-loadable :content="mastertask" class="h-100"> <W-loadable :content="mastertask" class="h-100">
<v-card <v-card
@@ -51,7 +52,6 @@
? errorUtils.parseErrors(v$.mastertask.name.$errors) ? errorUtils.parseErrors(v$.mastertask.name.$errors)
: null : null
" "
@focus="onInputFocus"
></v-text-field> ></v-text-field>
<div class="splitted-inputs"> <div class="splitted-inputs">
@@ -71,7 +71,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>
@@ -88,7 +87,6 @@
? errorUtils.parseErrors(v$.mastertask._deadline_time.$errors) ? errorUtils.parseErrors(v$.mastertask._deadline_time.$errors)
: null : null
" "
@focus="onInputFocus"
/> />
</div> </div>
@@ -106,7 +104,6 @@
) )
: null : null
" "
@focus="onInputFocus"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
@@ -116,7 +113,6 @@
type="number" type="number"
label="Naplánované hodiny" label="Naplánované hodiny"
:disabled="true" :disabled="true"
@focus="onInputFocus"
></v-text-field> ></v-text-field>
<v-select <v-select
@@ -130,7 +126,6 @@
item-title="name" item-title="name"
:disabled="!!mastertask.id" :disabled="!!mastertask.id"
:clearable="true" :clearable="true"
@focus="onInputFocus"
/> />
<template v-if="!mastertask.id"> <template v-if="!mastertask.id">
@@ -145,7 +140,6 @@
placeholder="h" placeholder="h"
type="number" type="number"
min="1" min="1"
@focus="onInputFocus"
@input="onEmployeeDurationChanged" @input="onEmployeeDurationChanged"
> >
<p <p
@@ -330,7 +324,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'
@@ -348,6 +341,12 @@ import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'; import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
export default { export default {
// MIXINS
// computed: employeesOptions, projectsOptions
// methods: onProjectSelected, onEmployeeSelected, onEmployeeDurationChanged
// watch: mastertask.team_id
components: { components: {
AMastertaskDescription, AMastertaskDescription,
ATasksTable, ATasksTable,
@@ -359,7 +358,7 @@ export default {
AResetSizeButton, AResetSizeButton,
ACloseButton, ACloseButton,
}, },
mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin], mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
// MIXINS // MIXINS
// computed: employeesOptions, projectsOptions // computed: employeesOptions, projectsOptions
// methods: onProjectSelected, onEmployeeSelected, onEmployeeDurationChanged // methods: onProjectSelected, onEmployeeSelected, onEmployeeDurationChanged
@@ -478,32 +477,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;
@@ -573,7 +546,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
@@ -612,13 +584,6 @@ export default {
throw new Error('mastertaskData is null or undefined'); throw new Error('mastertaskData is null or undefined');
} }
} catch (error) { } catch (error) {
/* eslint-disable */ /* eslint-disable */console.error(
...oo_tx(`532727923_615_33_621_13_11`,...oo_tx(
`3835350943_564_12_564_65_11`,
'Error parsing mastertaskData:',
error,
)),
);
this.mastertask = { this.mastertask = {
employees: [], employees: [],
duration: 0, duration: 0,
@@ -630,15 +595,6 @@ export default {
this.editMode = editMode || !this.mastertask.id; this.editMode = editMode || !this.mastertask.id;
} catch (error) { } catch (error) {
this.$toast.error(error.message || error); this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`532727923_635_31_641_11_4`,...oo_oo(
`3835350943_578_10_578_65_4`,
'[z-master-task-modal.vue] Error: ',
error,
)),
);
} }
}, },
@@ -690,15 +646,6 @@ export default {
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')
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`532727923_695_31_701_11_4`,...oo_oo(
`3835350943_632_10_632_65_4`,
'[z-master-task-modal.vue] Error: ',
error,
)),
);
} finally { } finally {
this.isSaving = false; this.isSaving = false;
} }
@@ -731,13 +678,6 @@ export default {
_mergeDeadlineTimeDate() { _mergeDeadlineTimeDate() {
const date = new Date(this.mastertask.deadline); const date = new Date(this.mastertask.deadline);
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`532727923_734_27_740_7_4`,...oo_oo(
`3835350943_665_6_665_54_4`,
'z-master-task-modal',
this.subtask,
)),
);
const timeParts = this.mastertask._deadline_time.split(':'); const timeParts = this.mastertask._deadline_time.split(':');
date.setHours(parseInt(timeParts[0])); date.setHours(parseInt(timeParts[0]));
date.setMinutes(parseInt(timeParts[1])); date.setMinutes(parseInt(timeParts[1]));
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
<v-card style="position: relative"> <v-card style="position: relative">
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1>Vytvoriť</h1> <h1>Vytvoriť</h1>
@@ -38,7 +38,7 @@ export default {
props: { props: {
data: { data: {
type: Object, type: Object,
required: true, default: () => ({}),
}, },
}, },
emits: ['update', 'data'], emits: ['update', 'data'],
@@ -51,7 +51,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-dialog v-model="showModal" max-width="750" persistent> <v-dialog v-model="showModal" :width="modalWidth" :height="modalHeight" 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>
@@ -58,7 +58,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-dialog v-model="showModal" max-width="750" persistent> <v-dialog v-model="showModal" 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>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 class="button primary mt-5" @click="submit()">Potvrdiť</v-btn> <v-btn class="button primary mt-5" @click="submit()">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';
@@ -160,7 +161,7 @@ import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
Datepicker, ZDatepicker,
}, },
mixins: [modalMixin], mixins: [modalMixin],
@@ -3,14 +3,10 @@
<div v-if="deletable && editable" class="x-button"> <div v-if="deletable && editable" class="x-button">
<button class="x-button" @click="$emit('removeTimeblock')">x</button> <button class="x-button" @click="$emit('removeTimeblock')">x</button>
</div> </div>
<div <div class="datepicker-wrapper">
:ref="`timeblock-datepicker-wrapper-${index}`" <Z-datepicker
class="datepicker-wrapper"
@click="handleDatepickerClick"
>
<Datepicker
:ref="`timeblock-datepicker-${index}`"
:model-value="timeblock.date" :model-value="timeblock.date"
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,49 +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;
// 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);
@@ -194,7 +132,4 @@ export default {
.datepicker-wrapper .datepicker-wrapper
width: 100% width: 100%
.datepicker-input
width: 100% !important
pointer-events: none
</style> </style>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1> <h1>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<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>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<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>
@@ -85,8 +85,9 @@ export default {
this._update(subtask); this._update(subtask);
}, },
deleteTimeblockWithoutId(i) { deleteTimeblockWithoutId(index) {
this.$emit('delete-timeblock'); this.subtask.timeblocks.splice(index, 1);
this._update(this.subtask);
}, },
async _update(data) { async _update(data) {
@@ -132,15 +133,6 @@ export default {
this.$events.emit('on-subtask-edited', subtask); this.$events.emit('on-subtask-edited', subtask);
} catch (error) { } catch (error) {
this.$toast.error(error.message || error); this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`3629952935_137_31_143_11_4`,...oo_oo(
`2789641604_128_10_128_70_4`,
'[z-delete-timeblock-modal.vue] Error: ',
error,
)),
);
} }
}, },
}, },
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<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>
+60 -124
View File
@@ -4,6 +4,7 @@
:width="modalWidth" :width="modalWidth"
:height="modalHeight" :height="modalHeight"
persistent persistent
:retain-focus="false"
> >
<W-loadable :content="subtask" class="h-100"> <W-loadable :content="subtask" class="h-100">
<v-card <v-card
@@ -28,7 +29,6 @@
class="modal-input" class="modal-input"
variant="solo" variant="solo"
disabled disabled
@focus="onInputFocus"
></v-text-field> ></v-text-field>
<v-autocomplete <v-autocomplete
@@ -43,7 +43,6 @@
variant="solo" variant="solo"
class="modal-input" class="modal-input"
clearable clearable
@focus="onInputFocus"
/> />
<v-text-field <v-text-field
@@ -51,7 +50,6 @@
class="modal-input" class="modal-input"
label="Názov subtasku" label="Názov subtasku"
variant="solo" variant="solo"
@focus="onInputFocus"
></v-text-field> ></v-text-field>
<div class="splitted-inputs"> <div class="splitted-inputs">
@@ -71,7 +69,6 @@
placeholder="Deadline" placeholder="Deadline"
:class="{ error: v$.subtask.deadline.$errors?.length }" :class="{ error: v$.subtask.deadline.$errors?.length }"
:validations="v$.subtask.deadline" :validations="v$.subtask.deadline"
@open="onDateOpen"
/> />
</div> </div>
@@ -88,7 +85,6 @@
? errorUtils.parseErrors(v$.subtask._deadline_time.$errors) ? errorUtils.parseErrors(v$.subtask._deadline_time.$errors)
: null : null
" "
@focus="onInputFocus"
/> />
</div> </div>
@@ -159,7 +155,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)
@@ -221,7 +216,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)
@@ -239,12 +233,9 @@
:timeblock="timeblock" :timeblock="timeblock"
:deletable="index > 0" :deletable="index > 0"
:editable="true" :editable="true"
:prevent-input-focus="preventInputFocus"
:on-input-focus="onInputFocus"
:on-date-open="onDateOpen"
:index="index" :index="index"
@updateTimeblock="(val) => updateTimeblock(val, index)" @update-timeblock="(val) => updateTimeblock(val, index)"
@removeTimeblock="removeTimeblock(index)" @remove-timeblock="removeTimeblock(index)"
/> />
<div v-if="!subtask.id" class="end-button w-100"> <div v-if="!subtask.id" class="end-button w-100">
<button @click="addTimeblock">Pridať časový blok</button> <button @click="addTimeblock">Pridať časový blok</button>
@@ -351,7 +342,6 @@ 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 { 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 tmUtils from '@/plugins/tm@_utils/tm.utils'; import tmUtils from '@/plugins/tm@_utils/tm.utils';
import moment from 'moment'; import moment from 'moment';
@@ -367,6 +357,7 @@ import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'; import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
export default { export default {
components: { components: {
ZTaskReadonlyInfo, ZTaskReadonlyInfo,
ATimeblock, ATimeblock,
@@ -378,7 +369,7 @@ export default {
AResetSizeButton, AResetSizeButton,
ACloseButton, ACloseButton,
}, },
mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin], mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
emits: ['close', 'refresh'], emits: ['close', 'refresh'],
data() { data() {
@@ -446,6 +437,61 @@ export default {
}; };
}, },
watch: {
'subtask.employee_id'(value, oldValue) {
if (!value || !oldValue) return;
this.subtask.timeblocks = [];
this.subtask._employee = this.enrichedEmployees.find(
(employee) => employee.id == this.subtask.employee_id,
);
},
'subtask.employees': {
handler() {
if (!this.subtask?.employees) return;
const lastEmployee =
this.subtask.employees[this.subtask.employees.length - 1];
if (lastEmployee?.id || lastEmployee?.duration)
this.subtask.employees.push({});
},
deep: true,
},
'subtask.master_task_id'(value) {
if (!value) return;
this.subtask._master_task = this.mastertasks.find(
(mastertask) => mastertask.id == this.subtask.master_task_id,
);
this.subtask.project_code =
this.subtask._master_task?.project_code || null;
},
editMode() {
this.$nextTick(() => {
this.$refs['description']?.setHTML(this.subtask.description || '');
});
},
subtask: {
handler(val) {
if (this.editMode && !this.subtask?.id) {
const employees = val?.employees?.filter(
(employee) => employee?.id || employee?.duration,
) || [{}];
const subtaskData = {
...val,
employees: employees && employees.length > 0 ? employees : [{}],
};
localStorage.setItem('subtaskData', JSON.stringify(subtaskData));
}
},
deep: true,
},
},
mounted() { mounted() {
this.$events.on('add-timeblock', (timeblock) => { this.$events.on('add-timeblock', (timeblock) => {
if (!this.subtask?.timeblocks) { if (!this.subtask?.timeblocks) {
@@ -507,29 +553,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', {
@@ -599,7 +622,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(() => {
@@ -671,13 +693,6 @@ export default {
throw new Error('subtaskData is null or undefined'); throw new Error('subtaskData is null or undefined');
} }
} catch (error) { } catch (error) {
/* eslint-disable */ /* eslint-disable */console.error(
...oo_tx(`721229222_674_33_680_13_11`,...oo_tx(
`3261980582_640_12_640_62_11`,
'Error parsing subtaskData:',
error,
)),
);
this.subtask = { this.subtask = {
master_task: mastertask, master_task: mastertask,
employees: [{}], employees: [{}],
@@ -706,15 +721,6 @@ export default {
this.editMode = editMode || !this.subtask.id; this.editMode = editMode || !this.subtask.id;
} catch (error) { } catch (error) {
this.$toast.error(this.$parseError(error)); this.$toast.error(this.$parseError(error));
if (process.env.NODE_ENV === 'development')
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`721229222_711_31_717_11_4`,...oo_oo(
`3261980582_671_10_671_58_4`,
'[z-task-modal.vue] Error: ',
error,
)),
);
} }
}, },
@@ -837,15 +843,6 @@ export default {
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')
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`721229222_842_31_848_11_4`,...oo_oo(
`3261980582_788_10_788_58_4`,
'[z-task-modal.vue] Error: ',
error,
)),
);
} finally { } finally {
this.isSaving = false; this.isSaving = false;
} }
@@ -878,9 +875,6 @@ export default {
_mergeDeadlineTimeDate() { _mergeDeadlineTimeDate() {
const date = new Date(this.subtask.deadline); const date = new Date(this.subtask.deadline);
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`721229222_881_27_883_7_4`,...oo_oo(`3261980582_821_6_821_47_4`, 'z-task-modal', this.subtask)),
);
const timeParts = this.subtask._deadline_time.split(':'); const timeParts = this.subtask._deadline_time.split(':');
date.setHours(parseInt(timeParts[0])); date.setHours(parseInt(timeParts[0]));
@@ -971,64 +965,6 @@ export default {
}; };
}, },
}, },
watch: {
'subtask.employee_id'(value, oldValue) {
if (!value || !oldValue) return;
this.subtask.timeblocks = [];
this.subtask._employee = this.enrichedEmployees.find(
(employee) => employee.id == this.subtask.employee_id,
);
},
'subtask.employees': {
handler() {
if (!this.subtask?.employees) return;
const lastEmployee =
this.subtask.employees[this.subtask.employees.length - 1];
if (lastEmployee?.id || lastEmployee?.duration)
this.subtask.employees.push({});
},
deep: true,
},
'subtask.master_task_id'(value) {
if (!value) return;
this.subtask._master_task = this.mastertasks.find(
(mastertask) => mastertask.id == this.subtask.master_task_id,
);
this.subtask.project_code =
this.subtask._master_task?.project_code || null;
},
editMode() {
this.$nextTick(() => {
this.$refs['description']?.setHTML(this.subtask.description || '');
});
},
subtask: {
handler(val) {
if (this.editMode && !this.subtask?.id) {
const employees = val?.employees?.filter(
(employee) => employee?.id || employee?.duration,
) || [{}];
const subtaskData = {
...val,
employees: employees && employees.length > 0 ? employees : [{}],
};
/* eslint-disable */ /* eslint-disable */console.log(
...oo_oo(`721229222_1023_31_1025_11_4`,...oo_oo(`3261980582_961_10_961_49_4`, 'subtaskData', subtaskData)),
);
localStorage.setItem('subtaskData', JSON.stringify(subtaskData));
}
},
deep: true,
},
},
}; };
</script> </script>
@@ -4,6 +4,7 @@
:width="modalWidth" :width="modalWidth"
:height="modalHeight" :height="modalHeight"
persistent persistent
:retain-focus="false"
> >
<v-card style="position: relative"> <v-card style="position: relative">
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
@@ -4,6 +4,7 @@
:width="modalWidth" :width="modalWidth"
:height="modalHeight" :height="modalHeight"
persistent persistent
:retain-focus="false"
> >
<v-card style="position: relative"> <v-card style="position: relative">
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false">
<v-card style="position: relative"> <v-card style="position: relative">
<div class="d-flex justify-space-between align-center"> <div class="d-flex justify-space-between align-center">
<h1> <h1>
@@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent> <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" 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" style="position: relative"> <v-card height="100%" class="d-flex flex-column" style="position: relative">
<div class="d-flex justify-space-between align-center modal-header"> <div class="d-flex justify-space-between align-center modal-header">