Merge branch 'refactor/move-time-tracking-vue-components' into 'master'
Move TimeTrackingCollapsedState vue component See merge request gitlab-org/gitlab-ce!17399
This commit is contained in:
commit
9027d023a5
|
@ -1,96 +0,0 @@
|
||||||
import stopwatchSvg from 'icons/_icon_stopwatch.svg';
|
|
||||||
import { abbreviateTime } from '../../../lib/utils/pretty_time';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'time-tracking-collapsed-state',
|
|
||||||
props: {
|
|
||||||
showComparisonState: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
showSpentOnlyState: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
showEstimateOnlyState: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
showNoTimeTrackingState: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
timeSpentHumanReadable: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
timeEstimateHumanReadable: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
timeSpent() {
|
|
||||||
return this.abbreviateTime(this.timeSpentHumanReadable);
|
|
||||||
},
|
|
||||||
timeEstimate() {
|
|
||||||
return this.abbreviateTime(this.timeEstimateHumanReadable);
|
|
||||||
},
|
|
||||||
divClass() {
|
|
||||||
if (this.showComparisonState) {
|
|
||||||
return 'compare';
|
|
||||||
} else if (this.showEstimateOnlyState) {
|
|
||||||
return 'estimate-only';
|
|
||||||
} else if (this.showSpentOnlyState) {
|
|
||||||
return 'spend-only';
|
|
||||||
} else if (this.showNoTimeTrackingState) {
|
|
||||||
return 'no-tracking';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
spanClass() {
|
|
||||||
if (this.showComparisonState) {
|
|
||||||
return '';
|
|
||||||
} else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
|
|
||||||
return 'bold';
|
|
||||||
} else if (this.showNoTimeTrackingState) {
|
|
||||||
return 'no-value';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
text() {
|
|
||||||
if (this.showComparisonState) {
|
|
||||||
return `${this.timeSpent} / ${this.timeEstimate}`;
|
|
||||||
} else if (this.showEstimateOnlyState) {
|
|
||||||
return `-- / ${this.timeEstimate}`;
|
|
||||||
} else if (this.showSpentOnlyState) {
|
|
||||||
return `${this.timeSpent} / --`;
|
|
||||||
} else if (this.showNoTimeTrackingState) {
|
|
||||||
return 'None';
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
abbreviateTime(timeStr) {
|
|
||||||
return abbreviateTime(timeStr);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div class="sidebar-collapsed-icon">
|
|
||||||
${stopwatchSvg}
|
|
||||||
<div class="time-tracking-collapsed-summary">
|
|
||||||
<div :class="divClass">
|
|
||||||
<span :class="spanClass">
|
|
||||||
{{ text }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
};
|
|
|
@ -0,0 +1,102 @@
|
||||||
|
<script>
|
||||||
|
import icon from '../../../vue_shared/components/icon.vue';
|
||||||
|
import { abbreviateTime } from '../../../lib/utils/pretty_time';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TimeTrackingCollapsedState',
|
||||||
|
components: {
|
||||||
|
icon,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
showComparisonState: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
showSpentOnlyState: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
showEstimateOnlyState: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
showNoTimeTrackingState: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
timeSpentHumanReadable: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
timeEstimateHumanReadable: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
timeSpent() {
|
||||||
|
return this.abbreviateTime(this.timeSpentHumanReadable);
|
||||||
|
},
|
||||||
|
timeEstimate() {
|
||||||
|
return this.abbreviateTime(this.timeEstimateHumanReadable);
|
||||||
|
},
|
||||||
|
divClass() {
|
||||||
|
if (this.showComparisonState) {
|
||||||
|
return 'compare';
|
||||||
|
} else if (this.showEstimateOnlyState) {
|
||||||
|
return 'estimate-only';
|
||||||
|
} else if (this.showSpentOnlyState) {
|
||||||
|
return 'spend-only';
|
||||||
|
} else if (this.showNoTimeTrackingState) {
|
||||||
|
return 'no-tracking';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
spanClass() {
|
||||||
|
if (this.showComparisonState) {
|
||||||
|
return '';
|
||||||
|
} else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
|
||||||
|
return 'bold';
|
||||||
|
} else if (this.showNoTimeTrackingState) {
|
||||||
|
return 'no-value';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
text() {
|
||||||
|
if (this.showComparisonState) {
|
||||||
|
return `${this.timeSpent} / ${this.timeEstimate}`;
|
||||||
|
} else if (this.showEstimateOnlyState) {
|
||||||
|
return `-- / ${this.timeEstimate}`;
|
||||||
|
} else if (this.showSpentOnlyState) {
|
||||||
|
return `${this.timeSpent} / --`;
|
||||||
|
} else if (this.showNoTimeTrackingState) {
|
||||||
|
return 'None';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
abbreviateTime(timeStr) {
|
||||||
|
return abbreviateTime(timeStr);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="sidebar-collapsed-icon">
|
||||||
|
<icon name="timer" />
|
||||||
|
<div class="time-tracking-collapsed-summary">
|
||||||
|
<div :class="divClass">
|
||||||
|
<span :class="spanClass">
|
||||||
|
{{ text }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import timeTrackingHelpState from './help_state';
|
import timeTrackingHelpState from './help_state';
|
||||||
import timeTrackingCollapsedState from './collapsed_state';
|
import TimeTrackingCollapsedState from './collapsed_state.vue';
|
||||||
import timeTrackingSpentOnlyPane from './spent_only_pane';
|
import timeTrackingSpentOnlyPane from './spent_only_pane';
|
||||||
import timeTrackingNoTrackingPane from './no_tracking_pane';
|
import timeTrackingNoTrackingPane from './no_tracking_pane';
|
||||||
import timeTrackingEstimateOnlyPane from './estimate_only_pane';
|
import timeTrackingEstimateOnlyPane from './estimate_only_pane';
|
||||||
|
@ -11,7 +11,7 @@ import eventHub from '../../event_hub';
|
||||||
export default {
|
export default {
|
||||||
name: 'IssuableTimeTracker',
|
name: 'IssuableTimeTracker',
|
||||||
components: {
|
components: {
|
||||||
'time-tracking-collapsed-state': timeTrackingCollapsedState,
|
TimeTrackingCollapsedState,
|
||||||
'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
|
'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
|
||||||
'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
|
'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
|
||||||
'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
|
'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Move TimeTrackingCollapsedState vue component
|
||||||
|
merge_request: 17399
|
||||||
|
author: George Tsiolis
|
||||||
|
type: performance
|
Loading…
Reference in New Issue