Remove members and memberExpirationDate from window object
This commit is contained in:
parent
019032747a
commit
697967c177
|
@ -81,6 +81,8 @@ import AbuseReports from './abuse_reports';
|
||||||
import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
|
import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
|
||||||
import AjaxLoadingSpinner from './ajax_loading_spinner';
|
import AjaxLoadingSpinner from './ajax_loading_spinner';
|
||||||
import U2FAuthenticate from './u2f/authenticate';
|
import U2FAuthenticate from './u2f/authenticate';
|
||||||
|
import Members from './members';
|
||||||
|
import memberExpirationDate from './member_expiration_date';
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
var Dispatcher;
|
var Dispatcher;
|
||||||
|
@ -397,15 +399,15 @@ import U2FAuthenticate from './u2f/authenticate';
|
||||||
new ProjectsList();
|
new ProjectsList();
|
||||||
break;
|
break;
|
||||||
case 'groups:group_members:index':
|
case 'groups:group_members:index':
|
||||||
new gl.MemberExpirationDate();
|
memberExpirationDate();
|
||||||
new gl.Members();
|
new Members();
|
||||||
new UsersSelect();
|
new UsersSelect();
|
||||||
break;
|
break;
|
||||||
case 'projects:project_members:index':
|
case 'projects:project_members:index':
|
||||||
new gl.MemberExpirationDate('.js-access-expiration-date-groups');
|
memberExpirationDate('.js-access-expiration-date-groups');
|
||||||
new GroupsSelect();
|
new GroupsSelect();
|
||||||
new gl.MemberExpirationDate();
|
memberExpirationDate();
|
||||||
new gl.Members();
|
new Members();
|
||||||
new UsersSelect();
|
new UsersSelect();
|
||||||
break;
|
break;
|
||||||
case 'groups:new':
|
case 'groups:new':
|
||||||
|
|
|
@ -84,8 +84,6 @@ import './layout_nav';
|
||||||
import LazyLoader from './lazy_loader';
|
import LazyLoader from './lazy_loader';
|
||||||
import './line_highlighter';
|
import './line_highlighter';
|
||||||
import './logo';
|
import './logo';
|
||||||
import './member_expiration_date';
|
|
||||||
import './members';
|
|
||||||
import './merge_request';
|
import './merge_request';
|
||||||
import './merge_request_tabs';
|
import './merge_request_tabs';
|
||||||
import './milestone';
|
import './milestone';
|
||||||
|
|
|
@ -2,54 +2,51 @@
|
||||||
|
|
||||||
import Pikaday from 'pikaday';
|
import Pikaday from 'pikaday';
|
||||||
|
|
||||||
(() => {
|
// Add datepickers to all `js-access-expiration-date` elements. If those elements are
|
||||||
// Add datepickers to all `js-access-expiration-date` elements. If those elements are
|
// children of an element with the `clearable-input` class, and have a sibling
|
||||||
// children of an element with the `clearable-input` class, and have a sibling
|
// `js-clear-input` element, then show that element when there is a value in the
|
||||||
// `js-clear-input` element, then show that element when there is a value in the
|
// datepicker, and make clicking on that element clear the field.
|
||||||
// datepicker, and make clicking on that element clear the field.
|
//
|
||||||
//
|
export default function memberExpirationDate(selector = '.js-access-expiration-date') {
|
||||||
window.gl = window.gl || {};
|
function toggleClearInput() {
|
||||||
gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
|
$(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
|
||||||
function toggleClearInput() {
|
}
|
||||||
$(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
|
const inputs = $(selector);
|
||||||
}
|
|
||||||
const inputs = $(selector);
|
|
||||||
|
|
||||||
inputs.each((i, el) => {
|
inputs.each((i, el) => {
|
||||||
const $input = $(el);
|
const $input = $(el);
|
||||||
|
|
||||||
const calendar = new Pikaday({
|
const calendar = new Pikaday({
|
||||||
field: $input.get(0),
|
field: $input.get(0),
|
||||||
theme: 'gitlab-theme animate-picker',
|
theme: 'gitlab-theme animate-picker',
|
||||||
format: 'yyyy-mm-dd',
|
format: 'yyyy-mm-dd',
|
||||||
minDate: new Date(),
|
minDate: new Date(),
|
||||||
container: $input.parent().get(0),
|
container: $input.parent().get(0),
|
||||||
onSelect(dateText) {
|
onSelect(dateText) {
|
||||||
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
||||||
|
|
||||||
$input.trigger('change');
|
$input.trigger('change');
|
||||||
|
|
||||||
toggleClearInput.call($input);
|
toggleClearInput.call($input);
|
||||||
},
|
},
|
||||||
});
|
|
||||||
|
|
||||||
calendar.setDate(new Date($input.val()));
|
|
||||||
$input.data('pikaday', calendar);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
inputs.next('.js-clear-input').on('click', function clicked(event) {
|
calendar.setDate(new Date($input.val()));
|
||||||
event.preventDefault();
|
$input.data('pikaday', calendar);
|
||||||
|
});
|
||||||
|
|
||||||
const input = $(this).closest('.clearable-input').find(selector);
|
inputs.next('.js-clear-input').on('click', function clicked(event) {
|
||||||
const calendar = input.data('pikaday');
|
event.preventDefault();
|
||||||
|
|
||||||
calendar.setDate(null);
|
const input = $(this).closest('.clearable-input').find(selector);
|
||||||
input.trigger('change');
|
const calendar = input.data('pikaday');
|
||||||
toggleClearInput.call(input);
|
|
||||||
});
|
|
||||||
|
|
||||||
inputs.on('blur', toggleClearInput);
|
calendar.setDate(null);
|
||||||
|
input.trigger('change');
|
||||||
|
toggleClearInput.call(input);
|
||||||
|
});
|
||||||
|
|
||||||
inputs.each(toggleClearInput);
|
inputs.on('blur', toggleClearInput);
|
||||||
};
|
|
||||||
}).call(window);
|
inputs.each(toggleClearInput);
|
||||||
|
}
|
||||||
|
|
|
@ -1,81 +1,74 @@
|
||||||
/* eslint-disable class-methods-use-this */
|
export default class Members {
|
||||||
(() => {
|
constructor() {
|
||||||
window.gl = window.gl || {};
|
this.addListeners();
|
||||||
|
this.initGLDropdown();
|
||||||
|
}
|
||||||
|
|
||||||
class Members {
|
addListeners() {
|
||||||
constructor() {
|
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
|
||||||
this.addListeners();
|
$('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
|
||||||
this.initGLDropdown();
|
$('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
|
||||||
}
|
gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
|
||||||
|
}
|
||||||
|
|
||||||
addListeners() {
|
initGLDropdown() {
|
||||||
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
|
$('.js-member-permissions-dropdown').each((i, btn) => {
|
||||||
$('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
|
const $btn = $(btn);
|
||||||
$('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
|
|
||||||
gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
|
|
||||||
}
|
|
||||||
|
|
||||||
initGLDropdown() {
|
$btn.glDropdown({
|
||||||
$('.js-member-permissions-dropdown').each((i, btn) => {
|
selectable: true,
|
||||||
const $btn = $(btn);
|
isSelectable(selected, $el) {
|
||||||
|
return !$el.hasClass('is-active');
|
||||||
$btn.glDropdown({
|
},
|
||||||
selectable: true,
|
fieldName: $btn.data('field-name'),
|
||||||
isSelectable(selected, $el) {
|
id(selected, $el) {
|
||||||
return !$el.hasClass('is-active');
|
return $el.data('id');
|
||||||
},
|
},
|
||||||
fieldName: $btn.data('field-name'),
|
toggleLabel(selected, $el) {
|
||||||
id(selected, $el) {
|
return $el.text();
|
||||||
return $el.data('id');
|
},
|
||||||
},
|
clicked: (options) => {
|
||||||
toggleLabel(selected, $el) {
|
this.formSubmit(null, options.$el);
|
||||||
return $el.text();
|
},
|
||||||
},
|
|
||||||
clicked: (options) => {
|
|
||||||
this.formSubmit(null, options.$el);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
|
removeRow(e) {
|
||||||
|
const $target = $(e.target);
|
||||||
|
|
||||||
removeRow(e) {
|
if ($target.hasClass('btn-remove')) {
|
||||||
const $target = $(e.target);
|
$target.closest('.member')
|
||||||
|
.fadeOut(function fadeOutMemberRow() {
|
||||||
if ($target.hasClass('btn-remove')) {
|
$(this).remove();
|
||||||
$target.closest('.member')
|
});
|
||||||
.fadeOut(function fadeOutMemberRow() {
|
|
||||||
$(this).remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
formSubmit(e, $el = null) {
|
|
||||||
const $this = e ? $(e.currentTarget) : $el;
|
|
||||||
const { $toggle, $dateInput } = this.getMemberListItems($this);
|
|
||||||
|
|
||||||
$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();
|
|
||||||
}
|
|
||||||
|
|
||||||
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'),
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
gl.Members = Members;
|
formSubmit(e, $el = null) {
|
||||||
})();
|
const $this = e ? $(e.currentTarget) : $el;
|
||||||
|
const { $toggle, $dateInput } = this.getMemberListItems($this);
|
||||||
|
|
||||||
|
$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();
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
|
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'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue