debian-mirror-gitlab/app/assets/javascripts/boards/components/modal/footer.vue

81 lines
2.3 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlButton } from '@gitlab/ui';
2019-09-30 21:07:59 +05:30
import footerEEMixin from 'ee_else_ce/boards/mixins/modal_footer';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as Flash } from '../../../flash';
2019-09-30 21:07:59 +05:30
import { __, n__ } from '../../../locale';
2018-10-15 14:42:47 +05:30
import modalMixin from '../../mixins/modal_mixins';
2018-12-13 13:39:08 +05:30
import boardsStore from '../../stores/boards_store';
2021-03-11 19:13:27 +05:30
import ModalStore from '../../stores/modal_store';
import ListsDropdown from './lists_dropdown.vue';
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
export default {
components: {
ListsDropdown,
2020-11-24 15:15:51 +05:30
GlButton,
2018-11-08 19:23:39 +05:30
},
2019-09-30 21:07:59 +05:30
mixins: [modalMixin, footerEEMixin],
2017-08-17 22:00:37 +05:30
data() {
return {
modal: ModalStore.store,
2018-12-13 13:39:08 +05:30
state: boardsStore.state,
2017-08-17 22:00:37 +05:30
};
},
computed: {
submitDisabled() {
return !ModalStore.selectedCount();
},
submitText() {
const count = ModalStore.selectedCount();
2019-09-30 21:07:59 +05:30
if (!count) return __('Add issues');
return n__(`Add %d issue`, `Add %d issues`, count);
2017-08-17 22:00:37 +05:30
},
},
methods: {
2018-11-08 19:23:39 +05:30
buildUpdateRequest(list) {
return {
add_label_ids: [list.label.id],
};
},
2017-08-17 22:00:37 +05:30
addIssues() {
2017-09-10 17:25:29 +05:30
const firstListIndex = 1;
const list = this.modal.selectedList || this.state.lists[firstListIndex];
2017-08-17 22:00:37 +05:30
const selectedIssues = ModalStore.getSelectedIssues();
2021-03-08 18:12:59 +05:30
const issueIds = selectedIssues.map((issue) => issue.id);
2018-11-08 19:23:39 +05:30
const req = this.buildUpdateRequest(list);
2017-08-17 22:00:37 +05:30
// Post the data to the backend
2019-09-30 21:07:59 +05:30
boardsStore.bulkUpdate(issueIds, req).catch(() => {
2018-12-13 13:39:08 +05:30
Flash(__('Failed to update issues, please try again.'));
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
selectedIssues.forEach((issue) => {
2018-12-13 13:39:08 +05:30
list.removeIssue(issue);
list.issuesSize -= 1;
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
});
2017-08-17 22:00:37 +05:30
// Add the issues on the frontend
2021-03-08 18:12:59 +05:30
selectedIssues.forEach((issue) => {
2017-08-17 22:00:37 +05:30
list.addIssue(issue);
list.issuesSize += 1;
});
this.toggleModal(false);
},
},
2018-11-08 19:23:39 +05:30
};
</script>
<template>
2019-02-15 15:39:39 +05:30
<footer class="form-actions add-issues-footer">
2018-11-08 19:23:39 +05:30
<div class="float-left">
2020-11-24 15:15:51 +05:30
<gl-button :disabled="submitDisabled" category="primary" variant="success" @click="addIssues">
2018-11-08 19:23:39 +05:30
{{ submitText }}
2020-11-24 15:15:51 +05:30
</gl-button>
2019-09-30 21:07:59 +05:30
<span class="inline add-issues-footer-to-list">{{ __('to list') }}</span>
2019-02-15 15:39:39 +05:30
<lists-dropdown />
2018-11-08 19:23:39 +05:30
</div>
2020-11-24 15:15:51 +05:30
<gl-button class="float-right" @click="toggleModal(false)">
2019-09-30 21:07:59 +05:30
{{ __('Cancel') }}
2020-11-24 15:15:51 +05:30
</gl-button>
2018-11-08 19:23:39 +05:30
</footer>
</template>