Commit 273b116c authored by Phil Hughes's avatar Phil Hughes

Merge branch '38869-members' into 'master'

Removes Members, memberExpiration from window object

See merge request gitlab-org/gitlab-ce!14808
parents fe3ec2d9 697967c1
...@@ -83,6 +83,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner'; ...@@ -83,6 +83,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
import GlFieldErrors from './gl_field_errors'; import GlFieldErrors from './gl_field_errors';
import GLForm from './gl_form'; import GLForm from './gl_form';
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;
...@@ -399,15 +401,15 @@ import U2FAuthenticate from './u2f/authenticate'; ...@@ -399,15 +401,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'; ...@@ -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 @@ ...@@ -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) => {
const $input = $(el);
inputs.each((i, el) => {
const $input = $(el); const calendar = new Pikaday({
field: $input.get(0),
const calendar = new Pikaday({ theme: 'gitlab-theme animate-picker',
field: $input.get(0), format: 'yyyy-mm-dd',
theme: 'gitlab-theme animate-picker', minDate: new Date(),
format: 'yyyy-mm-dd', container: $input.parent().get(0),
minDate: new Date(), onSelect(dateText) {
container: $input.parent().get(0), $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
onSelect(dateText) {
$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);
}); calendar.setDate(null);
input.trigger('change');
toggleClearInput.call(input);
});
inputs.on('blur', toggleClearInput); inputs.on('blur', toggleClearInput);
inputs.each(toggleClearInput); inputs.each(toggleClearInput);
}; }
}).call(window);
/* eslint-disable class-methods-use-this */ export default class Members {
(() => { constructor() {
window.gl = window.gl || {}; this.addListeners();
this.initGLDropdown();
class Members { }
constructor() {
this.addListeners();
this.initGLDropdown();
}
addListeners() { addListeners() {
$('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow); $('.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-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)); $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change'); gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
} }
initGLDropdown() { initGLDropdown() {
$('.js-member-permissions-dropdown').each((i, btn) => { $('.js-member-permissions-dropdown').each((i, btn) => {
const $btn = $(btn); const $btn = $(btn);
$btn.glDropdown({ $btn.glDropdown({
selectable: true, selectable: true,
isSelectable(selected, $el) { isSelectable(selected, $el) {
return !$el.hasClass('is-active'); return !$el.hasClass('is-active');
}, },
fieldName: $btn.data('field-name'), fieldName: $btn.data('field-name'),
id(selected, $el) { id(selected, $el) {
return $el.data('id'); return $el.data('id');
}, },
toggleLabel(selected, $el) { toggleLabel(selected, $el) {
return $el.text(); return $el.text();
}, },
clicked: (options) => { clicked: (options) => {
this.formSubmit(null, options.$el); this.formSubmit(null, options.$el);
}, },
});
}); });
} });
}
removeRow(e) { // eslint-disable-next-line class-methods-use-this
const $target = $(e.target); removeRow(e) {
const $target = $(e.target);
if ($target.hasClass('btn-remove')) { if ($target.hasClass('btn-remove')) {
$target.closest('.member') $target.closest('.member')
.fadeOut(function fadeOutMemberRow() { .fadeOut(function fadeOutMemberRow() {
$(this).remove(); $(this).remove();
}); });
}
} }
}
formSubmit(e, $el = null) { formSubmit(e, $el = null) {
const $this = e ? $(e.currentTarget) : $el; const $this = e ? $(e.currentTarget) : $el;
const { $toggle, $dateInput } = this.getMemberListItems($this); const { $toggle, $dateInput } = this.getMemberListItems($this);
$this.closest('form').trigger('submit.rails');
$toggle.disable();
$dateInput.disable();
}
formSuccess(e) { $this.closest('form').trigger('submit.rails');
const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
$toggle.enable(); $toggle.disable();
$dateInput.enable(); $dateInput.disable();
} }
getMemberListItems($el) { formSuccess(e) {
const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`); const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
return { $toggle.enable();
$memberListItem, $dateInput.enable();
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
$dateInput: $memberListItem.find('.js-access-expiration-date'),
};
}
} }
// eslint-disable-next-line class-methods-use-this
getMemberListItems($el) {
const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
gl.Members = Members; return {
})(); $memberListItem,
$toggle: $memberListItem.find('.dropdown-menu-toggle'),
$dateInput: $memberListItem.find('.js-access-expiration-date'),
};
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment