Fix landing widget state and improve Vue with state management.
This commit is contained in:
parent
2a772b7d83
commit
bfbd81a873
2 changed files with 16 additions and 17 deletions
|
@ -1,17 +1,22 @@
|
||||||
((global) => {
|
((global) => {
|
||||||
|
|
||||||
const COOKIE_NAME = 'cycle_analytics_help_dismissed';
|
const COOKIE_NAME = 'cycle_analytics_help_dismissed';
|
||||||
|
const store = gl.cycleAnalyticsStore = {
|
||||||
|
isLoading: true,
|
||||||
|
hasError: false,
|
||||||
|
isHelpDismissed: $.cookie(COOKIE_NAME),
|
||||||
|
analytics: {}
|
||||||
|
};
|
||||||
|
|
||||||
gl.CycleAnalytics = class CycleAnalytics {
|
gl.CycleAnalytics = class CycleAnalytics {
|
||||||
constructor() {
|
constructor() {
|
||||||
const that = this;
|
const that = this;
|
||||||
|
|
||||||
this.isHelpDismissed = $.cookie(COOKIE_NAME);
|
|
||||||
this.vue = new Vue({
|
this.vue = new Vue({
|
||||||
el: '#cycle-analytics',
|
el: '#cycle-analytics',
|
||||||
name: 'CycleAnalytics',
|
name: 'CycleAnalytics',
|
||||||
created: this.fetchData(),
|
created: this.fetchData(),
|
||||||
data: this.decorateData({ isLoading: true }),
|
data: store,
|
||||||
methods: {
|
methods: {
|
||||||
dismissLanding() {
|
dismissLanding() {
|
||||||
that.dismissLanding();
|
that.dismissLanding();
|
||||||
|
@ -21,6 +26,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchData(options) {
|
fetchData(options) {
|
||||||
|
store.isLoading = true;
|
||||||
options = options || { startDate: 30 };
|
options = options || { startDate: 30 };
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
@ -30,22 +36,20 @@
|
||||||
contentType: 'application/json',
|
contentType: 'application/json',
|
||||||
data: { start_date: options.startDate }
|
data: { start_date: options.startDate }
|
||||||
}).done((data) => {
|
}).done((data) => {
|
||||||
this.vue.$data = this.decorateData(data);
|
this.decorateData(data);
|
||||||
this.initDropdown();
|
this.initDropdown();
|
||||||
})
|
})
|
||||||
.error((data) => {
|
.error((data) => {
|
||||||
this.handleError(data);
|
this.handleError(data);
|
||||||
})
|
})
|
||||||
.always(() => {
|
.always(() => {
|
||||||
this.vue.isLoading = false;
|
store.isLoading = false;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
decorateData(data) {
|
decorateData(data) {
|
||||||
data.summary = data.summary || [];
|
data.summary = data.summary || [];
|
||||||
data.stats = data.stats || [];
|
data.stats = data.stats || [];
|
||||||
data.isHelpDismissed = this.isHelpDismissed;
|
|
||||||
data.isLoading = data.isLoading || false;
|
|
||||||
|
|
||||||
data.summary.forEach((item) => {
|
data.summary.forEach((item) => {
|
||||||
item.value = item.value || '-';
|
item.value = item.value || '-';
|
||||||
|
@ -53,22 +57,18 @@
|
||||||
|
|
||||||
data.stats.forEach((item) => {
|
data.stats.forEach((item) => {
|
||||||
item.value = item.value || '- - -';
|
item.value = item.value || '- - -';
|
||||||
})
|
});
|
||||||
|
|
||||||
return data;
|
store.analytics = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
handleError(data) {
|
handleError(data) {
|
||||||
this.vue.$data = {
|
store.hasError = true;
|
||||||
hasError: true,
|
|
||||||
isHelpDismissed: this.isHelpDismissed
|
|
||||||
};
|
|
||||||
|
|
||||||
new Flash('There was an error while fetching cycle analytics data.', 'alert');
|
new Flash('There was an error while fetching cycle analytics data.', 'alert');
|
||||||
}
|
}
|
||||||
|
|
||||||
dismissLanding() {
|
dismissLanding() {
|
||||||
this.vue.isHelpDismissed = true;
|
store.isHelpDismissed = true;
|
||||||
$.cookie(COOKIE_NAME, true);
|
$.cookie(COOKIE_NAME, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -82,7 +82,6 @@
|
||||||
const value = $target.data('value');
|
const value = $target.data('value');
|
||||||
|
|
||||||
$label.text($target.text().trim());
|
$label.text($target.text().trim());
|
||||||
this.vue.isLoading = true;
|
|
||||||
this.fetchData({ startDate: value });
|
this.fetchData({ startDate: value });
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
.content-block
|
.content-block
|
||||||
.container-fluid
|
.container-fluid
|
||||||
.row
|
.row
|
||||||
.col-sm-3.col-xs-12.column{"v-for" => "item in summary"}
|
.col-sm-3.col-xs-12.column{"v-for" => "item in analytics.summary"}
|
||||||
%h3.header {{item.value}}
|
%h3.header {{item.value}}
|
||||||
%p.text {{item.title}}
|
%p.text {{item.title}}
|
||||||
|
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
|
|
||||||
.bordered-box
|
.bordered-box
|
||||||
%ul.content-list
|
%ul.content-list
|
||||||
%li{"v-for" => "item in stats"}
|
%li{"v-for" => "item in analytics.stats"}
|
||||||
.container-fluid
|
.container-fluid
|
||||||
.row
|
.row
|
||||||
.col-xs-8.title-col
|
.col-xs-8.title-col
|
||||||
|
|
Loading…
Reference in a new issue