Commit bcd00c85 authored by Constance Okoghenun's avatar Constance Okoghenun Committed by Jacob Schatz

Resolve "Webpack Roadmap"

parent eb400b5e
/* eslint-disable comma-dangle, space-before-function-paren, no-new */ /* eslint-disable comma-dangle, space-before-function-paren, no-new */
/* global MilestoneSelect */
import Vue from 'vue'; import Vue from 'vue';
import Flash from '../../flash'; import Flash from '../../flash';
...@@ -12,6 +11,7 @@ import './sidebar/remove_issue'; ...@@ -12,6 +11,7 @@ import './sidebar/remove_issue';
import IssuableContext from '../../issuable_context'; import IssuableContext from '../../issuable_context';
import LabelsSelect from '../../labels_select'; import LabelsSelect from '../../labels_select';
import subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue'; import subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
import MilestoneSelect from '../../milestone_select';
const Store = gl.issueBoards.BoardsStore; const Store = gl.issueBoards.BoardsStore;
......
...@@ -5,7 +5,7 @@ import IssuableIndex from './issuable_index'; ...@@ -5,7 +5,7 @@ import IssuableIndex from './issuable_index';
import Milestone from './milestone'; import Milestone from './milestone';
import IssuableForm from './issuable_form'; import IssuableForm from './issuable_form';
import LabelsSelect from './labels_select'; import LabelsSelect from './labels_select';
/* global MilestoneSelect */ import MilestoneSelect from './milestone_select';
import NewBranchForm from './new_branch_form'; import NewBranchForm from './new_branch_form';
import NotificationsForm from './notifications_form'; import NotificationsForm from './notifications_form';
import notificationsDropdown from './notifications_dropdown'; import notificationsDropdown from './notifications_dropdown';
......
/* eslint-disable no-new */ /* eslint-disable no-new */
/* global MilestoneSelect */
import MilestoneSelect from './milestone_select';
import LabelsSelect from './labels_select'; import LabelsSelect from './labels_select';
import IssuableContext from './issuable_context'; import IssuableContext from './issuable_context';
import Sidebar from './right_sidebar'; import Sidebar from './right_sidebar';
......
/* eslint-disable no-new */ /* eslint-disable no-new */
import LabelsSelect from './labels_select'; import LabelsSelect from './labels_select';
/* global MilestoneSelect */
import subscriptionSelect from './subscription_select'; import subscriptionSelect from './subscription_select';
import UsersSelect from './users_select'; import UsersSelect from './users_select';
import issueStatusSelect from './issue_status_select'; import issueStatusSelect from './issue_status_select';
import MilestoneSelect from './milestone_select';
export default () => { export default () => {
new UsersSelect(); new UsersSelect();
......
/* eslint-disable class-methods-use-this, no-new */ /* eslint-disable class-methods-use-this, no-new */
/* global MilestoneSelect */
import IssuableBulkUpdateActions from './issuable_bulk_update_actions'; import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
import './milestone_select'; import MilestoneSelect from './milestone_select';
import issueStatusSelect from './issue_status_select'; import issueStatusSelect from './issue_status_select';
import subscriptionSelect from './subscription_select'; import subscriptionSelect from './subscription_select';
import LabelsSelect from './labels_select'; import LabelsSelect from './labels_select';
......
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */ /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
/* global Issuable */ /* global Issuable */
/* global ListMilestone */ /* global ListMilestone */
import _ from 'underscore'; import _ from 'underscore';
import { timeFor } from './lib/utils/datetime_utility'; import { timeFor } from './lib/utils/datetime_utility';
(function() { export default class MilestoneSelect {
this.MilestoneSelect = (function() { constructor(currentProject, els, options = {}) {
function MilestoneSelect(currentProject, els, options = {}) { if (currentProject !== null) {
var _this, $els;
if (currentProject != null) {
_this = this;
this.currentProject = typeof currentProject === 'string' ? JSON.parse(currentProject) : currentProject; this.currentProject = typeof currentProject === 'string' ? JSON.parse(currentProject) : currentProject;
} }
$els = $(els); this.init(els, options);
}
init(els, options) {
let $els = $(els);
if (!els) { if (!els) {
$els = $('.js-milestone-select'); $els = $('.js-milestone-select');
} }
$els.each(function(i, dropdown) { $els.each((i, dropdown) => {
var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, defaultNo, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, selectedMilestoneDefault, showAny, showNo, showUpcoming, showStarted, useId, showMenuAbove; let collapsedSidebarLabelTemplate, milestoneLinkNoneTemplate, milestoneLinkTemplate, selectedMilestone, selectedMilestoneDefault;
$dropdown = $(dropdown); const $dropdown = $(dropdown);
projectId = $dropdown.data('project-id'); const projectId = $dropdown.data('project-id');
milestonesUrl = $dropdown.data('milestones'); const milestonesUrl = $dropdown.data('milestones');
issueUpdateURL = $dropdown.data('issueUpdate'); const issueUpdateURL = $dropdown.data('issueUpdate');
showNo = $dropdown.data('show-no'); const showNo = $dropdown.data('show-no');
showAny = $dropdown.data('show-any'); const showAny = $dropdown.data('show-any');
showMenuAbove = $dropdown.data('showMenuAbove'); const showMenuAbove = $dropdown.data('showMenuAbove');
showUpcoming = $dropdown.data('show-upcoming'); const showUpcoming = $dropdown.data('show-upcoming');
showStarted = $dropdown.data('show-started'); const showStarted = $dropdown.data('show-started');
useId = $dropdown.data('use-id'); const useId = $dropdown.data('use-id');
defaultLabel = $dropdown.data('default-label'); const defaultLabel = $dropdown.data('default-label');
defaultNo = $dropdown.data('default-no'); const defaultNo = $dropdown.data('default-no');
issuableId = $dropdown.data('issuable-id'); const issuableId = $dropdown.data('issuable-id');
abilityName = $dropdown.data('ability-name'); const abilityName = $dropdown.data('ability-name');
$selectbox = $dropdown.closest('.selectbox'); const $selectBox = $dropdown.closest('.selectbox');
$block = $selectbox.closest('.block'); const $block = $selectBox.closest('.block');
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon'); const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
$value = $block.find('.value'); const $value = $block.find('.value');
$loading = $block.find('.block-loading').fadeOut(); const $loading = $block.find('.block-loading').fadeOut();
selectedMilestoneDefault = (showAny ? '' : null); selectedMilestoneDefault = (showAny ? '' : null);
selectedMilestoneDefault = (showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault); selectedMilestoneDefault = (showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault);
selectedMilestone = $dropdown.data('selected') || selectedMilestoneDefault; selectedMilestone = $dropdown.data('selected') || selectedMilestoneDefault;
if (issueUpdateURL) { if (issueUpdateURL) {
milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>'); milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
milestoneLinkNoneTemplate = '<span class="no-value">None</span>'; milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
...@@ -50,11 +52,10 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -50,11 +52,10 @@ import { timeFor } from './lib/utils/datetime_utility';
} }
return $dropdown.glDropdown({ return $dropdown.glDropdown({
showMenuAbove: showMenuAbove, showMenuAbove: showMenuAbove,
data: function(term, callback) { data: (term, callback) => $.ajax({
return $.ajax({
url: milestonesUrl url: milestonesUrl
}).done(function(data) { }).done((data) => {
var extraOptions = []; const extraOptions = [];
if (showAny) { if (showAny) {
extraOptions.push({ extraOptions.push({
id: 0, id: 0,
...@@ -92,23 +93,20 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -92,23 +93,20 @@ import { timeFor } from './lib/utils/datetime_utility';
$dropdown.data('glDropdown').positionMenuAbove(); $dropdown.data('glDropdown').positionMenuAbove();
} }
$(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active'); $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
}); }),
}, renderRow: milestone => `
renderRow: function(milestone) {
return `
<li data-milestone-id="${milestone.name}"> <li data-milestone-id="${milestone.name}">
<a href='#' class='dropdown-menu-milestone-link'> <a href='#' class='dropdown-menu-milestone-link'>
${_.escape(milestone.title)} ${_.escape(milestone.title)}
</a> </a>
</li> </li>
`; `,
},
filterable: true, filterable: true,
search: { search: {
fields: ['title'] fields: ['title']
}, },
selectable: true, selectable: true,
toggleLabel: function(selected, el, e) { toggleLabel: (selected, el, e) => {
if (selected && 'id' in selected && $(el).hasClass('is-active')) { if (selected && 'id' in selected && $(el).hasClass('is-active')) {
return selected.title; return selected.title;
} else { } else {
...@@ -117,25 +115,21 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -117,25 +115,21 @@ import { timeFor } from './lib/utils/datetime_utility';
}, },
defaultLabel: defaultLabel, defaultLabel: defaultLabel,
fieldName: $dropdown.data('field-name'), fieldName: $dropdown.data('field-name'),
text: function(milestone) { text: milestone => _.escape(milestone.title),
return _.escape(milestone.title); id: (milestone) => {
},
id: function(milestone) {
if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) { if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) {
return milestone.name; return milestone.name;
} else { } else {
return milestone.id; return milestone.id;
} }
}, },
isSelected: function(milestone) { isSelected: milestone => milestone.name === selectedMilestone,
return milestone.name === selectedMilestone; hidden: () => {
}, $selectBox.hide();
hidden: function() {
$selectbox.hide();
// display:block overrides the hide-collapse rule // display:block overrides the hide-collapse rule
return $value.css('display', ''); return $value.css('display', '');
}, },
opened: function(e) { opened: (e) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) { if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) {
selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault; selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
...@@ -144,11 +138,11 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -144,11 +138,11 @@ import { timeFor } from './lib/utils/datetime_utility';
$(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active'); $(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active');
}, },
vue: $dropdown.hasClass('js-issue-board-sidebar'), vue: $dropdown.hasClass('js-issue-board-sidebar'),
clicked: function(clickEvent) { clicked: (clickEvent) => {
const { $el, e } = clickEvent; const { $el, e } = clickEvent;
let selected = clickEvent.selectedObj; let selected = clickEvent.selectedObj;
var data, isIssueIndex, isMRIndex, isSelecting, page, boardsStore; let data, boardsStore;
if (!selected) return; if (!selected) return;
if (options.handleClick) { if (options.handleClick) {
...@@ -157,10 +151,10 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -157,10 +151,10 @@ import { timeFor } from './lib/utils/datetime_utility';
return; return;
} }
page = $('body').attr('data-page'); const page = $('body').attr('data-page');
isIssueIndex = page === 'projects:issues:index'; const isIssueIndex = page === 'projects:issues:index';
isMRIndex = (page === page && page === 'projects:merge_requests:index'); const isMRIndex = (page === page && page === 'projects:merge_requests:index');
isSelecting = (selected.name !== selectedMilestone); const isSelecting = (selected.name !== selectedMilestone);
selectedMilestone = isSelecting ? selected.name : selectedMilestoneDefault; selectedMilestone = isSelecting ? selected.name : selectedMilestoneDefault;
if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) { if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
e.preventDefault(); e.preventDefault();
...@@ -192,7 +186,7 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -192,7 +186,7 @@ import { timeFor } from './lib/utils/datetime_utility';
$loading.removeClass('hidden').fadeIn(); $loading.removeClass('hidden').fadeIn();
gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update')) gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
.then(function () { .then(() => {
$dropdown.trigger('loaded.gl.dropdown'); $dropdown.trigger('loaded.gl.dropdown');
$loading.fadeOut(); $loading.fadeOut();
}) })
...@@ -200,7 +194,7 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -200,7 +194,7 @@ import { timeFor } from './lib/utils/datetime_utility';
$loading.fadeOut(); $loading.fadeOut();
}); });
} else { } else {
selected = $selectbox.find('input[type="hidden"]').val(); selected = $selectBox.find('input[type="hidden"]').val();
data = {}; data = {};
data[abilityName] = {}; data[abilityName] = {};
data[abilityName].milestone_id = selected != null ? selected : null; data[abilityName].milestone_id = selected != null ? selected : null;
...@@ -210,13 +204,13 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -210,13 +204,13 @@ import { timeFor } from './lib/utils/datetime_utility';
type: 'PUT', type: 'PUT',
url: issueUpdateURL, url: issueUpdateURL,
data: data data: data
}).done(function(data) { }).done((data) => {
$dropdown.trigger('loaded.gl.dropdown'); $dropdown.trigger('loaded.gl.dropdown');
$loading.fadeOut(); $loading.fadeOut();
$selectbox.hide(); $selectBox.hide();
$value.css('display', ''); $value.css('display', '');
if (data.milestone != null) { if (data.milestone != null) {
data.milestone.full_path = _this.currentProject.full_path; data.milestone.full_path = this.currentProject.full_path;
data.milestone.remaining = timeFor(data.milestone.due_date); data.milestone.remaining = timeFor(data.milestone.due_date);
data.milestone.name = data.milestone.title; data.milestone.name = data.milestone.title;
$value.html(milestoneLinkTemplate(data.milestone)); $value.html(milestoneLinkTemplate(data.milestone));
...@@ -231,7 +225,4 @@ import { timeFor } from './lib/utils/datetime_utility'; ...@@ -231,7 +225,4 @@ import { timeFor } from './lib/utils/datetime_utility';
}); });
}); });
} }
}
return MilestoneSelect;
})();
}).call(window);
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