From 678a48276109164fc937b334c525b8094fe89304 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:09 +0000
Subject: [PATCH] feat(nc-gui): drag & drop implemnetation for date time field

---
 .../smartsheet/calendar/DayView/DateField.vue |   4 +-
 .../calendar/DayView/DateTimeField.vue        | 272 ++++++++++++++++--
 .../smartsheet/calendar/MonthView.vue         |  34 +--
 .../composables/useCalendarViewStore.ts       |  16 +-
 4 files changed, 275 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index f62935505d..f3be2fd7ab 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -114,7 +114,7 @@ const dropEvent = (event: DragEvent) => {
       ...record,
       row: {
         ...record.row,
-        [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD'),
+        [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
       },
     }
 
@@ -133,7 +133,7 @@ const dropEvent = (event: DragEvent) => {
       } else {
         endDate = newStartDate.clone()
       }
-      newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD')
+      newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ')
       updateProperty.push(toCol.title!)
     }
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 33cc1432e7..534749a4db 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { UITypes } from 'nocodb-sdk'
 import dayjs from 'dayjs'
 import { type Row, computed, ref } from '#imports'
 
@@ -9,9 +8,12 @@ const fields = inject(FieldsInj, ref([]))
 
 const container = ref()
 
+const { isUIAllowed } = useRoles()
+
 const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
 
-const { selectedDate, selectedTime, calDataType, formattedData, calendarRange } = useCalendarViewStoreOrThrow()
+const { selectedDate, selectedTime, formattedData, calendarRange, formattedSideBarData, updateRowProperty } =
+  useCalendarViewStoreOrThrow()
 
 const hours = computed(() => {
   const hours: Array<dayjs.Dayjs> = []
@@ -40,9 +42,11 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
   const scheduleStart = dayjs(selectedDate.value).startOf('day')
   const scheduleEnd = dayjs(selectedDate.value).endOf('day')
 
-  const overlaps = {}
+  const overlaps: {
+    [key: string]: string[]
+  } = {}
 
-  const perRecordHeight = 40
+  const perRecordHeight = 80
 
   if (!calendarRange.value) return []
 
@@ -82,10 +86,9 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
             overlaps[startMinutes] = []
           }
           overlaps[startMinutes].push(id)
-          startMinutes += 10
+          startMinutes += 15
         }
-
-        const finalTopInPixels = topInPixels + startHour + 1
+        const finalTopInPixels = topInPixels + startHour
 
         const style: Partial<CSSStyleDeclaration> = {
           top: `${finalTopInPixels}px`,
@@ -153,7 +156,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
             range: range as any,
             style: {
               top: `${finalTopInPixels}px`,
-              height: `${heightInPixels - 5}px`,
+              height: `${heightInPixels + 5}px`,
             },
             id,
             position: 'rounded',
@@ -167,10 +170,10 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
     let maxOverlaps = 1
     let overlapIndex = 0
     for (const minutes in overlaps) {
-      if (overlaps[minutes].includes(record.rowMeta.id)) {
+      if (overlaps[minutes].includes(record.rowMeta.id!)) {
         maxOverlaps = Math.max(maxOverlaps, overlaps[minutes].length)
 
-        overlapIndex = Math.max(overlaps[minutes].indexOf(record.rowMeta.id), overlapIndex)
+        overlapIndex = Math.max(overlaps[minutes].indexOf(record.rowMeta.id!), overlapIndex)
       }
     }
 
@@ -178,8 +181,6 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
     const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps
     const leftPerRecord = (widthPerRecord + spacing) * overlapIndex
 
-    console.log('leftPerRecord', leftPerRecord, 'widthPerRecord', widthPerRecord)
-
     record.rowMeta.style = {
       ...record.rowMeta.style,
       left: `${leftPerRecord}%`,
@@ -190,13 +191,227 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
 
   return recordsByRange
 })
+
+const dragRecord = ref<Row | null>(null)
+const isDragging = ref(false)
+const draggingId = ref<string | null>(null)
+const dragElement = ref<HTMLElement | null>(null)
+
+const dragTimeout = ref(null)
+
+const onDrag = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit')) return
+  if (!container.value || !dragRecord.value) return
+
+  const { top } = container.value.getBoundingClientRect()
+
+  const { scrollHeight } = container.value
+
+  console.log(scrollHeight)
+
+  const percentY = (event.clientY - top - window.scrollY) / scrollHeight
+
+  const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
+  const toCol = dragRecord.value.rowMeta.range?.fk_to_col
+
+  if (!fromCol) return
+
+  console.log('percentY', percentY)
+
+  const hour = Math.floor(percentY * 24)
+
+  const newStartDate = dayjs(selectedDate.value).add(hour, 'hour')
+
+  if (!newStartDate) return
+
+  let endDate
+
+  const newRow = {
+    ...dragRecord.value,
+    row: {
+      ...dragRecord.value.row,
+      [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+
+  if (toCol) {
+    const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
+    const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null
+
+    if (fromDate && toDate) {
+      endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'hour'), 'hour')
+    } else if (fromDate && !toDate) {
+      endDate = dayjs(newStartDate).endOf('hour')
+    } else if (!fromDate && toDate) {
+      endDate = dayjs(newStartDate).endOf('hour')
+    } else {
+      endDate = newStartDate.clone()
+    }
+
+    newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ')
+  }
+
+  console.log('newStartDate', newStartDate.format('YYYY-MM-DD HH:mm:ssZ'))
+  console.log('endDate', endDate?.format('YYYY-MM-DD HH:mm:ssZ'))
+
+  formattedData.value = formattedData.value.map((r) => {
+    const pk = extractPkFromRow(r.row, meta.value!.columns!)
+
+    if (pk === extractPkFromRow(newRow.row, meta.value!.columns!)) {
+      return newRow
+    }
+    return r
+  })
+}
+
+const stopDrag = (event: MouseEvent) => {
+  event.preventDefault()
+  clearTimeout(dragTimeout.value)
+  if (!isUIAllowed('dataEdit')) return
+  if (!isDragging.value || !container.value || !dragRecord.value) return
+
+  const { top } = container.value.getBoundingClientRect()
+
+  const { scrollHeight } = container.value
+
+  const percentY = (event.clientY - top - window.scrollY) / scrollHeight
+
+  const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
+  const toCol = dragRecord.value.rowMeta.range?.fk_to_col
+
+  const hour = Math.floor(percentY * 24)
+
+  console.log('hour', hour)
+
+  const newStartDate = dayjs(selectedDate.value).add(hour, 'hour')
+  if (!newStartDate || !fromCol) return
+
+  let endDate
+
+  const newRow = {
+    ...dragRecord.value,
+    row: {
+      ...dragRecord.value.row,
+      [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+
+  const updateProperty = [fromCol.title!]
+
+  if (toCol) {
+    const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
+    const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null
+
+    if (fromDate && toDate) {
+      endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'hour'), 'hour')
+    } else if (fromDate && !toDate) {
+      endDate = dayjs(newStartDate).endOf('hour')
+    } else if (!fromDate && toDate) {
+      endDate = dayjs(newStartDate).endOf('hour')
+    } else {
+      endDate = newStartDate.clone()
+    }
+
+    newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ')
+
+    updateProperty.push(toCol.title!)
+  }
+
+  if (!newRow) return
+
+  if (dragElement.value) {
+    formattedData.value = formattedData.value.map((r) => {
+      const pk = extractPkFromRow(r.row, meta.value!.columns!)
+
+      if (pk === extractPkFromRow(newRow.row, meta.value!.columns!)) {
+        return newRow
+      }
+      return r
+    })
+  } else {
+    formattedData.value = [...formattedData.value, newRow]
+    formattedSideBarData.value = formattedSideBarData.value.filter((r) => {
+      const pk = extractPkFromRow(r.row, meta.value!.columns!)
+
+      return pk !== extractPkFromRow(newRow.row, meta.value!.columns!)
+    })
+  }
+
+  const allRecords = document.querySelectorAll('.draggable-record')
+  allRecords.forEach((el) => {
+    el.style.visibility = ''
+    el.style.opacity = '100%'
+  })
+
+  if (dragElement.value) {
+    dragElement.value.style.boxShadow = 'none'
+    dragElement.value.classList.remove('hide')
+    isDragging.value = false
+    draggingId.value = null
+    dragElement.value = null
+  }
+
+  updateRowProperty(newRow, updateProperty, false)
+
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+const dragStart = (event: MouseEvent, record: Row) => {
+  if (!isUIAllowed('dataEdit')) return
+  let target = event.target as HTMLElement
+  let isMoved = false
+
+  const onMouseMove = () => {
+    isMoved = true
+    document.removeEventListener('mousemove', onMouseMove)
+  }
+  document.addEventListener('mousemove', onMouseMove)
+
+  dragTimeout.value = setTimeout(() => {
+    if (isMoved) {
+      while (!target.classList.contains('draggable-record')) {
+        target = target.parentElement as HTMLElement
+      }
+
+      const allRecords = document.querySelectorAll('.draggable-record')
+      allRecords.forEach((el) => {
+        if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
+          // el.style.visibility = 'hidden'
+          el.style.opacity = '30%'
+        }
+      })
+
+      dragRecord.value = record
+
+      isDragging.value = true
+      dragElement.value = target
+      draggingId.value = record.rowMeta.id!
+      dragRecord.value = record
+
+      document.addEventListener('mousemove', onDrag)
+      document.addEventListener('mouseup', stopDrag)
+    } else {
+      clearTimeout(dragTimeout.value)
+      document.removeEventListener('mousemove', onMouseMove)
+    }
+  }, 50)
+
+  const onMouseUp = () => {
+    clearTimeout(dragTimeout.value)
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+  }
+
+  document.addEventListener('mouseup', onMouseUp)
+}
 </script>
 
 <template>
   <div
     v-if="recordsAcrossAllRange.length"
     ref="container"
-    class="w-full relative h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
+    class="w-full relative no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
   >
     <div
       v-for="(hour, index) in hours"
@@ -230,21 +445,21 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
           <NcMenu class="w-64">
             <NcMenuItem> Select date field to add </NcMenuItem>
             <NcMenuItem
-              v-for="(range, index) in calendarRange"
-              :key="index"
+              v-for="(range, calIndex) in calendarRange"
+              :key="calIndex"
               class="text-gray-800 font-semibold text-sm"
               @click="
                 () => {
                   let record = {
                     row: {
-                      [range.fk_from_col.title]: hour.format('YYYY-MM-DD HH:mm:ssZ'),
+                      [range.fk_from_col!.title!]: hour.format('YYYY-MM-DD HH:mm:ssZ'),
                     },
                   }
                   if (range.fk_to_col) {
                     record = {
                       row: {
                         ...record.row,
-                        [range.fk_to_col.title]: hour.add(1, 'hour').format('YYYY-MM-DD HH:mm:ssZ'),
+                        [range.fk_to_col!.title!]: hour.add(1, 'hour').format('YYYY-MM-DD HH:mm:ssZ'),
                       },
                     }
                   }
@@ -273,7 +488,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
           () => {
             let record = {
               row: {
-                [calendarRange[0].fk_from_col.title]: hour.format('YYYY-MM-DD HH:mm:ssZ'),
+                [calendarRange[0].fk_from_col!.title!]: hour.format('YYYY-MM-DD HH:mm:ssZ'),
               },
             }
 
@@ -281,7 +496,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
               record = {
                 row: {
                   ...record.row,
-                  [calendarRange[0].fk_to_col.title]: hour.add(1, 'hour').format('YYYY-MM-DD HH:mm:ssZ'),
+                  [calendarRange[0].fk_to_col!.title!]: hour.add(1, 'hour').format('YYYY-MM-DD HH:mm:ssZ'),
                 },
               }
             }
@@ -292,15 +507,15 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
         <component :is="iconMap.plus" class="h-4 w-4" />
       </NcButton>
     </div>
-    <div class="absolute inset-0">
+    <div class="absolute inset-0 pointer-events-none">
       <div class="relative !ml-[50px]">
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange"
           :key="rowIndex"
-          :draggable="UITypes.DateTime === calDataType"
+          :data-unique-id="record.rowMeta.id"
           :style="record.rowMeta.style"
-          class="absolute"
-          @dragstart="dragStart($event, record)"
+          class="absolute draggable-record pointer-events-auto"
+          @mousedown="dragStart($event, record)"
           @dragover.prevent
         >
           <LazySmartsheetRow :row="record">
@@ -325,4 +540,13 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.no-selection {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 5ff5af066d..dccdba9775 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -304,8 +304,8 @@ const onDrag = (event: MouseEvent) => {
   const percentY = (event.clientY - top - window.scrollY) / height
   const percentX = (event.clientX - left - window.scrollX) / width
 
-  const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
-  const toCol = dragRecord.value.rowMeta.range?.fk_to_col
+  const fromCol = dragRecord.value!.rowMeta.range?.fk_from_col
+  const toCol = dragRecord.value!.rowMeta.range?.fk_to_col
 
   const week = Math.floor(percentY * dates.value.length)
   const day = Math.floor(percentX * 7)
@@ -322,14 +322,14 @@ const onDrag = (event: MouseEvent) => {
   const newRow = {
     ...dragRecord.value,
     row: {
-      ...dragRecord.value.row,
-      [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
+      ...dragRecord.value!.row,
+      [fromCol!.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
     },
   }
 
   if (toCol) {
-    const fromDate = dragRecord.value.row[fromCol.title] ? dayjs(dragRecord.value.row[fromCol.title]) : null
-    const toDate = dragRecord.value.row[toCol.title] ? dayjs(dragRecord.value.row[toCol.title]) : null
+    const fromDate = dragRecord.value!.row[fromCol!.title!] ? dayjs(dragRecord!.value!.row[fromCol!.title!]) : null
+    const toDate = dragRecord.value!.row[toCol!.title!] ? dayjs(dragRecord.value!.row[toCol!.title!]) : null
 
     if (fromDate && toDate) {
       endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
@@ -341,13 +341,13 @@ const onDrag = (event: MouseEvent) => {
       endDate = newStartDate.clone()
     }
 
-    newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
+    newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD')
   }
 
   formattedData.value = formattedData.value.map((r) => {
-    const pk = extractPkFromRow(r.row, meta.value.columns)
+    const pk = extractPkFromRow(r.row, meta.value!.columns!)
 
-    if (pk === extractPkFromRow(newRow.row, meta.value.columns)) {
+    if (pk === extractPkFromRow(newRow.row, meta.value!.columns!)) {
       return newRow
     }
     return r
@@ -390,7 +390,7 @@ const onResize = (event: MouseEvent) => {
       ...resizeRecord.value,
       row: {
         ...resizeRecord.value.row,
-        [toCol.title]: dayjs(newEndDate).format('YYYY-MM-DD'),
+        [toCol.title]: dayjs(newEndDate).format('YYYY-MM-DD HH:mm:ssZ'),
       },
     }
 
@@ -416,7 +416,7 @@ const onResize = (event: MouseEvent) => {
       ...resizeRecord.value,
       row: {
         ...resizeRecord.value.row,
-        [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
+        [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
       },
     }
 
@@ -482,7 +482,7 @@ const stopDrag = (event: MouseEvent) => {
     ...dragRecord.value,
     row: {
       ...dragRecord.value.row,
-      [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
+      [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
     },
   }
 
@@ -503,7 +503,7 @@ const stopDrag = (event: MouseEvent) => {
     }
 
     dragRecord.value = null
-    newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
+    newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ')
 
     updateProperty.push(toCol.title)
   }
@@ -611,7 +611,7 @@ const dropEvent = (event: DragEvent) => {
       ...record,
       row: {
         ...record.row,
-        [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD'),
+        [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
       },
     }
 
@@ -630,7 +630,7 @@ const dropEvent = (event: DragEvent) => {
       } else {
         endDate = newStartDate.clone()
       }
-      newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD')
+      newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ')
       updateProperty.push(toCol.title!)
     }
 
@@ -746,7 +746,7 @@ onBeforeUnmount(() => {
                       () => {
                         const record = {
                           row: {
-                            [range.fk_from_col.title]: dayjs(day).format('YYYY-MM-DD'),
+                            [range.fk_from_col.title]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'),
                           },
                         }
                         emit('new-record', record)
@@ -773,7 +773,7 @@ onBeforeUnmount(() => {
                 () => {
                   const record = {
                     row: {
-                      [calendarRange[0].fk_from_col.title]: dayjs(day).format('YYYY-MM-DD'),
+                      [calendarRange[0].fk_from_col.title]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'),
                     },
                   }
                   emit('new-record', record)
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index e026e991a9..6c1a17e533 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -182,11 +182,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         }
 
         if (calDataType.value === UITypes.Date) {
-          fromDate = dayjs(fromDate).format('YYYY-MM-DD')
-          toDate = dayjs(toDate).format('YYYY-MM-DD')
+          fromDate = dayjs(fromDate).format('YYYY-MM-DDZ')
+          toDate = dayjs(toDate).format('YYYY-MM-DDZ')
         } else if (calDataType.value === UITypes.DateTime) {
-          fromDate = dayjs(fromDate).format('YYYY-MM-DD HH:mm:ss')
-          toDate = dayjs(toDate).format('YYYY-MM-DD HH:mm:ss')
+          fromDate = dayjs(fromDate).format('YYYY-MM-DD HH:mm:ssZ')
+          toDate = dayjs(toDate).format('YYYY-MM-DD HH:mm:ssZ')
         }
 
         calendarRange.value.forEach((range) => {
@@ -353,11 +353,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       }
 
       if (calDataType.value === UITypes.Date) {
-        fromDate = dayjs(fromDate).format('YYYY-MM-DD')
-        toDate = dayjs(toDate).format('YYYY-MM-DD')
+        fromDate = dayjs(fromDate).format('YYYY-MM-DDZ')
+        toDate = dayjs(toDate).format('YYYY-MM-DDZ')
       } else if (calDataType.value === UITypes.DateTime) {
-        fromDate = dayjs(fromDate).format('YYYY-MM-DD HH:mm:ss')
-        toDate = dayjs(toDate).format('YYYY-MM-DD HH:mm:ss')
+        fromDate = dayjs(fromDate).format('YYYY-MM-DD HH:mm:ssZ')
+        toDate = dayjs(toDate).format('YYYY-MM-DD HH:mm:ssZ')
       }
 
       calendarRange.value.forEach((range) => {