clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-04-29 14:06:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nc-gui): better handling of date change

Browse Source
This commit is contained in:
DarkPhoenix2704
2024-02-20 07:15:44 +00:00
parent 9fd4502489
commit d2bcbd7a57
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/nc-gui/components/nc/DateWeekSelector.vue
View File

@@ -7,6 +7,7 @@ interface Props {
activeDates?: Date[];
isMondayFirst?: boolean;
weekPicker?: boolean;
disablePagination?: boolean;
selectedWeek?: {
start: Date;
end: Date;
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
isMondayFirst: false,
pageDate: new Date(),
weekPicker: false,
disablePagination: false,
activeDates: [],
selectedWeek: null,
});
@@ -84,11 +86,19 @@ const isSelectedDate = (dObj: Date) => {
return props.selectedDate ? isSameDate(propDate, dObj) : false;
}
const isDayInPagedMonth = (date: Date) => {
return date.getMonth() === pageDate.value.getMonth();
}
// Since we are using the same component for week picker and date picker we need to handle the date selection differently
const handleSelectDate = (date: Date) => {
if (props.weekPicker) {
selectWeek(date);
} else {
if (!isDayInPagedMonth(date)) {
pageDate.value = new Date(date);
emit('update:page-date', date);
}
selectedDate.value = date;
emit('update:selected-date', date);
}
@@ -124,16 +134,20 @@ const paginate = (action: 'next' | 'prev') => {
emit('update:page-date', newDate);
};
</script>
<template>
<div class="p-4 flex flex-col gap-4">
<div class="flex justify-between items-center">
<NcButton size="small" type="secondary" @click="paginate('prev')">
<div class="p-4 flex flex-col gap-4 ">
<div :class="{
'justify-center': disablePagination,
'justify-between': !disablePagination,
}" class="flex items-center">
<NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4"/>
</NcButton>
<span class="font-bold text-gray-700">{{ currentMonth }}</span>
<NcButton size="small" type="secondary" @click="paginate('next')">
<NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4"/>
</NcButton>
</div>
@@ -144,7 +158,7 @@ const paginate = (action: 'next' | 'prev') => {
<div class="grid grid-cols-7 gap-2 p-2">
<span v-for="(date) in dates" :key="date" :class="{
'rounded-lg' : !weekPicker,
'bg-brand-50 border-2 !border-brand-500' : isSelectedDate(date) && !weekPicker,
'bg-brand-50 border-2 !border-brand-500' : isSelectedDate(date) && !weekPicker && isDayInPagedMonth(date),
'hover:(border-1 border-gray-200 bg-gray-100)' : !isSelectedDate(date) && !weekPicker,
'nc-selected-week z-1': isDateInSelectedWeek(date) && weekPicker,
'text-gray-400': !isDateInCurrentMonth(date),