Convert to pure ES6 class
This commit is contained in:
Kushal Pandya
parent
678672b066
commit
115d4a4106
|
|
@ -1,29 +1,26 @@
|
|||
/* eslint-disable arrow-parens, no-param-reassign, object-shorthand, no-else-return, comma-dangle, max-len */
|
||||
export default class ProtectedTagAccessDropdown {
|
||||
constructor(options) {
|
||||
this.options = options;
|
||||
this.initDropdown();
|
||||
}
|
||||
|
||||
(global => {
|
||||
global.gl = global.gl || {};
|
||||
|
||||
gl.ProtectedTagAccessDropdown = class {
|
||||
constructor(options) {
|
||||
const { $dropdown, data, onSelect } = options;
|
||||
|
||||
$dropdown.glDropdown({
|
||||
data: data,
|
||||
selectable: true,
|
||||
inputId: $dropdown.data('input-id'),
|
||||
fieldName: $dropdown.data('field-name'),
|
||||
toggleLabel(item, el) {
|
||||
if (el.is('.is-active')) {
|
||||
return item.text;
|
||||
} else {
|
||||
return 'Select';
|
||||
}
|
||||
},
|
||||
clicked(item, $el, e) {
|
||||
e.preventDefault();
|
||||
onSelect();
|
||||
initDropdown() {
|
||||
const { onSelect } = this.options;
|
||||
this.options.$dropdown.glDropdown({
|
||||
data: this.options.data,
|
||||
selectable: true,
|
||||
inputId: this.options.$dropdown.data('input-id'),
|
||||
fieldName: this.options.$dropdown.data('field-name'),
|
||||
toggleLabel(item, el) {
|
||||
if (el.is('.is-active')) {
|
||||
return item.text;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
return 'Select';
|
||||
},
|
||||
clicked(item, $el, e) {
|
||||
e.preventDefault();
|
||||
onSelect();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,41 @@
|
|||
/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
|
||||
/* global ProtectedTagDropdown */
|
||||
import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
|
||||
import ProtectedTagDropdown from './protected_tag_dropdown';
|
||||
|
||||
(global => {
|
||||
global.gl = global.gl || {};
|
||||
export default class ProtectedTagCreate {
|
||||
constructor() {
|
||||
this.$form = $('.new_protected_tag');
|
||||
this.buildDropdowns();
|
||||
}
|
||||
|
||||
gl.ProtectedTagCreate = class {
|
||||
constructor() {
|
||||
this.$wrap = this.$form = $('.new_protected_tag');
|
||||
this.buildDropdowns();
|
||||
}
|
||||
buildDropdowns() {
|
||||
const $allowedToCreateDropdown = this.$form.find('.js-allowed-to-create');
|
||||
|
||||
buildDropdowns() {
|
||||
const $allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create');
|
||||
// Cache callback
|
||||
this.onSelectCallback = this.onSelect.bind(this);
|
||||
|
||||
// Cache callback
|
||||
this.onSelectCallback = this.onSelect.bind(this);
|
||||
// Allowed to Create dropdown
|
||||
this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
|
||||
$dropdown: $allowedToCreateDropdown,
|
||||
data: gon.create_access_levels,
|
||||
onSelect: this.onSelectCallback,
|
||||
});
|
||||
|
||||
// Allowed to Create dropdown
|
||||
new gl.ProtectedTagAccessDropdown({
|
||||
$dropdown: $allowedToCreateDropdown,
|
||||
data: gon.create_access_levels,
|
||||
onSelect: this.onSelectCallback
|
||||
});
|
||||
// Select default
|
||||
$allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
|
||||
|
||||
// Select default
|
||||
$allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
|
||||
// Protected tag dropdown
|
||||
this.protectedTagDropdown = new ProtectedTagDropdown({
|
||||
$dropdown: this.$form.find('.js-protected-tag-select'),
|
||||
onSelect: this.onSelectCallback,
|
||||
});
|
||||
}
|
||||
|
||||
// Protected tag dropdown
|
||||
new ProtectedTagDropdown({
|
||||
$dropdown: this.$wrap.find('.js-protected-tag-select'),
|
||||
onSelect: this.onSelectCallback
|
||||
});
|
||||
}
|
||||
// This will run after clicked callback
|
||||
onSelect() {
|
||||
// Enable submit button
|
||||
const $tagInput = this.$form.find('input[name="protected_tag[name]"]');
|
||||
const $allowedToCreateInput = this.$form.find('input[name="protected_tag[create_access_levels_attributes][0][access_level]"]');
|
||||
|
||||
// This will run after clicked callback
|
||||
onSelect() {
|
||||
// Enable submit button
|
||||
const $tagInput = this.$wrap.find('input[name="protected_tag[name]"]');
|
||||
const $allowedToCreateInput = this.$wrap.find('input[name="protected_tag[create_access_levels_attributes][0][access_level]"]');
|
||||
|
||||
this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
/* eslint-disable comma-dangle, no-unused-vars */
|
||||
|
||||
class ProtectedTagDropdown {
|
||||
export default class ProtectedTagDropdown {
|
||||
constructor(options) {
|
||||
this.onSelect = options.onSelect;
|
||||
this.$dropdown = options.$dropdown;
|
||||
|
|
@ -21,7 +19,7 @@ class ProtectedTagDropdown {
|
|||
filterable: true,
|
||||
remote: false,
|
||||
search: {
|
||||
fields: ['title']
|
||||
fields: ['title'],
|
||||
},
|
||||
selectable: true,
|
||||
toggleLabel(selected) {
|
||||
|
|
@ -38,7 +36,7 @@ class ProtectedTagDropdown {
|
|||
clicked: (item, $el, e) => {
|
||||
e.preventDefault();
|
||||
this.onSelect();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +61,7 @@ class ProtectedTagDropdown {
|
|||
this.selectedTag = {
|
||||
title: tagName,
|
||||
id: tagName,
|
||||
text: tagName
|
||||
text: tagName,
|
||||
};
|
||||
|
||||
if (tagName) {
|
||||
|
|
@ -75,5 +73,3 @@ class ProtectedTagDropdown {
|
|||
this.$dropdownFooter.toggleClass('hidden', !tagName);
|
||||
}
|
||||
}
|
||||
|
||||
window.ProtectedTagDropdown = ProtectedTagDropdown;
|
||||
|
|
|
|||
|
|
@ -1,54 +1,52 @@
|
|||
/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
|
||||
/* eslint-disable no-new */
|
||||
/* global Flash */
|
||||
|
||||
(global => {
|
||||
global.gl = global.gl || {};
|
||||
import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
|
||||
|
||||
gl.ProtectedTagEdit = class {
|
||||
constructor(options) {
|
||||
this.$wrap = options.$wrap;
|
||||
this.$allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create');
|
||||
export default class ProtectedTagEdit {
|
||||
constructor(options) {
|
||||
this.$wrap = options.$wrap;
|
||||
this.$allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create');
|
||||
|
||||
this.buildDropdowns();
|
||||
}
|
||||
this.buildDropdowns();
|
||||
}
|
||||
|
||||
buildDropdowns() {
|
||||
// Allowed to create dropdown
|
||||
new gl.ProtectedTagAccessDropdown({
|
||||
$dropdown: this.$allowedToCreateDropdown,
|
||||
data: gon.create_access_levels,
|
||||
onSelect: this.onSelect.bind(this)
|
||||
});
|
||||
}
|
||||
buildDropdowns() {
|
||||
// Allowed to create dropdown
|
||||
this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
|
||||
$dropdown: this.$allowedToCreateDropdown,
|
||||
data: gon.create_access_levels,
|
||||
onSelect: this.onSelect.bind(this),
|
||||
});
|
||||
}
|
||||
|
||||
onSelect() {
|
||||
const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdown.data('fieldName')}"]`);
|
||||
onSelect() {
|
||||
const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdown.data('fieldName')}"]`);
|
||||
|
||||
// Do not update if one dropdown has not selected any option
|
||||
if (!$allowedToCreateInput.length) return;
|
||||
// Do not update if one dropdown has not selected any option
|
||||
if (!$allowedToCreateInput.length) return;
|
||||
|
||||
this.$allowedToCreateDropdown.disable();
|
||||
this.$allowedToCreateDropdown.disable();
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: this.$wrap.data('url'),
|
||||
dataType: 'json',
|
||||
data: {
|
||||
_method: 'PATCH',
|
||||
protected_tag: {
|
||||
create_access_levels_attributes: [{
|
||||
id: this.$allowedToCreateDropdown.data('access-level-id'),
|
||||
access_level: $allowedToCreateInput.val()
|
||||
}]
|
||||
}
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: this.$wrap.data('url'),
|
||||
dataType: 'json',
|
||||
data: {
|
||||
_method: 'PATCH',
|
||||
protected_tag: {
|
||||
create_access_levels_attributes: [{
|
||||
id: this.$allowedToCreateDropdown.data('access-level-id'),
|
||||
access_level: $allowedToCreateInput.val(),
|
||||
}],
|
||||
},
|
||||
error() {
|
||||
$.scrollTo(0);
|
||||
new Flash('Failed to update tag!');
|
||||
}
|
||||
}).always(() => {
|
||||
this.$allowedToCreateDropdown.enable();
|
||||
});
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
},
|
||||
error() {
|
||||
$.scrollTo(0);
|
||||
new Flash('Failed to update tag!');
|
||||
},
|
||||
}).always(() => {
|
||||
this.$allowedToCreateDropdown.enable();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
/* eslint-disable arrow-parens, no-param-reassign, no-new, comma-dangle */
|
||||
import ProtectedTagEdit from './protected_tag_edit';
|
||||
|
||||
(global => {
|
||||
global.gl = global.gl || {};
|
||||
export default class ProtectedTagEditList {
|
||||
constructor() {
|
||||
this.$wrap = $('.protected-tags-list');
|
||||
this.protectedTagList = [];
|
||||
this.initEditForm();
|
||||
}
|
||||
|
||||
gl.ProtectedTagEditList = class {
|
||||
constructor() {
|
||||
this.$wrap = $('.protected-tags-list');
|
||||
|
||||
// Build edit forms
|
||||
this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => {
|
||||
new gl.ProtectedTagEdit({
|
||||
$wrap: $(el)
|
||||
});
|
||||
initEditForm() {
|
||||
this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => {
|
||||
this.protectedTagList[i] = new ProtectedTagEdit({
|
||||
$wrap: $(el),
|
||||
});
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue