Updated members dropdowns
This ports some code over from EE to reduce conflicts
This commit is contained in:
Phil Hughes
parent
e09c6df068
commit
19fb84e3a8
10 changed files with 109 additions and 15 deletions
|
|
@ -650,6 +650,11 @@
|
|||
} else if(value) {
|
||||
field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
|
||||
}
|
||||
|
||||
if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (el.hasClass(ACTIVE_CLASS)) {
|
||||
el.removeClass(ACTIVE_CLASS);
|
||||
if (field && field.length) {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,87 @@
|
|||
/* eslint-disable */
|
||||
((w) => {
|
||||
w.gl = w.gl || {};
|
||||
/* eslint-disable class-methods-use-this */
|
||||
(() => {
|
||||
window.gl = window.gl || {};
|
||||
|
||||
class Members {
|
||||
constructor() {
|
||||
this.addListeners();
|
||||
this.initGLDropdown();
|
||||
}
|
||||
|
||||
addListeners() {
|
||||
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
|
||||
$('.js-member-update-control').off('change').on('change', this.formSubmit);
|
||||
$('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess);
|
||||
$('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
|
||||
$('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
|
||||
gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
|
||||
}
|
||||
|
||||
initGLDropdown() {
|
||||
$('.js-member-permissions-dropdown').each((i, btn) => {
|
||||
const $btn = $(btn);
|
||||
|
||||
$btn.glDropdown({
|
||||
selectable: true,
|
||||
isSelectable(selected, $el) {
|
||||
return !$el.hasClass('is-active');
|
||||
},
|
||||
fieldName: $btn.data('field-name'),
|
||||
id(selected, $el) {
|
||||
return $el.data('id');
|
||||
},
|
||||
toggleLabel(selected, $el) {
|
||||
return $el.text();
|
||||
},
|
||||
clicked: (selected, $el) => {
|
||||
const $link = $($el);
|
||||
const { $toggle, $dateInput } = this.getMemberListItems($link);
|
||||
|
||||
$toggle.attr('disabled', true);
|
||||
$dateInput.attr('disabled', true);
|
||||
|
||||
$btn.closest('form').trigger('submit.rails');
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
removeRow(e) {
|
||||
const $target = $(e.target);
|
||||
|
||||
if ($target.hasClass('btn-remove')) {
|
||||
$target.closest('.member')
|
||||
.fadeOut(function () {
|
||||
.fadeOut(function fadeOutMemberRow() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
formSubmit() {
|
||||
$(this).closest('form').trigger("submit.rails").end().disable();
|
||||
formSubmit(e) {
|
||||
const $this = $(e.currentTarget);
|
||||
const { $toggle, $dateInput } = this.getMemberListItems($this);
|
||||
|
||||
$this.closest('form').trigger('submit.rails');
|
||||
|
||||
$toggle.attr('disabled', true);
|
||||
$dateInput.attr('disabled', true);
|
||||
}
|
||||
|
||||
formSuccess() {
|
||||
$(this).find('.js-member-update-control').enable();
|
||||
formSuccess(e) {
|
||||
const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
|
||||
|
||||
$toggle.removeAttr('disabled');
|
||||
$dateInput.removeAttr('disabled');
|
||||
}
|
||||
|
||||
getMemberListItems($el) {
|
||||
const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
|
||||
|
||||
return {
|
||||
$memberListItem,
|
||||
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
|
||||
$dateInput: $memberListItem.find('.js-access-expiration-date'),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
gl.Members = Members;
|
||||
})(window);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -42,6 +42,11 @@
|
|||
border-radius: $border-radius-base;
|
||||
white-space: nowrap;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $input-bg-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.no-outline {
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@
|
|||
@media (min-width: $screen-sm-min) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.member-access-text {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
:plain
|
||||
var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}');
|
||||
$("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
|
||||
gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@group_member)}"));
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
:plain
|
||||
var $listItem = $('#{escape_javascript(render('shared/members/member', member: @project_member))}');
|
||||
$("##{dom_id(@project_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
|
||||
gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@project_member)}"));
|
||||
|
|
|
|||
|
|
@ -48,9 +48,25 @@
|
|||
- if show_controls
|
||||
- if user != current_user
|
||||
= form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
|
||||
= f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can_admin_member
|
||||
= f.hidden_field :access_level
|
||||
.member-form-control.dropdown.append-right-5
|
||||
%button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
|
||||
disabled: !can_admin_member,
|
||||
data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
|
||||
%span.dropdown-toggle-text
|
||||
= member.human_access
|
||||
= icon("chevron-down")
|
||||
.dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
|
||||
= dropdown_title("Change permissions")
|
||||
.dropdown-content
|
||||
%ul
|
||||
- Gitlab::Access.options.each do |role, role_id|
|
||||
%li
|
||||
= link_to role, "javascript:void(0)",
|
||||
class: ("is-active" if member.access_level == role_id),
|
||||
data: { id: role_id, el_id: dom_id(member) }
|
||||
.prepend-left-5.clearable-input.member-form-control
|
||||
= f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member
|
||||
= f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member, data: { el_id: dom_id(member) }
|
||||
%i.clear-icon.js-clear-input
|
||||
- else
|
||||
%span.member-access-text= member.human_access
|
||||
|
|
|
|||
4
changelogs/unreleased/members-dropdowns.yml
Normal file
4
changelogs/unreleased/members-dropdowns.yml
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Updated members dropdowns
|
||||
merge_request:
|
||||
author:
|
||||
|
|
@ -117,7 +117,12 @@ class Spinach::Features::GroupMembers < Spinach::FeatureSteps
|
|||
member = mary_jane_member
|
||||
|
||||
page.within "#group_member_#{member.id}" do
|
||||
select 'Developer', from: "member_access_level_#{member.id}"
|
||||
click_button member.human_access
|
||||
|
||||
page.within '.dropdown-menu' do
|
||||
click_link 'Developer'
|
||||
end
|
||||
|
||||
wait_for_ajax
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -65,7 +65,11 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps
|
|||
user = User.find_by(name: 'Dmitriy')
|
||||
project_member = project.project_members.find_by(user_id: user.id)
|
||||
page.within "#project_member_#{project_member.id}" do
|
||||
select "Reporter", from: "member_access_level_#{project_member.id}"
|
||||
click_button project_member.human_access
|
||||
|
||||
page.within '.dropdown-menu' do
|
||||
click_link 'Reporter'
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue