diff options
Diffstat (limited to 'app/assets/javascripts/groups_select.js')
-rw-r--r-- | app/assets/javascripts/groups_select.js | 78 |
1 files changed, 63 insertions, 15 deletions
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js index e5dfa30edab..10363c16bae 100644 --- a/app/assets/javascripts/groups_select.js +++ b/app/assets/javascripts/groups_select.js @@ -6,23 +6,60 @@ var slice = [].slice; window.GroupsSelect = (function() { function GroupsSelect() { $('.ajax-groups-select').each((function(_this) { + const self = _this; + return function(i, select) { var all_available, skip_groups; - all_available = $(select).data('all-available'); - skip_groups = $(select).data('skip-groups') || []; - return $(select).select2({ + const $select = $(select); + all_available = $select.data('all-available'); + skip_groups = $select.data('skip-groups') || []; + + $select.select2({ placeholder: "Search for a group", - multiple: $(select).hasClass('multiselect'), + multiple: $select.hasClass('multiselect'), minimumInputLength: 0, - query: function(query) { - var options = { all_available: all_available, skip_groups: skip_groups }; - return Api.groups(query.term, options, function(groups) { - var data; - data = { - results: groups + ajax: { + url: Api.buildUrl(Api.groupsPath), + dataType: 'json', + quietMillis: 250, + transport: function (params) { + $.ajax(params).then((data, status, xhr) => { + const results = data || []; + + const headers = gl.utils.normalizeCRLFHeaders(xhr.getAllResponseHeaders()); + const currentPage = parseInt(headers['X-PAGE'], 10) || 0; + const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0; + const more = currentPage < totalPages; + + return { + results, + pagination: { + more, + }, + }; + }).then(params.success).fail(params.error); + }, + data: function (search, page) { + return { + search, + page, + per_page: GroupsSelect.PER_PAGE, + all_available, + }; + }, + results: function (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 => skip_groups.indexOf(group.id) === -1); + + return { + results, + page, + more, }; - return query.callback(data); - }); + }, }, initSelection: function(element, callback) { var id; @@ -34,19 +71,23 @@ window.GroupsSelect = (function() { formatResult: function() { var args; args = 1 <= arguments.length ? slice.call(arguments, 0) : []; - return _this.formatResult.apply(_this, args); + return self.formatResult.apply(self, args); }, formatSelection: function() { var args; args = 1 <= arguments.length ? slice.call(arguments, 0) : []; - return _this.formatSelection.apply(_this, args); + return self.formatSelection.apply(self, args); }, - dropdownCssClass: "ajax-groups-dropdown", + dropdownCssClass: "ajax-groups-dropdown select2-infinite", // we do not want to escape markup since we are displaying html in results escapeMarkup: function(m) { return m; } }); + + self.dropdown = document.querySelector('.select2-infinite .select2-results'); + + $select.on('select2-loaded', self.forceOverflow.bind(self)); }; })(this)); } @@ -65,5 +106,12 @@ window.GroupsSelect = (function() { return group.full_name; }; + GroupsSelect.prototype.forceOverflow = function (e) { + const itemHeight = this.dropdown.querySelector('.select2-result:first-child').clientHeight; + this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight - (itemHeight * 0.9))}px`; + }; + + GroupsSelect.PER_PAGE = 20; + return GroupsSelect; })(); |