2022-09-28 09:09:28 +00:00
|
|
|
import { createAlert } from '~/flash';
|
2021-12-10 18:14:42 +00:00
|
|
|
import { sanitize } from '~/lib/dompurify';
|
2021-12-01 18:15:19 +00:00
|
|
|
import axios from '~/lib/utils/axios_utils';
|
|
|
|
import { __ } from '~/locale';
|
2022-06-22 15:09:48 +00:00
|
|
|
import { GlTabsBehavior, TAB_SHOWN_EVENT, HISTORY_TYPE_HASH } from '~/tabs';
|
2017-10-02 12:32:53 +00:00
|
|
|
|
2017-11-20 20:28:29 +00:00
|
|
|
export default class Milestone {
|
|
|
|
constructor() {
|
2021-12-10 18:14:42 +00:00
|
|
|
this.tabsEl = document.querySelector('.js-milestone-tabs');
|
|
|
|
this.loadedTabs = new WeakSet();
|
|
|
|
|
2017-11-20 20:28:29 +00:00
|
|
|
this.bindTabsSwitching();
|
2022-06-22 15:09:48 +00:00
|
|
|
// eslint-disable-next-line no-new
|
|
|
|
new GlTabsBehavior(this.tabsEl, { history: HISTORY_TYPE_HASH });
|
2017-11-20 20:28:29 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
bindTabsSwitching() {
|
2021-12-10 18:14:42 +00:00
|
|
|
this.tabsEl.addEventListener(TAB_SHOWN_EVENT, (event) => {
|
|
|
|
const tab = event.target;
|
|
|
|
const { activeTabPanel } = event.detail;
|
|
|
|
this.loadTab(tab, activeTabPanel);
|
2017-11-20 20:28:29 +00:00
|
|
|
});
|
|
|
|
}
|
2020-09-18 18:10:26 +00:00
|
|
|
|
2021-12-10 18:14:42 +00:00
|
|
|
loadTab(tab, tabPanel) {
|
|
|
|
const { endpoint } = tab.dataset;
|
2017-11-20 20:28:29 +00:00
|
|
|
|
2021-12-10 18:14:42 +00:00
|
|
|
if (endpoint && !this.loadedTabs.has(tab)) {
|
2018-10-10 07:13:34 +00:00
|
|
|
axios
|
|
|
|
.get(endpoint)
|
2018-01-31 09:29:29 +00:00
|
|
|
.then(({ data }) => {
|
2021-12-10 18:14:42 +00:00
|
|
|
// eslint-disable-next-line no-param-reassign
|
|
|
|
tabPanel.innerHTML = sanitize(data.html);
|
|
|
|
this.loadedTabs.add(tab);
|
2018-01-31 09:29:29 +00:00
|
|
|
})
|
2021-06-18 06:10:20 +00:00
|
|
|
.catch(() =>
|
2022-09-28 09:09:28 +00:00
|
|
|
createAlert({
|
2021-06-18 06:10:20 +00:00
|
|
|
message: __('Error loading milestone tab'),
|
|
|
|
}),
|
|
|
|
);
|
2017-11-20 20:28:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|