Merge pull request #7997 from nocodb/nc-fix/calendar

Nc fix/calendar

packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@@ -218,7 +218,7 @@ const recordsAcrossAllRange = computed<{
     }
   } = {}
 
-  const perRecordHeight = 80
+  const perRecordHeight = 60
 
   /*  const columnArray: Array<Array<Row>> = [[]]
   const gridTimeMap = new Map() */
@@ -262,18 +262,18 @@ const recordsAcrossAllRange = computed<{
           scheduleEnd,
         })
         // The top of the record is calculated based on the start hour and minute
-        const topInPixels = (startDate.hour() + startDate.minute() / 60) * 80
+        const topInPixels = startDate.hour() + startDate.minute()
 
         // A minimum height of 80px is set for each record
         // The height of the record is calculated based on the difference between the start and end date
-        const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight)
+        const heightInPixels = Math.max(endDate.diff(startDate, 'minute'), perRecordHeight)
 
         const startHour = startDate.hour()
         let _startDate = startDate.clone()
 
         const style: Partial<CSSStyleDeclaration> = {
           height: `${heightInPixels}px`,
-          top: `${topInPixels + 5 + startHour * 2}px`,
+          top: `${topInPixels}px`,
         }
 
         // We loop through every 1 minutes between the start and end date and keep track of the number of records that overlap at a given time
@@ -369,18 +369,13 @@ const recordsAcrossAllRange = computed<{
         // The top of the record is calculated based on the start hour
         // Update such that it is also based on Minutes
 
-        const minutes = startDate.minute() + startDate.hour() * 60
-
-        const updatedTopInPixels = (minutes * 80) / 60
+        const topInPixels = startDate.minute() + startDate.hour() * 60
 
         // A minimum height of 80px is set for each record
-        const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight)
-
-        const finalTopInPixels = updatedTopInPixels + startHour * 2
-
+        const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 60, perRecordHeight)
         style = {
           ...style,
-          top: `${finalTopInPixels + 2}px`,
+          top: `${topInPixels + 1}px`,
           height: `${heightInPixels - 2}px`,
         }
 
@@ -847,6 +842,19 @@ const newRecord = (hour: dayjs.Dayjs) => {
   }
   emit('newRecord', record)
 }
+
+watch(
+  () => recordsAcrossAllRange.value,
+  () => {
+    setTimeout(() => {
+      if (isDragging.value) return
+      const records = document.querySelectorAll('.draggable-record')
+      if (records.length) records.item(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      else document.querySelectorAll('.nc-calendar-day-hour').item(9)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }, 100)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -861,12 +869,12 @@ const newRecord = (hour: dayjs.Dayjs) => {
       :class="{
         '!border-brand-500': hour.isSame(selectedTime),
       }"
-      class="flex w-full min-h-20 relative border-1 group hover:bg-gray-50 border-white border-b-gray-100"
+      class="flex w-full h-15 nc-calendar-day-hour relative border-1 group hover:bg-gray-50 border-white border-b-gray-100"
       data-testid="nc-calendar-day-hour"
       @click="selectHour(hour)"
       @dblclick="newRecord(hour)"
     >
-      <div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-20">
+      <div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-15">
         {{ dayjs(hour).format('H A') }}
       </div>
       <div></div>

packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@@ -88,11 +88,8 @@ const recordsAcrossAllRange = computed<{
       records: [],
       count: {},
     }
-
-  const { scrollHeight } = scrollContainer.value
-
   const perWidth = containerWidth.value / 7
-  const perHeight = scrollHeight / 24
+  const perHeight = 60
 
   const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day')
   const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day')
@@ -193,25 +190,12 @@ const recordsAcrossAllRange = computed<{
           dayIndex = 6
         }
 
-        const hourKey = ogStartDate.format('HH:mm')
-
-        // We calculate the index of the hour in the day and set the top and height of the record
-        const hourIndex = Math.min(
-          Math.max(
-            datesHours.value[dayIndex]?.findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
-            0,
-          ),
-          23,
-        )
-
         const minutes = ogStartDate.minute() + ogStartDate.hour() * 60
 
-        const topPx = (minutes * perHeight) / 60
-
         style = {
           ...style,
-          top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`,
-          height: `${perHeight - 4}px`,
+          top: `${minutes + 1}px`,
+          height: `${perHeight - 2}px`,
         }
 
         recordsToDisplay.push({
@@ -733,6 +717,17 @@ const addRecord = (date: dayjs.Dayjs) => {
   }
   emits('newRecord', newRecord)
 }
+
+watch(
+  () => recordsAcrossAllRange.value,
+  () => {
+    if (dragRecord.value) return
+    const records = document.querySelectorAll('.draggable-record')
+    if (records.length) records.item(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    else document.querySelectorAll('.nc-calendar-day-hour').item(9)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -758,7 +753,7 @@ const addRecord = (date: dayjs.Dayjs) => {
       <div
         v-for="(hour, index) in datesHours[0]"
         :key="index"
-        class="h-20 first:mt-0 pt-7.1 text-center text-xs text-gray-500 py-1"
+        class="h-15 first:mt-0 pt-7.1 nc-calendar-day-hour text-center text-xs text-gray-500 py-1"
       >
         {{ hour.format('h A') }}
       </div>
@@ -772,7 +767,7 @@ const addRecord = (date: dayjs.Dayjs) => {
             'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
             '!bg-gray-50': hour.get('day') === 0 || hour.get('day') === 6,
           }"
-          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
+          class="text-center relative h-15 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
           data-testid="nc-calendar-week-hour"
           @dblclick="addRecord(hour)"
           @click="