import $ from 'jquery'; import { escape } from 'lodash'; import { __ } from '~/locale'; import Api from './api'; import axios from './lib/utils/axios_utils'; import { normalizeHeaders } from './lib/utils/common_utils'; import { loadCSSFile } from './lib/utils/css_utils'; const fetchGroups = (params) => { axios[params.type.toLowerCase()](params.url, { params: params.data, }) .then((res) => { const results = res.data || []; const headers = normalizeHeaders(res.headers); const currentPage = parseInt(headers['X-PAGE'], 10) || 0; const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0; const more = currentPage < totalPages; params.success({ results, pagination: { more, }, }); }) .catch(params.error); }; const groupsSelect = () => { loadCSSFile(gon.select2_css_path) .then(() => { // Needs to be accessible in rspec window.GROUP_SELECT_PER_PAGE = 20; $('.ajax-groups-select').each(function setAjaxGroupsSelect2() { const $select = $(this); const allAvailable = $select.data('allAvailable'); const skipGroups = $select.data('skipGroups') || []; const parentGroupID = $select.data('parentId'); const groupsPath = parentGroupID ? Api.subgroupsPath.replace(':id', parentGroupID) : Api.groupsPath; $select.select2({ placeholder: __('Search for a group'), allowClear: $select.hasClass('allowClear'), multiple: $select.hasClass('multiselect'), minimumInputLength: 0, ajax: { url: Api.buildUrl(groupsPath), dataType: 'json', quietMillis: 250, transport(params) { fetchGroups(params); }, data(search, page) { return { search, page, per_page: window.GROUP_SELECT_PER_PAGE, all_available: allAvailable, }; }, results(data, page) { if (data.length) return { results: [] }; const groups = data.length ? data : data.results || []; const more = data.pagination ? data.pagination.more : false; const results = groups.filter((group) => skipGroups.indexOf(group.id) === -1); return { results, page, more, }; }, }, // eslint-disable-next-line consistent-return initSelection(element, callback) { const id = $(element).val(); if (id !== '') { return Api.group(id, callback); } }, formatResult(object) { return `
${escape( object.full_name, )}
${object.full_path}
`; }, formatSelection(object) { return escape(object.full_name); }, dropdownCssClass: 'ajax-groups-dropdown select2-infinite', // we do not want to escape markup since we are displaying html in results escapeMarkup(m) { return m; }, }); $select.on('select2-loaded', () => { const dropdown = document.querySelector('.select2-infinite .select2-results'); dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`; }); }); }) .catch(() => {}); }; export default () => { if ($('.ajax-groups-select').length) { import(/* webpackChunkName: 'select2' */ 'select2/select2') .then(groupsSelect) .catch(() => {}); } };