Commit 6084522c authored by Kushal Pandya's avatar Kushal Pandya

Fix timeframe extension for weeks view

Add support for handling custom length in `getTimeframeForWeeksView`.
Make `extendTimeframeForAvailableWidth` resilient to medium window size.
parent a055cb9c
......@@ -12,6 +12,8 @@ export const SCROLL_BAR_SIZE = 15;
export const EPIC_HIGHLIGHT_REMOVE_AFTER = 3000;
export const DAYS_IN_WEEK = 7;
export const PRESET_TYPES = {
QUARTERS: 'QUARTERS',
MONTHS: 'MONTHS',
......
import { newDate, getTimeframeWindowFrom, totalDaysInMonth } from '~/lib/utils/datetime_utility';
import { PRESET_TYPES, PRESET_DEFAULTS, EXTEND_AS, TIMELINE_CELL_MIN_WIDTH } from '../constants';
import {
PRESET_TYPES,
PRESET_DEFAULTS,
EXTEND_AS,
TIMELINE_CELL_MIN_WIDTH,
DAYS_IN_WEEK,
} from '../constants';
const monthsForQuarters = {
1: [0, 1, 2],
......@@ -173,19 +179,26 @@ export const extendTimeframeForMonthsView = (initialDate = new Date(), length) =
*
* @param {Date} initialDate
*/
export const getTimeframeForWeeksView = (initialDate = new Date()) => {
export const getTimeframeForWeeksView = (initialDate = new Date(), length) => {
const timeframe = [];
const startDate = newDate(initialDate);
startDate.setHours(0, 0, 0, 0);
const dayOfWeek = startDate.getDay();
const daysToFirstDayOfPrevWeek = dayOfWeek + 14;
const timeframe = [];
// When length is not provided
// We need to provide standard
// timeframe as per feature specs (see block comment above)
if (!length) {
const dayOfWeek = startDate.getDay();
const daysToFirstDayOfPrevWeek = dayOfWeek + DAYS_IN_WEEK * 2;
// Move startDate to first day (Sunday) of 2 weeks prior
startDate.setDate(startDate.getDate() - daysToFirstDayOfPrevWeek);
}
// Move startDate to first day (Sunday) of 2 weeks prior
startDate.setDate(startDate.getDate() - daysToFirstDayOfPrevWeek);
const rangeLength = length || PRESET_DEFAULTS.WEEKS.TIMEFRAME_LENGTH;
// Iterate for the length of this preset
for (let i = 0; i < PRESET_DEFAULTS.WEEKS.TIMEFRAME_LENGTH; i += 1) {
for (let i = 0; i < rangeLength; i += 1) {
// Push date to timeframe only when day is
// first day (Sunday) of the week
timeframe.push(newDate(startDate));
......@@ -201,13 +214,14 @@ export const extendTimeframeForWeeksView = (initialDate = new Date(), length) =>
const startDate = newDate(initialDate);
if (length < 0) {
// When length is negative, we need to go
// back as many weeks in time as value of length
startDate.setDate(startDate.getDate() + (length + 1) * 7);
} else {
startDate.setDate(startDate.getDate() + 7);
startDate.setDate(startDate.getDate());
}
const timeframe = getTimeframeForWeeksView(startDate, length + 1);
return timeframe.slice(1);
return getTimeframeForWeeksView(startDate, Math.abs(length) + 1);
};
export const extendTimeframeForPreset = ({
......@@ -258,7 +272,14 @@ export const extendTimeframeForAvailableWidth = ({
// We double the increaseLengthBy to make sure there's enough room
// to perform horizontal scroll without triggering timeframe extension
// on initial page load.
const increaseLengthBy = (timeframeLength - timeframe.length) * 2;
let increaseLengthBy = timeframeLength - timeframe.length;
// Handle a case where window size is leading to
// increaseLength between 1 & 3 which is not big
// enough for extendTimeframeFor*****View methods
if (increaseLengthBy > 0 && increaseLengthBy <= 3) {
increaseLengthBy += 4; // Equalize by adding 2 columns on each end
}
// If there are timeframe items to be added
// to make timeline scrollable, do as follows.
......
......@@ -70,12 +70,13 @@ export const mockTimeframeMonthsAppend = [
];
export const mockTimeframeWeeksPrepend = [
new Date(2017, 10, 5),
new Date(2017, 10, 12),
new Date(2017, 10, 19),
new Date(2017, 10, 26),
new Date(2017, 11, 3),
new Date(2017, 11, 10),
new Date(2017, 11, 17),
new Date(2017, 11, 24),
];
export const mockTimeframeWeeksAppend = [
new Date(2018, 0, 28),
......@@ -84,6 +85,7 @@ export const mockTimeframeWeeksAppend = [
new Date(2018, 1, 18),
new Date(2018, 1, 25),
new Date(2018, 2, 4),
new Date(2018, 2, 11),
];
export const mockEpic = {
......
......@@ -183,7 +183,7 @@ describe('getTimeframeForWeeksView', () => {
let timeframe;
beforeEach(() => {
timeframe = getTimeframeForWeeksView(new Date(2018, 0, 1));
timeframe = getTimeframeForWeeksView(mockTimeframeInitialDate);
});
it('returns timeframe with total of 7 weeks', () => {
......@@ -215,6 +215,24 @@ describe('getTimeframeForWeeksView', () => {
expect(timeframeItem.getMonth()).toBe(expectedMonth.month);
expect(timeframeItem.getDate()).toBe(expectedMonth.date);
});
it('returns timeframe starting on a specific date when provided with additional `length` param', () => {
const initialDate = new Date(2018, 0, 7);
timeframe = getTimeframeForWeeksView(initialDate, 5);
const expectedTimeframe = [
initialDate,
new Date(2018, 0, 14),
new Date(2018, 0, 21),
new Date(2018, 0, 28),
new Date(2018, 1, 4),
];
expect(timeframe.length).toBe(5);
expectedTimeframe.forEach((timeframeItem, index) => {
expect(timeframeItem.getTime()).toBe(expectedTimeframe[index].getTime());
});
});
});
describe('extendTimeframeForWeeksView', () => {
......@@ -272,9 +290,9 @@ describe('extendTimeframeForAvailableWidth', () => {
timeframeEnd,
});
expect(timeframe.length).toBe(16);
expect(timeframe[0].getTime()).toBe(1498867200000); // 1 July 2017
expect(timeframe[timeframe.length - 1].getTime()).toBe(1540944000000); // 31 Oct 2018
expect(timeframe.length).toBe(12);
expect(timeframe[0].getTime()).toBe(1504224000000); // 1 Sep 2017
expect(timeframe[timeframe.length - 1].getTime()).toBe(1535673600000); // 31 Aug 2018
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment