Browse Source

feat(nc-gui): year selector fix: refactored month selector to support year selector fix: renamed DateSelector.vue to DateWeekSelector.vue

pull/7611/head
DarkPhoenix2704 10 months ago
parent
commit
1cd2bcb999
  1. 11
      packages/nc-gui/components/nc/DateWeekSelector.vue
  2. 176
      packages/nc-gui/components/nc/MonthYearSelector.vue
  3. 20
      packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
  4. 2
      packages/nc-gui/components/smartsheet/calendar/index.vue

11
packages/nc-gui/components/nc/DateSelector.vue → packages/nc-gui/components/nc/DateWeekSelector.vue

@ -45,7 +45,7 @@ const currentMonth = computed(() => {
}); });
const selectWeek = (date: Date) => { const selectWeek = (date: Date) => {
if(!date) return; if (!date) return;
const dayOffset = props.isMondayFirst ? 1 : 0; const dayOffset = props.isMondayFirst ? 1 : 0;
const dayOfWeek = (date.getDay() - dayOffset + 7) % 7; const dayOfWeek = (date.getDay() - dayOffset + 7) % 7;
const startDate = new Date(date); const startDate = new Date(date);
@ -101,7 +101,7 @@ const isDateInCurrentMonth = (date: Date) => {
// Used to check if two dates are the same // Used to check if two dates are the same
const isSameDate = (date1: Date, date2: Date) => { const isSameDate = (date1: Date, date2: Date) => {
if(!date1 || !date2) return false; if (!date1 || !date2) return false;
return date1.getDate() === date2.getDate() && return date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() && date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear(); date1.getFullYear() === date2.getFullYear();
@ -154,7 +154,8 @@ const paginate = (action: 'next' | 'prev') => {
}" class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center" }" class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
@click="handleSelectDate(date)" @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 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"> <span class="z-2">
{{ date.getDate() }} {{ date.getDate() }}
</span> </span>
@ -179,11 +180,11 @@ const paginate = (action: 'next' | 'prev') => {
height: 100%; height: 100%;
} }
.nc-selected-week-start:before{ .nc-selected-week-start:before {
@apply !border-l-2 !rounded-l-lg; @apply !border-l-2 !rounded-l-lg;
} }
.nc-selected-week-end:before{ .nc-selected-week-end:before {
width: 100%; width: 100%;
@apply !border-r-2 !rounded-r-lg; @apply !border-r-2 !rounded-r-lg;
} }

176
packages/nc-gui/components/nc/MonthYearSelector.vue

@ -0,0 +1,176 @@
<script lang="ts" setup>
interface Props {
selectedDate?: Date | null;
isDisabled?: boolean;
pageDate?: Date;
yearPicker?: boolean;
}
const emit = defineEmits(['update:selected-date', 'update:page-date']);
const props = withDefaults(defineProps<Props>(), {
selectedDate: null,
isDisabled: false,
pageDate: new Date(),
yearPicker: false,
});
const pageDate = useVModel(props, 'pageDate', emit);
const selectedDate = useVModel(props, 'selectedDate', emit);
const years = computed(() => {
const date = new Date(pageDate.value);
const startYear = date.getFullYear() - 5;
const endYear = date.getFullYear() + 6;
const years = [];
for (let i = startYear; i <= endYear; i++) {
years.push({
label: i,
value: new Date(i, 0, 1)
});
}
return years;
});
const currentYear = computed(() => {
return pageDate.value.getFullYear();
});
const months = computed(() => {
const date = new Date(pageDate.value);
return [
{
label: 'January',
value: new Date(date.getFullYear(), 0, 1)
},
{
label: 'February',
value: new Date(date.getFullYear(), 1, 1)
},
{
label: 'March',
value: new Date(date.getFullYear(), 2, 1)
},
{
label: 'April',
value: new Date(date.getFullYear(), 3, 1)
},
{
label: 'May',
value: new Date(date.getFullYear(), 4, 1)
},
{
label: 'June',
value: new Date(date.getFullYear(), 5, 1)
},
{
label: 'July',
value: new Date(date.getFullYear(), 6, 1)
},
{
label: 'August',
value: new Date(date.getFullYear(), 7, 1)
},
{
label: 'September',
value: new Date(date.getFullYear(), 8, 1)
},
{
label: 'October',
value: new Date(date.getFullYear(), 9, 1)
},
{
label: 'November',
value: new Date(date.getFullYear(), 10, 1)
},
{
label: 'December',
value: new Date(date.getFullYear(), 11, 1)
}
]
})
const compareDates = (date1: Date, date2: Date) => {
if (!date1 || !date2) return false;
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
}
const isMonthSelected = (date: Date) => {
if (!selectedDate.value) return false;
return compareDates(date, selectedDate.value);
}
const paginateMonth = (action: 'next' | 'prev') => {
const date = new Date(pageDate.value);
if (action === 'next') {
date.setFullYear(date.getFullYear() + 1);
} else {
date.setFullYear(date.getFullYear() - 1);
}
pageDate.value = date;
};
const paginateYear = (action: 'next' | 'prev') => {
const date = new Date(pageDate.value);
if (action === 'next') {
date.setFullYear(date.getFullYear() + 12);
} else {
date.setFullYear(date.getFullYear() - 12);
}
pageDate.value = date;
};
const paginate = (action: 'next' | 'prev') => {
if (props.yearPicker) {
paginateYear(action);
} else {
paginateMonth(action);
}
};
const compareYear = (date1: Date, date2: Date) => {
if (!date1 || !date2) return false;
return date1.getFullYear() === date2.getFullYear();
}
</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">{{ yearPicker ? 'Select Year' : currentYear }}</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="grid grid-cols-4 gap-2 p-2">
<span v-for="(month) in months" v-if="!yearPicker" :key="month.value" :class="{
'!bg-brand-50 !border-2 !border-brand-500' : isMonthSelected(month.value),
}"
class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
@click="selectedDate = month.value"
>
{{ month.label.slice(0, 3) }}
</span>
<span v-for="(year) in years" v-if="yearPicker" :key="year" :class="{
'!bg-brand-50 !border-2 !border-brand-500' : compareYear(year.value, selectedDate)
}"
class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
@click="selectedDate = year.value"
>
{{ year.label }}
</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
</style>

20
packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@ -6,7 +6,7 @@ const props = defineProps<{
visible: boolean visible: boolean
}>() }>()
const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('day' as const)) const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('month' as const))
const {t} = useI18n() const {t} = useI18n()
@ -60,8 +60,11 @@ const selectedDate = ref(null);
'w-1/4 min-w-[22.1rem]': props.visible, 'w-1/4 min-w-[22.1rem]': props.visible,
'transition-all': true, 'transition-all': true,
}" class="h-full border-l-1 border-gray-200"> }" class="h-full border-l-1 border-gray-200">
<NcDateSelector v-if="activeCalendarView === ('day' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" :active-dates="activeDates" /> <NcDateWeekSelector 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" /> <NcDateWeekSelector v-else-if="activeCalendarView === ('week' as const)" v-model:page-date="pageDate" week-picker v-model:selected-week="selectedDate" />
<NcMonthYearSelector v-else-if="activeCalendarView === ('month' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" />
<NcMonthYearSelector v-else-if="activeCalendarView === ('year' as const)" year-picker v-model:page-date="pageDate" v-model:selected-date="selectedDate" />
<div class="px-4 flex flex-col gap-y-6 pt-4"> <div class="px-4 flex flex-col gap-y-6 pt-4">
<div class="flex justify-between items-center"> <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>
@ -73,8 +76,11 @@ const selectedDate = ref(null);
</template> </template>
</a-input> </a-input>
<div class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"> <div :class="{
<LazySmartsheetCalendarRecordCard v-for="(x, id) in Array(4)" :color="x%2 === 0 ? 'maroon': 'blue'" 'h-[calc(100vh-40rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
'h-[calc(100vh-29rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const),
}" class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height">
<LazySmartsheetCalendarRecordCard v-for="(x, id) in Array(50)" :color="x%2 === 0 ? 'maroon': 'blue'"
date="27 April 2003" name="Saturday HackNight" @click="emit('expand-record', id)"/> date="27 April 2003" name="Saturday HackNight" @click="emit('expand-record', id)"/>
</div> </div>
</div> </div>
@ -82,7 +88,5 @@ const selectedDate = ref(null);
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.nc-calendar-top-height {
height: calc(100vh - 40rem);
}
</style> </style>

2
packages/nc-gui/components/smartsheet/calendar/index.vue

@ -33,7 +33,7 @@ provide(IsKanbanInj, ref(false))
provide(IsCalendarInj, ref(true)) provide(IsCalendarInj, ref(true))
provide(CalendarViewTypeInj, ref('day' as const)) provide(CalendarViewTypeInj, ref('year' as const))
const showSideMenu = ref(true) const showSideMenu = ref(true)

Loading…
Cancel
Save