gitlab-org--gitlab-foss/app/assets/javascripts/members.js

80 lines
2.1 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
export default class Members {
constructor() {
this.addListeners();
this.initGLDropdown();
}
2016-08-31 10:28:58 -04:00
addListeners() {
$('.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');
}
2016-08-31 10:28:58 -04:00
2019-02-27 05:09:52 -05:00
dropdownClicked(options) {
options.e.preventDefault();
2019-02-27 05:09:52 -05:00
this.formSubmit(null, options.$el);
}
// eslint-disable-next-line class-methods-use-this
dropdownToggleLabel(selected, $el) {
return $el.text();
}
// eslint-disable-next-line class-methods-use-this
dropdownIsSelectable(selected, $el) {
return !$el.hasClass('is-active');
}
initGLDropdown() {
$('.js-member-permissions-dropdown').each((i, btn) => {
const $btn = $(btn);
$btn.glDropdown({
selectable: true,
2019-02-27 05:09:52 -05:00
isSelectable: (selected, $el) => this.dropdownIsSelectable(selected, $el),
2018-02-20 17:20:48 -05:00
fieldName: $btn.data('fieldName'),
id(selected, $el) {
return $el.data('id');
},
2019-02-27 05:09:52 -05:00
toggleLabel: (selected, $el) => this.dropdownToggleLabel(selected, $el, $btn),
clicked: options => this.dropdownClicked(options),
});
});
}
2016-08-31 10:28:58 -04:00
formSubmit(e, $el = null) {
const $this = e ? $(e.currentTarget) : $el;
const { $toggle, $dateInput } = this.getMemberListItems($this);
2016-09-05 10:11:45 -04:00
$this.closest('form').trigger('submit.rails');
$toggle.disable();
$dateInput.disable();
}
formSuccess(e) {
const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
$toggle.enable();
$dateInput.enable();
2016-08-31 10:28:58 -04:00
}
2019-02-27 05:09:52 -05:00
// eslint-disable-next-line class-methods-use-this
getMemberListItems($el) {
2018-02-20 17:20:48 -05:00
const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('elId')}`);
2016-08-31 10:28:58 -04:00
return {
$memberListItem,
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
$dateInput: $memberListItem.find('.js-access-expiration-date'),
};
}
}