fix(nc-gui): refactor selectedMonth to another state

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

@@ -5,7 +5,7 @@ import type { Row } from '#imports'
 
 const emit = defineEmits(['new-record', 'expand-record'])
 
-const { selectedDate, formattedData, displayField, calendarRange, calDataType } = useCalendarViewStoreOrThrow()
+const { selectedDate, selectedMonth, formattedData, displayField, calendarRange, calDataType } = useCalendarViewStoreOrThrow()
 
 const isMondayFirst = ref(true)
 
@@ -22,12 +22,12 @@ const calendarGridContainer = ref()
 const { width: gridContainerWidth, height: gridContainerHeight } = useElementSize(calendarGridContainer)
 
 const isDayInPagedMonth = (date: Date) => {
-  return date.getMonth() === selectedDate.value.getMonth()
+  return date.getMonth() === selectedMonth.value.getMonth()
 }
 
 const dates = computed(() => {
-  const startOfMonth = dayjs(selectedDate.value).startOf('month')
+  const startOfMonth = dayjs(selectedMonth.value).startOf('month')
-  const endOfMonth = dayjs(selectedDate.value).endOf('month')
+  const endOfMonth = dayjs(selectedMonth.value).endOf('month')
 
   const firstDayToDisplay = startOfMonth.startOf('week').add(isMondayFirst.value ? 0 : -1, 'day')
   const lastDayToDisplay = endOfMonth.endOf('week').add(isMondayFirst.value ? 0 : -1, 'day')

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

@@ -20,6 +20,7 @@ const {
   pageDate,
   displayField,
   selectedDate,
+  selectedMonth,
   calendarRange,
   selectedDateRange,
   activeDates,
@@ -111,7 +112,7 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
     <NcMonthYearSelector
       v-else-if="activeCalendarView === ('month' as const)"
       v-model:page-date="pageDate"
-      v-model:selected-date="selectedDate"
+      v-model:selected-date="selectedMonth"
     />
     <NcMonthYearSelector
       v-else-if="activeCalendarView === ('year' as const)"

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

@@ -44,8 +44,10 @@ provide(IsCalendarInj, ref(true))
 const {
   loadCalendarMeta,
   loadCalendarData,
+  loadSidebarData,
   isCalendarDataLoading,
   selectedDate,
+  selectedMonth,
   activeDates,
   pageDate,
   selectedDateRange,
@@ -117,10 +119,9 @@ onMounted(async () => {
 
 reloadViewMetaHook?.on(async () => {
   await loadCalendarMeta()
-  await loadCalendarData()
 })
 reloadViewDataHook?.on(async () => {
-  await loadCalendarData()
+  await Promise.all([loadCalendarData(), loadSidebarData()])
 })
 
 const headerText = computed(() => {
@@ -132,7 +133,7 @@ const headerText = computed(() => {
         'D MMMM YYYY',
       )}`
     case 'month':
-      return dayjs(selectedDate.value).format('MMMM YYYY')
+      return dayjs(selectedMonth.value).format('MMMM YYYY')
     case 'year':
       return dayjs(selectedDate.value).format('YYYY')
   }
@@ -177,7 +178,7 @@ const headerText = computed(() => {
                 <NcMonthYearSelector
                   v-else-if="activeCalendarView === ('month' as const)"
                   v-model:page-date="pageDate"
-                  v-model:selected-date="selectedDate"
+                  v-model:selected-date="selectedMonth"
                 />
                 <NcMonthYearSelector
                   v-else-if="activeCalendarView === ('year' as const)"

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -48,6 +48,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const selectedTime = ref<Date | null>(null)
 
+    const selectedMonth = ref<Date | null>(new Date())
+
     const isCalendarDataLoading = ref<boolean>(false)
 
     const selectedDateRange = ref<{
@@ -602,7 +604,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     const paginateCalendarView = async (action: 'next' | 'prev') => {
       switch (activeCalendarView.value) {
         case 'month':
-          selectedDate.value = action === 'next' ? addMonths(selectedDate.value, 1) : addMonths(selectedDate.value, -1)
+          selectedMonth.value = action === 'next' ? addMonths(selectedMonth.value, 1) : addMonths(selectedMonth.value, -1)
+          // selectedDate.value = action === 'next' ? addMonths(selectedDate.value, 1) : addMonths(selectedDate.value, -1)
           pageDate.value = action === 'next' ? addMonths(pageDate.value, 1) : addMonths(pageDate.value, -1)
           if (pageDate.value.getFullYear() !== selectedDate.value.getFullYear()) {
             pageDate.value = selectedDate.value
@@ -662,6 +665,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       }
     })
 
+    watch(selectedMonth, async () => {
+      if (activeCalendarView.value !== 'month') return
+      await Promise.all([loadCalendarData(), loadSidebarData()])
+    })
+
     watch(selectedDateRange, async () => {
       if (activeCalendarView.value !== 'week') return
       await Promise.all([loadCalendarData(), loadSidebarData()])
@@ -703,6 +711,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       pageDate,
       paginationData,
       selectedDate,
+      selectedMonth,
       selectedDateRange,
       paginateCalendarView,
     }

packages/nc-gui/lib/types.ts

@@ -69,7 +69,7 @@ interface Row {
       fk_from_col: ColumnType
       fk_to_col: ColumnType | null
     }
-    position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' | 'spanning'
+    position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' | string
   }
 }