2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2020-04-21 18:09:31 +00:00
|
|
|
import { escape } from 'lodash';
|
2020-08-24 18:10:19 +00:00
|
|
|
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
|
2021-06-30 03:07:30 +00:00
|
|
|
import createFlash from '~/flash';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { __ } from '~/locale';
|
2018-03-09 20:18:59 +00:00
|
|
|
|
2017-08-14 07:26:19 +00:00
|
|
|
function isValidProjectId(id) {
|
|
|
|
return id > 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
class SidebarMoveIssue {
|
|
|
|
constructor(mediator, dropdownToggle, confirmButton) {
|
|
|
|
this.mediator = mediator;
|
|
|
|
|
|
|
|
this.$dropdownToggle = $(dropdownToggle);
|
|
|
|
this.$confirmButton = $(confirmButton);
|
|
|
|
|
|
|
|
this.onConfirmClickedWrapper = this.onConfirmClicked.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
init() {
|
|
|
|
this.initDropdown();
|
|
|
|
this.addEventListeners();
|
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
|
|
|
this.removeEventListeners();
|
|
|
|
}
|
|
|
|
|
|
|
|
initDropdown() {
|
2020-08-24 18:10:19 +00:00
|
|
|
initDeprecatedJQueryDropdown(this.$dropdownToggle, {
|
2017-08-14 07:26:19 +00:00
|
|
|
search: {
|
|
|
|
fields: ['name_with_namespace'],
|
|
|
|
},
|
|
|
|
showMenuAbove: true,
|
|
|
|
selectable: true,
|
|
|
|
filterable: true,
|
|
|
|
filterRemote: true,
|
|
|
|
multiSelect: false,
|
|
|
|
// Keep the dropdown open after selecting an option
|
|
|
|
shouldPropagate: false,
|
|
|
|
data: (searchTerm, callback) => {
|
2018-10-10 06:53:35 +00:00
|
|
|
this.mediator
|
|
|
|
.fetchAutocompleteProjects(searchTerm)
|
2017-08-14 07:26:19 +00:00
|
|
|
.then(callback)
|
2021-06-30 03:07:30 +00:00
|
|
|
.catch(() =>
|
|
|
|
createFlash({
|
|
|
|
message: __('An error occurred while fetching projects autocomplete.'),
|
|
|
|
}),
|
2019-05-03 07:42:19 +00:00
|
|
|
);
|
2017-08-14 07:26:19 +00:00
|
|
|
},
|
2020-12-24 00:10:25 +00:00
|
|
|
renderRow: (project) => `
|
2017-08-14 07:26:19 +00:00
|
|
|
<li>
|
|
|
|
<a href="#" class="js-move-issue-dropdown-item">
|
2020-04-21 18:09:31 +00:00
|
|
|
${escape(project.name_with_namespace)}
|
2017-08-14 07:26:19 +00:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
`,
|
2020-12-24 00:10:25 +00:00
|
|
|
clicked: (options) => {
|
2017-08-14 07:26:19 +00:00
|
|
|
const project = options.selectedObj;
|
|
|
|
const selectedProjectId = options.isMarking ? project.id : 0;
|
|
|
|
this.mediator.setMoveToProjectId(selectedProjectId);
|
|
|
|
|
2018-02-20 22:20:48 +00:00
|
|
|
this.$confirmButton.prop('disabled', !isValidProjectId(selectedProjectId));
|
2017-08-14 07:26:19 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
addEventListeners() {
|
|
|
|
this.$confirmButton.on('click', this.onConfirmClickedWrapper);
|
|
|
|
}
|
|
|
|
|
|
|
|
removeEventListeners() {
|
|
|
|
this.$confirmButton.off('click', this.onConfirmClickedWrapper);
|
|
|
|
}
|
|
|
|
|
|
|
|
onConfirmClicked() {
|
|
|
|
if (isValidProjectId(this.mediator.store.moveToProjectId)) {
|
2018-10-10 06:53:35 +00:00
|
|
|
this.$confirmButton.disable().addClass('is-loading');
|
2017-08-14 07:26:19 +00:00
|
|
|
|
2018-10-10 06:53:35 +00:00
|
|
|
this.mediator.moveIssue().catch(() => {
|
2021-06-30 03:07:30 +00:00
|
|
|
createFlash({ message: __('An error occurred while moving the issue.') });
|
2018-10-10 06:53:35 +00:00
|
|
|
this.$confirmButton.enable().removeClass('is-loading');
|
|
|
|
});
|
2017-08-14 07:26:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SidebarMoveIssue;
|