Merge branch '38869-members' into 'master'
Removes Members, memberExpiration from window object See merge request gitlab-org/gitlab-ce!14808
This commit is contained in:
Phil Hughes
commit
273b116c91
4 changed files with 111 additions and 121 deletions
|
|
@ -83,6 +83,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
|
|||
import GlFieldErrors from './gl_field_errors';
|
||||
import GLForm from './gl_form';
|
||||
import U2FAuthenticate from './u2f/authenticate';
|
||||
import Members from './members';
|
||||
import memberExpirationDate from './member_expiration_date';
|
||||
|
||||
(function() {
|
||||
var Dispatcher;
|
||||
|
|
@ -399,15 +401,15 @@ import U2FAuthenticate from './u2f/authenticate';
|
|||
new ProjectsList();
|
||||
break;
|
||||
case 'groups:group_members:index':
|
||||
new gl.MemberExpirationDate();
|
||||
new gl.Members();
|
||||
memberExpirationDate();
|
||||
new Members();
|
||||
new UsersSelect();
|
||||
break;
|
||||
case 'projects:project_members:index':
|
||||
new gl.MemberExpirationDate('.js-access-expiration-date-groups');
|
||||
memberExpirationDate('.js-access-expiration-date-groups');
|
||||
new GroupsSelect();
|
||||
new gl.MemberExpirationDate();
|
||||
new gl.Members();
|
||||
memberExpirationDate();
|
||||
new Members();
|
||||
new UsersSelect();
|
||||
break;
|
||||
case 'groups:new':
|
||||
|
|
|
|||
|
|
@ -84,8 +84,6 @@ import './layout_nav';
|
|||
import LazyLoader from './lazy_loader';
|
||||
import './line_highlighter';
|
||||
import './logo';
|
||||
import './member_expiration_date';
|
||||
import './members';
|
||||
import './merge_request';
|
||||
import './merge_request_tabs';
|
||||
import './milestone';
|
||||
|
|
|
|||
|
|
@ -2,54 +2,51 @@
|
|||
|
||||
import Pikaday from 'pikaday';
|
||||
|
||||
(() => {
|
||||
// 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
|
||||
// `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.
|
||||
//
|
||||
window.gl = window.gl || {};
|
||||
gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
|
||||
function toggleClearInput() {
|
||||
$(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
|
||||
}
|
||||
const inputs = $(selector);
|
||||
// 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
|
||||
// `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.
|
||||
//
|
||||
export default function memberExpirationDate(selector = '.js-access-expiration-date') {
|
||||
function toggleClearInput() {
|
||||
$(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
|
||||
}
|
||||
const inputs = $(selector);
|
||||
|
||||
inputs.each((i, el) => {
|
||||
const $input = $(el);
|
||||
inputs.each((i, el) => {
|
||||
const $input = $(el);
|
||||
|
||||
const calendar = new Pikaday({
|
||||
field: $input.get(0),
|
||||
theme: 'gitlab-theme animate-picker',
|
||||
format: 'yyyy-mm-dd',
|
||||
minDate: new Date(),
|
||||
container: $input.parent().get(0),
|
||||
onSelect(dateText) {
|
||||
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
||||
const calendar = new Pikaday({
|
||||
field: $input.get(0),
|
||||
theme: 'gitlab-theme animate-picker',
|
||||
format: 'yyyy-mm-dd',
|
||||
minDate: new Date(),
|
||||
container: $input.parent().get(0),
|
||||
onSelect(dateText) {
|
||||
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
|
||||
|
||||
$input.trigger('change');
|
||||
$input.trigger('change');
|
||||
|
||||
toggleClearInput.call($input);
|
||||
},
|
||||
});
|
||||
|
||||
calendar.setDate(new Date($input.val()));
|
||||
$input.data('pikaday', calendar);
|
||||
toggleClearInput.call($input);
|
||||
},
|
||||
});
|
||||
|
||||
inputs.next('.js-clear-input').on('click', function clicked(event) {
|
||||
event.preventDefault();
|
||||
calendar.setDate(new Date($input.val()));
|
||||
$input.data('pikaday', calendar);
|
||||
});
|
||||
|
||||
const input = $(this).closest('.clearable-input').find(selector);
|
||||
const calendar = input.data('pikaday');
|
||||
inputs.next('.js-clear-input').on('click', function clicked(event) {
|
||||
event.preventDefault();
|
||||
|
||||
calendar.setDate(null);
|
||||
input.trigger('change');
|
||||
toggleClearInput.call(input);
|
||||
});
|
||||
const input = $(this).closest('.clearable-input').find(selector);
|
||||
const calendar = input.data('pikaday');
|
||||
|
||||
inputs.on('blur', toggleClearInput);
|
||||
calendar.setDate(null);
|
||||
input.trigger('change');
|
||||
toggleClearInput.call(input);
|
||||
});
|
||||
|
||||
inputs.each(toggleClearInput);
|
||||
};
|
||||
}).call(window);
|
||||
inputs.on('blur', toggleClearInput);
|
||||
|
||||
inputs.each(toggleClearInput);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,81 +1,74 @@
|
|||
/* eslint-disable class-methods-use-this */
|
||||
(() => {
|
||||
window.gl = window.gl || {};
|
||||
export default class Members {
|
||||
constructor() {
|
||||
this.addListeners();
|
||||
this.initGLDropdown();
|
||||
}
|
||||
|
||||
class Members {
|
||||
constructor() {
|
||||
this.addListeners();
|
||||
this.initGLDropdown();
|
||||
}
|
||||
addListeners() {
|
||||
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
|
||||
$('.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');
|
||||
}
|
||||
|
||||
addListeners() {
|
||||
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
|
||||
$('.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');
|
||||
}
|
||||
initGLDropdown() {
|
||||
$('.js-member-permissions-dropdown').each((i, btn) => {
|
||||
const $btn = $(btn);
|
||||
|
||||
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();
|
||||
},
|
||||
clicked: (options) => {
|
||||
this.formSubmit(null, options.$el);
|
||||
},
|
||||
});
|
||||
$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();
|
||||
},
|
||||
clicked: (options) => {
|
||||
this.formSubmit(null, options.$el);
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
removeRow(e) {
|
||||
const $target = $(e.target);
|
||||
|
||||
removeRow(e) {
|
||||
const $target = $(e.target);
|
||||
|
||||
if ($target.hasClass('btn-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'),
|
||||
};
|
||||
if ($target.hasClass('btn-remove')) {
|
||||
$target.closest('.member')
|
||||
.fadeOut(function fadeOutMemberRow() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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 a new issue