From f3d3aa916e1289f4081ca3512440bc6c84583032 Mon Sep 17 00:00:00 2001
From: JakubPapso <“jakubpapso@gmail.com”>
Date: Mon, 24 Jun 2024 19:29:12 +0200
Subject: [PATCH] [calendar fix]

---
 .../tm@modal/task/_components/a-timeblock.vue | 26 +++++++++++++++++--
 .../plugins/tm@modal/task/z-task-modal.vue    | 16 ++++++++++--
 2 files changed, 38 insertions(+), 4 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 9ee7d38..c1cb9eb 100644
--- a/app/src/plugins/tm@modal/task/_components/a-timeblock.vue
+++ b/app/src/plugins/tm@modal/task/_components/a-timeblock.vue
@@ -3,7 +3,9 @@
         <div v-if="deletable && editable" class="x-button">
             <button @click="$emit('removeTimeblock')" class="x-button">x</button>
         </div>
-        <Datepicker :model-value="timeblock.date" @focus="$emit('onDateFocus')" @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" />
+        <div @click="openDatepicker('datepicker')" class="datepicker-wrapper" ref="datepicker-wrapper">
+            <Datepicker :model-value="timeblock.date" ref="datepicker" @focus="onDateFocus" @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" @focus="onInputFocus" :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" @focus="onInputFocus" :class="{ error: v$?.timeblock.ends_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Koniec" />
@@ -15,13 +17,15 @@
 import useVuelidate from '@vuelidate/core'
 import { requiredIf } from '@vuelidate/validators'
 import Datepicker from '@vuepic/vue-datepicker'
+import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 
 export default {
+    mixins: [VuetifyFixFocusMixin],
+
     components: {
         Datepicker
     },
 
-
     props: {
         timeblock: {
             type: Object,
@@ -55,6 +59,18 @@ export default {
     },
 
     methods: {
+        async openDatepicker(ref) {
+			this.$refs[ref].openMenu()
+            this.$nextTick(() => {
+                this.$refs['datepicker-wrapper'].scrollIntoView({ behavior: 'instant', block: 'center', inline: 'center' })
+                this.$nextTick(() => {
+                    const popup = document.querySelector('.dp__menu.dp__menu_index')
+                    const isBottom = popup.querySelector('.dp__arrow_bottom')
+                    const yDifference = isBottom ? 0 - popup.clientHeight - 42 : 35
+                    popup.style.top = window.innerHeight / 2 + yDifference + 'px'
+                })
+            })
+		},
         onFocus() {
             console.log('focus')
         },
@@ -100,4 +116,10 @@ export default {
 
 .error input
     border: 1px solid red !important
+
+.datepicker-wrapper
+    width: 100%
+    .datepicker-input
+        width: 100% !important
+        pointer-events: none
 </style>e
\ No newline at end of file
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 d505277..da03cb8 100644
--- a/app/src/plugins/tm@modal/task/z-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-modal.vue
@@ -16,7 +16,9 @@
 
 					<div class="splitted-inputs">
 						<!-- TODO: Bialko validacie -->
-						<Datepicker v-model="subtask.deadline" @focus="onDateFocus" :auto-apply="true" :min-date="new Date()" class="modal-input left" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Deadline" :class="{ error: v$.subtask.deadline.$errors?.length }" :validations="v$.subtask.deadline" />
+						<div @click="openDatepicker('datepicker-01')" class="datepicker-wrapper">
+							<Datepicker v-model="subtask.deadline" @focus="onDateFocus" ref="datepicker-01" :auto-apply="true" :min-date="new Date()" class="modal-input left datepicker-input" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Deadline" :class="{ error: v$.subtask.deadline.$errors?.length }" :validations="v$.subtask.deadline" />
+						</div>
 
 						<v-text-field class="modal-input right" variant="solo" v-model="subtask._deadline_time" 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 ? errorUtils.parseErrors(v$.subtask._deadline_time.$errors) : null" />
 					</div>
@@ -69,7 +71,7 @@
 
 					<template v-if="!subtask.id">
 						<div class="timeblocks w-100">
-							<A-timeblock v-for="(timeblock, index) in timeblocks" :key="index" @updateTimeblock="val => updateTimeblock(val, index)" @removeTimeblock="removeTimeblock(index)" @onDateFocus="onDateFocus" :timeblock="timeblock" :deletable="index > 0" editable :ref="`timetable-${index}`" />
+							<A-timeblock v-for="(timeblock, index) in timeblocks" :key="index" @updateTimeblock="val => updateTimeblock(val, index)" @removeTimeblock="removeTimeblock(index)" :timeblock="timeblock" :deletable="index > 0" editable :ref="`timetable-${index}`" />
 							<div class="end-button w-100">
 								<button @click="timeblocks.push({date: null, starts_at_time: null, ends_at_time: null})">Pridať časový blok</button>
 							</div>
@@ -232,6 +234,10 @@ export default {
 	},
 
 	methods: {
+		openDatepicker(ref) {
+			this.$refs[ref].openMenu()
+		},
+
 		updateTimeblock(val, index) {
 			this.timeblocks[index] = val
 		},
@@ -559,4 +565,10 @@ export default {
 		flex-direction: row !important
 		gap: 15px
 		margin-bottom: -11px
+
+.datepicker-wrapper
+	width: 70%
+	.datepicker-input
+		width: 100% !important
+		pointer-events: none
 </style>