Commit e0014e3d authored by Phil Hughes's avatar Phil Hughes

Refactored with jQuery to make the code nicer & manageable

parent 2bcb9035
......@@ -9,21 +9,8 @@
}
addListeners() {
const ldapPermissionsChangeBtns = document.querySelectorAll('.js-ldap-permissions');
const changeBtnLength = ldapPermissionsChangeBtns.length;
const ldapOverrideBtns = document.querySelectorAll('.js-ldap-override');
const overrideBtnLength = ldapOverrideBtns.length;
for (let i = 0; i < changeBtnLength; i += 1) {
const btn = ldapPermissionsChangeBtns[i];
btn.addEventListener('click', this.showLDAPPermissionsWarning.bind(this));
}
for (let i = 0; i < overrideBtnLength; i += 1) {
const btn = ldapOverrideBtns[i];
btn.addEventListener('click', this.toggleMemberAccessToggle.bind(this));
}
$('.js-ldap-permissions').off('click').on('click', this.showLDAPPermissionsWarning.bind(this));
$('.js-ldap-override').off('click').on('click', this.toggleMemberAccessToggle.bind(this));
$('.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);
......@@ -39,7 +26,11 @@
isSelectable(selected, $el) {
const $link = $($el);
return $link.data('revert') || !$link.hasClass('is-active');
if ($link.data('revert')) {
return false;
}
return !$link.hasClass('is-active');
},
fieldName: $btn.data('field-name'),
id(selected, $el) {
......@@ -56,13 +47,11 @@
const $link = $($el);
if ($link.data('revert')) {
const memberListItem = this.getMemberListItem($link.get(0));
const toggle = memberListItem.querySelectorAll('.dropdown-menu-toggle')[0];
const dateInput = memberListItem.querySelectorAll('.js-access-expiration-date')[0];
const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($link);
toggle.disabled = true;
dateInput.disabled = true;
this.overrideLdap(memberListItem, $link.data('endpoint'), false);
$toggle.attr('disabled', true);
$dateInput.attr('disabled', true);
this.overrideLdap($memberListItem, $link.data('endpoint'), false);
} else {
$btn.closest('form').trigger('submit.rails');
}
......@@ -92,40 +81,36 @@
}
showLDAPPermissionsWarning(e) {
const btn = e.currentTarget;
const memberListItem = this.getMemberListItem(btn);
const ldapPermissionsElement = memberListItem.nextElementSibling;
if (ldapPermissionsElement.style.display === 'none') {
ldapPermissionsElement.style.display = 'block';
} else {
ldapPermissionsElement.style.display = 'none';
}
const $btn = $(e.currentTarget);
const { $memberListItem } = this.getMemberListItems($btn);
const $ldapPermissionsElement = $memberListItem.next();
$ldapPermissionsElement.toggle();
}
getMemberListItem(btn) {
return document.getElementById(btn.dataset.id);
getMemberListItems(btn) {
const $memberListItem = $(`#${btn.data('id')}`);
return {
$memberListItem,
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
$dateInput: $memberListItem.find('.js-access-expiration-date'),
};
}
toggleMemberAccessToggle(e) {
const btn = e.currentTarget;
const memberListItem = this.getMemberListItem(btn);
const toggle = memberListItem.querySelectorAll('.dropdown-menu-toggle')[0];
const dateInput = memberListItem.querySelectorAll('.js-access-expiration-date')[0];
const $btn = $(e.currentTarget);
const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($btn);
this.showLDAPPermissionsWarning(e);
toggle.removeAttribute('disabled');
dateInput.removeAttribute('disabled');
$toggle.removeAttr('disabled');
$dateInput.removeAttr('disabled');
this.overrideLdap(memberListItem, btn.dataset.endpoint, true);
this.overrideLdap($memberListItem, $btn.data('endpoint'), true);
}
overrideLdap(memberListitem, endpoint, override) {
if (override) {
memberListitem.classList.add('is-overriden');
} else {
memberListitem.classList.remove('is-overriden');
}
overrideLdap($memberListitem, endpoint, override) {
$memberListitem.toggleClass('is-overriden', override);
return $.ajax({
url: endpoint,
......
......@@ -161,6 +161,12 @@ ul.content-list {
margin-top: 3px;
margin-bottom: 4px;
&.btn-ldap-override {
@media (min-width: $screen-sm-min) {
margin-bottom: 0;
}
}
&:last-child {
margin-right: 0;
}
......
......@@ -63,7 +63,7 @@
data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
%span.dropdown-toggle-text
= member.human_access
= icon("caret-down")
= icon("chevron-down")
.dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
= dropdown_title("Change permissions")
.dropdown-content
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment