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

<template>
  <div class="timeblock w-100">
    <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
        :model-value="timeblock.date"
        :ref="`timeblock-datepicker-${index}`"
        @update:model-value="updateDate"
        format="dd.MM.yyyy"
        locale="sk"
        select-text="Vybrať"
        cancel-text="Zrušiť"
        placeholder="Dátum"
        :auto-apply="true"
        :enable-time-picker="false"
        class="mb-5 modal-input datepicker-input"
      />
    </div>
    <div class="splitted-time-inputs">
      <v-text-field
        :value="timeblock.starts_at_time"
        @input="updateStartTime"
        :class="{ error: v$?.timeblock.starts_at_time.$errors.length }"
        type="time"
        variant="solo"
        bg-color="white"
        label="Začiatok"
      />
      <v-text-field
        :value="timeblock.ends_at_time"
        @input="updateEndTime"
        :class="{ error: v$?.timeblock.ends_at_time.$errors.length }"
        type="time"
        variant="solo"
        bg-color="white"
        label="Koniec"
      />
    </div>
  </div>
</template>

<script>
import useVuelidate from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators';
import Datepicker from '@vuepic/vue-datepicker';

export default {
  components: {
    Datepicker,
  },

  props: {
    timeblock: {
      type: Object,
      required: true,
    },

    deletable: {
      type: Boolean,
      default: false,
    },

    editable: {
      type: Boolean,
      default: false,
    },

    preventInputFocus: {
      type: Boolean,
      default: false,
    },

    onInputFocus: {
      type: Function,
      default: () => ({}),
    },

    onDateOpen: {
      type: Function,
      default: () => ({}),
    },

    index: {
      type: Number,
    },
  },

  data() {
    return {
      v$: useVuelidate(),
    };
  },

  validations() {
    return {
      timeblock: {
        starts_at_time: { required: requiredIf(this.timeblock.date) },
        ends_at_time: { required: requiredIf(this.timeblock.date) },
      },
    };
  },

  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);
    },

    updateStartTime(event) {
      const updated = { ...this.timeblock, starts_at_time: event.target.value };
      this.$emit('updateTimeblock', updated);
    },

    updateEndTime(event) {
      const updated = { ...this.timeblock, ends_at_time: event.target.value };
      this.$emit('updateTimeblock', updated);
    },
  },
};
</script>

<style lang="sass" scoped>
.timeblock
    position: relative
    border-top: 1px solid #e0e0e0
    padding: 20px 0 5px 0
    .splitted-time-inputs
        display: flex !important
        flex-direction: row !important
        gap: 15px
        margin-bottom: -11px

    .x-button
        display: flex
        justify-content: flex-end
        align-items: center
        position: relative
        bottom: 5px

        button
            margin-right: 5px

.error input
    border: 1px solid red !important

.datepicker-wrapper
    width: 100%
    .datepicker-input
        width: 100% !important
        pointer-events: none
</style>