2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2021-06-18 06:10:20 +00:00
|
|
|
import createFlash from './flash';
|
2021-02-14 18:09:20 +00:00
|
|
|
import axios from './lib/utils/axios_utils';
|
2019-05-03 13:00:44 +00:00
|
|
|
import { __ } from './locale';
|
2017-10-02 12:32:53 +00:00
|
|
|
|
2017-11-20 20:28:29 +00:00
|
|
|
export default class Milestone {
|
|
|
|
constructor() {
|
|
|
|
this.bindTabsSwitching();
|
|
|
|
this.loadInitialTab();
|
|
|
|
}
|
|
|
|
|
|
|
|
bindTabsSwitching() {
|
2020-12-23 21:10:24 +00:00
|
|
|
return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
|
2017-11-20 20:28:29 +00:00
|
|
|
const $target = $(e.target);
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2018-06-15 15:58:27 +00:00
|
|
|
window.location.hash = $target.attr('href');
|
2017-11-20 20:28:29 +00:00
|
|
|
this.loadTab($target);
|
|
|
|
});
|
|
|
|
}
|
2020-09-18 18:10:26 +00:00
|
|
|
|
2017-11-20 20:28:29 +00:00
|
|
|
loadInitialTab() {
|
2020-09-18 18:10:26 +00:00
|
|
|
const $target = $(`.js-milestone-tabs a:not(.active)[href="${window.location.hash}"]`);
|
2017-04-25 14:25:20 +00:00
|
|
|
|
2017-11-20 20:28:29 +00:00
|
|
|
if ($target.length) {
|
|
|
|
$target.tab('show');
|
2020-09-18 18:10:26 +00:00
|
|
|
} else {
|
|
|
|
this.loadTab($('.js-milestone-tabs a.active'));
|
2017-11-20 20:28:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
|
|
loadTab($target) {
|
|
|
|
const endpoint = $target.data('endpoint');
|
|
|
|
const tabElId = $target.attr('href');
|
|
|
|
|
|
|
|
if (endpoint && !$target.hasClass('is-loaded')) {
|
2018-10-10 07:13:34 +00:00
|
|
|
axios
|
|
|
|
.get(endpoint)
|
2018-01-31 09:29:29 +00:00
|
|
|
.then(({ data }) => {
|
|
|
|
$(tabElId).html(data.html);
|
|
|
|
$target.addClass('is-loaded');
|
|
|
|
})
|
2021-06-18 06:10:20 +00:00
|
|
|
.catch(() =>
|
|
|
|
createFlash({
|
|
|
|
message: __('Error loading milestone tab'),
|
|
|
|
}),
|
|
|
|
);
|
2017-11-20 20:28:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|