diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue index 39638c3708..66ef7c7f44 100644 --- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue @@ -13,6 +13,7 @@ const { sideBarFilterOption, displayField, calendarRange, + showSideMenu, updateRowProperty, } = useCalendarViewStoreOrThrow() @@ -681,6 +682,7 @@ const selectDate = (date: dayjs.Dayjs) => { const viewMore = (date: dayjs.Dayjs) => { sideBarFilterOption.value = 'selectedDate' as const selectedDate.value = date + showSideMenu.value = true } const isDateSelected = (date: dayjs.Dayjs) => { diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue index bbe3037d3b..ad07239e0e 100644 --- a/packages/nc-gui/components/smartsheet/calendar/index.vue +++ b/packages/nc-gui/components/smartsheet/calendar/index.vue @@ -49,13 +49,12 @@ const { selectedMonth, activeDates, pageDate, + showSideMenu, selectedDateRange, activeCalendarView, paginateCalendarView, } = useCalendarViewStoreOrThrow() -const showSideMenu = ref(true) - const calendarRangeDropdown = ref(false) const router = useRouter() @@ -212,12 +211,12 @@ const headerText = computed(() => { type="secondary" @click=" () => { - selectedDate = new Date() - pageDate = new Date() - selectedMonth = new Date() + selectedDate = dayjs() + pageDate = dayjs() + selectedMonth = dayjs() selectedDateRange = { - start: dayjs(new Date()).startOf('week').toDate(), - end: dayjs(new Date()).endOf('week').toDate(), + start: dayjs().startOf('week'), + end: dayjs().endOf('week'), } } " diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts index eedf279788..9c236f8988 100644 --- a/packages/nc-gui/composables/useCalendarViewStore.ts +++ b/packages/nc-gui/composables/useCalendarViewStore.ts @@ -46,9 +46,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState( const isCalendarDataLoading = ref(false) + const showSideMenu = ref(true) + const selectedDateRange = ref<{ - start: dayjs.Dayjs | null - end: dayjs.Dayjs | null + start: dayjs.Dayjs + end: dayjs.Dayjs }>({ start: dayjs(selectedDate.value).startOf('week'), // This will be the previous Monday end: dayjs(selectedDate.value).startOf('week').add(6, 'day'), // This will be the following Sunday @@ -544,24 +546,24 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState( const paginateCalendarView = async (action: 'next' | 'prev') => { switch (activeCalendarView.value) { case 'month': - selectedMonth.value = action === 'next' ? addMonths(selectedMonth.value, 1) : addMonths(selectedMonth.value, -1) + selectedMonth.value = action === 'next' ? selectedMonth.value.add(1, 'month') : selectedMonth.value.subtract(1, 'month') + pageDate.value = action === 'next' ? pageDate.value.add(1, 'month') : pageDate.value.subtract(1, 'month') // 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()) { + if (pageDate.value.year() !== selectedDate.value.year()) { pageDate.value = selectedDate.value } break case 'year': - selectedDate.value = action === 'next' ? addYears(selectedDate.value, 1) : addYears(selectedDate.value, -1) - if (pageDate.value.getFullYear() !== selectedDate.value.getFullYear()) { + selectedDate.value = action === 'next' ? selectedDate.value.add(1, 'year') : selectedDate.value.subtract(1, 'year') + if (pageDate.value.year() !== selectedDate.value.year()) { pageDate.value = selectedDate.value } break case 'day': - selectedDate.value = action === 'next' ? addDays(selectedDate.value, 1) : addDays(selectedDate.value, -1) - if (pageDate.value.getFullYear() !== selectedDate.value.getFullYear()) { + selectedDate.value = action === 'next' ? selectedDate.value.add(1, 'day') : selectedDate.value.subtract(1, 'day') + if (pageDate.value.year() !== selectedDate.value.year()) { pageDate.value = selectedDate.value - } else if (pageDate.value.getMonth() !== selectedDate.value.getMonth()) { + } else if (pageDate.value.month() !== selectedDate.value.month()) { pageDate.value = selectedDate.value } break @@ -569,15 +571,15 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState( selectedDateRange.value = action === 'next' ? { - start: addDays(selectedDateRange.value.start!, 7), - end: addDays(selectedDateRange.value.end!, 7), + start: selectedDateRange.value.start.add(7, 'day'), + end: selectedDateRange.value.end.add(7, 'day'), } : { - start: addDays(selectedDateRange.value.start!, -7), - end: addDays(selectedDateRange.value.end!, -7), + start: selectedDateRange.value.start.subtract(7, 'day'), + end: selectedDateRange.value.end.subtract(7, 'day'), } - if (pageDate.value.getMonth() !== selectedDateRange.value.end?.getMonth()) { - pageDate.value = selectedDateRange.value.start! + if (pageDate.value.month() !== selectedDateRange.value.end.month()) { + pageDate.value = selectedDateRange.value.start } break } @@ -692,8 +694,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState( watch(activeCalendarView, async (value, oldValue) => { if (oldValue === 'week') { pageDate.value = selectedDate.value - selectedDate.value = selectedDateRange.value.start! - selectedMonth.value = selectedDateRange.value.start! + selectedDate.value = selectedDateRange.value.start + selectedMonth.value = selectedDateRange.value.start } else if (oldValue === 'month') { selectedDate.value = selectedMonth.value pageDate.value = selectedDate.value @@ -745,6 +747,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState( loadCalendarData, formattedData, isSidebarLoading, + showSideMenu, selectedTime, updateCalendarMeta, calendarMetaData, diff --git a/packages/nc-gui/utils/dateTimeUtils.ts b/packages/nc-gui/utils/dateTimeUtils.ts deleted file mode 100644 index 748d4ae3e1..0000000000 --- a/packages/nc-gui/utils/dateTimeUtils.ts +++ /dev/null @@ -1,113 +0,0 @@ -import dayjs from 'dayjs' - -export const timeAgo = (date: any) => { - if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) { - // if there is no timezone info, consider as UTC - // e.g. 2023-01-01 08:00:00 (MySQL) - date += '+00:00' - } - // show in local time - return dayjs(date).fromNow() -} - -export const dateFormats = [ - 'YYYY-MM-DD', - 'YYYY/MM/DD', - 'DD-MM-YYYY', - 'MM-DD-YYYY', - 'DD/MM/YYYY', - 'MM/DD/YYYY', - 'DD MM YYYY', - 'MM DD YYYY', - 'YYYY MM DD', -] - -export const timeFormats = ['HH:mm', 'HH:mm:ss'] - -export const handleTZ = (val: any) => { - if (val === undefined || val === null) { - return - } - if (typeof val !== 'string') { - return val - } - return val.replace( - /((?:-?(?:[1-9][0-9]*)?[0-9]{4})-(?:1[0-2]|0[1-9])-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9])(?:\.[0-9]+)?(?:Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9]))/g, - (i, v) => { - return dayjs(v).format('YYYY-MM-DD HH:mm') - }, - ) -} - -export function validateDateFormat(v: string) { - return dateFormats.includes(v) -} - -export function validateDateWithUnknownFormat(v: string) { - for (const format of dateFormats) { - if (dayjs(v, format, true).isValid() as any) { - return true - } - for (const timeFormat of ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']) { - if (dayjs(v, `${format} ${timeFormat}`, true).isValid() as any) { - return true - } - } - } - return false -} - -export function getDateFormat(v: string) { - for (const format of dateFormats) { - if (dayjs(v, format, true).isValid()) { - return format - } - } - return 'YYYY/MM/DD' -} - -export function getDateTimeFormat(v: string) { - for (const format of dateFormats) { - for (const timeFormat of timeFormats) { - const dateTimeFormat = `${format} ${timeFormat}` - if (dayjs(v, dateTimeFormat, true).isValid() as any) { - return dateTimeFormat - } - } - } - return 'YYYY/MM/DD' -} - -export function parseStringDate(v: string, dateFormat: string) { - const dayjsObj = dayjs(v) - if (dayjsObj.isValid()) { - v = dayjsObj.format('YYYY-MM-DD') - } else { - v = dayjs(v, dateFormat).format('YYYY-MM-DD') - } - return v -} - -export function addMonths(date: Date, months: number) { - const d = new Date(date) - d.setMonth(d.getMonth() + months) - return d -} - -export function addDays(date: Date, days: number) { - const d = new Date(date) - d.setDate(d.getDate() + days) - return d -} - -export function addWeeks(date: Date, weeks: number) { - const d = new Date(date) - d.setDate(d.getDate() + 7 * weeks) - return d -} - -export function addYears(date: Date, years: number) { - const d = new Date(date) - d.setFullYear(d.getFullYear() + years) - return d -} diff --git a/packages/nc-gui/utils/index.ts b/packages/nc-gui/utils/index.ts index 4453d51490..afcd69c42a 100644 --- a/packages/nc-gui/utils/index.ts +++ b/packages/nc-gui/utils/index.ts @@ -15,7 +15,6 @@ export * from './validation' export * from './viewUtils' export * from './currencyUtils' export * from './dataUtils' -export * from './dateTimeUtils' export * from './stringUtils' export * from './memStorage' export * from './browserUtils'