fix(nc-gui): grid mis alignment, filter update

packages/nc-gui/components/nc/Button.vue

@@ -111,7 +111,7 @@ useEventListener(NcButton, 'mousedown', () => {
         :class="{
           'font-medium': type === 'primary' || type === 'danger',
         }"
-        class="flex flex-row items-center w-full"
+        class="flex flex-row items-center"
       >
         <slot v-if="loading && slots.loading" name="loading" />
 

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

@@ -10,8 +10,17 @@ const container = ref()
 
 const { isUIAllowed } = useRoles()
 
-const { selectedDate, selectedTime, formattedData, calendarRange, formattedSideBarData, updateRowProperty, displayField } =
+const {
-  useCalendarViewStoreOrThrow()
+  selectedDate,
+  selectedTime,
+  formattedData,
+  calendarRange,
+  formattedSideBarData,
+  updateRowProperty,
+  displayField,
+  sideBarFilterOption,
+  showSideMenu,
+} = useCalendarViewStoreOrThrow()
 
 const hours = computed(() => {
   const hours: Array<dayjs.Dayjs> = []
@@ -101,6 +110,11 @@ const recordsAcrossAllRange = computed<{
 
         let _startDate = startDate.clone()
 
+        const style: Partial<CSSStyleDeclaration> = {
+          height: `${heightInPixels}px`,
+          top: `${topInPixels + 5 + startHour * 2}px`,
+        }
+
         while (_startDate.isBefore(endDate)) {
           const timeKey = _startDate.format('HH:mm')
           if (!overlaps[timeKey]) {
@@ -120,13 +134,6 @@ const recordsAcrossAllRange = computed<{
           _startDate = _startDate.add(15, 'minutes')
         }
 
-        const finalTopInPixels = topInPixels + 5 + startHour * 2
-
-        const style: Partial<CSSStyleDeclaration> = {
-          top: `${finalTopInPixels}px`,
-          height: `${heightInPixels}px`,
-        }
-
         let position = 'none'
         const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(selectedDate.value, 'day')
         const isBeforeSelectedDay = (date: dayjs.Dayjs) => date.isBefore(selectedDate.value, 'day')
@@ -169,7 +176,6 @@ const recordsAcrossAllRange = computed<{
 
         while (_startDate.isBefore(endDate)) {
           const timeKey = _startDate.format('HH:mm')
-          console.log('timeKey', timeKey)
 
           if (!overlaps[timeKey]) {
             overlaps[timeKey] = {
@@ -551,6 +557,12 @@ const dragStart = (event: MouseEvent, record: Row) => {
 
   document.addEventListener('mouseup', onMouseUp)
 }
+
+const viewMore = (hour: dayjs.Dayjs) => {
+  sideBarFilterOption.value = 'selectedHours'
+  selectedTime.value = hour
+  showSideMenu.value = true
+}
 </script>
 
 <template>

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

@@ -63,7 +63,7 @@ const emit = defineEmits(['resize-start'])
       :class="{
         '!block !border-2 !rounded-lg !border-brand-500': selected || hover,
       }"
-      class="mt-0.6 h-7.1 hidden -left-4 resize"
+      class="mt-0.1 h-7.1 absolute 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 +83,7 @@ const emit = defineEmits(['resize-start'])
       :class="{
         '!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)"
+      class="absolute mt-0.1 hidden h-7.1 -right-4 border-1 resize !group-hover:(border-brand-500 border-2 block rounded-lg)"
     >
       <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)">
         <component :is="iconMap.drag" class="text-gray-400"></component>

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

@@ -213,6 +213,8 @@ const dragRecord = ref<Row>()
 const resizeDirection = ref<'right' | 'left' | null>()
 const resizeRecord = ref<Row | null>(null)
 
+const hoverRecord = ref<string | null>()
+
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
   updateRowProperty(row, updateProperty, isDelete)
 }, 500)
@@ -581,19 +583,22 @@ const dropEvent = (event: DragEvent) => {
   <div class="flex relative flex-col prevent-select" @drop="dropEvent">
     <div class="flex">
       <div
-        v-for="date in weekDates"
+        v-for="(date, weekIndex) in weekDates"
-        :key="date.toISOString()"
+        :key="weekIndex"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 border-b-1 border-r-1 bg-gray-50"
+        :class="{
+          '!border-brand-500 !border-b-gray-200': dayjs(date).isSame(selectedDate, 'day'),
+        }"
+        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 border-l-gray-50 border-t-gray-50 last:border-r-0 border-1 bg-gray-50"
       >
         {{ dayjs(date).format('DD ddd') }}
       </div>
     </div>
     <div ref="container" class="flex h-[calc(100vh-11.6rem)]">
       <div
-        v-for="date in weekDates"
+        v-for="(date, dateIndex) in weekDates"
-        :key="date.toISOString()"
+        :key="dateIndex"
         :class="{
-          '!border-1 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
+          '!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
         }"
         class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
         @click="selectedDate = date"
@@ -613,9 +618,12 @@ const dropEvent = (event: DragEvent) => {
         }"
         class="absolute group draggable-record pointer-events-auto"
         @mousedown="dragStart($event, record)"
+        @mouseleave="hoverRecord = null"
+        @mouseover="hoverRecord = record.rowMeta.id"
       >
         <LazySmartsheetRow :row="record">
           <LazySmartsheetCalendarRecordCard
+            :hover="hoverRecord === record.rowMeta.id"
             :position="record.rowMeta.position"
             :record="record"
             :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"

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

@@ -115,7 +115,7 @@ const recordsAcrossAllRange = computed<{
         const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
         if (!startDate) return
         const dateKey = startDate?.format('YYYY-MM-DD')
-        const hourKey = startDate?.format('HH:mm')
+        const hourKey = startDate?.startOf('hour').format('HH:mm')
         const id = record.rowMeta.id ?? getRandomNumbers()
 
         let style: Partial<CSSStyleDeclaration> = {}
@@ -145,7 +145,10 @@ const recordsAcrossAllRange = computed<{
           dayIndex = 6
         }
 
-        const hourIndex = datesHours.value[dayIndex].findIndex((h) => h.format('HH:mm') === hourKey)
+        const hourIndex = Math.max(
+          datesHours.value[dayIndex].findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
+          0,
+        )
 
         style = {
           ...style,
@@ -731,7 +734,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
       <div
         v-for="date in datesHours"
         :key="date[0].toISOString()"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-r-1 bg-gray-50"
+        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 bg-gray-50"
       >
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
@@ -743,6 +746,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
           :key="hourIndex"
           :class="{
             'border-1 !border-brand-500': hour.isSame(selectedTime, 'hour'),
+            '!border-l-0': date[0].day() === selectedDateRange.start?.day(),
           }"
           class="text-center relative h-20 text-sm text-gray-500 w-full py-1 border-gray-200 first:border-l-none border-1 border-r-gray-50 border-t-gray-50 bg-gray-50"
           @click="selectedTime = hour"

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -170,9 +170,9 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             nextDate = selectedDate.value.add(1, 'day').startOf('day')
             break
           case 'week':
-            prevDate = selectedDateRange.value.start.subtract(1, 'day').endOf('day')
             fromDate = selectedDateRange.value.start.startOf('day')
             toDate = selectedDateRange.value.end.endOf('day')
+            prevDate = selectedDateRange.value.start.subtract(1, 'day').endOf('day')
             nextDate = selectedDateRange.value.end.add(1, 'day').startOf('day')
             break
           case 'month': {
@@ -190,7 +190,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           case 'year':
             fromDate = selectedDate.value.startOf('year')
             toDate = selectedDate.value.endOf('year')
-
             prevDate = fromDate.subtract(1, 'day').endOf('day')
             nextDate = toDate.add(1, 'day').startOf('day')
             break
@@ -225,53 +224,40 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
                 logical_op: 'and',
                 children: [
                   {
-                    is_group: true,
+                    fk_column_id: fromCol.id,
-                    logical_op: 'or',
+                    comparison_op: 'lt',
-                    children: [
+                    comparison_sub_op: 'exactDate',
-                      {
+                    value: nextDate,
-                        is_group: true,
+                  },
-                        logical_op: 'and',
+                  {
-                        children: [
+                    fk_column_id: toCol.id,
-                          {
+                    comparison_op: 'gt',
-                            fk_column_id: fromCol.id,
+                    comparison_sub_op: 'exactDate',
-                            comparison_op: 'lt',
+                    value: prevDate,
-                            comparison_sub_op: 'exactDate',
-                            value: nextDate,
-                          },
-                          {
-                            fk_column_id: toCol.id,
-                            comparison_op: 'gt',
-                            comparison_sub_op: 'exactDate',
-                            value: prevDate,
-                          },
-                        ],
-                      },
-                      {
-                        // Exact match check
-                        is_group: true,
-                        logical_op: 'or',
-                        children: [
-                          {
-                            fk_column_id: fromCol.id,
-                            comparison_op: 'eq',
-                            logical_op: 'or',
-                            comparison_sub_op: 'exactDate',
-                            value: fromDate,
-                          },
-                        ],
-                      },
-                    ],
                   },
                 ],
               },
+              {
+                fk_column_id: fromCol.id,
+                comparison_op: 'eq',
+                logical_op: 'or',
+                comparison_sub_op: 'exactDate',
+                value: fromDate,
+              },
             ]
           } else if (fromCol) {
             rangeFilter = [
               {
                 fk_column_id: fromCol.id,
-                comparison_op: 'btw',
+                comparison_op: 'lt',
                 comparison_sub_op: 'exactDate',
-                value: `${prevDate},${nextDate}`,
+                value: nextDate,
+              },
+              {
+                fk_column_id: fromCol.id,
+                comparison_op: 'gt',
+                comparison_sub_op: 'exactDate',
+                value: prevDate,
               },
             ]
           }
@@ -401,65 +387,47 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
               logical_op: 'and',
               children: [
                 {
-                  is_group: true,
+                  fk_column_id: fromCol.id,
-                  logical_op: 'or',
+                  comparison_op: 'lt',
-                  children: [
+                  comparison_sub_op: 'exactDate',
-                    {
+                  value: nextDate,
-                      is_group: true,
+                },
-                      logical_op: 'and',
+                {
-                      children: [
+                  fk_column_id: toCol.id,
-                        {
+                  comparison_op: 'gt',
-                          fk_column_id: fromCol.id,
+                  comparison_sub_op: 'exactDate',
-                          comparison_op: 'lt',
+                  value: prevDate,
-                          comparison_sub_op: 'exactDate',
-                          value: nextDate,
-                        },
-                        {
-                          fk_column_id: toCol.id,
-                          comparison_op: 'gt',
-                          comparison_sub_op: 'exactDate',
-                          value: prevDate,
-                        },
-                      ],
-                    },
-                    {
-                      // Exact match check
-                      is_group: true,
-                      logical_op: 'or',
-                      children: [
-                        {
-                          fk_column_id: fromCol.id,
-                          comparison_op: 'eq',
-                          logical_op: 'or',
-                          comparison_sub_op: 'exactDate',
-                          value: fromDate,
-                        },
-                      ],
-                    },
-                  ],
                 },
               ],
             },
+            {
+              fk_column_id: fromCol.id,
+              comparison_op: 'eq',
+              logical_op: 'or',
+              comparison_sub_op: 'exactDate',
+              value: fromDate,
+            },
           ]
         } else if (fromCol) {
           rangeFilter = [
             {
               fk_column_id: fromCol.id,
-              comparison_op: 'btw',
+              comparison_op: 'lt',
+              comparison_sub_op: 'exactDate',
+              value: nextDate,
+            },
+            {
+              fk_column_id: fromCol.id,
+              comparison_op: 'gt',
               comparison_sub_op: 'exactDate',
-              value: `${prevDate},${nextDate}`,
+              value: prevDate,
             },
           ]
         }
         if (rangeFilter.length > 0) {
-          combinedFilters.children.push({
+          combinedFilters.children.push(rangeFilter)
-            is_group: true,
-            logical_op: 'or',
-            children: rangeFilter,
-          })
         }
       })
-
       return combinedFilters.children.length > 0 ? [combinedFilters] : []
     })