Skip to content

G
gitlab-ce
Commit 7f6d5703 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch '6802-refactor-roadmap-utils-mixins' into 'master' 

Refactor roadmap mixins

See merge request gitlab-org/gitlab!25774
parents ac2c0e33 cc507542
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 64 deletions
ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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
View file @ 7f6d5703
......@@ -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');
});
});
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7