Commit 525d5830 authored by George Tsiolis's avatar George Tsiolis

Move IssuableTimeTracker vue component

parent 5edd94ae
...@@ -2,7 +2,7 @@ import _ from 'underscore'; ...@@ -2,7 +2,7 @@ import _ from 'underscore';
import '~/smart_interval'; import '~/smart_interval';
import timeTracker from './time_tracker'; import IssuableTimeTracker from './time_tracker.vue';
import Store from '../../stores/sidebar_store'; import Store from '../../stores/sidebar_store';
import Mediator from '../../sidebar_mediator'; import Mediator from '../../sidebar_mediator';
...@@ -16,7 +16,7 @@ export default { ...@@ -16,7 +16,7 @@ export default {
}; };
}, },
components: { components: {
'issuable-time-tracker': timeTracker, IssuableTimeTracker,
}, },
methods: { methods: {
listenForQuickActions() { listenForQuickActions() {
......
<script>
import timeTrackingHelpState from './help_state'; import timeTrackingHelpState from './help_state';
import timeTrackingCollapsedState from './collapsed_state'; import timeTrackingCollapsedState from './collapsed_state';
import timeTrackingSpentOnlyPane from './spent_only_pane'; import timeTrackingSpentOnlyPane from './spent_only_pane';
...@@ -8,7 +9,15 @@ import timeTrackingComparisonPane from './comparison_pane'; ...@@ -8,7 +9,15 @@ import timeTrackingComparisonPane from './comparison_pane';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
name: 'issuable-time-tracker', name: 'IssuableTimeTracker',
components: {
'time-tracking-collapsed-state': timeTrackingCollapsedState,
'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
'time-tracking-comparison-pane': timeTrackingComparisonPane,
'time-tracking-help-state': timeTrackingHelpState,
},
props: { props: {
time_estimate: { time_estimate: {
type: Number, type: Number,
...@@ -38,14 +47,6 @@ export default { ...@@ -38,14 +47,6 @@ export default {
showHelp: false, showHelp: false,
}; };
}, },
components: {
'time-tracking-collapsed-state': timeTrackingCollapsedState,
'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
'time-tracking-comparison-pane': timeTrackingComparisonPane,
'time-tracking-help-state': timeTrackingHelpState,
},
computed: { computed: {
timeSpent() { timeSpent() {
return this.time_spent; return this.time_spent;
...@@ -81,6 +82,9 @@ export default { ...@@ -81,6 +82,9 @@ export default {
return !!this.showHelp; return !!this.showHelp;
}, },
}, },
created() {
eventHub.$on('timeTracker:updateData', this.update);
},
methods: { methods: {
toggleHelpState(show) { toggleHelpState(show) {
this.showHelp = show; this.showHelp = show;
...@@ -92,72 +96,73 @@ export default { ...@@ -92,72 +96,73 @@ export default {
this.human_time_spent = data.human_time_spent; this.human_time_spent = data.human_time_spent;
}, },
}, },
created() { };
eventHub.$on('timeTracker:updateData', this.update); </script>
},
template: ` <template>
<div <div
class="time_tracker time-tracking-component-wrap" class="time_tracker time-tracking-component-wrap"
v-cloak v-cloak
> >
<time-tracking-collapsed-state <time-tracking-collapsed-state
:show-comparison-state="showComparisonState" :show-comparison-state="showComparisonState"
:show-no-time-tracking-state="showNoTimeTrackingState" :show-no-time-tracking-state="showNoTimeTrackingState"
:show-help-state="showHelpState" :show-help-state="showHelpState"
:show-spent-only-state="showSpentOnlyState" :show-spent-only-state="showSpentOnlyState"
:show-estimate-only-state="showEstimateOnlyState" :show-estimate-only-state="showEstimateOnlyState"
:time-spent-human-readable="timeSpentHumanReadable"
:time-estimate-human-readable="timeEstimateHumanReadable"
/>
<div class="title hide-collapsed">
{{ __('Time tracking') }}
<div
class="help-button pull-right"
v-if="!showHelpState"
@click="toggleHelpState(true)"
>
<i
class="fa fa-question-circle"
aria-hidden="true"
>
</i>
</div>
<div
class="close-help-button pull-right"
v-if="showHelpState"
@click="toggleHelpState(false)"
>
<i
class="fa fa-close"
aria-hidden="true"
>
</i>
</div>
</div>
<div class="time-tracking-content hide-collapsed">
<time-tracking-estimate-only-pane
v-if="showEstimateOnlyState"
:time-estimate-human-readable="timeEstimateHumanReadable"
/>
<time-tracking-spent-only-pane
v-if="showSpentOnlyState"
:time-spent-human-readable="timeSpentHumanReadable"
/>
<time-tracking-no-tracking-pane
v-if="showNoTimeTrackingState"
/>
<time-tracking-comparison-pane
v-if="showComparisonState"
:time-estimate="timeEstimate"
:time-spent="timeSpent"
:time-spent-human-readable="timeSpentHumanReadable" :time-spent-human-readable="timeSpentHumanReadable"
:time-estimate-human-readable="timeEstimateHumanReadable" :time-estimate-human-readable="timeEstimateHumanReadable"
/> />
<div class="title hide-collapsed"> <transition name="help-state-toggle">
{{ __('Time tracking') }} <time-tracking-help-state
<div
class="help-button pull-right"
v-if="!showHelpState"
@click="toggleHelpState(true)"
>
<i
class="fa fa-question-circle"
aria-hidden="true"
/>
</div>
<div
class="close-help-button pull-right"
v-if="showHelpState" v-if="showHelpState"
@click="toggleHelpState(false)" :root-path="rootPath"
>
<i
class="fa fa-close"
aria-hidden="true"
/>
</div>
</div>
<div class="time-tracking-content hide-collapsed">
<time-tracking-estimate-only-pane
v-if="showEstimateOnlyState"
:time-estimate-human-readable="timeEstimateHumanReadable"
/> />
<time-tracking-spent-only-pane </transition>
v-if="showSpentOnlyState"
:time-spent-human-readable="timeSpentHumanReadable"
/>
<time-tracking-no-tracking-pane
v-if="showNoTimeTrackingState"
/>
<time-tracking-comparison-pane
v-if="showComparisonState"
:time-estimate="timeEstimate"
:time-spent="timeSpent"
:time-spent-human-readable="timeSpentHumanReadable"
:time-estimate-human-readable="timeEstimateHumanReadable"
/>
<transition name="help-state-toggle">
<time-tracking-help-state
v-if="showHelpState"
:rootPath="rootPath"
/>
</transition>
</div>
</div> </div>
`, </div>
}; </template>
---
title: Move IssuableTimeTracker vue component
merge_request: 16948
author: George Tsiolis
type: performance
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import Vue from 'vue'; import Vue from 'vue';
import timeTracker from '~/sidebar/components/time_tracking/time_tracker'; import timeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
function initTimeTrackingComponent(opts) { function initTimeTrackingComponent(opts) {
setFixtures(` setFixtures(`
......
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