Browse Source

fix(nc-gui): date to dayjs migration

pull/7611/head
DarkPhoenix2704 8 months ago
parent
commit
52a550be15
  1. 2
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  2. 13
      packages/nc-gui/components/smartsheet/calendar/index.vue
  3. 39
      packages/nc-gui/composables/useCalendarViewStore.ts
  4. 113
      packages/nc-gui/utils/dateTimeUtils.ts
  5. 1
      packages/nc-gui/utils/index.ts

2
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) => {

13
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'),
}
}
"

39
packages/nc-gui/composables/useCalendarViewStore.ts

@ -46,9 +46,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
const isCalendarDataLoading = ref<boolean>(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,

113
packages/nc-gui/utils/dateTimeUtils.ts

@ -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
}

1
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'

Loading…
Cancel
Save