112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import $ from 'jquery';
|
|
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
|
|
import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
|
|
import { Rails } from '~/lib/utils/rails_ujs';
|
|
import { __, sprintf } from '~/locale';
|
|
|
|
export default class Members {
|
|
constructor() {
|
|
this.addListeners();
|
|
this.initGLDropdown();
|
|
}
|
|
|
|
addListeners() {
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
|
$('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
|
$('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
|
|
disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
|
|
}
|
|
|
|
dropdownClicked(options) {
|
|
options.e.preventDefault();
|
|
|
|
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);
|
|
|
|
initDeprecatedJQueryDropdown($btn, {
|
|
selectable: true,
|
|
isSelectable: (selected, $el) => this.dropdownIsSelectable(selected, $el),
|
|
fieldName: $btn.data('fieldName'),
|
|
id(selected, $el) {
|
|
return $el.data('id');
|
|
},
|
|
toggleLabel: (selected, $el) => this.dropdownToggleLabel(selected, $el, $btn),
|
|
clicked: (options) => this.dropdownClicked(options),
|
|
});
|
|
});
|
|
}
|
|
|
|
formSubmit(e, $el = null) {
|
|
const $this = e ? $(e.currentTarget) : $el;
|
|
const { $toggle, $dateInput } = this.getMemberListItems($this);
|
|
const formEl = $this.closest('form').get(0);
|
|
|
|
Rails.fire(formEl, 'submit');
|
|
|
|
$toggle.disable();
|
|
$dateInput.disable();
|
|
}
|
|
|
|
formSuccess(e) {
|
|
const { $toggle, $dateInput, $expiresIn, $expiresInText } = this.getMemberListItems(
|
|
$(e.currentTarget).closest('.js-member'),
|
|
);
|
|
|
|
const [data] = e.detail;
|
|
const expiresIn = data?.expires_in;
|
|
|
|
if (expiresIn) {
|
|
$expiresIn.removeClass('gl-display-none');
|
|
|
|
$expiresInText.text(sprintf(__('Expires in %{expires_at}'), { expires_at: expiresIn }));
|
|
|
|
const { expires_soon: expiresSoon, expires_at_formatted: expiresAtFormatted } = data;
|
|
|
|
if (expiresSoon) {
|
|
$expiresInText.addClass('text-warning');
|
|
} else {
|
|
$expiresInText.removeClass('text-warning');
|
|
}
|
|
|
|
// Update tooltip
|
|
if (expiresAtFormatted) {
|
|
$expiresInText.attr('title', expiresAtFormatted);
|
|
$expiresInText.attr('data-original-title', expiresAtFormatted);
|
|
}
|
|
} else {
|
|
$expiresIn.addClass('gl-display-none');
|
|
}
|
|
|
|
$toggle.enable();
|
|
$dateInput.enable();
|
|
}
|
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
getMemberListItems($el) {
|
|
const $memberListItem = $el.is('.js-member') ? $el : $(`#${$el.data('elId')}`);
|
|
|
|
return {
|
|
$memberListItem,
|
|
$expiresIn: $memberListItem.find('.js-expires-in'),
|
|
$expiresInText: $memberListItem.find('.js-expires-in-text'),
|
|
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
|
|
$dateInput: $memberListItem.find('.js-access-expiration-date'),
|
|
};
|
|
}
|
|
}
|