From 44aeaab28a6c793dda98eb0616140e4741cdf166 Mon Sep 17 00:00:00 2001 From: Anbarasu Date: Thu, 16 May 2024 11:30:29 +0530 Subject: [PATCH] fix(nc-gui): update calendar (#8474) * fix(nc-gui): update calendar * fix(nc-gui): refactor components * fix(nc-gui): tab action position not getting updated * test: fix calendar flakiness --- .../nc-gui/components/nc/DateWeekSelector.vue | 95 ++--------- .../components/nc/MonthYearSelector.vue | 16 +- .../nc-gui/components/smartsheet/Toolbar.vue | 13 +- .../calendar/DayView/DateTimeField.vue | 4 +- .../smartsheet/calendar/MonthView.vue | 4 +- .../smartsheet/calendar/SideMenu.vue | 10 +- .../calendar/WeekView/DateField.vue | 4 +- .../calendar/WeekView/DateTimeField.vue | 8 +- .../smartsheet/calendar/YearView/Month.vue | 159 ++++++++++++++++++ .../{YearView.vue => YearView/index.vue} | 37 ++-- .../components/smartsheet/calendar/index.vue | 7 +- .../smartsheet/toolbar/Calendar/Mode.vue | 18 +- .../smartsheet/toolbar/Calendar/Range.vue | 13 +- .../composables/useCalendarViewStore.ts | 4 +- .../Calendar/CalendarWeekDateTime.ts | 4 +- 15 files changed, 259 insertions(+), 137 deletions(-) create mode 100644 packages/nc-gui/components/smartsheet/calendar/YearView/Month.vue rename packages/nc-gui/components/smartsheet/calendar/{YearView.vue => YearView/index.vue} (59%) diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue index e41df1c4b3..6e0b91b258 100644 --- a/packages/nc-gui/components/nc/DateWeekSelector.vue +++ b/packages/nc-gui/components/nc/DateWeekSelector.vue @@ -2,15 +2,12 @@ import dayjs from 'dayjs' interface Props { - size?: 'medium' | 'large' | 'small' + size?: 'medium' selectedDate?: dayjs.Dayjs | null - isDisabled?: boolean pageDate?: dayjs.Dayjs activeDates?: Array isMondayFirst?: boolean - disablePagination?: boolean isWeekPicker?: boolean - disableHeader?: boolean hideCalendar?: boolean selectedWeek?: { start: dayjs.Dayjs @@ -19,19 +16,16 @@ interface Props { } const props = withDefaults(defineProps(), { - size: 'large', + size: 'medium', selectedDate: null, - isDisabled: false, isMondayFirst: true, - disablePagination: false, pageDate: dayjs(), isWeekPicker: false, - disableHeader: false, activeDates: [] as Array, selectedWeek: null, hideCalendar: false, }) -const emit = defineEmits(['change', 'dblClick', 'update:selectedDate', 'update:pageDate', 'update:selectedWeek']) +const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek']) // Page date is the date we use to manage which month/date that is currently being displayed const pageDate = useVModel(props, 'pageDate', emit) @@ -139,27 +133,12 @@ const paginate = (action: 'next' | 'prev') => { pageDate.value = newDate emit('update:pageDate', newDate) } - -const emitDblClick = (date: dayjs.Dayjs) => { - emit('dblClick', date) -} - {{ currentMonthYear }} + {{ currentMonthYear }} - + @@ -186,42 +158,16 @@ const emitDblClick = (date: dayjs.Dayjs) => { -
-
+
+
{{ day[0] }}
-
+
{ 'text-gray-400': !isDateInCurrentMonth(date), 'nc-selected-week-start': isSameDate(date, selectedWeek?.start), 'nc-selected-week-end': isSameDate(date, selectedWeek?.end), - 'rounded-md text-brand-500 !font-semibold nc-calendar-today ': - isSameDate(date, dayjs()) && isDateInCurrentMonth(date), - 'h-9 w-9': size === 'large', + 'rounded-md text-brand-500 !font-semibold nc-calendar-today': isSameDate(date, dayjs()) && isDateInCurrentMonth(date), 'text-gray-500': date.get('day') === 0 || date.get('day') === 6, - 'h-8 w-8': size === 'medium', - 'h-6 w-6 text-[10px]': size === 'small', }" - class="px-1 py-1 relative border-1 font-medium flex items-center cursor-pointer justify-center" + class="px-1 h-8 w-8 py-1 relative transition border-1 font-medium flex text-gray-700 items-center cursor-pointer justify-center" data-testid="nc-calendar-date" - @dblclick="emitDblClick(date)" @click="handleSelectDate(date)" > {{ date.get('date') }} @@ -270,7 +207,7 @@ const emitDblClick = (date: dayjs.Dayjs) => { diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView/index.vue similarity index 59% rename from packages/nc-gui/components/smartsheet/calendar/YearView.vue rename to packages/nc-gui/components/smartsheet/calendar/YearView/index.vue index 5505892067..8452844a5c 100644 --- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/YearView/index.vue @@ -13,17 +13,27 @@ const months = computed(() => { const calendarContainer = ref(null) -const { width } = useWindowSize() +const { width } = useElementSize(calendarContainer) -const size = ref('small') +const size = ref<'small' | 'medium'>('small') +const cols = ref(4) const handleResize = () => { - if (width.value < 1608) { - size.value = 'small' - } else if (width.value < 2000) { + if (width.value > 1250) { + size.value = 'medium' + cols.value = 4 + } else if (width.value > 850) { size.value = 'medium' + cols.value = 3 + } else if (width.value > 680) { + size.value = 'small' + cols.value = 3 + } else if (width.value > 375) { + size.value = 'small' + cols.value = 2 } else { - size.value = 'large' + size.value = 'medium' + cols.value = 1 } } @@ -40,15 +50,19 @@ watch(width, handleResize)
- +
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue index 05d6ed3cc7..a7cd09a0b9 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue @@ -5,6 +5,8 @@ const props = defineProps<{ const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow() +const isTab = computed(() => props.tab) + const highlightStyle = ref({ left: '0px' }) const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: MouseEvent) => { @@ -22,15 +24,19 @@ const updateHighlightPosition = () => { }) } +onMounted(() => { + updateHighlightPosition() +}) + watch(activeCalendarView, () => { - if (!props.tab) return + if (!isTab.value) return updateHighlightPosition() })