From 2a2ba6db51f72b70c10f908313e3f1c24d09abfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Tue, 14 Oct 2025 19:33:48 +0200
Subject: [PATCH] refactor(task-modal): fixed calendar position in timeblocks

---
 .../tm@modal/task/_components/a-timeblock.vue | 44 +++++++++++++++++--
 .../plugins/tm@modal/task/z-task-modal.vue    |  2 +-
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/src/plugins/tm@modal/task/_components/a-timeblock.vue b/app/src/plugins/tm@modal/task/_components/a-timeblock.vue
index 5fdf058..659671c 100644
--- a/app/src/plugins/tm@modal/task/_components/a-timeblock.vue
+++ b/app/src/plugins/tm@modal/task/_components/a-timeblock.vue
@@ -6,11 +6,11 @@
     <div
       @click="handleDatepickerClick"
       class="datepicker-wrapper"
-      ref="datepicker-wrapper"
+      :ref="`timeblock-datepicker-wrapper-${index}`"
     >
       <Datepicker
         :model-value="timeblock.date"
-        ref="datepicker"
+        :ref="`timeblock-datepicker-${index}`"
         @update:model-value="updateDate"
         format="dd.MM.yyyy"
         locale="sk"
@@ -85,6 +85,10 @@ export default {
       type: Function,
       default: () => ({}),
     },
+
+    index: {
+      type: Number,
+    },
   },
 
   data() {
@@ -105,10 +109,42 @@ export default {
   methods: {
     handleDatepickerClick() {
       // Pass the datepicker wrapper element reference to the mixin
-      const scrollTarget = this.$refs['datepicker-wrapper'];
+      const scrollTarget =
+        this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
       this.onDateOpen(scrollTarget);
       // Open the datepicker
-      this.openDatepicker('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) {
diff --git a/app/src/plugins/tm@modal/task/z-task-modal.vue b/app/src/plugins/tm@modal/task/z-task-modal.vue
index 6cac85c..12af670 100644
--- a/app/src/plugins/tm@modal/task/z-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-modal.vue
@@ -247,6 +247,7 @@
               :prevent-input-focus="preventInputFocus"
               :on-input-focus="onInputFocus"
               :on-date-open="onDateOpen"
+              :index="index"
             />
             <div class="end-button w-100" v-if="!subtask.id">
               <button @click="addTimeblock">Pridať časový blok</button>
@@ -349,7 +350,6 @@
 <script>
 import Datepicker from '@vuepic/vue-datepicker';
 import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue';
-import ATaskTimeblocks from '@/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue';
 import useVuelidate from '@vuelidate/core';
 import { required, requiredIf, optional } from '@vuelidate/validators';
 import errorUtils from '@/plugins/lib@auth/_utils/error.utils';