137 lines
3.4 KiB
JavaScript
137 lines
3.4 KiB
JavaScript
import $ from 'jquery';
|
|
import { removeParams } from '~/lib/utils/url_utility';
|
|
import createGroupTree from '~/groups';
|
|
import {
|
|
ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
|
|
ACTIVE_TAB_SHARED,
|
|
ACTIVE_TAB_ARCHIVED,
|
|
CONTENT_LIST_CLASS,
|
|
GROUPS_LIST_HOLDER_CLASS,
|
|
GROUPS_FILTER_FORM_CLASS,
|
|
} from '~/groups/constants';
|
|
import UserTabs from '~/pages/users/user_tabs';
|
|
import GroupFilterableList from '~/groups/groups_filterable_list';
|
|
|
|
export default class GroupTabs extends UserTabs {
|
|
constructor({ defaultAction = 'subgroups_and_projects', action, parentEl }) {
|
|
super({ defaultAction, action, parentEl });
|
|
}
|
|
|
|
bindEvents() {
|
|
this.$parentEl
|
|
.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
|
|
.on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
|
|
}
|
|
|
|
tabShown(event) {
|
|
const $target = $(event.target);
|
|
const action = $target.data('action') || $target.data('targetSection');
|
|
const source = $target.attr('href') || $target.data('targetPath');
|
|
|
|
document.querySelector(GROUPS_FILTER_FORM_CLASS).action = source;
|
|
|
|
this.setTab(action);
|
|
return this.setCurrentAction(source);
|
|
}
|
|
|
|
setTab(action) {
|
|
const loadableActions = [
|
|
ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
|
|
ACTIVE_TAB_SHARED,
|
|
ACTIVE_TAB_ARCHIVED,
|
|
];
|
|
this.enableSearchBar(action);
|
|
this.action = action;
|
|
|
|
if (this.loaded[action]) {
|
|
return;
|
|
}
|
|
|
|
if (loadableActions.includes(action)) {
|
|
this.cleanFilterState();
|
|
this.loadTab(action);
|
|
}
|
|
}
|
|
|
|
loadTab(action) {
|
|
const elId = `js-groups-${action}-tree`;
|
|
const endpoint = this.getEndpoint(action);
|
|
|
|
this.toggleLoading(true);
|
|
|
|
createGroupTree(elId, endpoint, action);
|
|
this.loaded[action] = true;
|
|
|
|
this.toggleLoading(false);
|
|
}
|
|
|
|
getEndpoint(action) {
|
|
const { endpointsDefault, endpointsShared } = this.$parentEl.data();
|
|
let endpoint;
|
|
|
|
switch (action) {
|
|
case ACTIVE_TAB_ARCHIVED:
|
|
endpoint = `${endpointsDefault}?archived=only`;
|
|
break;
|
|
case ACTIVE_TAB_SHARED:
|
|
endpoint = endpointsShared;
|
|
break;
|
|
default:
|
|
// ACTIVE_TAB_SUBGROUPS_AND_PROJECTS
|
|
endpoint = endpointsDefault;
|
|
break;
|
|
}
|
|
|
|
return endpoint;
|
|
}
|
|
|
|
enableSearchBar(action) {
|
|
const containerEl = document.getElementById(action);
|
|
const form = document.querySelector(GROUPS_FILTER_FORM_CLASS);
|
|
const filter = form.querySelector('.js-groups-list-filter');
|
|
const holder = containerEl.querySelector(GROUPS_LIST_HOLDER_CLASS);
|
|
const dataEl = containerEl.querySelector(CONTENT_LIST_CLASS);
|
|
const endpoint = this.getEndpoint(action);
|
|
|
|
if (!dataEl) {
|
|
return;
|
|
}
|
|
|
|
const { dataset } = dataEl;
|
|
const opts = {
|
|
form,
|
|
filter,
|
|
holder,
|
|
filterEndpoint: endpoint || dataset.endpoint,
|
|
pagePath: null,
|
|
dropdownSel: '.js-group-filter-dropdown-wrap',
|
|
filterInputField: 'filter',
|
|
action,
|
|
};
|
|
|
|
if (!this.loaded[action]) {
|
|
const filterableList = new GroupFilterableList(opts);
|
|
filterableList.initSearch();
|
|
}
|
|
}
|
|
|
|
cleanFilterState() {
|
|
const values = Object.values(this.loaded);
|
|
const loadedTabs = values.filter(e => e === true);
|
|
|
|
if (!loadedTabs.length) {
|
|
return;
|
|
}
|
|
|
|
const newState = removeParams(['page'], window.location.search);
|
|
|
|
window.history.replaceState(
|
|
{
|
|
url: newState,
|
|
},
|
|
document.title,
|
|
newState,
|
|
);
|
|
}
|
|
}
|