diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js index bc515cfdf..2b624b6d9 100644 --- a/app/javascript/dashboard/components/index.js +++ b/app/javascript/dashboard/components/index.js @@ -24,6 +24,7 @@ import SubmitButton from './buttons/FormSubmitButton'; import Tabs from './ui/Tabs/Tabs'; import TabsItem from './ui/Tabs/TabsItem'; import Thumbnail from './widgets/Thumbnail.vue'; +import DatePicker from './ui/DatePicker/DatePicker.vue'; const WootUIKit = { AvatarUploader, @@ -51,6 +52,7 @@ const WootUIKit = { Tabs, TabsItem, Thumbnail, + DatePicker, install(Vue) { const keys = Object.keys(this); keys.pop(); // remove 'install' from keys diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue new file mode 100644 index 000000000..cd2348945 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue @@ -0,0 +1,302 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue new file mode 100644 index 000000000..447a83bf3 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue @@ -0,0 +1,79 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue new file mode 100644 index 000000000..b9fe88993 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue @@ -0,0 +1,74 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue new file mode 100644 index 000000000..38d4dd76f --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue @@ -0,0 +1,41 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue new file mode 100644 index 000000000..828044e1c --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue @@ -0,0 +1,28 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue new file mode 100644 index 000000000..ee68e7341 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue @@ -0,0 +1,86 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue new file mode 100644 index 000000000..c448e3eb1 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue @@ -0,0 +1,172 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue new file mode 100644 index 000000000..ebfe9a374 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue @@ -0,0 +1,15 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue new file mode 100644 index 000000000..1f5e7224f --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue @@ -0,0 +1,86 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue new file mode 100644 index 000000000..c5ae54b6f --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue @@ -0,0 +1,71 @@ + + + diff --git a/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js b/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js new file mode 100644 index 000000000..85e41603f --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js @@ -0,0 +1,219 @@ +import { + startOfDay, + subDays, + endOfDay, + subMonths, + addMonths, + subYears, + addYears, + startOfMonth, + isSameMonth, + format, + startOfWeek, + addDays, + eachDayOfInterval, + endOfMonth, + isSameDay, + isWithinInterval, +} from 'date-fns'; + +// Constants for calendar and date ranges +export const calendarWeeks = [ + { id: 1, label: 'M' }, + { id: 2, label: 'T' }, + { id: 3, label: 'W' }, + { id: 4, label: 'T' }, + { id: 5, label: 'F' }, + { id: 6, label: 'S' }, + { id: 7, label: 'S' }, +]; + +export const dateRanges = [ + { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_7_DAYS', value: 'last7days' }, + { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_30_DAYS', value: 'last30days' }, + { + label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS', + value: 'last3months', + }, + { + label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS', + value: 'last6months', + }, + { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' }, + { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE', value: 'custom' }, +]; + +export const DATE_RANGE_TYPES = { + LAST_7_DAYS: 'last7days', + LAST_30_DAYS: 'last30days', + LAST_3_MONTHS: 'last3months', + LAST_6_MONTHS: 'last6months', + LAST_YEAR: 'lastYear', + CUSTOM_RANGE: 'custom', +}; + +export const CALENDAR_TYPES = { + START_CALENDAR: 'start', + END_CALENDAR: 'end', +}; + +export const CALENDAR_PERIODS = { + WEEK: 'week', + MONTH: 'month', + YEAR: 'year', +}; + +// Utility functions for date operations +export const monthName = currentDate => format(currentDate, 'MMMM'); +export const yearName = currentDate => format(currentDate, 'yyyy'); + +export const getIntlDateFormatForLocale = () => { + const year = 2222; + const month = 12; + const day = 15; + const date = new Date(year, month - 1, day); + const formattedDate = new Intl.DateTimeFormat(navigator.language).format( + date + ); + return formattedDate + .replace(`${year}`, 'yyyy') + .replace(`${month}`, 'MM') + .replace(`${day}`, 'dd'); +}; + +// Utility functions for calendar operations +export const chunk = (array, size) => + Array.from({ length: Math.ceil(array.length / size) }, (_, index) => + array.slice(index * size, index * size + size) + ); + +export const getWeeksForMonth = (date, weekStartsOn = 1) => { + const startOfTheMonth = startOfMonth(date); + const startOfTheFirstWeek = startOfWeek(startOfTheMonth, { weekStartsOn }); + const endOfTheLastWeek = addDays(startOfTheFirstWeek, 41); // Covering six weeks to fill the calendar + return chunk( + eachDayOfInterval({ start: startOfTheFirstWeek, end: endOfTheLastWeek }), + 7 + ); +}; + +export const moveCalendarDate = ( + calendar, + startCurrentDate, + endCurrentDate, + direction, + period +) => { + const adjustFunctions = { + month: { prev: subMonths, next: addMonths }, + year: { prev: subYears, next: addYears }, + }; + + const adjust = adjustFunctions[period][direction]; + + if (calendar === 'start') { + const newStart = adjust(startCurrentDate, 1); + return { start: newStart, end: endCurrentDate }; + } + const newEnd = adjust(endCurrentDate, 1); + return { start: startCurrentDate, end: newEnd }; +}; + +// Date comparison functions +export const isToday = (currentDate, date) => + date.getDate() === currentDate.getDate() && + date.getMonth() === currentDate.getMonth() && + date.getFullYear() === currentDate.getFullYear(); + +export const isCurrentMonth = (day, referenceDate) => + isSameMonth(day, referenceDate); + +export const isLastDayOfMonth = day => { + const lastDay = endOfMonth(day); + return day.getDate() === lastDay.getDate(); +}; + +export const dayIsInRange = (date, startDate, endDate) => { + if (!startDate || !endDate) { + return false; + } + // Normalize dates to ignore time differences + let startOfDayStart = startOfDay(startDate); + let startOfDayEnd = startOfDay(endDate); + // Swap if start is greater than end + if (startOfDayStart > startOfDayEnd) { + [startOfDayStart, startOfDayEnd] = [startOfDayEnd, startOfDayStart]; + } + // Check if the date is within the interval or is the same as the start date + return ( + isSameDay(date, startOfDayStart) || + isWithinInterval(date, { + start: startOfDayStart, + end: startOfDayEnd, + }) + ); +}; + +// Handling hovering states in date range pickers +export const isHoveringDayInRange = ( + day, + startDate, + endDate, + hoveredEndDate +) => { + if (endDate && hoveredEndDate && startDate <= hoveredEndDate) { + // Ensure the start date is not after the hovered end date + return isWithinInterval(day, { start: startDate, end: hoveredEndDate }); + } + return false; +}; + +export const isHoveringNextDayInRange = ( + day, + startDate, + endDate, + hoveredEndDate +) => { + if (startDate && !endDate && hoveredEndDate) { + // If a start date is selected, and we're hovering (but haven't clicked an end date yet) + const nextDay = addDays(day, 1); + return isWithinInterval(nextDay, { start: startDate, end: hoveredEndDate }); + } + if (startDate && endDate) { + // Normal range checking between selected start and end dates + const nextDay = addDays(day, 1); + return isWithinInterval(nextDay, { start: startDate, end: endDate }); + } + return false; +}; + +// Helper func to determine active date ranges based on user selection +export const getActiveDateRange = (range, currentDate) => { + const ranges = { + last7days: () => ({ + start: startOfDay(subDays(currentDate, 6)), + end: endOfDay(currentDate), + }), + last30days: () => ({ + start: startOfDay(subDays(currentDate, 29)), + end: endOfDay(currentDate), + }), + last3months: () => ({ + start: startOfDay(subMonths(currentDate, 3)), + end: endOfDay(currentDate), + }), + last6months: () => ({ + start: startOfDay(subMonths(currentDate, 6)), + end: endOfDay(currentDate), + }), + lastYear: () => ({ + start: startOfDay(subMonths(currentDate, 12)), + end: endOfDay(currentDate), + }), + custom: () => ({ start: currentDate, end: currentDate }), + }; + + return ( + ranges[range] || (() => ({ start: currentDate, end: currentDate })) + )(); +}; diff --git a/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js b/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js new file mode 100644 index 000000000..3510ee0f3 --- /dev/null +++ b/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js @@ -0,0 +1,309 @@ +import { + monthName, + yearName, + getIntlDateFormatForLocale, + getWeeksForMonth, + isToday, + isCurrentMonth, + isLastDayOfMonth, + dayIsInRange, + getActiveDateRange, + isHoveringDayInRange, + isHoveringNextDayInRange, + moveCalendarDate, + chunk, +} from '../DatePickerHelper'; + +describe('Date formatting functions', () => { + const testDate = new Date(2020, 4, 15); // May 15, 2020 + + beforeEach(() => { + jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US'); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('returns the correct month name from a date', () => { + expect(monthName(testDate)).toBe('May'); + }); + + it('returns the correct year from a date', () => { + expect(yearName(testDate)).toBe('2020'); + }); + + it('returns the correct date format for the current locale en-US', () => { + const expected = 'MM/dd/yyyy'; + expect(getIntlDateFormatForLocale()).toBe(expected); + }); + + it('returns the correct date format for the current locale en-IN', () => { + jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN'); + const expected = 'dd/MM/yyyy'; + expect(getIntlDateFormatForLocale()).toBe(expected); + }); +}); + +describe('chunk', () => { + const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + + it('correctly chunks an array into smaller arrays of given size', () => { + const expected = [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], + ]; + expect(chunk(array, 3)).toEqual(expected); + }); + + it('handles arrays that do not divide evenly by the chunk size', () => { + const expected = [[1, 2], [3, 4], [5, 6], [7, 8], [9]]; + expect(chunk(array, 2)).toEqual(expected); + }); +}); + +describe('getWeeksForMonth', () => { + it('returns the correct weeks array for a month starting on Monday', () => { + const date = new Date(2020, 3, 1); // April 2020 + const weeks = getWeeksForMonth(date, 1); + expect(weeks.length).toBe(6); + expect(weeks[0][0]).toEqual(new Date(2020, 2, 30)); // Check if first day of the first week is correct + }); +}); + +describe('moveCalendarDate', () => { + it('handles the year transition when moving the start date backward by one month from January', () => { + const startDate = new Date(2021, 0, 1); + const endDate = new Date(2021, 0, 31); + const result = moveCalendarDate( + 'start', + startDate, + endDate, + 'prev', + 'month' + ); + const expectedStartDate = new Date(2020, 11, 1); + expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString()); + expect(result.end.toISOString()).toEqual(endDate.toISOString()); + }); + + it('handles the year transition when moving the start date forward by one month from January', () => { + const startDate = new Date(2020, 0, 1); + const endDate = new Date(2020, 1, 31); + const result = moveCalendarDate( + 'start', + startDate, + endDate, + 'next', + 'month' + ); + const expectedStartDate = new Date(2020, 1, 1); + expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString()); + expect(result.end.toISOString()).toEqual(endDate.toISOString()); + }); + + it('handles the year transition when moving the end date forward by one month from December', () => { + const startDate = new Date(2021, 11, 1); + const endDate = new Date(2021, 11, 31); + const result = moveCalendarDate('end', startDate, endDate, 'next', 'month'); + const expectedEndDate = new Date(2022, 0, 31); + expect(result.start).toEqual(startDate); + expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString()); + }); + it('handles the year transition when moving the end date backward by one month from December', () => { + const startDate = new Date(2021, 11, 1); + const endDate = new Date(2021, 11, 31); + const result = moveCalendarDate('end', startDate, endDate, 'prev', 'month'); + const expectedEndDate = new Date(2021, 10, 30); + + expect(result.start).toEqual(startDate); + expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString()); + }); +}); + +describe('isToday', () => { + it('returns true if the dates are the same', () => { + const today = new Date(); + const alsoToday = new Date(today); + expect(isToday(today, alsoToday)).toBeTruthy(); + }); + + it('returns false if the dates are not the same', () => { + const today = new Date(); + const notToday = new Date( + today.getFullYear(), + today.getMonth(), + today.getDate() - 1 + ); + expect(isToday(today, notToday)).toBeFalsy(); + }); +}); + +describe('isCurrentMonth', () => { + const referenceDate = new Date(2020, 6, 15); // July 15, 2020 + + it('returns true if the day is in the same month as the reference date', () => { + const testDay = new Date(2020, 6, 1); + expect(isCurrentMonth(testDay, referenceDate)).toBeTruthy(); + }); + + it('returns false if the day is not in the same month as the reference date', () => { + const testDay = new Date(2020, 5, 30); + expect(isCurrentMonth(testDay, referenceDate)).toBeFalsy(); + }); +}); + +describe('isLastDayOfMonth', () => { + it('returns true if the day is the last day of the month', () => { + const testDay = new Date(2020, 6, 31); // July 31, 2020 + expect(isLastDayOfMonth(testDay)).toBeTruthy(); + }); + + it('returns false if the day is not the last day of the month', () => { + const testDay = new Date(2020, 6, 30); // July 30, 2020 + expect(isLastDayOfMonth(testDay)).toBeFalsy(); + }); +}); + +describe('dayIsInRange', () => { + it('returns true if the date is within the range', () => { + const start = new Date(2020, 1, 10); + const end = new Date(2020, 1, 20); + const testDate = new Date(2020, 1, 15); + expect(dayIsInRange(testDate, start, end)).toBeTruthy(); + }); + + it('returns true if the date is the same as the start date', () => { + const start = new Date(2020, 1, 10); + const end = new Date(2020, 1, 20); + const testDate = new Date(2020, 1, 10); + expect(dayIsInRange(testDate, start, end)).toBeTruthy(); + }); + + it('returns false if the date is outside the range', () => { + const start = new Date(2020, 1, 10); + const end = new Date(2020, 1, 20); + const testDate = new Date(2020, 1, 9); + expect(dayIsInRange(testDate, start, end)).toBeFalsy(); + }); +}); + +describe('isHoveringDayInRange', () => { + const startDate = new Date(2020, 6, 10); + const endDate = new Date(2020, 6, 20); + const hoveredEndDate = new Date(2020, 6, 15); + + it('returns true if the day is within the start and hovered end dates', () => { + const testDay = new Date(2020, 6, 12); + expect( + isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate) + ).toBeTruthy(); + }); + + it('returns false if the day is outside the hovered date range', () => { + const testDay = new Date(2020, 6, 16); + expect( + isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate) + ).toBeFalsy(); + }); +}); + +describe('isHoveringNextDayInRange', () => { + const startDate = new Date(2020, 6, 10); + const hoveredEndDate = new Date(2020, 6, 15); + + it('returns true if the next day after the given day is within the start and hovered end dates', () => { + const testDay = new Date(2020, 6, 14); + expect( + isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate) + ).toBeTruthy(); + }); + + it('returns false if the next day is outside the start and hovered end dates', () => { + const testDay = new Date(2020, 6, 15); + expect( + isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate) + ).toBeFalsy(); + }); +}); + +describe('getActiveDateRange', () => { + const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon + + beforeAll(() => { + // Mocking the current date to ensure consistency in tests + jest.useFakeTimers().setSystemTime(currentDate.getTime()); + }); + + afterAll(() => { + jest.useRealTimers(); + }); + + it('returns the correct range for "last7days"', () => { + const range = getActiveDateRange('last7days', new Date()); + const expectedStart = new Date(2020, 5, 9); + expectedStart.setHours(0, 0, 0, 0); + const expectedEnd = new Date(); + expectedEnd.setHours(23, 59, 59, 999); + + expect(range.start).toEqual(expectedStart); + expect(range.end).toEqual(expectedEnd); + }); + + it('returns the correct range for "last30days"', () => { + const range = getActiveDateRange('last30days', new Date()); + const expectedStart = new Date(2020, 4, 17); + expectedStart.setHours(0, 0, 0, 0); + const expectedEnd = new Date(); + expectedEnd.setHours(23, 59, 59, 999); + + expect(range.start).toEqual(expectedStart); + expect(range.end).toEqual(expectedEnd); + }); + + it('returns the correct range for "last3months"', () => { + const range = getActiveDateRange('last3months', new Date()); + const expectedStart = new Date(2020, 2, 15); + expectedStart.setHours(0, 0, 0, 0); + const expectedEnd = new Date(); + expectedEnd.setHours(23, 59, 59, 999); + + expect(range.start).toEqual(expectedStart); + expect(range.end).toEqual(expectedEnd); + }); + + it('returns the correct range for "last6months"', () => { + const range = getActiveDateRange('last6months', new Date()); + const expectedStart = new Date(2019, 11, 15); + expectedStart.setHours(0, 0, 0, 0); + const expectedEnd = new Date(); + expectedEnd.setHours(23, 59, 59, 999); + + expect(range.start).toEqual(expectedStart); + expect(range.end).toEqual(expectedEnd); + }); + + it('returns the correct range for "lastYear"', () => { + const range = getActiveDateRange('lastYear', new Date()); + const expectedStart = new Date(2019, 5, 15); + expectedStart.setHours(0, 0, 0, 0); + const expectedEnd = new Date(); + expectedEnd.setHours(23, 59, 59, 999); + + expect(range.start).toEqual(expectedStart); + expect(range.end).toEqual(expectedEnd); + }); + + it('returns the correct range for "custom date range"', () => { + const range = getActiveDateRange('custom', new Date()); + expect(range.start).toEqual(new Date(currentDate)); + expect(range.end).toEqual(new Date(currentDate)); + }); + + it('handles an unknown range label gracefully', () => { + const range = getActiveDateRange('unknown', new Date()); + expect(range.start).toEqual(new Date(currentDate)); + expect(range.end).toEqual(new Date(currentDate)); + }); +}); diff --git a/app/javascript/dashboard/i18n/locale/en/datePicker.json b/app/javascript/dashboard/i18n/locale/en/datePicker.json new file mode 100644 index 000000000..c7ef06880 --- /dev/null +++ b/app/javascript/dashboard/i18n/locale/en/datePicker.json @@ -0,0 +1,19 @@ +{ + "DATE_PICKER": { + "APPLY_BUTTON": "Apply", + "CLEAR_BUTTON": "Clear", + "DATE_RANGE_INPUT": { + "START": "Start Date", + "END": "End Date" + }, + "DATE_RANGE_OPTIONS": { + "TITLE": "DATE RANGE", + "LAST_7_DAYS": "Last 7 days", + "LAST_30_DAYS": "Last 30 days", + "LAST_3_MONTHS": "Last 3 months", + "LAST_6_MONTHS": "Last 6 months", + "LAST_YEAR": "Last year", + "CUSTOM_RANGE": "Custom date range" + } + } +} diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js index 81e0c5763..1858f4947 100644 --- a/app/javascript/dashboard/i18n/locale/en/index.js +++ b/app/javascript/dashboard/i18n/locale/en/index.js @@ -32,6 +32,7 @@ import whatsappTemplates from './whatsappTemplates.json'; import sla from './sla.json'; import inbox from './inbox.json'; import general from './general.json'; +import datePicker from './datePicker.json'; export default { ...advancedFilters, @@ -68,4 +69,5 @@ export default { ...whatsappTemplates, ...inbox, ...general, + ...datePicker, }; diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue index 123a921fc..16fbbcf40 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue @@ -1,24 +1,10 @@