From c472ce0339f24f2672a3c968a2838dc5539d26ba Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:14 +0000
Subject: [PATCH] fix(nc-gui): some changes

---
 .../smartsheet/calendar/SideMenu.vue          | 11 +++-
 .../composables/useCalendarViewStore.ts       | 65 ++++++++++++++-----
 2 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index df3a5f93ee..beed67d4e1 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -286,7 +286,14 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
 
     <div class="px-4 relative flex flex-col gap-y-6 pt-4">
       <div class="flex items-center gap-2">
-        <a-input v-model:value="searchQuery.value" class="!rounded-lg !h-8 !border-gray-200 !px-4" placeholder="Search records">
+        <a-input
+          v-model:value="searchQuery.value"
+          :class="{
+            '!border-brand-500': searchQuery.value.length > 0,
+          }"
+          class="!rounded-lg !h-8 !border-gray-200 !px-4"
+          placeholder="Search records"
+        >
           <template #prefix>
             <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
           </template>
@@ -306,7 +313,7 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
       >
         <NcButton
           v-if="isUIAllowed('dataEdit') && props.visible"
-          class="!absolute right-5 bottom-5 !h-12 !w-12"
+          class="!absolute right-5 !border-brand-500 bottom-5 !h-12 !w-12"
           type="secondary"
           @click="emit('new-record', { row: {} })"
         >
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index 9de4de21e9..65d5ccc306 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -157,17 +157,23 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         sideBarFilterOption.value === 'selectedDate' ||
         sideBarFilterOption.value === 'selectedHours'
       ) {
+        let prevDate: string | null | dayjs.Dayjs = null
         let fromDate: string | null | dayjs.Dayjs = null
         let toDate: string | null | dayjs.Dayjs = null
+        let nextDate: string | null | dayjs.Dayjs = null
 
         switch (sideBarFilterOption.value) {
           case 'day':
             fromDate = selectedDate.value.startOf('day')
             toDate = selectedDate.value.endOf('day')
+            prevDate = selectedDate.value.subtract(1, 'day').endOf('day')
+            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')
+            nextDate = selectedDateRange.value.end.add(1, 'day').startOf('day')
             break
           case 'month': {
             const startOfMonth = selectedMonth.value.startOf('month')
@@ -176,29 +182,36 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             const daysToDisplay = Math.max(endOfMonth.diff(startOfMonth, 'day') + 1, 35)
             fromDate = startOfMonth.subtract((startOfMonth.day() + 7) % 7, 'day').add(1, 'day')
             toDate = fromDate.add(daysToDisplay, 'day').endOf('day')
+
+            prevDate = fromDate.subtract(1, 'day').endOf('day')
+            nextDate = toDate.add(1, 'day').startOf('day')
             break
           }
           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
           case 'selectedDate':
             fromDate = selectedDate.value.startOf('day')
             toDate = selectedDate.value.endOf('day')
+            prevDate = selectedDate.value.subtract(1, 'day').endOf('day')
+            nextDate = selectedDate.value.add(1, 'day').startOf('day')
             break
           case 'selectedHours':
             fromDate = selectedTime.value?.startOf('hour')
             toDate = selectedTime.value?.endOf('hour')
+            prevDate = fromDate?.subtract(1, 'hour').endOf('hour')
+            nextDate = toDate?.add(1, 'hour').startOf('hour')
             break
         }
 
-        if (calDataType.value === UITypes.Date) {
-          fromDate = fromDate!.format('YYYY-MM-DD')
-          toDate = toDate!.format('YYYY-MM-DD')
-        } else {
-          fromDate = fromDate!.format('YYYY-MM-DD HH:mm:ssZ')
-          toDate = toDate!.format('YYYY-MM-DD HH:mm:ssZ')
-        }
+        fromDate = fromDate!.format('YYYY-MM-DD HH:mm:ssZ')
+        toDate = toDate!.format('YYYY-MM-DD HH:mm:ssZ')
+        prevDate = prevDate!.format('YYYY-MM-DD HH:mm:ssZ')
+        nextDate = nextDate!.format('YYYY-MM-DD HH:mm:ssZ')
 
         calendarRange.value.forEach((range) => {
           const fromCol = range.fk_from_col
@@ -221,15 +234,15 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
                         children: [
                           {
                             fk_column_id: fromCol.id,
-                            comparison_op: 'lte',
+                            comparison_op: 'lt',
                             comparison_sub_op: 'exactDate',
-                            value: toDate,
+                            value: nextDate,
                           },
                           {
                             fk_column_id: toCol.id,
-                            comparison_op: 'gte',
+                            comparison_op: 'gt',
                             comparison_sub_op: 'exactDate',
-                            value: fromDate,
+                            value: prevDate,
                           },
                         ],
                       },
@@ -265,7 +278,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
                 fk_column_id: fromCol.id,
                 comparison_op: 'btw',
                 comparison_sub_op: 'exactDate',
-                value: `${fromDate},${toDate}`,
+                value: `${prevDate},${nextDate}`,
               },
             ]
           }
@@ -341,13 +354,17 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         children: [],
       }
 
+      let prevDate: string | null | dayjs.Dayjs = null
       let fromDate: dayjs.Dayjs | null | string = null
       let toDate: dayjs.Dayjs | null | string = null
+      let nextDate: string | null | dayjs.Dayjs = null
 
       switch (activeCalendarView.value) {
         case 'week':
           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': {
           const startOfMonth = selectedMonth.value.startOf('month')
@@ -356,20 +373,28 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           const daysToDisplay = Math.max(endOfMonth.diff(startOfMonth, 'day') + 1, 35)
           fromDate = startOfMonth.subtract((startOfMonth.day() + 7) % 7, 'day')
           toDate = fromDate.add(daysToDisplay, 'day')
+          prevDate = fromDate.subtract(1, 'day').endOf('day')
+          nextDate = toDate.add(1, 'day').startOf('day')
           break
         }
         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
         case 'day':
           fromDate = selectedDate.value.startOf('day')
           toDate = selectedDate.value.endOf('day')
+          prevDate = selectedDate.value.subtract(1, 'day').endOf('day')
+          nextDate = selectedDate.value.add(1, 'day').startOf('day')
           break
       }
 
       fromDate = fromDate!.format('YYYY-MM-DD HH:mm:ssZ')
       toDate = toDate!.format('YYYY-MM-DD HH:mm:ssZ')
+      prevDate = prevDate!.format('YYYY-MM-DD HH:mm:ssZ')
+      nextDate = nextDate!.format('YYYY-MM-DD HH:mm:ssZ')
 
       calendarRange.value.forEach((range) => {
         const fromCol = range.fk_from_col
@@ -392,15 +417,15 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
                       children: [
                         {
                           fk_column_id: fromCol.id,
-                          comparison_op: 'lte',
+                          comparison_op: 'lt',
                           comparison_sub_op: 'exactDate',
-                          value: toDate,
+                          value: nextDate,
                         },
                         {
                           fk_column_id: toCol.id,
-                          comparison_op: 'gte',
+                          comparison_op: 'gt',
                           comparison_sub_op: 'exactDate',
-                          value: fromDate,
+                          value: prevDate,
                         },
                       ],
                     },
@@ -436,7 +461,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
               fk_column_id: fromCol.id,
               comparison_op: 'btw',
               comparison_sub_op: 'exactDate',
-              value: `${fromDate},${toDate}`,
+              value: `${prevDate},${nextDate}`,
             },
           ]
         }
@@ -701,6 +726,12 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       }
     })
 
+    watch(selectedTime, async () => {
+      if (calDataType.value !== UITypes.Date) {
+        await loadSidebarData()
+      }
+    })
+
     watch(selectedMonth, async (value, oldValue) => {
       if (activeCalendarView.value !== 'month') return
       if (value.month() !== oldValue.month()) {