From 947f913679b79451d5b790a41d41fdf69873f581 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 7 Oct 2024 09:25:06 +0200
Subject: [PATCH 1/5] refactor: refs #8019 create VnDate

---
 src/components/common/VnDate.vue      | 11 +++++++++++
 src/components/common/VnInputDate.vue | 23 +++++++++++------------
 src/components/common/VnTime.vue      |  6 ++++++
 3 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 src/components/common/VnDate.vue
 create mode 100644 src/components/common/VnTime.vue

diff --git a/src/components/common/VnDate.vue b/src/components/common/VnDate.vue
new file mode 100644
index 000000000..4b65ec4da
--- /dev/null
+++ b/src/components/common/VnDate.vue
@@ -0,0 +1,11 @@
+<script setup>
+const model = defineModel({ type: [String, Number], required: true });
+</script>
+<template>
+    <QDate
+        v-model="model"
+        :landscape="$q.screen.gt.xs"
+        :today-btn="true"
+        :options="$attrs.options"
+    />
+</template>
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 3d5afaf80..1aa797ab7 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -3,6 +3,7 @@ import { onMounted, watch, computed, ref } from 'vue';
 import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useAttrs } from 'vue';
+import VnDate from './VnDate.vue';
 
 const model = defineModel({ type: [String, Date] });
 const $props = defineProps({
@@ -87,6 +88,11 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const manageDate = (date) => {
+    formattedDate.value = date;
+    isPopupOpen.value = false;
+};
 </script>
 
 <template>
@@ -129,6 +135,7 @@ const styleAttrs = computed(() => {
                 />
             </template>
             <QMenu
+                v-if="$q.screen.gt.xs"
                 transition-show="scale"
                 transition-hide="scale"
                 v-model="isPopupOpen"
@@ -137,19 +144,11 @@ const styleAttrs = computed(() => {
                 :no-focus="true"
                 :no-parent-event="true"
             >
-                <QDate
-                    v-model="popupDate"
-                    :landscape="true"
-                    :today-btn="true"
-                    :options="$attrs.options"
-                    @update:model-value="
-                        (date) => {
-                            formattedDate = date;
-                            isPopupOpen = false;
-                        }
-                    "
-                />
+                <VnDate v-model="popupDate" @update:model-value="manageDate" />
             </QMenu>
+            <QDialog v-else v-model="isPopupOpen">
+                <VnDate v-model="popupDate" @update:model-value="manageDate" />
+            </QDialog>
         </QInput>
     </div>
 </template>
diff --git a/src/components/common/VnTime.vue b/src/components/common/VnTime.vue
new file mode 100644
index 000000000..135709d2b
--- /dev/null
+++ b/src/components/common/VnTime.vue
@@ -0,0 +1,6 @@
+<script setup>
+const model = defineModel({ type: [String, Number], required: true });
+</script>
+<template>
+    <QTime v-model="model" :landscape="$q.screen.gt.xs" now-btn mask="HH:mm" />
+</template>

From 5c5a35998615b270d4f2423b4247f828fd9524fb Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 7 Oct 2024 09:38:39 +0200
Subject: [PATCH 2/5] refactor: refs #8019 create VnTime

---
 src/components/common/VnInputTime.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index a5e7d3002..6d69bc4a5 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -3,6 +3,8 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
+import VnTime from './VnTime.vue';
+
 const { validations } = useValidator();
 const $attrs = useAttrs();
 const model = defineModel({ type: String });
@@ -107,6 +109,7 @@ function dateToTime(newDate) {
                 />
             </template>
             <QMenu
+                v-if="$q.screen.gt.xs"
                 transition-show="scale"
                 transition-hide="scale"
                 v-model="isPopupOpen"
@@ -115,8 +118,11 @@ function dateToTime(newDate) {
                 :no-focus="true"
                 :no-parent-event="true"
             >
-                <QTime v-model="formattedTime" mask="HH:mm" landscape now-btn />
+                <VnTime v-model="formattedTime" />
             </QMenu>
+            <QDialog v-else v-model="isPopupOpen">
+                <VnTime v-model="formattedTime" />
+            </QDialog>
         </QInput>
     </div>
 </template>

From d1b3e01d871e95a7472900225fa2b2d545aef19c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 7 Oct 2024 13:36:27 +0200
Subject: [PATCH 3/5] chore: refs #8019 refactor css scoped

---
 src/components/common/VnDate.vue | 36 ++++++++++++++++++++++++++++++++
 src/components/ui/VnImg.vue      |  2 +-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnDate.vue b/src/components/common/VnDate.vue
index 4b65ec4da..cdfa0d258 100644
--- a/src/components/common/VnDate.vue
+++ b/src/components/common/VnDate.vue
@@ -9,3 +9,39 @@ const model = defineModel({ type: [String, Number], required: true });
         :options="$attrs.options"
     />
 </template>
+<style lang="scss" scoped>
+.q-date {
+    width: 240px;
+    min-width: none;
+
+    :deep(.q-date__calendar) {
+        padding-bottom: 0;
+    }
+    :deep(.q-date__view) {
+        min-height: 240px;
+        padding: 8px;
+    }
+    :deep(.q-date__calendar-days-container) {
+        min-height: 160px;
+        height: unset;
+    }
+}
+.q-date--portrait-standard :deep(.q-date__header) {
+    padding: 2px 2px 5px 12px;
+    height: 60px;
+}
+
+@media (min-width: $breakpoint-xs-max) {
+    .q-date--landscape-standard {
+        min-width: 280px;
+
+        :deep(.q-date__header) {
+            min-width: 0;
+            padding: 10px 8px 0 8px;
+        }
+    }
+    .q-date--landscape-standard :deep(.q-date__view) {
+        width: 220px;
+    }
+}
+</style>
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index ceb4e8468..1b57c20d0 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -58,7 +58,7 @@ defineExpose({
         :class="{ zoomIn: zoom }"
         :src="getUrl()"
         v-bind="$attrs"
-        @click.stop="show = $props.zoom ? true : false"
+        @click.stop="show = $props.zoom"
         spinner-color="primary"
     />
     <QDialog v-if="$props.zoom" v-model="show">

From c81506695314e291aa22d7433d65521711921d37 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 7 Oct 2024 15:55:18 +0200
Subject: [PATCH 4/5] feat: refs #8019 fine-tunning vnDate

---
 src/components/common/VnDate.vue | 32 +++++++-------------------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/components/common/VnDate.vue b/src/components/common/VnDate.vue
index cdfa0d258..761ac995e 100644
--- a/src/components/common/VnDate.vue
+++ b/src/components/common/VnDate.vue
@@ -2,46 +2,28 @@
 const model = defineModel({ type: [String, Number], required: true });
 </script>
 <template>
-    <QDate
-        v-model="model"
-        :landscape="$q.screen.gt.xs"
-        :today-btn="true"
-        :options="$attrs.options"
-    />
+    <QDate v-model="model" :today-btn="true" :options="$attrs.options" />
 </template>
 <style lang="scss" scoped>
 .q-date {
-    width: 240px;
-    min-width: none;
+    width: 245px;
+    min-width: unset;
 
     :deep(.q-date__calendar) {
         padding-bottom: 0;
     }
     :deep(.q-date__view) {
-        min-height: 240px;
+        min-height: 245px;
         padding: 8px;
     }
     :deep(.q-date__calendar-days-container) {
         min-height: 160px;
         height: unset;
     }
-}
-.q-date--portrait-standard :deep(.q-date__header) {
-    padding: 2px 2px 5px 12px;
-    height: 60px;
-}
 
-@media (min-width: $breakpoint-xs-max) {
-    .q-date--landscape-standard {
-        min-width: 280px;
-
-        :deep(.q-date__header) {
-            min-width: 0;
-            padding: 10px 8px 0 8px;
-        }
-    }
-    .q-date--landscape-standard :deep(.q-date__view) {
-        width: 220px;
+    :deep(.q-date__header) {
+        padding: 2px 2px 5px 12px;
+        height: 60px;
     }
 }
 </style>

From 4344458bb067f4c6595f02df580dffd3e5e08a84 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 7 Oct 2024 16:02:29 +0200
Subject: [PATCH 5/5] feat: refs #8019 fine-tunning vnTime

---
 src/components/common/VnTime.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnTime.vue b/src/components/common/VnTime.vue
index 135709d2b..369f80432 100644
--- a/src/components/common/VnTime.vue
+++ b/src/components/common/VnTime.vue
@@ -2,5 +2,15 @@
 const model = defineModel({ type: [String, Number], required: true });
 </script>
 <template>
-    <QTime v-model="model" :landscape="$q.screen.gt.xs" now-btn mask="HH:mm" />
+    <QTime v-model="model" now-btn mask="HH:mm" />
 </template>
+<style lang="scss" scoped>
+.q-time {
+    width: 230px;
+    min-width: unset;
+    :deep(.q-time__header) {
+        min-height: unset;
+        height: 50px;
+    }
+}
+</style>