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

92 lines
2.2 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2018-03-17 18:26:18 +05:30
import Flash from '../../../flash';
2018-03-27 19:54:05 +05:30
import { __ } from '../../../locale';
2018-11-08 19:23:39 +05:30
import ListsDropdown from './lists_dropdown.vue';
2018-03-17 18:26:18 +05:30
import { pluralize } from '../../../lib/utils/text_utility';
2018-10-15 14:42:47 +05:30
import ModalStore from '../../stores/modal_store';
import modalMixin from '../../mixins/modal_mixins';
2018-12-13 13:39:08 +05:30
import boardsStore from '../../stores/boards_store';
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
export default {
components: {
ListsDropdown,
},
2018-10-15 14:42:47 +05:30
mixins: [modalMixin],
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();
2018-03-17 18:26:18 +05:30
return `Add ${count > 0 ? count : ''} ${pluralize('issue', 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();
2018-03-17 18:26:18 +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
2018-12-13 13:39:08 +05:30
gl.boardService.bulkUpdate(issueIds, req).catch(() => {
Flash(__('Failed to update issues, please try again.'));
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
selectedIssues.forEach(issue => {
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
2018-12-13 13:39:08 +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>
<footer
class="form-actions add-issues-footer"
>
<div class="float-left">
2017-08-17 22:00:37 +05:30
<button
2018-11-08 19:23:39 +05:30
:disabled="submitDisabled"
class="btn btn-success"
2017-08-17 22:00:37 +05:30
type="button"
2018-11-08 19:23:39 +05:30
@click="addIssues"
>
{{ submitText }}
2017-08-17 22:00:37 +05:30
</button>
2018-11-08 19:23:39 +05:30
<span class="inline add-issues-footer-to-list">
to list
</span>
<lists-dropdown/>
</div>
<button
class="btn btn-default float-right"
type="button"
@click="toggleModal(false)"
>
Cancel
</button>
</footer>
</template>