Commit 40d535b3 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'remove_var_from_labels_select_js' into 'master'

Remove var from labels_select.js

Closes #36268

See merge request gitlab-org/gitlab!20153
parents 65acdc6e c704d058
/* eslint-disable no-useless-return, func-names, no-var, no-underscore-dangle, one-var, no-new, consistent-return, no-shadow, no-param-reassign, vars-on-top, no-lonely-if, no-else-return, dot-notation, no-empty */ /* eslint-disable no-useless-return, func-names, no-underscore-dangle, no-new, consistent-return, no-shadow, no-param-reassign, no-lonely-if, no-else-return, dot-notation, no-empty */
/* global Issuable */ /* global Issuable */
/* global ListLabel */ /* global ListLabel */
...@@ -15,63 +15,39 @@ import { isScopedLabel } from '~/lib/utils/common_utils'; ...@@ -15,63 +15,39 @@ import { isScopedLabel } from '~/lib/utils/common_utils';
export default class LabelsSelect { export default class LabelsSelect {
constructor(els, options = {}) { constructor(els, options = {}) {
var _this, $els; const _this = this;
_this = this;
$els = $(els); let $els = $(els);
if (!els) { if (!els) {
$els = $('.js-label-select'); $els = $('.js-label-select');
} }
$els.each((i, dropdown) => { $els.each((i, dropdown) => {
var $block, const $dropdown = $(dropdown);
$dropdown, const $dropdownContainer = $dropdown.closest('.labels-filter');
$form, const namespacePath = $dropdown.data('namespacePath');
$loading, const projectPath = $dropdown.data('projectPath');
$selectbox, const issueUpdateURL = $dropdown.data('issueUpdate');
$sidebarCollapsedValue, let selectedLabel = $dropdown.data('selected');
$value,
$dropdownMenu,
abilityName,
defaultLabel,
issueUpdateURL,
labelUrl,
namespacePath,
projectPath,
saveLabelData,
selectedLabel,
showAny,
showNo,
$sidebarLabelTooltip,
initialSelected,
fieldName,
showMenuAbove,
$dropdownContainer;
$dropdown = $(dropdown);
$dropdownContainer = $dropdown.closest('.labels-filter');
namespacePath = $dropdown.data('namespacePath');
projectPath = $dropdown.data('projectPath');
issueUpdateURL = $dropdown.data('issueUpdate');
selectedLabel = $dropdown.data('selected');
if (selectedLabel != null && !$dropdown.hasClass('js-multiselect')) { if (selectedLabel != null && !$dropdown.hasClass('js-multiselect')) {
selectedLabel = selectedLabel.split(','); selectedLabel = selectedLabel.split(',');
} }
showNo = $dropdown.data('showNo'); const showNo = $dropdown.data('showNo');
showAny = $dropdown.data('showAny'); const showAny = $dropdown.data('showAny');
showMenuAbove = $dropdown.data('showMenuAbove'); const showMenuAbove = $dropdown.data('showMenuAbove');
defaultLabel = $dropdown.data('defaultLabel') || __('Label'); const defaultLabel = $dropdown.data('defaultLabel') || __('Label');
abilityName = $dropdown.data('abilityName'); const abilityName = $dropdown.data('abilityName');
$selectbox = $dropdown.closest('.selectbox'); const $selectbox = $dropdown.closest('.selectbox');
$block = $selectbox.closest('.block'); const $block = $selectbox.closest('.block');
$form = $dropdown.closest('form, .js-issuable-update'); const $form = $dropdown.closest('form, .js-issuable-update');
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span'); const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
$sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip'); const $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
$value = $block.find('.value'); const $value = $block.find('.value');
$dropdownMenu = $dropdown.parent().find('.dropdown-menu'); const $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
$loading = $block.find('.block-loading').fadeOut(); const $loading = $block.find('.block-loading').fadeOut();
fieldName = $dropdown.data('fieldName'); const fieldName = $dropdown.data('fieldName');
initialSelected = $selectbox let initialSelected = $selectbox
.find(`input[name="${$dropdown.data('fieldName')}"]`) .find(`input[name="${$dropdown.data('fieldName')}"]`)
.map(function() { .map(function() {
return this.value; return this.value;
...@@ -90,9 +66,8 @@ export default class LabelsSelect { ...@@ -90,9 +66,8 @@ export default class LabelsSelect {
); );
} }
saveLabelData = function() { const saveLabelData = function() {
var data, selected; const selected = $dropdown
selected = $dropdown
.closest('.selectbox') .closest('.selectbox')
.find(`input[name='${fieldName}']`) .find(`input[name='${fieldName}']`)
.map(function() { .map(function() {
...@@ -103,7 +78,7 @@ export default class LabelsSelect { ...@@ -103,7 +78,7 @@ export default class LabelsSelect {
if (_.isEqual(initialSelected, selected)) return; if (_.isEqual(initialSelected, selected)) return;
initialSelected = selected; initialSelected = selected;
data = {}; const data = {};
data[abilityName] = {}; data[abilityName] = {};
data[abilityName].label_ids = selected; data[abilityName].label_ids = selected;
if (!selected.length) { if (!selected.length) {
...@@ -114,12 +89,13 @@ export default class LabelsSelect { ...@@ -114,12 +89,13 @@ export default class LabelsSelect {
axios axios
.put(issueUpdateURL, data) .put(issueUpdateURL, data)
.then(({ data }) => { .then(({ data }) => {
var labelCount, template, labelTooltipTitle, labelTitles; let labelTooltipTitle;
let template;
$loading.fadeOut(); $loading.fadeOut();
$dropdown.trigger('loaded.gl.dropdown'); $dropdown.trigger('loaded.gl.dropdown');
$selectbox.hide(); $selectbox.hide();
data.issueUpdateURL = issueUpdateURL; data.issueUpdateURL = issueUpdateURL;
labelCount = 0; let labelCount = 0;
if (data.labels.length && issueUpdateURL) { if (data.labels.length && issueUpdateURL) {
template = LabelsSelect.getLabelTemplate({ template = LabelsSelect.getLabelTemplate({
labels: _.sortBy(data.labels, 'title'), labels: _.sortBy(data.labels, 'title'),
...@@ -174,7 +150,7 @@ export default class LabelsSelect { ...@@ -174,7 +150,7 @@ export default class LabelsSelect {
$sidebarCollapsedValue.text(labelCount); $sidebarCollapsedValue.text(labelCount);
if (data.labels.length) { if (data.labels.length) {
labelTitles = data.labels.map(label => label.title); let labelTitles = data.labels.map(label => label.title);
if (labelTitles.length > 5) { if (labelTitles.length > 5) {
labelTitles = labelTitles.slice(0, 5); labelTitles = labelTitles.slice(0, 5);
...@@ -199,13 +175,13 @@ export default class LabelsSelect { ...@@ -199,13 +175,13 @@ export default class LabelsSelect {
$dropdown.glDropdown({ $dropdown.glDropdown({
showMenuAbove, showMenuAbove,
data(term, callback) { data(term, callback) {
labelUrl = $dropdown.attr('data-labels'); const labelUrl = $dropdown.attr('data-labels');
axios axios
.get(labelUrl) .get(labelUrl)
.then(res => { .then(res => {
let { data } = res; let { data } = res;
if ($dropdown.hasClass('js-extra-options')) { if ($dropdown.hasClass('js-extra-options')) {
var extraData = []; const extraData = [];
if (showNo) { if (showNo) {
extraData.unshift({ extraData.unshift({
id: 0, id: 0,
...@@ -232,22 +208,14 @@ export default class LabelsSelect { ...@@ -232,22 +208,14 @@ export default class LabelsSelect {
.catch(() => flash(__('Error fetching labels.'))); .catch(() => flash(__('Error fetching labels.')));
}, },
renderRow(label) { renderRow(label) {
var linkEl, let colorEl;
listItemEl,
colorEl, const selectedClass = [];
indeterminate, const removesAll = label.id <= 0 || label.id == null;
removesAll,
selectedClass,
i,
marked,
dropdownValue;
selectedClass = [];
removesAll = label.id <= 0 || label.id == null;
if ($dropdown.hasClass('js-filter-bulk-update')) { if ($dropdown.hasClass('js-filter-bulk-update')) {
indeterminate = $dropdown.data('indeterminate') || []; const indeterminate = $dropdown.data('indeterminate') || [];
marked = $dropdown.data('marked') || []; const marked = $dropdown.data('marked') || [];
if (indeterminate.indexOf(label.id) !== -1) { if (indeterminate.indexOf(label.id) !== -1) {
selectedClass.push('is-indeterminate'); selectedClass.push('is-indeterminate');
...@@ -255,7 +223,7 @@ export default class LabelsSelect { ...@@ -255,7 +223,7 @@ export default class LabelsSelect {
if (marked.indexOf(label.id) !== -1) { if (marked.indexOf(label.id) !== -1) {
// Remove is-indeterminate class if the item will be marked as active // Remove is-indeterminate class if the item will be marked as active
i = selectedClass.indexOf('is-indeterminate'); const i = selectedClass.indexOf('is-indeterminate');
if (i !== -1) { if (i !== -1) {
selectedClass.splice(i, 1); selectedClass.splice(i, 1);
} }
...@@ -263,7 +231,7 @@ export default class LabelsSelect { ...@@ -263,7 +231,7 @@ export default class LabelsSelect {
} }
} else { } else {
if (this.id(label)) { if (this.id(label)) {
dropdownValue = this.id(label) const dropdownValue = this.id(label)
.toString() .toString()
.replace(/'/g, "\\'"); .replace(/'/g, "\\'");
...@@ -287,7 +255,7 @@ export default class LabelsSelect { ...@@ -287,7 +255,7 @@ export default class LabelsSelect {
colorEl = ''; colorEl = '';
} }
linkEl = document.createElement('a'); const linkEl = document.createElement('a');
linkEl.href = '#'; linkEl.href = '#';
// We need to identify which items are actually labels // We need to identify which items are actually labels
...@@ -300,7 +268,7 @@ export default class LabelsSelect { ...@@ -300,7 +268,7 @@ export default class LabelsSelect {
linkEl.className = selectedClass.join(' '); linkEl.className = selectedClass.join(' ');
linkEl.innerHTML = `${colorEl} ${_.escape(label.title)}`; linkEl.innerHTML = `${colorEl} ${_.escape(label.title)}`;
listItemEl = document.createElement('li'); const listItemEl = document.createElement('li');
listItemEl.appendChild(linkEl); listItemEl.appendChild(linkEl);
return listItemEl; return listItemEl;
...@@ -312,12 +280,12 @@ export default class LabelsSelect { ...@@ -312,12 +280,12 @@ export default class LabelsSelect {
filterable: true, filterable: true,
selected: $dropdown.data('selected') || [], selected: $dropdown.data('selected') || [],
toggleLabel(selected, el) { toggleLabel(selected, el) {
var $dropdownParent = $dropdown.parent(); const $dropdownParent = $dropdown.parent();
var $dropdownInputField = $dropdownParent.find('.dropdown-input-field'); const $dropdownInputField = $dropdownParent.find('.dropdown-input-field');
var isSelected = el !== null ? el.hasClass('is-active') : false; const isSelected = el !== null ? el.hasClass('is-active') : false;
var title = selected ? selected.title : null; const title = selected ? selected.title : null;
var selectedLabels = this.selected; const selectedLabels = this.selected;
if ($dropdownInputField.length && $dropdownInputField.val().length) { if ($dropdownInputField.length && $dropdownInputField.val().length) {
$dropdownParent.find('.dropdown-input-clear').trigger('click'); $dropdownParent.find('.dropdown-input-clear').trigger('click');
...@@ -329,7 +297,7 @@ export default class LabelsSelect { ...@@ -329,7 +297,7 @@ export default class LabelsSelect {
} else if (isSelected) { } else if (isSelected) {
this.selected.push(title); this.selected.push(title);
} else if (!isSelected && title) { } else if (!isSelected && title) {
var index = this.selected.indexOf(title); const index = this.selected.indexOf(title);
this.selected.splice(index, 1); this.selected.splice(index, 1);
} }
...@@ -359,10 +327,9 @@ export default class LabelsSelect { ...@@ -359,10 +327,9 @@ export default class LabelsSelect {
} }
}, },
hidden() { hidden() {
var isIssueIndex, isMRIndex, page; const page = $('body').attr('data-page');
page = $('body').attr('data-page'); const isIssueIndex = page === 'projects:issues:index';
isIssueIndex = page === 'projects:issues:index'; const isMRIndex = page === 'projects:merge_requests:index';
isMRIndex = page === 'projects:merge_requests:index';
$selectbox.hide(); $selectbox.hide();
// display:block overrides the hide-collapse rule // display:block overrides the hide-collapse rule
$value.removeAttr('style'); $value.removeAttr('style');
...@@ -393,14 +360,13 @@ export default class LabelsSelect { ...@@ -393,14 +360,13 @@ export default class LabelsSelect {
const { $el, e, isMarking } = clickEvent; const { $el, e, isMarking } = clickEvent;
const label = clickEvent.selectedObj; const label = clickEvent.selectedObj;
var isIssueIndex, isMRIndex, page, boardsModel; const fadeOutLoader = () => {
var fadeOutLoader = () => {
$loading.fadeOut(); $loading.fadeOut();
}; };
page = $('body').attr('data-page'); const page = $('body').attr('data-page');
isIssueIndex = page === 'projects:issues:index'; const isIssueIndex = page === 'projects:issues:index';
isMRIndex = page === 'projects:merge_requests:index'; const isMRIndex = page === 'projects:merge_requests:index';
if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) { if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
$dropdown $dropdown
...@@ -419,6 +385,7 @@ export default class LabelsSelect { ...@@ -419,6 +385,7 @@ export default class LabelsSelect {
return; return;
} }
let boardsModel;
if ($dropdown.closest('.add-issues-modal').length) { if ($dropdown.closest('.add-issues-modal').length) {
boardsModel = ModalStore.store.filter; boardsModel = ModalStore.store.filter;
} }
...@@ -450,7 +417,7 @@ export default class LabelsSelect { ...@@ -450,7 +417,7 @@ export default class LabelsSelect {
}), }),
); );
} else { } else {
var { labels } = boardsStore.detail.issue; let { labels } = boardsStore.detail.issue;
labels = labels.filter(selectedLabel => selectedLabel.id !== label.id); labels = labels.filter(selectedLabel => selectedLabel.id !== label.id);
boardsStore.detail.issue.labels = labels; boardsStore.detail.issue.labels = labels;
} }
...@@ -578,16 +545,14 @@ export default class LabelsSelect { ...@@ -578,16 +545,14 @@ export default class LabelsSelect {
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
setDropdownData($dropdown, isMarking, value) { setDropdownData($dropdown, isMarking, value) {
var i, markedIds, unmarkedIds, indeterminateIds; const markedIds = $dropdown.data('marked') || [];
const unmarkedIds = $dropdown.data('unmarked') || [];
markedIds = $dropdown.data('marked') || []; const indeterminateIds = $dropdown.data('indeterminate') || [];
unmarkedIds = $dropdown.data('unmarked') || [];
indeterminateIds = $dropdown.data('indeterminate') || [];
if (isMarking) { if (isMarking) {
markedIds.push(value); markedIds.push(value);
i = indeterminateIds.indexOf(value); let i = indeterminateIds.indexOf(value);
if (i > -1) { if (i > -1) {
indeterminateIds.splice(i, 1); indeterminateIds.splice(i, 1);
} }
...@@ -598,7 +563,7 @@ export default class LabelsSelect { ...@@ -598,7 +563,7 @@ export default class LabelsSelect {
} }
} else { } else {
// If marked item (not common) is unmarked // If marked item (not common) is unmarked
i = markedIds.indexOf(value); const i = markedIds.indexOf(value);
if (i > -1) { if (i > -1) {
markedIds.splice(i, 1); markedIds.splice(i, 1);
} }
......
---
title: Remove var from labels_select.js
merge_request: 20153
author: Lee Tickett
type: other
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