2017-05-15 22:12:43 +00:00
|
|
|
/* eslint-disable class-methods-use-this, no-new */
|
|
|
|
|
2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2020-04-21 15:21:10 +00:00
|
|
|
import { property } from 'lodash';
|
2017-05-15 22:12:43 +00:00
|
|
|
import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
|
2017-12-28 20:07:05 +00:00
|
|
|
import MilestoneSelect from './milestone_select';
|
2017-10-30 18:59:16 +00:00
|
|
|
import issueStatusSelect from './issue_status_select';
|
2017-11-20 20:28:29 +00:00
|
|
|
import subscriptionSelect from './subscription_select';
|
2017-11-01 12:32:15 +00:00
|
|
|
import LabelsSelect from './labels_select';
|
2020-07-06 09:09:20 +00:00
|
|
|
import HealthStatusSelect from 'ee_else_ce/vue_shared/components/sidebar/health_status_select/health_status_bundle';
|
|
|
|
|
2019-11-06 21:06:44 +00:00
|
|
|
import issueableEventHub from './issuables_list/eventhub';
|
2017-05-15 22:12:43 +00:00
|
|
|
|
|
|
|
const HIDDEN_CLASS = 'hidden';
|
|
|
|
const DISABLED_CONTENT_CLASS = 'disabled-content';
|
|
|
|
const SIDEBAR_EXPANDED_CLASS = 'right-sidebar-expanded issuable-bulk-update-sidebar';
|
|
|
|
const SIDEBAR_COLLAPSED_CLASS = 'right-sidebar-collapsed issuable-bulk-update-sidebar';
|
|
|
|
|
|
|
|
export default class IssuableBulkUpdateSidebar {
|
|
|
|
constructor() {
|
2019-11-06 21:06:44 +00:00
|
|
|
this.vueIssuablesListFeature = property(['gon', 'features', 'vueIssuablesList'])(window);
|
|
|
|
|
2017-05-15 22:12:43 +00:00
|
|
|
this.initDomElements();
|
|
|
|
this.bindEvents();
|
|
|
|
this.initDropdowns();
|
|
|
|
this.setupBulkUpdateActions();
|
|
|
|
}
|
|
|
|
|
|
|
|
initDomElements() {
|
2017-12-08 21:19:01 +00:00
|
|
|
this.$page = $('.layout-page');
|
2017-05-15 22:12:43 +00:00
|
|
|
this.$sidebar = $('.right-sidebar');
|
2017-06-21 07:33:39 +00:00
|
|
|
this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
|
2017-05-15 22:12:43 +00:00
|
|
|
this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');
|
|
|
|
this.$bulkEditSubmitBtn = $('.update-selected-issues');
|
|
|
|
this.$bulkUpdateEnableBtn = $('.js-bulk-update-toggle');
|
|
|
|
this.$otherFilters = $('.issues-other-filters');
|
|
|
|
this.$checkAllContainer = $('.check-all-holder');
|
|
|
|
this.$issueChecks = $('.issue-check');
|
2018-09-21 14:05:55 +00:00
|
|
|
this.$issuesList = $('.selected-issuable');
|
2017-05-15 22:12:43 +00:00
|
|
|
this.$issuableIdsInput = $('#update_issuable_ids');
|
|
|
|
}
|
|
|
|
|
|
|
|
bindEvents() {
|
|
|
|
this.$bulkUpdateEnableBtn.on('click', e => this.toggleBulkEdit(e, true));
|
|
|
|
this.$bulkEditCancelBtn.on('click', e => this.toggleBulkEdit(e, false));
|
|
|
|
this.$checkAllContainer.on('click', e => this.selectAll(e));
|
|
|
|
this.$issuesList.on('change', () => this.updateFormState());
|
|
|
|
this.$bulkEditSubmitBtn.on('click', () => this.prepForSubmit());
|
|
|
|
this.$checkAllContainer.on('click', () => this.updateFormState());
|
2019-11-06 21:06:44 +00:00
|
|
|
|
|
|
|
if (this.vueIssuablesListFeature) {
|
|
|
|
issueableEventHub.$on('issuables:updateBulkEdit', () => {
|
|
|
|
// Danger! Strong coupling ahead!
|
|
|
|
// The bulk update sidebar and its dropdowns look for .selected-issuable checkboxes, and get data on which issue
|
|
|
|
// is selected by inspecting the DOM. Ideally, we would pass the selected issuable IDs and their properties
|
|
|
|
// explicitly, but this component is used in too many places right now to refactor straight away.
|
|
|
|
|
|
|
|
this.updateFormState();
|
|
|
|
});
|
|
|
|
}
|
2017-05-15 22:12:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
initDropdowns() {
|
|
|
|
new LabelsSelect();
|
|
|
|
new MilestoneSelect();
|
2017-10-30 18:59:16 +00:00
|
|
|
issueStatusSelect();
|
2017-11-20 20:28:29 +00:00
|
|
|
subscriptionSelect();
|
2020-07-06 09:09:20 +00:00
|
|
|
|
|
|
|
if (HealthStatusSelect) {
|
|
|
|
HealthStatusSelect();
|
|
|
|
}
|
2017-05-15 22:12:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setupBulkUpdateActions() {
|
|
|
|
IssuableBulkUpdateActions.setOriginalDropdownData();
|
|
|
|
}
|
|
|
|
|
|
|
|
updateFormState() {
|
2018-09-21 14:05:55 +00:00
|
|
|
const noCheckedIssues = !$('.selected-issuable:checked').length;
|
2017-05-15 22:12:43 +00:00
|
|
|
|
|
|
|
this.toggleSubmitButtonDisabled(noCheckedIssues);
|
|
|
|
this.updateSelectedIssuableIds();
|
|
|
|
|
|
|
|
IssuableBulkUpdateActions.setOriginalDropdownData();
|
|
|
|
}
|
|
|
|
|
|
|
|
prepForSubmit() {
|
|
|
|
// if submit button is disabled, submission is blocked. This ensures we disable after
|
|
|
|
// form submission is carried out
|
|
|
|
setTimeout(() => this.$bulkEditSubmitBtn.disable());
|
|
|
|
this.updateSelectedIssuableIds();
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleBulkEdit(e, enable) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
2019-11-06 21:06:44 +00:00
|
|
|
issueableEventHub.$emit('issuables:toggleBulkEdit', enable);
|
|
|
|
|
2017-05-15 22:12:43 +00:00
|
|
|
this.toggleSidebarDisplay(enable);
|
|
|
|
this.toggleBulkEditButtonDisabled(enable);
|
|
|
|
this.toggleOtherFiltersDisabled(enable);
|
|
|
|
this.toggleCheckboxDisplay(enable);
|
2017-07-24 07:47:38 +00:00
|
|
|
}
|
|
|
|
|
2017-05-15 22:12:43 +00:00
|
|
|
updateSelectedIssuableIds() {
|
|
|
|
this.$issuableIdsInput.val(IssuableBulkUpdateSidebar.getCheckedIssueIds());
|
|
|
|
}
|
|
|
|
|
|
|
|
selectAll() {
|
|
|
|
const checkAllButtonState = this.$checkAllContainer.find('input').prop('checked');
|
|
|
|
|
|
|
|
this.$issuesList.prop('checked', checkAllButtonState);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleSidebarDisplay(show) {
|
|
|
|
this.$page.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
|
|
|
|
this.$page.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
|
2017-06-21 07:33:39 +00:00
|
|
|
this.$sidebarInnerContainer.toggleClass(HIDDEN_CLASS, !show);
|
2017-05-15 22:12:43 +00:00
|
|
|
this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
|
|
|
|
this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleBulkEditButtonDisabled(disable) {
|
|
|
|
if (disable) {
|
|
|
|
this.$bulkUpdateEnableBtn.disable();
|
|
|
|
} else {
|
|
|
|
this.$bulkUpdateEnableBtn.enable();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleCheckboxDisplay(show) {
|
2019-11-06 21:06:44 +00:00
|
|
|
this.$checkAllContainer.toggleClass(HIDDEN_CLASS, !show || this.vueIssuablesListFeature);
|
2017-05-15 22:12:43 +00:00
|
|
|
this.$issueChecks.toggleClass(HIDDEN_CLASS, !show);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleOtherFiltersDisabled(disable) {
|
|
|
|
this.$otherFilters.toggleClass(DISABLED_CONTENT_CLASS, disable);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleSubmitButtonDisabled(disable) {
|
|
|
|
if (disable) {
|
|
|
|
this.$bulkEditSubmitBtn.disable();
|
|
|
|
} else {
|
|
|
|
this.$bulkEditSubmitBtn.enable();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static getCheckedIssueIds() {
|
2018-09-21 14:05:55 +00:00
|
|
|
const $checkedIssues = $('.selected-issuable:checked');
|
2017-05-15 22:12:43 +00:00
|
|
|
|
|
|
|
if ($checkedIssues.length > 0) {
|
|
|
|
return $.map($checkedIssues, value => $(value).data('id'));
|
|
|
|
}
|
|
|
|
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
}
|