Commit 6f824b15 authored by Alfredo Sumaran's avatar Alfredo Sumaran

Improve first implementation

parent f95d7edd
//= require vue
//= require_tree .
$(() => {
const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
const cycleAnalyticsStore = gl.cycleAnalytics.CycleAnalyticsStore;
const cycleAnalyticsService = new gl.cycleAnalytics.CycleAnalyticsService({
requestPath: cycleAnalyticsEl.dataset.requestPath
})
gl.cycleAnalyticsApp = new Vue({
el: '#cycle-analytics',
name: 'CycleAnalytics',
data: cycleAnalyticsStore.state,
created() {
this.fetchCycleAnalyticsData();
},
methods: {
handleError(data) {
cycleAnalyticsStore.setErrorState(true);
new Flash('There was an error while fetching cycle analytics data.');
},
initDropdown() {
const $dropdown = $('.js-ca-dropdown');
const $label = $dropdown.find('.dropdown-label');
$dropdown.find('li a').off('click').on('click', (e) => {
e.preventDefault();
const $target = $(e.currentTarget);
const value = $target.data('value');
$label.text($target.text().trim());
this.fetchCycleAnalyticsData({ startDate: value });
});
},
fetchCycleAnalyticsData(options) {
options = options || { startDate: 30 };
cycleAnalyticsStore.setLoadingState(true);
cycleAnalyticsService
.fetchCycleAnalyticsData(options)
.then((response) => {
cycleAnalyticsStore.setCycleAnalyticsData(response);
this.initDropdown();
})
.fail(() => {
this.handleError(data);
})
.always(() => {
cycleAnalyticsStore.setLoadingState(false);
});
}
}
});
});
((global) => {
global.cycleAnalytics = global.cycleAnalytics || {};
class CycleAnalyticsService {
constructor(options) {
this.requestPath = options.requestPath;
}
fetchCycleAnalyticsData(options) {
options = options || { startDate: 30 };
return $.ajax({
url: this.requestPath,
method: 'GET',
dataType: 'json',
contentType: 'application/json',
data: {
cycle_analytics: {
start_date: options.startDate
}
}
});
}
};
global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService;
})(window.gl || (window.gl = {}));
((global) => {
global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.CycleAnalyticsStore = {
state: {
isLoading: true,
hasError: false,
summary: '',
stats: '',
analytics: ''
},
setCycleAnalyticsData(data) {
this.state = Object.assign(this.state, this.decorateData(data));
},
decorateData(data) {
let newData = {};
newData.stats = data.stats || [];
newData.summary = data.summary || [];
newData.summary.forEach((item) => {
item.value = item.value || '-';
});
newData.stats.forEach((item) => {
item.value = item.value || '- - -';
});
newData.analytics = data;
return newData;
},
setLoadingState(state) {
this.state.isLoading = state;
},
setErrorState(state) {
this.state.hasError = state;
}
};
})(window.gl || (window.gl = {}));
......@@ -208,9 +208,6 @@
new gl.ProtectedBranchCreate();
new gl.ProtectedBranchEditList();
break;
case 'projects:cycle_analytics:show':
new gl.CycleAnalytics();
break;
}
switch (path.first()) {
case 'admin':
......
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