github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): refactor day selector to support week selection

pull/7611/head
DarkPhoenix2704 9 months ago
parent
ba8d1eb780
commit
9476e18b84
3 changed files with 201 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 217
      packages/nc-gui/components/nc/DatePicker.vue
  2. 191
      packages/nc-gui/components/nc/DateSelector.vue
  3. 17
      packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

217
packages/nc-gui/components/nc/DatePicker.vue
Unescape View File

@ -1,217 +0,0 @@
<script setup lang="ts">
interface Props {
selectedDate?: Date | null;
isDisabled?: boolean;
pageDate?: Date;
activeDates?: Date[];
isMondayFirst?: boolean;
weekPicker?: boolean;
startDate?: Date | null;
endDate?: Date | null;
}
const emit = defineEmits(['change', 'update:selected-date', 'update:page-date', 'update:start-date', 'update:end-date']);
const props = withDefaults(defineProps<Props>(), {
selectedDate: null,
isDisabled: false,
isMondayFirst: false,
pageDate: new Date(),
weekPicker: false,
activeDates: [],
startDate: null,
endDate: null,
});
const pageDate = useVModel(props, 'pageDate', emit);
const selectedDate = useVModel(props, 'selectedDate', emit);
const activeDates = useVModel(props, 'activeDates', emit);
const startDate = useVModel(props, 'startDate', emit);
const endDate = useVModel(props, 'endDate', emit);
const days = computed(() => {
if (props.isMondayFirst) {
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
} else {
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
}
})
const currentMonth = computed(() => {
return pageDate.value.toLocaleString('default', { month: 'long' }) + ' ' + pageDate.value.getFullYear();
});
const getDay = (date: Date) => {
return date.getDay();
};
const blankDaysAtStart = computed((): any => {
const date = new Date(pageDate.value);
const dObj = new Date(date.getFullYear(), date.getMonth(), 1, date.getHours(), date.getMinutes());
const blankDaysCount = props.isMondayFirst
? getDay(dObj) > 0
? getDay(dObj) - 1
: 6
: getDay(dObj);
const blankDays = [];
for (let i = 1; i <= blankDaysCount; i++) {
const blankDayDate = new Date(dObj);
blankDayDate.setDate(dObj.getDate() - i);
const dayOfMonth = blankDayDate.getDate();
blankDays.unshift({ day: dayOfMonth });
}
return blankDays;
});
const blankDaysAtEnd = computed((): any => {
const date = new Date(pageDate.value);
const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
const daysInWeek = 7;
const lastDayOfWeek = props.isMondayFirst ? 6 : 0;
const blankDaysCount = props.isMondayFirst
? lastDayOfWeek - (lastDayOfMonth.getDay() % daysInWeek)
: (daysInWeek - 1) - lastDayOfMonth.getDay();
const blankDays = [];
for (let i = 1; i <= blankDaysCount; i++) {
const blankDayDate = new Date(lastDayOfMonth);
blankDayDate.setDate(lastDayOfMonth.getDate() + i);
const dayOfMonth = blankDayDate.getDate();
blankDays.push({ day: dayOfMonth });
}
return blankDays;
});
function isSelectedDate(dObj: Date): boolean {
if(!selectedDate.value) return false;
const propDate = new Date(selectedDate.value);
return props.selectedDate ? compareDates(propDate, dObj) : false;
}
const isActiveDate = (date: Date) => {
return activeDates.value.some((d) => compareDates(d, date));
};
const compareDates = (date1: Date, date2: Date) => {
return date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear();
};
const daysInMonth = (year: number, month: number) => {
return new Date(year, month + 1, 0).getDate();
};
const setDate = (date: Date, day: number) => {
date.setDate(day);
};
interface DateObj {
date: number;
isSelected: boolean;
timestamp: number;
hasEvent: boolean;
inSelectedWeek: boolean;
}
const monthDays = computed((): DateObj[] => {
const d = new Date(pageDate.value);
const tDays: DateObj[] = [];
const dObj = new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes());
const t = daysInMonth(dObj.getFullYear(), dObj.getMonth());
for (let i = 0; i < t; i += 1) {
tDays.push({
timestamp: dObj.getTime(),
date: dObj.getDate(),
isSelected: isSelectedDate(dObj),
hasEvent: isActiveDate(dObj),
inSelectedWeek: false,
});
setDate(dObj, (dObj.getDate() + 1));
}
return tDays;
});
const paginateMonth = (direction: 'next' | 'prev') => {
const newDate = new Date(pageDate.value);
if (direction === 'next') {
newDate.setMonth(newDate.getMonth() + 1);
} else {
newDate.setMonth(newDate.getMonth() - 1);
}
pageDate.value = newDate;
emit('update:page-date', newDate);
};
const selectDate = (day: number) => {
if(props.weekPicker) {
const date = new Date(pageDate.value.getFullYear(), pageDate.value.getMonth(), day)
if(!startDate.value) {
console.log('setting start date')
startDate.value = date;
console.log(startDate.value)
emit('update:start-date', date);
} else if(!endDate.value) {
endDate.value = date;
emit('update:end-date', date);
} else {
startDate.value = date;
endDate.value = null;
emit('update:start-date', date);
emit('update:end-date', null);
}
} else {
const date = new Date(pageDate.value);
date.setDate(day);
selectedDate.value = date;
emit('update:selected-date', date);
}
};
</script>
<template>
<div class="p-4 flex flex-col gap-4">
<div class="flex justify-between items-center">
<NcButton type="secondary" size="small" @click="paginateMonth('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
<span class="font-bold text-gray-700">{{ currentMonth }}</span>
<NcButton type="secondary" size="small" @click="paginateMonth('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
</div>
<div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
<div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">
<span v-for="day in days" class="h-9 flex items-center justify-center w-9 text-gray-500">{{ day }}</span>
</div>
<div class="flex flex-row flex-wrap gap-2 p-2">
<span v-for="day in blankDaysAtStart" class="h-9 w-9 px-1 py-2 text-gray-400 flex items-center justify-center">{{day.day}}</span>
<span v-for="day in monthDays" :key="day.timestamp" :class="{
'rounded-lg' : !weekPicker,
'bg-brand-50 border-2 !border-brand-500' : day.isSelected && !weekPicker,
'hover:(border-1 border-gray-200 bg-gray-100)' : !day.isSelected && !weekPicker,
'border-y-2 border-brand-50 !border-brand-500': day.inSelectedWeek && weekPicker,
}" class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
@click="selectDate(day.date)"
>
<span v-if="day.hasEvent" class="absolute h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
{{day.date}}
</span>
<span v-for="day in blankDaysAtEnd" class="h-9 w-9 px-1 py-2 text-gray-400 flex items-center justify-center">{{day.day}}</span>
</div>
</div>
</div>
</template>
<style scoped lang="scss"></style>

191
packages/nc-gui/components/nc/DateSelector.vue
Unescape View File

@ -0,0 +1,191 @@
<script lang="ts" setup>
interface Props {
selectedDate?: Date | null;
isDisabled?: boolean;
pageDate?: Date;
activeDates?: Date[];
isMondayFirst?: boolean;
weekPicker?: boolean;
selectedWeek?: {
start: Date;
end: Date;
} | null
}
const emit = defineEmits(['change', 'update:selected-date', 'update:page-date', 'update:selected-week']);
const props = withDefaults(defineProps<Props>(), {
selectedDate: null,
isDisabled: false,
isMondayFirst: false,
pageDate: new Date(),
weekPicker: false,
activeDates: [],
selectedWeek: null,
});
// 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 selectedWeek = useVModel(props, 'selectedWeek', emit);
const days = computed(() => {
if (props.isMondayFirst) {
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
} else {
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
}
})
// Used to display the current month and year
const currentMonth = computed(() => {
return pageDate.value.toLocaleString('default', {month: 'long'}) + ' ' + pageDate.value.getFullYear();
});
const selectWeek = (date: Date) => {
if(!date) return;
const dayOffset = props.isMondayFirst ? 1 : 0;
const dayOfWeek = (date.getDay() - dayOffset + 7) % 7;
const startDate = new Date(date);
startDate.setDate(date.getDate() - dayOfWeek);
selectedWeek.value = {
start: startDate,
end: new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 6)
};
}
// 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 = new Date(pageDate.value.getFullYear(), pageDate.value.getMonth(), 1);
const dayOffset = props.isMondayFirst ? 1 : 0;
const dayOfWeek = (startOfMonth.getDay() - dayOffset + 7) % 7;
startOfMonth.setDate(startOfMonth.getDate() - dayOfWeek);
const datesArray = [];
while (datesArray.length < 42) {
datesArray.push(new Date(startOfMonth));
startOfMonth.setDate(startOfMonth.getDate() + 1);
}
return datesArray;
});
// Check if the date is in the selected week
const isDateInSelectedWeek = (date: Date) => {
if (!selectedWeek.value) return false;
return date >= selectedWeek.value.start && date <= selectedWeek.value.end;
}
// Used in DatePicker for checking if the date is currently selected
const isSelectedDate = (dObj: Date) => {
if (!selectedDate.value) return false;
const propDate = new Date(selectedDate.value);
return props.selectedDate ? isSameDate(propDate, dObj) : false;
}
// 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 {
selectedDate.value = date;
emit('update:selected-date', date);
}
};
// Used to check if a date is in the current month
const isDateInCurrentMonth = (date: Date) => {
return date.getMonth() === pageDate.value.getMonth();
};
// Used to check if two dates are the same
const isSameDate = (date1: Date, date2: Date) => {
if(!date1 || !date2) return false;
return date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear();
};
// Used to Check if an event is in the date
const isActiveDate = (date: Date) => {
return activeDates.value.some((d) => isSameDate(d, date));
};
// Paginate the calendar
const paginate = (action: 'next' | 'prev') => {
const newDate = new Date(pageDate.value);
if (action === 'next') {
newDate.setMonth(newDate.getMonth() + 1);
} else {
newDate.setMonth(newDate.getMonth() - 1);
}
pageDate.value = newDate;
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')">
<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')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4"/>
</NcButton>
</div>
<div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
<div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">
<span v-for="day in days" class="h-9 flex items-center justify-center w-9 text-gray-500">{{ day }}</span>
</div>
<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,
'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),
'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
}" class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
@click="handleSelectDate(date)"
>
<span v-if="isActiveDate(date)" class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
<span class="z-2">
{{ date.getDate() }}
</span>
</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.nc-selected-week {
@apply relative;
}
.nc-selected-week:before {
@apply absolute top-0 left-0 w-full h-full border-y-2 bg-brand-50 border-brand-500;
content: '';
width: 124%;
height: 100%;
}
.nc-selected-week-start:before{
@apply !border-l-2 !rounded-l-lg;
}
.nc-selected-week-end:before{
width: 100%;
@apply !border-r-2 !rounded-r-lg;
}
</style>

17
packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
Unescape View File

@ -1,21 +1,19 @@
<script setup lang="ts">
import {CalendarViewTypeInj} from "#imports";
import { CalendarViewTypeInj } from "#imports";
const props = defineProps<{
visible: boolean
}>()
const activeCalendarView = inject(CalendarViewTypeInj, ref('month' as const))
const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('day' as const))
const {t} = useI18n()
const emit = defineEmits(['expand-record']);
const calendarViewType = inject(CalendarViewTypeInj, ref())
const options = computed(() => {
switch (calendarViewType.value) {
switch (activeCalendarView.value) {
case 'day' as const:
return [
{label: 'in this day', value: 'day'},
@ -47,6 +45,10 @@ const options = computed(() => {
}
})
const pageDate = ref(new Date())
const activeDates = ref([new Date()])
const selectedDate = ref(null);
@ -58,10 +60,11 @@ const options = computed(() => {
'w-1/4 min-w-[22.1rem]': props.visible,
'transition-all': true,
}" class="h-full border-l-1 border-gray-200">
<NcDatePicker />
<NcDateSelector v-if="activeCalendarView === ('day' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" :active-dates="activeDates" />
<NcDateSelector v-else-if="activeCalendarView === ('week' as const)" v-model:page-date="pageDate" week-picker v-model:selected-week="selectedDate" />
<div class="px-4 flex flex-col gap-y-6 pt-4">
<div class="flex justify-between items-center">
<span class="text-2xl font-bold">{{ t('objects.records') }}</span>
<span class="text-2xl font-bold">{{ t('objects.Records') }}</span>
<NcSelect :options="options" value="all records"/>
</div>
<a-input class="!rounded-lg !border-gray-200 !px-4 !py-2" placeholder="Search your records">

Write Preview
Loading…
Cancel
Save