Update to handle presetType

ee/app/assets/javascripts/roadmap/store/roadmap_store.js

 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { parsePikadayDate } from '~/lib/utils/datefix';
 
+import { PRESET_TYPES } from '../constants';
+
 export default class RoadmapStore {
-  constructor(groupId, timeframe) {
+  constructor(groupId, timeframe, presetType) {
     this.state = {};
     this.state.epics = [];
     this.state.currentGroupId = groupId;
     this.state.timeframe = timeframe;
 
-    this.firstTimeframeItem = this.state.timeframe[0];
+    this.presetType = presetType;
+    this.initTimeframeThreshold();
+  }
 
-    this.lastTimeframeItem = this.state.timeframe[this.state.timeframe.length - 1];
+  initTimeframeThreshold() {
+    const lastTimeframeIndex = this.state.timeframe.length - 1;
+    if (this.presetType === PRESET_TYPES.QUARTERS) {
+      this.timeframeStartDate = this.state.timeframe[0].range[0];
+      this.timeframeEndDate = this.state.timeframe[lastTimeframeIndex].range[2];
+    } else if (this.presetType === PRESET_TYPES.MONTHS) {
+      this.timeframeStartDate = this.state.timeframe[0];
+      this.timeframeEndDate = this.state.timeframe[lastTimeframeIndex];
+    } else if (this.presetType === PRESET_TYPES.WEEKS) {
+      this.timeframeStartDate = this.state.timeframe[0];
+      this.timeframeEndDate = new Date(this.state.timeframe[lastTimeframeIndex].getTime());
+      this.timeframeEndDate.setDate(this.timeframeEndDate.getDate() + 7);
+    }
   }
 
   setEpics(epics) {
     this.state.epics = epics.map(
-      epic => RoadmapStore.formatEpicDetails(epic, this.firstTimeframeItem, this.lastTimeframeItem),
+      epic => RoadmapStore.formatEpicDetails(epic, this.timeframeStartDate, this.timeframeEndDate),
     );
   }
 
@@ -36,17 +52,17 @@ export default class RoadmapStore {
    * in case start or end dates are unavailable.
    *
    * @param {Object} rawEpic
-   * @param {Date} firstTimeframeItem
-   * @param {Date} lastTimeframeItem
+   * @param {Date} timeframeStartDate
+   * @param {Date} timeframeEndDate
    */
-  static formatEpicDetails(rawEpic, firstTimeframeItem, lastTimeframeItem) {
+  static formatEpicDetails(rawEpic, timeframeStartDate, timeframeEndDate) {
     const epicItem = convertObjectPropsToCamelCase(rawEpic);
 
     if (rawEpic.start_date) {
       // If startDate is present
       const startDate = parsePikadayDate(rawEpic.start_date);
 
-      if (startDate <= firstTimeframeItem) {
+      if (startDate <= timeframeStartDate) {
         // If startDate is less than first timeframe item
         // startDate is out of range;
         epicItem.startDateOutOfRange = true;
@@ -54,7 +70,7 @@ export default class RoadmapStore {
         epicItem.originalStartDate = startDate;
         // Use startDate object to set a proxy date so
         // that timeline bar can render it.
-        epicItem.startDate = new Date(firstTimeframeItem.getTime());
+        epicItem.startDate = new Date(timeframeStartDate.getTime());
       } else {
         // startDate is within timeframe range
         epicItem.startDate = startDate;
@@ -63,7 +79,7 @@ export default class RoadmapStore {
       // Start date is not available
       epicItem.startDateUndefined = true;
       // Set proxy date so that timeline bar can render it.
-      epicItem.startDate = new Date(firstTimeframeItem.getTime());
+      epicItem.startDate = new Date(timeframeStartDate.getTime());
     }
 
     // Same as above but for endDate
@@ -71,16 +87,16 @@ export default class RoadmapStore {
     // but we're keeping it here for the sake of simplicity.
     if (rawEpic.end_date) {
       const endDate = parsePikadayDate(rawEpic.end_date);
-      if (endDate >= lastTimeframeItem) {
+      if (endDate >= timeframeEndDate) {
         epicItem.endDateOutOfRange = true;
         epicItem.originalEndDate = endDate;
-        epicItem.endDate = new Date(lastTimeframeItem.getTime());
+        epicItem.endDate = new Date(timeframeEndDate.getTime());
       } else {
         epicItem.endDate = endDate;
       }
     } else {
       epicItem.endDateUndefined = true;
-      epicItem.endDate = new Date(lastTimeframeItem.getTime());
+      epicItem.endDate = new Date(timeframeEndDate.getTime());
     }
 
     return epicItem;

spec/javascripts/roadmap/store/roadmap_store_spec.js

 import RoadmapStore from 'ee/roadmap/store/roadmap_store';
-import { mockGroupId, mockTimeframe, rawEpics } from '../mock_data';
+import { PRESET_TYPES } from 'ee/roadmap/constants';
+import { mockGroupId, mockTimeframeMonths, rawEpics } from '../mock_data';
 
 describe('RoadmapStore', () => {
   let store;
 
   beforeEach(() => {
-    store = new RoadmapStore(mockGroupId, mockTimeframe);
+    store = new RoadmapStore(mockGroupId, mockTimeframeMonths, PRESET_TYPES.MONTHS);
   });
 
   describe('constructor', () => {
@@ -13,9 +14,10 @@ describe('RoadmapStore', () => {
       expect(store.state).toBeDefined();
       expect(Array.isArray(store.state.epics)).toBe(true);
       expect(store.state.currentGroupId).toBe(mockGroupId);
-      expect(store.state.timeframe).toBe(mockTimeframe);
-      expect(store.firstTimeframeItem).toBe(store.state.timeframe[0]);
-      expect(store.lastTimeframeItem).toBe(store.state.timeframe[store.state.timeframe.length - 1]);
+      expect(store.state.timeframe).toBe(mockTimeframeMonths);
+      expect(store.presetType).toBe(PRESET_TYPES.MONTHS);
+      expect(store.timeframeStartDate).toBeDefined();
+      expect(store.timeframeEndDate).toBeDefined();
     });
   });
 
@@ -34,7 +36,7 @@ describe('RoadmapStore', () => {
 
   describe('getTimeframe', () => {
     it('gets timeframe from store state', () => {
-      expect(store.getTimeframe()).toBe(mockTimeframe);
+      expect(store.getTimeframe()).toBe(mockTimeframeMonths);
     });
   });
 
@@ -55,12 +57,12 @@ describe('RoadmapStore', () => {
       });
       const epic = RoadmapStore.formatEpicDetails(
         rawEpicWithoutSD,
-        store.firstTimeframeItem,
-        store.lastTimeframeItem,
+        store.timeframeStartDate,
+        store.timeframeEndDate,
       );
       expect(epic.id).toBe(rawEpic.id);
       expect(epic.startDateUndefined).toBe(true);
-      expect(epic.startDate.getTime()).toBe(store.firstTimeframeItem.getTime());
+      expect(epic.startDate.getTime()).toBe(store.timeframeStartDate.getTime());
     });
 
     it('returns formatted Epic object with endDateUndefined and proxy date set when end date is not available', () => {
@@ -69,12 +71,12 @@ describe('RoadmapStore', () => {
       });
       const epic = RoadmapStore.formatEpicDetails(
         rawEpicWithoutED,
-        store.firstTimeframeItem,
-        store.lastTimeframeItem,
+        store.timeframeStartDate,
+        store.timeframeEndDate,
       );
       expect(epic.id).toBe(rawEpic.id);
       expect(epic.endDateUndefined).toBe(true);
-      expect(epic.endDate.getTime()).toBe(store.lastTimeframeItem.getTime());
+      expect(epic.endDate.getTime()).toBe(store.timeframeEndDate.getTime());
     });
 
     it('returns formatted Epic object with startDateOutOfRange, proxy date and cached original start date set when start date is out of timeframe range', () => {
@@ -84,12 +86,12 @@ describe('RoadmapStore', () => {
       });
       const epic = RoadmapStore.formatEpicDetails(
         rawEpicSDOut,
-        store.firstTimeframeItem,
-        store.lastTimeframeItem,
+        store.timeframeStartDate,
+        store.timeframeEndDate,
       );
       expect(epic.id).toBe(rawEpic.id);
       expect(epic.startDateOutOfRange).toBe(true);
-      expect(epic.startDate.getTime()).toBe(store.firstTimeframeItem.getTime());
+      expect(epic.startDate.getTime()).toBe(store.timeframeStartDate.getTime());
       expect(epic.originalStartDate.getTime()).toBe(new Date(rawStartDate).getTime());
     });
 
@@ -100,12 +102,12 @@ describe('RoadmapStore', () => {
       });
       const epic = RoadmapStore.formatEpicDetails(
         rawEpicEDOut,
-        store.firstTimeframeItem,
-        store.lastTimeframeItem,
+        store.timeframeStartDate,
+        store.timeframeEndDate,
       );
       expect(epic.id).toBe(rawEpic.id);
       expect(epic.endDateOutOfRange).toBe(true);
-      expect(epic.endDate.getTime()).toBe(store.lastTimeframeItem.getTime());
+      expect(epic.endDate.getTime()).toBe(store.timeframeEndDate.getTime());
       expect(epic.originalEndDate.getTime()).toBe(new Date(rawEndDate).getTime());
     });
   });