fix: height calculation

packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue

@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="border-1 cursor-pointer h-14 border-gray-200 flex gap-2 items-center rounded-lg">
+  <div class="border-1 cursor-pointer min-h-14 border-gray-200 p-2 flex gap-2 flex-col rounded-lg">
-    <div class="flex items-center pl-2 gap-2">
+    <div class="flex items-center gap-2">
       <span
         :class="{
           'bg-maroon-500': props.color === 'maroon',
@@ -40,13 +40,15 @@ const props = withDefaults(defineProps<Props>(), {
       </div>
     </div>
 
-    <div v-if="invalid" class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
+    <NcTooltip v-if="invalid">
-      <component :is="iconMap.warning" class="text-yellow-500 h-4 w-4" />
+      <div class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
-      <div class="flex flex-col gap-1">
+        <GeneralIcon icon="warning" class="text-yellow-500 !h-5 !w-5" />
-        <h1 class="text-gray-800 text-bold">Date mismatch</h1>
+        <div class="text-gray-700 text-xs">Selected End date is before Start date.</div>
-        <p class="text-gray-500">Selected End date is before Start date.</p>
       </div>
-    </div>
+      <template #title>
+        Record with end date before the start date won't be displayed in the calendar. Update the end date to display the record.
+      </template>
+    </NcTooltip>
   </div>
 </template>
 

packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@@ -32,7 +32,7 @@ const emit = defineEmits(['resize-start'])
   >
     <div
       v-if="resize"
-      class="absolute w-full h-2 z-20 top-0 !cursor-row-resize"
+      class="absolute w-full h-1 z-20 top-0 !cursor-row-resize"
       @mousedown.stop="emit('resize-start', 'left', $event, record)"
     ></div>
     <div
@@ -61,10 +61,14 @@ const emit = defineEmits(['resize-start'])
     </div>
     <div
       v-if="resize"
-      class="absolute !cursor-row-resize w-full bottom-0 w-full h-2"
+      class="absolute !cursor-row-resize w-full bottom-0 w-full h-1"
       @mousedown.stop="emit('resize-start', 'right', $event, record)"
     ></div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.cursor-row-resize {
+  cursor: ew-resize;
+}
+</style>

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

@@ -335,17 +335,14 @@ const recordsAcrossAllRange = computed<{
         })
         const dayIndex = getDayIndex(startDate)
 
-        const { startHourIndex, endHourIndex, startMinutes, endMinutes } = calculateHourIndices(dayIndex, startDate, endDate)
+        const { startHourIndex, startMinutes } = calculateHourIndices(dayIndex, startDate, endDate)
-
-        console.log(startHourIndex, endHourIndex)
 
         let style: Partial<CSSStyleDeclaration> = {}
 
-        const spanHours = endHourIndex - startHourIndex + 1
+        const top = (startHourIndex + startMinutes / 60) * perHeight
-
-        const top = startHourIndex * perHeight
 
-        const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5
+        const totalHours = endDate.diff(startDate, 'minute') / 60
+        const height = totalHours * perHeight
 
         style = {
           ...style,
@@ -565,85 +562,69 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[],
 
 const onResize = (event: MouseEvent) => {
   if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value || !scrollContainer.value) return
-
   if (resizeRecord.value.rowMeta.range?.is_readonly) return
 
   const { width, left, top, bottom } = container.value.getBoundingClientRect()
-
+  const { scrollHeight, scrollTop } = container.value
-  const { scrollHeight } = container.value
 
   // If the mouse is near the bottom of the container, we scroll down
-  // If the mouse is near the top of the container, we scroll up
+  // If the mouse is near the top of the container, we scroll up  if (event.clientY > bottom - 20) {
   if (event.clientY > bottom - 20) {
     container.value.scrollTop += 10
   } else if (event.clientY < top + 20) {
     container.value.scrollTop -= 10
   }
 
-  // We calculate the percentage of the mouse position in the container
-  // percentX is used for the day and percentY is used for the hour
   const percentX = (event.clientX - left - window.scrollX) / width
-  const percentY = (event.clientY - top + container.value.scrollTop) / scrollHeight
+  const percentY = (event.clientY - top + scrollTop) / scrollHeight
-
-  const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col
-  const toCol = resizeRecord.value.rowMeta.range?.fk_to_col
 
-  if (!fromCol || !toCol) return
+  const { range } = resizeRecord.value.rowMeta
+  const fromCol = range?.fk_from_col
+  const toCol = range?.fk_to_col
+  if (!fromCol?.title || !toCol?.title) return
 
-  const ogEndDate = dayjs(resizeRecord.value.row[toCol.title!])
+  const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title])
-  const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title!])
+  const ogEndDate = dayjs(resizeRecord.value.row[toCol.title])
 
   const day = Math.floor(percentX * maxVisibleDays.value)
   const hour = Math.floor(percentY * 23)
-  const minutes = Math.round((percentY * 24 * 60) % 60)
+  const minutes = Math.round((percentY * 24 * 60) / 15) * 15 // Round to nearest 15 minutes
 
-  let updateProperty: string[] = []
+  const baseDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
-  let newRow: Row = resizeRecord.value
 
-  if (resizeDirection.value === 'right') {
+  let newDate: dayjs.Dayjs
-    let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
+  let updateProperty: string
-    updateProperty = [toCol.title!]
+  let isValid = true
 
-    // If the new end date is before the start date, we set the new end date to the start date
+  if (resizeDirection.value === 'right') {
-    if (dayjs(newEndDate).isBefore(ogStartDate, 'day')) {
+    newDate = baseDate.isBefore(ogStartDate)
-      newEndDate = ogStartDate.clone()
+      ? ogStartDate.add(Math.ceil(ogStartDate.diff(baseDate, 'minute') / 15) * 15, 'minute')
-    }
+      : baseDate
-
+    updateProperty = toCol.title
-    if (!newEndDate.isValid()) return
-
-    newRow = {
-      ...resizeRecord.value,
-      row: {
-        ...resizeRecord.value.row,
-        [toCol.title!]: newEndDate.format(updateFormat.value),
-      },
-    }
   } else if (resizeDirection.value === 'left') {
-    let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
+    newDate = baseDate.isAfter(ogEndDate)
-    updateProperty = [fromCol.title!]
+      ? ogEndDate.subtract(Math.ceil(baseDate.diff(ogEndDate, 'minute') / 15) * 15, 'minute')
+      : baseDate
+    updateProperty = fromCol.title
+  } else {
+    isValid = false
+  }
 
-    // If the new start date is after the end date, we set the new start date to the end date
+  if (!isValid || !newDate.isValid()) return
-    if (dayjs(newStartDate).isAfter(ogEndDate)) {
+
-      newStartDate = dayjs(dayjs(ogEndDate)).clone()
+  const newRow = {
-    }
+    ...resizeRecord.value,
-    if (!newStartDate) return
+    row: {
-
+      ...resizeRecord.value.row,
-    newRow = {
+      [updateProperty]: newDate.format(updateFormat.value),
-      ...resizeRecord.value,
+    },
-      row: {
-        ...resizeRecord.value.row,
-        [fromCol.title!]: dayjs(newStartDate).format(updateFormat.value),
-      },
-    }
   }
 
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
 
-  formattedData.value = formattedData.value.map((r) => {
+  formattedData.value = formattedData.value.map((r) => (extractPkFromRow(r.row, meta.value!.columns!) === newPk ? newRow : r))
-    const pk = extractPkFromRow(r.row, meta.value!.columns!)
+
-    return pk === newPk ? newRow : r
+  useDebouncedRowUpdate(newRow, [updateProperty], false)
-  })
-  useDebouncedRowUpdate(newRow, updateProperty, false)
 }
 
 const onResizeEnd = () => {
@@ -710,10 +691,11 @@ const calculateNewRow = (
 
   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 toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : fromDate?.clone()
 
     if (fromDate && toDate) {
-      endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
+      const newMinutes = Math.round(toDate.diff(fromDate, 'minute') / 15) * 15
+      endDate = newStartDate.add(newMinutes, 'minute')
     } else if (fromDate && !toDate) {
       endDate = dayjs(newStartDate).endOf('day')
     } else if (!fromDate && toDate) {
@@ -722,15 +704,14 @@ const calculateNewRow = (
       endDate = newStartDate.clone()
     }
 
+    if (endDate.isBefore(newStartDate)) {
+      endDate = newStartDate.clone().add(15, 'minutes')
+    }
+
     newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value)
     updatedProperty.push(toCol.title!)
   }
 
-  // If from and to columns of the dragRecord and the newRow are the same, we don't manipulate the formattedRecords and formattedSideBarData. This removes unwanted computation
-  if (dragRecord.value.row[fromCol.title!] === newRow.row[fromCol.title!] && !skipChangeCheck) {
-    return { newRow: null, updatedProperty: [] }
-  }
-
   if (!newRow) return { newRow: null, updatedProperty: [] }
 
   const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)