From bf0bf6615c793b006b5d60a380a1f6c22df3b5ca Mon Sep 17 00:00:00 2001
From: Petr Kachanovsky <pkachanovsky@devforth.io>
Date: Mon, 3 Feb 2025 10:51:45 +0200
Subject: [PATCH] fix: change inputs for date and time to date selectors

---
 adminforth/dataConnectors/mysql.ts            | 10 +----
 .../spa/src/components/ColumnValueInput.vue   |  2 +-
 .../spa/src/components/CustomDatePicker.vue   | 15 ++++++-
 .../src/components/CustomDateRangePicker.vue  | 42 ++++++++++++++-----
 adminforth/spa/src/components/Filters.vue     | 11 +----
 5 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/adminforth/dataConnectors/mysql.ts b/adminforth/dataConnectors/mysql.ts
index de6ac1042..f9b758b3b 100644
--- a/adminforth/dataConnectors/mysql.ts
+++ b/adminforth/dataConnectors/mysql.ts
@@ -119,15 +119,9 @@ class MysqlConnector extends AdminForthBaseConnector implements IAdminForthDataS
       }
       return dayjs(value).toISOString();
     } else if (field.type == AdminForthDataTypes.DATE) {
-      if (!value) {
-        return null;
-      }
-      return dayjs(value).toISOString().split('T')[0];
+      return value || null;
     } else if (field.type == AdminForthDataTypes.TIME) {
-      if (!value) {
-        return null;
-      }
-      return dayjs(value).toISOString().split('T')[1];
+      return value || null;
     } else if (field.type == AdminForthDataTypes.BOOLEAN) {
       return !!value;
     } else if (field.type == AdminForthDataTypes.JSON) {
diff --git a/adminforth/spa/src/components/ColumnValueInput.vue b/adminforth/spa/src/components/ColumnValueInput.vue
index d990a47ae..efd65d03c 100644
--- a/adminforth/spa/src/components/ColumnValueInput.vue
+++ b/adminforth/spa/src/components/ColumnValueInput.vue
@@ -55,7 +55,7 @@
       @update:modelValue="$emit('update:modelValue', $event)"
     />
     <CustomDatePicker
-      v-else-if="['datetime'].includes(type || column.type)"
+      v-else-if="['datetime', 'date', 'time'].includes(type || column.type)"
       ref="input"
       :column="column"
       :valueStart="value"
diff --git a/adminforth/spa/src/components/CustomDatePicker.vue b/adminforth/spa/src/components/CustomDatePicker.vue
index 3e66a9f82..237562065 100644
--- a/adminforth/spa/src/components/CustomDatePicker.vue
+++ b/adminforth/spa/src/components/CustomDatePicker.vue
@@ -4,7 +4,7 @@
       <div>
         <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
-        <div class="relative">
+        <div class="relative" :class="{hidden: column.type === 'time'}">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
             <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
           </div>
@@ -34,6 +34,7 @@
 
       <button type="button"
               class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -81,7 +82,7 @@ const emit = defineEmits(['update:valueStart']);
 
 const datepickerStartEl = ref();
 
-const showTimeInputs = ref(false);
+const showTimeInputs = ref(props.column?.type === 'time');
 
 const startDate = ref('');
 
@@ -90,12 +91,20 @@ const startTime = ref('');
 const datepickerObject = ref('')
 
 const start = computed(() => {
+  if (props.column?.type === 'time') {
+    return formatTime(startTime.value);
+  }
+  
   if (!startDate.value) {
     return;
   }
 
   let date = dayjs(startDate.value);
 
+  if (props.column?.type === 'date') {
+    return date.format('YYYY-MM-DD');
+  }
+
   if (startTime.value) {
     date = addTimeToDate(formatTime(startTime.value), date)
   }
@@ -107,6 +116,8 @@ async function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
+  } else if (props.column.type === 'time') {
+    startTime.value = props.valueStart;
   } else {
     // wait ref to initialize
     await nextTick();
diff --git a/adminforth/spa/src/components/CustomDateRangePicker.vue b/adminforth/spa/src/components/CustomDateRangePicker.vue
index 966fcad40..628052571 100644
--- a/adminforth/spa/src/components/CustomDateRangePicker.vue
+++ b/adminforth/spa/src/components/CustomDateRangePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
+    <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: column.type === 'time'}">
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
           <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
@@ -51,6 +51,7 @@
 
       <button type="button"
               class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -93,7 +94,7 @@ const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 const datepickerStartEl = ref();
 const datepickerEndEl = ref();
 
-const showTimeInputs = ref(false);
+const showTimeInputs = ref(props.column?.type === 'time');
 
 const startDate = ref('');
 const endDate = ref('');
@@ -105,12 +106,20 @@ const datepickerStartObject = ref('')
 const datepickerEndObject = ref('')
 
 const start = computed(() => {
+  if (props.column?.type === 'time') {
+    return formatTime(startTime.value);
+  }
+
   if (!startDate.value) {
     return;
   }
 
   let date = dayjs(startDate.value);
 
+  if (props.column?.type === 'date') {
+    return date.format('YYYY-MM-DD');
+  }
+
   if (startTime.value) {
     date = addTimeToDate(formatTime(startTime.value), date)
   }
@@ -119,12 +128,20 @@ const start = computed(() => {
 })
 
 const end = computed(() => {
+  if (props.column?.type === 'time') {
+    return formatTime(endTime.value);
+  }
+
   if (!endDate.value) {
     return;
   }
 
   let date = dayjs(endDate.value);
 
+  if (props.column?.type === 'date') {
+    return date.format('YYYY-MM-DD');
+  }
+
   if (endTime.value) {
     date = addTimeToDate(formatTime(endTime.value), date)
   } else {
@@ -135,7 +152,12 @@ const end = computed(() => {
 })
 
 function updateFromProps() {
-  if (props.valueStart) {
+  if (!props.valueStart) {
+    datepickerStartEl.value.value = '';
+    startTime.value = '';
+  } else if (props.column.type === 'time') {
+    startTime.value = props.valueStart;
+  } else {
     const date = dayjs(props.valueStart);
     datepickerStartEl.value.value = date.format('DD MMM YYYY');
     if (date.format('HH:mm') !== '00:00') {
@@ -145,11 +167,14 @@ function updateFromProps() {
       startTime.value = '';
     }
     startDate.value = date.toString();
-  } else {
-    datepickerStartEl.value.value = '';
-    startTime.value = '';
   }
-  if (props.valueEnd) {
+
+  if (!props.valueEnd) {
+    datepickerEndEl.value.value = '';
+    endTime.value = '';
+  } else if (props.column.type === 'time') {
+    endTime.value = props.valueEnd;
+  } else {
     const date = dayjs(props.valueEnd);
     datepickerEndEl.value.value = date.format('DD MMM YYYY');
     if (date.format('HH:mm') !== '00:00') {
@@ -159,9 +184,6 @@ function updateFromProps() {
       endTime.value = '';
     }
     endDate.value = date.toString();
-  } else {
-    datepickerEndEl.value.value = '';
-    endTime.value = '';
   }
 }
 
diff --git a/adminforth/spa/src/components/Filters.vue b/adminforth/spa/src/components/Filters.vue
index 3194ad71e..6ca404d2e 100644
--- a/adminforth/spa/src/components/Filters.vue
+++ b/adminforth/spa/src/components/Filters.vue
@@ -63,7 +63,7 @@
             />
 
            <CustomDateRangePicker
-             v-else-if="['datetime'].includes(c.type)"
+             v-else-if="['datetime', 'date', 'time'].includes(c.type)"
              :column="c"
              :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
@@ -71,15 +71,6 @@
              @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
            />
 
-            <Input
-              v-else-if="['date', 'time'].includes(c.type)"
-              type="text"
-              full-width
-              :placeholder="$t('Search datetime')"
-              @update:modelValue="setFilterItem({ column: c, operator: 'ilike', value: $event || undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'ilike' })"
-            />
-
            <CustomRangePicker
              v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
              :min="getFilterMinValue(c.name)"