fix(nc-gui): highlight entire record if its split over multiple rows

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

@@ -47,6 +47,7 @@ const resizeInProgress = ref(false)
 const isDragging = ref(false)
 const dragRecord = ref<Row>()
 
+const hoverRecord = ref<string | null>()
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
 const focusedDate = ref<Date | null>(null)
@@ -173,7 +174,7 @@ const recordsToDisplay = computed(() => {
         let currentWeekStart = startDate.startOf('week')
 
         const id = record.rowMeta.id ?? getRandomNumbers()
-        while (currentWeekStart.isSameOrBefore(endDate)) {
+        while (currentWeekStart.isBefore(endDate)) {
           const currentWeekEnd = currentWeekStart.endOf('week')
           const recordStart = currentWeekStart.isBefore(startDate) ? startDate : currentWeekStart
           const recordEnd = currentWeekEnd.isAfter(endDate) ? endDate : currentWeekEnd
@@ -434,9 +435,9 @@ const onResizeEnd = () => {
 }
 
 const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
-  if (!isUIAllowed('dataEdit')) return
+  if (!isUIAllowed('dataEdit') || draggingId.value) return
 
-  if (draggingId.value) return
+  selectedDate.value = null
   resizeInProgress.value = true
   resizeDirection.value = direction
   resizeRecord.value = record
@@ -560,6 +561,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
     })
 
     dragRecord.value = record
+    selectedDate.value = null
 
     isDragging.value = true
     dragElement.value = target
@@ -829,10 +831,13 @@ const isDateSelected = (date: Date) => {
               : 'none',
         }"
         class="absolute group draggable-record cursor-pointer pointer-events-auto"
+        @mouseleave="hoverRecord = null"
+        @mouseover="hoverRecord = record.rowMeta.id"
         @mousedown.stop="dragStart($event, record)"
       >
         <LazySmartsheetRow :row="record">
           <LazySmartsheetCalendarRecordCard
+            :hover="hoverRecord === record.rowMeta.id"
             :name="record.row[displayField!.title!]"
             :position="record.rowMeta.position"
             :record="record"

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

@@ -5,17 +5,19 @@ interface Props {
   date?: string
   color?: string
   resize?: boolean
+  hover?: boolean
   selected?: boolean
   size?: 'small' | 'medium' | 'large' | 'auto'
   showDate?: boolean
   position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   name: '',
   date: '',
   resize: true,
   selected: false,
+  hover: false,
   color: 'blue',
   size: 'small',
   showDate: true,
@@ -43,7 +45,7 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'group-hover:(border-brand-500 border-2)': resize,
-      'border-brand-500 border-2': selected,
+      '!border-brand-500 border-2': selected || hover,
     }"
     class="relative group border-2 border-white"
   >
@@ -65,9 +67,9 @@ const emit = defineEmits(['resize-start'])
     <div
       v-if="(position === 'leftRounded' || position === 'rounded') && resize"
       :class="{
-        '!block border-2 rounded-lg border-brand-500': selected,
+        '!block !border-2 !rounded-lg !border-brand-500': selected || hover,
       }"
-      class="absolute mt-0.6 h-7.1 hidden -left-4 resize !group-hover:(border-brand-500 block border-2 rounded-lg)"
+      class="absolute mt-0.6 h-7.1 hidden -left-4 resize"
     >
       <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
         <component :is="iconMap.drag" class="text-gray-400"></component>
@@ -83,7 +85,7 @@ const emit = defineEmits(['resize-start'])
     <div
       v-if="(position === 'rightRounded' || position === 'rounded') && resize"
       :class="{
-        '!block border-2 rounded-lg border-brand-500': selected,
+        '!block border-2 rounded-lg border-brand-500': selected || hover,
       }"
       class="absolute mt-0.6 hidden h-7.1 -right-4 border-1 resize !group-hover:(border-brand-500 border-2 block rounded-lg)"
     >