Refactor roadmap mixins

Refactor roadmap mixins to prepare adding milestones to roadmap

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -38,7 +38,7 @@ export default {
     },
   },
   computed: {
-    epicStartDateValues() {
+    startDateValues() {
       const { startDate } = this.epic;
 
       return {
@@ -49,7 +49,7 @@ export default {
         time: startDate.getTime(),
       };
     },
-    epicEndDateValues() {
+    endDateValues() {
       const { endDate } = this.epic;
 
       return {
@@ -77,13 +77,19 @@ export default {
         if (this.presetTypeQuarters) {
           // CSS properties are a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/24
           // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
-          barStyles = `width: ${this.getTimelineBarWidthForQuarters()}px; ${this.getTimelineBarStartOffsetForQuarters()}`;
+          barStyles = `width: ${this.getTimelineBarWidthForQuarters(
+            this.epic,
+          )}px; ${this.getTimelineBarStartOffsetForQuarters(this.epic)}`;
         } else if (this.presetTypeMonths) {
           // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
-          barStyles = `width: ${this.getTimelineBarWidthForMonths()}px; ${this.getTimelineBarStartOffsetForMonths()}`;
+          barStyles = `width: ${this.getTimelineBarWidthForMonths()}px; ${this.getTimelineBarStartOffsetForMonths(
+            this.epic,
+          )}`;
         } else if (this.presetTypeWeeks) {
           // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
-          barStyles = `width: ${this.getTimelineBarWidthForWeeks()}px; ${this.getTimelineBarStartOffsetForWeeks()}`;
+          barStyles = `width: ${this.getTimelineBarWidthForWeeks()}px; ${this.getTimelineBarStartOffsetForWeeks(
+            this.epic,
+          )}`;
         }
       }
       return barStyles;

ee/app/assets/javascripts/roadmap/mixins/months_preset_mixin.js

@@ -7,18 +7,18 @@ export default {
      */
     hasStartDateForMonth() {
       return (
-        this.epicStartDateValues.month === this.timeframeItem.getMonth() &&
-        this.epicStartDateValues.year === this.timeframeItem.getFullYear()
+        this.startDateValues.month === this.timeframeItem.getMonth() &&
+        this.startDateValues.year === this.timeframeItem.getFullYear()
       );
     },
     /**
      * Check if current epic ends within current month (timeline cell)
      */
     isTimeframeUnderEndDateForMonth(timeframeItem) {
-      if (this.epicEndDateValues.year <= timeframeItem.getFullYear()) {
-        return this.epicEndDateValues.month === timeframeItem.getMonth();
+      if (this.endDateValues.year <= timeframeItem.getFullYear()) {
+        return this.endDateValues.month === timeframeItem.getMonth();
       }
-      return this.epicEndDateValues.time < timeframeItem.getTime();
+      return this.endDateValues.time < timeframeItem.getTime();
     },
     /**
      * Return timeline bar width for current month (timeline cell) based on
@@ -40,13 +40,13 @@ export default {
      * 3. A "triangle" shape is shown at the beginning of timeline bar
      *    when startDate is out of range.
      */
-    getTimelineBarStartOffsetForMonths() {
+    getTimelineBarStartOffsetForMonths(roadmapItem) {
       const daysInMonth = totalDaysInMonth(this.timeframeItem);
-      const startDate = this.epicStartDateValues.date;
+      const startDate = this.startDateValues.date;
 
       if (
-        this.epic.startDateOutOfRange ||
-        (this.epic.startDateUndefined && this.epic.endDateOutOfRange)
+        roadmapItem.startDateOutOfRange ||
+        (roadmapItem.startDateUndefined && roadmapItem.endDateOutOfRange)
       ) {
         // If Epic startDate is out of timeframe range
         // OR
@@ -89,8 +89,8 @@ export default {
 
       const indexOfCurrentMonth = this.timeframe.indexOf(this.timeframeItem);
       const { cellWidth } = this.$options;
-      const epicStartDate = this.epicStartDateValues;
-      const epicEndDate = this.epicEndDateValues;
+      const itemStartDate = this.startDateValues;
+      const itemEndDate = this.endDateValues;
 
       // Start iteration from current month
       for (let i = indexOfCurrentMonth; i < this.timeframe.length; i += 1) {
@@ -105,7 +105,7 @@ export default {
             timelineBarWidth += this.getBarWidthForSingleMonth(
               cellWidth,
               daysInMonth,
-              epicEndDate.date - epicStartDate.date + 1,
+              itemEndDate.date - itemStartDate.date + 1,
             );
             // Break as Epic start and end date fall within current timeframe month itself!
             break;
@@ -115,17 +115,17 @@ export default {
             // If start date is first day of the month,
             // we need width of full cell (i.e. total days of month)
             // otherwise, we need width only for date from total days of month.
-            const date = epicStartDate.date === 1 ? daysInMonth : daysInMonth - epicStartDate.date;
+            const date = itemStartDate.date === 1 ? daysInMonth : daysInMonth - itemStartDate.date;
             timelineBarWidth += this.getBarWidthForSingleMonth(cellWidth, daysInMonth, date);
           }
         } else if (this.isTimeframeUnderEndDateForMonth(this.timeframe[i])) {
-          // If this is NOT current month but epicEndDate falls under
+          // If this is NOT current month but itemEndDate falls under
           // current timeframe month then calculate width
           // based on date of the month
           timelineBarWidth += this.getBarWidthForSingleMonth(
             cellWidth,
             daysInMonth,
-            epicEndDate.date,
+            itemEndDate.date,
           );
           // Break as Epic end date falls within current timeframe month!
           break;

ee/app/assets/javascripts/roadmap/mixins/quarters_preset_mixin.js

@@ -10,8 +10,8 @@ export default {
       const quarterEnd = this.timeframeItem.range[2];
 
       return (
-        this.epicStartDateValues.time >= quarterStart.getTime() &&
-        this.epicStartDateValues.time <= quarterEnd.getTime()
+        this.startDateValues.time >= quarterStart.getTime() &&
+        this.startDateValues.time <= quarterEnd.getTime()
       );
     },
     /**
@@ -20,7 +20,7 @@ export default {
     isTimeframeUnderEndDateForQuarter(timeframeItem) {
       const quarterEnd = timeframeItem.range[2];
 
-      return this.epicEndDateValues.time <= quarterEnd.getTime();
+      return this.endDateValues.time <= quarterEnd.getTime();
     },
     /**
      * Return timeline bar width for current quarter (timeline cell) based on
@@ -45,13 +45,13 @@ export default {
      * Implementation of this method is identical to
      * MonthsPresetMixin#getTimelineBarStartOffsetForMonths
      */
-    getTimelineBarStartOffsetForQuarters() {
+    getTimelineBarStartOffsetForQuarters(roadmapItem) {
       const daysInQuarter = totalDaysInQuarter(this.timeframeItem.range);
-      const startDay = dayInQuarter(this.epic.startDate, this.timeframeItem.range);
+      const startDay = dayInQuarter(roadmapItem.startDate, this.timeframeItem.range);
 
       if (
-        this.epic.startDateOutOfRange ||
-        (this.epic.startDateUndefined && this.epic.endDateOutOfRange)
+        roadmapItem.startDateOutOfRange ||
+        (roadmapItem.startDateUndefined && roadmapItem.endDateOutOfRange)
       ) {
         return '';
       } else if (startDay === 1) {
@@ -85,13 +85,13 @@ export default {
      * Implementation of this method is identical to
      * MonthsPresetMixin#getTimelineBarWidthForMonths
      */
-    getTimelineBarWidthForQuarters() {
+    getTimelineBarWidthForQuarters(roadmapItem) {
       let timelineBarWidth = 0;
 
       const indexOfCurrentQuarter = this.timeframe.indexOf(this.timeframeItem);
       const { cellWidth } = this.$options;
-      const epicStartDate = this.epic.startDate;
-      const epicEndDate = this.epic.endDate;
+      const itemStartDate = roadmapItem.startDate;
+      const itemEndDate = roadmapItem.endDate;
 
       for (let i = indexOfCurrentQuarter; i < this.timeframe.length; i += 1) {
         const currentQuarter = this.timeframe[i].range;
@@ -101,14 +101,14 @@ export default {
             timelineBarWidth += this.getBarWidthForSingleQuarter(
               cellWidth,
               totalDaysInQuarter(currentQuarter),
-              dayInQuarter(epicEndDate, currentQuarter) -
-                dayInQuarter(epicStartDate, currentQuarter) +
+              dayInQuarter(itemEndDate, currentQuarter) -
+                dayInQuarter(itemStartDate, currentQuarter) +
                 1,
             );
             break;
           } else {
             const daysInQuarter = totalDaysInQuarter(currentQuarter);
-            const day = dayInQuarter(epicStartDate, currentQuarter);
+            const day = dayInQuarter(itemStartDate, currentQuarter);
             const date = day === 1 ? daysInQuarter : daysInQuarter - day;
 
             timelineBarWidth += this.getBarWidthForSingleQuarter(
@@ -121,7 +121,7 @@ export default {
           timelineBarWidth += this.getBarWidthForSingleQuarter(
             cellWidth,
             totalDaysInQuarter(currentQuarter),
-            dayInQuarter(epicEndDate, currentQuarter),
+            dayInQuarter(itemEndDate, currentQuarter),
           );
           break;
         } else {

ee/app/assets/javascripts/roadmap/mixins/weeks_preset_mixin.js

@@ -11,8 +11,8 @@ export default {
       lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6);
 
       return (
-        this.epicStartDateValues.time >= firstDayOfWeek.getTime() &&
-        this.epicStartDateValues.time <= lastDayOfWeek.getTime()
+        this.startDateValues.time >= firstDayOfWeek.getTime() &&
+        this.startDateValues.time <= lastDayOfWeek.getTime()
       );
     },
     /**
@@ -28,7 +28,7 @@ export default {
      */
     isTimeframeUnderEndDateForWeek(timeframeItem) {
       const lastDayOfWeek = this.getLastDayOfWeek(timeframeItem);
-      return this.epicEndDateValues.time <= lastDayOfWeek.getTime();
+      return this.endDateValues.time <= lastDayOfWeek.getTime();
     },
     /**
      * Return timeline bar width for current week (timeline cell) based on
@@ -53,15 +53,15 @@ export default {
      * Implementation of this method is identical to
      * MonthsPresetMixin#getTimelineBarStartOffsetForMonths
      */
-    getTimelineBarStartOffsetForWeeks() {
+    getTimelineBarStartOffsetForWeeks(roadmapItem) {
       const daysInWeek = 7;
       const dayWidth = this.$options.cellWidth / daysInWeek;
-      const startDate = this.epicStartDateValues.day + 1;
+      const startDate = this.startDateValues.day + 1;
       const firstDayOfWeek = this.timeframeItem.getDay() + 1;
 
       if (
-        this.epic.startDateOutOfRange ||
-        (this.epic.startDateUndefined && this.epic.endDateOutOfRange)
+        roadmapItem.startDateOutOfRange ||
+        (roadmapItem.startDateUndefined && roadmapItem.endDateOutOfRange)
       ) {
         return '';
       } else if (startDate === firstDayOfWeek) {
@@ -99,23 +99,23 @@ export default {
 
       const indexOfCurrentWeek = this.timeframe.indexOf(this.timeframeItem);
       const { cellWidth } = this.$options;
-      const epicStartDate = this.epicStartDateValues;
-      const epicEndDate = this.epicEndDateValues;
+      const itemStartDate = this.startDateValues;
+      const itemEndDate = this.endDateValues;
 
       for (let i = indexOfCurrentWeek; i < this.timeframe.length; i += 1) {
         if (i === indexOfCurrentWeek) {
           if (this.isTimeframeUnderEndDateForWeek(this.timeframe[i])) {
             timelineBarWidth += this.getBarWidthForSingleWeek(
               cellWidth,
-              epicEndDate.day - epicStartDate.day + 1,
+              itemEndDate.day - itemStartDate.day + 1,
             );
             break;
           } else {
-            const date = epicStartDate.day === 0 ? 7 : 7 - epicStartDate.day;
+            const date = itemStartDate.day === 0 ? 7 : 7 - itemStartDate.day;
             timelineBarWidth += this.getBarWidthForSingleWeek(cellWidth, date);
           }
         } else if (this.isTimeframeUnderEndDateForWeek(this.timeframe[i])) {
-          timelineBarWidth += this.getBarWidthForSingleWeek(cellWidth, epicEndDate.day + 1);
+          timelineBarWidth += this.getBarWidthForSingleWeek(cellWidth, itemEndDate.day + 1);
           break;
         } else {
           timelineBarWidth += this.getBarWidthForSingleWeek(cellWidth, 7);

ee/spec/javascripts/roadmap/components/epic_item_timeline_spec.js

@@ -38,9 +38,9 @@ describe('EpicItemTimelineComponent', () => {
       vm = createComponent({});
     });
 
-    describe('epicStartDateValues', () => {
+    describe('startDateValues', () => {
       it('returns object containing date parts from epic.startDate', () => {
-        expect(vm.epicStartDateValues).toEqual(
+        expect(vm.startDateValues).toEqual(
           jasmine.objectContaining({
             day: mockEpic.startDate.getDay(),
             date: mockEpic.startDate.getDate(),
@@ -52,9 +52,9 @@ describe('EpicItemTimelineComponent', () => {
       });
     });
 
-    describe('epicEndDateValues', () => {
+    describe('endDateValues', () => {
       it('returns object containing date parts from epic.endDate', () => {
-        expect(vm.epicEndDateValues).toEqual(
+        expect(vm.endDateValues).toEqual(
           jasmine.objectContaining({
             day: mockEpic.endDate.getDay(),
             date: mockEpic.endDate.getDate(),

ee/spec/javascripts/roadmap/mixins/months_preset_mixin_spec.js

@@ -102,7 +102,7 @@ describe('MonthsPresetMixin', () => {
           epic: Object.assign({}, mockEpic, { startDateOutOfRange: true }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForMonths()).toBe('');
+        expect(vm.getTimelineBarStartOffsetForMonths(vm.epic)).toBe('');
       });
 
       it('returns empty string when Epic startDate is undefined and endDate is out of range', () => {
@@ -113,7 +113,7 @@ describe('MonthsPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForMonths()).toBe('');
+        expect(vm.getTimelineBarStartOffsetForMonths(vm.epic)).toBe('');
       });
 
       it('return `left: 0;` when Epic startDate is first day of the month', () => {
@@ -123,7 +123,7 @@ describe('MonthsPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForMonths()).toBe('left: 0;');
+        expect(vm.getTimelineBarStartOffsetForMonths(vm.epic)).toBe('left: 0;');
       });
 
       it('returns proportional `left` value based on Epic startDate and days in the month', () => {
@@ -133,7 +133,7 @@ describe('MonthsPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForMonths()).toContain('left: 50%');
+        expect(vm.getTimelineBarStartOffsetForMonths(vm.epic)).toContain('left: 50%');
       });
     });
 

ee/spec/javascripts/roadmap/mixins/quarters_preset_mixin_spec.js

@@ -102,7 +102,7 @@ describe('QuartersPresetMixin', () => {
           epic: Object.assign({}, mockEpic, { startDateOutOfRange: true }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForQuarters()).toBe('');
+        expect(vm.getTimelineBarStartOffsetForQuarters(vm.epic)).toBe('');
       });
 
       it('returns empty string when Epic startDate is undefined and endDate is out of range', () => {
@@ -113,7 +113,7 @@ describe('QuartersPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForQuarters()).toBe('');
+        expect(vm.getTimelineBarStartOffsetForQuarters(vm.epic)).toBe('');
       });
 
       it('return `left: 0;` when Epic startDate is first day of the quarter', () => {
@@ -123,7 +123,7 @@ describe('QuartersPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForQuarters()).toBe('left: 0;');
+        expect(vm.getTimelineBarStartOffsetForQuarters(vm.epic)).toBe('left: 0;');
       });
 
       it('returns proportional `left` value based on Epic startDate and days in the quarter', () => {
@@ -133,7 +133,7 @@ describe('QuartersPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForQuarters()).toContain('left: 34');
+        expect(vm.getTimelineBarStartOffsetForQuarters(vm.epic)).toContain('left: 34');
       });
     });
 
@@ -147,7 +147,7 @@ describe('QuartersPresetMixin', () => {
           }),
         });
 
-        expect(Math.floor(vm.getTimelineBarWidthForQuarters())).toBe(180);
+        expect(Math.floor(vm.getTimelineBarWidthForQuarters(vm.epic))).toBe(180);
       });
     });
   });

ee/spec/javascripts/roadmap/mixins/weeks_preset_mixin_spec.js

@@ -113,7 +113,7 @@ describe('WeeksPresetMixin', () => {
           epic: Object.assign({}, mockEpic, { startDateOutOfRange: true }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForWeeks()).toBe('');
+        expect(vm.getTimelineBarStartOffsetForWeeks(vm.epic)).toBe('');
       });
 
       it('returns empty string when Epic startDate is undefined and endDate is out of range', () => {
@@ -124,7 +124,7 @@ describe('WeeksPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForWeeks()).toBe('');
+        expect(vm.getTimelineBarStartOffsetForWeeks(vm.epic)).toBe('');
       });
 
       it('return `left: 0;` when Epic startDate is first day of the week', () => {
@@ -134,17 +134,17 @@ describe('WeeksPresetMixin', () => {
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForWeeks()).toBe('left: 0;');
+        expect(vm.getTimelineBarStartOffsetForWeeks(vm.epic)).toBe('left: 0;');
       });
 
-      it('returns proportional `left` value based on Epic startDate and days in the month', () => {
+      it('returns proportional `left` value based on Epic startDate and days in the week', () => {
         vm = createComponent({
           epic: Object.assign({}, mockEpic, {
             startDate: new Date(2018, 0, 15),
           }),
         });
 
-        expect(vm.getTimelineBarStartOffsetForWeeks()).toContain('left: 38');
+        expect(vm.getTimelineBarStartOffsetForWeeks(vm.epic)).toContain('left: 38');
       });
     });