gitlab-org--gitlab-foss/app/assets/javascripts/issue.js

155 lines
5.3 KiB
JavaScript
Raw Normal View History

/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
import $ from 'jquery';
2018-01-30 09:53:28 -05:00
import axios from './lib/utils/axios_utils';
2017-11-13 04:11:54 -05:00
import { addDelimiter } from './lib/utils/text_utility';
2018-01-30 09:53:28 -05:00
import flash from './flash';
import TaskList from './task_list';
import CreateMergeRequestDropdown from './create_merge_request_dropdown';
2017-07-07 11:04:43 -04:00
import IssuablesHelper from './helpers/issuables_helper';
2016-07-24 16:45:11 -04:00
export default class Issue {
2017-03-01 14:54:04 -05:00
constructor() {
if ($('a.btn-close').length) this.initIssueBtnEventListeners();
Issue.$btnNewBranch = $('#new-branch');
Issue.createMrDropdownWrap = document.querySelector('.create-mr-dropdown-wrap');
2017-03-01 14:54:04 -05:00
Issue.initMergeRequests();
Issue.initRelatedBranches();
this.closeButtons = $('a.btn-close');
this.reopenButtons = $('a.btn-reopen');
2017-06-07 06:18:35 -04:00
this.initCloseReopenReport();
if (Issue.createMrDropdownWrap) {
this.createMergeRequestDropdown = new CreateMergeRequestDropdown(Issue.createMrDropdownWrap);
}
// Listen to state changes in the Vue app
document.addEventListener('issuable_vue_app:change', (event) => {
this.updateTopState(event.detail.isClosed, event.detail.data);
});
}
/**
* This method updates the top area of the issue.
*
* Once the issue state changes, either through a click on the top area (jquery)
* or a click on the bottom area (Vue) we need to update the top area.
*
* @param {Boolean} isClosed
* @param {Array} data
* @param {String} issueFailMessage
*/
updateTopState(isClosed, data, issueFailMessage = 'Unable to update this issue at this time.') {
if ('id' in data) {
const isClosedBadge = $('div.status-box-issue-closed');
const isOpenBadge = $('div.status-box-open');
const projectIssuesCounter = $('.issue_counter');
isClosedBadge.toggleClass('hidden', !isClosed);
isOpenBadge.toggleClass('hidden', isClosed);
$(document).trigger('issuable:change', isClosed);
this.toggleCloseReopenButton(isClosed);
let numProjectIssues = Number(projectIssuesCounter.first().text().trim().replace(/[^\d]/, ''));
numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
projectIssuesCounter.text(addDelimiter(numProjectIssues));
if (this.createMergeRequestDropdown) {
if (isClosed) {
this.createMergeRequestDropdown.unavailable();
this.createMergeRequestDropdown.disable();
} else {
// We should check in case a branch was created in another tab
this.createMergeRequestDropdown.checkAbilityToCreateBranch();
}
}
} else {
flash(issueFailMessage);
}
2017-03-01 14:54:04 -05:00
}
2016-07-24 16:45:11 -04:00
initIssueBtnEventListeners() {
const issueFailMessage = 'Unable to update this issue at this time.';
return $(document).on('click', '.js-issuable-actions a.btn-close, .js-issuable-actions a.btn-reopen', (e) => {
var $button, shouldSubmit, url;
2017-03-01 14:54:04 -05:00
e.preventDefault();
e.stopImmediatePropagation();
$button = $(e.currentTarget);
shouldSubmit = $button.hasClass('btn-comment');
2017-03-01 14:54:04 -05:00
if (shouldSubmit) {
Issue.submitNoteForm($button.closest('form'));
2017-03-01 14:54:04 -05:00
}
2017-06-07 06:18:35 -04:00
this.disableCloseReopenButton($button);
2017-06-07 06:18:35 -04:00
url = $button.attr('href');
2018-01-30 09:53:28 -05:00
return axios.put(url)
.then(({ data }) => {
const isClosed = $button.hasClass('btn-close');
this.updateTopState(isClosed, data);
})
2018-01-30 09:53:28 -05:00
.catch(() => flash(issueFailMessage))
.then(() => {
this.disableCloseReopenButton($button, false);
2016-07-24 16:45:11 -04:00
});
2017-03-01 14:54:04 -05:00
});
}
2016-07-24 16:45:11 -04:00
2017-06-07 06:18:35 -04:00
initCloseReopenReport() {
2017-07-07 11:04:43 -04:00
this.closeReopenReportToggle = IssuablesHelper.initCloseReopenReport();
2017-06-07 06:18:35 -04:00
2017-07-07 11:04:43 -04:00
if (this.closeButtons) this.closeButtons = this.closeButtons.not('.issuable-close-button');
if (this.reopenButtons) this.reopenButtons = this.reopenButtons.not('.issuable-close-button');
2017-06-07 06:18:35 -04:00
}
disableCloseReopenButton($button, shouldDisable) {
if (this.closeReopenReportToggle) {
this.closeReopenReportToggle.setDisable(shouldDisable);
} else {
$button.prop('disabled', shouldDisable);
}
}
toggleCloseReopenButton(isClosed) {
if (this.closeReopenReportToggle) this.closeReopenReportToggle.updateButton(isClosed);
this.closeButtons.toggleClass('hidden', isClosed);
this.reopenButtons.toggleClass('hidden', !isClosed);
}
2017-03-01 14:54:04 -05:00
static submitNoteForm(form) {
var noteText;
noteText = form.find("textarea.js-note-text").val();
if (noteText && noteText.trim().length > 0) {
2017-03-01 14:54:04 -05:00
return form.submit();
}
}
2016-07-24 16:45:11 -04:00
2017-03-01 14:54:04 -05:00
static initMergeRequests() {
var $container;
$container = $('#merge-requests');
2018-01-30 09:53:28 -05:00
return axios.get($container.data('url'))
.then(({ data }) => {
if ('html' in data) {
$container.html(data.html);
}
}).catch(() => flash('Failed to load referenced merge requests'));
2017-03-01 14:54:04 -05:00
}
2016-07-24 16:45:11 -04:00
2017-03-01 14:54:04 -05:00
static initRelatedBranches() {
var $container;
$container = $('#related-branches');
2018-01-30 09:53:28 -05:00
return axios.get($container.data('url'))
.then(({ data }) => {
if ('html' in data) {
$container.html(data.html);
}
}).catch(() => flash('Failed to load related branches'));
2017-03-01 14:54:04 -05:00
}
}