mirror of https://github.com/nocodb/nocodb
Browse Source
* fix(nc-gui): update calendar * fix(nc-gui): refactor components * fix(nc-gui): tab action position not getting updated * test: fix calendar flakinesspull/8496/head
Anbarasu
6 months ago
committed by
GitHub
15 changed files with 259 additions and 137 deletions
@ -0,0 +1,159 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
size?: 'medium' | 'small' |
||||||
|
selectedDate?: dayjs.Dayjs | null |
||||||
|
pageDate?: dayjs.Dayjs |
||||||
|
activeDates?: Array<dayjs.Dayjs> |
||||||
|
isMondayFirst?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
size: 'medium', |
||||||
|
selectedDate: null, |
||||||
|
isMondayFirst: true, |
||||||
|
pageDate: dayjs(), |
||||||
|
activeDates: [] as Array<dayjs.Dayjs>, |
||||||
|
}) |
||||||
|
const emit = defineEmits(['dblClick', 'update:selectedDate', 'update:pageDate']) |
||||||
|
// Page date is the date we use to manage which month/date that is currently being displayed |
||||||
|
const pageDate = useVModel(props, 'pageDate', emit) |
||||||
|
|
||||||
|
const selectedDate = useVModel(props, 'selectedDate', emit) |
||||||
|
|
||||||
|
const activeDates = useVModel(props, 'activeDates', emit) |
||||||
|
|
||||||
|
const days = computed(() => { |
||||||
|
if (props.isMondayFirst) { |
||||||
|
return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] |
||||||
|
} else { |
||||||
|
return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const currentMonthYear = computed(() => { |
||||||
|
return dayjs(pageDate.value).format('MMMM') |
||||||
|
}) |
||||||
|
|
||||||
|
// Generates all dates should be displayed in the calendar |
||||||
|
// Includes all blank days at the start and end of the month |
||||||
|
const dates = computed(() => { |
||||||
|
const startOfMonth = dayjs(pageDate.value).startOf('month') |
||||||
|
const dayOffset = +props.isMondayFirst |
||||||
|
const firstDayOfWeek = startOfMonth.day() |
||||||
|
const startDay = startOfMonth.subtract((firstDayOfWeek - dayOffset + 7) % 7, 'day') |
||||||
|
|
||||||
|
const datesArray = [] |
||||||
|
for (let i = 0; i < 42; i++) { |
||||||
|
datesArray.push(startDay.add(i, 'day')) |
||||||
|
} |
||||||
|
|
||||||
|
return datesArray |
||||||
|
}) |
||||||
|
|
||||||
|
// Used to check if two dates are the same |
||||||
|
const isSameDate = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => { |
||||||
|
if (!date1 || !date2) return false |
||||||
|
return date1.isSame(date2, 'day') |
||||||
|
} |
||||||
|
|
||||||
|
// Used in DatePicker for checking if the date is currently selected |
||||||
|
const isSelectedDate = (dObj: dayjs.Dayjs) => { |
||||||
|
if (!selectedDate.value) return false |
||||||
|
const propDate = dayjs(selectedDate.value) |
||||||
|
return props.selectedDate ? isSameDate(propDate, dObj) : false |
||||||
|
} |
||||||
|
|
||||||
|
const isDayInPagedMonth = (date: dayjs.Dayjs) => { |
||||||
|
return date.month() === dayjs(pageDate.value).month() |
||||||
|
} |
||||||
|
|
||||||
|
// Since we are using the same component for week picker and date picker we need to handle the date selection differently |
||||||
|
const handleSelectDate = (date: dayjs.Dayjs) => { |
||||||
|
if (!isDayInPagedMonth(date)) { |
||||||
|
pageDate.value = date |
||||||
|
emit('update:pageDate', date) |
||||||
|
} |
||||||
|
selectedDate.value = date |
||||||
|
emit('update:selectedDate', date) |
||||||
|
} |
||||||
|
|
||||||
|
// Used to check if a date is in the current month |
||||||
|
const isDateInCurrentMonth = (date: dayjs.Dayjs) => { |
||||||
|
return date.month() === dayjs(pageDate.value).month() |
||||||
|
} |
||||||
|
|
||||||
|
// Used to Check if an event is in the date |
||||||
|
const isActiveDate = (date: dayjs.Dayjs) => { |
||||||
|
return activeDates.value.some((d) => isSameDate(d, date)) |
||||||
|
} |
||||||
|
|
||||||
|
const emitDblClick = (date: dayjs.Dayjs) => { |
||||||
|
emit('dblClick', date) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="flex justify-center px-2 nc-date-week-header text-gray-700 text-sm py-2 font-semibold items-center"> |
||||||
|
{{ currentMonthYear }} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
:class="{ |
||||||
|
'rounded-lg': size === 'small', |
||||||
|
'rounded-y-xl': size !== 'small', |
||||||
|
}" |
||||||
|
class="max-w-[320px]" |
||||||
|
> |
||||||
|
<div class="px-2.5"> |
||||||
|
<div class="flex border-b-1 justify-between gap-0.5 border-gray-200"> |
||||||
|
<span |
||||||
|
v-for="(day, index) in days" |
||||||
|
:key="index" |
||||||
|
:class="{ |
||||||
|
'w-8 h-8 text-sm': size === 'medium', |
||||||
|
'text-xs w-6 h-6': size === 'small', |
||||||
|
}" |
||||||
|
class="flex items-center uppercase py-1 font-medium justify-center text-gray-500" |
||||||
|
>{{ day[0] }}</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="grid gap-x-0.5 gap-y-2 px-2.5 py-1 nc-date-week-grid-wrapper grid-cols-7"> |
||||||
|
<span |
||||||
|
v-for="(date, index) in dates" |
||||||
|
:key="index" |
||||||
|
:class="{ |
||||||
|
'bg-gray-300 border-1 !font-semibold': isSelectedDate(date) && isDayInPagedMonth(date), |
||||||
|
'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date), |
||||||
|
'text-gray-400': !isDateInCurrentMonth(date), |
||||||
|
'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 text-sm': size === 'medium', |
||||||
|
'h-6 w-6 text-xs': size === 'small', |
||||||
|
}" |
||||||
|
class="px-1 py-1.5 relative rounded border-transparent transition border-1 font-medium flex text-gray-700 items-center cursor-pointer justify-center" |
||||||
|
data-testid="nc-calendar-date" |
||||||
|
@click="handleSelectDate(date)" |
||||||
|
@dblclick="emitDblClick(date)" |
||||||
|
> |
||||||
|
<span |
||||||
|
v-if="isActiveDate(date)" |
||||||
|
:class="{ |
||||||
|
'h-1.25 w-1.25 top-0.5 right-0.5': size === 'small', |
||||||
|
'!border-white': isSelectedDate(date), |
||||||
|
'!border-brand-50': isSameDate(date, dayjs()), |
||||||
|
}" |
||||||
|
class="absolute z-2 h-1.5 top-1 right-1 w-1.5 transition border-1 rounded-full border-white bg-brand-500" |
||||||
|
></span> |
||||||
|
<span class="z-2"> |
||||||
|
{{ date.get('date') }} |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
Loading…
Reference in new issue