2016-12-07 10:27:14 -05:00
|
|
|
/* eslint-disable class-methods-use-this */
|
|
|
|
(() => {
|
|
|
|
window.gl = window.gl || {};
|
2016-08-31 10:28:58 -04:00
|
|
|
|
2016-09-02 09:19:11 -04:00
|
|
|
class Members {
|
2016-08-31 10:28:58 -04:00
|
|
|
constructor() {
|
|
|
|
this.addListeners();
|
2016-12-07 10:27:14 -05:00
|
|
|
this.initGLDropdown();
|
2016-08-31 10:28:58 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
addListeners() {
|
2016-10-13 05:25:38 -04:00
|
|
|
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
|
2016-12-07 10:27:14 -05:00
|
|
|
$('.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));
|
2016-09-05 23:28:59 -04:00
|
|
|
gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
|
2016-08-31 10:28:58 -04:00
|
|
|
}
|
|
|
|
|
2016-12-07 10:27:14 -05:00
|
|
|
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();
|
|
|
|
},
|
2017-05-04 08:11:15 -04:00
|
|
|
clicked: (options) => {
|
2017-05-04 12:43:45 -04:00
|
|
|
this.formSubmit(null, options.$el);
|
2016-12-07 10:27:14 -05:00
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-08-31 10:28:58 -04:00
|
|
|
removeRow(e) {
|
|
|
|
const $target = $(e.target);
|
|
|
|
|
|
|
|
if ($target.hasClass('btn-remove')) {
|
2016-09-02 04:25:53 -04:00
|
|
|
$target.closest('.member')
|
2016-12-07 10:27:14 -05:00
|
|
|
.fadeOut(function fadeOutMemberRow() {
|
2016-09-02 04:25:53 -04:00
|
|
|
$(this).remove();
|
|
|
|
});
|
2016-08-31 10:28:58 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-09 05:06:02 -05:00
|
|
|
formSubmit(e, $el = null) {
|
|
|
|
const $this = e ? $(e.currentTarget) : $el;
|
2016-12-07 10:27:14 -05:00
|
|
|
const { $toggle, $dateInput } = this.getMemberListItems($this);
|
|
|
|
|
|
|
|
$this.closest('form').trigger('submit.rails');
|
|
|
|
|
2016-12-09 05:06:02 -05:00
|
|
|
$toggle.disable();
|
|
|
|
$dateInput.disable();
|
2016-09-05 10:11:45 -04:00
|
|
|
}
|
|
|
|
|
2016-12-07 10:27:14 -05:00
|
|
|
formSuccess(e) {
|
|
|
|
const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
|
|
|
|
|
2016-12-09 05:06:02 -05:00
|
|
|
$toggle.enable();
|
|
|
|
$dateInput.enable();
|
2016-12-07 10:27:14 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
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'),
|
|
|
|
};
|
2016-08-31 10:28:58 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-02 09:19:11 -04:00
|
|
|
gl.Members = Members;
|
2016-12-07 10:27:14 -05:00
|
|
|
})();
|