From fdd587bed76bc3999da9ff48cecba589b62a23ba Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Tue, 4 Feb 2025 15:55:28 +0200
Subject: [PATCH 1/3] fix: clear time in RuningClockDatePicker

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../components/RunningClockDatePicker.vue     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/front-end/src/renderer/components/RunningClockDatePicker.vue b/front-end/src/renderer/components/RunningClockDatePicker.vue
index d0c6100ec..bc483bf4f 100644
--- a/front-end/src/renderer/components/RunningClockDatePicker.vue
+++ b/front-end/src/renderer/components/RunningClockDatePicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VueDatePickerProps } from '@vuepic/vue-datepicker';
 
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import AppDatePicker from '@renderer/components/ui/AppDatePicker.vue';
 
@@ -35,6 +35,22 @@ function stopInterval() {
   intervalId.value && clearInterval(intervalId.value);
 }
 
+function resetTime(date: Date) {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+}
+
+function handleUpdateValidStart(date: Date) {
+  const isNewDate = date.toDateString() !== props.modelValue.toDateString();
+
+  if (isNewDate) {
+    emit('update:modelValue', resetTime(date));
+  } else {
+    emit('update:modelValue', date);
+  }
+}
+
 /* Hooks */
 onMounted(async () => {
   startInterval();
@@ -43,11 +59,21 @@ onMounted(async () => {
 onUnmounted(() => {
   stopInterval();
 });
+
+/* Watchers */
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    if (newVal.toDateString() !== oldVal.toDateString()) {
+      emit('update:modelValue', resetTime(newVal));
+    }
+  },
+);
 </script>
 <template>
   <AppDatePicker
     :model-value="modelValue"
-    @update:model-value="$emit('update:modelValue', $event)"
+    @update:model-value="handleUpdateValidStart"
     :minDate="minDate"
     :maxDate="maxDate"
     :clearable="false"

From 986dea7e72dbd7e2537b1f77d1f06de710784860 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Fri, 7 Feb 2025 14:03:11 +0200
Subject: [PATCH 2/3] fix: current date

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../src/renderer/components/RunningClockDatePicker.vue     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/front-end/src/renderer/components/RunningClockDatePicker.vue b/front-end/src/renderer/components/RunningClockDatePicker.vue
index bc483bf4f..66697d66a 100644
--- a/front-end/src/renderer/components/RunningClockDatePicker.vue
+++ b/front-end/src/renderer/components/RunningClockDatePicker.vue
@@ -42,7 +42,12 @@ function resetTime(date: Date) {
 }
 
 function handleUpdateValidStart(date: Date) {
-  const isNewDate = date.toDateString() !== props.modelValue.toDateString();
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const selectedDate = new Date(date);
+  selectedDate.setHours(0, 0, 0, 0);
+
+  const isNewDate = selectedDate.getTime() !== today.getTime();
 
   if (isNewDate) {
     emit('update:modelValue', resetTime(date));

From b17b2ec611e28e8c423d474b3414bb28244a904d Mon Sep 17 00:00:00 2001
From: John Bair <john.bair@swirldslabs.com>
Date: Fri, 7 Feb 2025 17:11:08 -0800
Subject: [PATCH 3/3] fix: date picker UX updates

text-input and flow options are now used. 'Now' button now works like the stock now button of the DatePicker component.

Signed-off-by: John Bair <john.bair@swirldslabs.com>
---
 .../components/RunningClockDatePicker.vue     | 35 ++-----------------
 .../renderer/components/ui/AppDatePicker.vue  | 19 +++++++---
 2 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/front-end/src/renderer/components/RunningClockDatePicker.vue b/front-end/src/renderer/components/RunningClockDatePicker.vue
index 66697d66a..39896d951 100644
--- a/front-end/src/renderer/components/RunningClockDatePicker.vue
+++ b/front-end/src/renderer/components/RunningClockDatePicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VueDatePickerProps } from '@vuepic/vue-datepicker';
 
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 import AppDatePicker from '@renderer/components/ui/AppDatePicker.vue';
 
@@ -35,27 +35,6 @@ function stopInterval() {
   intervalId.value && clearInterval(intervalId.value);
 }
 
-function resetTime(date: Date) {
-  const newDate = new Date(date);
-  newDate.setHours(0, 0, 0, 0);
-  return newDate;
-}
-
-function handleUpdateValidStart(date: Date) {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const selectedDate = new Date(date);
-  selectedDate.setHours(0, 0, 0, 0);
-
-  const isNewDate = selectedDate.getTime() !== today.getTime();
-
-  if (isNewDate) {
-    emit('update:modelValue', resetTime(date));
-  } else {
-    emit('update:modelValue', date);
-  }
-}
-
 /* Hooks */
 onMounted(async () => {
   startInterval();
@@ -64,21 +43,11 @@ onMounted(async () => {
 onUnmounted(() => {
   stopInterval();
 });
-
-/* Watchers */
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    if (newVal.toDateString() !== oldVal.toDateString()) {
-      emit('update:modelValue', resetTime(newVal));
-    }
-  },
-);
 </script>
 <template>
   <AppDatePicker
     :model-value="modelValue"
-    @update:model-value="handleUpdateValidStart"
+    @update:model-value="emit('update:modelValue', $event)"
     :minDate="minDate"
     :maxDate="maxDate"
     :clearable="false"
diff --git a/front-end/src/renderer/components/ui/AppDatePicker.vue b/front-end/src/renderer/components/ui/AppDatePicker.vue
index 867588f58..143452c08 100644
--- a/front-end/src/renderer/components/ui/AppDatePicker.vue
+++ b/front-end/src/renderer/components/ui/AppDatePicker.vue
@@ -15,7 +15,7 @@ defineProps<
 >();
 
 /* Emits */
-defineEmits<{
+const emit = defineEmits<{
   (event: 'update:modelValue', value: Date): void;
   (event: 'open'): void;
   (event: 'close'): void;
@@ -23,6 +23,12 @@ defineEmits<{
 
 /* State */
 const datePicker = ref<DatePickerInstance>(null);
+
+/* Handlers */
+function handleNow() {
+  emit('update:modelValue', new Date());
+  datePicker.value?.closeMenu();
+}
 </script>
 <template>
   <DatePicker
@@ -30,11 +36,13 @@ const datePicker = ref<DatePickerInstance>(null);
     :model-value="modelValue"
     @update:model-value="$emit('update:modelValue', $event)"
     :clearable="clearable"
-    :auto-apply="true"
+    auto-apply
+    partial-flow
+    :flow="['date', 'time']"
+    text-input
     :config="{
       keepActionRow: true,
     }"
-    :teleport="true"
     :ui="{
       calendar: 'is-fill',
       calendarCell: 'is-fill',
@@ -56,7 +64,7 @@ const datePicker = ref<DatePickerInstance>(null);
           class="text-body min-w-unset"
           size="small"
           type="button"
-          @click="$emit('update:modelValue', new Date())"
+          @click="handleNow"
         >
           Now
         </AppButton>
@@ -66,8 +74,9 @@ const datePicker = ref<DatePickerInstance>(null);
           size="small"
           type="button"
           @click="datePicker?.closeMenu()"
-          >Close</AppButton
         >
+          Close
+        </AppButton>
       </div>
     </template>
   </DatePicker>