2017-01-11 23:27:41 -05:00
|
|
|
/* eslint-disable func-names, space-before-function-paren, one-var, no-var, prefer-rest-params, wrap-iife, quotes, max-len, one-var-declaration-per-line, vars-on-top, prefer-arrow-callback, consistent-return, comma-dangle, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, no-lonely-if, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
|
2016-12-14 00:26:26 -05:00
|
|
|
/* global Issuable */
|
2017-05-09 09:43:08 -04:00
|
|
|
/* global emitSidebarEvent */
|
2018-03-09 15:18:59 -05:00
|
|
|
|
|
|
|
import $ from 'jquery';
|
2017-08-03 16:31:53 -04:00
|
|
|
import _ from 'underscore';
|
2018-02-02 08:17:23 -05:00
|
|
|
import axios from './lib/utils/axios_utils';
|
2018-04-06 08:12:21 -04:00
|
|
|
import ModalStore from './boards/stores/modal_store';
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-09 09:43:08 -04:00
|
|
|
// TODO: remove eventHub hack after code splitting refactor
|
|
|
|
window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
|
2016-12-14 00:26:26 -05:00
|
|
|
|
2017-10-24 09:48:41 -04:00
|
|
|
function UsersSelect(currentUser, els, options = {}) {
|
2017-05-12 04:15:28 -04:00
|
|
|
var $els;
|
|
|
|
this.users = this.users.bind(this);
|
|
|
|
this.user = this.user.bind(this);
|
|
|
|
this.usersPath = "/autocomplete/users.json";
|
|
|
|
this.userPath = "/autocomplete/users/:id.json";
|
|
|
|
if (currentUser != null) {
|
|
|
|
if (typeof currentUser === 'object') {
|
|
|
|
this.currentUser = currentUser;
|
|
|
|
} else {
|
|
|
|
this.currentUser = JSON.parse(currentUser);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-10-24 09:48:41 -04:00
|
|
|
const { handleClick } = options;
|
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
$els = $(els);
|
|
|
|
|
|
|
|
if (!els) {
|
|
|
|
$els = $('.js-user-search');
|
|
|
|
}
|
|
|
|
|
|
|
|
$els.each((function(_this) {
|
|
|
|
return function(i, dropdown) {
|
|
|
|
var options = {};
|
|
|
|
var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
|
|
|
|
$dropdown = $(dropdown);
|
2018-02-20 17:20:48 -05:00
|
|
|
options.projectId = $dropdown.data('projectId');
|
|
|
|
options.groupId = $dropdown.data('groupId');
|
|
|
|
options.showCurrentUser = $dropdown.data('currentUser');
|
|
|
|
options.todoFilter = $dropdown.data('todoFilter');
|
|
|
|
options.todoStateFilter = $dropdown.data('todoStateFilter');
|
|
|
|
showNullUser = $dropdown.data('nullUser');
|
|
|
|
defaultNullUser = $dropdown.data('nullUserDefault');
|
2017-05-12 04:15:28 -04:00
|
|
|
showMenuAbove = $dropdown.data('showMenuAbove');
|
2018-02-20 17:20:48 -05:00
|
|
|
showAnyUser = $dropdown.data('anyUser');
|
|
|
|
firstUser = $dropdown.data('firstUser');
|
|
|
|
options.authorId = $dropdown.data('authorId');
|
|
|
|
defaultLabel = $dropdown.data('defaultLabel');
|
2017-05-12 04:15:28 -04:00
|
|
|
issueURL = $dropdown.data('issueUpdate');
|
|
|
|
$selectbox = $dropdown.closest('.selectbox');
|
|
|
|
$block = $selectbox.closest('.block');
|
2018-02-20 17:20:48 -05:00
|
|
|
abilityName = $dropdown.data('abilityName');
|
2017-05-12 04:15:28 -04:00
|
|
|
$value = $block.find('.value');
|
|
|
|
$collapsedSidebar = $block.find('.sidebar-collapsed-user');
|
|
|
|
$loading = $block.find('.block-loading').fadeOut();
|
|
|
|
selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
|
2017-05-17 11:26:52 -04:00
|
|
|
selectedId = $dropdown.data('selected');
|
|
|
|
|
|
|
|
if (selectedId === undefined) {
|
|
|
|
selectedId = selectedIdDefault;
|
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
|
|
|
|
const assignYourself = function () {
|
|
|
|
const unassignedSelected = $dropdown.closest('.selectbox')
|
2018-02-20 17:20:48 -05:00
|
|
|
.find(`input[name='${$dropdown.data('fieldName')}'][value=0]`);
|
2017-05-12 04:15:28 -04:00
|
|
|
|
|
|
|
if (unassignedSelected) {
|
|
|
|
unassignedSelected.remove();
|
2016-10-05 07:20:59 -04:00
|
|
|
}
|
2017-02-01 12:02:17 -05:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
// Save current selected user to the DOM
|
|
|
|
const input = document.createElement('input');
|
|
|
|
input.type = 'hidden';
|
2018-02-20 17:20:48 -05:00
|
|
|
input.name = $dropdown.data('fieldName');
|
2017-05-12 04:15:28 -04:00
|
|
|
|
|
|
|
const currentUserInfo = $dropdown.data('currentUserInfo');
|
|
|
|
|
|
|
|
if (currentUserInfo) {
|
|
|
|
input.value = currentUserInfo.id;
|
2017-08-28 14:41:12 -04:00
|
|
|
input.dataset.meta = _.escape(currentUserInfo.name);
|
2017-05-12 04:15:28 -04:00
|
|
|
} else if (_this.currentUser) {
|
|
|
|
input.value = _this.currentUser.id;
|
|
|
|
}
|
2017-02-01 12:02:17 -05:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if ($selectbox) {
|
|
|
|
$dropdown.parent().before(input);
|
|
|
|
} else {
|
|
|
|
$dropdown.after(input);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
if ($block[0]) {
|
|
|
|
$block[0].addEventListener('assignYourself', assignYourself);
|
2017-02-01 12:02:17 -05:00
|
|
|
}
|
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
const getSelectedUserInputs = function() {
|
|
|
|
return $selectbox
|
2018-02-20 17:20:48 -05:00
|
|
|
.find(`input[name="${$dropdown.data('fieldName')}"]`);
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
const getSelected = function() {
|
|
|
|
return getSelectedUserInputs()
|
|
|
|
.map((index, input) => parseInt(input.value, 10))
|
|
|
|
.get();
|
|
|
|
};
|
|
|
|
|
|
|
|
const checkMaxSelect = function() {
|
2018-02-20 17:20:48 -05:00
|
|
|
const maxSelect = $dropdown.data('maxSelect');
|
2017-05-12 04:15:28 -04:00
|
|
|
if (maxSelect) {
|
|
|
|
const selected = getSelected();
|
|
|
|
|
|
|
|
if (selected.length > maxSelect) {
|
|
|
|
const firstSelectedId = selected[0];
|
|
|
|
const firstSelected = $dropdown.closest('.selectbox')
|
2018-02-20 17:20:48 -05:00
|
|
|
.find(`input[name='${$dropdown.data('fieldName')}'][value=${firstSelectedId}]`);
|
2017-05-12 04:15:28 -04:00
|
|
|
|
|
|
|
firstSelected.remove();
|
|
|
|
emitSidebarEvent('sidebar.removeAssignee', {
|
|
|
|
id: firstSelectedId,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
|
|
|
|
const selectedUsers = getSelected()
|
|
|
|
.filter(u => u !== 0);
|
|
|
|
|
|
|
|
const firstUser = getSelectedUserInputs()
|
|
|
|
.map((index, input) => ({
|
|
|
|
name: input.dataset.meta,
|
|
|
|
value: parseInt(input.value, 10),
|
|
|
|
}))
|
|
|
|
.filter(u => u.id !== 0)
|
|
|
|
.get(0);
|
|
|
|
|
|
|
|
if (selectedUsers.length === 0) {
|
|
|
|
return 'Unassigned';
|
|
|
|
} else if (selectedUsers.length === 1) {
|
|
|
|
return firstUser.name;
|
|
|
|
} else if (isSelected) {
|
|
|
|
const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
|
|
|
|
return `${selectedUser.name} + ${otherSelected.length} more`;
|
|
|
|
} else {
|
|
|
|
return `${firstUser.name} + ${selectedUsers.length - 1} more`;
|
|
|
|
}
|
|
|
|
};
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
$('.assign-to-me-link').on('click', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
$(e.currentTarget).hide();
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if ($dropdown.data('multiSelect')) {
|
|
|
|
assignYourself();
|
|
|
|
checkMaxSelect();
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
const currentUserInfo = $dropdown.data('currentUserInfo');
|
|
|
|
$dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
|
|
|
|
} else {
|
2018-02-20 17:20:48 -05:00
|
|
|
const $input = $(`input[name="${$dropdown.data('fieldName')}"]`);
|
2017-05-12 04:15:28 -04:00
|
|
|
$input.val(gon.current_user_id);
|
|
|
|
selectedId = $input.val();
|
|
|
|
$dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
|
|
|
|
}
|
|
|
|
});
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
$block.on('click', '.js-assign-yourself', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
return assignTo(_this.currentUser.id);
|
|
|
|
});
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
assignTo = function(selected) {
|
|
|
|
var data;
|
|
|
|
data = {};
|
|
|
|
data[abilityName] = {};
|
|
|
|
data[abilityName].assignee_id = selected != null ? selected : null;
|
|
|
|
$loading.removeClass('hidden').fadeIn();
|
|
|
|
$dropdown.trigger('loading.gl.dropdown');
|
|
|
|
|
2018-02-02 08:17:23 -05:00
|
|
|
return axios.put(issueURL, data)
|
|
|
|
.then(({ data }) => {
|
|
|
|
var user;
|
|
|
|
$dropdown.trigger('loaded.gl.dropdown');
|
|
|
|
$loading.fadeOut();
|
|
|
|
if (data.assignee) {
|
|
|
|
user = {
|
|
|
|
name: data.assignee.name,
|
|
|
|
username: data.assignee.username,
|
|
|
|
avatar: data.assignee.avatar_url
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
user = {
|
|
|
|
name: 'Unassigned',
|
|
|
|
username: '',
|
|
|
|
avatar: ''
|
|
|
|
};
|
|
|
|
}
|
|
|
|
$value.html(assigneeTemplate(user));
|
|
|
|
$collapsedSidebar.attr('title', _.escape(user.name)).tooltip('fixTitle');
|
|
|
|
return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
|
|
|
|
});
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
|
|
|
|
assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
|
|
|
|
return $dropdown.glDropdown({
|
|
|
|
showMenuAbove: showMenuAbove,
|
|
|
|
data: function(term, callback) {
|
|
|
|
return _this.users(term, options, function(users) {
|
|
|
|
// GitLabDropdownFilter returns this.instance
|
|
|
|
// GitLabDropdownRemote returns this.options.instance
|
|
|
|
const glDropdown = this.instance || this.options.instance;
|
|
|
|
glDropdown.options.processData(term, users, callback);
|
|
|
|
}.bind(this));
|
|
|
|
},
|
2017-05-26 17:27:30 -04:00
|
|
|
processData: function(term, data, callback) {
|
|
|
|
let users = data;
|
|
|
|
|
|
|
|
// Only show assigned user list when there is no search term
|
|
|
|
if ($dropdown.hasClass('js-multiselect') && term.length === 0) {
|
|
|
|
const selectedInputs = getSelectedUserInputs();
|
|
|
|
|
|
|
|
// Potential duplicate entries when dealing with issue board
|
|
|
|
// because issue board is also managed by vue
|
|
|
|
const selectedUsers = _.uniq(selectedInputs, false, a => a.value)
|
|
|
|
.filter((input) => {
|
|
|
|
const userId = parseInt(input.value, 10);
|
|
|
|
const inUsersArray = users.find(u => u.id === userId);
|
|
|
|
|
|
|
|
return !inUsersArray && userId !== 0;
|
|
|
|
})
|
|
|
|
.map((input) => {
|
|
|
|
const userId = parseInt(input.value, 10);
|
|
|
|
const { avatarUrl, avatar_url, name, username } = input.dataset;
|
|
|
|
return {
|
|
|
|
avatar_url: avatarUrl || avatar_url,
|
|
|
|
id: userId,
|
|
|
|
name,
|
|
|
|
username,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
users = data.concat(selectedUsers);
|
|
|
|
}
|
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
let anyUser;
|
|
|
|
let index;
|
|
|
|
let j;
|
|
|
|
let len;
|
|
|
|
let name;
|
|
|
|
let obj;
|
|
|
|
let showDivider;
|
|
|
|
if (term.length === 0) {
|
|
|
|
showDivider = 0;
|
|
|
|
if (firstUser) {
|
|
|
|
// Move current user to the front of the list
|
|
|
|
for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
|
|
|
|
obj = users[index];
|
|
|
|
if (obj.username === firstUser) {
|
|
|
|
users.splice(index, 1);
|
|
|
|
users.unshift(obj);
|
|
|
|
break;
|
|
|
|
}
|
2017-05-04 16:55:36 -04:00
|
|
|
}
|
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
if (showNullUser) {
|
|
|
|
showDivider += 1;
|
|
|
|
users.unshift({
|
|
|
|
beforeDivider: true,
|
|
|
|
name: 'Unassigned',
|
|
|
|
id: 0
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (showAnyUser) {
|
|
|
|
showDivider += 1;
|
|
|
|
name = showAnyUser;
|
|
|
|
if (name === true) {
|
|
|
|
name = 'Any User';
|
|
|
|
}
|
|
|
|
anyUser = {
|
|
|
|
beforeDivider: true,
|
|
|
|
name: name,
|
|
|
|
id: null
|
|
|
|
};
|
|
|
|
users.unshift(anyUser);
|
2017-05-04 08:11:15 -04:00
|
|
|
}
|
2016-10-05 07:20:59 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (showDivider) {
|
|
|
|
users.splice(showDivider, 0, 'divider');
|
2016-10-05 07:20:59 -04:00
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if ($dropdown.hasClass('js-multiselect')) {
|
|
|
|
const selected = getSelected().filter(i => i !== 0);
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (selected.length > 0) {
|
2018-02-20 17:20:48 -05:00
|
|
|
if ($dropdown.data('dropdownHeader')) {
|
2017-05-04 08:11:15 -04:00
|
|
|
showDivider += 1;
|
2017-05-12 04:15:28 -04:00
|
|
|
users.splice(showDivider, 0, {
|
2018-02-20 17:20:48 -05:00
|
|
|
header: $dropdown.data('dropdownHeader'),
|
2017-05-04 08:11:15 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
const selectedUsers = users
|
|
|
|
.filter(u => selected.indexOf(u.id) !== -1)
|
|
|
|
.sort((a, b) => a.name > b.name);
|
2016-10-04 15:21:06 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
users = users.filter(u => selected.indexOf(u.id) === -1);
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
selectedUsers.forEach((selectedUser) => {
|
|
|
|
showDivider += 1;
|
|
|
|
users.splice(showDivider, 0, selectedUser);
|
|
|
|
});
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
users.splice(showDivider + 1, 0, 'divider');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
callback(users);
|
|
|
|
if (showMenuAbove) {
|
|
|
|
$dropdown.data('glDropdown').positionMenuAbove();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
filterable: true,
|
|
|
|
filterRemote: true,
|
|
|
|
search: {
|
|
|
|
fields: ['name', 'username']
|
|
|
|
},
|
|
|
|
selectable: true,
|
2018-02-20 17:20:48 -05:00
|
|
|
fieldName: $dropdown.data('fieldName'),
|
2017-05-12 04:15:28 -04:00
|
|
|
toggleLabel: function(selected, el, glDropdown) {
|
|
|
|
const inputValue = glDropdown.filterInput.val();
|
|
|
|
|
|
|
|
if (this.multiSelect && inputValue === '') {
|
|
|
|
// Remove non-users from the fullData array
|
|
|
|
const users = glDropdown.filteredFullData();
|
|
|
|
const callback = glDropdown.parseData.bind(glDropdown);
|
|
|
|
|
|
|
|
// Update the data model
|
|
|
|
this.processData(inputValue, users, callback);
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (this.multiSelect) {
|
|
|
|
return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (selected && 'id' in selected && $(el).hasClass('is-active')) {
|
|
|
|
$dropdown.find('.dropdown-toggle-text').removeClass('is-default');
|
|
|
|
if (selected.text) {
|
|
|
|
return selected.text;
|
|
|
|
} else {
|
|
|
|
return selected.name;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$dropdown.find('.dropdown-toggle-text').addClass('is-default');
|
|
|
|
return defaultLabel;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
defaultLabel: defaultLabel,
|
|
|
|
hidden: function(e) {
|
|
|
|
if ($dropdown.hasClass('js-multiselect')) {
|
|
|
|
emitSidebarEvent('sidebar.saveAssignees');
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2018-02-20 17:20:48 -05:00
|
|
|
if (!$dropdown.data('alwaysShowSelectbox')) {
|
2017-05-12 04:15:28 -04:00
|
|
|
$selectbox.hide();
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
// Recalculate where .value is because vue might have changed it
|
|
|
|
$block = $selectbox.closest('.block');
|
|
|
|
$value = $block.find('.value');
|
|
|
|
// display:block overrides the hide-collapse rule
|
|
|
|
$value.css('display', '');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
multiSelect: $dropdown.hasClass('js-multiselect'),
|
2018-02-20 17:20:48 -05:00
|
|
|
inputMeta: $dropdown.data('inputMeta'),
|
2017-05-12 04:15:28 -04:00
|
|
|
clicked: function(options) {
|
|
|
|
const { $el, e, isMarking } = options;
|
|
|
|
const user = options.selectedObj;
|
|
|
|
|
|
|
|
if ($dropdown.hasClass('js-multiselect')) {
|
|
|
|
const isActive = $el.hasClass('is-active');
|
|
|
|
const previouslySelected = $dropdown.closest('.selectbox')
|
2018-02-20 17:20:48 -05:00
|
|
|
.find("input[name='" + ($dropdown.data('fieldName')) + "'][value!=0]");
|
2017-05-12 04:15:28 -04:00
|
|
|
|
|
|
|
// Enables support for limiting the number of users selected
|
|
|
|
// Automatically removes the first on the list if more users are selected
|
|
|
|
checkMaxSelect();
|
|
|
|
|
|
|
|
if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
|
|
|
|
// Unassigned selected
|
|
|
|
previouslySelected.each((index, element) => {
|
|
|
|
const id = parseInt(element.value, 10);
|
|
|
|
element.remove();
|
|
|
|
});
|
|
|
|
emitSidebarEvent('sidebar.removeAllAssignees');
|
|
|
|
} else if (isActive) {
|
|
|
|
// user selected
|
|
|
|
emitSidebarEvent('sidebar.addAssignee', user);
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
// Remove unassigned selection (if it was previously selected)
|
|
|
|
const unassignedSelected = $dropdown.closest('.selectbox')
|
2018-02-20 17:20:48 -05:00
|
|
|
.find("input[name='" + ($dropdown.data('fieldName')) + "'][value=0]");
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (unassignedSelected) {
|
|
|
|
unassignedSelected.remove();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (previouslySelected.length === 0) {
|
|
|
|
// Select unassigned because there is no more selected users
|
2018-02-20 17:20:48 -05:00
|
|
|
this.addInput($dropdown.data('fieldName'), 0, {});
|
2017-05-04 08:11:15 -04:00
|
|
|
}
|
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
// User unselected
|
|
|
|
emitSidebarEvent('sidebar.removeAssignee', user);
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (getSelected().find(u => u === gon.current_user_id)) {
|
|
|
|
$('.assign-to-me-link').hide();
|
|
|
|
} else {
|
|
|
|
$('.assign-to-me-link').show();
|
|
|
|
}
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
var isIssueIndex, isMRIndex, page, selected;
|
2017-10-06 16:36:15 -04:00
|
|
|
page = $('body').attr('data-page');
|
2017-05-12 04:15:28 -04:00
|
|
|
isIssueIndex = page === 'projects:issues:index';
|
|
|
|
isMRIndex = (page === page && page === 'projects:merge_requests:index');
|
|
|
|
if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
|
|
|
|
e.preventDefault();
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
const isSelecting = (user.id !== selectedId);
|
|
|
|
selectedId = isSelecting ? user.id : selectedIdDefault;
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (selectedId === gon.current_user_id) {
|
|
|
|
$('.assign-to-me-link').hide();
|
|
|
|
} else {
|
|
|
|
$('.assign-to-me-link').show();
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if ($el.closest('.add-issues-modal').length) {
|
2018-04-06 08:12:21 -04:00
|
|
|
ModalStore.store.filter[$dropdown.data('fieldName')] = user.id;
|
2017-10-24 09:48:41 -04:00
|
|
|
} else if (handleClick) {
|
|
|
|
e.preventDefault();
|
|
|
|
handleClick(user, isMarking);
|
2017-05-12 04:15:28 -04:00
|
|
|
} else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
|
|
|
|
return Issuable.filterResults($dropdown.closest('form'));
|
|
|
|
} else if ($dropdown.hasClass('js-filter-submit')) {
|
|
|
|
return $dropdown.closest('form').submit();
|
|
|
|
} else if (!$dropdown.hasClass('js-multiselect')) {
|
2018-02-20 17:20:48 -05:00
|
|
|
selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('fieldName')) + "']").val();
|
2017-05-12 04:15:28 -04:00
|
|
|
return assignTo(selected);
|
|
|
|
}
|
2017-05-04 14:36:18 -04:00
|
|
|
|
2017-05-12 14:04:07 -04:00
|
|
|
// Automatically close dropdown after assignee is selected
|
|
|
|
// since CE has no multiple assignees
|
|
|
|
// EE does not have a max-select
|
2018-02-20 17:20:48 -05:00
|
|
|
if ($dropdown.data('maxSelect') &&
|
|
|
|
getSelected().length === $dropdown.data('maxSelect')) {
|
2017-05-12 14:04:07 -04:00
|
|
|
// Close the dropdown
|
2017-05-17 11:13:40 -04:00
|
|
|
$dropdown.dropdown('toggle');
|
2017-05-12 14:04:07 -04:00
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
},
|
|
|
|
id: function (user) {
|
|
|
|
return user.id;
|
|
|
|
},
|
|
|
|
opened: function(e) {
|
|
|
|
const $el = $(e.currentTarget);
|
2017-05-17 11:26:52 -04:00
|
|
|
const selected = getSelected();
|
|
|
|
if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
|
2018-02-20 17:20:48 -05:00
|
|
|
this.addInput($dropdown.data('fieldName'), 0, {});
|
2017-05-12 04:15:28 -04:00
|
|
|
}
|
|
|
|
$el.find('.is-active').removeClass('is-active');
|
2017-05-04 14:36:18 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
function highlightSelected(id) {
|
|
|
|
$el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
|
|
|
|
}
|
2017-05-04 14:36:18 -04:00
|
|
|
|
2017-05-17 11:26:52 -04:00
|
|
|
if (selected.length > 0) {
|
2017-05-12 04:15:28 -04:00
|
|
|
getSelected().forEach(selectedId => highlightSelected(selectedId));
|
2017-05-17 11:26:52 -04:00
|
|
|
} else if ($dropdown.hasClass('js-issue-board-sidebar')) {
|
|
|
|
highlightSelected(0);
|
2017-05-12 04:15:28 -04:00
|
|
|
} else {
|
|
|
|
highlightSelected(selectedId);
|
|
|
|
}
|
|
|
|
},
|
2018-02-20 17:20:48 -05:00
|
|
|
updateLabel: $dropdown.data('dropdownTitle'),
|
2017-05-12 04:15:28 -04:00
|
|
|
renderRow: function(user) {
|
|
|
|
var avatar, img, listClosingTags, listWithName, listWithUserName, username;
|
|
|
|
username = user.username ? "@" + user.username : "";
|
2018-01-23 17:29:20 -05:00
|
|
|
avatar = user.avatar_url ? user.avatar_url : gon.default_avatar_url;
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-17 11:26:52 -04:00
|
|
|
let selected = false;
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (this.multiSelect) {
|
2017-05-17 11:26:52 -04:00
|
|
|
selected = getSelected().find(u => user.id === u);
|
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
const fieldName = this.fieldName;
|
|
|
|
const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
if (field.length) {
|
|
|
|
selected = true;
|
|
|
|
}
|
2017-05-17 11:26:52 -04:00
|
|
|
} else {
|
|
|
|
selected = user.id === selectedId;
|
2017-05-12 04:15:28 -04:00
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
img = "";
|
|
|
|
if (user.beforeDivider != null) {
|
2017-08-28 14:41:12 -04:00
|
|
|
`<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${_.escape(user.name)}</a></li>`;
|
2017-05-12 04:15:28 -04:00
|
|
|
} else {
|
2018-01-23 17:29:20 -05:00
|
|
|
img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
|
2017-05-12 04:15:28 -04:00
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
|
2017-05-12 04:15:28 -04:00
|
|
|
return `
|
|
|
|
<li data-user-id=${user.id}>
|
|
|
|
<a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
|
|
|
|
${img}
|
|
|
|
<strong class='dropdown-menu-user-full-name'>
|
2017-08-28 14:41:12 -04:00
|
|
|
${_.escape(user.name)}
|
2017-05-12 04:15:28 -04:00
|
|
|
</strong>
|
|
|
|
${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
})(this));
|
|
|
|
$('.ajax-users-select').each((function(_this) {
|
|
|
|
return function(i, select) {
|
|
|
|
var firstUser, showAnyUser, showEmailUser, showNullUser;
|
|
|
|
var options = {};
|
|
|
|
options.skipLdap = $(select).hasClass('skip_ldap');
|
2018-02-20 17:20:48 -05:00
|
|
|
options.projectId = $(select).data('projectId');
|
|
|
|
options.groupId = $(select).data('groupId');
|
|
|
|
options.showCurrentUser = $(select).data('currentUser');
|
|
|
|
options.authorId = $(select).data('authorId');
|
|
|
|
options.skipUsers = $(select).data('skipUsers');
|
|
|
|
showNullUser = $(select).data('nullUser');
|
|
|
|
showAnyUser = $(select).data('anyUser');
|
|
|
|
showEmailUser = $(select).data('emailUser');
|
|
|
|
firstUser = $(select).data('firstUser');
|
2017-05-12 04:15:28 -04:00
|
|
|
return $(select).select2({
|
|
|
|
placeholder: "Search for a user",
|
|
|
|
multiple: $(select).hasClass('multiselect'),
|
|
|
|
minimumInputLength: 0,
|
|
|
|
query: function(query) {
|
|
|
|
return _this.users(query.term, options, function(users) {
|
|
|
|
var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
|
|
|
|
data = {
|
|
|
|
results: users
|
|
|
|
};
|
|
|
|
if (query.term.length === 0) {
|
|
|
|
if (firstUser) {
|
|
|
|
// Move current user to the front of the list
|
|
|
|
ref = data.results;
|
|
|
|
for (index = j = 0, len = ref.length; j < len; index = (j += 1)) {
|
|
|
|
obj = ref[index];
|
|
|
|
if (obj.username === firstUser) {
|
|
|
|
data.results.splice(index, 1);
|
|
|
|
data.results.unshift(obj);
|
|
|
|
break;
|
|
|
|
}
|
2017-05-04 08:11:15 -04:00
|
|
|
}
|
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
if (showNullUser) {
|
|
|
|
nullUser = {
|
|
|
|
name: 'Unassigned',
|
|
|
|
id: 0
|
|
|
|
};
|
|
|
|
data.results.unshift(nullUser);
|
|
|
|
}
|
|
|
|
if (showAnyUser) {
|
|
|
|
name = showAnyUser;
|
|
|
|
if (name === true) {
|
|
|
|
name = 'Any User';
|
2016-07-24 16:45:11 -04:00
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
anyUser = {
|
|
|
|
name: name,
|
|
|
|
id: null
|
|
|
|
};
|
|
|
|
data.results.unshift(anyUser);
|
2016-07-24 16:45:11 -04:00
|
|
|
}
|
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
|
|
|
|
var trimmed = query.term.trim();
|
|
|
|
emailUser = {
|
2017-08-25 03:04:08 -04:00
|
|
|
name: "Invite \"" + query.term + "\" by email",
|
2017-05-12 04:15:28 -04:00
|
|
|
username: trimmed,
|
2017-08-25 03:04:08 -04:00
|
|
|
id: trimmed,
|
|
|
|
invite: true
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
data.results.unshift(emailUser);
|
2016-07-24 16:45:11 -04:00
|
|
|
}
|
2017-05-12 04:15:28 -04:00
|
|
|
return query.callback(data);
|
2016-07-24 16:45:11 -04:00
|
|
|
});
|
|
|
|
},
|
2017-05-12 04:15:28 -04:00
|
|
|
initSelection: function() {
|
|
|
|
var args;
|
|
|
|
args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
|
|
|
|
return _this.initSelection.apply(_this, args);
|
|
|
|
},
|
|
|
|
formatResult: function() {
|
|
|
|
var args;
|
|
|
|
args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
|
|
|
|
return _this.formatResult.apply(_this, args);
|
|
|
|
},
|
|
|
|
formatSelection: function() {
|
|
|
|
var args;
|
|
|
|
args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
|
|
|
|
return _this.formatSelection.apply(_this, args);
|
|
|
|
},
|
|
|
|
dropdownCssClass: "ajax-users-dropdown",
|
|
|
|
// we do not want to escape markup since we are displaying html in results
|
|
|
|
escapeMarkup: function(m) {
|
|
|
|
return m;
|
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
});
|
|
|
|
};
|
2017-05-12 04:15:28 -04:00
|
|
|
})(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
UsersSelect.prototype.initSelection = function(element, callback) {
|
|
|
|
var id, nullUser;
|
|
|
|
id = $(element).val();
|
|
|
|
if (id === "0") {
|
|
|
|
nullUser = {
|
|
|
|
name: 'Unassigned'
|
2016-07-24 16:45:11 -04:00
|
|
|
};
|
2017-05-12 04:15:28 -04:00
|
|
|
return callback(nullUser);
|
|
|
|
} else if (id !== "") {
|
|
|
|
return this.user(id, callback);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
UsersSelect.prototype.formatResult = function(user) {
|
|
|
|
var avatar;
|
|
|
|
if (user.avatar_url) {
|
|
|
|
avatar = user.avatar_url;
|
|
|
|
} else {
|
|
|
|
avatar = gon.default_avatar_url;
|
|
|
|
}
|
2017-08-28 14:41:12 -04:00
|
|
|
return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" + avatar + "'></div> <div class='user-name dropdown-menu-user-full-name'>" + _.escape(user.name) + "</div> <div class='user-username dropdown-menu-user-username'>" + (!user.invite ? "@" + _.escape(user.username) : "") + "</div> </div>";
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
UsersSelect.prototype.formatSelection = function(user) {
|
2017-08-28 14:41:12 -04:00
|
|
|
return _.escape(user.name);
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
UsersSelect.prototype.user = function(user_id, callback) {
|
|
|
|
if (!/^\d+$/.test(user_id)) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
var url;
|
|
|
|
url = this.buildUrl(this.userPath);
|
|
|
|
url = url.replace(':id', user_id);
|
2018-02-02 08:17:23 -05:00
|
|
|
return axios.get(url)
|
|
|
|
.then(({ data }) => {
|
|
|
|
callback(data);
|
|
|
|
});
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
// Return users list. Filtered by query
|
|
|
|
// Only active users retrieved
|
|
|
|
UsersSelect.prototype.users = function(query, options, callback) {
|
2018-02-02 08:17:23 -05:00
|
|
|
const url = this.buildUrl(this.usersPath);
|
|
|
|
const params = {
|
|
|
|
search: query,
|
|
|
|
active: true,
|
|
|
|
project_id: options.projectId || null,
|
|
|
|
group_id: options.groupId || null,
|
|
|
|
skip_ldap: options.skipLdap || null,
|
|
|
|
todo_filter: options.todoFilter || null,
|
|
|
|
todo_state_filter: options.todoStateFilter || null,
|
|
|
|
current_user: options.showCurrentUser || null,
|
|
|
|
author_id: options.authorId || null,
|
|
|
|
skip_users: options.skipUsers || null
|
|
|
|
};
|
|
|
|
return axios.get(url, { params })
|
|
|
|
.then(({ data }) => {
|
|
|
|
callback(data);
|
|
|
|
});
|
2017-05-12 04:15:28 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
UsersSelect.prototype.buildUrl = function(url) {
|
|
|
|
if (gon.relative_url_root != null) {
|
|
|
|
url = gon.relative_url_root.replace(/\/$/, '') + url;
|
|
|
|
}
|
|
|
|
return url;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default UsersSelect;
|