debian-mirror-gitlab/app/assets/javascripts/members.js

114 lines
3.2 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2021-01-03 14:25:43 +05:30
import { Rails } from '~/lib/utils/rails_ujs';
2020-07-28 23:09:34 +05:30
import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
2020-11-24 15:15:51 +05:30
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
2021-01-03 14:25:43 +05:30
import { __, sprintf } from '~/locale';
2018-05-09 12:01:36 +05:30
2018-03-17 18:26:18 +05:30
export default class Members {
constructor() {
this.addListeners();
this.initGLDropdown();
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
addListeners() {
2018-12-13 13:39:08 +05:30
$('.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));
2020-07-28 23:09:34 +05:30
disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2019-07-07 11:18:12 +05:30
dropdownClicked(options) {
2019-12-04 20:38:33 +05:30
options.e.preventDefault();
2019-07-07 11:18:12 +05:30
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');
}
2018-03-17 18:26:18 +05:30
initGLDropdown() {
$('.js-member-permissions-dropdown').each((i, btn) => {
const $btn = $(btn);
2020-11-24 15:15:51 +05:30
initDeprecatedJQueryDropdown($btn, {
2018-03-17 18:26:18 +05:30
selectable: true,
2019-07-07 11:18:12 +05:30
isSelectable: (selected, $el) => this.dropdownIsSelectable(selected, $el),
2018-03-27 19:54:05 +05:30
fieldName: $btn.data('fieldName'),
2018-03-17 18:26:18 +05:30
id(selected, $el) {
return $el.data('id');
},
2019-07-07 11:18:12 +05:30
toggleLabel: (selected, $el) => this.dropdownToggleLabel(selected, $el, $btn),
clicked: options => this.dropdownClicked(options),
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
});
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
formSubmit(e, $el = null) {
const $this = e ? $(e.currentTarget) : $el;
const { $toggle, $dateInput } = this.getMemberListItems($this);
2021-01-03 14:25:43 +05:30
const formEl = $this.closest('form').get(0);
2017-08-17 22:00:37 +05:30
2021-01-03 14:25:43 +05:30
Rails.fire(formEl, 'submit');
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
$toggle.disable();
$dateInput.disable();
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
formSuccess(e) {
2021-01-03 14:25:43 +05:30
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');
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
$toggle.enable();
$dateInput.enable();
2017-08-17 22:00:37 +05:30
}
2019-07-07 11:18:12 +05:30
2018-03-17 18:26:18 +05:30
// eslint-disable-next-line class-methods-use-this
getMemberListItems($el) {
2021-01-03 14:25:43 +05:30
const $memberListItem = $el.is('.js-member') ? $el : $(`#${$el.data('elId')}`);
2018-03-17 18:26:18 +05:30
return {
$memberListItem,
2021-01-03 14:25:43 +05:30
$expiresIn: $memberListItem.find('.js-expires-in'),
$expiresInText: $memberListItem.find('.js-expires-in-text'),
2018-03-17 18:26:18 +05:30
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
$dateInput: $memberListItem.find('.js-access-expiration-date'),
};
}
}