diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-09-23 12:46:06 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2016-09-23 12:46:06 +0300 |
commit | e13acff29f22501bd7c3f0fa6f470fe983539bb7 (patch) | |
tree | e0d3d9935ae41a8cffde887470953d427a92ab94 | |
parent | 2a423e0325b644bbb855b090c682c9b11c707616 (diff) | |
download | gitlab-ce-cycle-analytics-js-improvements.tar.gz |
Fix landing widget state and improve Vue with state management.cycle-analytics-js-improvements
-rw-r--r-- | app/assets/javascripts/cycle-analytics.js.es6 | 29 | ||||
-rw-r--r-- | app/views/projects/cycle_analytics/show.html.haml | 4 |
2 files changed, 16 insertions, 17 deletions
diff --git a/app/assets/javascripts/cycle-analytics.js.es6 b/app/assets/javascripts/cycle-analytics.js.es6 index afaed7c4f60..e4d56938242 100644 --- a/app/assets/javascripts/cycle-analytics.js.es6 +++ b/app/assets/javascripts/cycle-analytics.js.es6 @@ -1,17 +1,22 @@ ((global) => { const COOKIE_NAME = 'cycle_analytics_help_dismissed'; + const model = gl.cycleAnalyticsModel = { + isLoading: true, + hasError: false, + isHelpDismissed: $.cookie(COOKIE_NAME), + analyticsData: {} + }; gl.CycleAnalytics = class CycleAnalytics { constructor() { const that = this; - this.isHelpDismissed = $.cookie(COOKIE_NAME); this.vue = new Vue({ el: '#cycle-analytics', name: 'CycleAnalytics', created: this.fetchData(), - data: this.decorateData({ isLoading: true }), + data: model, methods: { dismissLanding() { that.dismissLanding(); @@ -21,6 +26,7 @@ } fetchData(options) { + model.isLoading = true; options = options || { startDate: 30 }; $.ajax({ @@ -30,22 +36,20 @@ contentType: 'application/json', data: { start_date: options.startDate } }).done((data) => { - this.vue.$data = this.decorateData(data); + this.decorateData(data); this.initDropdown(); }) .error((data) => { this.handleError(data); }) .always(() => { - this.vue.isLoading = false; + model.isLoading = false; }) } decorateData(data) { data.summary = data.summary || []; data.stats = data.stats || []; - data.isHelpDismissed = this.isHelpDismissed; - data.isLoading = data.isLoading || false; data.summary.forEach((item) => { item.value = item.value || '-'; @@ -53,22 +57,18 @@ data.stats.forEach((item) => { item.value = item.value || '- - -'; - }) + }); - return data; + model.analyticsData = data; } handleError(data) { - this.vue.$data = { - hasError: true, - isHelpDismissed: this.isHelpDismissed - }; - + model.hasError = true; new Flash('There was an error while fetching cycle analytics data.', 'alert'); } dismissLanding() { - this.vue.isHelpDismissed = true; + model.isHelpDismissed = true; $.cookie(COOKIE_NAME, true); } @@ -82,7 +82,6 @@ const value = $target.data('value'); $label.text($target.text().trim()); - this.vue.isLoading = true; this.fetchData({ startDate: value }); }) } diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 5dcb2a17873..6bcaaac4c80 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -25,7 +25,7 @@ .content-block .container-fluid .row - .col-xs-3.column{"v-for" => "item in summary"} + .col-xs-3.column{"v-for" => "item in analyticsData.summary"} %h3.header {{item.value}} %p.text {{item.title}} @@ -44,7 +44,7 @@ .bordered-box %ul.content-list - %li{"v-for" => "item in stats"} + %li{"v-for" => "item in analyticsData.stats"} .container-fluid .row .col-xs-10.title-col |