refactor(datepicker): fixed focus prevention on inputs

app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue

@@ -51,7 +51,7 @@
     </v-col>
   </v-row>
 
-  <v-dialog max-width="750" v-model="showModal" persistent>
+  <v-dialog max-width="750" v-model="showModal" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>

app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue

@@ -58,7 +58,7 @@
     </v-col>
   </v-row>
 
-  <v-dialog max-width="750" v-model="showModal" persistent>
+  <v-dialog max-width="750" v-model="showModal" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať dátum</h1>
@@ -70,8 +70,9 @@
       </div>
 
       <v-card-actions class="mt-10 d-flex flex-column modal-content">
-        <Datepicker
+        <Z-datepicker
           v-model="form.date"
+          label="Dátum"
           format="dd.MM.yyyy"
           locale="sk"
           select-text="Vybrať"
@@ -115,7 +116,7 @@
       <v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
     </v-card>
   </v-dialog>
-  <v-dialog v-model="visible" max-width="750" persistent>
+  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1 class="text-red">
@@ -152,7 +153,7 @@ import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
 import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import Datepicker from '@vuepic/vue-datepicker';
+import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
 import moment from 'moment';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import { mapGetters } from 'vuex';
@@ -162,7 +163,7 @@ export default {
   emits: ['update-subtask'],
 
   components: {
-    Datepicker,
+    ZDatepicker,
   },
 
   props: {

app/src/plugins/tm@modal/task/_components/a-timeblock.vue

@@ -3,15 +3,11 @@
     <div v-if="deletable && editable" class="x-button">
       <button @click="$emit('removeTimeblock')" class="x-button">x</button>
     </div>
-    <div
-      @click="handleDatepickerClick"
-      class="datepicker-wrapper"
-      :ref="`timeblock-datepicker-wrapper-${index}`"
-    >
-      <Datepicker
+    <div class="datepicker-wrapper">
+      <Z-datepicker
         :model-value="timeblock.date"
-        :ref="`timeblock-datepicker-${index}`"
         @update:model-value="updateDate"
+        label="Dátum"
         format="dd.MM.yyyy"
         locale="sk"
         select-text="Vybrať"
@@ -48,11 +44,11 @@
 <script>
 import useVuelidate from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
-import Datepicker from '@vuepic/vue-datepicker';
+import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
 
 export default {
   components: {
-    Datepicker,
+    ZDatepicker,
   },
 
   props: {
@@ -71,21 +67,6 @@ export default {
       default: false,
     },
 
-    preventInputFocus: {
-      type: Boolean,
-      default: false,
-    },
-
-    onInputFocus: {
-      type: Function,
-      default: () => ({}),
-    },
-
-    onDateOpen: {
-      type: Function,
-      default: () => ({}),
-    },
-
     index: {
       type: Number,
     },
@@ -107,50 +88,6 @@ export default {
   },
 
   methods: {
-    handleDatepickerClick() {
-      // Pass the datepicker wrapper element reference to the mixin
-      const scrollTarget =
-        this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
-      this.onDateOpen(scrollTarget);
-      // Open the datepicker
-      this.openDatepicker(`timeblock-datepicker-${this.index}`);
-
-      setTimeout(() => {
-        const calendar = document.querySelector(
-          '.dp__menu.dp__menu_index.dp__theme_light',
-        );
-
-        if (!calendar) return;
-
-        // Get the datepicker wrapper element
-        const datepickerWrapper =
-          this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
-
-        // Get the modal container
-        const modalContainer = document.querySelector('.v-overlay__content');
-
-        if (!datepickerWrapper || !modalContainer) return;
-
-        // Get bounding rectangles
-        const wrapperRect = datepickerWrapper.getBoundingClientRect();
-        const modalRect = modalContainer.getBoundingClientRect();
-
-        // Calculate position relative to modal
-        const topPosition =
-          wrapperRect.top - modalRect.top + wrapperRect.height;
-        const leftPosition = wrapperRect.left - modalRect.left;
-
-        // Apply positioning
-        // calendar.style.position = 'absolute';
-        calendar.style.top = `${topPosition + 210}px`;
-        // calendar.style.left = `${leftPosition}px`;
-      }, 100);
-    },
-
-    async openDatepicker(ref) {
-      this.$refs[ref].openMenu();
-    },
-
     updateDate(date) {
       const updated = { ...this.timeblock, date };
       this.$emit('updateTimeblock', updated);
@@ -195,7 +132,4 @@ export default {
 
 .datepicker-wrapper
     width: 100%
-    .datepicker-input
-        width: 100% !important
-        pointer-events: none
 </style>

app/src/plugins/tm@modal/task/z-complete-task-modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent>
+  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>

app/src/plugins/tm@modal/task/z-delete-task-modal.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
 		<v-card>
 			<div class="d-flex justify-space-between align-center">
 				<h1>Ste si istý, že chcete zmazať sub task z mastertasku <b>{{ subtask.project_code }}</b>?</h1>

app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="visible" max-width="500" persistent>
+  <v-dialog v-model="visible" max-width="500" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>

app/src/plugins/tm@modal/task/z-task-add-time-modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog max-width="750" v-model="visible" persistent>
+  <v-dialog max-width="750" v-model="visible" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>

app/src/plugins/tm@modal/task/z-task-modal.vue

@@ -5,6 +5,7 @@
     max-height="90%"
     height="700px"
     persistent
+    :retain-focus="false"
   >
     <W-loadable :content="subtask" class="h-100">
       <v-card
@@ -26,7 +27,6 @@
             v-model="subtask.project_code"
             label="Kód projektu"
             :value="subtask.project_code"
-            @focus="onInputFocus"
             class="modal-input"
             variant="solo"
             disabled
@@ -44,12 +44,10 @@
             variant="solo"
             class="modal-input"
             clearable
-            @focus="onInputFocus"
           />
 
           <v-text-field
             v-model="subtask.title"
-            @focus="onInputFocus"
             class="modal-input"
             label="Názov subtasku"
             variant="solo"
@@ -60,7 +58,6 @@
             <div class="w-100 modal-input">
               <Z-datepicker
                 v-model="subtask.deadline"
-                @open="onDateOpen"
                 ref="datepicker-01"
                 label="Deadline"
                 :auto-apply="true"
@@ -83,7 +80,6 @@
               label="Čas"
               append-inner-icon="mdi-clock-outline"
               type="time"
-              @focus="onInputFocus"
               :class="{ error: v$.subtask._deadline_time.$errors.length }"
               :hint="
                 v$.subtask._deadline_time.$errors
@@ -160,7 +156,6 @@
               label="Časový odhad"
               :class="{ error: employeeValidations[0]?.duration }"
               append-inner-icon="mdi-clock-outline"
-              @focus="onInputFocus"
               @update:model-value="
                 employeeValidations[0]
                   ? (employeeValidations[0].duration = false)
@@ -222,7 +217,6 @@
                 label="Časový odhad"
                 append-inner-icon="mdi-clock-outline"
                 :class="{ error: employeeValidations[index]?.duration }"
-                @focus="onInputFocus"
                 @update:model-value="
                   employeeValidations[index]
                     ? (employeeValidations[index].duration = false)
@@ -242,9 +236,6 @@
               :deletable="index > 0"
               :editable="true"
               :ref="`timetable-${index}`"
-              :prevent-input-focus="preventInputFocus"
-              :on-input-focus="onInputFocus"
-              :on-date-open="onDateOpen"
               :index="index"
             />
             <div class="end-button w-100" v-if="!subtask.id">
@@ -352,7 +343,6 @@ import useVuelidate from '@vuelidate/core';
 import { required, requiredIf, optional } from '@vuelidate/validators';
 import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
 import { QuillEditor } from '@vueup/vue-quill';
-import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus';
 import SelectsMixin from '../master-task/_mixins/selects.mixin';
 import * as FileSaver from 'file-saver';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
@@ -367,7 +357,7 @@ import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 
 export default {
   emits: ['close', 'refresh'],
-  mixins: [VuetifyFixFocusMixin, SelectsMixin, AutocompleteMixin, modalMixin],
+  mixins: [SelectsMixin, AutocompleteMixin, modalMixin],
 
   components: {
     ZTaskReadonlyInfo,
@@ -503,29 +493,6 @@ export default {
   },
 
   methods: {
-    // Override onDateOpen from VuetifyFixFocusMixin to add logging
-    onDateOpen($event) {
-      // Call the parent mixin's onDateOpen method
-      if (
-        VuetifyFixFocusMixin.methods &&
-        VuetifyFixFocusMixin.methods.onDateOpen
-      ) {
-        VuetifyFixFocusMixin.methods.onDateOpen.call(this, $event);
-      }
-    },
-
-    // Override onInputFocus from VuetifyFixFocusMixin to add logging
-    onInputFocus($event) {
-      const target = $event?.target;
-      // Call the parent mixin's onInputFocus method
-      if (
-        VuetifyFixFocusMixin.methods &&
-        VuetifyFixFocusMixin.methods.onInputFocus
-      ) {
-        VuetifyFixFocusMixin.methods.onInputFocus.call(this, $event);
-      }
-    },
-
     toggleEditMode() {
       if (this.subtask.type == 'office365')
         return this.$events.emit('show-unable-to-edit-office-task-modal', {
@@ -595,7 +562,6 @@ export default {
       ];
       this.$nextTick(() => {
         this.v$.$reset();
-        this.setFocusEvent();
 
         // Reset after modal is fully rendered and v-dialog autofocus has been blocked
         setTimeout(() => {

app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent>
+  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Sub Task má nedokončené úlohy</h1>

app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
 		<v-card>
 			<div class="d-flex justify-space-between align-center">
 				<h1 v-if="mode === 'edit'">Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho vo svojom kalendári a pockajte na zosynchronizovanie s Task Managerom</h1>