fix(nc-gui): some ui changes

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

@@ -20,6 +20,7 @@ interface Props {
   type?: ButtonType | 'danger' | 'secondary' | undefined
   size?: NcButtonSize
   centered?: boolean
+  fullWidth?: boolean
   iconOnly?: boolean
 }
 
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'medium',
   type: 'primary',
+  fullWidth: false,
   centered: true,
 })
 
@@ -110,6 +112,7 @@ useEventListener(NcButton, 'mousedown', () => {
         v-if="!(size === 'xxsmall' && loading) && !props.iconOnly"
         :class="{
           'font-medium': type === 'primary' || type === 'danger',
+          'w-full': props.fullWidth,
         }"
         class="flex flex-row items-center"
       >

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

@@ -132,11 +132,11 @@ const headerText = computed(() => {
       return dayjs(selectedDate.value).format('D MMMM YYYY')
     case 'week':
       if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) {
-        return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
+        return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YY')}`
       } else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) {
-        return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
+        return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YY')}`
       } else {
-        return `${selectedDateRange.value.start.format('D MMM YYYY')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
+        return `${selectedDateRange.value.start.format('D MMM YY')} - ${selectedDateRange.value.end.format('D MMM YY')}`
       }
     case 'month':
       return dayjs(selectedMonth.value).format('MMMM YYYY')
@@ -159,17 +159,8 @@ const headerText = computed(() => {
           </NcTooltip>
 
           <NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']">
-            <NcButton
+            <NcButton :class="{ '!w-23': activeCalendarView === 'year' }" class="w-44" full-width size="small" type="secondary">
-              :class="{
+              <div class="flex w-full px-3 py-1 w-full items-center justify-between">
-                'w-36': activeCalendarView === 'month',
-                'w-40': activeCalendarView === 'day',
-                'w-20': activeCalendarView === 'year',
-                'w-50': activeCalendarView === 'week',
-              }"
-              size="small"
-              type="secondary"
-            >
-              <div class="flex w-full px-3 py-1 items-center justify-between">
                 <span class="font-bold text-center text-brand-500">{{ headerText }}</span>
                 <component :is="iconMap.arrowDown" class="h-4 w-4 text-gray-700" />
               </div>

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -72,6 +72,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const isSidebarLoading = ref<boolean>(false)
 
+    const activeDates = ref<dayjs.Dayjs[]>([])
+
     const sideBarFilterOption = ref<string>(activeCalendarView.value ?? 'allRecords')
 
     const { api } = useApi()
@@ -431,39 +433,79 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       return combinedFilters.children.length > 0 ? [combinedFilters] : []
     })
 
-    // Set of Dates that have data
+    const fetchActiveDates = async () => {
-    const activeDates = computed(() => {
+      if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id || !calendarRange.value) return
-      if (!formattedData.value || !calendarRange.value) return []
+      let prevDate: dayjs.Dayjs | string | null = null
-      const dates = new Set<dayjs.Dayjs>()
+      let nextDate: dayjs.Dayjs | string | null = null
+
+      if (activeCalendarView.value === 'week' || activeCalendarView.value === 'day' || activeCalendarView.value === 'month') {
+        prevDate = pageDate.value.subtract(1, 'day').endOf('day')
+
+        nextDate = pageDate.value.add(1, 'day').startOf('day')
+      } else if (activeCalendarView.value === 'year') {
+        prevDate = selectedDate.value.startOf('year').subtract(1, 'day').endOf('day')
+        nextDate = selectedDate.value.endOf('year').add(1, 'day').startOf('day')
+      }
+
+      const activeDateFilter: Array<any> = []
 
       calendarRange.value.forEach((range) => {
-        formattedData.value.forEach((row) => {
+        const fromCol = range.fk_from_col
-          const start = row.row[range.fk_from_col?.title ?? '']
+        const toCol = range.fk_to_col
-          let end
+        let rangeFilter: any = []
-          if (range.fk_to_col) {
+
-            end = row.row[range.fk_to_col.title ?? '']
+        if (fromCol && toCol) {
-          }
+          rangeFilter = [
-          if (start && end) {
+            {
-            const startDate = dayjs(start)
+              is_group: true,
-            let endDate = dayjs(end)
+              logical_op: 'and',
-            let currentDate = startDate
+              children: [
-            // We have to check whether the start is after the end date, if so, loop through the end date
+                {
-            if (startDate.isAfter(endDate)) {
+                  fk_column_id: fromCol.id,
-              endDate = startDate
+                  comparison_op: 'lt',
-              currentDate = endDate
+                  comparison_sub_op: 'exactDate',
-            }
+                  value: nextDate,
-            while (currentDate.isSameOrBefore(endDate)) {
+                },
-              dates.add(currentDate)
+                {
-              currentDate = currentDate.add(1, 'day')
+                  fk_column_id: toCol.id,
-            }
+                  comparison_op: 'gt',
-          } else if (start) {
+                  comparison_sub_op: 'exactDate',
-            dates.add(dayjs(start))
+                  value: prevDate,
+                },
+              ],
+            },
+          ]
+        } else if (fromCol) {
+          rangeFilter = [
+            {
+              fk_column_id: fromCol.id,
+              comparison_op: 'lt',
+              comparison_sub_op: 'exactDate',
+              value: nextDate,
+            },
+            {
+              fk_column_id: fromCol.id,
+              comparison_op: 'gt',
+              comparison_sub_op: 'exactDate',
+              value: prevDate,
+            },
+          ]
         }
-        })
+
+        activeDateFilter.push(rangeFilter)
       })
 
-      return Array.from(dates)
+      if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) return
+      const res = await api.dbViewRow.calendarCount('noco', base.value.id!, meta.value!.id!, viewMeta.value.id, {
+        ...queryParams.value,
+        ...{},
+        ...{},
+        ...{ filterArrJson: JSON.stringify([...filterJSON.value, ...activeDateFilter]) },
       })
+      if (res) {
+        activeDates.value = res.map((dateObj: unknown) => dayjs(dateObj.date))
+      }
+    }
 
     const changeCalendarView = async (view: 'month' | 'year' | 'day' | 'week') => {
       try {
@@ -669,7 +711,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       }
     }
 
-    watch(selectedDate, async () => {
+    watch(selectedDate, async (value, oldValue) => {
       if (activeCalendarView.value === 'month' || activeCalendarView.value === 'week') {
         if (sideBarFilterOption.value === 'selectedDate') {
           await loadSidebarData()
@@ -677,6 +719,10 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       } else {
         await Promise.all([loadCalendarData(), loadSidebarData()])
       }
+
+      if (activeCalendarView.value === 'year' && value.year() !== oldValue.year()) {
+        await fetchActiveDates()
+      }
     })
 
     watch(selectedTime, async () => {
@@ -726,7 +772,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         }
       }
       sideBarFilterOption.value = activeCalendarView.value ?? 'allRecords'
-      await Promise.all([loadCalendarData(), loadSidebarData()])
+      await Promise.all([loadCalendarData(), loadSidebarData(), fetchActiveDates()])
     })
 
     watch(sideBarFilterOption, async () => {
@@ -737,6 +783,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       await loadSidebarData()
     })
 
+    watch(pageDate, async () => {
+      if (activeCalendarView.value === 'year') return
+      await fetchActiveDates()
+    })
+
     return {
       formattedSideBarData,
       loadMoreSidebarData,