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 <[email protected]>
hashgraph · Feb 8, 2025 · b17b2ec · b17b2ec
1 parent 986dea7
commit b17b2ec
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 38 deletions.
diff --git 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
@@ -15,26 +15,34 @@ defineProps<
 >();
 
 /* Emits */
-defineEmits<{
+const emit = defineEmits<{
   (event: 'update:modelValue', value: Date): void;
   (event: 'open'): void;
   (event: 'close'): void;
 }>();
 
 /* State */
 const datePicker = ref<DatePickerInstance>(null);
+
+/* Handlers */
+function handleNow() {
+  emit('update:modelValue', new Date());
+  datePicker.value?.closeMenu();
+}
 </script>
 <template>
   <DatePicker
     ref="datePicker"
     :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>