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

packages/nc-gui/components/nc/DatePicker.vue

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

packages/nc-gui/components/nc/DateSelector.vue

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

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

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