Skip to content

G
gitlab-ce
Commit 9c73598d authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Remove in favor of per preset views

parent 64c40b6c
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 388 deletions
ee/app/assets/javascripts/roadmap/components/timeline_header_item.vue deleted 100644 → 0
View file @ 64c40b6c
<script>
import { monthInWords } from '~/lib/utils/datetime_utility';
import timelineHeaderSubItem from './timeline_header_sub_item.vue';
export default {
components: {
timelineHeaderSubItem,
},
props: {
timeframeIndex: {
type: Number,
required: true,
},
timeframeItem: {
type: Date,
required: true,
},
timeframe: {
type: Array,
required: true,
},
itemWidth: {
type: Number,
required: true,
},
},
data() {
const currentDate = new Date();
return {
currentDate,
currentYear: currentDate.getFullYear(),
currentMonth: currentDate.getMonth(),
};
},
computed: {
itemStyles() {
return {
width: `${this.itemWidth}px`,
};
},
timelineHeaderLabel() {
const year = this.timeframeItem.getFullYear();
const month = monthInWords(this.timeframeItem, true);
// Show Year only if current timeframe has months between
// two years and current timeframe item is first month
// from one of the two years.
//
// End result of doing this is;
// 2017 Nov, Dec, 2018 Jan, Feb, Mar
if (this.timeframeIndex !== 0 &&
this.timeframe[this.timeframeIndex - 1].getFullYear() === year) {
return month;
}
return `${year} ${month}`;
},
timelineHeaderClass() {
let itemLabelClass = '';
const timeframeYear = this.timeframeItem.getFullYear();
const timeframeMonth = this.timeframeItem.getMonth();
// Show dark color text only if timeframe item year & month
// are greater than current year.
if (timeframeYear >= this.currentYear &&
timeframeMonth >= this.currentMonth) {
itemLabelClass += 'label-dark';
}
// Show bold text only if timeframe item year & month
// is current year & month
if (timeframeYear === this.currentYear &&
timeframeMonth === this.currentMonth) {
itemLabelClass += ' label-bold';
}
return itemLabelClass;
},
},
};
</script>
<template>
<span
class="timeline-header-item"
:style="itemStyles"
>
<div
class="item-label"
:class="timelineHeaderClass"
>
{{ timelineHeaderLabel }}
</div>
<timeline-header-sub-item
:timeframe-item="timeframeItem"
:current-date="currentDate"
/>
</span>
</template>
ee/app/assets/javascripts/roadmap/components/timeline_header_sub_item.vue deleted 100644 → 0
View file @ 64c40b6c
<script>
import { getSundays } from '~/lib/utils/datetime_utility';
import timelineTodayIndicator from './timeline_today_indicator.vue';
export default {
components: {
timelineTodayIndicator,
},
props: {
currentDate: {
type: Date,
required: true,
},
timeframeItem: {
type: Date,
required: true,
},
},
computed: {
headerSubItems() {
return getSundays(this.timeframeItem);
},
headerSubItemClass() {
const currentYear = this.currentDate.getFullYear();
const currentMonth = this.currentDate.getMonth();
const timeframeYear = this.timeframeItem.getFullYear();
const timeframeMonth = this.timeframeItem.getMonth();
// Show dark color text only for dates from current month and future months.
return timeframeYear >= currentYear && timeframeMonth >= currentMonth ? 'label-dark' : '';
},
hasToday() {
const timeframeYear = this.timeframeItem.getFullYear();
const timeframeMonth = this.timeframeItem.getMonth();
return this.currentDate.getMonth() === timeframeMonth &&
this.currentDate.getFullYear() === timeframeYear;
},
},
methods: {
getSubItemValueClass(subItem) {
// Show light color text for dates which are
// older than today
if (subItem < this.currentDate) {
return 'value-light';
}
return '';
},
},
};
</script>
<template>
<div
class="item-sublabel"
:class="headerSubItemClass"
>
<span
v-for="(subItem, index) in headerSubItems"
:key="index"
class="sublabel-value"
:class="getSubItemValueClass(subItem)"
>
{{ subItem.getDate() }}
</span>
<timeline-today-indicator
v-if="hasToday"
:timeframe-item="timeframeItem"
:current-date="currentDate"
/>
</div>
</template>
spec/javascripts/roadmap/components/timeline_header_item_spec.js deleted 100644 → 0
View file @ 64c40b6c
import Vue from 'vue';
import timelineHeaderItemComponent from 'ee/roadmap/components/timeline_header_item.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { mockTimeframe, mockShellWidth, mockItemWidth } from '../mock_data';
const mockTimeframeIndex = 0;
const createComponent = ({
timeframeIndex = mockTimeframeIndex,
timeframeItem = mockTimeframe[mockTimeframeIndex],
timeframe = mockTimeframe,
shellWidth = mockShellWidth,
itemWidth = mockItemWidth,
}) => {
const Component = Vue.extend(timelineHeaderItemComponent);
return mountComponent(Component, {
timeframeIndex,
timeframeItem,
timeframe,
shellWidth,
itemWidth,
});
};
describe('TimelineHeaderItemComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('data', () => {
it('returns default data props', () => {
vm = createComponent({});
const currentDate = new Date();
expect(vm.currentDate.getDate()).toBe(currentDate.getDate());
expect(vm.currentYear).toBe(currentDate.getFullYear());
expect(vm.currentMonth).toBe(currentDate.getMonth());
});
});
describe('computed', () => {
describe('itemStyles', () => {
it('returns style object for container element based on value of `itemWidth` prop', () => {
vm = createComponent({});
expect(vm.itemStyles.width).toBe('180px');
});
});
describe('timelineHeaderLabel', () => {
it('returns string containing Year and Month for current timeline header item', () => {
vm = createComponent({});
expect(vm.timelineHeaderLabel).toBe('2017 Nov');
});
it('returns string containing only Month for current timeline header item when previous header contained Year', () => {
vm = createComponent({
timeframeIndex: mockTimeframeIndex + 1,
timeframeItem: mockTimeframe[mockTimeframeIndex + 1],
});
expect(vm.timelineHeaderLabel).toBe('Dec');
});
});
describe('timelineHeaderClass', () => {
it('returns empty string when timeframeItem year or month is less than current year or month', () => {
vm = createComponent({});
expect(vm.timelineHeaderClass).toBe('');
});
it('returns string containing `label-dark label-bold` when current year and month is same as timeframeItem year and month', () => {
vm = createComponent({
timeframeItem: new Date(),
});
expect(vm.timelineHeaderClass).toBe('label-dark label-bold');
});
it('returns string containing `label-dark` when current year and month is less than timeframeItem year and month', () => {
const timeframeIndex = 2;
const timeframeItem = new Date(
mockTimeframe[timeframeIndex].getFullYear(),
mockTimeframe[timeframeIndex].getMonth() + 2,
1,
);
vm = createComponent({
timeframeIndex,
timeframeItem,
});
vm.currentYear = mockTimeframe[timeframeIndex].getFullYear();
vm.currentMonth = mockTimeframe[timeframeIndex].getMonth() + 1;
expect(vm.timelineHeaderClass).toBe('label-dark');
});
});
});
describe('template', () => {
beforeEach(() => {
vm = createComponent({});
});
it('renders component container element with class `timeline-header-item`', () => {
expect(vm.$el.classList.contains('timeline-header-item')).toBeTruthy();
});
it('renders item label element class `item-label` and value as `timelineHeaderLabel`', () => {
const itemLabelEl = vm.$el.querySelector('.item-label');
expect(itemLabelEl).not.toBeNull();
expect(itemLabelEl.innerText.trim()).toBe('2017 Nov');
});
});
});
spec/javascripts/roadmap/components/timeline_header_sub_item_spec.js deleted 100644 → 0
View file @ 64c40b6c
import Vue from 'vue';
import timelineHeaderSubItemComponent from 'ee/roadmap/components/timeline_header_sub_item.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { mockTimeframe } from '../mock_data';
const createComponent = ({
currentDate = mockTimeframe[0],
timeframeItem = mockTimeframe[0],
}) => {
const Component = Vue.extend(timelineHeaderSubItemComponent);
return mountComponent(Component, {
currentDate,
timeframeItem,
});
};
describe('TimelineHeaderSubItemComponent', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('computed', () => {
describe('headerSubItems', () => {
it('returns array of dates containing Sundays from timeframeItem', () => {
vm = createComponent({});
expect(Array.isArray(vm.headerSubItems)).toBe(true);
});
});
describe('headerSubItemClass', () => {
it('returns string containing `label-dark` when timeframe year and month are greater than current year and month', () => {
vm = createComponent({});
expect(vm.headerSubItemClass).toBe('label-dark');
});
it('returns empty string when timeframe year and month are less than current year and month', () => {
vm = createComponent({
currentDate: new Date(2017, 10, 1), // Nov 1, 2017
timeframeItem: new Date(2018, 0, 1), // Jan 1, 2018
});
expect(vm.headerSubItemClass).toBe('');
});
});
describe('hasToday', () => {
it('returns true when current month and year is same as timeframe month and year', () => {
vm = createComponent({});
expect(vm.hasToday).toBe(true);
});
it('returns false when current month and year is different from timeframe month and year', () => {
vm = createComponent({
currentDate: new Date(2017, 10, 1), // Nov 1, 2017
timeframeItem: new Date(2018, 0, 1), // Jan 1, 2018
});
expect(vm.hasToday).toBe(false);
});
});
});
describe('methods', () => {
describe('getSubItemValueClass', () => {
it('returns empty string when provided subItem is greater than current date', () => {
vm = createComponent({
currentDate: new Date(2018, 0, 1), // Jan 1, 2018
});
const subItem = new Date(2018, 0, 15); // Jan 15, 2018
expect(vm.getSubItemValueClass(subItem)).toBe('');
});
it('returns string containing `value-light` when provided subItem is less than current date', () => {
vm = createComponent({
currentDate: new Date(2018, 0, 15), // Jan 15, 2018
});
const subItem = new Date(2018, 0, 1); // Jan 1, 2018
expect(vm.getSubItemValueClass(subItem)).toBe('value-light');
});
});
});
describe('template', () => {
beforeEach(() => {
vm = createComponent({});
});
it('renders component container element with class `item-sublabel`', () => {
expect(vm.$el.classList.contains('item-sublabel')).toBe(true);
});
it('renders sub item element with class `sublabel-value`', () => {
expect(vm.$el.querySelector('.sublabel-value')).not.toBeNull();
});
});
});
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