debian-mirror-gitlab/app/assets/javascripts/issuable_bulk_update_sidebar.js

173 lines
5.6 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
/* eslint-disable class-methods-use-this, no-new */
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-05-24 23:13:21 +05:30
import { property } from 'lodash';
2017-09-10 17:25:29 +05:30
import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
2018-03-17 18:26:18 +05:30
import issueStatusSelect from './issue_status_select';
2020-11-24 15:15:51 +05:30
import issueableEventHub from './issues_list/eventhub';
2021-03-11 19:13:27 +05:30
import LabelsSelect from './labels_select';
import MilestoneSelect from './milestone_select';
import subscriptionSelect from './subscription_select';
2017-09-10 17:25:29 +05:30
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-12-26 22:10:19 +05:30
this.vueIssuablesListFeature = property(['gon', 'features', 'vueIssuablesList'])(window);
2017-09-10 17:25:29 +05:30
this.initDomElements();
this.bindEvents();
this.initDropdowns();
this.setupBulkUpdateActions();
}
initDomElements() {
2018-03-17 18:26:18 +05:30
this.$page = $('.layout-page');
2017-09-10 17:25:29 +05:30
this.$sidebar = $('.right-sidebar');
this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
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');
2021-04-29 21:17:54 +05:30
this.$issuesList = $('.issuable-list input[type="checkbox"]');
2017-09-10 17:25:29 +05:30
this.$issuableIdsInput = $('#update_issuable_ids');
}
bindEvents() {
2021-03-08 18:12:59 +05:30
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));
2017-09-10 17:25:29 +05:30
this.$issuesList.on('change', () => this.updateFormState());
this.$bulkEditSubmitBtn.on('click', () => this.prepForSubmit());
this.$checkAllContainer.on('click', () => this.updateFormState());
2019-12-26 22:10:19 +05:30
2021-04-29 21:17:54 +05:30
// The event hub connects this bulk update logic with `issues_list_app.vue`.
// We can remove it once we've refactored the issues list page bulk edit sidebar to Vue.
// https://gitlab.com/gitlab-org/gitlab/-/issues/325874
issueableEventHub.$on('issuables:enableBulkEdit', () => this.toggleBulkEdit(null, true));
issueableEventHub.$on('issuables:updateBulkEdit', () => this.updateFormState());
2017-09-10 17:25:29 +05:30
}
initDropdowns() {
new LabelsSelect();
new MilestoneSelect();
2018-03-17 18:26:18 +05:30
issueStatusSelect();
subscriptionSelect();
2020-07-28 23:09:34 +05:30
if (IS_EE) {
import('ee/vue_shared/components/sidebar/health_status_select/health_status_bundle')
.then(({ default: HealthStatusSelect }) => {
HealthStatusSelect();
})
.catch(() => {});
}
if (IS_EE) {
import('ee/vue_shared/components/sidebar/epics_select/epics_select_bundle')
.then(({ default: EpicSelect }) => {
EpicSelect();
})
.catch(() => {});
}
2021-03-11 19:13:27 +05:30
if (IS_EE) {
import('ee/vue_shared/components/sidebar/iterations_dropdown_bundle')
.then(({ default: iterationsDropdown }) => {
iterationsDropdown();
})
.catch((e) => {
throw e;
});
}
2017-09-10 17:25:29 +05:30
}
setupBulkUpdateActions() {
IssuableBulkUpdateActions.setOriginalDropdownData();
}
updateFormState() {
2021-04-29 21:17:54 +05:30
const noCheckedIssues = !$('.issuable-list input[type="checkbox"]:checked').length;
2017-09-10 17:25:29 +05:30
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) {
2021-04-29 21:17:54 +05:30
e?.preventDefault();
2017-09-10 17:25:29 +05:30
2019-12-26 22:10:19 +05:30
issueableEventHub.$emit('issuables:toggleBulkEdit', enable);
2017-09-10 17:25:29 +05:30
this.toggleSidebarDisplay(enable);
this.toggleBulkEditButtonDisabled(enable);
this.toggleOtherFiltersDisabled(enable);
this.toggleCheckboxDisplay(enable);
}
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);
this.$sidebarInnerContainer.toggleClass(HIDDEN_CLASS, !show);
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-12-26 22:10:19 +05:30
this.$checkAllContainer.toggleClass(HIDDEN_CLASS, !show || this.vueIssuablesListFeature);
2017-09-10 17:25:29 +05:30
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() {
2021-04-29 21:17:54 +05:30
const $checkedIssues = $('.issuable-list input[type="checkbox"]:checked');
2017-09-10 17:25:29 +05:30
if ($checkedIssues.length > 0) {
2021-03-08 18:12:59 +05:30
return $.map($checkedIssues, (value) => $(value).data('id'));
2017-09-10 17:25:29 +05:30
}
return [];
}
}